Releases: graphieros/vue-data-ui
Releases · graphieros/vue-data-ui
v3.2.8
v3.2.7
VueUiAccordion
- Disable pointer events on content when the accordion is closed.
v3.2.6
VueUiTable
- Add config options to customize header action buttons
const config = ref({
style: {
th: {
buttons: {
filter: {
inactive: {
backgroundColor: '#E1E5E8',
color: '#2D353C',
},
active: {
backgroundColor: '#1f77b4',
color: '#FFFFFF',
},
},
cancel: {
inactive: {
backgroundColor: '#E1E5E8',
color: '#2D353C',
},
active: {
backgroundColor: '#F17171',
color: '#FFFFFF',
},
},
}
}
}
})VueUiXyCanvas
timeLabelsconfiguration is moved toxinstead ofy. This change is backwards compatible: your existing time labels configuration under Y will still work.
VueUiXy
- Allow partial configuration for
highlightArea
v3.2.5
VueUiTable #255
Add optional title:
const config = ref({
style: {
title: {
text: 'My title',
color: '#2D353C',
backgroundColor: '#FFFFFF',
fontSize: 16,
bold: true,
textAlign: 'center',
paddingLeft: 0,
paddingRight: 0,
subtitle: {
text: 'My subtitle',
fontSize: 14,
color: '#6A6A6A',
bold: false,
}
}
}
})v3.2.4
VueUiAnnotator
Layout improvements (new icons)
New features:
- keyboard shortcuts
- undo + redo
- download PNG
New config attributes:
const config = ref({
alwaysVisible: false, // New: when set to false, annotations are only visible when the annotations menu is open
style: {
showImage: true, // New: show download to PNG button
},
translations: {
tooltipRedo: 'Redo last shape', // New
tooltipImage: 'Download PNG', // New
}
})VueUiAccordion
- Add
@toggleevent
<VueUiAccordion
:config="config"
@toggle="onToggle"
>
...
</VueUiAccordion>- New config attributes to customize the header icon:
const config = ref({
head: {
icon: 'arrowRight', // New: available built-in icons (see VueUiIcon)
iconSize: 20, // New
}
})v3.2.2
VueUiTable
- Improve line & bar chart layouts with zoom input, and date labels
New config attributes:
const config = ref({
style: {
chart: {
layout: {
timeLabels: { // new
showOnlyAtModulo: true,
modulo: 12
},
datetimeFormatter: { //new
enable: true,
locale: 'en',
useUTC: false,
januaryAsYear: true,
options: {
year: 'yyyy',
month: "MMM 'yy",
day: 'dd MMM',
hour: 'HH:mm',
minute: 'HH:mm:ss',
second: 'HH:mm:ss'
}
},
zoom: { // new
show: true,
}
}
}
}
})VueUiWheel
- Improve 3d options with depth
Enregistrement.de.l.ecran.2025-09-26.a.08.19.18.mov
New config option:
const config = ref({
style: {
chart: {
layout: {
wheel: {
ticks: {
depth3d: 0, // New: default 0.
}
}
}
}
}
})Other
- Fix trend calculation in VueUiXy (when dataset.useProgression is true) and VueUiTable (line & bar charts)
v3.2.1
VueUiWheel #254
Add new optional 3d mode
Enregistrement.de.l.ecran.2025-09-23.a.07.50.05.mov
wh.mov
Examples and code snippets in the docs
New config attributes:
const config = ref({
layout: "3d", // New. Default: 'classic' (previous behavior)
style: {
chart: {
layout: {
wheel: {
tiltAngle3d: 50, // New. Default: 50, used in 3d mode
},
percentage: {
offsetX: 0, // New. Default: 0
offsetY: 0, // New. Default: 0
stroke: 'transparent', // New. Default: 'transparent', apply border color on the label
strokeWidth: 0, // New. Default: 0
}
}
}
}
})VueUiQuickChart
- Fix possible dasharray issues in line mode, when animation is enabled and line is too 'long'.
VueUiXy
- In zoom minimap, when cutNullValues is false, join non-null datapoints for line series (same behavior as main chart)
v3.2.0
Treeshaking #252
Usage:
BEFORE:
The old way, which still works, so nothing will break.
// still works, for backwards compatibility, but ships the whole library
import { VueUiXy } from "vue-data-ui";AFTER:
// only ships the component and its dependencies
import VueUiXy from "vue-data-ui/vue-ui-xy";In Nuxt, to declare components globally in vue-data-ui.client.ts for example:
import { defineNuxtPlugin } from '#app'
import { defineAsyncComponent } from 'vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VueUiXy', defineAsyncComponent(() => import('vue-data-ui/vue-ui-xy')))
// add only the components you actually use
})Checkout our Nuxt boilerplate to get started
// Will include all components in the build, but will lazy load only the component consumed to the client (unchanged behavior)
import { VueDataUi } from "vue-data-ui";v3.1.18
Technical release
- Preempt potential errors on some components when props.dataset is not provided
v3.1.17
VueUiXy
Fix regression on zoom range inputs in non-minimap mode.