vue-data-ui 3.0.0-next.9 → 3.0.0

package/README.md

@@ -53,7 +53,7 @@ Available components
 - [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
 - [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
 - [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap)
-- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar) // Renamed as VueUiHorizontalBar in v3
+- [VueUiHorizontalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-horizontal-bar)
 - [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
 - [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
 - [VueUiWordCloud](https://vue-data-ui.graphieros.com/docs#vue-ui-word-cloud)
@@ -171,19 +171,21 @@ Types are available in the 'vue-data-ui.d.ts' file under the types directory of
 
 ## Vue Data UI version2 -> version3 migration
 
-Vue Data UI v3 is easy to migrate to:
-
-- If a component has new v3 features, it contains the `config.autoSize` attribute, set to `true` by default
-- To restore v2 behavior set config.autoSize to `false`
+Vue Data UI v3 does not contain breaking changes.
+However, some charts have their padding configs modified, which can lead to excessive padding with a v2 config.
 
 ### Version 3 features
 
-- `config.autoSize` (default: true) set to true, sets up the chart layout automatically, hides or shows some data labels when they can be
-
 - `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.
 
 - `config.debug` (default: false) set to true to show warning messages during development, turn off for production.
 
+- smart label resizing and auto-rotating features
+
+- more charts support responsive mode
+
+- config event callbacks
+
 ## Nuxt
 
 [This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
@@ -300,7 +302,7 @@ The following charts bear these slots:
 - VueUiSparkStackbar
 - VueUiStackbar
 - VueUiTreemap
-- VueUiVerticalBar
+- VueUiHorizontalBar
 - VueUiWordCloud
 - VueUiXy \*
 - VueUiXyCanvas
@@ -472,7 +474,7 @@ From the dataset you pass into the props, this component will produce the most a
 | `VueUiThermometer`            | `VueUiThermometerDataset`                  | `VueUiThermometerConfig`            | `generatePdf`, `generateImage` , `getImage`                                                                                                                                           | `#svg`, `#watermark`, `#chart-background`                                                                                                             | ❌             | ✅     |
 | `VueUiTiremarks`              | `VueUiTiremarksDataset`                    | `VueUiTiremarksConfig`              | `generatePdf`, `generateImage` , `getImage`                                                                                                                                           | `#svg`, `#legend`, `#watermark`, `#chart-background`                                                                                                  | ❌             | ✅     |
 | `VueUiTreemap`                | `VueUiTreemapDatasetItem[]`                | `VueUiTreemapConfig`                | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage`                                            | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow`                               | ✅             | ✅     |
-| `VueUiVerticalBar`            | `VueUiVerticalBarDatasetItem[]`            | `VueUiWheelConfig`                  | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage`                                                  | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern`                                                 | ✅             | ✅     |
+| `VueUiHorizontalBar`          | `VueUiHorizontalBarDatasetItem[]`          | `VueUiWheelConfig`                  | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage`                                                  | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern`                                                 | ✅             | ✅     |
 | `VueUiWaffle`                 | `VueUiWaffleDatasetItem[]`                 | `VueUiWaffleConfig`                 | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage`                                                                | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern`                                                                      | ✅             | ✅     |
 | `VueUiWheel`                  | `VueUiWheelDataset`                        | `VueUiWheelConfig`                  | `generatePdf`, `generateImage` , `getImage`                                                                                                                                           | `#svg`, `#watermark`, `#chart-background`                                                                                                             | ❌             | ✅     |
 | `VueUiWordCloud`              | `VueUiWordCloudDatasetItem[] / string`     | `VueUiWordCloudConfig`              | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage`                                                                                                | `#svg`, `#reset-action`, `#watermark`, `#tooltip-before`, `#tooltip-after`, `#chart-background`                                                       | ✅             | ✅     |
@@ -658,7 +660,7 @@ User options actions available per chart:
 | VueUiThermometer            | optionPdf, optionImg, optionFullscreen, optionAnnotator                                                                   |
 | VueUiTiremarks              | optionPdf, optionImg, optionFullscreen, optionAnnotator                                                                   |
 | VueUiTreemap                | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
-| VueUiVerticalBar            | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator                |
+| VueUiHorizontalBar          | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator                |
 | VueUiWaffle                 | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
 | VueUiWheel                  | optionPdf, optionImg, optionFullscreen, optionAnnotator                                                                   |
 | VueUiWordCloud              | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                                           |
@@ -706,7 +708,7 @@ It is possible to provide a custom palette in the config prop through config.cus
 - VueUiTableSparkline
 - VueUiThermometer
 - VueUiTreemap
-- VueUiVerticalBar
+- VueUiHorizontalBar
 - VueUiWaffle
 - VueUiWordCloud
 - VueUiWorld
@@ -723,25 +725,25 @@ However the folowing charts can be made fully responsive, making them better to
 
 | Component                   | Responsive feature implemented |
 | --------------------------- | ------------------------------ |
-| VueUi3dBar                  | -                              |
+| VueUi3dBar                  | ✅                             |
 | VueUiAgePyramid             | ✅                             |
 | VueUiAgePyramid             | ✅                             |
-| VueUiBullet                 | -                              |
+| VueUiBullet                 | ✅                             |
 | VueUiCarouselTable          | -                              |
 | VueUiChestnut               | -                              |
 | VueUiChord                  | ✅                             |
-| VueUiCirclePack             | -                              |
+| VueUiCirclePack             | ✅ (built-in)                  |
 | VueUiDonut                  | ✅                             |
-| VueUiDonutEvolution         | -                              |
+| VueUiDonutEvolution         | ✅                             |
 | VueUiDumbbell               | ✅                             |
-| VueUiFlow                   | -                              |
+| VueUiFlow                   | ✅                             |
 | VueUiFunnel                 | ✅                             |
-| VueUiGalaxy                 | -                              |
+| VueUiGalaxy                 | ✅                             |
 | VueUiGauge                  | ✅                             |
-| VueUiHeatmap                | -                              |
+| VueUiHeatmap                | ✅                             |
 | VueUiHistoryPlot            | ✅                             |
 | VueUiMolecule               | -                              |
-| VueUiMoodRadar              | -                              |
+| VueUiMoodRadar              | ✅                             |
 | VueUiNestedDonuts           | ✅                             |
 | VueUiOnion                  | ✅                             |
 | VueUiParallelCoordinatePlot | ✅                             |
@@ -752,9 +754,9 @@ However the folowing charts can be made fully responsive, making them better to
 | VueUiRidgeline              | ✅                             |
 | VueUiRings                  | ✅                             |
 | VueUiScatter                | ✅                             |
-| VueUiSparkHistogram         | -                              |
+| VueUiSparkHistogram         | ✅                             |
 | VueUiSparkStackbar          | -                              |
-| VueUiSparkTrend             | -                              |
+| VueUiSparkTrend             | ✅                             |
 | VueUiSparkbar               | -                              |
 | VueUiSparkgauge             | -                              |
 | VueUiSparkline              | ✅                             |
@@ -762,11 +764,11 @@ However the folowing charts can be made fully responsive, making them better to
 | VueUiStripPlot              | ✅                             |
 | VueUiTableHeatmap           | -                              |
 | VueUiTableSparkline         | -                              |
-| VueUiThermometer            | -                              |
+| VueUiThermometer            | ✅                             |
 | VueUiTimer                  | ✅                             |
-| VueUiTiremarks              | -                              |
+| VueUiTiremarks              | ✅                             |
 | VueUiTreemap                | ✅                             |
-| VueUiVerticalBar            | ✅                             |
+| VueUiHorizontalBar          | ✅                             |
 | VueUiWaffle                 | ✅                             |
 | VueUiWheel                  | ✅                             |
 | VueUiWordCloud              | ✅                             |
@@ -792,12 +794,12 @@ The following charts use the LTTB algorithm (Largest-Triangle-Three-Bucket) beyo
 
 | Component       | Default Threshold | Remark                                                    |
 | --------------- | ----------------- | --------------------------------------------------------- |
-| VueUiXy         | 500               |                                                           |
+| VueUiXy         | 1095              |                                                           |
 | VueUiXyCanvas   | 10000             | Since this chart uses canvas, threhsold can be set higher |
-| VueUiQuadrant   | 500               |                                                           |
-| VueUiScatter    | 500               |                                                           |
-| VueUiSparkline  | 500               |                                                           |
-| VueUiSparkTrend | 500               |                                                           |
+| VueUiQuadrant   | 1095              |                                                           |
+| VueUiScatter    | 1095              |                                                           |
+| VueUiSparkline  | 1095              |                                                           |
+| VueUiSparkTrend | 1095              |                                                           |
 
 The downsample threshold for each component can be set in the config prop passed to components:
 
@@ -873,7 +875,7 @@ The #pattern slot is available on the following components:
 - VueUiRidgeline
 - VueUiRings
 - VueUiStackbar
-- VueUiVerticalBar
+- VueUiHorizontalBar
 - VueUiWaffle
 - VueUiWorld
 - VueUiXy

package/dist/{Arrow-B6OlqyCG.js → Arrow-r2f8Bpd-.js}

@@ -1,5 +1,5 @@
 import { computed as u, createElementBlock as k, openBlock as m, createElementVNode as t, unref as o } from "vue";
-import { c as n } from "./index-CgShIRes.js";
+import { c as n } from "./index-BtNwOUja.js";
 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 = {
   __name: "Arrow",
   props: {

package/dist/{BaseDraggableDialog-CA8QOk7L.js → BaseDraggableDialog-CGGcf8d8.js}

@@ -1,6 +1,6 @@
 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";
-import q from "./BaseIcon-DxUUKVlt.js";
-import { X as A } from "./index-CgShIRes.js";
+import q from "./BaseIcon-CXtL10fo.js";
+import { X as A } from "./index-BtNwOUja.js";
 import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const J = ["xmlns"], K = { class: "modal-title" }, Q = {
   __name: "BaseDraggableDialog",
@@ -141,14 +141,14 @@ const J = ["xmlns"], K = { class: "modal-title" }, Q = {
               "stroke-width": "1",
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, n[1] || (n[1] = [
+            }, [...n[1] || (n[1] = [
               o("path", { d: "M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
               o("path", { d: "M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
               o("path", { d: "M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
               o("path", { d: "M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
               o("path", { d: "M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
               o("path", { d: "M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
-            ]), 8, J))
+            ])], 8, J))
           ], 32),
           o("span", K, [
             M(t.$slots, "title", {}, void 0, !0)

package/dist/{BaseIcon-DxUUKVlt.js → BaseIcon-CXtL10fo.js}

@@ -1,5 +1,5 @@
 import { computed as e, createElementBlock as n, openBlock as i, normalizeClass as k, unref as L } from "vue";
-import { X as l } from "./index-CgShIRes.js";
+import { X as l } from "./index-BtNwOUja.js";
 import { _ as d } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const M = ["xmlns", "viewBox", "height", "width", "innerHTML"], h = {
   __name: "BaseIcon",

package/dist/{ColorPicker-Bh1dfgXt.js → ColorPicker-H91bBsqM.js}

@@ -1,6 +1,6 @@
 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";
-import C from "./BaseIcon-DxUUKVlt.js";
-import { F as V } from "./index-CgShIRes.js";
+import C from "./BaseIcon-CXtL10fo.js";
+import { F as V } from "./index-BtNwOUja.js";
 import { v as D } from "./vClickOutside-C6WiFswA.js";
 import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const $ = ["onClick"], L = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, T = ["value"], j = {

package/dist/{DataTable--paavNqF.js → DataTable-BSSXpM7w.js}

@@ -1,6 +1,6 @@
 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";
-import { _ as K } from "./Shape-Mr1eIp_G.js";
-import O from "./BaseIcon-DxUUKVlt.js";
+import { _ as K } from "./Shape-BRzOzubn.js";
+import O from "./BaseIcon-CXtL10fo.js";
 import { _ as T } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 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 = {
   key: 0,

package/dist/{Legend-BZ06qU55.js → Legend-BUk0WvWJ.js}

@@ -1,6 +1,6 @@
 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";
-import { a3 as p } from "./index-CgShIRes.js";
-import { _ as v } from "./Shape-Mr1eIp_G.js";
+import { a2 as p } from "./index-BtNwOUja.js";
+import { _ as v } from "./Shape-BRzOzubn.js";
 import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const S = ["id"], x = ["onClick", "height", "width"], z = {
   __name: "Legend",

package/dist/{NonSvgPenAndPaper-DN9XjEHv.js → NonSvgPenAndPaper-DQDgPoW8.js}

@@ -1,7 +1,7 @@
 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";
-import { l as $e, f as Se, X as Ae } from "./index-CgShIRes.js";
-import R from "./BaseIcon-DxUUKVlt.js";
-import { C as Ee } from "./ColorPicker-Bh1dfgXt.js";
+import { l as $e, i as Se, X as Ae } from "./index-BtNwOUja.js";
+import R from "./BaseIcon-CXtL10fo.js";
+import { C as Ee } from "./ColorPicker-H91bBsqM.js";
 import { _ as Be } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Te = {
   class: /* @__PURE__ */ D({

package/dist/{PackageVersion-2QvaZf9_.js → PackageVersion-CJ6Vd7V5.js}

@@ -1,8 +1,8 @@
-import { createElementBlock as e, openBlock as t, toDisplayString as o, unref as n } from "vue";
-const r = "3.0.0-next.9", a = { "aria-hidden": "true" }, p = {
+import { createElementBlock as e, openBlock as t, toDisplayString as o, unref as r } from "vue";
+const n = "3.0.0", a = { "aria-hidden": "true" }, p = {
   __name: "PackageVersion",
   setup(s) {
-    return (c, i) => (t(), e("desc", a, "Composed with Vue Data UI " + o(n(r)), 1));
+    return (c, i) => (t(), e("desc", a, "Composed with Vue Data UI " + o(r(n)), 1));
   }
 };
 export {

package/dist/{PenAndPaper-hGgW0EHz.js → PenAndPaper-D3zudcNI.js}

@@ -1,11 +1,11 @@
-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";
-import T from "./BaseIcon-DxUUKVlt.js";
-import { C as we } from "./ColorPicker-Bh1dfgXt.js";
-import { l as be, f as xe } from "./index-CgShIRes.js";
+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 C, withDirectives as ae, createVNode as $, normalizeClass as G, toDisplayString as Ae, unref as he, vModelText as oe } from "vue";
+import T from "./BaseIcon-CXtL10fo.js";
+import { C as we } from "./ColorPicker-H91bBsqM.js";
+import { l as be, i as xe } from "./index-BtNwOUja.js";
 const ye = {
   class: "vue-ui-pen-and-paper-action",
   style: { padding: "0 !important" }
-}, Ce = ["disabled"], Be = {
+}, ke = ["disabled"], Be = {
   __name: "PenAndPaper",
   props: {
     svgRef: {
@@ -31,7 +31,7 @@ const ye = {
   },
   emits: ["close"],
   setup(d, { emit: se }) {
-    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");
+    const s = d, ue = se, b = c([]), E = c([]), S = c(s.color), R = 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");
     function O(l) {
       if (!o.value || h.value !== "text" || Q.value) return;
       const { x: e, y: n } = V(l);
@@ -94,9 +94,9 @@ const ye = {
       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);
       const p = i.getBBox();
       o.value.removeChild(i);
-      let m = t + a * r * 1.2, C = n + p.width;
+      let m = t + a * r * 1.2, k = n + p.width;
       const w = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      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);
+      w.setAttribute("x", k), 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);
     }
     function _(l) {
       if (f.value && !f.value.contains(l.target)) {
@@ -142,8 +142,8 @@ const ye = {
         return l;
       const t = ie(n), a = [`M ${t[0]} ${t[1]}`];
       for (let v = 2; v < t.length - 2; v += 2) {
-        const g = t[v - 2], i = t[v - 1], p = t[v], m = t[v + 1], C = (g + p) / 2, w = (i + m) / 2;
-        a.push(`Q ${g} ${i} ${C} ${w}`);
+        const g = t[v - 2], i = t[v - 1], p = t[v], m = t[v + 1], k = (g + p) / 2, w = (i + m) / 2;
+        a.push(`Q ${g} ${i} ${k} ${w}`);
       }
       const u = t[t.length - 2], r = t[t.length - 1];
       return a.push(`L ${u} ${r}`), a.join(" ");
@@ -174,8 +174,8 @@ const ye = {
             const p = g - a, m = i - u;
             p === 0 ? n += `v${m}` : m === 0 ? n += `h${p}` : n += `l${p} ${m}`, a = g, u = i;
           } else if (t === "Q") {
-            const p = g, m = i, C = parseFloat(e[++r]), w = parseFloat(e[++r]);
-            p === a && m === u ? n += `t${C - a} ${w - u}` : n += `q${p - a} ${m - u} ${C - a} ${w - u}`, a = C, u = w;
+            const p = g, m = i, k = parseFloat(e[++r]), w = parseFloat(e[++r]);
+            p === a && m === u ? n += `t${k - a} ${w - u}` : n += `q${p - a} ${m - u} ${k - a} ${w - u}`, a = k, u = w;
           }
         }
       }
@@ -185,7 +185,7 @@ const ye = {
       if (h.value !== "draw" || !s.active || !o.value) return;
       M.value = !0;
       const { x: e, y: n } = V(l);
-      F.value = { x: e, y: n }, P.value = `M ${e} ${n}`, A.value = document.createElementNS("http://www.w3.org/2000/svg", "path"), A.value.setAttribute("stroke", S.value), A.value.setAttribute("stroke-width", $.value * s.scale), A.value.setAttribute("fill", "none"), A.value.setAttribute("stroke-linecap", "round"), A.value.setAttribute("stroke-linejoin", "round"), A.value.setAttribute("class", "vue-data-ui-doodle"), o.value.appendChild(A.value);
+      F.value = { x: e, y: n }, P.value = `M ${e} ${n}`, A.value = document.createElementNS("http://www.w3.org/2000/svg", "path"), A.value.setAttribute("stroke", S.value), A.value.setAttribute("stroke-width", R.value * s.scale), A.value.setAttribute("fill", "none"), A.value.setAttribute("stroke-linecap", "round"), A.value.setAttribute("stroke-linejoin", "round"), A.value.setAttribute("class", "vue-data-ui-doodle"), o.value.appendChild(A.value);
     }
     function K(l) {
       if (!M.value || !o.value || !A.value) return;
@@ -197,7 +197,7 @@ const ye = {
         const { x: e, y: n } = V(l);
         if (F.value && F.value.x === e && F.value.y === n) {
           const t = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-          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);
+          t.setAttribute("cx", e), t.setAttribute("cy", n), t.setAttribute("r", 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);
         } else {
           const t = A.value;
           t.setAttribute("d", ve(re(P.value))), b.value.push(t);
@@ -241,14 +241,14 @@ const ye = {
         s.svgRef && (o.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), o.value.setAttribute("class", "vue-data-ui-doodles"), o.value.style.cursor = W.value, s.svgRef.appendChild(o.value), U());
       });
     }), me(() => {
-      o.value && s.svgRef && (s.svgRef.removeChild(o.value), U());
+      o.value && s.svgRef && (o.value.remove(), U());
     }), (l, e) => d.active ? (z(), Y("div", {
       key: 0,
       "data-dom-to-png-ignore": "",
       class: "vue-ui-pen-and-paper-actions",
       style: x({ backgroundColor: d.backgroundColor })
     }, [
-      k("button", {
+      C("button", {
         class: "vue-ui-pen-and-paper-action",
         onClick: e[0] || (e[0] = (n) => ue("close")),
         style: x({
@@ -256,20 +256,20 @@ const ye = {
           border: `1px solid ${y.value}`
         })
       }, [
-        R(T, {
+        $(T, {
           name: "close",
           stroke: d.color
         }, null, 8, ["stroke"])
       ], 4),
-      k("button", ye, [
-        R(we, {
+      C("button", ye, [
+        $(we, {
           value: S.value,
           "onUpdate:value": e[1] || (e[1] = (n) => S.value = n),
           backgroundColor: d.backgroundColor,
           buttonBorderColor: y.value
         }, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
       ]),
-      k("button", {
+      C("button", {
         class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": h.value === "text" }]),
         onClick: e[2] || (e[2] = (n) => h.value = h.value === "text" ? "draw" : "text"),
         style: x({
@@ -277,11 +277,11 @@ const ye = {
           border: `1px solid ${y.value}`
         })
       }, [
-        R(T, {
+        $(T, {
           name: h.value === "draw" ? "annotator" : "text",
           stroke: d.color
         }, null, 8, ["name", "stroke"]),
-        k("div", {
+        C("div", {
           style: x({
             position: "absolute",
             bottom: "-20px",
@@ -292,12 +292,12 @@ const ye = {
             fontVariantNumeric: "tabular-nums"
           })
         }, Ae(he(xe)({
-          v: h.value === "draw" ? $.value : L.value,
+          v: h.value === "draw" ? R.value : L.value,
           s: "px",
           r: 1
         })), 5)
       ], 6),
-      k("button", {
+      C("button", {
         class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !b.value.length }]),
         disabled: !b.value.length,
         onClick: ce,
@@ -307,12 +307,12 @@ const ye = {
           marginTop: "20px"
         })
       }, [
-        R(T, {
+        $(T, {
           name: "restart",
           stroke: d.color
         }, null, 8, ["stroke"])
-      ], 14, Ce),
-      k("button", {
+      ], 14, ke),
+      C("button", {
         class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !E.value.length }]),
         onClick: de,
         style: x({
@@ -320,13 +320,13 @@ const ye = {
           border: `1px solid ${y.value}`
         })
       }, [
-        R(T, {
+        $(T, {
           name: "restart",
           stroke: d.color,
           style: { transform: "scaleX(-1)" }
         }, null, 8, ["stroke"])
       ], 6),
-      k("button", {
+      C("button", {
         class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !b.value.length }]),
         onClick: fe,
         style: x({
@@ -334,7 +334,7 @@ const ye = {
           border: `1px solid ${y.value}`
         })
       }, [
-        R(T, {
+        $(T, {
           name: "trash",
           stroke: d.color
         }, null, 8, ["stroke"])
@@ -347,10 +347,10 @@ const ye = {
         min: 0.5,
         max: 12,
         step: 0.1,
-        "onUpdate:modelValue": e[3] || (e[3] = (n) => $.value = n),
+        "onUpdate:modelValue": e[3] || (e[3] = (n) => R.value = n),
         style: x({ accentColor: d.color })
       }, null, 4)), [
-        [oe, $.value]
+        [oe, R.value]
       ]) : q("", !0),
       h.value === "text" ? ae((z(), Y("input", {
         key: 1,

package/dist/{RecursiveCircles-Dn3TGoL6.js → RecursiveCircles-BcLb1aRS.js}

@@ -1,5 +1,5 @@
-import { toRef as m, resolveComponent as R, createElementBlock as s, openBlock as o, Fragment as u, renderList as k, createCommentVNode as a, createBlock as $, createElementVNode as U, withModifiers as w, renderSlot as h, mergeProps as f, withCtx as x } from "vue";
-const F = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], M = ["x", "y", "height", "width", "onClick", "onMouseover"], P = {
+import { toRef as R, resolveComponent as U, createElementBlock as s, openBlock as o, Fragment as u, renderList as k, createCommentVNode as a, createBlock as w, createElementVNode as F, withModifiers as M, renderSlot as h, mergeProps as f, withCtx as x } from "vue";
+const H = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], S = ["x", "y", "height", "width", "onClick", "onMouseover"], B = {
   __name: "RecursiveCircles",
   props: {
     color: {
@@ -36,16 +36,18 @@ const F = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMous
     function n(r) {
       v("hover", r);
     }
-    return m(C, "dataset").value.forEach((r) => {
+    return R(C, "dataset").value.forEach((r) => {
       r.nodes && r.nodes.length > 0 && r.nodes.forEach((l) => {
         l.ancestor = r;
       });
     }), (r, l) => {
-      const g = R("RecursiveCircles", !0);
-      return o(!0), s(u, null, k(t.dataset, (e) => (o(), s(u, null, [
+      const g = U("RecursiveCircles", !0);
+      return o(!0), s(u, null, k(t.dataset, (e, m) => (o(), s(u, null, [
         e.polygonPath && e.polygonPath.coordinates ? (o(), s(u, { key: 0 }, [
-          (o(!0), s(u, null, k(e.polygonPath.coordinates, (i, S) => (o(), s(u, null, [
-            U("circle", {
+          (o(!0), s(u, null, k(e.polygonPath.coordinates, (i, $) => (o(), s(u, {
+            key: `node_${m}_${$}`
+          }, [
+            F("circle", {
               cx: i.x,
               cy: i.y,
               r: e.circleRadius,
@@ -56,7 +58,7 @@ const F = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMous
               onClick: (c) => d(e),
               onMouseover: (c) => n(e),
               onMouseleave: l[0] || (l[0] = (c) => n(null))
-            }, null, 40, F),
+            }, null, 40, H),
             r.$slots.node ? (o(), s("foreignObject", {
               key: 0,
               x: i.x - e.circleRadius,
@@ -64,14 +66,14 @@ const F = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMous
               height: e.circleRadius * 2,
               width: e.circleRadius * 2,
               style: { overflow: "visible" },
-              onClick: w((c) => d(e), ["stop"]),
+              onClick: M((c) => d(e), ["stop"]),
               onMouseover: (c) => n(e),
               onMouseleave: l[1] || (l[1] = (c) => n(null))
             }, [
               h(r.$slots, "node", f({ ref_for: !0 }, { node: e }))
-            ], 40, M)) : a("", !0)
-          ], 64))), 256)),
-          e.nodes && e.nodes.length > 0 ? (o(), $(g, {
+            ], 40, S)) : a("", !0)
+          ], 64))), 128)),
+          e.nodes && e.nodes.length > 0 ? (o(), w(g, {
             key: 0,
             dataset: e.nodes,
             color: t.color,
@@ -92,5 +94,5 @@ const F = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMous
   }
 };
 export {
-  P as default
+  B as default
 };

package/dist/RecursiveLabels-Bgcv0pzu.js

@@ -0,0 +1,50 @@
+import { toRef as y, resolveComponent as h, createElementBlock as l, openBlock as t, Fragment as n, renderList as c, createCommentVNode as i, createBlock as f, toDisplayString as p } from "vue";
+const v = ["x", "y", "fill", "font-size"], _ = {
+  __name: "RecursiveLabels",
+  props: {
+    color: {
+      type: String,
+      default: "#000000"
+    },
+    dataset: {
+      type: Array,
+      default: () => []
+    },
+    hoveredUid: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["zoom", "hover"],
+  setup(o, { emit: g }) {
+    return y(o, "dataset").value.forEach((r) => {
+      r.nodes && r.nodes.length > 0 && r.nodes.forEach((a) => {
+        a.ancestor = r;
+      });
+    }), (r, a) => {
+      const u = h("RecursiveLabels", !0);
+      return t(!0), l(n, null, c(o.dataset, (e, d) => (t(), l(n, null, [
+        e.polygonPath && e.polygonPath.coordinates ? (t(), l(n, { key: 0 }, [
+          (t(!0), l(n, null, c(e.polygonPath.coordinates, (s, m) => (t(), l("text", {
+            key: `node_${d}_${m}`,
+            x: s.x,
+            y: s.y + e.circleRadius * 2,
+            fill: o.color,
+            "font-size": e.circleRadius,
+            "text-anchor": "middle",
+            style: { opacity: "0.8", "pointer-events": "none" }
+          }, p(e.name), 9, v))), 128)),
+          e.nodes && e.nodes.length > 0 ? (t(), f(u, {
+            key: 0,
+            dataset: e.nodes,
+            color: o.color,
+            hoveredUid: o.hoveredUid
+          }, null, 8, ["dataset", "color", "hoveredUid"])) : i("", !0)
+        ], 64)) : i("", !0)
+      ], 64))), 256);
+    };
+  }
+};
+export {
+  _ as default
+};