vue-data-ui 2.3.84 → 2.3.86

package/dist/{vue-ui-molecule-BpomHzqe.js → vue-ui-molecule-4cIGPnWg.js}

@@ -1,15 +1,15 @@
-import { toRef as ne, resolveComponent as re, openBlock as s, createElementBlock as r, Fragment as y, renderList as U, withModifiers as M, createBlock as R, createCommentVNode as m, createElementVNode as x, toDisplayString as Se, normalizeStyle as K, createVNode as N, computed as B, onMounted as qe, ref as f, watch as Ze, normalizeClass as we, unref as I, createSlots as Je, withCtx as $, renderSlot as P, normalizeProps as Z, guardReactiveProps as J, createTextVNode as Ke, nextTick as Pe } from "vue";
-import { u as Qe, o as _e, e as et, c as Te, t as tt, a as ot, p as Fe, b as lt, X as at, l as st, N as nt, q as rt, r as it, x as ut, y as ct } from "./index-DI4DaxVG.js";
-import { _ as dt } from "./Title-Bk3h09h9.js";
-import { u as vt, U as ft } from "./usePrinter-D9bNzUQP.js";
-import { D as ht } from "./DataTable-C-iU_7h7.js";
-import { _ as pt } from "./Tooltip-CdB80DsD.js";
-import W from "./BaseIcon-B9ZZ6wkT.js";
-import gt from "./vue-ui-skeleton-DH4t1hrL.js";
-import yt from "./vue-ui-accordion-DsN9lxvc.js";
-import { u as Re } from "./useNestedProp-COsQo-tX.js";
-import { _ as mt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], kt = {
+import { toRef as re, resolveComponent as ie, openBlock as s, createElementBlock as r, Fragment as y, renderList as z, withModifiers as H, createBlock as F, createCommentVNode as m, createElementVNode as $, toDisplayString as Le, normalizeStyle as ne, createVNode as U, computed as O, onMounted as Ze, ref as f, watch as Je, normalizeClass as Pe, unref as N, createSlots as Ke, withCtx as C, renderSlot as P, normalizeProps as J, guardReactiveProps as K, createTextVNode as Qe, nextTick as Te } from "vue";
+import { u as _e, o as et, e as tt, c as Fe, t as ot, a as lt, p as Re, b as at, X as st, l as nt, N as rt, q as it, r as ut, x as ct, y as dt } from "./index-D2epy0rJ.js";
+import { _ as vt } from "./Title-DJ2FNrSN.js";
+import { u as ft, U as pt } from "./usePrinter-B6qtXaHk.js";
+import { D as ht } from "./DataTable-tSDSY14n.js";
+import { _ as gt } from "./Tooltip-CQpXRqRC.js";
+import W from "./BaseIcon-B9istAKo.js";
+import yt from "./vue-ui-skeleton-BLiYyX95.js";
+import mt from "./vue-ui-accordion-DzTB2FL0.js";
+import { u as Se } from "./useNestedProp-C_ZrJBd9.js";
+import { _ as bt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const kt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], Ct = {
   __name: "RecursiveCircles",
   props: {
     color: {
@@ -38,49 +38,49 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(a, { emit: C }) {
-    const k = a;
-    function c(n) {
-      C("zoom", n);
+  setup(a, { emit: k }) {
+    const b = a;
+    function u(n) {
+      k("zoom", n);
     }
-    function d(n) {
-      C("hover", n);
+    function c(n) {
+      k("hover", n);
     }
-    return ne(k, "dataset").value.forEach((n) => {
-      n.nodes && n.nodes.length > 0 && n.nodes.forEach((u) => {
-        u.ancestor = n;
+    return re(b, "dataset").value.forEach((n) => {
+      n.nodes && n.nodes.length > 0 && n.nodes.forEach((v) => {
+        v.ancestor = n;
       });
-    }), (n, u) => {
-      const T = re("RecursiveCircles", !0);
-      return s(!0), r(y, null, U(a.dataset, (h) => (s(), r(y, null, [
-        h.polygonPath && h.polygonPath.coordinates ? (s(), r(y, { key: 0 }, [
-          (s(!0), r(y, null, U(h.polygonPath.coordinates, (O, H) => (s(), r("circle", {
-            cx: O.x,
-            cy: O.y,
-            r: h.circleRadius,
-            fill: `url(#gradient_${h.color})`,
-            stroke: a.hoveredUid && a.hoveredUid === h.uid ? a.strokeHovered : a.stroke,
-            "stroke-width": a.hoveredUid && a.hoveredUid === h.uid ? h.circleRadius / 6 : h.circleRadius / 12,
+    }), (n, v) => {
+      const R = ie("RecursiveCircles", !0);
+      return s(!0), r(y, null, z(a.dataset, (p) => (s(), r(y, null, [
+        p.polygonPath && p.polygonPath.coordinates ? (s(), r(y, { key: 0 }, [
+          (s(!0), r(y, null, z(p.polygonPath.coordinates, (B, q) => (s(), r("circle", {
+            cx: B.x,
+            cy: B.y,
+            r: p.circleRadius,
+            fill: `url(#gradient_${p.color})`,
+            stroke: a.hoveredUid && a.hoveredUid === p.uid ? a.strokeHovered : a.stroke,
+            "stroke-width": a.hoveredUid && a.hoveredUid === p.uid ? p.circleRadius / 6 : p.circleRadius / 12,
             style: { cursor: "pointer" },
-            onClick: M((b) => c(h), ["stop"]),
-            onMouseover: (b) => d(h),
-            onMouseleave: u[0] || (u[0] = (b) => d(null))
-          }, null, 40, bt))), 256)),
-          h.nodes && h.nodes.length > 0 ? (s(), R(T, {
+            onClick: H((L) => u(p), ["stop"]),
+            onMouseover: (L) => c(p),
+            onMouseleave: v[0] || (v[0] = (L) => c(null))
+          }, null, 40, kt))), 256)),
+          p.nodes && p.nodes.length > 0 ? (s(), F(R, {
             key: 0,
-            dataset: h.nodes,
+            dataset: p.nodes,
             color: a.color,
             stroke: a.stroke,
             strokeHovered: a.strokeHovered,
             hoveredUid: a.hoveredUid,
-            onZoom: c,
-            onHover: d
+            onZoom: u,
+            onHover: c
           }, null, 8, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : m("", !0)
         ], 64)) : m("", !0)
       ], 64))), 256);
     };
   }
-}, Ct = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], $t = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], xt = {
+}, $t = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], xt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], wt = {
   __name: "RecursiveLinks",
   props: {
     dataset: {
@@ -97,38 +97,38 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   setup(a) {
-    return ne(a, "dataset").value.forEach((c) => {
-      c.nodes && c.nodes.length > 0 && c.nodes.forEach((d) => {
-        d.ancestor = c;
+    return re(a, "dataset").value.forEach((u) => {
+      u.nodes && u.nodes.length > 0 && u.nodes.forEach((c) => {
+        c.ancestor = u;
       });
-    }), (c, d) => {
-      const S = re("RecursiveLinks", !0);
+    }), (u, c) => {
+      const S = ie("RecursiveLinks", !0);
       return s(), r(y, null, [
-        (s(!0), r(y, null, U(a.dataset, (n) => (s(), r(y, null, [
-          n.polygonPath && n.polygonPath.coordinates ? (s(!0), r(y, { key: 0 }, U(n.polygonPath.coordinates, (u, T) => (s(), r(y, null, [
+        (s(!0), r(y, null, z(a.dataset, (n) => (s(), r(y, null, [
+          n.polygonPath && n.polygonPath.coordinates ? (s(!0), r(y, { key: 0 }, z(n.polygonPath.coordinates, (v, R) => (s(), r(y, null, [
             n.ancestor && n.ancestor.polygonPath ? (s(), r(y, { key: 0 }, [
-              x("line", {
-                x1: u.x,
-                y1: u.y,
+              $("line", {
+                x1: v.x,
+                y1: v.y,
                 x2: n.ancestor.polygonPath.coordinates[0].x,
                 y2: n.ancestor.polygonPath.coordinates[0].y,
                 stroke: a.backgroundColor,
                 "stroke-width": n.circleRadius / 1.5
-              }, null, 8, Ct),
-              x("line", {
-                x1: u.x,
-                y1: u.y,
+              }, null, 8, $t),
+              $("line", {
+                x1: v.x,
+                y1: v.y,
                 x2: n.ancestor.polygonPath.coordinates[0].x,
                 y2: n.ancestor.polygonPath.coordinates[0].y,
                 stroke: a.color,
                 "stroke-width": n.circleRadius / 2
-              }, null, 8, $t)
+              }, null, 8, xt)
             ], 64)) : m("", !0)
           ], 64))), 256)) : m("", !0)
         ], 64))), 256)),
-        (s(!0), r(y, null, U(a.dataset, (n) => (s(), r(y, null, [
+        (s(!0), r(y, null, z(a.dataset, (n) => (s(), r(y, null, [
           n.polygonPath && n.polygonPath.coordinates ? (s(), r(y, { key: 0 }, [
-            n.nodes && n.nodes.length > 0 ? (s(), R(S, {
+            n.nodes && n.nodes.length > 0 ? (s(), F(S, {
               key: 0,
               dataset: n.nodes,
               color: a.color,
@@ -139,7 +139,7 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ], 64);
     };
   }
-}, wt = ["x", "y", "fill", "font-size"], Pt = {
+}, Pt = ["x", "y", "fill", "font-size"], Tt = {
   __name: "RecursiveLabels",
   props: {
     color: {
@@ -156,26 +156,26 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(a, { emit: C }) {
-    return ne(a, "dataset").value.forEach((d) => {
-      d.nodes && d.nodes.length > 0 && d.nodes.forEach((S) => {
-        S.ancestor = d;
+  setup(a, { emit: k }) {
+    return re(a, "dataset").value.forEach((c) => {
+      c.nodes && c.nodes.length > 0 && c.nodes.forEach((S) => {
+        S.ancestor = c;
       });
-    }), (d, S) => {
-      const n = re("RecursiveLabels", !0);
-      return s(!0), r(y, null, U(a.dataset, (u) => (s(), r(y, null, [
-        u.polygonPath && u.polygonPath.coordinates ? (s(), r(y, { key: 0 }, [
-          (s(!0), r(y, null, U(u.polygonPath.coordinates, (T) => (s(), r("text", {
-            x: T.x,
-            y: T.y + u.circleRadius * 2,
+    }), (c, S) => {
+      const n = ie("RecursiveLabels", !0);
+      return s(!0), r(y, null, z(a.dataset, (v) => (s(), r(y, null, [
+        v.polygonPath && v.polygonPath.coordinates ? (s(), r(y, { key: 0 }, [
+          (s(!0), r(y, null, z(v.polygonPath.coordinates, (R) => (s(), r("text", {
+            x: R.x,
+            y: R.y + v.circleRadius * 2,
             fill: a.color,
-            "font-size": u.circleRadius,
+            "font-size": v.circleRadius,
             "text-anchor": "middle",
             style: { opacity: "0.8", "pointer-events": "none" }
-          }, Se(u.name), 9, wt))), 256)),
-          u.nodes && u.nodes.length > 0 ? (s(), R(n, {
+          }, Le(v.name), 9, Pt))), 256)),
+          v.nodes && v.nodes.length > 0 ? (s(), F(n, {
             key: 0,
-            dataset: u.nodes,
+            dataset: v.nodes,
             color: a.color,
             hoveredUid: a.hoveredUid
           }, null, 8, ["dataset", "color", "hoveredUid"])) : m("", !0)
@@ -183,7 +183,7 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ], 64))), 256);
     };
   }
-}, Tt = { style: { position: "relative", height: "100%", width: "100%" } }, Ft = {
+}, Ft = { style: { position: "relative", height: "100%", width: "100%" } }, Rt = {
   __name: "BaseDirectionPad",
   props: {
     color: {
@@ -196,57 +196,57 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["moveLeft", "moveTop", "moveRight", "moveBottom", "reset"],
-  setup(a, { emit: C }) {
-    return (k, c) => (s(), r("div", {
-      style: K(`position: ${a.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${a.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
+  setup(a, { emit: k }) {
+    return (b, u) => (s(), r("div", {
+      style: ne(`position: ${a.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${a.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
       "data-html2canvas-ignore": ""
     }, [
-      x("div", Tt, [
-        x("button", {
-          onClick: c[0] || (c[0] = M((d) => C("moveLeft"), ["stop"])),
+      $("div", Ft, [
+        $("button", {
+          onClick: u[0] || (u[0] = H((c) => k("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" }
         }, [
-          N(W, {
+          U(W, {
             stroke: a.color,
             name: "arrowLeft",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[1] || (c[1] = M((d) => C("moveTop"), ["stop"])),
+        $("button", {
+          onClick: u[1] || (u[1] = H((c) => k("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" }
         }, [
-          N(W, {
+          U(W, {
             stroke: a.color,
             name: "arrowTop",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[2] || (c[2] = M((d) => C("moveRight"), ["stop"])),
+        $("button", {
+          onClick: u[2] || (u[2] = H((c) => k("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" }
         }, [
-          N(W, {
+          U(W, {
             stroke: a.color,
             name: "arrowRight",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[3] || (c[3] = M((d) => C("moveBottom"), ["stop"])),
+        $("button", {
+          onClick: u[3] || (u[3] = H((c) => k("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" }
         }, [
-          N(W, {
+          U(W, {
             stroke: a.color,
             name: "arrowBottom",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        x("button", {
-          onClick: c[4] || (c[4] = M((d) => C("reset"), ["stop"])),
+        $("button", {
+          onClick: u[4] || (u[4] = H((c) => k("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" }
         }, [
-          N(W, {
+          U(W, {
             stroke: a.color,
             name: "close",
             style: { cursor: "pointer" },
@@ -256,10 +256,13 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ])
     ], 4));
   }
-}, Rt = ["id"], St = ["xmlns", "viewBox"], Lt = ["id"], Dt = ["stop-color"], It = ["stop-color"], Nt = {
+}, St = ["id"], Lt = {
+  key: 0,
+  style: "width:100%;background:transparent;"
+}, Dt = ["xmlns", "viewBox"], It = ["id"], Nt = ["stop-color"], Ut = ["stop-color"], zt = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Ut = ["innerHTML"], zt = {
+}, Bt = ["innerHTML"], Mt = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -275,188 +278,191 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }
     }
   },
-  setup(a, { expose: C }) {
-    const k = a, { vue_ui_molecule: c } = Qe(), d = B(() => !!k.dataset && k.dataset.length);
-    qe(() => {
-      _e(k.dataset) && et({
+  setup(a, { expose: k }) {
+    const b = a, { vue_ui_molecule: u } = _e(), c = O(() => !!b.dataset && b.dataset.length);
+    Ze(() => {
+      S();
+    });
+    function S() {
+      et(b.dataset) && tt({
         componentName: "VueUiMolecule",
         type: "dataset"
       });
-    });
-    const S = f(Te()), n = f(null), u = f(!1), T = f(""), h = f(null), O = f(null), H = f(!1), b = f(null), ie = f(null), Q = f(0), ue = f(0), ce = f(0), t = B({
-      get: () => de(),
+    }
+    const n = f(Fe()), v = f(null), R = f(!1), p = f(""), B = f(null), q = f(null), L = f(!1), x = f(null), ue = f(null), Q = f(0), ce = f(0), de = f(0), t = O({
+      get: () => ve(),
       set: (e) => e
     });
-    function de() {
-      const e = Re({
-        userConfig: k.config,
-        defaultConfig: c
+    function ve() {
+      const e = Se({
+        userConfig: b.config,
+        defaultConfig: u
       });
       return e.theme ? {
-        ...Re({
-          userConfig: tt.vue_ui_molecule[e.theme] || k.config,
+        ...Se({
+          userConfig: ot.vue_ui_molecule[e.theme] || b.config,
           defaultConfig: e
         }),
-        customPalette: ot[e.theme] || Fe
+        customPalette: lt[e.theme] || Re
       } : e;
     }
-    Ze(() => k.config, (e) => {
-      t.value = de(), prepareChart(), ue.value += 1, ce.value += 1;
+    Je(() => b.config, (e) => {
+      t.value = ve(), S(), ce.value += 1, de.value += 1;
     }, { deep: !0 });
-    const { isPrinting: ve, isImaging: fe, generatePdf: he, generateImage: pe } = vt({
-      elementId: `cluster_${S.value}`,
+    const { isPrinting: fe, isImaging: pe, generatePdf: he, generateImage: ge } = ft({
+      elementId: `cluster_${n.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-molecule"
-    }), Le = B(() => lt(t.value.customPalette)), w = f({
+    }), De = O(() => at(t.value.customPalette)), w = f({
       showTable: t.value.table.show,
       showDataLabels: !0,
       showTooltip: t.value.style.chart.tooltip.show
     });
-    function ge(e, o = 0) {
-      return Array.isArray(e) && e.length > 0 && e[0].nodes ? ge(e[0].nodes, o + 1) : o;
+    function ye(e, o = 0) {
+      return Array.isArray(e) && e.length > 0 && e[0].nodes ? ye(e[0].nodes, o + 1) : o;
     }
-    function De() {
-      const e = ge(k.dataset);
+    function Ie() {
+      const e = ye(b.dataset);
       let o = 100, l = o;
-      for (let v = 0; v < e; v += 1)
+      for (let d = 0; d < e; d += 1)
         o /= 1, l += o;
       return {
         height: l,
         width: l
       };
     }
-    const L = f(De()), _ = f(`0 0 ${L.value.width} ${L.value.height}`);
-    function ye(e, o = { x: -L.value.width / 2.43, y: L.value.height / 2 }, l = L.value.width / 1.1, v = 24, i = 0, p = 0, j = "#BBBBBB") {
+    const D = f(Ie()), _ = f(`0 0 ${D.value.width} ${D.value.height}`);
+    function me(e, o = { x: -D.value.width / 2.43, y: D.value.height / 2 }, l = D.value.width / 1.1, d = 24, i = 0, h = 0, j = "#BBBBBB") {
       if (e && e.length > 0) {
-        const ae = nt({
+        const ae = rt({
           plot: o,
           radius: l,
           sides: e.length,
           rotation: i
         });
-        e.forEach((g, z) => {
-          const V = ae.coordinates[z];
-          let D;
-          if (g.ancestor ? g.ancestor.ancestor ? D = g.ancestor.color || j : (D = Le.value[p] || Fe[p] || j, p += 1) : D = j, g.polygonPath = {
+        e.forEach((g, M) => {
+          const V = ae.coordinates[M];
+          let I;
+          if (g.ancestor ? g.ancestor.ancestor ? I = g.ancestor.color || j : (I = De.value[h] || Re[h] || j, h += 1) : I = j, g.polygonPath = {
             coordinates: [V]
-          }, g.circleRadius = v, g.color = D, g.uid = Te(), g.nodes && g.nodes.length > 0) {
-            const se = !g.ancestor || !g.ancestor.ancestor ? p : 0;
-            g.nodes = ye(
+          }, g.circleRadius = d, g.color = I, g.uid = Fe(), g.nodes && g.nodes.length > 0) {
+            const se = !g.ancestor || !g.ancestor.ancestor ? h : 0;
+            g.nodes = me(
               g.nodes,
               V,
               l / 2.9,
-              v / 2.2,
-              i + Math.PI * z / g.nodes.length,
+              d / 2.2,
+              i + Math.PI * M / g.nodes.length,
               se,
-              D
+              I
             );
           }
         });
       }
       return e;
     }
-    function Ie(e) {
+    function Ne(e) {
       const o = /* @__PURE__ */ new Set();
       function l(i) {
-        i.forEach((p) => {
-          p.color && !o.has(p.color) && o.add(p.color), p.nodes && p.nodes.length > 0 && l(p.nodes);
+        i.forEach((h) => {
+          h.color && !o.has(h.color) && o.add(h.color), h.nodes && h.nodes.length > 0 && l(h.nodes);
         });
       }
       l(e);
-      const v = {};
-      return Array.from(o).forEach((i, p) => {
-        v[i] = `gradient_${p}`;
-      }), v;
+      const d = {};
+      return Array.from(o).forEach((i, h) => {
+        d[i] = `gradient_${h}`;
+      }), d;
     }
-    const Ne = B(() => Ie(F.value)), F = B(() => ye(k.dataset));
+    const Ue = O(() => Ne(T.value)), T = O(() => me(b.dataset));
     function ee() {
-      H.value = !1, O.value = null, ie.value = null, b.value = null, oe({
+      L.value = !1, q.value = null, ue.value = null, x.value = null, oe({
         polygonPath: {
-          coordinates: [{ x: L.value.width / 2, y: L.value.height / 2 }]
+          coordinates: [{ x: D.value.width / 2, y: D.value.height / 2 }]
         },
         circleRadius: 24
       });
     }
     const te = f(null);
     function oe(e) {
-      h.value.focus(), Pe(() => {
+      B.value.focus(), Te(() => {
         te.value && cancelAnimationFrame(te.value);
-        const o = _.value.split(" "), l = parseFloat(o[0]), v = parseFloat(o[1]), i = parseFloat(o[2]), p = parseFloat(o[3]), { x: j, y: ae } = e.polygonPath.coordinates[0], { circleRadius: g } = e, z = 8.34, V = j - g * z, D = ae - g * z, se = g * z * 2, Xe = g * z * 2, Ge = Math.sqrt((V - l) ** 2 + (D - v) ** 2), Y = Math.min(1200, Math.max(20, Math.floor(Ge / 10))), je = (V - l) / Y, Ve = (D - v) / Y, Ye = (se - i) / Y, We = (Xe - p) / Y;
+        const o = _.value.split(" "), l = parseFloat(o[0]), d = parseFloat(o[1]), i = parseFloat(o[2]), h = parseFloat(o[3]), { x: j, y: ae } = e.polygonPath.coordinates[0], { circleRadius: g } = e, M = 8.34, V = j - g * M, I = ae - g * M, se = g * M * 2, Ge = g * M * 2, je = Math.sqrt((V - l) ** 2 + (I - d) ** 2), Y = Math.min(1200, Math.max(20, Math.floor(je / 10))), Ve = (V - l) / Y, Ye = (I - d) / Y, We = (se - i) / Y, qe = (Ge - h) / Y;
         let A = 0;
-        function xe() {
-          _.value = `${l + je * A} ${v + Ve * A} ${i + Ye * A} ${p + We * A}`, A += t.value.style.chart.zoom.speed, A <= Y && (te.value = requestAnimationFrame(xe));
+        function we() {
+          _.value = `${l + Ve * A} ${d + Ye * A} ${i + We * A} ${h + qe * A}`, A += t.value.style.chart.zoom.speed, A <= Y && (te.value = requestAnimationFrame(we));
         }
-        xe();
+        we();
       });
     }
-    function Ue(e) {
-      O.value === e.uid ? ee() : (O.value = e.uid, ie.value = e, b.value = {
+    function ze(e) {
+      q.value === e.uid ? ee() : (q.value = e.uid, ue.value = e, x.value = {
         circleRadius: e.circleRadius,
         polygonPath: {
           coordinates: [{ x: e.polygonPath.coordinates[0].x, y: e.polygonPath.coordinates[0].y }]
         }
-      }, oe(e), H.value = e.uid !== F.value[0].uid);
+      }, oe(e), L.value = e.uid !== T.value[0].uid);
     }
-    function ze(e) {
+    function Be(e) {
       if (e.target.nodeName !== "circle")
-        ee(), H.value = !1;
+        ee(), L.value = !1;
       else
         return;
     }
     const le = f(null);
-    function Be(e) {
+    function Me(e) {
       le.value = {
         datapoint: e,
         seriesIndex: -1,
-        series: F.value,
+        series: T.value,
         config: t.value
       };
       const o = t.value.style.chart.tooltip.customFormat;
-      if (ut(o) && ct(() => o({
+      if (ct(o) && dt(() => o({
         seriesIndex: -1,
         datapoint: e,
-        series: F.value,
+        series: T.value,
         config: t.value
       })))
-        T.value = o({
+        p.value = o({
           seriesIndex: -1,
           // well, ok
           datapoint: e,
-          series: F.value,
+          series: T.value,
           config: t.value
         });
       else {
         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>`), T.value = `<div style="font-family:inherit">${l}</div>`;
+        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 me = f(null), X = f(null);
-    function Me(e) {
-      me.value = e, e ? (u.value = !0, Be(e), X.value = e.uid) : (u.value = !1, T.value = "", X.value = null);
+    const be = f(null), X = f(null);
+    function Oe(e) {
+      be.value = e, e ? (R.value = !0, Me(e), X.value = e.uid) : (R.value = !1, p.value = "", X.value = null);
     }
-    function q(e) {
-      e === "right" && (b.value.polygonPath.coordinates[0].x += b.value.circleRadius), e === "left" && (b.value.polygonPath.coordinates[0].x -= b.value.circleRadius), e === "top" && (b.value.polygonPath.coordinates[0].y -= b.value.circleRadius), e === "bottom" && (b.value.polygonPath.coordinates[0].y += b.value.circleRadius), oe(b.value);
+    function Z(e) {
+      e === "right" && (x.value.polygonPath.coordinates[0].x += x.value.circleRadius), e === "left" && (x.value.polygonPath.coordinates[0].x -= x.value.circleRadius), e === "top" && (x.value.polygonPath.coordinates[0].y -= x.value.circleRadius), e === "bottom" && (x.value.polygonPath.coordinates[0].y += x.value.circleRadius), oe(x.value);
     }
-    function Oe(e) {
+    function He(e) {
       const o = [];
-      function l(v) {
-        v.forEach((i) => {
-          const p = {
+      function l(d) {
+        d.forEach((i) => {
+          const h = {
             name: i.name,
             details: i.details || "-",
             ancestor: i.ancestor && i.ancestor.name || "-",
             color: i.color || ""
           };
-          o.push(p), i.nodes && i.nodes.length > 0 && l(i.nodes, i.name);
+          o.push(h), i.nodes && i.nodes.length > 0 && l(i.nodes, i.name);
         });
       }
       return l(e), o;
     }
-    const He = B(() => Oe(F.value)), E = B(() => {
+    const Ee = O(() => He(T.value)), E = O(() => {
       const e = [
         t.value.table.translations.nodeName,
         t.value.table.translations.details,
         t.value.table.translations.ancestor
-      ], o = He.value.map((i, p) => [
+      ], o = Ee.value.map((i, h) => [
         {
           color: i.color,
           name: i.name
@@ -475,7 +481,7 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           outline: t.value.table.td.outline
         },
         breakpoint: t.value.table.responsiveBreakpoint
-      }, v = [
+      }, d = [
         t.value.table.translations.nodeName,
         t.value.table.translations.details,
         t.value.table.translations.ancestor
@@ -484,55 +490,52 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         head: e,
         body: o,
         config: l,
-        colNames: v
+        colNames: d
       };
     });
-    function be() {
-      Pe(() => {
-        const e = E.value.body.map((v, i) => [[v[0].name], [v[1]], [v[2]]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[...E.value.head]]].concat(e), l = rt(o);
-        it({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-molecule" });
+    function ke() {
+      Te(() => {
+        const e = E.value.body.map((d, i) => [[d[0].name], [d[1]], [d[2]]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[...E.value.head]]].concat(e), l = it(o);
+        ut({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
-    function Ee() {
-      return F.value;
+    function Ae() {
+      return T.value;
     }
     const G = f(!1);
-    function Ae(e) {
+    function Xe(e) {
       G.value = e, Q.value += 1;
     }
-    function ke() {
+    function Ce() {
       w.value.showTable = !w.value.showTable;
     }
-    function Ce() {
+    function $e() {
       w.value.showDataLabels = !w.value.showDataLabels;
     }
-    function $e() {
+    function xe() {
       w.value.showTooltip = !w.value.showTooltip;
     }
-    return C({
-      getData: Ee,
+    return k({
+      getData: Ae,
       generatePdf: he,
-      generateCsv: be,
-      generateImage: pe,
-      toggleTable: ke,
-      toggleLabels: Ce,
-      toggleTooltip: $e
+      generateCsv: ke,
+      generateImage: ge,
+      toggleTable: Ce,
+      toggleLabels: $e,
+      toggleTooltip: xe
     }), (e, o) => (s(), r("div", {
       onMouseleave: o[7] || (o[7] = (l) => {
-        me.value = null, X.value = null;
+        be.value = null, X.value = null;
       }),
       ref_key: "moleculeChart",
-      ref: h,
-      class: we(`vue-ui-molecule ${G.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      style: K(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
-      id: `cluster_${S.value}`
+      ref: B,
+      class: Pe(`vue-ui-molecule ${G.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: ne(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
+      id: `cluster_${n.value}`
     }, [
-      t.value.style.chart.title.text ? (s(), r("div", {
-        key: 0,
-        style: K(`width:100%;background:${t.value.style.chart.backgroundColor};`)
-      }, [
-        (s(), R(dt, {
-          key: `title_${ue.value}`,
+      t.value.style.chart.title.text ? (s(), r("div", Lt, [
+        (s(), F(vt, {
+          key: `title_${ce.value}`,
           config: {
             title: {
               cy: "molecule-div-title",
@@ -544,16 +547,16 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             }
           }
         }, null, 8, ["config"]))
-      ], 4)) : m("", !0),
-      t.value.userOptions.show && d.value ? (s(), R(ft, {
+      ])) : m("", !0),
+      t.value.userOptions.show && c.value ? (s(), F(pt, {
         ref_key: "details",
-        ref: n,
+        ref: v,
         key: `user_options_${Q.value}`,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
-        isPrinting: I(ve),
-        isImaging: I(fe),
-        uid: S.value,
+        isPrinting: N(fe),
+        isImaging: N(pe),
+        uid: n.value,
         hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
         hasPdf: t.value.userOptions.buttons.pdf,
         hasXls: t.value.userOptions.buttons.csv,
@@ -563,75 +566,76 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         hasFullscreen: t.value.userOptions.buttons.fullscreen,
         isTooltip: w.value.showTooltip,
         titles: { ...t.value.userOptions.buttonTitles },
-        chartElement: h.value,
-        onToggleFullscreen: Ae,
-        onGeneratePdf: I(he),
-        onGenerateCsv: be,
-        onGenerateImage: I(pe),
-        onToggleTable: ke,
-        onToggleLabels: Ce,
-        onToggleTooltip: $e
-      }, Je({ _: 2 }, [
+        chartElement: B.value,
+        position: t.value.userOptions.position,
+        onToggleFullscreen: Xe,
+        onGeneratePdf: N(he),
+        onGenerateCsv: ke,
+        onGenerateImage: N(ge),
+        onToggleTable: Ce,
+        onToggleLabels: $e,
+        onToggleTooltip: xe
+      }, Ke({ _: 2 }, [
         e.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: $(() => [
+          fn: C(() => [
             P(e.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: $(() => [
+          fn: C(() => [
             P(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: $(() => [
+          fn: C(() => [
             P(e.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
-          fn: $(() => [
+          fn: C(() => [
             P(e.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionTable ? {
           name: "optionTable",
-          fn: $(() => [
+          fn: C(() => [
             P(e.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: $(() => [
+          fn: C(() => [
             P(e.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: $(({ toggleFullscreen: l, isFullscreen: v }) => [
-            P(e.$slots, "optionFullscreen", Z(J({ toggleFullscreen: l, isFullscreen: v })), void 0, !0)
+          fn: C(({ toggleFullscreen: l, isFullscreen: d }) => [
+            P(e.$slots, "optionFullscreen", J(K({ toggleFullscreen: l, isFullscreen: d })), void 0, !0)
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : m("", !0),
-      d.value ? (s(), r("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "onGeneratePdf", "onGenerateImage"])) : m("", !0),
+      c.value ? (s(), r("svg", {
         key: 2,
-        xmlns: I(at),
+        xmlns: N(st),
         viewBox: _.value,
-        class: we({ "vue-data-ui-fullscreen--on": G.value, "vue-data-ui-fulscreen--off": !G.value }),
-        style: K(`overflow: hidden; background:${t.value.style.chart.backgroundColor};color:${t.value.style.chart.color}`),
-        onClick: o[0] || (o[0] = M((l) => ze(l), ["stop"]))
+        class: Pe({ "vue-data-ui-fullscreen--on": G.value, "vue-data-ui-fulscreen--off": !G.value }),
+        style: ne(`overflow: hidden; background:transparent;color:${t.value.style.chart.color}`),
+        onClick: o[0] || (o[0] = H((l) => Be(l), ["stop"]))
       }, [
-        x("defs", null, [
-          (s(!0), r(y, null, U(Object.keys(Ne.value), (l) => (s(), r("radialGradient", {
+        $("defs", null, [
+          (s(!0), r(y, null, z(Object.keys(Ue.value), (l) => (s(), r("radialGradient", {
             id: `gradient_${l}`,
             cx: "50%",
             cy: "30%",
@@ -639,53 +643,53 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             fx: "50%",
             fy: "50%"
           }, [
-            x("stop", {
+            $("stop", {
               offset: "0%",
-              "stop-color": I(st)(l, 0.5)
-            }, null, 8, Dt),
-            x("stop", {
+              "stop-color": N(nt)(l, 0.5)
+            }, null, 8, Nt),
+            $("stop", {
               offset: "100%",
               "stop-color": l
-            }, null, 8, It)
-          ], 8, Lt))), 256))
+            }, null, 8, Ut)
+          ], 8, It))), 256))
         ]),
-        N(xt, {
-          dataset: F.value,
+        U(wt, {
+          dataset: T.value,
           color: t.value.style.chart.links.stroke,
           backgroundColor: t.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        N(kt, {
-          dataset: F.value,
+        U(Ct, {
+          dataset: T.value,
           hoveredUid: X.value,
           stroke: t.value.style.chart.nodes.stroke,
           strokeHovered: t.value.style.chart.nodes.strokeHovered,
-          onZoom: Ue,
-          onHover: Me
+          onZoom: ze,
+          onHover: Oe
         }, null, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        w.value.showDataLabels ? (s(), R(Pt, {
+        w.value.showDataLabels ? (s(), F(Tt, {
           key: 0,
-          dataset: F.value,
+          dataset: T.value,
           color: t.value.style.chart.color,
           hoveredUid: X.value
         }, null, 8, ["dataset", "color", "hoveredUid"])) : m("", !0),
-        P(e.$slots, "svg", { svg: L.value }, void 0, !0)
-      ], 14, St)) : m("", !0),
-      H.value ? (s(), R(Ft, {
+        P(e.$slots, "svg", { svg: D.value }, void 0, !0)
+      ], 14, Dt)) : m("", !0),
+      L.value ? (s(), F(Rt, {
         key: `direction_pad_${Q.value}`,
         color: t.value.style.chart.color,
         isFullscreen: G.value,
-        onMoveLeft: o[1] || (o[1] = (l) => q("left")),
-        onMoveRight: o[2] || (o[2] = (l) => q("right")),
-        onMoveTop: o[3] || (o[3] = (l) => q("top")),
-        onMoveBottom: o[4] || (o[4] = (l) => q("bottom")),
+        onMoveLeft: o[1] || (o[1] = (l) => Z("left")),
+        onMoveRight: o[2] || (o[2] = (l) => Z("right")),
+        onMoveTop: o[3] || (o[3] = (l) => Z("top")),
+        onMoveBottom: o[4] || (o[4] = (l) => Z("bottom")),
         onReset: o[5] || (o[5] = (l) => {
-          ee(), H.value = !1;
+          ee(), L.value = !1;
         })
       }, null, 8, ["color", "isFullscreen"])) : m("", !0),
-      e.$slots.watermark ? (s(), r("div", Nt, [
-        P(e.$slots, "watermark", Z(J({ isPrinting: I(ve) || I(fe) })), void 0, !0)
+      e.$slots.watermark ? (s(), r("div", zt, [
+        P(e.$slots, "watermark", J(K({ isPrinting: N(fe) || N(pe) })), void 0, !0)
       ])) : m("", !0),
-      d.value ? m("", !0) : (s(), R(gt, {
+      c.value ? m("", !0) : (s(), F(yt, {
         key: 5,
         config: {
           type: "molecule",
@@ -697,8 +701,8 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }
       }, null, 8, ["config"])),
-      N(pt, {
-        show: w.value.showTooltip && u.value,
+      U(gt, {
+        show: w.value.showTooltip && R.value,
         backgroundColor: t.value.style.chart.tooltip.backgroundColor,
         color: t.value.style.chart.tooltip.color,
         borderRadius: t.value.style.chart.tooltip.borderRadius,
@@ -708,19 +712,19 @@ const bt = ["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: h.value,
-        content: T.value,
+        parent: B.value,
+        content: p.value,
         isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function"
       }, {
-        "tooltip-before": $(() => [
-          P(e.$slots, "tooltip-before", Z(J({ ...le.value })), void 0, !0)
+        "tooltip-before": C(() => [
+          P(e.$slots, "tooltip-before", J(K({ ...le.value })), void 0, !0)
         ]),
-        "tooltip-after": $(() => [
-          P(e.$slots, "tooltip-after", Z(J({ ...le.value })), void 0, !0)
+        "tooltip-after": C(() => [
+          P(e.$slots, "tooltip-after", J(K({ ...le.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      d.value ? (s(), R(yt, {
+      c.value ? (s(), F(mt, {
         key: 6,
         hideDetails: "",
         config: {
@@ -736,9 +740,9 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }
       }, {
-        content: $(() => [
-          (s(), R(ht, {
-            key: `table_${ce.value}`,
+        content: C(() => [
+          (s(), F(ht, {
+            key: `table_${de.value}`,
             colNames: E.value.colNames,
             head: E.value.head,
             body: E.value.body,
@@ -746,23 +750,23 @@ const bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
             onClose: o[6] || (o[6] = (l) => w.value.showTable = !1)
           }, {
-            th: $(({ th: l }) => [
-              x("div", {
+            th: C(({ th: l }) => [
+              $("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Ut)
+              }, null, 8, Bt)
             ]),
-            td: $(({ td: l }) => [
-              Ke(Se(l.name || l), 1)
+            td: C(({ td: l }) => [
+              Qe(Le(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : m("", !0)
-    ], 46, Rt));
+    ], 46, St));
   }
-}, Wt = /* @__PURE__ */ mt(zt, [["__scopeId", "data-v-2555e7ea"]]);
+}, Zt = /* @__PURE__ */ bt(Mt, [["__scopeId", "data-v-e82d69dc"]]);
 export {
-  Wt as default
+  Zt as default
 };