vue-data-ui 2.4.49 → 2.4.51

package/dist/{vue-ui-molecule-FsLf3YTj.js → vue-ui-molecule-DBQJQs4Y.js}

@@ -1,17 +1,18 @@
-import { toRef as ue, resolveComponent as ce, openBlock as a, createElementBlock as r, Fragment as m, renderList as z, withModifiers as M, createBlock as T, createCommentVNode as y, createElementVNode as x, toDisplayString as Ae, normalizeStyle as ie, createVNode as S, computed as O, onMounted as Qe, ref as f, watch as _e, normalizeClass as Fe, unref as U, createSlots as et, withCtx as k, renderSlot as C, normalizeProps as W, guardReactiveProps as q, createTextVNode as tt, nextTick as Re } from "vue";
-import { u as ot, o as lt, e as at, c as Se, t as nt, a as st, p as Le, b as rt, X as it, l as ut, O as ct, q as dt, r as vt, x as ft, y as pt } from "./index-igxqCP2w.js";
-import { _ as ht } from "./Title-DED-PQ7X.js";
-import { u as gt, U as yt } from "./usePrinter-CnZYDQXB.js";
-import { D as mt } from "./DataTable-CO5C8Cmb.js";
-import { _ as bt } from "./Tooltip-CHseiJu8.js";
-import Z from "./BaseIcon-CaYP30Aq.js";
-import kt from "./vue-ui-skeleton-CWjNNx-k.js";
-import Ct from "./vue-ui-accordion-lF7yVkiT.js";
-import { u as De } from "./useNestedProp-CSVnZVwZ.js";
-import { _ as $t } from "./PackageVersion-DYk2hOG1.js";
-import { P as xt } from "./PenAndPaper-BfgS_5ux.js";
-import { _ as wt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], Tt = {
+import { toRef as ue, resolveComponent as ce, openBlock as a, createElementBlock as r, Fragment as m, renderList as z, withModifiers as M, createBlock as F, createCommentVNode as y, createElementVNode as w, toDisplayString as Ie, normalizeStyle as _, createVNode as O, computed as N, onMounted as tt, ref as f, watch as ot, normalizeClass as Oe, unref as b, createSlots as lt, withCtx as C, renderSlot as $, normalizeProps as W, guardReactiveProps as q, createTextVNode as at, nextTick as Le } from "vue";
+import { u as nt, o as st, e as rt, c as Ue, t as it, a as ut, p as De, b as ct, X as dt, l as vt, O as ft, q as pt, r as ht, x as gt, y as yt } from "./index-BbPeL8Gp.js";
+import { _ as mt } from "./Title-aSAft5dl.js";
+import { u as bt, U as kt } from "./usePrinter-DaybDVqP.js";
+import { D as Ct } from "./DataTable-DGf6RrOJ.js";
+import { _ as $t } from "./Tooltip-smutPF--.js";
+import Z from "./BaseIcon-CmiukQBl.js";
+import xt from "./vue-ui-skeleton-Bniq21d9.js";
+import wt from "./vue-ui-accordion-5d5iVpr7.js";
+import { u as Ae } from "./useNestedProp-BN8claGG.js";
+import { _ as Pt } from "./PackageVersion-CxJghxYD.js";
+import { P as Tt } from "./PenAndPaper-ZdZEumki.js";
+import { u as Ft } from "./useUserOptionState-BIvW1Kz7.js";
+import { _ as Rt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], Ot = {
   __name: "RecursiveCircles",
   props: {
     color: {
@@ -40,35 +41,35 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(n, { emit: $ }) {
-    const b = n;
+  setup(n, { emit: x }) {
+    const k = n;
     function c(s) {
-      $("zoom", s);
+      x("zoom", s);
     }
     function d(s) {
-      $("hover", s);
+      x("hover", s);
     }
-    return ue(b, "dataset").value.forEach((s) => {
+    return ue(k, "dataset").value.forEach((s) => {
       s.nodes && s.nodes.length > 0 && s.nodes.forEach((v) => {
         v.ancestor = s;
       });
     }), (s, v) => {
-      const R = ce("RecursiveCircles", !0);
+      const S = ce("RecursiveCircles", !0);
       return a(!0), r(m, null, z(n.dataset, (p) => (a(), r(m, null, [
         p.polygonPath && p.polygonPath.coordinates ? (a(), r(m, { key: 0 }, [
-          (a(!0), r(m, null, z(p.polygonPath.coordinates, (D, J) => (a(), r("circle", {
-            cx: D.x,
-            cy: D.y,
+          (a(!0), r(m, null, z(p.polygonPath.coordinates, (U, J) => (a(), r("circle", {
+            cx: U.x,
+            cy: U.y,
             r: p.circleRadius,
             fill: `url(#gradient_${p.color})`,
             stroke: n.hoveredUid && n.hoveredUid === p.uid ? n.strokeHovered : n.stroke,
             "stroke-width": n.hoveredUid && n.hoveredUid === p.uid ? p.circleRadius / 6 : p.circleRadius / 12,
             style: { cursor: "pointer" },
-            onClick: M((A) => c(p), ["stop"]),
-            onMouseover: (A) => d(p),
-            onMouseleave: v[0] || (v[0] = (A) => d(null))
-          }, null, 40, Pt))), 256)),
-          p.nodes && p.nodes.length > 0 ? (a(), T(R, {
+            onClick: M((D) => c(p), ["stop"]),
+            onMouseover: (D) => d(p),
+            onMouseleave: v[0] || (v[0] = (D) => d(null))
+          }, null, 40, St))), 256)),
+          p.nodes && p.nodes.length > 0 ? (a(), F(S, {
             key: 0,
             dataset: p.nodes,
             color: n.color,
@@ -82,7 +83,7 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ], 64))), 256);
     };
   }
-}, Ft = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Rt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], St = {
+}, Lt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ut = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Dt = {
   __name: "RecursiveLinks",
   props: {
     dataset: {
@@ -107,30 +108,30 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       const L = ce("RecursiveLinks", !0);
       return a(), r(m, null, [
         (a(!0), r(m, null, z(n.dataset, (s) => (a(), r(m, null, [
-          s.polygonPath && s.polygonPath.coordinates ? (a(!0), r(m, { key: 0 }, z(s.polygonPath.coordinates, (v, R) => (a(), r(m, null, [
+          s.polygonPath && s.polygonPath.coordinates ? (a(!0), r(m, { key: 0 }, z(s.polygonPath.coordinates, (v, S) => (a(), r(m, null, [
             s.ancestor && s.ancestor.polygonPath ? (a(), r(m, { key: 0 }, [
-              x("line", {
+              w("line", {
                 x1: v.x,
                 y1: v.y,
                 x2: s.ancestor.polygonPath.coordinates[0].x,
                 y2: s.ancestor.polygonPath.coordinates[0].y,
                 stroke: n.backgroundColor,
                 "stroke-width": s.circleRadius / 1.5
-              }, null, 8, Ft),
-              x("line", {
+              }, null, 8, Lt),
+              w("line", {
                 x1: v.x,
                 y1: v.y,
                 x2: s.ancestor.polygonPath.coordinates[0].x,
                 y2: s.ancestor.polygonPath.coordinates[0].y,
                 stroke: n.color,
                 "stroke-width": s.circleRadius / 2
-              }, null, 8, Rt)
+              }, null, 8, Ut)
             ], 64)) : y("", !0)
           ], 64))), 256)) : y("", !0)
         ], 64))), 256)),
         (a(!0), r(m, null, z(n.dataset, (s) => (a(), r(m, null, [
           s.polygonPath && s.polygonPath.coordinates ? (a(), r(m, { key: 0 }, [
-            s.nodes && s.nodes.length > 0 ? (a(), T(L, {
+            s.nodes && s.nodes.length > 0 ? (a(), F(L, {
               key: 0,
               dataset: s.nodes,
               color: n.color,
@@ -141,7 +142,7 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ], 64);
     };
   }
-}, Lt = ["x", "y", "fill", "font-size"], Dt = {
+}, At = ["x", "y", "fill", "font-size"], It = {
   __name: "RecursiveLabels",
   props: {
     color: {
@@ -158,7 +159,7 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(n, { emit: $ }) {
+  setup(n, { emit: x }) {
     return ue(n, "dataset").value.forEach((d) => {
       d.nodes && d.nodes.length > 0 && d.nodes.forEach((L) => {
         L.ancestor = d;
@@ -167,15 +168,15 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       const s = ce("RecursiveLabels", !0);
       return a(!0), r(m, null, z(n.dataset, (v) => (a(), r(m, null, [
         v.polygonPath && v.polygonPath.coordinates ? (a(), r(m, { key: 0 }, [
-          (a(!0), r(m, null, z(v.polygonPath.coordinates, (R) => (a(), r("text", {
-            x: R.x,
-            y: R.y + v.circleRadius * 2,
+          (a(!0), r(m, null, z(v.polygonPath.coordinates, (S) => (a(), r("text", {
+            x: S.x,
+            y: S.y + v.circleRadius * 2,
             fill: n.color,
             "font-size": v.circleRadius,
             "text-anchor": "middle",
             style: { opacity: "0.8", "pointer-events": "none" }
-          }, Ae(v.name), 9, Lt))), 256)),
-          v.nodes && v.nodes.length > 0 ? (a(), T(s, {
+          }, Ie(v.name), 9, At))), 256)),
+          v.nodes && v.nodes.length > 0 ? (a(), F(s, {
             key: 0,
             dataset: v.nodes,
             color: n.color,
@@ -185,7 +186,7 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ], 64))), 256);
     };
   }
-}, At = { style: { position: "relative", height: "100%", width: "100%" } }, It = {
+}, Nt = { style: { position: "relative", height: "100%", width: "100%" } }, zt = {
   __name: "BaseDirectionPad",
   props: {
     color: {
@@ -198,57 +199,57 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["moveLeft", "moveTop", "moveRight", "moveBottom", "reset"],
-  setup(n, { emit: $ }) {
-    return (b, c) => (a(), r("div", {
-      style: ie(`position: ${n.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${n.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
+  setup(n, { emit: x }) {
+    return (k, c) => (a(), r("div", {
+      style: _(`position: ${n.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${n.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
       "data-html2canvas-ignore": ""
     }, [
-      x("div", At, [
-        x("button", {
-          onClick: c[0] || (c[0] = M((d) => $("moveLeft"), ["stop"])),
+      w("div", Nt, [
+        w("button", {
+          onClick: c[0] || (c[0] = M((d) => x("moveLeft"), ["stop"])),
           style: { position: "absolute", left: "0", top: "50%", transform: "translateY(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
-          S(Z, {
+          O(Z, {
             stroke: n.color,
             name: "arrowLeft",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[1] || (c[1] = M((d) => $("moveTop"), ["stop"])),
+        w("button", {
+          onClick: c[1] || (c[1] = M((d) => x("moveTop"), ["stop"])),
           style: { position: "absolute", top: "0", left: "50%", transform: "translateX(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
-          S(Z, {
+          O(Z, {
             stroke: n.color,
             name: "arrowTop",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[2] || (c[2] = M((d) => $("moveRight"), ["stop"])),
+        w("button", {
+          onClick: c[2] || (c[2] = M((d) => x("moveRight"), ["stop"])),
           style: { position: "absolute", right: "0", top: "50%", transform: "translateY(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
-          S(Z, {
+          O(Z, {
             stroke: n.color,
             name: "arrowRight",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[3] || (c[3] = M((d) => $("moveBottom"), ["stop"])),
+        w("button", {
+          onClick: c[3] || (c[3] = M((d) => x("moveBottom"), ["stop"])),
           style: { position: "absolute", bottom: "0", left: "50%", transform: "translateX(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
-          S(Z, {
+          O(Z, {
             stroke: n.color,
             name: "arrowBottom",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[4] || (c[4] = M((d) => $("reset"), ["stop"])),
+        w("button", {
+          onClick: c[4] || (c[4] = M((d) => x("reset"), ["stop"])),
           style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
-          S(Z, {
+          O(Z, {
             stroke: n.color,
             name: "close",
             style: { cursor: "pointer" },
@@ -258,22 +259,22 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ])
     ], 4));
   }
-}, Nt = ["id"], Ot = {
+}, Bt = ["id"], Mt = {
   key: 1,
   ref: "noTitle",
   class: "vue-data-ui-no-title-space",
   style: "height:36px; width: 100%;background:transparent"
-}, Ut = {
+}, Ht = {
   key: 2,
   style: "width:100%;background:transparent;"
-}, zt = ["xmlns", "viewBox"], Bt = ["id"], Mt = ["stop-color"], Ht = ["stop-color"], Et = {
+}, Et = ["xmlns", "viewBox"], Vt = ["id"], Xt = ["stop-color"], Gt = ["stop-color"], jt = {
   key: 6,
   class: "vue-data-ui-watermark"
-}, Xt = {
+}, Yt = {
   key: 8,
   ref: "source",
   dir: "auto"
-}, Gt = ["innerHTML"], jt = {
+}, Wt = ["innerHTML"], qt = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -289,173 +290,173 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }
     }
   },
-  setup(n, { expose: $ }) {
-    const b = n, { vue_ui_molecule: c } = ot(), d = O(() => !!b.dataset && b.dataset.length);
-    Qe(() => {
+  setup(n, { expose: x }) {
+    const k = n, { vue_ui_molecule: c } = nt(), d = N(() => !!k.dataset && k.dataset.length);
+    tt(() => {
       L();
     });
     function L() {
-      lt(b.dataset) && at({
+      st(k.dataset) && rt({
         componentName: "VueUiMolecule",
         type: "dataset"
       });
     }
-    const s = f(Se()), v = f(null), R = f(!1), p = f(""), D = f(null), J = f(null), A = f(!1), w = f(null), de = f(null), _ = f(0), ve = f(0), fe = f(0), t = O({
-      get: () => pe(),
+    const s = f(Ue()), v = f(null), S = f(!1), p = f(""), U = f(null), J = f(null), D = f(!1), P = f(null), de = f(null), ee = f(0), ve = f(0), fe = f(0), t = N({
+      get: () => ye(),
       set: (e) => e
-    });
-    function pe() {
-      const e = De({
-        userConfig: b.config,
+    }), { userOptionsVisible: pe, setUserOptionsVisibility: he, keepUserOptionState: ge } = Ft({ config: t.value });
+    function ye() {
+      const e = Ae({
+        userConfig: k.config,
         defaultConfig: c
       });
       return e.theme ? {
-        ...De({
-          userConfig: nt.vue_ui_molecule[e.theme] || b.config,
+        ...Ae({
+          userConfig: it.vue_ui_molecule[e.theme] || k.config,
           defaultConfig: e
         }),
-        customPalette: st[e.theme] || Le
+        customPalette: ut[e.theme] || De
       } : e;
     }
-    _e(() => b.config, (e) => {
-      t.value = pe(), L(), ve.value += 1, fe.value += 1;
+    ot(() => k.config, (e) => {
+      t.value = ye(), L(), ve.value += 1, fe.value += 1;
     }, { deep: !0 });
-    const { isPrinting: he, isImaging: ge, generatePdf: ye, generateImage: me } = gt({
+    const { isPrinting: me, isImaging: be, generatePdf: ke, generateImage: Ce } = bt({
       elementId: `cluster_${s.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-molecule"
-    }), Ie = O(() => t.value.userOptions.show && !t.value.style.chart.title.text), Ne = O(() => rt(t.value.customPalette)), P = f({
+    }), Ne = N(() => t.value.userOptions.show && !t.value.style.chart.title.text), ze = N(() => ct(t.value.customPalette)), T = f({
       showTable: t.value.table.show,
       showDataLabels: !0,
       showTooltip: t.value.style.chart.tooltip.show
     });
-    function be(e, l = 0) {
-      return Array.isArray(e) && e.length > 0 && e[0].nodes ? be(e[0].nodes, l + 1) : l;
+    function $e(e, o = 0) {
+      return Array.isArray(e) && e.length > 0 && e[0].nodes ? $e(e[0].nodes, o + 1) : o;
     }
-    function Oe() {
-      const e = be(b.dataset);
-      let l = 100, o = l;
+    function Be() {
+      const e = $e(k.dataset);
+      let o = 100, l = o;
       for (let u = 0; u < e; u += 1)
-        l /= 1, o += l;
+        o /= 1, l += o;
       return {
-        height: o,
-        width: o
+        height: l,
+        width: l
       };
     }
-    const I = f(Oe()), ee = f(`0 0 ${I.value.width} ${I.value.height}`);
-    function ke(e, l = { x: -I.value.width / 2.43, y: I.value.height / 2 }, o = I.value.width / 1.1, u = 24, i = 0, h = 0, j = "#BBBBBB") {
+    const A = f(Be()), te = f(`0 0 ${A.value.width} ${A.value.height}`);
+    function xe(e, o = { x: -A.value.width / 2.43, y: A.value.height / 2 }, l = A.value.width / 1.1, u = 24, i = 0, h = 0, G = "#BBBBBB") {
       if (e && e.length > 0) {
-        const se = ct({
-          plot: l,
-          radius: o,
+        const re = ft({
+          plot: o,
+          radius: l,
           sides: e.length,
           rotation: i
         });
         e.forEach((g, B) => {
-          const V = se.coordinates[B];
-          let N;
-          if (g.ancestor ? g.ancestor.ancestor ? N = g.ancestor.color || j : (N = Ne.value[h] || Le[h] || j, h += 1) : N = j, g.polygonPath = {
-            coordinates: [V]
-          }, g.circleRadius = u, g.color = N, g.uid = Se(), g.nodes && g.nodes.length > 0) {
-            const re = !g.ancestor || !g.ancestor.ancestor ? h : 0;
-            g.nodes = ke(
+          const j = re.coordinates[B];
+          let I;
+          if (g.ancestor ? g.ancestor.ancestor ? I = g.ancestor.color || G : (I = ze.value[h] || De[h] || G, h += 1) : I = G, g.polygonPath = {
+            coordinates: [j]
+          }, g.circleRadius = u, g.color = I, g.uid = Ue(), g.nodes && g.nodes.length > 0) {
+            const ie = !g.ancestor || !g.ancestor.ancestor ? h : 0;
+            g.nodes = xe(
               g.nodes,
-              V,
-              o / 2.9,
+              j,
+              l / 2.9,
               u / 2.2,
               i + Math.PI * B / g.nodes.length,
-              re,
-              N
+              ie,
+              I
             );
           }
         });
       }
       return e;
     }
-    function Ue(e) {
-      const l = /* @__PURE__ */ new Set();
-      function o(i) {
+    function Me(e) {
+      const o = /* @__PURE__ */ new Set();
+      function l(i) {
         i.forEach((h) => {
-          h.color && !l.has(h.color) && l.add(h.color), h.nodes && h.nodes.length > 0 && o(h.nodes);
+          h.color && !o.has(h.color) && o.add(h.color), h.nodes && h.nodes.length > 0 && l(h.nodes);
         });
       }
-      o(e);
+      l(e);
       const u = {};
-      return Array.from(l).forEach((i, h) => {
+      return Array.from(o).forEach((i, h) => {
         u[i] = `gradient_${h}`;
       }), u;
     }
-    const ze = O(() => Ue(F.value)), F = O(() => ke(b.dataset));
-    function te() {
-      A.value = !1, J.value = null, de.value = null, w.value = null, le({
+    const He = N(() => Me(R.value)), R = N(() => xe(k.dataset));
+    function oe() {
+      D.value = !1, J.value = null, de.value = null, P.value = null, ae({
         polygonPath: {
-          coordinates: [{ x: I.value.width / 2, y: I.value.height / 2 }]
+          coordinates: [{ x: A.value.width / 2, y: A.value.height / 2 }]
         },
         circleRadius: 24
       });
     }
-    const oe = f(null);
-    function le(e) {
-      D.value.focus(), Re(() => {
-        oe.value && cancelAnimationFrame(oe.value);
-        const l = ee.value.split(" "), o = parseFloat(l[0]), u = parseFloat(l[1]), i = parseFloat(l[2]), h = parseFloat(l[3]), { x: j, y: se } = e.polygonPath.coordinates[0], { circleRadius: g } = e, B = 8.34, V = j - g * B, N = se - g * B, re = g * B * 2, Ye = g * B * 2, We = Math.sqrt((V - o) ** 2 + (N - u) ** 2), Y = Math.min(1200, Math.max(20, Math.floor(We / 10))), qe = (V - o) / Y, Ze = (N - u) / Y, Je = (re - i) / Y, Ke = (Ye - h) / Y;
-        let X = 0;
-        function Te() {
-          ee.value = `${o + qe * X} ${u + Ze * X} ${i + Je * X} ${h + Ke * X}`, X += t.value.style.chart.zoom.speed, X <= Y && (oe.value = requestAnimationFrame(Te));
+    const le = f(null);
+    function ae(e) {
+      U.value.focus(), Le(() => {
+        le.value && cancelAnimationFrame(le.value);
+        const o = te.value.split(" "), l = parseFloat(o[0]), u = parseFloat(o[1]), i = parseFloat(o[2]), h = parseFloat(o[3]), { x: G, y: re } = e.polygonPath.coordinates[0], { circleRadius: g } = e, B = 8.34, j = G - g * B, I = re - g * B, ie = g * B * 2, Ze = g * B * 2, Je = Math.sqrt((j - l) ** 2 + (I - u) ** 2), Y = Math.min(1200, Math.max(20, Math.floor(Je / 10))), Ke = (j - l) / Y, Qe = (I - u) / Y, _e = (ie - i) / Y, et = (Ze - h) / Y;
+        let V = 0;
+        function Se() {
+          te.value = `${l + Ke * V} ${u + Qe * V} ${i + _e * V} ${h + et * V}`, V += t.value.style.chart.zoom.speed, V <= Y && (le.value = requestAnimationFrame(Se));
         }
-        Te();
+        Se();
       });
     }
-    function Be(e) {
-      J.value === e.uid ? te() : (J.value = e.uid, de.value = e, w.value = {
+    function Ee(e) {
+      J.value === e.uid ? oe() : (J.value = e.uid, de.value = e, P.value = {
         circleRadius: e.circleRadius,
         polygonPath: {
           coordinates: [{ x: e.polygonPath.coordinates[0].x, y: e.polygonPath.coordinates[0].y }]
         }
-      }, le(e), A.value = e.uid !== F.value[0].uid);
+      }, ae(e), D.value = e.uid !== R.value[0].uid);
     }
-    function Me(e) {
+    function Ve(e) {
       if (e.target.nodeName !== "circle")
-        te(), A.value = !1;
+        oe(), D.value = !1;
       else
         return;
     }
-    const ae = f(null);
-    function He(e) {
-      ae.value = {
+    const ne = f(null);
+    function Xe(e) {
+      ne.value = {
         datapoint: e,
         seriesIndex: -1,
-        series: F.value,
+        series: R.value,
         config: t.value
       };
-      const l = t.value.style.chart.tooltip.customFormat;
-      if (ft(l) && pt(() => l({
+      const o = t.value.style.chart.tooltip.customFormat;
+      if (gt(o) && yt(() => o({
         seriesIndex: -1,
         datapoint: e,
-        series: F.value,
+        series: R.value,
         config: t.value
       })))
-        p.value = l({
+        p.value = o({
           seriesIndex: -1,
           // well, ok
           datapoint: e,
-          series: F.value,
+          series: R.value,
           config: t.value
         });
       else {
-        let o = "";
-        o += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${e.color}">⬤</div><div>${e.name}</div></div>`, e.details && (o += `<div style="width:100%;border-top:1px solid ${t.value.style.chart.tooltip.borderColor};margin-top: 2px">${e.details}</div>`), p.value = `<div style="font-family:inherit">${o}</div>`;
+        let l = "";
+        l += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${e.color}">⬤</div><div>${e.name}</div></div>`, e.details && (l += `<div style="width:100%;border-top:1px solid ${t.value.style.chart.tooltip.borderColor};margin-top: 2px">${e.details}</div>`), p.value = `<div style="font-family:inherit">${l}</div>`;
       }
     }
-    const Ce = f(null), G = f(null);
-    function Ee(e) {
-      Ce.value = e, e ? (R.value = !0, He(e), G.value = e.uid) : (R.value = !1, p.value = "", G.value = null);
+    const we = f(null), X = f(null);
+    function Ge(e) {
+      we.value = e, e ? (S.value = !0, Xe(e), X.value = e.uid) : (S.value = !1, p.value = "", X.value = null);
     }
     function K(e) {
-      e === "right" && (w.value.polygonPath.coordinates[0].x += w.value.circleRadius), e === "left" && (w.value.polygonPath.coordinates[0].x -= w.value.circleRadius), e === "top" && (w.value.polygonPath.coordinates[0].y -= w.value.circleRadius), e === "bottom" && (w.value.polygonPath.coordinates[0].y += w.value.circleRadius), le(w.value);
+      e === "right" && (P.value.polygonPath.coordinates[0].x += P.value.circleRadius), e === "left" && (P.value.polygonPath.coordinates[0].x -= P.value.circleRadius), e === "top" && (P.value.polygonPath.coordinates[0].y -= P.value.circleRadius), e === "bottom" && (P.value.polygonPath.coordinates[0].y += P.value.circleRadius), ae(P.value);
     }
-    function Xe(e) {
-      const l = [];
-      function o(u) {
+    function je(e) {
+      const o = [];
+      function l(u) {
         u.forEach((i) => {
           const h = {
             name: i.name,
@@ -463,24 +464,24 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             ancestor: i.ancestor && i.ancestor.name || "-",
             color: i.color || ""
           };
-          l.push(h), i.nodes && i.nodes.length > 0 && o(i.nodes, i.name);
+          o.push(h), i.nodes && i.nodes.length > 0 && l(i.nodes, i.name);
         });
       }
-      return o(e), l;
+      return l(e), o;
     }
-    const Ge = O(() => Xe(F.value)), H = O(() => {
+    const Ye = N(() => je(R.value)), H = N(() => {
       const e = [
         t.value.table.translations.nodeName,
         t.value.table.translations.details,
         t.value.table.translations.ancestor
-      ], l = Ge.value.map((i, h) => [
+      ], o = Ye.value.map((i, h) => [
         {
           color: i.color,
           name: i.name
         },
         i.details,
         i.ancestor || ""
-      ]), o = {
+      ]), l = {
         th: {
           backgroundColor: t.value.table.th.backgroundColor,
           color: t.value.table.th.color,
@@ -499,67 +500,68 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ];
       return {
         head: e,
-        body: l,
-        config: o,
+        body: o,
+        config: l,
         colNames: u
       };
     });
-    function $e() {
-      Re(() => {
-        const e = H.value.body.map((u, i) => [[u[0].name], [u[1]], [u[2]]]), l = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[...H.value.head]]].concat(e), o = dt(l);
-        vt({ csvContent: o, title: t.value.style.chart.title.text || "vue-ui-molecule" });
+    function Pe() {
+      Le(() => {
+        const e = H.value.body.map((u, i) => [[u[0].name], [u[1]], [u[2]]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[...H.value.head]]].concat(e), l = pt(o);
+        ht({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
-    function je() {
-      return F.value;
+    function We() {
+      return R.value;
     }
     const E = f(!1);
-    function Ve(e) {
-      E.value = e, _.value += 1;
+    function qe(e) {
+      E.value = e, ee.value += 1;
     }
-    function xe() {
-      P.value.showTable = !P.value.showTable;
+    function Te() {
+      T.value.showTable = !T.value.showTable;
     }
-    function we() {
-      P.value.showDataLabels = !P.value.showDataLabels;
+    function Fe() {
+      T.value.showDataLabels = !T.value.showDataLabels;
     }
-    function Pe() {
-      P.value.showTooltip = !P.value.showTooltip;
+    function Re() {
+      T.value.showTooltip = !T.value.showTooltip;
     }
     const Q = f(!1);
-    function ne() {
+    function se() {
       Q.value = !Q.value;
     }
-    return $({
-      getData: je,
-      generatePdf: ye,
-      generateCsv: $e,
-      generateImage: me,
-      toggleTable: xe,
-      toggleLabels: we,
-      toggleTooltip: Pe,
-      toggleAnnotator: ne
-    }), (e, l) => (a(), r("div", {
-      onMouseleave: l[7] || (l[7] = (o) => {
-        Ce.value = null, G.value = null;
-      }),
+    return x({
+      getData: We,
+      generatePdf: ke,
+      generateCsv: Pe,
+      generateImage: Ce,
+      toggleTable: Te,
+      toggleLabels: Fe,
+      toggleTooltip: Re,
+      toggleAnnotator: se
+    }), (e, o) => (a(), r("div", {
       ref_key: "moleculeChart",
-      ref: D,
-      class: Fe(`vue-ui-molecule ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      style: ie(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
-      id: `cluster_${s.value}`
+      ref: U,
+      class: Oe(`vue-ui-molecule ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: _(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
+      id: `cluster_${s.value}`,
+      onMouseleave: o[7] || (o[7] = (l) => {
+        we.value = null, X.value = null, b(he)(!1);
+      }),
+      onMouseenter: o[8] || (o[8] = () => b(he)(!0))
     }, [
-      t.value.userOptions.buttons.annotator ? (a(), T(xt, {
+      t.value.userOptions.buttons.annotator ? (a(), F(Tt, {
         key: 0,
-        parent: D.value,
+        parent: U.value,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
         active: Q.value,
-        onClose: ne
+        onClose: se
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
-      Ie.value ? (a(), r("div", Ot, null, 512)) : y("", !0),
-      t.value.style.chart.title.text ? (a(), r("div", Ut, [
-        (a(), T(ht, {
+      Ne.value ? (a(), r("div", Mt, null, 512)) : y("", !0),
+      t.value.style.chart.title.text ? (a(), r("div", Ht, [
+        (a(), F(mt, {
           key: `title_${ve.value}`,
           config: {
             title: {
@@ -573,14 +575,14 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }, null, 8, ["config"]))
       ])) : y("", !0),
-      t.value.userOptions.show && d.value ? (a(), T(yt, {
+      t.value.userOptions.show && d.value && (b(ge) || b(pe)) ? (a(), F(kt, {
         ref_key: "details",
         ref: v,
-        key: `user_options_${_.value}`,
+        key: `user_options_${ee.value}`,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
-        isPrinting: U(he),
-        isImaging: U(ge),
+        isPrinting: b(me),
+        isImaging: b(be),
         uid: s.value,
         hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
         hasPdf: t.value.userOptions.buttons.pdf,
@@ -589,143 +591,146 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         hasTable: t.value.userOptions.buttons.table,
         hasLabel: t.value.userOptions.buttons.labels,
         hasFullscreen: t.value.userOptions.buttons.fullscreen,
-        isTooltip: P.value.showTooltip,
+        isTooltip: T.value.showTooltip,
         titles: { ...t.value.userOptions.buttonTitles },
-        chartElement: D.value,
+        chartElement: U.value,
         position: t.value.userOptions.position,
         hasAnnotator: t.value.userOptions.buttons.annotator,
         isAnnotation: Q.value,
-        onToggleFullscreen: Ve,
-        onGeneratePdf: U(ye),
-        onGenerateCsv: $e,
-        onGenerateImage: U(me),
-        onToggleTable: xe,
-        onToggleLabels: we,
-        onToggleTooltip: Pe,
-        onToggleAnnotator: ne
-      }, et({ _: 2 }, [
+        onToggleFullscreen: qe,
+        onGeneratePdf: b(ke),
+        onGenerateCsv: Pe,
+        onGenerateImage: b(Ce),
+        onToggleTable: Te,
+        onToggleLabels: Fe,
+        onToggleTooltip: Re,
+        onToggleAnnotator: se,
+        style: _({
+          visibility: b(ge) ? b(pe) ? "visible" : "hidden" : "visible"
+        })
+      }, lt({ _: 2 }, [
         e.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: k(() => [
-            C(e.$slots, "optionTooltip", {}, void 0, !0)
+          fn: C(() => [
+            $(e.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: k(() => [
-            C(e.$slots, "optionPdf", {}, void 0, !0)
+          fn: C(() => [
+            $(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: k(() => [
-            C(e.$slots, "optionCsv", {}, void 0, !0)
+          fn: C(() => [
+            $(e.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
-          fn: k(() => [
-            C(e.$slots, "optionImg", {}, void 0, !0)
+          fn: C(() => [
+            $(e.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionTable ? {
           name: "optionTable",
-          fn: k(() => [
-            C(e.$slots, "optionTable", {}, void 0, !0)
+          fn: C(() => [
+            $(e.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: k(() => [
-            C(e.$slots, "optionLabels", {}, void 0, !0)
+          fn: C(() => [
+            $(e.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: k(({ toggleFullscreen: o, isFullscreen: u }) => [
-            C(e.$slots, "optionFullscreen", W(q({ toggleFullscreen: o, isFullscreen: u })), void 0, !0)
+          fn: C(({ toggleFullscreen: l, isFullscreen: u }) => [
+            $(e.$slots, "optionFullscreen", W(q({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: k(({ toggleAnnotator: o, isAnnotator: u }) => [
-            C(e.$slots, "optionAnnotator", W(q({ toggleAnnotator: o, isAnnotator: u })), void 0, !0)
+          fn: C(({ toggleAnnotator: l, isAnnotator: u }) => [
+            $(e.$slots, "optionAnnotator", W(q({ toggleAnnotator: l, isAnnotator: u })), void 0, !0)
           ]),
           key: "7"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
       d.value ? (a(), r("svg", {
         key: 4,
-        xmlns: U(it),
-        viewBox: ee.value,
-        class: Fe({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
-        style: ie(`overflow: hidden; background:transparent;color:${t.value.style.chart.color}`),
-        onClick: l[0] || (l[0] = M((o) => Me(o), ["stop"]))
+        xmlns: b(dt),
+        viewBox: te.value,
+        class: Oe({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
+        style: _(`overflow: hidden; background:transparent;color:${t.value.style.chart.color}`),
+        onClick: o[0] || (o[0] = M((l) => Ve(l), ["stop"]))
       }, [
-        S($t),
-        x("defs", null, [
-          (a(!0), r(m, null, z(Object.keys(ze.value), (o) => (a(), r("radialGradient", {
-            id: `gradient_${o}`,
+        O(Pt),
+        w("defs", null, [
+          (a(!0), r(m, null, z(Object.keys(He.value), (l) => (a(), r("radialGradient", {
+            id: `gradient_${l}`,
             cx: "50%",
             cy: "30%",
             r: "50%",
             fx: "50%",
             fy: "50%"
           }, [
-            x("stop", {
+            w("stop", {
               offset: "0%",
-              "stop-color": U(ut)(o, 0.5)
-            }, null, 8, Mt),
-            x("stop", {
+              "stop-color": b(vt)(l, 0.5)
+            }, null, 8, Xt),
+            w("stop", {
               offset: "100%",
-              "stop-color": o
-            }, null, 8, Ht)
-          ], 8, Bt))), 256))
+              "stop-color": l
+            }, null, 8, Gt)
+          ], 8, Vt))), 256))
         ]),
-        S(St, {
-          dataset: F.value,
+        O(Dt, {
+          dataset: R.value,
           color: t.value.style.chart.links.stroke,
           backgroundColor: t.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        S(Tt, {
-          dataset: F.value,
-          hoveredUid: G.value,
+        O(Ot, {
+          dataset: R.value,
+          hoveredUid: X.value,
           stroke: t.value.style.chart.nodes.stroke,
           strokeHovered: t.value.style.chart.nodes.strokeHovered,
-          onZoom: Be,
-          onHover: Ee
+          onZoom: Ee,
+          onHover: Ge
         }, null, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        P.value.showDataLabels ? (a(), T(Dt, {
+        T.value.showDataLabels ? (a(), F(It, {
           key: 0,
-          dataset: F.value,
+          dataset: R.value,
           color: t.value.style.chart.color,
-          hoveredUid: G.value
+          hoveredUid: X.value
         }, null, 8, ["dataset", "color", "hoveredUid"])) : y("", !0),
-        C(e.$slots, "svg", { svg: I.value }, void 0, !0)
-      ], 14, zt)) : y("", !0),
-      A.value ? (a(), T(It, {
-        key: `direction_pad_${_.value}`,
+        $(e.$slots, "svg", { svg: A.value }, void 0, !0)
+      ], 14, Et)) : y("", !0),
+      D.value ? (a(), F(zt, {
+        key: `direction_pad_${ee.value}`,
         color: t.value.style.chart.color,
         isFullscreen: E.value,
-        onMoveLeft: l[1] || (l[1] = (o) => K("left")),
-        onMoveRight: l[2] || (l[2] = (o) => K("right")),
-        onMoveTop: l[3] || (l[3] = (o) => K("top")),
-        onMoveBottom: l[4] || (l[4] = (o) => K("bottom")),
-        onReset: l[5] || (l[5] = (o) => {
-          te(), A.value = !1;
+        onMoveLeft: o[1] || (o[1] = (l) => K("left")),
+        onMoveRight: o[2] || (o[2] = (l) => K("right")),
+        onMoveTop: o[3] || (o[3] = (l) => K("top")),
+        onMoveBottom: o[4] || (o[4] = (l) => K("bottom")),
+        onReset: o[5] || (o[5] = (l) => {
+          oe(), D.value = !1;
         })
       }, null, 8, ["color", "isFullscreen"])) : y("", !0),
-      e.$slots.watermark ? (a(), r("div", Et, [
-        C(e.$slots, "watermark", W(q({ isPrinting: U(he) || U(ge) })), void 0, !0)
+      e.$slots.watermark ? (a(), r("div", jt, [
+        $(e.$slots, "watermark", W(q({ isPrinting: b(me) || b(be) })), void 0, !0)
       ])) : y("", !0),
-      d.value ? y("", !0) : (a(), T(kt, {
+      d.value ? y("", !0) : (a(), F(xt, {
         key: 7,
         config: {
           type: "molecule",
@@ -737,11 +742,11 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }
       }, null, 8, ["config"])),
-      e.$slots.source ? (a(), r("div", Xt, [
-        C(e.$slots, "source", {}, void 0, !0)
+      e.$slots.source ? (a(), r("div", Yt, [
+        $(e.$slots, "source", {}, void 0, !0)
       ], 512)) : y("", !0),
-      S(bt, {
-        show: P.value.showTooltip && R.value,
+      O($t, {
+        show: T.value.showTooltip && S.value,
         backgroundColor: t.value.style.chart.tooltip.backgroundColor,
         color: t.value.style.chart.tooltip.color,
         borderRadius: t.value.style.chart.tooltip.borderRadius,
@@ -751,24 +756,24 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
         position: t.value.style.chart.tooltip.position,
         offsetY: t.value.style.chart.tooltip.offsetY,
-        parent: D.value,
+        parent: U.value,
         content: p.value,
         isFullscreen: E.value,
         isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function"
       }, {
-        "tooltip-before": k(() => [
-          C(e.$slots, "tooltip-before", W(q({ ...ae.value })), void 0, !0)
+        "tooltip-before": C(() => [
+          $(e.$slots, "tooltip-before", W(q({ ...ne.value })), void 0, !0)
         ]),
-        "tooltip-after": k(() => [
-          C(e.$slots, "tooltip-after", W(q({ ...ae.value })), void 0, !0)
+        "tooltip-after": C(() => [
+          $(e.$slots, "tooltip-after", W(q({ ...ne.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      d.value ? (a(), T(Ct, {
+      d.value ? (a(), F(wt, {
         key: 9,
         hideDetails: "",
         config: {
-          open: P.value.showTable,
+          open: T.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: t.value.style.chart.backgroundColor,
@@ -780,33 +785,33 @@ const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }
       }, {
-        content: k(() => [
-          (a(), T(mt, {
+        content: C(() => [
+          (a(), F(Ct, {
             key: `table_${fe.value}`,
             colNames: H.value.colNames,
             head: H.value.head,
             body: H.value.body,
             config: H.value.config,
             title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: l[6] || (l[6] = (o) => P.value.showTable = !1)
+            onClose: o[6] || (o[6] = (l) => T.value.showTable = !1)
           }, {
-            th: k(({ th: o }) => [
-              x("div", {
-                innerHTML: o,
+            th: C(({ th: l }) => [
+              w("div", {
+                innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Gt)
+              }, null, 8, Wt)
             ]),
-            td: k(({ td: o }) => [
-              tt(Ae(o.name || o), 1)
+            td: C(({ td: l }) => [
+              at(Ie(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : y("", !0)
-    ], 46, Nt));
+    ], 46, Bt));
   }
-}, ao = /* @__PURE__ */ wt(jt, [["__scopeId", "data-v-33b704cf"]]);
+}, uo = /* @__PURE__ */ Rt(qt, [["__scopeId", "data-v-80836f0f"]]);
 export {
-  ao as default
+  uo as default
 };