vue-data-ui 3.4.9 → 3.5.1
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.
- package/README.md +114 -37
- package/dist/{ColorPicker-J5wOPCeB.js → ColorPicker-ChuwChMo.js} +58 -56
- package/dist/{NonSvgPenAndPaper-C7TRn0_3.js → NonSvgPenAndPaper-DVgKKLIf.js} +1 -1
- package/dist/{PackageVersion-CTUqGqWV.js → PackageVersion-DQvyATVa.js} +1 -1
- package/dist/PenAndPaper-SZQIAgkg.js +388 -0
- package/dist/{Title-l36lOBMx.js → Title-isbiM8i8.js} +1 -1
- package/dist/components/vue-ui-3d-bar.js +1 -1
- package/dist/components/vue-ui-accordion.js +1 -1
- package/dist/components/vue-ui-age-pyramid.js +1 -1
- package/dist/components/vue-ui-annotator.js +1 -1
- package/dist/components/vue-ui-bullet.js +1 -1
- package/dist/components/vue-ui-candlestick.js +1 -1
- package/dist/components/vue-ui-carousel-table.js +1 -1
- package/dist/components/vue-ui-chestnut.js +1 -1
- package/dist/components/vue-ui-chord.js +1 -1
- package/dist/components/vue-ui-circle-pack.js +1 -1
- package/dist/components/vue-ui-cursor.js +1 -1
- package/dist/components/vue-ui-dashboard.js +1 -1
- package/dist/components/vue-ui-digits.js +1 -1
- package/dist/components/vue-ui-donut-evolution.js +1 -1
- package/dist/components/vue-ui-donut.js +1 -1
- package/dist/components/vue-ui-dumbbell.js +1 -1
- package/dist/components/vue-ui-flow.js +1 -1
- package/dist/components/vue-ui-funnel.js +1 -1
- package/dist/components/vue-ui-galaxy.js +1 -1
- package/dist/components/vue-ui-gauge.js +1 -1
- package/dist/components/vue-ui-gizmo.js +1 -1
- package/dist/components/vue-ui-heatmap.js +1 -1
- package/dist/components/vue-ui-history-plot.js +1 -1
- package/dist/components/vue-ui-horizontal-bar.js +1 -1
- package/dist/components/vue-ui-kpi.js +1 -1
- package/dist/components/vue-ui-mini-loader.js +1 -1
- package/dist/components/vue-ui-molecule.js +1 -1
- package/dist/components/vue-ui-mood-radar.js +1 -1
- package/dist/components/vue-ui-nested-donuts.js +1 -1
- package/dist/components/vue-ui-onion.js +1 -1
- package/dist/components/vue-ui-parallel-coordinate-plot.js +1 -1
- package/dist/components/vue-ui-quadrant.js +1 -1
- package/dist/components/vue-ui-quick-chart.js +1 -1
- package/dist/components/vue-ui-radar.js +1 -1
- package/dist/components/vue-ui-rating.js +1 -1
- package/dist/components/vue-ui-relation-circle.js +1 -1
- package/dist/components/vue-ui-ridgeline.js +1 -1
- package/dist/components/vue-ui-rings.js +1 -1
- package/dist/components/vue-ui-scatter.js +1 -1
- package/dist/components/vue-ui-skeleton.js +1 -1
- package/dist/components/vue-ui-smiley.js +1 -1
- package/dist/components/vue-ui-spark-trend.js +1 -1
- package/dist/components/vue-ui-sparkbar.js +1 -1
- package/dist/components/vue-ui-sparkgauge.js +1 -1
- package/dist/components/vue-ui-sparkhistogram.js +1 -1
- package/dist/components/vue-ui-sparkline.js +1 -1
- package/dist/components/vue-ui-sparkstackbar.js +1 -1
- package/dist/components/vue-ui-stackbar.js +1 -1
- package/dist/components/vue-ui-strip-plot.js +1 -1
- package/dist/components/vue-ui-table-heatmap.js +1 -1
- package/dist/components/vue-ui-table-sparkline.js +1 -1
- package/dist/components/vue-ui-table.js +1 -1
- package/dist/components/vue-ui-thermometer.js +1 -1
- package/dist/components/vue-ui-timer.js +1 -1
- package/dist/components/vue-ui-tiremarks.js +1 -1
- package/dist/components/vue-ui-treemap.js +1 -1
- package/dist/components/vue-ui-vertical-bar.js +1 -1
- package/dist/components/vue-ui-waffle.js +1 -1
- package/dist/components/vue-ui-wheel.js +1 -1
- package/dist/components/vue-ui-word-cloud.js +1 -1
- package/dist/components/vue-ui-world.js +1 -1
- package/dist/components/vue-ui-xy-canvas.js +1 -1
- package/dist/components/vue-ui-xy.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/vue-data-ui.d.ts +17 -8
- package/dist/{useNestedProp-BjZe1Y85.js → useNestedProp-DjGXw6S9.js} +22 -8
- package/dist/{vue-data-ui-DjxWWa78.js → vue-data-ui-B_RxfmEm.js} +113 -107
- package/dist/vue-data-ui.js +64 -64
- package/dist/{vue-ui-3d-bar-CLE7f9pl.js → vue-ui-3d-bar-CMNYyVa2.js} +454 -434
- package/dist/{vue-ui-accordion-CZ0thhxa.js → vue-ui-accordion-CqhVCfc2.js} +1 -1
- package/dist/{vue-ui-age-pyramid-D73uIOPm.js → vue-ui-age-pyramid-Vqa9iYXE.js} +180 -160
- package/dist/{vue-ui-annotator-BylDgUVb.js → vue-ui-annotator-nNv10fBm.js} +3 -3
- package/dist/{vue-ui-bullet-Bybo0xK2.js → vue-ui-bullet-BWEBeYV5.js} +190 -170
- package/dist/{vue-ui-candlestick-D_FyMdqH.js → vue-ui-candlestick-BoLzL0g1.js} +201 -181
- package/dist/{vue-ui-carousel-table-BvMlNdVo.js → vue-ui-carousel-table-Bi6wvUUU.js} +2 -2
- package/dist/{vue-ui-chestnut-DA0g0bDV.js → vue-ui-chestnut-BGz1TLXG.js} +375 -355
- package/dist/vue-ui-chord-CebhS7ln.js +1153 -0
- package/dist/{vue-ui-circle-pack-BPDm-ro5.js → vue-ui-circle-pack-7PJVyKjp.js} +289 -269
- package/dist/{vue-ui-cursor-ik59bfC4.js → vue-ui-cursor-qYLAwvzn.js} +1 -1
- package/dist/vue-ui-dashboard-DcmMvhgM.js +432 -0
- package/dist/{vue-ui-digits-ByNNcWXi.js → vue-ui-digits-DyE8eU1m.js} +1 -1
- package/dist/vue-ui-donut-CxZcJFTo.js +1681 -0
- package/dist/{vue-ui-donut-evolution-Ca3Svr0B.js → vue-ui-donut-evolution-BVYL-BUJ.js} +480 -444
- package/dist/{vue-ui-dumbbell-CxCE2luV.js → vue-ui-dumbbell-QxZn86A3.js} +210 -190
- package/dist/{vue-ui-flow-DEvwXd4W.js → vue-ui-flow-DEI5LRch.js} +339 -319
- package/dist/{vue-ui-funnel-Bgcx7xia.js → vue-ui-funnel-B_A5orFg.js} +218 -198
- package/dist/{vue-ui-galaxy-BWr1EMob.js → vue-ui-galaxy-CUoDRr-O.js} +313 -277
- package/dist/{vue-ui-gauge-DQricvo2.js → vue-ui-gauge-46tSRZN5.js} +311 -291
- package/dist/{vue-ui-gizmo-C-fKe3io.js → vue-ui-gizmo-BOgbsXao.js} +2 -2
- package/dist/{vue-ui-heatmap-B-o_i7Hu.js → vue-ui-heatmap-DKKjl1A2.js} +303 -283
- package/dist/{vue-ui-history-plot-DzQ9DPUJ.js → vue-ui-history-plot-C6p_aThr.js} +478 -442
- package/dist/{vue-ui-kpi-BGGff8LM.js → vue-ui-kpi-B1yJ83aF.js} +2 -2
- package/dist/{vue-ui-mini-loader-CSF-7TJL.js → vue-ui-mini-loader-BudcNBg-.js} +1 -1
- package/dist/{vue-ui-molecule-I2OhrCR2.js → vue-ui-molecule-L90GnHee.js} +156 -136
- package/dist/{vue-ui-mood-radar-BAT7kZUy.js → vue-ui-mood-radar-Dhigm5rw.js} +266 -246
- package/dist/{vue-ui-nested-donuts-CjhJDAQi.js → vue-ui-nested-donuts-D0MCLs5n.js} +597 -557
- package/dist/vue-ui-onion-B7yPJ3gL.js +915 -0
- package/dist/vue-ui-parallel-coordinate-plot-DY21ivNe.js +1051 -0
- package/dist/{vue-ui-quadrant-DGnasrCR.js → vue-ui-quadrant-b0vMRaq-.js} +532 -495
- package/dist/{vue-ui-quick-chart-Cam_sWet.js → vue-ui-quick-chart-VK2EN7sh.js} +288 -268
- package/dist/{vue-ui-radar-DNI9WI2R.js → vue-ui-radar-B5Vkoz9M.js} +412 -373
- package/dist/{vue-ui-rating-CiMoFM_c.js → vue-ui-rating-BH4DW1ZY.js} +1 -1
- package/dist/{vue-ui-relation-circle-Dj1jhcsl.js → vue-ui-relation-circle-XHbE-ZUX.js} +228 -208
- package/dist/{vue-ui-ridgeline-adIls6bj.js → vue-ui-ridgeline-CAMNq-p_.js} +517 -481
- package/dist/vue-ui-rings-ImGOqm_J.js +855 -0
- package/dist/vue-ui-scatter-CterNJYe.js +1590 -0
- package/dist/{vue-ui-skeleton-DUdI2uOO.js → vue-ui-skeleton-CykXHWj-.js} +2 -2
- package/dist/{vue-ui-smiley-sGFRbn31.js → vue-ui-smiley-DnGm6qrK.js} +1 -1
- package/dist/{vue-ui-spark-trend-DxpRfUJz.js → vue-ui-spark-trend-N1AsNQJA.js} +2 -2
- package/dist/{vue-ui-sparkbar-B44oER5n.js → vue-ui-sparkbar-Bvsi5DTT.js} +2 -2
- package/dist/{vue-ui-sparkgauge-ix12NZ7M.js → vue-ui-sparkgauge-DyJmWCWT.js} +2 -2
- package/dist/{vue-ui-sparkhistogram-Cs-QDYBR.js → vue-ui-sparkhistogram-5eKrkmSb.js} +143 -140
- package/dist/{vue-ui-sparkline-Cb8ZmyUq.js → vue-ui-sparkline-ChKAzlVq.js} +2 -2
- package/dist/vue-ui-sparkstackbar-BXNy6nuw.js +441 -0
- package/dist/vue-ui-stackbar-1IwvUYBO.js +1827 -0
- package/dist/{vue-ui-strip-plot-BjG-Jxnb.js → vue-ui-strip-plot-B1wGxP8-.js} +245 -225
- package/dist/{vue-ui-table-DdBdLrAL.js → vue-ui-table-DSsIrT4L.js} +3 -3
- package/dist/{vue-ui-table-heatmap-BqCEBoUf.js → vue-ui-table-heatmap-DXFHy7-E.js} +1 -1
- package/dist/{vue-ui-table-sparkline-EpCo2Be5.js → vue-ui-table-sparkline-DpqY_4ay.js} +2 -2
- package/dist/vue-ui-thermometer-CMKvSA8p.js +584 -0
- package/dist/{vue-ui-timer-Br3wp8hG.js → vue-ui-timer-BpdCY_wg.js} +3 -3
- package/dist/vue-ui-tiremarks-CNipzVli.js +450 -0
- package/dist/vue-ui-treemap-DPE8SY0_.js +1330 -0
- package/dist/{vue-ui-vertical-bar-yfbEfLqy.js → vue-ui-vertical-bar-ZU1GCbX0.js} +484 -448
- package/dist/{vue-ui-waffle-m-9sqQik.js → vue-ui-waffle-z7nuSuSV.js} +398 -362
- package/dist/vue-ui-wheel-DLRoRjeM.js +663 -0
- package/dist/{vue-ui-word-cloud-vNwswYZD.js → vue-ui-word-cloud-D2r5E3pP.js} +248 -228
- package/dist/{vue-ui-world-BsCNyZy_.js → vue-ui-world-goXYnTyM.js} +287 -267
- package/dist/{vue-ui-xy-CIrw1lWQ.js → vue-ui-xy-NDDbNbds.js} +1263 -1227
- package/dist/{vue-ui-xy-canvas-DXnLFwW3.js → vue-ui-xy-canvas-2a6NlQe3.js} +338 -322
- package/package.json +4 -4
- package/dist/PenAndPaper-DSvu9dwa.js +0 -373
- package/dist/vue-ui-chord-CDgzolI-.js +0 -1133
- package/dist/vue-ui-dashboard-CeJwbiON.js +0 -412
- package/dist/vue-ui-donut-DjQXHBJE.js +0 -1645
- package/dist/vue-ui-onion-DTY2p87s.js +0 -873
- package/dist/vue-ui-parallel-coordinate-plot-C8aWTcNn.js +0 -1014
- package/dist/vue-ui-rings-CnTMFK6R.js +0 -813
- package/dist/vue-ui-scatter-fzR2c0St.js +0 -1554
- package/dist/vue-ui-sparkstackbar-BiRZ51OU.js +0 -424
- package/dist/vue-ui-stackbar-DubS6Pg8.js +0 -1708
- package/dist/vue-ui-thermometer-DTnfnf9z.js +0 -564
- package/dist/vue-ui-tiremarks-CrC_tlIx.js +0 -430
- package/dist/vue-ui-treemap-kyuyi2ES.js +0 -1294
- package/dist/vue-ui-wheel-BasM7FWt.js +0 -643
package/README.md
CHANGED
|
@@ -443,43 +443,43 @@ From the dataset you pass into the props, this component will produce the most a
|
|
|
443
443
|
|
|
444
444
|
### Charts
|
|
445
445
|
|
|
446
|
-
| Name | dataset type | config type | emits / exposed methods
|
|
447
|
-
| ----------------------------- | ------------------------------------------ | ----------------------------------- |
|
|
448
|
-
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage`
|
|
449
|
-
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage`
|
|
450
|
-
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage`
|
|
451
|
-
| `VueUiChord` | `VueUiChordDataset` | `VueUiChordConfig` | `@selectLegend`, `@selectGroup`, `@selectRibbon`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage`
|
|
452
|
-
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getImage`
|
|
453
|
-
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
454
|
-
| `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` | ✅ | ✅ |
|
|
455
|
-
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage`
|
|
456
|
-
| `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage`
|
|
457
|
-
| `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage`
|
|
458
|
-
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
|
|
459
|
-
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage`, `getImage`
|
|
460
|
-
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage`
|
|
461
|
-
| `VueUiHistoryPlot` | `VueUiHistoryPlotDatasetItem[]` | `VueUiHistoryPlotConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
462
|
-
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `@selectNode`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage`
|
|
463
|
-
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage`
|
|
464
|
-
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
465
|
-
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
466
|
-
| `VueUiParallelCoordinatePlot` | `VueUiParallelCoordinatePlotDatasetItem[]` | `VueUiParallelCoordinatePlotConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
467
|
-
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
468
|
-
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
469
|
-
| `VueUiRidgeline` | `VueUiRidgelineDatasetItem[]` | `VueUiRidgelineConfig` | `@selectLegend`, `@selectX`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
|
|
470
|
-
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
|
|
471
|
-
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
472
|
-
| `VueUiStackbar` | `VueUiStackbarDatasetItem[]` | `VueUiStackbarConfig` | `@selectLegend`, `@selectDatapoint`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage`
|
|
473
|
-
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage`
|
|
474
|
-
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage`
|
|
475
|
-
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage`
|
|
476
|
-
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow` | ✅ | ✅ |
|
|
477
|
-
| `VueUiHorizontalBar` | `VueUiHorizontalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
|
|
478
|
-
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |
|
|
479
|
-
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage`
|
|
480
|
-
| `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage`
|
|
481
|
-
| `VueUiXyCanvas` | `VueUiXyCanvasDatasetItem[]` | `VueUiXyCanvasConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip` , `getImage` | `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark` | ✅ | ✅ |
|
|
482
|
-
| `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`, `#area-gradient`, `#bar-gradient` | ✅ | ✅ |
|
|
446
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
447
|
+
| ----------------------------- | ------------------------------------------ | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |
|
|
448
|
+
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
449
|
+
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
450
|
+
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
451
|
+
| `VueUiChord` | `VueUiChordDataset` | `VueUiChordConfig` | `@selectLegend`, `@selectGroup`, `@selectRibbon`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
|
|
452
|
+
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label` | ✅ | ✅ |
|
|
453
|
+
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
454
|
+
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
|
|
455
|
+
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
456
|
+
| `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#tooltip-before`, `#tooltip-after`, | ✅ | ✅ |
|
|
457
|
+
| `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
458
|
+
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
|
|
459
|
+
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
|
|
460
|
+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
461
|
+
| `VueUiHistoryPlot` | `VueUiHistoryPlotDatasetItem[]` | `VueUiHistoryPlotConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
462
|
+
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `@selectNode`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#node`, `#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
463
|
+
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
464
|
+
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
465
|
+
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
466
|
+
| `VueUiParallelCoordinatePlot` | `VueUiParallelCoordinatePlotDatasetItem[]` | `VueUiParallelCoordinatePlotConfig` | `@selectLegend`, `@selectDatapoint`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
467
|
+
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
468
|
+
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
469
|
+
| `VueUiRidgeline` | `VueUiRidgelineDatasetItem[]` | `VueUiRidgelineConfig` | `@selectLegend`, `@selectX`, `@selectDatapoint`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |
|
|
470
|
+
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
|
|
471
|
+
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
472
|
+
| `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` | ✅ | ✅ |
|
|
473
|
+
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
|
|
474
|
+
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
475
|
+
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
476
|
+
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow` | ✅ | ✅ |
|
|
477
|
+
| `VueUiHorizontalBar` | `VueUiHorizontalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
|
|
478
|
+
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |
|
|
479
|
+
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
|
|
480
|
+
| `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage` | `#svg`, `#reset-action`, `#watermark`, `#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
|
|
481
|
+
| `VueUiXyCanvas` | `VueUiXyCanvasDatasetItem[]` | `VueUiXyCanvasConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip` , `getImage` | `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark` | ✅ | ✅ |
|
|
482
|
+
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `@selectTimeLabel`, `hideSeries`, `showSeries`, `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`, `#area-gradient`, `#bar-gradient` | ✅ | ✅ |
|
|
483
483
|
|
|
484
484
|
### 3D charts
|
|
485
485
|
|
|
@@ -676,6 +676,32 @@ User options menu icon can be customized using the #menuIcon slot:
|
|
|
676
676
|
</template>
|
|
677
677
|
```
|
|
678
678
|
|
|
679
|
+
Since version 3.5.1, slots are exposed to customize the chart annotator sub-menu:
|
|
680
|
+
|
|
681
|
+
```html
|
|
682
|
+
<VueUiXy :dataset="dataset" :config="config">
|
|
683
|
+
<template #annotator-action-close>
|
|
684
|
+
<MyCloseIcon />
|
|
685
|
+
</template>
|
|
686
|
+
<template #annotator-action-color="{ color }">
|
|
687
|
+
<MyColorIcon :color="color" />
|
|
688
|
+
</template>
|
|
689
|
+
<template #annotator-action-draw="{ mode }">
|
|
690
|
+
<MyDrawIcon v-if="mode === 'draw'" />
|
|
691
|
+
<MyTextIcon v-else />
|
|
692
|
+
</template>
|
|
693
|
+
<template #annotator-action-undo="{ disabled }">
|
|
694
|
+
<MyUndoIcon />
|
|
695
|
+
</template>
|
|
696
|
+
<template #annotator-action-redo="{ disabled }">
|
|
697
|
+
<MyRedoIcon />
|
|
698
|
+
</template>
|
|
699
|
+
<template #annotator-action-delete="{ disabled }">
|
|
700
|
+
<MyDeleteIcon />
|
|
701
|
+
</template>
|
|
702
|
+
</VueUiXy>
|
|
703
|
+
```
|
|
704
|
+
|
|
679
705
|
# Custom palette
|
|
680
706
|
|
|
681
707
|
It is possible to provide a custom palette in the config prop through config.customPalette (string[]) for the following components:
|
|
@@ -1164,3 +1190,54 @@ onMounted(async () => {
|
|
|
1164
1190
|
}
|
|
1165
1191
|
});
|
|
1166
1192
|
```
|
|
1193
|
+
|
|
1194
|
+
### showSeries / hideSeries
|
|
1195
|
+
|
|
1196
|
+
```ts
|
|
1197
|
+
showSeries: (name: string) => void
|
|
1198
|
+
hideSeries: (name: string) => void
|
|
1199
|
+
```
|
|
1200
|
+
|
|
1201
|
+
Set a ref on your chart component to call exposed methods:
|
|
1202
|
+
|
|
1203
|
+
```html
|
|
1204
|
+
<VueUiXy ref="chart" :dataset="dataset" :config="config" />
|
|
1205
|
+
```
|
|
1206
|
+
|
|
1207
|
+
Example:
|
|
1208
|
+
|
|
1209
|
+
```js
|
|
1210
|
+
const chart = ref(null); // Add this ref on the chart component
|
|
1211
|
+
|
|
1212
|
+
function showSeriesByName(name) {
|
|
1213
|
+
if (!chart.value) return;
|
|
1214
|
+
chart.value.showSeries(name);
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
function hideSeriesByName(name) {
|
|
1218
|
+
if (!chart.value) return;
|
|
1219
|
+
chart.value.hideSeries(name);
|
|
1220
|
+
}
|
|
1221
|
+
```
|
|
1222
|
+
|
|
1223
|
+
`showSeries` and `hideSeries` exposed methods are available on the following components:
|
|
1224
|
+
|
|
1225
|
+
- VueUiDonut
|
|
1226
|
+
- VueUiDonutEvolution
|
|
1227
|
+
- VueUiGalaxy
|
|
1228
|
+
- VueUiHistoryPlot
|
|
1229
|
+
- VueUiHorizontalBar
|
|
1230
|
+
- VueUiNestedDonuts
|
|
1231
|
+
- VueUiOnion
|
|
1232
|
+
- VueUiParallelCoordinatePlot
|
|
1233
|
+
- VueUiQuadrant
|
|
1234
|
+
- VueUiRadar
|
|
1235
|
+
- VueUiRidgeline
|
|
1236
|
+
- VueUiRings
|
|
1237
|
+
- VueUiScatter
|
|
1238
|
+
- VueUiSparkStackbar
|
|
1239
|
+
- VueUiStackbar
|
|
1240
|
+
- VueUiTreemap
|
|
1241
|
+
- VueUiWaffle
|
|
1242
|
+
- VueUiXy
|
|
1243
|
+
- VueUiXyCanvas
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ref as u, computed as T, watchEffect as U, onMounted as J, onBeforeUnmount as W, watch as Y, withDirectives as j, createElementBlock as d, openBlock as s, withKeys as q, createElementVNode as i, createCommentVNode as
|
|
1
|
+
import { ref as u, computed as T, watchEffect as U, onMounted as J, onBeforeUnmount as W, watch as Y, withDirectives as j, createElementBlock as d, openBlock as s, withKeys as q, createElementVNode as i, createCommentVNode as R, createBlock as A, normalizeStyle as a, renderSlot as G, normalizeProps as H, guardReactiveProps as Q, createVNode as C, withModifiers as n, Fragment as M, renderList as N, Teleport as X, unref as Z, nextTick as _ } from "vue";
|
|
2
2
|
import g from "./BaseIcon-BmMbm4d0.js";
|
|
3
|
-
import { J as
|
|
4
|
-
import { v as
|
|
5
|
-
import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
6
|
-
const
|
|
3
|
+
import { J as ee } from "./lib-C_mNZmhD.js";
|
|
4
|
+
import { v as oe } from "./vClickOutside-C6WiFswA.js";
|
|
5
|
+
import { _ as te } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
6
|
+
const ne = ["onClick"], le = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, re = ["value"], ie = ["onClick"], ue = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, se = ["value"], ae = {
|
|
7
7
|
__name: "ColorPicker",
|
|
8
8
|
props: {
|
|
9
9
|
value: {
|
|
@@ -28,61 +28,61 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
emits: ["update:value"],
|
|
31
|
-
setup(t, { emit:
|
|
32
|
-
const v = t, F = O
|
|
31
|
+
setup(t, { emit: $ }) {
|
|
32
|
+
const v = t, F = $, O = u(null), b = u(null), c = u(null), r = u(!1), m = u(!1), y = u({ top: 0, left: 0 }), V = T(() => ({
|
|
33
33
|
backgroundColor: v.value,
|
|
34
34
|
width: "100%",
|
|
35
35
|
height: "100%",
|
|
36
36
|
cursor: "pointer"
|
|
37
|
-
})),
|
|
37
|
+
})), p = T(() => ee(v.value));
|
|
38
38
|
function w(o) {
|
|
39
39
|
F("update:value", o), r.value = !1;
|
|
40
40
|
}
|
|
41
41
|
function E(o) {
|
|
42
42
|
F("update:value", o.target.value);
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
o?.stopPropagation?.(),
|
|
44
|
+
function L(o) {
|
|
45
|
+
o?.stopPropagation?.(), m.value = !0, c.value?.click();
|
|
46
46
|
}
|
|
47
47
|
function D() {
|
|
48
48
|
r.value = !1;
|
|
49
49
|
}
|
|
50
|
-
function
|
|
51
|
-
!
|
|
50
|
+
function x() {
|
|
51
|
+
!m.value && r.value && D();
|
|
52
52
|
}
|
|
53
53
|
async function K() {
|
|
54
|
-
r.value = !r.value, r.value && v.teleported && (await
|
|
54
|
+
r.value = !r.value, r.value && v.teleported && (await _(), B());
|
|
55
55
|
}
|
|
56
56
|
function B() {
|
|
57
|
-
if (!
|
|
58
|
-
const o =
|
|
59
|
-
|
|
57
|
+
if (!b.value) return;
|
|
58
|
+
const o = b.value.getBoundingClientRect();
|
|
59
|
+
y.value = { top: o.top + 36, left: o.right - 48 };
|
|
60
60
|
}
|
|
61
|
-
function
|
|
61
|
+
function f() {
|
|
62
62
|
r.value && v.teleported && B();
|
|
63
63
|
}
|
|
64
|
-
function
|
|
65
|
-
setTimeout(() =>
|
|
64
|
+
function k() {
|
|
65
|
+
setTimeout(() => m.value = !1, 0);
|
|
66
66
|
}
|
|
67
67
|
U((o) => {
|
|
68
68
|
const e = c.value;
|
|
69
69
|
if (!e) return;
|
|
70
|
-
const l = () =>
|
|
70
|
+
const l = () => k(), I = () => k(), S = () => {
|
|
71
71
|
};
|
|
72
|
-
e.addEventListener("blur", l), e.addEventListener("change",
|
|
73
|
-
e.removeEventListener("blur", l), e.removeEventListener("change",
|
|
72
|
+
e.addEventListener("blur", l), e.addEventListener("change", I), e.addEventListener("input", S), o(() => {
|
|
73
|
+
e.removeEventListener("blur", l), e.removeEventListener("change", I), e.removeEventListener("input", S);
|
|
74
74
|
});
|
|
75
75
|
});
|
|
76
76
|
function h() {
|
|
77
|
-
|
|
77
|
+
k();
|
|
78
78
|
}
|
|
79
|
-
function
|
|
80
|
-
document.visibilityState === "visible" &&
|
|
79
|
+
function P() {
|
|
80
|
+
document.visibilityState === "visible" && k();
|
|
81
81
|
}
|
|
82
82
|
J(() => {
|
|
83
|
-
window.addEventListener("scroll",
|
|
83
|
+
window.addEventListener("scroll", f, { passive: !0 }), window.addEventListener("resize", f, { passive: !0 }), window.addEventListener("focus", h), document.addEventListener("visibilitychange", P);
|
|
84
84
|
}), W(() => {
|
|
85
|
-
window.removeEventListener("scroll",
|
|
85
|
+
window.removeEventListener("scroll", f), window.removeEventListener("resize", f), window.removeEventListener("focus", h), document.removeEventListener("visibilitychange", P);
|
|
86
86
|
}), Y(
|
|
87
87
|
() => v.value,
|
|
88
88
|
(o) => {
|
|
@@ -102,23 +102,25 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
|
|
|
102
102
|
]);
|
|
103
103
|
return (o, e) => j((s(), d("div", {
|
|
104
104
|
ref_key: "wrapperRef",
|
|
105
|
-
ref:
|
|
106
|
-
onKeydown: q(
|
|
105
|
+
ref: O,
|
|
106
|
+
onKeydown: q(x, ["esc"]),
|
|
107
107
|
style: { height: "100%", width: "100%", position: "relative" }
|
|
108
108
|
}, [
|
|
109
109
|
i("button", {
|
|
110
110
|
ref_key: "buttonRef",
|
|
111
|
-
ref:
|
|
111
|
+
ref: b,
|
|
112
112
|
class: "icon",
|
|
113
113
|
onClick: K,
|
|
114
|
-
style: a(
|
|
114
|
+
style: a(V.value),
|
|
115
115
|
type: "button"
|
|
116
116
|
}, [
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
117
|
+
G(o.$slots, "annotator-action-color", H(Q({ color: p.value })), () => [
|
|
118
|
+
C(g, {
|
|
119
|
+
name: "palette",
|
|
120
|
+
stroke: p.value,
|
|
121
|
+
size: 22
|
|
122
|
+
}, null, 8, ["stroke"])
|
|
123
|
+
], !0)
|
|
122
124
|
], 4),
|
|
123
125
|
r.value && !t.teleported ? (s(), d("div", {
|
|
124
126
|
key: 0,
|
|
@@ -138,27 +140,27 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
|
|
|
138
140
|
onTouchstart: e[4] || (e[4] = n(() => {
|
|
139
141
|
}, ["stop"]))
|
|
140
142
|
}, [
|
|
141
|
-
(s(!0), d(
|
|
143
|
+
(s(!0), d(M, null, N(z.value, (l) => (s(), d("button", {
|
|
142
144
|
key: l,
|
|
143
145
|
class: "vue-ui-color-picker-option",
|
|
144
146
|
type: "button",
|
|
145
147
|
style: a({ backgroundColor: l, outline: `1px solid ${t.buttonBorderColor}` }),
|
|
146
148
|
onClick: () => w(l)
|
|
147
|
-
}, null, 12,
|
|
149
|
+
}, null, 12, ne))), 128)),
|
|
148
150
|
i("button", {
|
|
149
151
|
class: "vue-ui-color-picker-option",
|
|
150
152
|
type: "button",
|
|
151
153
|
style: a({ backgroundColor: t.value, outline: `1px solid ${t.buttonBorderColor}` }),
|
|
152
|
-
onClick: n(
|
|
154
|
+
onClick: n(L, ["stop"]),
|
|
153
155
|
onMousedown: e[0] || (e[0] = n(() => {
|
|
154
156
|
}, ["stop"])),
|
|
155
157
|
onTouchstart: e[1] || (e[1] = n(() => {
|
|
156
158
|
}, ["stop"]))
|
|
157
159
|
}, [
|
|
158
|
-
i("div",
|
|
160
|
+
i("div", le, [
|
|
159
161
|
C(g, {
|
|
160
162
|
name: "colorPicker",
|
|
161
|
-
stroke:
|
|
163
|
+
stroke: p.value,
|
|
162
164
|
size: 22
|
|
163
165
|
}, null, 8, ["stroke"])
|
|
164
166
|
]),
|
|
@@ -169,10 +171,10 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
|
|
|
169
171
|
value: t.value,
|
|
170
172
|
class: "hidden-input",
|
|
171
173
|
onInput: E
|
|
172
|
-
}, null, 40,
|
|
174
|
+
}, null, 40, re)
|
|
173
175
|
], 36)
|
|
174
|
-
], 36)) :
|
|
175
|
-
r.value && t.teleported ? (s(), A(
|
|
176
|
+
], 36)) : R("", !0),
|
|
177
|
+
r.value && t.teleported ? (s(), A(X, {
|
|
176
178
|
key: 1,
|
|
177
179
|
to: "body"
|
|
178
180
|
}, [
|
|
@@ -182,8 +184,8 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
|
|
|
182
184
|
style: a({
|
|
183
185
|
backgroundColor: t.backgroundColor,
|
|
184
186
|
position: "fixed",
|
|
185
|
-
top:
|
|
186
|
-
left:
|
|
187
|
+
top: y.value.top + "px",
|
|
188
|
+
left: y.value.left + "px",
|
|
187
189
|
zIndex: 2147483647
|
|
188
190
|
}),
|
|
189
191
|
onMousedown: e[7] || (e[7] = n(() => {
|
|
@@ -193,27 +195,27 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
|
|
|
193
195
|
onTouchstart: e[9] || (e[9] = n(() => {
|
|
194
196
|
}, ["stop"]))
|
|
195
197
|
}, [
|
|
196
|
-
(s(!0), d(
|
|
198
|
+
(s(!0), d(M, null, N(z.value, (l) => (s(), d("button", {
|
|
197
199
|
key: l,
|
|
198
200
|
class: "vue-ui-color-picker-option",
|
|
199
201
|
type: "button",
|
|
200
202
|
style: a({ backgroundColor: l, outline: `1px solid ${t.buttonBorderColor}` }),
|
|
201
203
|
onClick: () => w(l)
|
|
202
|
-
}, null, 12,
|
|
204
|
+
}, null, 12, ie))), 128)),
|
|
203
205
|
i("button", {
|
|
204
206
|
class: "vue-ui-color-picker-option",
|
|
205
207
|
type: "button",
|
|
206
208
|
style: a({ backgroundColor: t.value, outline: `1px solid ${t.buttonBorderColor}` }),
|
|
207
|
-
onClick: n(
|
|
209
|
+
onClick: n(L, ["stop"]),
|
|
208
210
|
onMousedown: e[5] || (e[5] = n(() => {
|
|
209
211
|
}, ["stop"])),
|
|
210
212
|
onTouchstart: e[6] || (e[6] = n(() => {
|
|
211
213
|
}, ["stop"]))
|
|
212
214
|
}, [
|
|
213
|
-
i("div",
|
|
215
|
+
i("div", ue, [
|
|
214
216
|
C(g, {
|
|
215
217
|
name: "colorPicker",
|
|
216
|
-
stroke:
|
|
218
|
+
stroke: p.value,
|
|
217
219
|
size: 22
|
|
218
220
|
}, null, 8, ["stroke"])
|
|
219
221
|
]),
|
|
@@ -224,15 +226,15 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
|
|
|
224
226
|
value: t.value,
|
|
225
227
|
class: "hidden-input",
|
|
226
228
|
onInput: E
|
|
227
|
-
}, null, 40,
|
|
229
|
+
}, null, 40, se)
|
|
228
230
|
], 36)
|
|
229
231
|
], 36)
|
|
230
|
-
])) :
|
|
232
|
+
])) : R("", !0)
|
|
231
233
|
], 32)), [
|
|
232
|
-
[
|
|
234
|
+
[Z(oe), x]
|
|
233
235
|
]);
|
|
234
236
|
}
|
|
235
|
-
},
|
|
237
|
+
}, ke = /* @__PURE__ */ te(ae, [["__scopeId", "data-v-e6c0b73a"]]);
|
|
236
238
|
export {
|
|
237
|
-
|
|
239
|
+
ke as C
|
|
238
240
|
};
|
|
@@ -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
2
|
import { S as $e, d as Se, X as Ae } from "./lib-C_mNZmhD.js";
|
|
3
3
|
import R from "./BaseIcon-BmMbm4d0.js";
|
|
4
|
-
import { C as Ee } from "./ColorPicker-
|
|
4
|
+
import { C as Ee } from "./ColorPicker-ChuwChMo.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 r } from "vue";
|
|
2
|
-
const n = "3.
|
|
2
|
+
const n = "3.5.1", 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(r(n)), 1));
|