vue-data-ui 3.0.0-next.0 → 3.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/README.md +108 -67
  2. package/dist/{Arrow-CzFtSJ1v.js → Arrow-Dck2Ea5K.js} +1 -1
  3. package/dist/{BaseDraggableDialog-0S5xhs2P.js → BaseDraggableDialog-CatHZ1ns.js} +2 -2
  4. package/dist/{BaseIcon-DoDjTdD5.js → BaseIcon-BmZ4MREl.js} +1 -1
  5. package/dist/{ColorPicker-BGRchgqQ.js → ColorPicker-C1MXyD9Q.js} +2 -2
  6. package/dist/{DataTable-BBbOgI-a.js → DataTable-CgL0Rz0x.js} +2 -2
  7. package/dist/{Legend-Q4bOb-Nf.js → Legend-CYbP3Kfg.js} +12 -11
  8. package/dist/{NonSvgPenAndPaper-DNKRvsBB.js → NonSvgPenAndPaper-CcbcJm_U.js} +3 -3
  9. package/dist/{PackageVersion-D0VPY8-5.js → PackageVersion-CAkNkiIG.js} +1 -1
  10. package/dist/{PenAndPaper-DhBJsnob.js → PenAndPaper-Cx1-5zdD.js} +32 -32
  11. package/dist/{Shape-DbsLJ-SE.js → Shape-DBXkGxKt.js} +1 -1
  12. package/dist/{Slicer-DZEFp2GU.js → Slicer-nrMi5hzj.js} +2 -2
  13. package/dist/{SparkTooltip-CoOJR62O.js → SparkTooltip-fNzL4pIU.js} +1 -1
  14. package/dist/{Title-D29apS4l.js → Title-pVYRzQXY.js} +1 -1
  15. package/dist/Tooltip-NwATo4ZJ.js +157 -0
  16. package/dist/{UserOptions-Bdit7AWO.js → UserOptions-DAsRxxrf.js} +137 -129
  17. package/dist/{dom-to-png-BdPIrHOF.js → dom-to-png-BF_4H_6u.js} +1 -1
  18. package/dist/img-ku4zevVD.js +33 -0
  19. package/dist/{index-DMqAxz7R.js → index-BzfnuLnw.js} +1199 -1135
  20. package/dist/pdf-CguiIsUc.js +58 -0
  21. package/dist/style.css +1 -1
  22. package/dist/types/vue-data-ui.d.cts +1051 -217
  23. package/dist/types/vue-data-ui.d.ts +1051 -217
  24. package/dist/useLoading-Bt5Doa8m.js +28 -0
  25. package/dist/{useNestedProp-YgN3FV_8.js → useNestedProp-DorElw91.js} +1 -1
  26. package/dist/{usePrinter-COkTjv6C.js → usePrinter-C9qkgv0r.js} +2 -2
  27. package/dist/vue-data-ui-DQef_oFO.js +314 -0
  28. package/dist/vue-data-ui.js +13 -13
  29. package/dist/{vue-ui-3d-bar-Ojgjl20n.js → vue-ui-3d-bar-DPSamIA-.js} +261 -245
  30. package/dist/{vue-ui-accordion-P6eFHGQp.js → vue-ui-accordion-DgZK-qDz.js} +3 -3
  31. package/dist/{vue-ui-age-pyramid-IcMpAhiw.js → vue-ui-age-pyramid-DVeGKvf9.js} +233 -217
  32. package/dist/{vue-ui-annotator-Bk7d86-x.js → vue-ui-annotator-6ikkK-FK.js} +2 -2
  33. package/dist/{vue-ui-bullet-DCvWbCPk.js → vue-ui-bullet-Bg4hfFk2.js} +172 -156
  34. package/dist/{vue-ui-candlestick-DCf-88Yv.js → vue-ui-candlestick-Bi59FGXn.js} +271 -254
  35. package/dist/{vue-ui-carousel-table-DEsl0XUh.js → vue-ui-carousel-table-DitKhrFT.js} +17 -16
  36. package/dist/{vue-ui-chestnut-Cg10-3wu.js → vue-ui-chestnut-D8wGAZod.js} +419 -403
  37. package/dist/{vue-ui-chord-BWYzR6vf.js → vue-ui-chord-C-uTVCDP.js} +256 -240
  38. package/dist/{vue-ui-circle-pack-CO2Ra2-5.js → vue-ui-circle-pack-CPy6xcxv.js} +230 -214
  39. package/dist/{vue-ui-cursor-BbYHJDbV.js → vue-ui-cursor-Dd7vUd0q.js} +2 -2
  40. package/dist/{vue-ui-dashboard-DkCnNuse.js → vue-ui-dashboard-CKurbu8M.js} +62 -62
  41. package/dist/{vue-ui-digits-DRsphHt2.js → vue-ui-digits-DfdZI11G.js} +2 -2
  42. package/dist/{vue-ui-donut-evolution-B5F2-0bh.js → vue-ui-donut-evolution-CKbLO8yR.js} +370 -357
  43. package/dist/vue-ui-donut-tECBFvud.js +1532 -0
  44. package/dist/{vue-ui-dumbbell-DqqSxoSh.js → vue-ui-dumbbell-DI5Lj3r_.js} +216 -200
  45. package/dist/{vue-ui-flow-CTIcUJgV.js → vue-ui-flow-CjU48s9z.js} +217 -201
  46. package/dist/{vue-ui-funnel-k7KD7Xoc.js → vue-ui-funnel-DM_5vHZ4.js} +213 -197
  47. package/dist/{vue-ui-galaxy-C9EHaP4I.js → vue-ui-galaxy-ocvZgZJx.js} +215 -202
  48. package/dist/{vue-ui-gauge-CBiM_1-n.js → vue-ui-gauge-DajNoY-D.js} +220 -204
  49. package/dist/{vue-ui-gizmo-CAc7b2oK.js → vue-ui-gizmo-DTnzeQbm.js} +3 -3
  50. package/dist/{vue-ui-heatmap-B3ubrP2v.js → vue-ui-heatmap-CfBS8jQe.js} +244 -224
  51. package/dist/{vue-ui-history-plot-XCqccO3b.js → vue-ui-history-plot-BuOPWQoP.js} +268 -252
  52. package/dist/{vue-ui-kpi-DTGMDjaZ.js → vue-ui-kpi-DLGHOIRj.js} +3 -3
  53. package/dist/{vue-ui-mini-loader-Cn_7nvVq.js → vue-ui-mini-loader-CHAHi4c9.js} +2 -2
  54. package/dist/{vue-ui-molecule-BugMXFAK.js → vue-ui-molecule-R5-oDFeW.js} +204 -188
  55. package/dist/{vue-ui-mood-radar-Cv4dHZPL.js → vue-ui-mood-radar-Ddf2gaES.js} +206 -190
  56. package/dist/vue-ui-nested-donuts-CksklV83.js +1177 -0
  57. package/dist/{vue-ui-onion-Bha2hRAb.js → vue-ui-onion-D2n4zUkV.js} +196 -180
  58. package/dist/{vue-ui-parallel-coordinate-plot-DWJ2DWx4.js → vue-ui-parallel-coordinate-plot-CNWQqlxf.js} +194 -178
  59. package/dist/{vue-ui-quadrant-BKHZoTml.js → vue-ui-quadrant-CxNj2FEx.js} +321 -305
  60. package/dist/{vue-ui-quick-chart-D_k3lbU8.js → vue-ui-quick-chart-Bm_VmhJR.js} +347 -331
  61. package/dist/{vue-ui-radar-Co4EOjSk.js → vue-ui-radar-DSYMQJ6K.js} +193 -177
  62. package/dist/{vue-ui-rating-dtNN0EdX.js → vue-ui-rating-BiQpwXnc.js} +2 -2
  63. package/dist/{vue-ui-relation-circle-CR4UpQzM.js → vue-ui-relation-circle-Cdxe78Bm.js} +188 -172
  64. package/dist/{vue-ui-ridgeline-BKX97EnR.js → vue-ui-ridgeline-DpeM2hRi.js} +212 -196
  65. package/dist/{vue-ui-rings-EPTwyt6D.js → vue-ui-rings-BenmQHKv.js} +223 -210
  66. package/dist/{vue-ui-scatter-BlxzblSR.js → vue-ui-scatter-mDMY1H6U.js} +288 -273
  67. package/dist/{vue-ui-skeleton-CjN2ZdgT.js → vue-ui-skeleton-Ch_XkFuP.js} +3 -3
  68. package/dist/{vue-ui-smiley-DdF_ErYG.js → vue-ui-smiley-DTig5lTU.js} +2 -2
  69. package/dist/{vue-ui-spark-trend-RdOlCuT9.js → vue-ui-spark-trend-BkDsp8E0.js} +3 -3
  70. package/dist/{vue-ui-sparkbar-DWufRGcN.js → vue-ui-sparkbar-CgqoyBOm.js} +3 -3
  71. package/dist/{vue-ui-sparkgauge-IP1O3qyT.js → vue-ui-sparkgauge-B4jR_Y62.js} +3 -3
  72. package/dist/{vue-ui-sparkhistogram-Cnv9xZ8H.js → vue-ui-sparkhistogram-DfxjglLy.js} +4 -4
  73. package/dist/{vue-ui-sparkline-CYgeD5V3.js → vue-ui-sparkline-M3QR8xJE.js} +3 -3
  74. package/dist/{vue-ui-sparkstackbar-BCwoK9xd.js → vue-ui-sparkstackbar-B2Ls-Mb8.js} +3 -3
  75. package/dist/{vue-ui-stackbar-CqFIvfrK.js → vue-ui-stackbar-DIHkn6__.js} +497 -474
  76. package/dist/{vue-ui-strip-plot-Dq-kDRai.js → vue-ui-strip-plot-B_ZLbu2D.js} +241 -225
  77. package/dist/{vue-ui-table-vaIdQnPl.js → vue-ui-table-BhymhDOh.js} +3 -3
  78. package/dist/{vue-ui-table-heatmap-U_Td0cdh.js → vue-ui-table-heatmap-DokRh4dS.js} +26 -25
  79. package/dist/{vue-ui-table-sparkline-DkOaHx5L.js → vue-ui-table-sparkline-DxBZGKZJ.js} +8 -7
  80. package/dist/{vue-ui-thermometer-CzckBZgs.js → vue-ui-thermometer-e2L6IdF-.js} +170 -154
  81. package/dist/{vue-ui-timer-DSdUshUs.js → vue-ui-timer-BG2EwK3o.js} +5 -5
  82. package/dist/vue-ui-tiremarks-nzQH7woJ.js +358 -0
  83. package/dist/vue-ui-treemap-CZxyi6fl.js +965 -0
  84. package/dist/{vue-ui-vertical-bar-Dd4sYeAC.js → vue-ui-vertical-bar-DahdX1Sn.js} +382 -360
  85. package/dist/{vue-ui-waffle-DusUVY6y.js → vue-ui-waffle-D399D4UE.js} +234 -221
  86. package/dist/vue-ui-wheel-DtcwtHzJ.js +352 -0
  87. package/dist/{vue-ui-word-cloud-_7uYjJ5A.js → vue-ui-word-cloud-CTDceQsf.js} +249 -233
  88. package/dist/{vue-ui-world-COIyBHII.js → vue-ui-world-BjNSbqMZ.js} +239 -223
  89. package/dist/vue-ui-xy-BkTP-JpK.js +2958 -0
  90. package/dist/{vue-ui-xy-canvas-CuYRyub2.js → vue-ui-xy-canvas-BKAowbe0.js} +447 -431
  91. package/package.json +2 -2
  92. package/dist/Tooltip-hVZUY_s5.js +0 -149
  93. package/dist/img-BeMVTwmF.js +0 -20
  94. package/dist/pdf-DPxOdzfi.js +0 -51
  95. package/dist/useMouse-AicQS8Vf.js +0 -13
  96. package/dist/vue-data-ui-nceqWRts.js +0 -301
  97. package/dist/vue-ui-donut-DSE7ubVv.js +0 -1315
  98. package/dist/vue-ui-nested-donuts-CYe0Are_.js +0 -1154
  99. package/dist/vue-ui-tiremarks-B2WWklqG.js +0 -342
  100. package/dist/vue-ui-treemap-D1dgDhjG.js +0 -952
  101. package/dist/vue-ui-wheel-ClsKBh52.js +0 -336
  102. package/dist/vue-ui-xy-C_OUyzTC.js +0 -3135
package/README.md CHANGED
@@ -133,7 +133,7 @@ Or you can import just what you need in your files:
133
133
  <script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>
134
134
  ```
135
135
 
136
- Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
136
+ You can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
137
137
 
138
138
  ```js
139
139
  <script setup>
@@ -169,6 +169,21 @@ Note that the following utility components are not supported by the universal Vu
169
169
 
170
170
  Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
171
171
 
172
+ ## Vue Data UI version2 -> version3 migration
173
+
174
+ Vue Data UI v3 is easy to migrate to:
175
+
176
+ - If a component has new v3 features, it contains the `config.autoSize` attribute, set to `true` by default
177
+ - To restore v2 behavior set config.autoSize to `false`
178
+
179
+ ### Version 3 features
180
+
181
+ - `config.autoSize` (default: true) set to true, sets up the chart layout automatically, hides or shows some data labels when they can be
182
+
183
+ - `config.loading` (default: false) toggle loading state manually, to display a beautiful skeleton loader which uses the same chart component and shares layout features derived from your config. This skeleton loader is also triggered automatically if the provided dataset is undefined.
184
+
185
+ - `config.debug` (default: false) set to true to show warning messages during development, turn off for production.
186
+
172
187
  ## Nuxt
173
188
 
174
189
  [This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
@@ -413,68 +428,68 @@ From the dataset you pass into the props, this component will produce the most a
413
428
 
414
429
  ### Mini charts
415
430
 
416
- | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
417
- | --------------------- | ---------------------------------- | --------------------------- | --------------------------------------- | ---------------------------------------------------- | -------------- | ------ |
418
- | `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg`, `#before`, `#chart-background`, `#tooltip` | ✅ | ✅ |
419
- | `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | `#data-label`, `#title` | ❌ | ✅ |
420
- | `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
421
- | `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | `#chart-background` | ❌ | ✅ |
422
- | `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | `#chart-background` | ❌ | ✅ |
423
- | `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | `#chart-background` | ❌ | ✅ |
424
- | `VueUiGizmo` | `VueUiGizmoDataset` | `VueUiGizmoConfig` | ❌ | ❌ | ❌ | ❌ |
425
- | `VueUiBullet` | `VueUiBulletDataset` | `VueUiBulletConfig` | `generatePdf`, `generateImg`, `getData` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
431
+ | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
432
+ | --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------------- | ---------------------------------------------------- | -------------- | ------ |
433
+ | `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg`, `#before`, `#chart-background`, `#tooltip` | ✅ | ✅ |
434
+ | `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | `#data-label`, `#title` | ❌ | ✅ |
435
+ | `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
436
+ | `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | `#chart-background` | ❌ | ✅ |
437
+ | `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | `#chart-background` | ❌ | ✅ |
438
+ | `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | `#chart-background` | ❌ | ✅ |
439
+ | `VueUiGizmo` | `VueUiGizmoDataset` | `VueUiGizmoConfig` | ❌ | ❌ | ❌ | ❌ |
440
+ | `VueUiBullet` | `VueUiBulletDataset` | `VueUiBulletConfig` | `generatePdf`, `generateImg`, `getData`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
426
441
 
427
442
  ### Charts
428
443
 
429
- | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
430
- | ----------------------------- | ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |
431
- | `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
432
- | `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background` | ✅ | ✅ |
433
- | `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
434
- | `VueUiChord` | `VueUiChordDataset` | `VueUiChordConfig` | `@selectLegend`, `@selectGroup`, `@selectRibbon`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
435
- | `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label` | ✅ | ✅ |
436
- | `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
437
- | `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
438
- | `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
439
- | `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#tooltip-before`, `#tooltip-after`, | ✅ | ✅ |
440
- | `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
441
- | `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
442
- | `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
443
- | `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
444
- | `VueUiHistoryPlot` | `VueUiHistoryPlotDatasetItem[]` | `VueUiHistoryPlotConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
445
- | `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `@selectNode`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#node`, `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
446
- | `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
447
- | `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
448
- | `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
449
- | `VueUiParallelCoordinatePlot` | `VueUiParallelCoordinatePlotDatasetItem[]` | `VueUiParallelCoordinatePlotConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background` | ✅ | ✅ |
450
- | `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
451
- | `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
452
- | `VueUiRidgeline` | `VueUiRidgelineDatasetItem[]` | `VueUiRidgelineConfig` | `@selectLegend`, `@selectX`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
453
- | `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
454
- | `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
455
- | `VueUiStackbar` | `VueUiStackbarDatasetItem[]` | `VueUiStackbarConfig` | `@selectLegend`, `@selectDatapoint`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
456
- | `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
457
- | `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
458
- | `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
459
- | `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow` | ✅ | ✅ |
460
- | `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
461
- | `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |
462
- | `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
463
- | `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` | `#svg`, `#reset-action`, `#watermark`, `#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
464
- | `VueUiXyCanvas` | `VueUiXyCanvasDatasetItem[]` | `VueUiXyCanvasConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip` | `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark` | ✅ | ✅ |
465
- | `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip` | `#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#plot-comment`,`#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
444
+ | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
445
+ | ----------------------------- | ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |
446
+ | `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
447
+ | `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background` | ✅ | ✅ |
448
+ | `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
449
+ | `VueUiChord` | `VueUiChordDataset` | `VueUiChordConfig` | `@selectLegend`, `@selectGroup`, `@selectRibbon`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
450
+ | `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label` | ✅ | ✅ |
451
+ | `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
452
+ | `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
453
+ | `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
454
+ | `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#tooltip-before`, `#tooltip-after`, | ✅ | ✅ |
455
+ | `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
456
+ | `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
457
+ | `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
458
+ | `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
459
+ | `VueUiHistoryPlot` | `VueUiHistoryPlotDatasetItem[]` | `VueUiHistoryPlotConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
460
+ | `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `@selectNode`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#node`, `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
461
+ | `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
462
+ | `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
463
+ | `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
464
+ | `VueUiParallelCoordinatePlot` | `VueUiParallelCoordinatePlotDatasetItem[]` | `VueUiParallelCoordinatePlotConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background` | ✅ | ✅ |
465
+ | `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
466
+ | `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
467
+ | `VueUiRidgeline` | `VueUiRidgelineDatasetItem[]` | `VueUiRidgelineConfig` | `@selectLegend`, `@selectX`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
468
+ | `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
469
+ | `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
470
+ | `VueUiStackbar` | `VueUiStackbarDatasetItem[]` | `VueUiStackbarConfig` | `@selectLegend`, `@selectDatapoint`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
471
+ | `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
472
+ | `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
473
+ | `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
474
+ | `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow` | ✅ | ✅ |
475
+ | `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
476
+ | `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |
477
+ | `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
478
+ | `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage` | `#svg`, `#reset-action`, `#watermark`, `#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
479
+ | `VueUiXyCanvas` | `VueUiXyCanvasDatasetItem[]` | `VueUiXyCanvasConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip` , `getImage` | `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark` | ✅ | ✅ |
480
+ | `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#plot-comment`,`#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
466
481
 
467
482
  ### 3D charts
468
483
 
469
- | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
470
- | ------------ | ------------------- | ------------------ | --------------------------------------------- | ----------------------------------------- | -------------- | ------ |
471
- | `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
484
+ | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
485
+ | ------------ | ------------------- | ------------------ | --------------------------------------------------------- | ----------------------------------------- | -------------- | ------ |
486
+ | `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
472
487
 
473
488
  ### Maps
474
489
 
475
- | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
476
- | ------------ | ------------------- | ------------------ | -------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------------- | ------ |
477
- | `VueUiWorld` | `VueUiWorldDataset` | `VueUiWorldConfig` | `getData`, `generatePdf`, `generateImage`, `toggleTable`, `toggleTooltip`, `toggleAnnotator` | `#svg`, `#watermark`, `#pattern`, `#chart-background` | ✅ | ❌ |
490
+ | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
491
+ | ------------ | ------------------- | ------------------ | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------------- | ------ |
492
+ | `VueUiWorld` | `VueUiWorldDataset` | `VueUiWorldConfig` | `getData`, `generatePdf`, `generateImage`, `toggleTable`, `toggleTooltip`, `toggleAnnotator`, `getImage` | `#svg`, `#watermark`, `#pattern`, `#chart-background` | ✅ | ❌ |
478
493
 
479
494
  ### Data tables
480
495
 
@@ -582,10 +597,10 @@ You can pass a callback trhough the config, for each button, to override the def
582
597
  const config = {
583
598
  userOptions: {
584
599
  callbacks: {
585
- pdf: (chartElement: HTMLElement) => {
600
+ pdf: ({ chartElement, imageUri, base64 }) => {
586
601
  console.log(chartElement);
587
602
  },
588
- img: (base64: string) => {
603
+ img: ({ chartElement, imageUri, base64 }) => {
589
604
  console.log(base64);
590
605
  },
591
606
  csv: (csvStr: string) => {
@@ -1091,17 +1106,9 @@ A composable that **flattens** a reactive object into a set of refs (one for eac
1091
1106
  - **Dynamic path support**: New paths added at runtime are discovered automatically (and proxied), so you never lose reactivity when mutating the structure.
1092
1107
 
1093
1108
  ```js
1094
- import { useObjectBindings } from "vue-data-ui";
1109
+ import { useObjectBindings, getVueDataUiConfig } from "vue-data-ui";
1095
1110
 
1096
- const config = ref({
1097
- customPalette: ["#CCCCCC", "#1A1A1A"],
1098
- style: {
1099
- chart: {
1100
- backgroundColor: "#FFFFFF",
1101
- color: "#1A1A1A",
1102
- },
1103
- },
1104
- });
1111
+ const config = ref(getVueDataUiConfig("vue_ui_donut")); // or your custom config for this component
1105
1112
 
1106
1113
  const bindings = useObjectBindings(config);
1107
1114
  // Now `bindings` has computed refs for each leaf path:
@@ -1117,7 +1124,41 @@ You can then use these in your template:
1117
1124
  ```html
1118
1125
  <template>
1119
1126
  <div>
1120
- <input type="color" v-model="bindings['style.chart.backgroundColor']" />
1127
+ <input
1128
+ type="color"
1129
+ v-model="bindings['style.chart.backgroundColor'].value"
1130
+ />
1121
1131
  </div>
1122
1132
  </template>
1123
1133
  ```
1134
+
1135
+ ## Exposed methods
1136
+
1137
+ Most chart components expose the following methods:
1138
+
1139
+ ### getData
1140
+
1141
+ ```js
1142
+ const componentRef = ref(null);
1143
+
1144
+ onMounted(async () => {
1145
+ if (componentRef) {
1146
+ const data = await componentRef.value.getData();
1147
+ console.log(data);
1148
+ }
1149
+ });
1150
+ ```
1151
+
1152
+ ### getImage
1153
+
1154
+ ```js
1155
+ const componentRef = ref(null);
1156
+
1157
+ onMounted(async () => {
1158
+ if (componentRef) {
1159
+ const { imgUri, base64, title, width, height, aspectRatio } =
1160
+ await componentRef.value.getImage({ scale: 2 }); // optional scale, defaults to 2, increase for better image quality
1161
+ console.log(imageUri);
1162
+ }
1163
+ });
1164
+ ```
@@ -1,5 +1,5 @@
1
1
  import { computed as u, createElementBlock as k, openBlock as m, createElementVNode as t, unref as o } from "vue";
2
- import { c as n } from "./index-DMqAxz7R.js";
2
+ import { c as n } from "./index-BzfnuLnw.js";
3
3
  const s = { class: "vue-ui-element-arrow" }, f = ["id", "viewBox", "refX", "refY", "markerWidth", "markerHeight"], c = ["d", "fill"], h = ["id", "viewBox", "refX", "refY", "markerWidth", "markerHeight"], y = ["d", "fill"], v = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap", "stroke-dasharray", "marker-end", "marker-start"], z = {
4
4
  __name: "Arrow",
5
5
  props: {
@@ -1,6 +1,6 @@
1
1
  import { useCssVars as O, ref as S, reactive as T, computed as P, onUnmounted as $, createBlock as R, openBlock as v, Teleport as N, createElementBlock as E, createCommentVNode as V, withModifiers as s, normalizeStyle as y, createElementVNode as o, unref as I, renderSlot as M, createVNode as F, normalizeClass as j, nextTick as U } from "vue";
2
- import q from "./BaseIcon-DoDjTdD5.js";
3
- import { X as A } from "./index-DMqAxz7R.js";
2
+ import q from "./BaseIcon-BmZ4MREl.js";
3
+ import { X as A } from "./index-BzfnuLnw.js";
4
4
  import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.js";
5
5
  const J = ["xmlns"], K = { class: "modal-title" }, Q = {
6
6
  __name: "BaseDraggableDialog",
@@ -1,5 +1,5 @@
1
1
  import { computed as e, createElementBlock as n, openBlock as i, normalizeClass as k, unref as L } from "vue";
2
- import { X as l } from "./index-DMqAxz7R.js";
2
+ import { X as l } from "./index-BzfnuLnw.js";
3
3
  import { _ as d } from "./_plugin-vue_export-helper-CHgC5LLL.js";
4
4
  const M = ["xmlns", "viewBox", "height", "width", "innerHTML"], h = {
5
5
  __name: "BaseIcon",
@@ -1,6 +1,6 @@
1
1
  import { ref as l, computed as k, watch as I, withDirectives as P, createElementBlock as r, openBlock as n, withKeys as S, createElementVNode as u, createCommentVNode as z, normalizeStyle as a, createVNode as F, Fragment as E, renderList as N, unref as O } from "vue";
2
- import C from "./BaseIcon-DoDjTdD5.js";
3
- import { F as V } from "./index-DMqAxz7R.js";
2
+ import C from "./BaseIcon-BmZ4MREl.js";
3
+ import { F as V } from "./index-BzfnuLnw.js";
4
4
  import { v as D } from "./vClickOutside-C6WiFswA.js";
5
5
  import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
6
6
  const $ = ["onClick"], L = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, T = ["value"], j = {
@@ -1,6 +1,6 @@
1
1
  import { useCssVars as A, unref as e, computed as D, ref as w, onMounted as E, createElementBlock as n, openBlock as a, normalizeClass as k, createElementVNode as t, withKeys as R, normalizeStyle as i, createVNode as C, toDisplayString as I, Fragment as f, renderList as m, renderSlot as N, createCommentVNode as $ } from "vue";
2
- import { _ as K } from "./Shape-DbsLJ-SE.js";
3
- import O from "./BaseIcon-DoDjTdD5.js";
2
+ import { _ as K } from "./Shape-DBXkGxKt.js";
3
+ import O from "./BaseIcon-BmZ4MREl.js";
4
4
  import { _ as T } from "./_plugin-vue_export-helper-CHgC5LLL.js";
5
5
  const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align-items": "center", "justify-content": "flex-end", "padding-right": "3px", gap: "3px" } }, L = { style: { width: "12px", height: "12px" } }, M = {
6
6
  key: 0,
@@ -1,6 +1,6 @@
1
- import { createElementBlock as n, openBlock as o, normalizeStyle as d, renderSlot as l, Fragment as u, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as y, unref as $ } from "vue";
2
- import { a0 as p } from "./index-DMqAxz7R.js";
3
- import { _ as v } from "./Shape-DbsLJ-SE.js";
1
+ import { createElementBlock as o, openBlock as a, normalizeStyle as d, renderSlot as l, Fragment as u, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as y, unref as $ } from "vue";
2
+ import { a3 as p } from "./index-BzfnuLnw.js";
3
+ import { _ as v } from "./Shape-DBXkGxKt.js";
4
4
  import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
5
5
  const S = ["id"], x = ["onClick", "height", "width"], z = {
6
6
  __name: "Legend",
@@ -32,18 +32,19 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
32
32
  function s(i, r) {
33
33
  f("clickMarker", { legend: i, i: r });
34
34
  }
35
- return (i, r) => (o(), n("div", {
35
+ return (i, r) => (a(), o("div", {
36
36
  id: e.id,
37
37
  class: "vue-data-ui-legend",
38
38
  style: d(`background:${e.config.backgroundColor};font-size:${e.config.fontSize}px;color:${e.config.color};padding-bottom:${e.config.paddingBottom}px;padding-top:${e.config.paddingTop || 12}px;font-weight:${e.config.fontWeight}`)
39
39
  }, [
40
40
  l(i.$slots, "legendTitle", { titleSet: e.legendSet }, void 0, !0),
41
- (o(!0), n(u, null, g(e.legendSet, (t, a) => (o(), n("div", {
41
+ (a(!0), o(u, null, g(e.legendSet, (t, n) => (a(), o("div", {
42
+ key: `legend_${n}`,
42
43
  class: m({ "vue-data-ui-legend-item": !0, active: e.clickable })
43
44
  }, [
44
- t.shape ? (o(), n("svg", {
45
+ t.shape ? (a(), o("svg", {
45
46
  key: 0,
46
- onClick: (C) => s(t, a),
47
+ onClick: (C) => s(t, n),
47
48
  height: e.config.fontSize,
48
49
  width: e.config.fontSize,
49
50
  viewBox: "0 0 60 60",
@@ -56,16 +57,16 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
56
57
  plot: { x: 30, y: 30 },
57
58
  fill: t.color
58
59
  }, null, 8, ["shape", "fill"]),
59
- l(i.$slots, "legend-pattern", y({ ref_for: !0 }, { legend: t, index: $(p)(t.absoluteIndex) ? t.absoluteIndex : a }), void 0, !0)
60
+ l(i.$slots, "legend-pattern", y({ ref_for: !0 }, { legend: t, index: $(p)(t.absoluteIndex) ? t.absoluteIndex : n }), void 0, !0)
60
61
  ], 12, x)) : h("", !0),
61
62
  l(i.$slots, "item", {
62
63
  legend: t,
63
- index: a
64
+ index: n
64
65
  }, void 0, !0)
65
- ], 2))), 256))
66
+ ], 2))), 128))
66
67
  ], 12, S));
67
68
  }
68
- }, L = /* @__PURE__ */ b(z, [["__scopeId", "data-v-f1db6c9f"]]);
69
+ }, L = /* @__PURE__ */ b(z, [["__scopeId", "data-v-2b9117cf"]]);
69
70
  export {
70
71
  L as default
71
72
  };
@@ -1,7 +1,7 @@
1
1
  import { ref as i, computed as we, onMounted as ke, nextTick as be, onBeforeUnmount as Ce, watch as oe, createElementBlock as x, openBlock as y, Fragment as q, createCommentVNode as Y, normalizeStyle as b, normalizeClass as D, createElementVNode as C, withDirectives as ae, createVNode as M, toDisplayString as re, unref as se, vModelText as ue, withModifiers as ie, renderList as ce } from "vue";
2
- import { l as $e, f as Se, X as Ae } from "./index-DMqAxz7R.js";
3
- import R from "./BaseIcon-DoDjTdD5.js";
4
- import { C as Ee } from "./ColorPicker-BGRchgqQ.js";
2
+ import { l as $e, f as Se, X as Ae } from "./index-BzfnuLnw.js";
3
+ import R from "./BaseIcon-BmZ4MREl.js";
4
+ import { C as Ee } from "./ColorPicker-C1MXyD9Q.js";
5
5
  import { _ as Be } from "./_plugin-vue_export-helper-CHgC5LLL.js";
6
6
  const Te = {
7
7
  class: /* @__PURE__ */ D({
@@ -1,5 +1,5 @@
1
1
  import { createElementBlock as e, openBlock as t, toDisplayString as o, unref as n } from "vue";
2
- const r = "3.0.0-next.0", a = { "aria-hidden": "true" }, p = {
2
+ const r = "3.0.0-next.2", a = { "aria-hidden": "true" }, p = {
3
3
  __name: "PackageVersion",
4
4
  setup(s) {
5
5
  return (c, i) => (t(), e("desc", a, "Composed with Vue Data UI " + o(n(r)), 1));
@@ -1,7 +1,7 @@
1
1
  import { ref as c, computed as ge, watch as X, nextTick as le, onMounted as pe, onBeforeUnmount as me, createElementBlock as Y, createCommentVNode as q, openBlock as z, normalizeStyle as x, createElementVNode as k, withDirectives as ae, createVNode as R, normalizeClass as G, toDisplayString as Ae, unref as he, vModelText as oe } from "vue";
2
- import T from "./BaseIcon-DoDjTdD5.js";
3
- import { C as we } from "./ColorPicker-BGRchgqQ.js";
4
- import { l as be, f as xe } from "./index-DMqAxz7R.js";
2
+ import T from "./BaseIcon-BmZ4MREl.js";
3
+ import { C as we } from "./ColorPicker-C1MXyD9Q.js";
4
+ import { l as be, f as xe } from "./index-BzfnuLnw.js";
5
5
  const ye = {
6
6
  class: "vue-ui-pen-and-paper-action",
7
7
  style: { padding: "0 !important" }
@@ -9,7 +9,7 @@ const ye = {
9
9
  __name: "PenAndPaper",
10
10
  props: {
11
11
  svgRef: {
12
- type: [Object, null],
12
+ type: [Object, null, void 0],
13
13
  required: !0
14
14
  },
15
15
  color: {
@@ -31,7 +31,7 @@ const ye = {
31
31
  },
32
32
  emits: ["close"],
33
33
  setup(d, { emit: se }) {
34
- const s = d, re = se, b = c([]), E = c([]), S = c(s.color), $ = c(2), M = c(!1), P = c(""), o = c(null), A = c(null), F = c(null), h = c("draw"), Q = c(!1), f = c(null), H = c({ x: 0, y: 0 }), N = c([""]), D = c({ row: 0, col: 0 }), L = c(16), W = c("url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVh2YQcchQnSyIijhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB020wn4lIuvyqFXhGGiAhCiMnMMpKZxSx8x9c9Any9i/Es/3N/jgG1YDEgIBHPMcO0iTeIZzZtg/M+scjKskp8Tjxu0gWJH7muePzGueSywDNFM5ueJxaJpVIXK13MyqZGPE0cVTWd8oWcxyrnLc5atc7a9+QvDBf0lQzXaY4ggSUkkYIEBXVUUIWNGK06KRbStB/38Q+7/hS5FHJVwMixgBo0yK4f/A9+d2sVpya9pHAc6H1xnI9RILQLtBqO833sOK0TIPgMXOkdf60JzH6S3uho0SNgcBu4uO5oyh5wuQMMPRmyKbtSkKZQLALvZ/RNeSByC/Sveb2193H6AGSpq+Ub4OAQGCtR9rrPu/u6e/v3TLu/H5C7crM1WjgWAAAABmJLR0QAqwB5AHWF+8OUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwUExIUagzGcQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjTldAxDoNQDIPhL0+q1L33P1AvAhN7xfK6WAgoLfSfrNiykpQtE+7RLzx2vgF9D3o8lWDmn1QVVMP0LZQGmNtqp1/cmou0XHdG/+sYeGZwFBqPCub8rkcvvAGvsi1VYarR8wAAAABJRU5ErkJggg==') 5 5, auto");
34
+ const s = d, ue = se, b = c([]), E = c([]), S = c(s.color), $ = c(2), M = c(!1), P = c(""), o = c(null), A = c(null), F = c(null), h = c("draw"), Q = c(!1), f = c(null), H = c({ x: 0, y: 0 }), N = c([""]), D = c({ row: 0, col: 0 }), L = c(16), W = c("url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVh2YQcchQnSyIijhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB020wn4lIuvyqFXhGGiAhCiMnMMpKZxSx8x9c9Any9i/Es/3N/jgG1YDEgIBHPMcO0iTeIZzZtg/M+scjKskp8Tjxu0gWJH7muePzGueSywDNFM5ueJxaJpVIXK13MyqZGPE0cVTWd8oWcxyrnLc5atc7a9+QvDBf0lQzXaY4ggSUkkYIEBXVUUIWNGK06KRbStB/38Q+7/hS5FHJVwMixgBo0yK4f/A9+d2sVpya9pHAc6H1xnI9RILQLtBqO833sOK0TIPgMXOkdf60JzH6S3uho0SNgcBu4uO5oyh5wuQMMPRmyKbtSkKZQLALvZ/RNeSByC/Sveb2193H6AGSpq+Ub4OAQGCtR9rrPu/u6e/v3TLu/H5C7crM1WjgWAAAABmJLR0QAqwB5AHWF+8OUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwUExIUagzGcQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjTldAxDoNQDIPhL0+q1L33P1AvAhN7xfK6WAgoLfSfrNiykpQtE+7RLzx2vgF9D3o8lWDmn1QVVMP0LZQGmNtqp1/cmou0XHdG/+sYeGZwFBqPCub8rkcvvAGvsi1VYarR8wAAAABJRU5ErkJggg==') 5 5, auto");
35
35
  function O(l) {
36
36
  if (!o.value || h.value !== "text" || Q.value) return;
37
37
  const { x: e, y: n } = V(l);
@@ -45,14 +45,14 @@ const ye = {
45
45
  if (!Q.value) return;
46
46
  let { row: e, col: n } = D.value, t = N.value.slice(), a = !1;
47
47
  if (l.key === "Enter") {
48
- const r = t[e], u = r.slice(0, n), v = r.slice(n);
49
- t.splice(e, 1, u, v), e += 1, n = 0, a = !0, l.preventDefault();
48
+ const u = t[e], r = u.slice(0, n), v = u.slice(n);
49
+ t.splice(e, 1, r, v), e += 1, n = 0, a = !0, l.preventDefault();
50
50
  } else if (l.key === "Backspace") {
51
51
  if (n > 0)
52
52
  t[e] = t[e].slice(0, n - 1) + t[e].slice(n), n -= 1, a = !0;
53
53
  else if (e > 0) {
54
- const r = t[e - 1].length;
55
- t[e - 1] += t[e], t.splice(e, 1), e -= 1, n = r, a = !0;
54
+ const u = t[e - 1].length;
55
+ t[e - 1] += t[e], t.splice(e, 1), e -= 1, n = u, a = !0;
56
56
  }
57
57
  l.preventDefault();
58
58
  } else if (l.key === "Delete")
@@ -86,17 +86,17 @@ const ye = {
86
86
  l && o.value.removeChild(l);
87
87
  const e = f.value;
88
88
  if (!e) return;
89
- const { x: n, y: t } = H.value, { row: a, col: r } = D.value, u = L.value * s.scale, v = e.childNodes[a];
89
+ const { x: n, y: t } = H.value, { row: a, col: u } = D.value, r = L.value * s.scale, v = e.childNodes[a];
90
90
  if (!v) return;
91
- let g = v.textContent.slice(0, r);
91
+ let g = v.textContent.slice(0, u);
92
92
  g.endsWith(" ") && (g += " ");
93
93
  const i = document.createElementNS("http://www.w3.org/2000/svg", "text");
94
- i.setAttribute("x", n), i.setAttribute("y", t), i.setAttribute("font-size", u), i.setAttribute("font-family", "sans-serif"), i.textContent = g || "", o.value.appendChild(i);
94
+ i.setAttribute("x", n), i.setAttribute("y", t), i.setAttribute("font-size", r), i.setAttribute("font-family", "sans-serif"), i.textContent = g || "", o.value.appendChild(i);
95
95
  const p = i.getBBox();
96
96
  o.value.removeChild(i);
97
- let m = t + a * u * 1.2, C = n + p.width;
97
+ let m = t + a * r * 1.2, C = n + p.width;
98
98
  const w = document.createElementNS("http://www.w3.org/2000/svg", "rect");
99
- w.setAttribute("x", C), w.setAttribute("y", m), w.setAttribute("width", 2), w.setAttribute("height", u), w.setAttribute("fill", S.value), w.setAttribute("class", "vue-data-ui-svg-caret"), o.value.appendChild(w);
99
+ w.setAttribute("x", C), w.setAttribute("y", m), w.setAttribute("width", 2), w.setAttribute("height", r), w.setAttribute("fill", S.value), w.setAttribute("class", "vue-data-ui-svg-caret"), o.value.appendChild(w);
100
100
  }
101
101
  function _(l) {
102
102
  if (f.value && !f.value.contains(l.target)) {
@@ -133,7 +133,7 @@ const ye = {
133
133
  const t = e.getScreenCTM()?.inverse();
134
134
  return t ? n.matrixTransform(t) : { x: 0, y: 0 };
135
135
  }
136
- function ue(l) {
136
+ function re(l) {
137
137
  const e = l.trim().split(/\s+/);
138
138
  if (e.length < 4)
139
139
  return l;
@@ -145,37 +145,37 @@ const ye = {
145
145
  const g = t[v - 2], i = t[v - 1], p = t[v], m = t[v + 1], C = (g + p) / 2, w = (i + m) / 2;
146
146
  a.push(`Q ${g} ${i} ${C} ${w}`);
147
147
  }
148
- const r = t[t.length - 2], u = t[t.length - 1];
149
- return a.push(`L ${r} ${u}`), a.join(" ");
148
+ const u = t[t.length - 2], r = t[t.length - 1];
149
+ return a.push(`L ${u} ${r}`), a.join(" ");
150
150
  }
151
151
  function ie(l, e = 1) {
152
152
  const n = [...l];
153
153
  for (let t = 2; t < l.length - 2; t += 2) {
154
- const a = l[t], r = l[t + 1], u = l[t - 2], v = l[t - 1], g = l[t + 2], i = l[t + 3];
155
- n[t] = a + e * ((u + g) / 2 - a), n[t + 1] = r + e * ((v + i) / 2 - r);
154
+ const a = l[t], u = l[t + 1], r = l[t - 2], v = l[t - 1], g = l[t + 2], i = l[t + 3];
155
+ n[t] = a + e * ((r + g) / 2 - a), n[t + 1] = u + e * ((v + i) / 2 - u);
156
156
  }
157
157
  return n;
158
158
  }
159
159
  function ve(l) {
160
160
  const e = l.trim().split(/\s+/);
161
- let n = "", t = "", a = null, r = null;
162
- for (let u = 0; u < e.length; u += 1) {
163
- const v = e[u];
161
+ let n = "", t = "", a = null, u = null;
162
+ for (let r = 0; r < e.length; r += 1) {
163
+ const v = e[r];
164
164
  if (isNaN(v)) {
165
165
  if (t = v, t === "M" || t === "L")
166
- a = parseFloat(e[++u]), r = parseFloat(e[++u]), n += `${t}${a} ${r}`;
166
+ a = parseFloat(e[++r]), u = parseFloat(e[++r]), n += `${t}${a} ${u}`;
167
167
  else if (t === "Q") {
168
- const g = parseFloat(e[++u]), i = parseFloat(e[++u]), p = parseFloat(e[++u]), m = parseFloat(e[++u]);
169
- g === a && i === r ? n += `t${p - a} ${m - r}` : n += `q${g - a} ${i - r} ${p - a} ${m - r}`, a = p, r = m;
168
+ const g = parseFloat(e[++r]), i = parseFloat(e[++r]), p = parseFloat(e[++r]), m = parseFloat(e[++r]);
169
+ g === a && i === u ? n += `t${p - a} ${m - u}` : n += `q${g - a} ${i - u} ${p - a} ${m - u}`, a = p, u = m;
170
170
  }
171
171
  } else {
172
- const g = parseFloat(v), i = parseFloat(e[++u]);
172
+ const g = parseFloat(v), i = parseFloat(e[++r]);
173
173
  if (t === "L") {
174
- const p = g - a, m = i - r;
175
- p === 0 ? n += `v${m}` : m === 0 ? n += `h${p}` : n += `l${p} ${m}`, a = g, r = i;
174
+ const p = g - a, m = i - u;
175
+ p === 0 ? n += `v${m}` : m === 0 ? n += `h${p}` : n += `l${p} ${m}`, a = g, u = i;
176
176
  } else if (t === "Q") {
177
- const p = g, m = i, C = parseFloat(e[++u]), w = parseFloat(e[++u]);
178
- p === a && m === r ? n += `t${C - a} ${w - r}` : n += `q${p - a} ${m - r} ${C - a} ${w - r}`, a = C, r = w;
177
+ const p = g, m = i, C = parseFloat(e[++r]), w = parseFloat(e[++r]);
178
+ p === a && m === u ? n += `t${C - a} ${w - u}` : n += `q${p - a} ${m - u} ${C - a} ${w - u}`, a = C, u = w;
179
179
  }
180
180
  }
181
181
  }
@@ -200,7 +200,7 @@ const ye = {
200
200
  t.setAttribute("cx", e), t.setAttribute("cy", n), t.setAttribute("r", $.value * s.scale / 2), t.setAttribute("fill", S.value), t.setAttribute("class", "vue-data-ui-doodle"), o.value.appendChild(t), b.value.push(t);
201
201
  } else {
202
202
  const t = A.value;
203
- t.setAttribute("d", ve(ue(P.value))), b.value.push(t);
203
+ t.setAttribute("d", ve(re(P.value))), b.value.push(t);
204
204
  }
205
205
  E.value = [], A.value = "";
206
206
  }
@@ -250,7 +250,7 @@ const ye = {
250
250
  }, [
251
251
  k("button", {
252
252
  class: "vue-ui-pen-and-paper-action",
253
- onClick: e[0] || (e[0] = (n) => re("close")),
253
+ onClick: e[0] || (e[0] = (n) => ue("close")),
254
254
  style: x({
255
255
  backgroundColor: d.backgroundColor,
256
256
  border: `1px solid ${y.value}`
@@ -1,5 +1,5 @@
1
1
  import { computed as u, createElementBlock as r, openBlock as l, createCommentVNode as a } from "vue";
2
- import { _ as c, R as f } from "./index-DMqAxz7R.js";
2
+ import { _ as c, R as f } from "./index-BzfnuLnw.js";
3
3
  const y = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], g = ["d", "fill", "stroke", "stroke-width"], x = ["points", "fill", "stroke", "stroke-width"], h = {
4
4
  __name: "Shape",
5
5
  props: {
@@ -1,7 +1,7 @@
1
1
  import { useCssVars as ze, computed as d, ref as i, watch as D, onMounted as Ae, onBeforeUnmount as Fe, watchEffect as He, nextTick as Y, onUpdated as Ve, createElementBlock as c, openBlock as m, createElementVNode as v, createCommentVNode as p, renderSlot as We, normalizeStyle as $, createVNode as Xe, withDirectives as me, unref as F, Fragment as he, renderList as fe, normalizeClass as L, vModelText as ge, toDisplayString as _ } from "vue";
2
- import Ue from "./BaseIcon-DoDjTdD5.js";
2
+ import Ue from "./BaseIcon-BmZ4MREl.js";
3
3
  import { t as Oe, u as Ze } from "./useResponsive-DfdjqQps.js";
4
- import { c as je, V as be, U as xe, X as Ge, F as ee } from "./index-DMqAxz7R.js";
4
+ import { c as je, V as be, U as xe, X as Ge, F as ee } from "./index-BzfnuLnw.js";
5
5
  import { _ as qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
6
6
  const Je = {
7
7
  class: "vue-data-ui-slicer-labels",
@@ -1,5 +1,5 @@
1
1
  import { toRef as c, ref as a, computed as v, onMounted as m, watch as y, createElementBlock as b, openBlock as g, normalizeStyle as x, renderSlot as k, nextTick as S } from "vue";
2
- import { s as _, ao as i } from "./index-DMqAxz7R.js";
2
+ import { s as _, ao as i } from "./index-BzfnuLnw.js";
3
3
  import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
4
4
  const R = {
5
5
  __name: "SparkTooltip",
@@ -1,5 +1,5 @@
1
1
  import { createElementBlock as l, openBlock as n, Fragment as f, createElementVNode as p, createCommentVNode as o, normalizeStyle as d, unref as e, toDisplayString as g, renderSlot as r } from "vue";
2
- import { u as c } from "./useNestedProp-YgN3FV_8.js";
2
+ import { u as c } from "./useNestedProp-DorElw91.js";
3
3
  const x = {
4
4
  __name: "Title",
5
5
  props: {