vue-data-ui 2.4.57 → 2.4.59

package/dist/{vue-ui-molecule-BvNh7REY.js → vue-ui-molecule-CpWWvLlc.js}

@@ -1,15 +1,15 @@
-import { toRef as ce, resolveComponent as de, 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-CI-N9klv.js";
-import { _ as mt } from "./Title-DLjHHdyq.js";
-import { u as bt, U as kt } from "./usePrinter-CXc8xCKk.js";
-import { D as Ct } from "./DataTable-DgbrnD__.js";
-import { _ as $t } from "./Tooltip-BDaa-67h.js";
-import Z from "./BaseIcon-9gdEHMWK.js";
-import xt from "./vue-ui-skeleton-owIhXtQF.js";
-import wt from "./vue-ui-accordion-CYLks1fW.js";
-import { u as Ae } from "./useNestedProp-D1eJ0dvv.js";
-import { _ as Pt } from "./PackageVersion-S3SzpuwC.js";
-import { P as Tt } from "./PenAndPaper-v846FwcH.js";
+import { toRef as ce, resolveComponent as de, openBlock as a, createElementBlock as r, Fragment as m, renderList as z, withModifiers as M, createBlock as R, createCommentVNode as h, createElementVNode as P, toDisplayString as Ie, normalizeStyle as _, createVNode as L, computed as N, onMounted as tt, ref as f, watch as ot, normalizeClass as Oe, unref as b, createSlots as lt, withCtx as $, renderSlot as k, 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 ht, r as pt, x as gt, y as yt } from "./index-B9RAElpI.js";
+import { _ as mt } from "./Title-zZtEcB9F.js";
+import { u as bt, U as kt } from "./usePrinter-CwTAwqtF.js";
+import { D as Ct } from "./DataTable-CFUKU8PU.js";
+import { _ as $t } from "./Tooltip-DDJ2Wvjy.js";
+import Z from "./BaseIcon-BbU81zOd.js";
+import wt from "./vue-ui-skeleton-DVYD_VSe.js";
+import xt from "./vue-ui-accordion-rNA598L6.js";
+import { u as Ae } from "./useNestedProp-DuruL3Nt.js";
+import { _ as Pt } from "./PackageVersion-C_FFs0BP.js";
+import { P as Tt } from "./PenAndPaper-Dx24BtRW.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 = {
@@ -41,35 +41,35 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(n, { emit: x }) {
-    const k = n;
+  setup(n, { emit: w }) {
+    const C = n;
     function c(s) {
-      x("zoom", s);
+      w("zoom", s);
     }
     function d(s) {
-      x("hover", s);
+      w("hover", s);
     }
-    return ce(k, "dataset").value.forEach((s) => {
+    return ce(C, "dataset").value.forEach((s) => {
       s.nodes && s.nodes.length > 0 && s.nodes.forEach((v) => {
         v.ancestor = s;
       });
     }), (s, v) => {
-      const S = de("RecursiveCircles", !0);
+      const O = de("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, (U, J) => (a(), r("circle", {
-            cx: U.x,
-            cy: U.y,
+          (a(!0), r(m, null, z(p.polygonPath.coordinates, (D, J) => (a(), r("circle", {
+            cx: D.x,
+            cy: D.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((D) => c(p), ["stop"]),
-            onMouseover: (D) => d(p),
-            onMouseleave: v[0] || (v[0] = (D) => d(null))
+            onClick: M((A) => c(p), ["stop"]),
+            onMouseover: (A) => d(p),
+            onMouseleave: v[0] || (v[0] = (A) => d(null))
           }, null, 40, St))), 256)),
-          p.nodes && p.nodes.length > 0 ? (a(), F(S, {
+          p.nodes && p.nodes.length > 0 ? (a(), R(O, {
             key: 0,
             dataset: p.nodes,
             color: n.color,
@@ -78,8 +78,8 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             hoveredUid: n.hoveredUid,
             onZoom: c,
             onHover: d
-          }, null, 8, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : y("", !0)
-        ], 64)) : y("", !0)
+          }, null, 8, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : h("", !0)
+        ], 64)) : h("", !0)
       ], 64))), 256);
     };
   }
@@ -105,12 +105,12 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         d.ancestor = c;
       });
     }), (c, d) => {
-      const L = de("RecursiveLinks", !0);
+      const U = de("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, S) => (a(), r(m, null, [
+          s.polygonPath && s.polygonPath.coordinates ? (a(!0), r(m, { key: 0 }, z(s.polygonPath.coordinates, (v, O) => (a(), r(m, null, [
             s.ancestor && s.ancestor.polygonPath ? (a(), r(m, { key: 0 }, [
-              w("line", {
+              P("line", {
                 x1: v.x,
                 y1: v.y,
                 x2: s.ancestor.polygonPath.coordinates[0].x,
@@ -118,7 +118,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
                 stroke: n.backgroundColor,
                 "stroke-width": s.circleRadius / 1.5
               }, null, 8, Lt),
-              w("line", {
+              P("line", {
                 x1: v.x,
                 y1: v.y,
                 x2: s.ancestor.polygonPath.coordinates[0].x,
@@ -126,18 +126,18 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
                 stroke: n.color,
                 "stroke-width": s.circleRadius / 2
               }, null, 8, Ut)
-            ], 64)) : y("", !0)
-          ], 64))), 256)) : y("", !0)
+            ], 64)) : h("", !0)
+          ], 64))), 256)) : h("", !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(), F(L, {
+            s.nodes && s.nodes.length > 0 ? (a(), R(U, {
               key: 0,
               dataset: s.nodes,
               color: n.color,
               backgroundColor: n.backgroundColor
-            }, null, 8, ["dataset", "color", "backgroundColor"])) : y("", !0)
-          ], 64)) : y("", !0)
+            }, null, 8, ["dataset", "color", "backgroundColor"])) : h("", !0)
+          ], 64)) : h("", !0)
         ], 64))), 256))
       ], 64);
     };
@@ -159,30 +159,30 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(n, { emit: x }) {
+  setup(n, { emit: w }) {
     return ce(n, "dataset").value.forEach((d) => {
-      d.nodes && d.nodes.length > 0 && d.nodes.forEach((L) => {
-        L.ancestor = d;
+      d.nodes && d.nodes.length > 0 && d.nodes.forEach((U) => {
+        U.ancestor = d;
       });
-    }), (d, L) => {
+    }), (d, U) => {
       const s = de("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, (S) => (a(), r("text", {
-            x: S.x,
-            y: S.y + v.circleRadius * 2,
+          (a(!0), r(m, null, z(v.polygonPath.coordinates, (O) => (a(), r("text", {
+            x: O.x,
+            y: O.y + v.circleRadius * 2,
             fill: n.color,
             "font-size": v.circleRadius,
             "text-anchor": "middle",
             style: { opacity: "0.8", "pointer-events": "none" }
           }, Ie(v.name), 9, At))), 256)),
-          v.nodes && v.nodes.length > 0 ? (a(), F(s, {
+          v.nodes && v.nodes.length > 0 ? (a(), R(s, {
             key: 0,
             dataset: v.nodes,
             color: n.color,
             hoveredUid: n.hoveredUid
-          }, null, 8, ["dataset", "color", "hoveredUid"])) : y("", !0)
-        ], 64)) : y("", !0)
+          }, null, 8, ["dataset", "color", "hoveredUid"])) : h("", !0)
+        ], 64)) : h("", !0)
       ], 64))), 256);
     };
   }
@@ -199,57 +199,57 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["moveLeft", "moveTop", "moveRight", "moveBottom", "reset"],
-  setup(n, { emit: x }) {
-    return (k, c) => (a(), r("div", {
+  setup(n, { emit: w }) {
+    return (C, c) => (a(), r("div", {
       style: _(`position: ${n.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${n.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
       "data-html2canvas-ignore": ""
     }, [
-      w("div", Nt, [
-        w("button", {
-          onClick: c[0] || (c[0] = M((d) => x("moveLeft"), ["stop"])),
+      P("div", Nt, [
+        P("button", {
+          onClick: c[0] || (c[0] = M((d) => w("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" }
         }, [
-          O(Z, {
+          L(Z, {
             stroke: n.color,
             name: "arrowLeft",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        w("button", {
-          onClick: c[1] || (c[1] = M((d) => x("moveTop"), ["stop"])),
+        P("button", {
+          onClick: c[1] || (c[1] = M((d) => w("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" }
         }, [
-          O(Z, {
+          L(Z, {
             stroke: n.color,
             name: "arrowTop",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        w("button", {
-          onClick: c[2] || (c[2] = M((d) => x("moveRight"), ["stop"])),
+        P("button", {
+          onClick: c[2] || (c[2] = M((d) => w("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" }
         }, [
-          O(Z, {
+          L(Z, {
             stroke: n.color,
             name: "arrowRight",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        w("button", {
-          onClick: c[3] || (c[3] = M((d) => x("moveBottom"), ["stop"])),
+        P("button", {
+          onClick: c[3] || (c[3] = M((d) => w("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" }
         }, [
-          O(Z, {
+          L(Z, {
             stroke: n.color,
             name: "arrowBottom",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
         ]),
-        w("button", {
-          onClick: c[4] || (c[4] = M((d) => x("reset"), ["stop"])),
+        P("button", {
+          onClick: c[4] || (c[4] = M((d) => w("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" }
         }, [
-          O(Z, {
+          L(Z, {
             stroke: n.color,
             name: "close",
             style: { cursor: "pointer" },
@@ -267,14 +267,14 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
 }, Ht = {
   key: 2,
   style: "width:100%;background:transparent;"
-}, Et = ["xmlns", "viewBox"], Vt = ["id"], Xt = ["stop-color"], Gt = ["stop-color"], jt = {
+}, Et = ["xmlns", "viewBox"], Vt = ["width", "height"], Xt = ["id"], jt = ["stop-color"], Gt = ["stop-color"], Yt = {
   key: 6,
   class: "vue-data-ui-watermark"
-}, Yt = {
+}, Wt = {
   key: 8,
   ref: "source",
   dir: "auto"
-}, Wt = ["innerHTML"], qt = {
+}, qt = ["innerHTML"], Zt = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -290,41 +290,41 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }
     }
   },
-  setup(n, { expose: x }) {
-    const k = n, { vue_ui_molecule: c } = nt(), d = N(() => !!k.dataset && k.dataset.length);
+  setup(n, { expose: w }) {
+    const C = n, { vue_ui_molecule: c } = nt(), d = N(() => !!C.dataset && C.dataset.length);
     tt(() => {
-      L();
+      U();
     });
-    function L() {
-      st(k.dataset) && rt({
+    function U() {
+      st(C.dataset) && rt({
         componentName: "VueUiMolecule",
         type: "dataset"
       });
     }
-    const s = f(Ue()), v = f(null), S = f(!1), p = f(""), U = f(null), J = f(null), D = f(!1), P = f(null), ve = f(null), ee = f(0), fe = f(0), pe = f(0), t = N({
+    const s = f(Ue()), v = f(null), O = f(!1), p = f(""), D = f(null), J = f(null), A = f(!1), T = f(null), ve = f(null), ee = f(0), fe = f(0), he = f(0), t = N({
       get: () => ye(),
       set: (e) => e
-    }), { userOptionsVisible: te, setUserOptionsVisibility: he, keepUserOptionState: ge } = Ft({ config: t.value });
+    }), { userOptionsVisible: te, setUserOptionsVisibility: pe, keepUserOptionState: ge } = Ft({ config: t.value });
     function ye() {
       const e = Ae({
-        userConfig: k.config,
+        userConfig: C.config,
         defaultConfig: c
       });
       return e.theme ? {
         ...Ae({
-          userConfig: it.vue_ui_molecule[e.theme] || k.config,
+          userConfig: it.vue_ui_molecule[e.theme] || C.config,
           defaultConfig: e
         }),
         customPalette: ut[e.theme] || De
       } : e;
     }
-    ot(() => k.config, (e) => {
-      t.value = ye(), te.value = !t.value.showOnChartHover, L(), fe.value += 1, pe.value += 1;
+    ot(() => C.config, (e) => {
+      t.value = ye(), te.value = !t.value.showOnChartHover, U(), fe.value += 1, he.value += 1;
     }, { deep: !0 });
     const { isPrinting: me, isImaging: be, generatePdf: ke, generateImage: Ce } = bt({
       elementId: `cluster_${s.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-molecule"
-    }), Ne = N(() => t.value.userOptions.show && !t.value.style.chart.title.text), ze = N(() => ct(t.value.customPalette)), T = f({
+    }), Ne = N(() => t.value.userOptions.show && !t.value.style.chart.title.text), ze = N(() => ct(t.value.customPalette)), F = f({
       showTable: t.value.table.show,
       showDataLabels: !0,
       showTooltip: t.value.style.chart.tooltip.show
@@ -333,7 +333,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       return Array.isArray(e) && e.length > 0 && e[0].nodes ? $e(e[0].nodes, o + 1) : o;
     }
     function Be() {
-      const e = $e(k.dataset);
+      const e = $e(C.dataset);
       let o = 100, l = o;
       for (let u = 0; u < e; u += 1)
         o /= 1, l += o;
@@ -342,8 +342,8 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         width: l
       };
     }
-    const A = f(Be()), oe = 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") {
+    const x = f(Be()), oe = f(`0 0 ${x.value.width} ${x.value.height}`);
+    function we(e, o = { x: -x.value.width / 2.43, y: x.value.height / 2 }, l = x.value.width / 1.1, u = 24, i = 0, g = 0, j = "#BBBBBB") {
       if (e && e.length > 0) {
         const ie = ft({
           plot: o,
@@ -351,19 +351,19 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           sides: e.length,
           rotation: i
         });
-        e.forEach((g, B) => {
-          const j = ie.coordinates[B];
+        e.forEach((y, B) => {
+          const G = ie.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 ue = !g.ancestor || !g.ancestor.ancestor ? h : 0;
-            g.nodes = xe(
-              g.nodes,
-              j,
+          if (y.ancestor ? y.ancestor.ancestor ? I = y.ancestor.color || j : (I = ze.value[g] || De[g] || j, g += 1) : I = j, y.polygonPath = {
+            coordinates: [G]
+          }, y.circleRadius = u, y.color = I, y.uid = Ue(), y.nodes && y.nodes.length > 0) {
+            const ue = !y.ancestor || !y.ancestor.ancestor ? g : 0;
+            y.nodes = we(
+              y.nodes,
+              G,
               l / 2.9,
               u / 2.2,
-              i + Math.PI * B / g.nodes.length,
+              i + Math.PI * B / y.nodes.length,
               ue,
               I
             );
@@ -375,48 +375,48 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     function Me(e) {
       const o = /* @__PURE__ */ new Set();
       function l(i) {
-        i.forEach((h) => {
-          h.color && !o.has(h.color) && o.add(h.color), h.nodes && h.nodes.length > 0 && l(h.nodes);
+        i.forEach((g) => {
+          g.color && !o.has(g.color) && o.add(g.color), g.nodes && g.nodes.length > 0 && l(g.nodes);
         });
       }
       l(e);
       const u = {};
-      return Array.from(o).forEach((i, h) => {
-        u[i] = `gradient_${h}`;
+      return Array.from(o).forEach((i, g) => {
+        u[i] = `gradient_${g}`;
       }), u;
     }
-    const He = N(() => Me(R.value)), R = N(() => xe(k.dataset));
+    const He = N(() => Me(S.value)), S = N(() => we(C.dataset));
     function le() {
-      D.value = !1, J.value = null, ve.value = null, P.value = null, ne({
+      A.value = !1, J.value = null, ve.value = null, T.value = null, ne({
         polygonPath: {
-          coordinates: [{ x: A.value.width / 2, y: A.value.height / 2 }]
+          coordinates: [{ x: x.value.width / 2, y: x.value.height / 2 }]
         },
         circleRadius: 24
       });
     }
     const ae = f(null);
     function ne(e) {
-      U.value.focus(), Le(() => {
+      D.value.focus(), Le(() => {
         ae.value && cancelAnimationFrame(ae.value);
-        const o = oe.value.split(" "), l = parseFloat(o[0]), u = parseFloat(o[1]), i = parseFloat(o[2]), h = parseFloat(o[3]), { x: G, y: ie } = e.polygonPath.coordinates[0], { circleRadius: g } = e, B = 8.34, j = G - g * B, I = ie - g * B, ue = 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 = (ue - i) / Y, et = (Ze - h) / Y;
+        const o = oe.value.split(" "), l = parseFloat(o[0]), u = parseFloat(o[1]), i = parseFloat(o[2]), g = parseFloat(o[3]), { x: j, y: ie } = e.polygonPath.coordinates[0], { circleRadius: y } = e, B = 8.34, G = j - y * B, I = ie - y * B, ue = y * B * 2, Ze = y * B * 2, Je = Math.sqrt((G - l) ** 2 + (I - u) ** 2), Y = Math.min(1200, Math.max(20, Math.floor(Je / 10))), Ke = (G - l) / Y, Qe = (I - u) / Y, _e = (ue - i) / Y, et = (Ze - g) / Y;
         let V = 0;
         function Se() {
-          oe.value = `${l + Ke * V} ${u + Qe * V} ${i + _e * V} ${h + et * V}`, V += t.value.style.chart.zoom.speed, V <= Y && (ae.value = requestAnimationFrame(Se));
+          oe.value = `${l + Ke * V} ${u + Qe * V} ${i + _e * V} ${g + et * V}`, V += t.value.style.chart.zoom.speed, V <= Y && (ae.value = requestAnimationFrame(Se));
         }
         Se();
       });
     }
     function Ee(e) {
-      J.value === e.uid ? le() : (J.value = e.uid, ve.value = e, P.value = {
+      J.value === e.uid ? le() : (J.value = e.uid, ve.value = e, T.value = {
         circleRadius: e.circleRadius,
         polygonPath: {
           coordinates: [{ x: e.polygonPath.coordinates[0].x, y: e.polygonPath.coordinates[0].y }]
         }
-      }, ne(e), D.value = e.uid !== R.value[0].uid);
+      }, ne(e), A.value = e.uid !== S.value[0].uid);
     }
     function Ve(e) {
       if (e.target.nodeName !== "circle")
-        le(), D.value = !1;
+        le(), A.value = !1;
       else
         return;
     }
@@ -425,21 +425,21 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       se.value = {
         datapoint: e,
         seriesIndex: -1,
-        series: R.value,
+        series: S.value,
         config: t.value
       };
       const o = t.value.style.chart.tooltip.customFormat;
       if (gt(o) && yt(() => o({
         seriesIndex: -1,
         datapoint: e,
-        series: R.value,
+        series: S.value,
         config: t.value
       })))
         p.value = o({
           seriesIndex: -1,
           // well, ok
           datapoint: e,
-          series: R.value,
+          series: S.value,
           config: t.value
         });
       else {
@@ -447,34 +447,34 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         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 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);
+    const xe = f(null), X = f(null);
+    function je(e) {
+      xe.value = e, e ? (O.value = !0, Xe(e), X.value = e.uid) : (O.value = !1, p.value = "", X.value = null);
     }
     function K(e) {
-      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), ne(P.value);
+      e === "right" && (T.value.polygonPath.coordinates[0].x += T.value.circleRadius), e === "left" && (T.value.polygonPath.coordinates[0].x -= T.value.circleRadius), e === "top" && (T.value.polygonPath.coordinates[0].y -= T.value.circleRadius), e === "bottom" && (T.value.polygonPath.coordinates[0].y += T.value.circleRadius), ne(T.value);
     }
-    function je(e) {
+    function Ge(e) {
       const o = [];
       function l(u) {
         u.forEach((i) => {
-          const h = {
+          const g = {
             name: i.name,
             details: i.details || "-",
             ancestor: i.ancestor && i.ancestor.name || "-",
             color: i.color || ""
           };
-          o.push(h), i.nodes && i.nodes.length > 0 && l(i.nodes, i.name);
+          o.push(g), i.nodes && i.nodes.length > 0 && l(i.nodes, i.name);
         });
       }
       return l(e), o;
     }
-    const Ye = N(() => je(R.value)), H = N(() => {
+    const Ye = N(() => Ge(S.value)), H = N(() => {
       const e = [
         t.value.table.translations.nodeName,
         t.value.table.translations.details,
         t.value.table.translations.ancestor
-      ], o = Ye.value.map((i, h) => [
+      ], o = Ye.value.map((i, g) => [
         {
           color: i.color,
           name: i.name
@@ -507,31 +507,31 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     });
     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" });
+        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 = ht(o);
+        pt({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
     function We() {
-      return R.value;
+      return S.value;
     }
     const E = f(!1);
     function qe(e) {
       E.value = e, ee.value += 1;
     }
     function Te() {
-      T.value.showTable = !T.value.showTable;
+      F.value.showTable = !F.value.showTable;
     }
     function Fe() {
-      T.value.showDataLabels = !T.value.showDataLabels;
+      F.value.showDataLabels = !F.value.showDataLabels;
     }
     function Re() {
-      T.value.showTooltip = !T.value.showTooltip;
+      F.value.showTooltip = !F.value.showTooltip;
     }
     const Q = f(!1);
     function re() {
       Q.value = !Q.value;
     }
-    return x({
+    return w({
       getData: We,
       generatePdf: ke,
       generateCsv: Pe,
@@ -542,26 +542,26 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       toggleAnnotator: re
     }), (e, o) => (a(), r("div", {
       ref_key: "moleculeChart",
-      ref: U,
+      ref: D,
       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);
+        xe.value = null, X.value = null, b(pe)(!1);
       }),
-      onMouseenter: o[8] || (o[8] = () => b(he)(!0))
+      onMouseenter: o[8] || (o[8] = () => b(pe)(!0))
     }, [
-      t.value.userOptions.buttons.annotator ? (a(), F(Tt, {
+      t.value.userOptions.buttons.annotator ? (a(), R(Tt, {
         key: 0,
-        parent: U.value,
+        parent: D.value,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
         active: Q.value,
         onClose: re
-      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
-      Ne.value ? (a(), r("div", Mt, null, 512)) : y("", !0),
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : h("", !0),
+      Ne.value ? (a(), r("div", Mt, null, 512)) : h("", !0),
       t.value.style.chart.title.text ? (a(), r("div", Ht, [
-        (a(), F(mt, {
+        (a(), R(mt, {
           key: `title_${fe.value}`,
           config: {
             title: {
@@ -574,8 +574,8 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             }
           }
         }, null, 8, ["config"]))
-      ])) : y("", !0),
-      t.value.userOptions.show && d.value && (b(ge) || b(te)) ? (a(), F(kt, {
+      ])) : h("", !0),
+      t.value.userOptions.show && d.value && (b(ge) || b(te)) ? (a(), R(kt, {
         ref_key: "details",
         ref: v,
         key: `user_options_${ee.value}`,
@@ -591,9 +591,9 @@ const St = ["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: T.value.showTooltip,
+        isTooltip: F.value.showTooltip,
         titles: { ...t.value.userOptions.buttonTitles },
-        chartElement: U.value,
+        chartElement: D.value,
         position: t.value.userOptions.position,
         hasAnnotator: t.value.userOptions.buttons.annotator,
         isAnnotation: Q.value,
@@ -611,61 +611,61 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }, lt({ _: 2 }, [
         e.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: C(() => [
-            $(e.$slots, "optionTooltip", {}, void 0, !0)
+          fn: $(() => [
+            k(e.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: C(() => [
-            $(e.$slots, "optionPdf", {}, void 0, !0)
+          fn: $(() => [
+            k(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: C(() => [
-            $(e.$slots, "optionCsv", {}, void 0, !0)
+          fn: $(() => [
+            k(e.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
-          fn: C(() => [
-            $(e.$slots, "optionImg", {}, void 0, !0)
+          fn: $(() => [
+            k(e.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionTable ? {
           name: "optionTable",
-          fn: C(() => [
-            $(e.$slots, "optionTable", {}, void 0, !0)
+          fn: $(() => [
+            k(e.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: C(() => [
-            $(e.$slots, "optionLabels", {}, void 0, !0)
+          fn: $(() => [
+            k(e.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: C(({ toggleFullscreen: l, isFullscreen: u }) => [
-            $(e.$slots, "optionFullscreen", W(q({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
+          fn: $(({ toggleFullscreen: l, isFullscreen: u }) => [
+            k(e.$slots, "optionFullscreen", W(q({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: C(({ toggleAnnotator: l, isAnnotator: u }) => [
-            $(e.$slots, "optionAnnotator", W(q({ toggleAnnotator: l, isAnnotator: u })), void 0, !0)
+          fn: $(({ toggleAnnotator: l, isAnnotator: u }) => [
+            k(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", "style"])) : y("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
       d.value ? (a(), r("svg", {
         key: 4,
         xmlns: b(dt),
@@ -674,8 +674,20 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         style: _(`overflow: hidden; background:transparent;color:${t.value.style.chart.color}`),
         onClick: o[0] || (o[0] = M((l) => Ve(l), ["stop"]))
       }, [
-        O(Pt),
-        w("defs", null, [
+        L(Pt),
+        e.$slots["chart-background"] ? (a(), r("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: x.value.width <= 0 ? 10 : x.value.width,
+          height: x.value.height <= 0 ? 10 : x.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          k(e.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Vt)) : h("", !0),
+        P("defs", null, [
           (a(!0), r(m, null, z(Object.keys(He.value), (l) => (a(), r("radialGradient", {
             id: `gradient_${l}`,
             cx: "50%",
@@ -684,38 +696,38 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
             fx: "50%",
             fy: "50%"
           }, [
-            w("stop", {
+            P("stop", {
               offset: "0%",
               "stop-color": b(vt)(l, 0.5)
-            }, null, 8, Xt),
-            w("stop", {
+            }, null, 8, jt),
+            P("stop", {
               offset: "100%",
               "stop-color": l
             }, null, 8, Gt)
-          ], 8, Vt))), 256))
+          ], 8, Xt))), 256))
         ]),
-        O(Dt, {
-          dataset: R.value,
+        L(Dt, {
+          dataset: S.value,
           color: t.value.style.chart.links.stroke,
           backgroundColor: t.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        O(Ot, {
-          dataset: R.value,
+        L(Ot, {
+          dataset: S.value,
           hoveredUid: X.value,
           stroke: t.value.style.chart.nodes.stroke,
           strokeHovered: t.value.style.chart.nodes.strokeHovered,
           onZoom: Ee,
-          onHover: Ge
+          onHover: je
         }, null, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        T.value.showDataLabels ? (a(), F(It, {
-          key: 0,
-          dataset: R.value,
+        F.value.showDataLabels ? (a(), R(It, {
+          key: 1,
+          dataset: S.value,
           color: t.value.style.chart.color,
           hoveredUid: X.value
-        }, null, 8, ["dataset", "color", "hoveredUid"])) : y("", !0),
-        $(e.$slots, "svg", { svg: A.value }, void 0, !0)
-      ], 14, Et)) : y("", !0),
-      D.value ? (a(), F(zt, {
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : h("", !0),
+        k(e.$slots, "svg", { svg: x.value }, void 0, !0)
+      ], 14, Et)) : h("", !0),
+      A.value ? (a(), R(zt, {
         key: `direction_pad_${ee.value}`,
         color: t.value.style.chart.color,
         isFullscreen: E.value,
@@ -724,13 +736,13 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         onMoveTop: o[3] || (o[3] = (l) => K("top")),
         onMoveBottom: o[4] || (o[4] = (l) => K("bottom")),
         onReset: o[5] || (o[5] = (l) => {
-          le(), D.value = !1;
+          le(), A.value = !1;
         })
-      }, null, 8, ["color", "isFullscreen"])) : y("", !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(), F(xt, {
+      }, null, 8, ["color", "isFullscreen"])) : h("", !0),
+      e.$slots.watermark ? (a(), r("div", Yt, [
+        k(e.$slots, "watermark", W(q({ isPrinting: b(me) || b(be) })), void 0, !0)
+      ])) : h("", !0),
+      d.value ? h("", !0) : (a(), R(wt, {
         key: 7,
         config: {
           type: "molecule",
@@ -742,11 +754,11 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }
       }, null, 8, ["config"])),
-      e.$slots.source ? (a(), r("div", Yt, [
-        $(e.$slots, "source", {}, void 0, !0)
-      ], 512)) : y("", !0),
-      O($t, {
-        show: T.value.showTooltip && S.value,
+      e.$slots.source ? (a(), r("div", Wt, [
+        k(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      L($t, {
+        show: F.value.showTooltip && O.value,
         backgroundColor: t.value.style.chart.tooltip.backgroundColor,
         color: t.value.style.chart.tooltip.color,
         borderRadius: t.value.style.chart.tooltip.borderRadius,
@@ -756,24 +768,24 @@ const St = ["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: U.value,
+        parent: D.value,
         content: p.value,
         isFullscreen: E.value,
         isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function"
       }, {
-        "tooltip-before": C(() => [
-          $(e.$slots, "tooltip-before", W(q({ ...se.value })), void 0, !0)
+        "tooltip-before": $(() => [
+          k(e.$slots, "tooltip-before", W(q({ ...se.value })), void 0, !0)
         ]),
-        "tooltip-after": C(() => [
-          $(e.$slots, "tooltip-after", W(q({ ...se.value })), void 0, !0)
+        "tooltip-after": $(() => [
+          k(e.$slots, "tooltip-after", W(q({ ...se.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      d.value ? (a(), F(wt, {
+      d.value ? (a(), R(xt, {
         key: 9,
         hideDetails: "",
         config: {
-          open: T.value.showTable,
+          open: F.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: t.value.style.chart.backgroundColor,
@@ -785,33 +797,33 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }
       }, {
-        content: C(() => [
-          (a(), F(Ct, {
-            key: `table_${pe.value}`,
+        content: $(() => [
+          (a(), R(Ct, {
+            key: `table_${he.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: o[6] || (o[6] = (l) => T.value.showTable = !1)
+            onClose: o[6] || (o[6] = (l) => F.value.showTable = !1)
           }, {
-            th: C(({ th: l }) => [
-              w("div", {
+            th: $(({ th: l }) => [
+              P("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Wt)
+              }, null, 8, qt)
             ]),
-            td: C(({ td: l }) => [
+            td: $(({ td: l }) => [
               at(Ie(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : y("", !0)
+      }, 8, ["config"])) : h("", !0)
     ], 46, Bt));
   }
-}, uo = /* @__PURE__ */ Rt(qt, [["__scopeId", "data-v-8277f51b"]]);
+}, co = /* @__PURE__ */ Rt(Zt, [["__scopeId", "data-v-84f8e29e"]]);
 export {
-  uo as default
+  co as default
 };