vue-data-ui 3.10.0 → 3.10.2

package/dist/{vue-ui-molecule-CX-pPp0u.js → vue-ui-molecule-CUppdL5f.js}

@@ -1,52 +1,56 @@
-import { useCssVars as Do, defineAsyncComponent as p, computed as C, onMounted as So, ref as c, toRefs as Eo, watch as z, nextTick as H, createElementBlock as A, openBlock as v, unref as a, normalizeStyle as R, normalizeClass as De, createBlock as $, createCommentVNode as y, createVNode as D, withCtx as r, renderSlot as i, normalizeProps as f, guardReactiveProps as h, createSlots as Se, createElementVNode as S, Fragment as Bo, renderList as Po, resolveDynamicComponent as Io, mergeProps as No, createTextVNode as Ee, toDisplayString as Be } from "vue";
-import { o as Lo, g as Zo, c as Pe, t as Uo, i as zo, j as Ie, k as Ho, ae as Ro, X as Mo, q as xo, e as Vo, m as Ne, v as Go, r as jo, y as Wo, _ as Xo } from "./lib-2iaAPQ_c.js";
-import { u as Yo, a as oe } from "./useNestedProp-BCt4DMkT.js";
-import { u as qo, B as Jo } from "./BaseScanner-BMpwQAfz.js";
-import { u as Ko } from "./usePrinter-ChVMpU2f.js";
-import { u as Qo } from "./useSvgExport-ByUukOZt.js";
-import { u as et } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as ot } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as tt } from "./useChartAccessibility-9icAAmYg.js";
-import lt from "./img-CqYIrJ8I.js";
-import { u as at } from "./usePanZoom-CDF7rb3o.js";
-import { _ as st } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nodes: { stroke: "#4A4A4A", strokeHovered: "#CCCCCC" }, links: { stroke: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Ze = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", nodes: { stroke: "#333333", strokeHovered: "#FFFFFF" }, links: { stroke: "#333333" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Ue = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", nodes: { stroke: "#333333", strokeHovered: "#FFF8E1" }, links: { stroke: "#333333" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, ze = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", nodes: { stroke: "#1A1A1A", strokeHovered: "#00FF00" }, links: { stroke: "#333333" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, He = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", nodes: { stroke: "#fbfafa", strokeHovered: "#5E5E5E" }, links: { stroke: "#e8ede1" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Re = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", nodes: { stroke: "#61747E", strokeHovered: "#404C4D" }, links: { stroke: "#BBCBC7" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Me = {
+import { useCssVars as Eo, defineAsyncComponent as f, computed as p, onMounted as Bo, ref as c, toRefs as Po, watch as U, nextTick as z, createElementBlock as k, openBlock as v, unref as a, normalizeStyle as R, normalizeClass as De, createBlock as $, createCommentVNode as A, createVNode as D, withCtx as r, renderSlot as i, normalizeProps as C, guardReactiveProps as h, createSlots as Se, createElementVNode as S, Fragment as Io, renderList as No, resolveDynamicComponent as Lo, mergeProps as Zo, createTextVNode as Ee, toDisplayString as Be } from "vue";
+import { o as Ho, g as Uo, c as Pe, t as zo, i as Ro, j as Ie, k as Mo, ae as xo, X as Vo, q as Go, e as jo, m as Ne, v as Wo, r as Xo, y as Yo, _ as qo } from "./lib-CVHM9FhP.js";
+import { u as Jo, a as oe } from "./useNestedProp-Ckf_2P_V.js";
+import { u as Ko, B as Qo } from "./BaseScanner-BMpwQAfz.js";
+import { u as et } from "./usePrinter-1NmjuP-i.js";
+import { u as ot } from "./useSvgExport-ByUukOZt.js";
+import { u as tt } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as lt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as at } from "./useChartAccessibility-9icAAmYg.js";
+import st from "./img-6fNF_rG0.js";
+import { u as nt } from "./usePanZoom-CDF7rb3o.js";
+import { _ as rt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Le = { userOptions: { show: !1 } }, Ze = { userOptions: { show: !1 }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nodes: { stroke: "#4A4A4A", strokeHovered: "#CCCCCC" }, links: { stroke: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#3A3A3A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, He = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nodes: { stroke: "#4A4A4A", strokeHovered: "#CCCCCC" }, links: { stroke: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Ue = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", nodes: { stroke: "#333333", strokeHovered: "#FFFFFF" }, links: { stroke: "#333333" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, ze = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", nodes: { stroke: "#333333", strokeHovered: "#FFF8E1" }, links: { stroke: "#333333" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Re = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", nodes: { stroke: "#1A1A1A", strokeHovered: "#00FF00" }, links: { stroke: "#333333" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Me = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", nodes: { stroke: "#fbfafa", strokeHovered: "#5E5E5E" }, links: { stroke: "#e8ede1" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, xe = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", nodes: { stroke: "#61747E", strokeHovered: "#404C4D" }, links: { stroke: "#BBCBC7" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Ve = {
   default: {},
-  dark: Le,
-  celebration: Ze,
-  celebrationNight: Ue,
-  hack: ze,
-  zen: He,
-  concrete: Re
-}, Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: Le,
+  minimalDark: Ze,
+  dark: He,
+  celebration: Ue,
+  celebrationNight: ze,
+  hack: Re,
+  zen: Me,
+  concrete: xe
+}, It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: Ze,
-  celebrationNight: Ue,
-  concrete: Re,
-  dark: Le,
-  default: Me,
-  hack: ze,
-  zen: He
-}, Symbol.toStringTag, { value: "Module" })), nt = ["id"], rt = {
+  celebration: Ue,
+  celebrationNight: ze,
+  concrete: xe,
+  dark: He,
+  default: Ve,
+  hack: Re,
+  minimal: Le,
+  minimalDark: Ze,
+  zen: Me
+}, Symbol.toStringTag, { value: "Module" })), it = ["id"], ut = {
   key: 1,
   ref: "noTitle",
   class: "vue-data-ui-no-title-space",
   style: "height:36px; width: 100%;background:transparent"
-}, it = {
+}, ct = {
   key: 2,
   style: "width:100%;background:transparent;"
-}, ut = ["xmlns", "viewBox"], ct = ["width", "height"], dt = ["id"], vt = ["stop-color"], ft = ["stop-color"], ht = {
+}, dt = ["xmlns", "viewBox"], vt = ["width", "height"], Ct = ["id"], ht = ["stop-color"], ft = ["stop-color"], pt = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, pt = {
+}, gt = {
   key: 5,
   "data-dom-to-png-ignore": "",
   class: "reset-wrapper"
-}, Ct = {
+}, bt = {
   key: 6,
   ref: "source",
   dir: "auto"
-}, gt = ["innerHTML"], bt = {
+}, mt = ["innerHTML"], At = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -63,24 +67,24 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
     }
   },
   emits: ["selectNode"],
-  setup(xe, { expose: Ve, emit: Ge }) {
-    Do((o) => ({
+  setup(Ge, { expose: je, emit: We }) {
+    Eo((o) => ({
       v992a1d7e: o.slicerColor
     }));
-    const je = p(() => import("./Title-B5L2jweB.js")), We = p(() => import("./Tooltip-DpfUZbt7.js")), te = p(() => import("./BaseIcon-B9bGT7HU.js")), Xe = p(() => import("./vue-ui-accordion-CAXPDm31.js")), Ye = p(() => import("./DataTable-DEwh__D8.js")), qe = p(() => import("./PenAndPaper-CulSakut.js")), Je = p(() => import("./UserOptions-5pXc4J-c.js")), Ke = p(() => import("./PackageVersion-C-JOGZBL.js")), Qe = p(() => import("./RecursiveLinks-Da489v6n.js")), eo = p(() => import("./RecursiveLabels-DxmctYbA.js")), oo = p(() => import("./RecursiveCircles-CM4bn2Vg.js")), to = p(() => import("./BaseDraggableDialog-O2XSymlZ.js")), { vue_ui_molecule: lo } = Yo(), { isThemeValid: ao, warnInvalidTheme: so } = et(), w = xe, no = Ge, le = C(() => !!w.dataset && w.dataset.length);
-    So(() => {
+    const Xe = f(() => import("./Title-NgeRXqRA.js")), Ye = f(() => import("./Tooltip-B6qvABDL.js")), te = f(() => import("./BaseIcon-4uOct8re.js")), qe = f(() => import("./vue-ui-accordion-DFKaB_05.js")), Je = f(() => import("./DataTable-DyoDzNNY.js")), Ke = f(() => import("./PenAndPaper-LTuSTmWE.js")), Qe = f(() => import("./UserOptions-CX7Xsusk.js")), eo = f(() => import("./PackageVersion-CQxJyGQr.js")), oo = f(() => import("./RecursiveLinks-Da489v6n.js")), to = f(() => import("./RecursiveLabels-DxmctYbA.js")), lo = f(() => import("./RecursiveCircles-CM4bn2Vg.js")), ao = f(() => import("./BaseDraggableDialog-BQYfVNu8.js")), { vue_ui_molecule: so } = Jo(), { isThemeValid: no, warnInvalidTheme: ro } = tt(), w = Ge, io = We, le = p(() => !!w.dataset && w.dataset.length);
+    Bo(() => {
       ae();
     });
-    const ro = C(() => e.value.debug);
+    const uo = p(() => e.value.debug);
     function ae() {
-      Lo(w.dataset) && Zo({
+      Ho(w.dataset) && Uo({
         componentName: "VueUiMolecule",
         type: "dataset",
-        debug: ro.value
+        debug: uo.value
       });
     }
-    const M = c(Pe()), x = c(!1), L = c(""), T = c(null), se = c(0), ne = c(0), re = c(0), E = c(null), V = c(null), e = c(X()), { loading: G, FINAL_DATASET: j } = qo({
-      ...Eo(w),
+    const M = c(Pe()), x = c(!1), L = c(""), T = c(null), se = c(0), ne = c(0), re = c(0), E = c(null), V = c(null), e = c(X()), { loading: G, FINAL_DATASET: j } = Ko({
+      ...Po(w),
       FINAL_CONFIG: e,
       prepareConfig: X,
       skeletonDataset: [
@@ -121,7 +125,7 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           ]
         }
       ],
-      skeletonConfig: Uo({
+      skeletonConfig: zo({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -135,17 +139,17 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           }
         }
       })
-    }), { userOptionsVisible: W, setUserOptionsVisibility: ie, keepUserOptionState: ue } = ot({ config: e.value }), { svgRef: B } = tt({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: W, setUserOptionsVisibility: ie, keepUserOptionState: ue } = lt({ config: e.value }), { svgRef: B } = at({ config: e.value.style.chart.title });
     function X() {
       const o = oe({
         userConfig: w.config,
-        defaultConfig: lo
+        defaultConfig: so
       }), l = o.theme;
       if (!l) return o;
-      if (!ao.value(o))
-        return so(o), o;
+      if (!no.value(o))
+        return ro(o), o;
       const t = oe({
-        userConfig: Me[l] || w.config,
+        userConfig: Ve[l] || w.config,
         defaultConfig: o
       }), s = oe({
         userConfig: w.config,
@@ -153,29 +157,29 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
       });
       return {
         ...s,
-        customPalette: s.customPalette.length ? s.customPalette : zo[l] || Ie
+        customPalette: s.customPalette.length ? s.customPalette : Ro[l] || Ie
       };
     }
-    z(() => w.config, (o) => {
+    U(() => w.config, (o) => {
       e.value = X(), W.value = !e.value.userOptions.showOnChartHover, ae(), ne.value += 1, re.value += 1, u.value.showTable = e.value.table.show, u.value.showTooltip = e.value.style.chart.tooltip.show, u.value.showZoom = e.value.style.chart.zoom.show;
     }, { deep: !0 });
-    const ce = c(0), io = () => {
+    const ce = c(0), co = () => {
       ce.value += 1;
     };
-    z([() => G.value, () => j.value], async ([o]) => {
-      o || (await H(), g.value = Ce(), await H(), io(), await H(), Ao({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
+    U([() => G.value, () => j.value], async ([o]) => {
+      o || (await z(), g.value = pe(), await z(), co(), await z(), wo({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
     }, { flush: "post", deep: !1 });
-    const { isPrinting: de, isImaging: ve, generatePdf: fe, generateImage: he } = Ko({
+    const { isPrinting: de, isImaging: ve, generatePdf: Ce, generateImage: he } = et({
       elementId: `cluster_${M.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-molecule",
       options: e.value.userOptions.print
-    }), uo = C(() => e.value.userOptions.show && !e.value.style.chart.title.text), co = C(() => Ho(e.value.customPalette)), u = c({
+    }), vo = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Co = p(() => Mo(e.value.customPalette)), u = c({
       showTable: e.value.table.show,
       showDataLabels: !0,
       showTooltip: e.value.style.chart.tooltip.show,
       showZoom: e.value.style.chart.zoom.show
     });
-    z(e, () => {
+    U(e, () => {
       u.value = {
         showTable: e.value.table.show,
         showDataLabels: !0,
@@ -183,11 +187,11 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         showZoom: e.value.style.chart.zoom.show
       };
     }, { immediate: !0 });
-    function pe(o, l = 0) {
-      return Array.isArray(o) && o.length > 0 && o[0].nodes ? pe(o[0].nodes, l + 1) : l;
+    function fe(o, l = 0) {
+      return Array.isArray(o) && o.length > 0 && o[0].nodes ? fe(o[0].nodes, l + 1) : l;
     }
-    function Ce() {
-      const o = pe(j.value);
+    function pe() {
+      const o = fe(j.value);
       let l = 100, t = l;
       for (let s = 0; s < o; s += 1)
         l /= 1, t += l;
@@ -196,34 +200,34 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         width: t
       };
     }
-    const g = c(Ce());
+    const g = c(pe());
     function ge(o, l = { x: -g.value.width / 2.43, y: g.value.height / 2 }, t = g.value.width / 1.1, s = 24, n = 0, d = 0, b = "#BBBBBB", Q = 0) {
       if (!Array.isArray(o) || o.length === 0) return o;
-      const Oo = Vo({
+      const So = jo({
         plot: l,
         radius: t,
         sides: o.length,
         rotation: n
       });
       return o.forEach((m, Fe) => {
-        const _e = Oo.coordinates[Fe], Oe = m.color ? (() => {
+        const Oe = So.coordinates[Fe], _e = m.color ? (() => {
           let ee = Ne(m.color);
           return ee.startsWith("#") ? ee : `#${ee}`;
         })() : null;
-        let O;
-        Oe ? O = Oe : Q === 0 ? O = b : Q === 1 ? (O = co.value[d] || Ie[d] || b, d += 1) : O = b, m.polygonPath = { coordinates: [_e] }, m.circleRadius = s, m.color = O, m.uid = Pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = ge(
+        let _;
+        _e ? _ = _e : Q === 0 ? _ = b : Q === 1 ? (_ = Co.value[d] || Ie[d] || b, d += 1) : _ = b, m.polygonPath = { coordinates: [Oe] }, m.circleRadius = s, m.color = _, m.uid = Pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = ge(
           m.nodes,
-          _e,
+          Oe,
           t / 2.9,
           s / 2.2,
           n + Math.PI * Fe / m.nodes.length,
           d,
-          O,
+          _,
           Q + 1
         ));
       }), o;
     }
-    function vo(o) {
+    function ho(o) {
       const l = /* @__PURE__ */ new Set();
       function t(n) {
         n.forEach((d) => {
@@ -239,29 +243,29 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         s[n] = `gradient_${d}`;
       }), s;
     }
-    const fo = C(() => vo(k.value)), k = C(() => {
-      const o = Ro(j.value);
+    const fo = p(() => ho(y.value)), y = p(() => {
+      const o = xo(j.value);
       return ge(o);
     }), Y = c(null);
-    function ho(o) {
+    function po(o) {
       Y.value = {
         datapoint: o,
         seriesIndex: -1,
-        series: k.value,
+        series: y.value,
         config: e.value
       };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (Wo(l) && Xo(() => l({
+      if (Yo(l) && qo(() => l({
         seriesIndex: -1,
         datapoint: o,
-        series: k.value,
+        series: y.value,
         config: e.value
       })))
         L.value = l({
           seriesIndex: -1,
           // well, ok
           datapoint: o,
-          series: k.value,
+          series: y.value,
           config: e.value
         });
       else {
@@ -270,10 +274,10 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
       }
     }
     const Z = c(null), P = c(null), be = c(null);
-    function po(o) {
-      be.value = Z.value, Z.value = o, o ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: be.value || Z.value, seriesIndex: -1 }), o ? (x.value = !0, ho(o), P.value = o.uid) : (x.value = !1, L.value = "", P.value = null);
+    function go(o) {
+      be.value = Z.value, Z.value = o, o ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: be.value || Z.value, seriesIndex: -1 }), o ? (x.value = !0, po(o), P.value = o.uid) : (x.value = !1, L.value = "", P.value = null);
     }
-    function Co(o) {
+    function bo(o) {
       const l = [];
       function t(s) {
         s.forEach((n) => {
@@ -288,12 +292,12 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
       }
       return t(o), l;
     }
-    const go = C(() => Co(k.value)), F = C(() => {
+    const mo = p(() => bo(y.value)), F = p(() => {
       const o = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
-      ], l = go.value.map((n, d) => [
+      ], l = mo.value.map((n, d) => [
         {
           color: n.color,
           name: n.name
@@ -325,25 +329,25 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
       };
     });
     function q(o = null) {
-      H(() => {
-        const l = F.value.body.map((n, d) => [[n[0].name], [n[1]], [n[2]]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...F.value.head]]].concat(l), s = Go(t);
-        o ? o(s) : jo({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+      z(() => {
+        const l = F.value.body.map((n, d) => [[n[0].name], [n[1]], [n[2]]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...F.value.head]]].concat(l), s = Wo(t);
+        o ? o(s) : Xo({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
-    function bo() {
-      return k.value;
+    function Ao() {
+      return y.value;
     }
-    const _ = c(!1);
+    const O = c(!1);
     function me(o) {
-      _.value = o, se.value += 1;
+      O.value = o, se.value += 1;
     }
-    function ye() {
+    function Ae() {
       u.value.showTable = !u.value.showTable;
     }
-    function Ae() {
+    function ke() {
       u.value.showDataLabels = !u.value.showDataLabels;
     }
-    function ke() {
+    function ye() {
       u.value.showTooltip = !u.value.showTooltip;
     }
     function we() {
@@ -353,18 +357,18 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
     function J() {
       I.value = !I.value;
     }
-    const mo = C(() => !I.value && u.value.showZoom), { viewBox: U, resetZoom: K, isZoom: yo, setInitialViewBox: Ao } = at(B, {
+    const ko = p(() => !I.value && u.value.showZoom), { viewBox: H, resetZoom: K, isZoom: yo, setInitialViewBox: wo } = nt(B, {
       x: 0,
       y: 0,
       width: Math.max(10, g.value.width),
       height: Math.max(10, g.value.height)
-    }, e.value.style.chart.zoom.speed, mo);
-    function ko(o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: -1 }), no("selectNode", o);
+    }, e.value.style.chart.zoom.speed, ko);
+    function To(o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: -1 }), io("selectNode", o);
     }
-    async function wo({ scale: o = 2 } = {}) {
+    async function $o({ scale: o = 2 } = {}) {
       if (!T.value) return;
-      const { width: l, height: t } = T.value.getBoundingClientRect(), s = l / t, { imageUri: n, base64: d } = await lt({ domElement: T.value, base64: !0, img: !0, scale: o });
+      const { width: l, height: t } = T.value.getBoundingClientRect(), s = l / t, { imageUri: n, base64: d } = await st({ domElement: T.value, base64: !0, img: !0, scale: o });
       return {
         imageUri: n,
         base64: d,
@@ -374,17 +378,17 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         aspectRatio: s
       };
     }
-    const N = C(() => {
+    const N = p(() => {
       const o = e.value.table.useDialog && !e.value.table.show, l = u.value.showTable;
       return {
-        component: o ? to : Xe,
+        component: o ? ao : qe,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: o ? {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: _.value,
+          isFullscreen: O.value,
           fullscreenParent: T.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
@@ -404,41 +408,41 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         }
       };
     });
-    z(() => u.value.showTable, (o) => {
+    U(() => u.value.showTable, (o) => {
       e.value.table.show || (o && e.value.table.useDialog && E.value ? E.value.open() : "close" in E.value && E.value.close());
     });
     function Te() {
       u.value.showTable = !1, V.value && V.value.setTableIconState(!1);
     }
-    const To = C(() => e.value.style.chart.backgroundColor), $o = C(() => e.value.style.chart.title), { exportSvg: Fo, getSvg: _o } = Qo({
+    const Fo = p(() => e.value.style.chart.backgroundColor), Oo = p(() => e.value.style.chart.title), { exportSvg: _o, getSvg: Do } = ot({
       svg: B,
-      title: $o,
-      backgroundColor: To
+      title: Oo,
+      backgroundColor: Fo
     });
     async function $e({ isCb: o }) {
       if (o) {
-        const { blob: l, url: t, text: s, dataUrl: n } = await _o();
+        const { blob: l, url: t, text: s, dataUrl: n } = await Do();
         e.value.userOptions.callbacks.svg({ blob: l, url: t, text: s, dataUrl: n });
       } else
-        Fo();
+        _o();
     }
-    return Ve({
-      getData: bo,
-      getImage: wo,
-      generatePdf: fe,
+    return je({
+      getData: Ao,
+      getImage: $o,
+      generatePdf: Ce,
       generateCsv: q,
       generateImage: he,
       generateSvg: $e,
-      toggleTable: ye,
-      toggleLabels: Ae,
-      toggleTooltip: ke,
+      toggleTable: Ae,
+      toggleLabels: ke,
+      toggleTooltip: ye,
       toggleAnnotator: J,
       toggleFullscreen: me,
       toggleZoom: we
-    }), (o, l) => (v(), A("div", {
+    }), (o, l) => (v(), k("div", {
       ref_key: "moleculeChart",
       ref: T,
-      class: De(`vue-data-ui-component vue-ui-molecule ${_.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      class: De(`vue-data-ui-component vue-ui-molecule ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       style: R(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `cluster_${M.value}`,
       onMouseleave: l[2] || (l[2] = (t) => {
@@ -446,7 +450,7 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
       }),
       onMouseenter: l[3] || (l[3] = () => a(ie)(!0))
     }, [
-      e.value.userOptions.buttons.annotator && a(B) ? (v(), $(a(qe), {
+      e.value.userOptions.buttons.annotator && a(B) ? (v(), $(a(Ke), {
         key: 0,
         svgRef: a(B),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -458,25 +462,25 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           i(o.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": r(({ color: t }) => [
-          i(o.$slots, "annotator-action-color", f(h({ color: t })), void 0, !0)
+          i(o.$slots, "annotator-action-color", C(h({ color: t })), void 0, !0)
         ]),
         "annotator-action-draw": r(({ mode: t }) => [
-          i(o.$slots, "annotator-action-draw", f(h({ mode: t })), void 0, !0)
+          i(o.$slots, "annotator-action-draw", C(h({ mode: t })), void 0, !0)
         ]),
         "annotator-action-undo": r(({ disabled: t }) => [
-          i(o.$slots, "annotator-action-undo", f(h({ disabled: t })), void 0, !0)
+          i(o.$slots, "annotator-action-undo", C(h({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-redo": r(({ disabled: t }) => [
-          i(o.$slots, "annotator-action-redo", f(h({ disabled: t })), void 0, !0)
+          i(o.$slots, "annotator-action-redo", C(h({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-delete": r(({ disabled: t }) => [
-          i(o.$slots, "annotator-action-delete", f(h({ disabled: t })), void 0, !0)
+          i(o.$slots, "annotator-action-delete", C(h({ disabled: t })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
-      uo.value ? (v(), A("div", rt, null, 512)) : y("", !0),
-      e.value.style.chart.title.text ? (v(), A("div", it, [
-        (v(), $(a(je), {
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : A("", !0),
+      vo.value ? (v(), k("div", ut, null, 512)) : A("", !0),
+      e.value.style.chart.title.text ? (v(), k("div", ct, [
+        (v(), $(a(Xe), {
           key: `title_${ne.value}`,
           config: {
             title: {
@@ -489,8 +493,8 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
             }
           }
         }, null, 8, ["config"]))
-      ])) : y("", !0),
-      e.value.userOptions.show && le.value && (a(ue) || a(W)) ? (v(), $(a(Je), {
+      ])) : A("", !0),
+      e.value.userOptions.show && le.value && (a(ue) || a(W)) ? (v(), $(a(Qe), {
         ref_key: "userOptionsRef",
         ref: V,
         key: `user_options_${se.value}`,
@@ -519,13 +523,13 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         hasZoom: e.value.userOptions.buttons.zoom,
         isZoom: u.value.showZoom,
         onToggleFullscreen: me,
-        onGeneratePdf: a(fe),
+        onGeneratePdf: a(Ce),
         onGenerateCsv: q,
         onGenerateImage: a(he),
         onGenerateSvg: $e,
-        onToggleTable: ye,
-        onToggleLabels: Ae,
-        onToggleTooltip: ke,
+        onToggleTable: Ae,
+        onToggleLabels: ke,
+        onToggleTooltip: ye,
         onToggleAnnotator: J,
         onToggleZoom: we,
         style: R({
@@ -535,7 +539,7 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         o.$slots.menuIcon ? {
           name: "menuIcon",
           fn: r(({ isOpen: t, color: s }) => [
-            i(o.$slots, "menuIcon", f(h({ isOpen: t, color: s })), void 0, !0)
+            i(o.$slots, "menuIcon", C(h({ isOpen: t, color: s })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -591,36 +595,36 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         o.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: r(({ toggleFullscreen: t, isFullscreen: s }) => [
-            i(o.$slots, "optionFullscreen", f(h({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
+            i(o.$slots, "optionFullscreen", C(h({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         o.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: r(({ toggleAnnotator: t, isAnnotator: s }) => [
-            i(o.$slots, "optionAnnotator", f(h({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
+            i(o.$slots, "optionAnnotator", C(h({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
           ]),
           key: "9"
         } : void 0,
         o.$slots.optionZoom ? {
           name: "optionZoom",
           fn: r(({ toggleZoom: t, isZoomLocked: s }) => [
-            i(o.$slots, "optionZoom", f(h({ toggleZoom: t, isZoomLocked: s })), void 0, !0)
+            i(o.$slots, "optionZoom", C(h({ toggleZoom: t, isZoomLocked: s })), void 0, !0)
           ]),
           key: "10"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "hasZoom", "isZoom", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
-      (v(), A("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "hasZoom", "isZoom", "onGeneratePdf", "onGenerateImage", "style"])) : A("", !0),
+      (v(), k("svg", {
         ref_key: "svgRef",
         ref: B,
         key: `svg_${ce.value}`,
-        xmlns: a(Mo),
-        viewBox: `${a(U).x} ${a(U).y} ${a(U).width} ${a(U).height}`,
-        class: De({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
+        xmlns: a(Vo),
+        viewBox: `${a(H).x} ${a(H).y} ${a(H).width} ${a(H).height}`,
+        class: De({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
         style: R(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        D(a(Ke)),
-        o.$slots["chart-background"] ? (v(), A("foreignObject", {
+        D(a(eo)),
+        o.$slots["chart-background"] ? (v(), k("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -631,9 +635,9 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           }
         }, [
           i(o.$slots, "chart-background", {}, void 0, !0)
-        ], 8, ct)) : y("", !0),
+        ], 8, vt)) : A("", !0),
         S("defs", null, [
-          (v(!0), A(Bo, null, Po(Object.keys(fo.value), (t) => (v(), A("radialGradient", {
+          (v(!0), k(Io, null, No(Object.keys(fo.value), (t) => (v(), k("radialGradient", {
             id: `gradient_${t}`,
             cx: "50%",
             cy: "30%",
@@ -643,44 +647,44 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           }, [
             S("stop", {
               offset: "0%",
-              "stop-color": a(xo)(t, 0.5)
-            }, null, 8, vt),
+              "stop-color": a(Go)(t, 0.5)
+            }, null, 8, ht),
             S("stop", {
               offset: "100%",
               "stop-color": t
             }, null, 8, ft)
-          ], 8, dt))), 256))
+          ], 8, Ct))), 256))
         ]),
-        D(a(Qe), {
-          dataset: k.value,
+        D(a(oo), {
+          dataset: y.value,
           color: e.value.style.chart.links.stroke,
           backgroundColor: e.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        D(a(oo), {
-          dataset: k.value,
+        D(a(lo), {
+          dataset: y.value,
           hoveredUid: P.value,
           stroke: e.value.style.chart.nodes.stroke,
           strokeHovered: e.value.style.chart.nodes.strokeHovered,
-          onClick: ko,
-          onHover: po
+          onClick: To,
+          onHover: go
         }, {
           node: r(({ node: t }) => [
-            i(o.$slots, "node", f(h({ node: t })), void 0, !0)
+            i(o.$slots, "node", C(h({ node: t })), void 0, !0)
           ]),
           _: 3
         }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        u.value.showDataLabels && !a(G) ? (v(), $(a(eo), {
+        u.value.showDataLabels && !a(G) ? (v(), $(a(to), {
           key: 1,
-          dataset: k.value,
+          dataset: y.value,
           color: e.value.style.chart.color,
           hoveredUid: P.value
-        }, null, 8, ["dataset", "color", "hoveredUid"])) : y("", !0),
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : A("", !0),
         i(o.$slots, "svg", { svg: g.value }, void 0, !0)
-      ], 14, ut)),
-      o.$slots.watermark ? (v(), A("div", ht, [
-        i(o.$slots, "watermark", f(h({ isPrinting: a(de) || a(ve) })), void 0, !0)
-      ])) : y("", !0),
-      a(yo) ? (v(), A("div", pt, [
+      ], 14, dt)),
+      o.$slots.watermark ? (v(), k("div", pt, [
+        i(o.$slots, "watermark", C(h({ isPrinting: a(de) || a(ve) })), void 0, !0)
+      ])) : A("", !0),
+      a(yo) ? (v(), k("div", gt, [
         i(o.$slots, "reset-action", { reset: a(K) }, () => [
           S("button", {
             "data-cy-reset": "",
@@ -698,11 +702,11 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
-      ])) : y("", !0),
-      o.$slots.source ? (v(), A("div", Ct, [
+      ])) : A("", !0),
+      o.$slots.source ? (v(), k("div", bt, [
         i(o.$slots, "source", {}, void 0, !0)
-      ], 512)) : y("", !0),
-      D(a(We), {
+      ], 512)) : A("", !0),
+      D(a(Ye), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
         show: u.value.showTooltip && x.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
@@ -716,7 +720,7 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: T.value,
         content: L.value,
-        isFullscreen: _.value,
+        isFullscreen: O.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
@@ -724,20 +728,20 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
         "tooltip-before": r(() => [
-          i(o.$slots, "tooltip-before", f(h({ ...Y.value })), void 0, !0)
+          i(o.$slots, "tooltip-before", C(h({ ...Y.value })), void 0, !0)
         ]),
         "tooltip-after": r(() => [
-          i(o.$slots, "tooltip-after", f(h({ ...Y.value })), void 0, !0)
+          i(o.$slots, "tooltip-after", C(h({ ...Y.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      le.value && e.value.userOptions.buttons.table ? (v(), $(Io(N.value.component), No({ key: 7 }, N.value.props, {
+      le.value && e.value.userOptions.buttons.table ? (v(), $(Lo(N.value.component), Zo({ key: 7 }, N.value.props, {
         ref_key: "tableUnit",
         ref: E,
         onClose: Te
       }), Se({
         content: r(() => [
-          (v(), $(a(Ye), {
+          (v(), $(a(Je), {
             key: `table_${re.value}`,
             colNames: F.value.colNames,
             head: F.value.head,
@@ -751,7 +755,7 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
               S("div", {
                 innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, gt)
+              }, null, 8, mt)
             ]),
             td: r(({ td: t }) => [
               Ee(Be(t.name || t), 1)
@@ -784,16 +788,16 @@ const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : y("", !0),
-      a(G) ? (v(), $(Jo, { key: 8 })) : y("", !0)
-    ], 46, nt));
+      ]), 1040)) : A("", !0),
+      a(G) ? (v(), $(Qo, { key: 8 })) : A("", !0)
+    ], 46, it));
   }
-}, mt = /* @__PURE__ */ st(bt, [["__scopeId", "data-v-f1c3323e"]]), Pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, kt = /* @__PURE__ */ rt(At, [["__scopeId", "data-v-f1c3323e"]]), Nt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: mt
+  default: kt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Bt as a,
-  Pt as b,
-  mt as v
+  It as a,
+  Nt as b,
+  kt as v
 };