VueUiQuadrant improved zoom animation

VueUiQuadrant :

• improved zoom animation
• new config option: config.zoomAnimationFrames

types/vue-data-ui.d.ts:

• fixed error in VueUiQuickChartDatasetObjectItem type

VueUiQuadrant animation fix

VueUiQuadrant

Removed janky animation when zooming on a quadrant's side.
A better animation is in the works.

VueUiCursor new component

VueUiCursor

This fancy customizable mouse cursor also works on mobile.

Use with caution, on home pages, or pages were user interactions are minimal, as this kind of device can be annoying if too present.

VueUiQuickChart fixes

VueUiQuickChart : fixed issues in fullscreen mode (tooltip & legend not showing)

Time labels rotation

The following components have a new config option to allow time labels to be rotated. It is not a recommended practice, as it can be uncomfortable for users to read, but a slight rotation (negative rotation for ltr writing systems) can help showing long labels, if using abbreviations is not allowed by your requirements.

VueUiXy
config.chart.grid.labels.xAxisLabels.rotation

VueUiQuickChart
config.xyPeriodLabelsRotation

VueUiQuickChart new component

VueUiQuickChart: create a quick line, bar or donut chart. The type of chart is computed from the shape of the dataset.

Updated default color palette

v2.1.2

Updated default color palette

VueUiDonut #dataLabel slot

Custom data labels can be used on VueUiDonut, through the #dataLabel scoped slot. Anything can be placed inside (icon, image, mini chart...).

Set the config.style.chart.layout.labels.dataLabels.useLabelSlots to true, and then use the slot inside the component:

<VueUiDonut
  :config="config"
  :dataset="dataset"
/>
  <template #dataLabel="{ datapoint, isBlur, isVisible, isSafari, textAlign, flexAlign, percentage }">
    <div :style="`background:${datapoint.color}`">
      {{ datapoint.name }} : {{ percentage }}
    </div>
  </template>
</VueUiDonut>

VueUiAccordion improved features

• All slots expose the isOpen variable
• Added config.open option, to manage the initial open state
• Added config.maxHeight option

VueUiAccordion new component

Added a highly customizable accordion component.