vue-data-ui 2.6.18 → 2.6.20

package/dist/{vue-ui-molecule-BMiNGYBh.js → vue-ui-molecule-Cv6jp9D_.js}

@@ -1,18 +1,18 @@
-import { toRef as de, resolveComponent as ve, createElementBlock as d, openBlock as l, Fragment as k, renderList as I, createCommentVNode as g, createBlock as R, createElementVNode as B, withModifiers as ze, renderSlot as $, mergeProps as Ce, withCtx as L, toDisplayString as Te, ref as p, onMounted as Le, onUnmounted as He, watchEffect as Be, computed as _, watch as Ge, unref as b, normalizeStyle as ce, normalizeClass as we, createVNode as se, createSlots as Ve, normalizeProps as Y, guardReactiveProps as W, createTextVNode as Xe, nextTick as je } from "vue";
-import { u as qe, o as Ye, e as We, c as $e, t as Ze, p as xe, a as Qe, b as Je, X as Ke, l as et, P as tt, q as ot, r as lt, x as at, y as st } from "./index-Df45PKBw.js";
-import { _ as nt } from "./Title-xfHZTDT9.js";
-import { u as rt, U as it } from "./usePrinter-MC5pKUx5.js";
-import { D as ut } from "./DataTable-BH56SPdO.js";
-import { _ as ct } from "./Tooltip-CF9cKbnr.js";
-import dt from "./vue-ui-skeleton-BIYEApQO.js";
-import vt from "./vue-ui-accordion-BbCvey8w.js";
-import { u as Pe } from "./useNestedProp-BaSIdRPe.js";
-import { _ as ht } from "./PackageVersion-D1edJun6.js";
-import { P as ft } from "./PenAndPaper-DWnLI5jM.js";
+import { toRef as de, resolveComponent as ve, createElementBlock as d, openBlock as s, Fragment as k, renderList as _, createCommentVNode as m, createBlock as R, createElementVNode as V, withModifiers as ze, renderSlot as $, mergeProps as Ce, withCtx as T, toDisplayString as Te, ref as p, onMounted as Le, onUnmounted as He, watchEffect as Be, computed as N, watch as Ge, unref as b, normalizeStyle as ce, normalizeClass as we, createVNode as ae, createSlots as Ve, normalizeProps as B, guardReactiveProps as G, createTextVNode as Xe, nextTick as je } from "vue";
+import { u as qe, o as Ye, e as We, c as $e, t as Ze, p as xe, a as Qe, b as Je, X as Ke, l as et, P as tt, q as ot, r as lt, x as st, y as at } from "./index-Cq7-va_5.js";
+import { _ as nt } from "./Title-CUHNtIyE.js";
+import { u as rt, U as it } from "./usePrinter-jRjc8Naz.js";
+import { D as ut } from "./DataTable-CMUyDj6S.js";
+import { _ as ct } from "./Tooltip-BuAQ8HVL.js";
+import dt from "./vue-ui-skeleton-DIrE1OTF.js";
+import vt from "./vue-ui-accordion-vAQ_LLoP.js";
+import { u as Pe } from "./useNestedProp-BEyJNlaO.js";
+import { _ as ht } from "./PackageVersion-CURzw4q1.js";
+import { P as ft } from "./PenAndPaper-CjiJra09.js";
 import { u as yt } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as pt } from "./useChartAccessibility-BWojgys7.js";
-import { _ as gt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const mt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], bt = ["x", "y", "height", "width", "onClick", "onMouseover"], kt = {
+import { _ as mt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const gt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], bt = ["x", "y", "height", "width", "onClick", "onMouseover"], kt = {
   __name: "RecursiveCircles",
   props: {
     color: {
@@ -43,22 +43,22 @@ const mt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
   emits: ["click", "hover"],
   setup(r, { emit: M }) {
     const z = r, S = M;
-    function n(s) {
-      S("click", s);
+    function n(a) {
+      S("click", a);
     }
-    function C(s) {
-      S("hover", s);
+    function C(a) {
+      S("hover", a);
     }
-    return de(z, "dataset").value.forEach((s) => {
-      s.nodes && s.nodes.length > 0 && s.nodes.forEach((h) => {
-        h.ancestor = s;
+    return de(z, "dataset").value.forEach((a) => {
+      a.nodes && a.nodes.length > 0 && a.nodes.forEach((h) => {
+        h.ancestor = a;
       });
-    }), (s, h) => {
+    }), (a, h) => {
       const H = ve("RecursiveCircles", !0);
-      return l(!0), d(k, null, I(r.dataset, (i) => (l(), d(k, null, [
-        i.polygonPath && i.polygonPath.coordinates ? (l(), d(k, { key: 0 }, [
-          (l(!0), d(k, null, I(i.polygonPath.coordinates, (x, U) => (l(), d(k, null, [
-            B("circle", {
+      return s(!0), d(k, null, _(r.dataset, (i) => (s(), d(k, null, [
+        i.polygonPath && i.polygonPath.coordinates ? (s(), d(k, { key: 0 }, [
+          (s(!0), d(k, null, _(i.polygonPath.coordinates, (x, U) => (s(), d(k, null, [
+            V("circle", {
               cx: x.x,
               cy: x.y,
               r: i.circleRadius,
@@ -69,8 +69,8 @@ const mt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
               onClick: (O) => n(i),
               onMouseover: (O) => C(i),
               onMouseleave: h[0] || (h[0] = (O) => C(null))
-            }, null, 40, mt),
-            s.$slots.node ? (l(), d("foreignObject", {
+            }, null, 40, gt),
+            a.$slots.node ? (s(), d("foreignObject", {
               key: 0,
               x: x.x - i.circleRadius,
               y: x.y - i.circleRadius,
@@ -81,10 +81,10 @@ const mt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
               onMouseover: (O) => C(i),
               onMouseleave: h[1] || (h[1] = (O) => C(null))
             }, [
-              $(s.$slots, "node", Ce({ ref_for: !0 }, { node: i }))
-            ], 40, bt)) : g("", !0)
+              $(a.$slots, "node", Ce({ ref_for: !0 }, { node: i }))
+            ], 40, bt)) : m("", !0)
           ], 64))), 256)),
-          i.nodes && i.nodes.length > 0 ? (l(), R(H, {
+          i.nodes && i.nodes.length > 0 ? (s(), R(H, {
             key: 0,
             dataset: i.nodes,
             color: r.color,
@@ -94,12 +94,12 @@ const mt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             onClick: n,
             onHover: C
           }, {
-            node: L(({ node: x }) => [
-              $(s.$slots, "node", Ce({ ref_for: !0 }, { node: x }))
+            node: T(({ node: x }) => [
+              $(a.$slots, "node", Ce({ ref_for: !0 }, { node: x }))
             ]),
             _: 2
-          }, 1032, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : g("", !0)
-        ], 64)) : g("", !0)
+          }, 1032, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : m("", !0)
+        ], 64)) : m("", !0)
       ], 64))), 256);
     };
   }
@@ -126,38 +126,38 @@ const mt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       });
     }), (S, n) => {
       const C = ve("RecursiveLinks", !0);
-      return l(), d(k, null, [
-        (l(!0), d(k, null, I(r.dataset, (c) => (l(), d(k, null, [
-          c.polygonPath && c.polygonPath.coordinates ? (l(!0), d(k, { key: 0 }, I(c.polygonPath.coordinates, (s, h) => (l(), d(k, null, [
-            c.ancestor && c.ancestor.polygonPath ? (l(), d(k, { key: 0 }, [
-              B("line", {
-                x1: s.x,
-                y1: s.y,
+      return s(), d(k, null, [
+        (s(!0), d(k, null, _(r.dataset, (c) => (s(), d(k, null, [
+          c.polygonPath && c.polygonPath.coordinates ? (s(!0), d(k, { key: 0 }, _(c.polygonPath.coordinates, (a, h) => (s(), d(k, null, [
+            c.ancestor && c.ancestor.polygonPath ? (s(), d(k, { key: 0 }, [
+              V("line", {
+                x1: a.x,
+                y1: a.y,
                 x2: c.ancestor.polygonPath.coordinates[0].x,
                 y2: c.ancestor.polygonPath.coordinates[0].y,
                 stroke: r.backgroundColor,
                 "stroke-width": c.circleRadius / 1.5
               }, null, 8, Ct),
-              B("line", {
-                x1: s.x,
-                y1: s.y,
+              V("line", {
+                x1: a.x,
+                y1: a.y,
                 x2: c.ancestor.polygonPath.coordinates[0].x,
                 y2: c.ancestor.polygonPath.coordinates[0].y,
                 stroke: r.color,
                 "stroke-width": c.circleRadius / 2
               }, null, 8, wt)
-            ], 64)) : g("", !0)
-          ], 64))), 256)) : g("", !0)
+            ], 64)) : m("", !0)
+          ], 64))), 256)) : m("", !0)
         ], 64))), 256)),
-        (l(!0), d(k, null, I(r.dataset, (c) => (l(), d(k, null, [
-          c.polygonPath && c.polygonPath.coordinates ? (l(), d(k, { key: 0 }, [
-            c.nodes && c.nodes.length > 0 ? (l(), R(C, {
+        (s(!0), d(k, null, _(r.dataset, (c) => (s(), d(k, null, [
+          c.polygonPath && c.polygonPath.coordinates ? (s(), d(k, { key: 0 }, [
+            c.nodes && c.nodes.length > 0 ? (s(), R(C, {
               key: 0,
               dataset: c.nodes,
               color: r.color,
               backgroundColor: r.backgroundColor
-            }, null, 8, ["dataset", "color", "backgroundColor"])) : g("", !0)
-          ], 64)) : g("", !0)
+            }, null, 8, ["dataset", "color", "backgroundColor"])) : m("", !0)
+          ], 64)) : m("", !0)
         ], 64))), 256))
       ], 64);
     };
@@ -186,49 +186,49 @@ const mt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       });
     }), (n, C) => {
       const c = ve("RecursiveLabels", !0);
-      return l(!0), d(k, null, I(r.dataset, (s) => (l(), d(k, null, [
-        s.polygonPath && s.polygonPath.coordinates ? (l(), d(k, { key: 0 }, [
-          (l(!0), d(k, null, I(s.polygonPath.coordinates, (h) => (l(), d("text", {
+      return s(!0), d(k, null, _(r.dataset, (a) => (s(), d(k, null, [
+        a.polygonPath && a.polygonPath.coordinates ? (s(), d(k, { key: 0 }, [
+          (s(!0), d(k, null, _(a.polygonPath.coordinates, (h) => (s(), d("text", {
             x: h.x,
-            y: h.y + s.circleRadius * 2,
+            y: h.y + a.circleRadius * 2,
             fill: r.color,
-            "font-size": s.circleRadius,
+            "font-size": a.circleRadius,
             "text-anchor": "middle",
             style: { opacity: "0.8", "pointer-events": "none" }
-          }, Te(s.name), 9, xt))), 256)),
-          s.nodes && s.nodes.length > 0 ? (l(), R(c, {
+          }, Te(a.name), 9, xt))), 256)),
+          a.nodes && a.nodes.length > 0 ? (s(), R(c, {
             key: 0,
-            dataset: s.nodes,
+            dataset: a.nodes,
             color: r.color,
             hoveredUid: r.hoveredUid
-          }, null, 8, ["dataset", "color", "hoveredUid"])) : g("", !0)
-        ], 64)) : g("", !0)
+          }, null, 8, ["dataset", "color", "hoveredUid"])) : m("", !0)
+        ], 64)) : m("", !0)
       ], 64))), 256);
     };
   }
 };
 function Tt(r, M = { x: 0, y: 0, width: 100, height: 100 }, z = 1, S) {
-  const n = p({ ...M }), C = p(1), c = p(!1), s = p({ x: 0, y: 0 });
+  const n = p({ ...M }), C = p(1), c = p(!1), a = p({ x: 0, y: 0 });
   let h = { x: 0, y: 0 }, H = null, i = null;
   function x(o) {
     var D;
     const v = r.value;
     if (!v) return { x: 0, y: 0 };
-    const m = v.createSVGPoint();
-    m.x = o.clientX, m.y = o.clientY;
-    const T = (D = v.getScreenCTM()) == null ? void 0 : D.inverse();
-    return T ? m.matrixTransform(T) : { x: 0, y: 0 };
+    const g = v.createSVGPoint();
+    g.x = o.clientX, g.y = o.clientY;
+    const L = (D = v.getScreenCTM()) == null ? void 0 : D.inverse();
+    return L ? g.matrixTransform(L) : { x: 0, y: 0 };
   }
   function U(o) {
     c.value = !0;
     const v = x(o.touches ? o.touches[0] : o);
-    s.value = { x: v.x, y: v.y }, h = { x: 0, y: 0 };
+    a.value = { x: v.x, y: v.y }, h = { x: 0, y: 0 };
   }
   function O(o) {
     if (!c.value) return;
     const v = x(o.touches ? o.touches[0] : o);
-    let m = v.x - s.value.x, T = v.y - s.value.y;
-    Math.abs(m) < 0.3 && Math.abs(T) < 0.3 || (h.x = m * 0.8 + h.x * 0.2, h.y = T * 0.8 + h.y * 0.2, s.value = v, H || (H = requestAnimationFrame(te)));
+    let g = v.x - a.value.x, L = v.y - a.value.y;
+    Math.abs(g) < 0.3 && Math.abs(L) < 0.3 || (h.x = g * 0.8 + h.x * 0.2, h.y = L * 0.8 + h.y * 0.2, a.value = v, H || (H = requestAnimationFrame(te)));
   }
   function te() {
     n.value.x -= h.x, n.value.y -= h.y, H = null;
@@ -239,47 +239,47 @@ function Tt(r, M = { x: 0, y: 0, width: 100, height: 100 }, z = 1, S) {
   function e(o) {
     o.preventDefault();
     const v = o.deltaY > 0 ? 0.9 : 1.1;
-    V(v, x(o));
+    j(v, x(o));
   }
-  function G(o) {
+  function X(o) {
     o.preventDefault();
-    const v = x(o), m = 1.02 * (1 + z / 100);
-    oe(m, v);
+    const v = x(o), g = 1.02 * (1 + z / 100);
+    oe(g, v);
   }
   function oe(o, v) {
     i && cancelAnimationFrame(i);
-    let m = C.value, T = m * o, D = 0;
+    let g = C.value, L = g * o, D = 0;
     const w = () => {
       D += 0.02;
-      let j = m + (T - m) * le(D);
+      let Y = g + (L - g) * le(D);
       if (D >= 1) {
-        C.value = T, i = null;
+        C.value = L, i = null;
         return;
       }
-      V(j / m, v), i = requestAnimationFrame(w);
+      j(Y / g, v), i = requestAnimationFrame(w);
     };
     w();
   }
   const le = (o) => o < 0.5 ? 2 * o * o : -1 + (4 - 2 * o) * o;
-  function V(o, v) {
-    const m = C.value * o, T = m / C.value, D = n.value.width / T, w = n.value.height / T, j = (v.x - n.value.x) * (1 - 1 / T), ne = (v.y - n.value.y) * (1 - 1 / T);
-    n.value.x += j, n.value.y += ne, n.value.width = D, n.value.height = w, C.value = m;
+  function j(o, v) {
+    const g = C.value * o, L = g / C.value, D = n.value.width / L, w = n.value.height / L, Y = (v.x - n.value.x) * (1 - 1 / L), ne = (v.y - n.value.y) * (1 - 1 / L);
+    n.value.x += Y, n.value.y += ne, n.value.width = D, n.value.height = w, C.value = g;
   }
-  Le(Z), He(X);
+  Le(Z), He(q);
   function Z() {
     const o = r.value;
-    o && (o.addEventListener("mousedown", U), o.addEventListener("mousemove", O), o.addEventListener("mouseup", A), o.addEventListener("mouseleave", A), o.addEventListener("wheel", e, { passive: !1 }), o.addEventListener("dblclick", G), o.addEventListener("touchstart", (v) => {
+    o && (o.addEventListener("mousedown", U), o.addEventListener("mousemove", O), o.addEventListener("mouseup", A), o.addEventListener("mouseleave", A), o.addEventListener("wheel", e, { passive: !1 }), o.addEventListener("dblclick", X), o.addEventListener("touchstart", (v) => {
       v.preventDefault(), U(v);
     }, { passive: !1 }), o.addEventListener("touchmove", (v) => {
       v.preventDefault(), O(v);
     }, { passive: !1 }), o.addEventListener("touchend", A));
   }
-  function X() {
+  function q() {
     const o = r.value;
-    o && (o.removeEventListener("mousedown", U), o.removeEventListener("mousemove", O), o.removeEventListener("mouseup", A), o.removeEventListener("mouseleave", A), o.removeEventListener("wheel", e), o.removeEventListener("dblclick", G), o.removeEventListener("touchstart", U), o.removeEventListener("touchmove", O), o.removeEventListener("touchend", A));
+    o && (o.removeEventListener("mousedown", U), o.removeEventListener("mousemove", O), o.removeEventListener("mouseup", A), o.removeEventListener("mouseleave", A), o.removeEventListener("wheel", e), o.removeEventListener("dblclick", X), o.removeEventListener("touchstart", U), o.removeEventListener("touchmove", O), o.removeEventListener("touchend", A));
   }
-  return Be(() => (S.value ? Z() : X(), () => {
-    X();
+  return Be(() => (S.value ? Z() : q(), () => {
+    q();
   })), { viewBox: n };
 }
 const Lt = ["id"], Ft = {
@@ -293,11 +293,11 @@ const Lt = ["id"], Ft = {
 }, St = ["xmlns", "viewBox"], Ot = ["width", "height"], Dt = ["id"], Rt = ["stop-color"], Ut = ["stop-color"], At = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Nt = {
+}, It = {
   key: 7,
   ref: "source",
   dir: "auto"
-}, _t = ["innerHTML"], It = {
+}, Nt = ["innerHTML"], _t = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -315,20 +315,20 @@ const Lt = ["id"], Ft = {
   },
   emits: ["selectNode"],
   setup(r, { expose: M, emit: z }) {
-    const { vue_ui_molecule: S } = qe(), n = r, C = z, c = _(() => !!n.dataset && n.dataset.length);
+    const { vue_ui_molecule: S } = qe(), n = r, C = z, c = N(() => !!n.dataset && n.dataset.length);
     Le(() => {
-      s();
+      a();
     });
-    function s() {
+    function a() {
       Ye(n.dataset) && We({
         componentName: "VueUiMolecule",
         type: "dataset"
       });
     }
-    const h = p($e()), H = p(null), i = p(!1), x = p(""), U = p(null), O = p(0), te = p(0), A = p(0), e = _({
+    const h = p($e()), H = p(null), i = p(!1), x = p(""), U = p(null), O = p(0), te = p(0), A = p(0), e = N({
       get: () => Z(),
       set: (t) => t
-    }), { userOptionsVisible: G, setUserOptionsVisibility: oe, keepUserOptionState: le } = yt({ config: e.value }), { svgRef: V } = pt({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: X, setUserOptionsVisibility: oe, keepUserOptionState: le } = yt({ config: e.value }), { svgRef: j } = pt({ config: e.value.style.chart.title });
     function Z() {
       const t = Pe({
         userConfig: n.config,
@@ -343,52 +343,52 @@ const Lt = ["id"], Ft = {
       } : t;
     }
     Ge(() => n.config, (t) => {
-      e.value = Z(), G.value = !e.value.userOptions.showOnChartHover, s(), te.value += 1, A.value += 1, w.value.showTable = e.value.table.show, w.value.showTooltip = e.value.style.chart.tooltip.show;
+      e.value = Z(), X.value = !e.value.userOptions.showOnChartHover, a(), te.value += 1, A.value += 1, w.value.showTable = e.value.table.show, w.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: X, isImaging: o, generatePdf: v, generateImage: m } = rt({
+    const { isPrinting: q, isImaging: o, generatePdf: v, generateImage: g } = rt({
       elementId: `cluster_${h.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-molecule"
-    }), T = _(() => e.value.userOptions.show && !e.value.style.chart.title.text), D = _(() => Je(e.value.customPalette)), w = p({
+    }), L = N(() => e.value.userOptions.show && !e.value.style.chart.title.text), D = N(() => Je(e.value.customPalette)), w = p({
       showTable: e.value.table.show,
       showDataLabels: !0,
       showTooltip: e.value.style.chart.tooltip.show
     });
-    function j(t, u = 0) {
-      return Array.isArray(t) && t.length > 0 && t[0].nodes ? j(t[0].nodes, u + 1) : u;
+    function Y(t, u = 0) {
+      return Array.isArray(t) && t.length > 0 && t[0].nodes ? Y(t[0].nodes, u + 1) : u;
     }
     function ne() {
-      const t = j(n.dataset);
-      let u = 100, a = u;
-      for (let y = 0; y < t; y += 1)
-        u /= 1, a += u;
+      const t = Y(n.dataset);
+      let u = 100, l = u;
+      for (let f = 0; f < t; f += 1)
+        u /= 1, l += u;
       return {
-        height: a,
-        width: a
+        height: l,
+        width: l
       };
     }
     const F = p(ne());
     p(`0 0 ${F.value.width} ${F.value.height}`);
-    function he(t, u = { x: -F.value.width / 2.43, y: F.value.height / 2 }, a = F.value.width / 1.1, y = 24, f = 0, P = 0, ue = "#BBBBBB") {
+    function he(t, u = { x: -F.value.width / 2.43, y: F.value.height / 2 }, l = F.value.width / 1.1, f = 24, y = 0, P = 0, ue = "#BBBBBB") {
       if (t && t.length > 0) {
-        const Ie = tt({
+        const _e = tt({
           plot: u,
-          radius: a,
+          radius: l,
           sides: t.length,
-          rotation: f
+          rotation: y
         });
         t.forEach((E, be) => {
-          const ke = Ie.coordinates[be];
+          const ke = _e.coordinates[be];
           let ee;
           if (E.ancestor ? E.ancestor.ancestor ? ee = E.ancestor.color || ue : (ee = D.value[P] || xe[P] || ue, P += 1) : ee = ue, E.polygonPath = {
             coordinates: [ke]
-          }, E.circleRadius = y, E.color = ee, E.uid = $e(), E.nodes && E.nodes.length > 0) {
+          }, E.circleRadius = f, E.color = ee, E.uid = $e(), E.nodes && E.nodes.length > 0) {
             const Me = !E.ancestor || !E.ancestor.ancestor ? P : 0;
             E.nodes = he(
               E.nodes,
               ke,
-              a / 2.9,
-              y / 2.2,
-              f + Math.PI * be / E.nodes.length,
+              l / 2.9,
+              f / 2.2,
+              y + Math.PI * be / E.nodes.length,
               Me,
               ee
             );
@@ -399,42 +399,42 @@ const Lt = ["id"], Ft = {
     }
     function Fe(t) {
       const u = /* @__PURE__ */ new Set();
-      function a(f) {
-        f.forEach((P) => {
-          P.color && !u.has(P.color) && u.add(P.color), P.nodes && P.nodes.length > 0 && a(P.nodes);
+      function l(y) {
+        y.forEach((P) => {
+          P.color && !u.has(P.color) && u.add(P.color), P.nodes && P.nodes.length > 0 && l(P.nodes);
         });
       }
-      a(t);
-      const y = {};
-      return Array.from(u).forEach((f, P) => {
-        y[f] = `gradient_${P}`;
-      }), y;
+      l(t);
+      const f = {};
+      return Array.from(u).forEach((y, P) => {
+        f[y] = `gradient_${P}`;
+      }), f;
     }
-    const Ee = _(() => Fe(N.value)), N = _(() => he(n.dataset)), re = p(null);
+    const Ee = N(() => Fe(I.value)), I = N(() => he(n.dataset)), re = p(null);
     function Se(t) {
       re.value = {
         datapoint: t,
         seriesIndex: -1,
-        series: N.value,
+        series: I.value,
         config: e.value
       };
       const u = e.value.style.chart.tooltip.customFormat;
-      if (at(u) && st(() => u({
+      if (st(u) && at(() => u({
         seriesIndex: -1,
         datapoint: t,
-        series: N.value,
+        series: I.value,
         config: e.value
       })))
         x.value = u({
           seriesIndex: -1,
           // well, ok
           datapoint: t,
-          series: N.value,
+          series: I.value,
           config: e.value
         });
       else {
-        let a = "";
-        a += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (a += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), x.value = `<div style="font-family:inherit">${a}</div>`;
+        let l = "";
+        l += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (l += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), x.value = `<div style="font-family:inherit">${l}</div>`;
       }
     }
     const fe = p(null), Q = p(null);
@@ -443,32 +443,32 @@ const Lt = ["id"], Ft = {
     }
     function De(t) {
       const u = [];
-      function a(y) {
-        y.forEach((f) => {
+      function l(f) {
+        f.forEach((y) => {
           const P = {
-            name: f.name,
-            details: f.details || "-",
-            ancestor: f.ancestor && f.ancestor.name || "-",
-            color: f.color || ""
+            name: y.name,
+            details: y.details || "-",
+            ancestor: y.ancestor && y.ancestor.name || "-",
+            color: y.color || ""
           };
-          u.push(P), f.nodes && f.nodes.length > 0 && a(f.nodes, f.name);
+          u.push(P), y.nodes && y.nodes.length > 0 && l(y.nodes, y.name);
         });
       }
-      return a(t), u;
+      return l(t), u;
     }
-    const Re = _(() => De(N.value)), q = _(() => {
+    const Re = N(() => De(I.value)), W = N(() => {
       const t = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
-      ], u = Re.value.map((f, P) => [
+      ], u = Re.value.map((y, P) => [
         {
-          color: f.color,
-          name: f.name
+          color: y.color,
+          name: y.name
         },
-        f.details,
-        f.ancestor || ""
-      ]), a = {
+        y.details,
+        y.ancestor || ""
+      ]), l = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -480,7 +480,7 @@ const Lt = ["id"], Ft = {
           outline: e.value.table.td.outline
         },
         breakpoint: e.value.table.responsiveBreakpoint
-      }, y = [
+      }, f = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
@@ -488,18 +488,18 @@ const Lt = ["id"], Ft = {
       return {
         head: t,
         body: u,
-        config: a,
-        colNames: y
+        config: l,
+        colNames: f
       };
     });
     function ye() {
       je(() => {
-        const t = q.value.body.map((y, f) => [[y[0].name], [y[1]], [y[2]]]), u = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...q.value.head]]].concat(t), a = ot(u);
-        lt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+        const t = W.value.body.map((f, y) => [[f[0].name], [f[1]], [f[2]]]), u = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...W.value.head]]].concat(t), l = ot(u);
+        lt({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
     function Ue() {
-      return N.value;
+      return I.value;
     }
     const J = p(!1);
     function Ae(t) {
@@ -508,56 +508,56 @@ const Lt = ["id"], Ft = {
     function pe() {
       w.value.showTable = !w.value.showTable;
     }
-    function ge() {
+    function me() {
       w.value.showDataLabels = !w.value.showDataLabels;
     }
-    function me() {
+    function ge() {
       w.value.showTooltip = !w.value.showTooltip;
     }
     const K = p(!1);
     function ie() {
       K.value = !K.value;
     }
-    const Ne = _(() => !K.value), { viewBox: ae } = Tt(V, {
+    const Ie = N(() => !K.value), { viewBox: se } = Tt(j, {
       x: 0,
       y: 0,
       width: F.value.width <= 0 ? 10 : F.value.width,
       height: F.value.height <= 0 ? 10 : F.value.height
-    }, e.value.style.chart.zoom.speed, Ne);
-    function _e(t) {
+    }, e.value.style.chart.zoom.speed, Ie);
+    function Ne(t) {
       C("selectNode", t);
     }
     return M({
       getData: Ue,
       generatePdf: v,
       generateCsv: ye,
-      generateImage: m,
+      generateImage: g,
       toggleTable: pe,
-      toggleLabels: ge,
-      toggleTooltip: me,
+      toggleLabels: me,
+      toggleTooltip: ge,
       toggleAnnotator: ie
-    }), (t, u) => (l(), d("div", {
+    }), (t, u) => (s(), d("div", {
       ref_key: "moleculeChart",
       ref: U,
       class: we(`vue-ui-molecule ${J.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       style: ce(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `cluster_${h.value}`,
-      onMouseleave: u[1] || (u[1] = (a) => {
+      onMouseleave: u[1] || (u[1] = (l) => {
         fe.value = null, Q.value = null, b(oe)(!1);
       }),
       onMouseenter: u[2] || (u[2] = () => b(oe)(!0))
     }, [
-      e.value.userOptions.buttons.annotator ? (l(), R(ft, {
+      e.value.userOptions.buttons.annotator ? (s(), R(ft, {
         key: 0,
-        svgRef: b(V),
+        svgRef: b(j),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: K.value,
         onClose: ie
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
-      T.value ? (l(), d("div", Ft, null, 512)) : g("", !0),
-      e.value.style.chart.title.text ? (l(), d("div", Et, [
-        (l(), R(nt, {
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
+      L.value ? (s(), d("div", Ft, null, 512)) : m("", !0),
+      e.value.style.chart.title.text ? (s(), d("div", Et, [
+        (s(), R(nt, {
           key: `title_${te.value}`,
           config: {
             title: {
@@ -570,14 +570,14 @@ const Lt = ["id"], Ft = {
             }
           }
         }, null, 8, ["config"]))
-      ])) : g("", !0),
-      e.value.userOptions.show && c.value && (b(le) || b(G)) ? (l(), R(it, {
+      ])) : m("", !0),
+      e.value.userOptions.show && c.value && (b(le) || b(X)) ? (s(), R(it, {
         ref_key: "details",
         ref: H,
         key: `user_options_${O.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: b(X),
+        isPrinting: b(q),
         isImaging: b(o),
         uid: h.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
@@ -596,83 +596,90 @@ const Lt = ["id"], Ft = {
         onToggleFullscreen: Ae,
         onGeneratePdf: b(v),
         onGenerateCsv: ye,
-        onGenerateImage: b(m),
+        onGenerateImage: b(g),
         onToggleTable: pe,
-        onToggleLabels: ge,
-        onToggleTooltip: me,
+        onToggleLabels: me,
+        onToggleTooltip: ge,
         onToggleAnnotator: ie,
         style: ce({
-          visibility: b(le) ? b(G) ? "visible" : "hidden" : "visible"
+          visibility: b(le) ? b(X) ? "visible" : "hidden" : "visible"
         })
       }, Ve({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: T(({ isOpen: l, color: f }) => [
+            $(t.$slots, "menuIcon", B(G({ isOpen: l, color: f })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: L(() => [
+          fn: T(() => [
             $(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
-          key: "0"
+          key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: L(() => [
+          fn: T(() => [
             $(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
-          key: "1"
+          key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: L(() => [
+          fn: T(() => [
             $(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
-          key: "2"
+          key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: L(() => [
+          fn: T(() => [
             $(t.$slots, "optionImg", {}, void 0, !0)
           ]),
-          key: "3"
+          key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: L(() => [
+          fn: T(() => [
             $(t.$slots, "optionTable", {}, void 0, !0)
           ]),
-          key: "4"
+          key: "5"
         } : void 0,
         t.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: L(() => [
+          fn: T(() => [
             $(t.$slots, "optionLabels", {}, void 0, !0)
           ]),
-          key: "5"
+          key: "6"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: L(({ toggleFullscreen: a, isFullscreen: y }) => [
-            $(t.$slots, "optionFullscreen", Y(W({ toggleFullscreen: a, isFullscreen: y })), void 0, !0)
+          fn: T(({ toggleFullscreen: l, isFullscreen: f }) => [
+            $(t.$slots, "optionFullscreen", B(G({ toggleFullscreen: l, isFullscreen: f })), void 0, !0)
           ]),
-          key: "6"
+          key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: L(({ toggleAnnotator: a, isAnnotator: y }) => [
-            $(t.$slots, "optionAnnotator", Y(W({ toggleAnnotator: a, isAnnotator: y })), void 0, !0)
+          fn: T(({ toggleAnnotator: l, isAnnotator: f }) => [
+            $(t.$slots, "optionAnnotator", B(G({ toggleAnnotator: l, isAnnotator: f })), void 0, !0)
           ]),
-          key: "7"
+          key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
-      c.value ? (l(), d("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0),
+      c.value ? (s(), d("svg", {
         key: 4,
         ref_key: "svgRef",
-        ref: V,
+        ref: j,
         xmlns: b(Ke),
-        viewBox: `${b(ae).x} ${b(ae).y} ${b(ae).width} ${b(ae).height}`,
+        viewBox: `${b(se).x} ${b(se).y} ${b(se).width} ${b(se).height}`,
         class: we({ "vue-data-ui-fullscreen--on": J.value, "vue-data-ui-fulscreen--off": !J.value }),
         style: ce(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        se(ht),
-        t.$slots["chart-background"] ? (l(), d("foreignObject", {
+        ae(ht),
+        t.$slots["chart-background"] ? (s(), d("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -683,56 +690,56 @@ const Lt = ["id"], Ft = {
           }
         }, [
           $(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ot)) : g("", !0),
-        B("defs", null, [
-          (l(!0), d(k, null, I(Object.keys(Ee.value), (a) => (l(), d("radialGradient", {
-            id: `gradient_${a}`,
+        ], 8, Ot)) : m("", !0),
+        V("defs", null, [
+          (s(!0), d(k, null, _(Object.keys(Ee.value), (l) => (s(), d("radialGradient", {
+            id: `gradient_${l}`,
             cx: "50%",
             cy: "30%",
             r: "50%",
             fx: "50%",
             fy: "50%"
           }, [
-            B("stop", {
+            V("stop", {
               offset: "0%",
-              "stop-color": b(et)(a, 0.5)
+              "stop-color": b(et)(l, 0.5)
             }, null, 8, Rt),
-            B("stop", {
+            V("stop", {
               offset: "100%",
-              "stop-color": a
+              "stop-color": l
             }, null, 8, Ut)
           ], 8, Dt))), 256))
         ]),
-        se($t, {
-          dataset: N.value,
+        ae($t, {
+          dataset: I.value,
           color: e.value.style.chart.links.stroke,
           backgroundColor: e.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        se(kt, {
-          dataset: N.value,
+        ae(kt, {
+          dataset: I.value,
           hoveredUid: Q.value,
           stroke: e.value.style.chart.nodes.stroke,
           strokeHovered: e.value.style.chart.nodes.strokeHovered,
-          onClick: _e,
+          onClick: Ne,
           onHover: Oe
         }, {
-          node: L(({ node: a }) => [
-            $(t.$slots, "node", Y(W({ node: a })), void 0, !0)
+          node: T(({ node: l }) => [
+            $(t.$slots, "node", B(G({ node: l })), void 0, !0)
           ]),
           _: 3
         }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        w.value.showDataLabels ? (l(), R(Pt, {
+        w.value.showDataLabels ? (s(), R(Pt, {
           key: 1,
-          dataset: N.value,
+          dataset: I.value,
           color: e.value.style.chart.color,
           hoveredUid: Q.value
-        }, null, 8, ["dataset", "color", "hoveredUid"])) : g("", !0),
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : m("", !0),
         $(t.$slots, "svg", { svg: F.value }, void 0, !0)
-      ], 14, St)) : g("", !0),
-      t.$slots.watermark ? (l(), d("div", At, [
-        $(t.$slots, "watermark", Y(W({ isPrinting: b(X) || b(o) })), void 0, !0)
-      ])) : g("", !0),
-      c.value ? g("", !0) : (l(), R(dt, {
+      ], 14, St)) : m("", !0),
+      t.$slots.watermark ? (s(), d("div", At, [
+        $(t.$slots, "watermark", B(G({ isPrinting: b(q) || b(o) })), void 0, !0)
+      ])) : m("", !0),
+      c.value ? m("", !0) : (s(), R(dt, {
         key: 6,
         config: {
           type: "molecule",
@@ -744,10 +751,10 @@ const Lt = ["id"], Ft = {
           }
         }
       }, null, 8, ["config"])),
-      t.$slots.source ? (l(), d("div", Nt, [
+      t.$slots.source ? (s(), d("div", It, [
         $(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : g("", !0),
-      se(ct, {
+      ], 512)) : m("", !0),
+      ae(ct, {
         show: w.value.showTooltip && i.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -763,15 +770,15 @@ const Lt = ["id"], Ft = {
         isFullscreen: J.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
       }, {
-        "tooltip-before": L(() => [
-          $(t.$slots, "tooltip-before", Y(W({ ...re.value })), void 0, !0)
+        "tooltip-before": T(() => [
+          $(t.$slots, "tooltip-before", B(G({ ...re.value })), void 0, !0)
         ]),
-        "tooltip-after": L(() => [
-          $(t.$slots, "tooltip-after", Y(W({ ...re.value })), void 0, !0)
+        "tooltip-after": T(() => [
+          $(t.$slots, "tooltip-after", B(G({ ...re.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      c.value ? (l(), R(vt, {
+      c.value ? (s(), R(vt, {
         key: 8,
         hideDetails: "",
         config: {
@@ -787,33 +794,33 @@ const Lt = ["id"], Ft = {
           }
         }
       }, {
-        content: L(() => [
-          (l(), R(ut, {
+        content: T(() => [
+          (s(), R(ut, {
             key: `table_${A.value}`,
-            colNames: q.value.colNames,
-            head: q.value.head,
-            body: q.value.body,
-            config: q.value.config,
+            colNames: W.value.colNames,
+            head: W.value.head,
+            body: W.value.body,
+            config: W.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: u[0] || (u[0] = (a) => w.value.showTable = !1)
+            onClose: u[0] || (u[0] = (l) => w.value.showTable = !1)
           }, {
-            th: L(({ th: a }) => [
-              B("div", {
-                innerHTML: a,
+            th: T(({ th: l }) => [
+              V("div", {
+                innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, _t)
+              }, null, 8, Nt)
             ]),
-            td: L(({ td: a }) => [
-              Xe(Te(a.name || a), 1)
+            td: T(({ td: l }) => [
+              Xe(Te(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : g("", !0)
+      }, 8, ["config"])) : m("", !0)
     ], 46, Lt));
   }
-}, Kt = /* @__PURE__ */ gt(It, [["__scopeId", "data-v-8995dd60"]]);
+}, Kt = /* @__PURE__ */ mt(_t, [["__scopeId", "data-v-c4dc9cf3"]]);
 export {
   Kt as default
 };