vue-data-ui 3.7.9 → 3.7.10

package/dist/{vue-ui-molecule-BtdwWTBN.js → vue-ui-molecule-qoA-oi2j.js}

@@ -1,52 +1,52 @@
-import { useCssVars as Do, defineAsyncComponent as f, computed as h, onMounted as Oo, ref as u, toRefs as So, watch as H, nextTick as x, createElementBlock as y, openBlock as d, unref as a, normalizeStyle as M, normalizeClass as De, createBlock as T, createCommentVNode as A, createVNode as O, withCtx as r, renderSlot as i, normalizeProps as p, guardReactiveProps as C, createSlots as Oe, createElementVNode as S, Fragment as Eo, renderList as Bo, resolveDynamicComponent as Po, mergeProps as Io, createTextVNode as Se, toDisplayString as Ee } from "vue";
-import { o as No, g as Lo, c as Be, t as Ro, i as Uo, p as Pe, j as Ho, ab as xo, X as Mo, n as zo, e as Vo, l as Ie, u as Go, q as jo, x as Wo, R as Xo } from "./lib-DUaaQGCv.js";
-import { u as Yo, a as oe } from "./useNestedProp-xVOMUtFl.js";
-import { u as Zo, B as qo } from "./BaseScanner-BgWxam9d.js";
-import { u as Jo } from "./usePrinter-BdVu83IN.js";
-import { u as Ko } from "./useSvgExport-DrjCWun4.js";
-import { u as Qo } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as et } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as ot } from "./useChartAccessibility-9icAAmYg.js";
-import tt from "./img-BYzbY8TZ.js";
-import { u as lt } from "./usePanZoom-BVca3eMk.js";
-import { _ as at } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nodes: { stroke: "#4A4A4A", strokeHovered: "#CCCCCC" }, links: { stroke: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Le = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", nodes: { stroke: "#333333", strokeHovered: "#FFFFFF" }, links: { stroke: "#333333" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Re = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", nodes: { stroke: "#333333", strokeHovered: "#FFF8E1" }, links: { stroke: "#333333" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ue = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", nodes: { stroke: "#1A1A1A", strokeHovered: "#00FF00" }, links: { stroke: "#333333" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, He = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", nodes: { stroke: "#fbfafa", strokeHovered: "#5E5E5E" }, links: { stroke: "#e8ede1" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, xe = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", nodes: { stroke: "#61747E", strokeHovered: "#404C4D" }, links: { stroke: "#BBCBC7" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Me = {
+import { useCssVars as Do, defineAsyncComponent as p, computed as C, onMounted as So, ref as c, toRefs as Eo, watch as U, nextTick as z, createElementBlock as A, openBlock as v, unref as a, normalizeStyle as H, normalizeClass as De, createBlock as T, createCommentVNode as y, createVNode as D, withCtx as r, renderSlot as i, normalizeProps as f, guardReactiveProps as h, createSlots as Se, createElementVNode as S, Fragment as Bo, renderList as Po, resolveDynamicComponent as Io, mergeProps as No, createTextVNode as Ee, toDisplayString as Be } from "vue";
+import { o as Lo, g as Zo, c as Pe, t as Ro, i as Uo, p as Ie, j as zo, ab as Ho, X as Mo, n as xo, e as Vo, l as Ne, u as Go, q as jo, x as Wo, R as Xo } from "./lib-DUaaQGCv.js";
+import { u as Yo, a as oe } from "./useNestedProp-BjZ1Lg9E.js";
+import { u as qo, B as Jo } from "./BaseScanner-BgWxam9d.js";
+import { u as Ko } from "./usePrinter-BdVu83IN.js";
+import { u as Qo } from "./useSvgExport-DrjCWun4.js";
+import { u as et } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as ot } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as tt } from "./useChartAccessibility-9icAAmYg.js";
+import lt from "./img-BYzbY8TZ.js";
+import { u as at } from "./usePanZoom-DZtyJi5q.js";
+import { _ as st } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nodes: { stroke: "#4A4A4A", strokeHovered: "#CCCCCC" }, links: { stroke: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Ze = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", nodes: { stroke: "#333333", strokeHovered: "#FFFFFF" }, links: { stroke: "#333333" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Re = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", nodes: { stroke: "#333333", strokeHovered: "#FFF8E1" }, links: { stroke: "#333333" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ue = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", nodes: { stroke: "#1A1A1A", strokeHovered: "#00FF00" }, links: { stroke: "#333333" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, ze = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", nodes: { stroke: "#fbfafa", strokeHovered: "#5E5E5E" }, links: { stroke: "#e8ede1" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, He = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", nodes: { stroke: "#61747E", strokeHovered: "#404C4D" }, links: { stroke: "#BBCBC7" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Me = {
   default: {},
-  dark: Ne,
-  celebration: Le,
+  dark: Le,
+  celebration: Ze,
   celebrationNight: Re,
   hack: Ue,
-  zen: He,
-  concrete: xe
-}, Et = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  zen: ze,
+  concrete: He
+}, Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: Le,
+  celebration: Ze,
   celebrationNight: Re,
-  concrete: xe,
-  dark: Ne,
+  concrete: He,
+  dark: Le,
   default: Me,
   hack: Ue,
-  zen: He
-}, Symbol.toStringTag, { value: "Module" })), st = ["id"], nt = {
+  zen: ze
+}, Symbol.toStringTag, { value: "Module" })), nt = ["id"], rt = {
   key: 1,
   ref: "noTitle",
   class: "vue-data-ui-no-title-space",
   style: "height:36px; width: 100%;background:transparent"
-}, rt = {
+}, it = {
   key: 2,
   style: "width:100%;background:transparent;"
-}, it = ["xmlns", "viewBox"], ut = ["width", "height"], ct = ["id"], dt = ["stop-color"], vt = ["stop-color"], ft = {
+}, ut = ["xmlns", "viewBox"], ct = ["width", "height"], dt = ["id"], vt = ["stop-color"], ft = ["stop-color"], ht = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, ht = {
+}, pt = {
   key: 5,
   "data-dom-to-png-ignore": "",
   class: "reset-wrapper"
-}, pt = {
+}, Ct = {
   key: 6,
   ref: "source",
   dir: "auto"
-}, Ct = ["innerHTML"], bt = {
+}, gt = ["innerHTML"], bt = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -63,26 +63,26 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
     }
   },
   emits: ["selectNode"],
-  setup(ze, { expose: Ve, emit: Ge }) {
+  setup(xe, { expose: Ve, emit: Ge }) {
     Do((o) => ({
-      v679f6f1a: o.slicerColor
+      v4cb447ec: o.slicerColor
     }));
-    const je = f(() => import("./Title-CmZh1pjz.js")), We = f(() => import("./Tooltip-De7i-i20.js")), te = f(() => import("./BaseIcon-5acZpJev.js")), Xe = f(() => import("./vue-ui-accordion-Cxz5Cxwj.js")), Ye = f(() => import("./DataTable-ScRMrNB6.js")), Ze = f(() => import("./PenAndPaper-Bfbd6BHc.js")), qe = f(() => import("./UserOptions-D-GV6kfB.js")), Je = f(() => import("./PackageVersion-D2zuSCLX.js")), Ke = f(() => import("./RecursiveLinks-00zGWPf9.js")), Qe = f(() => import("./RecursiveLabels-Bgcv0pzu.js")), eo = f(() => import("./RecursiveCircles-BcLb1aRS.js")), oo = f(() => import("./BaseDraggableDialog-B8FpOTTF.js")), { vue_ui_molecule: to } = Yo(), { isThemeValid: lo, warnInvalidTheme: ao } = Qo(), w = ze, so = Ge, le = h(() => !!w.dataset && w.dataset.length);
-    Oo(() => {
+    const je = p(() => import("./Title-BwhstTFA.js")), We = p(() => import("./Tooltip-De7i-i20.js")), te = p(() => import("./BaseIcon-Dl4VBlHV.js")), Xe = p(() => import("./vue-ui-accordion-BXTVRRX7.js")), Ye = p(() => import("./DataTable-Ho3Bf5oq.js")), qe = p(() => import("./PenAndPaper-kymjF6_b.js")), Je = p(() => import("./UserOptions-DgscxIaa.js")), Ke = p(() => import("./PackageVersion-BTPIkPFM.js")), Qe = p(() => import("./RecursiveLinks-Da489v6n.js")), eo = p(() => import("./RecursiveLabels-DxmctYbA.js")), oo = p(() => import("./RecursiveCircles-CM4bn2Vg.js")), to = p(() => import("./BaseDraggableDialog-BDY-Jn9S.js")), { vue_ui_molecule: lo } = Yo(), { isThemeValid: ao, warnInvalidTheme: so } = et(), w = xe, no = Ge, le = C(() => !!w.dataset && w.dataset.length);
+    So(() => {
       ae();
     });
-    const no = h(() => e.value.debug);
+    const ro = C(() => e.value.debug);
     function ae() {
-      No(w.dataset) && Lo({
+      Lo(w.dataset) && Zo({
         componentName: "VueUiMolecule",
         type: "dataset",
-        debug: no.value
+        debug: ro.value
       });
     }
-    const z = u(Be()), V = u(!1), N = u(""), $ = u(null), se = u(0), ne = u(0), re = u(0), E = u(null), G = u(null), e = u(Y()), { loading: j, FINAL_DATASET: W } = Zo({
-      ...So(w),
+    const M = c(Pe()), x = c(!1), L = c(""), $ = c(null), se = c(0), ne = c(0), re = c(0), E = c(null), V = c(null), e = c(X()), { loading: G, FINAL_DATASET: j } = qo({
+      ...Eo(w),
       FINAL_CONFIG: e,
-      prepareConfig: Y,
+      prepareConfig: X,
       skeletonDataset: [
         {
           name: "_",
@@ -135,114 +135,116 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           }
         }
       })
-    }), { userOptionsVisible: X, setUserOptionsVisibility: ie, keepUserOptionState: ue } = et({ config: e.value }), { svgRef: L } = ot({ config: e.value.style.chart.title });
-    function Y() {
+    }), { userOptionsVisible: W, setUserOptionsVisibility: ie, keepUserOptionState: ue } = ot({ config: e.value }), { svgRef: B } = tt({ config: e.value.style.chart.title });
+    function X() {
       const o = oe({
         userConfig: w.config,
-        defaultConfig: to
+        defaultConfig: lo
       }), l = o.theme;
       if (!l) return o;
-      if (!lo.value(o))
-        return ao(o), o;
+      if (!ao.value(o))
+        return so(o), o;
       const t = oe({
         userConfig: Me[l] || w.config,
         defaultConfig: o
-      }), n = oe({
+      }), s = oe({
         userConfig: w.config,
         defaultConfig: t
       });
       return {
-        ...n,
-        customPalette: n.customPalette.length ? n.customPalette : Uo[l] || Pe
+        ...s,
+        customPalette: s.customPalette.length ? s.customPalette : Uo[l] || Ie
       };
     }
-    H(() => w.config, (o) => {
-      e.value = Y(), X.value = !e.value.userOptions.showOnChartHover, ae(), ne.value += 1, re.value += 1, v.value.showTable = e.value.table.show, v.value.showTooltip = e.value.style.chart.tooltip.show;
+    U(() => w.config, (o) => {
+      e.value = X(), W.value = !e.value.userOptions.showOnChartHover, ae(), ne.value += 1, re.value += 1, u.value.showTable = e.value.table.show, u.value.showTooltip = e.value.style.chart.tooltip.show, u.value.showZoom = e.value.style.chart.zoom.show;
     }, { deep: !0 });
-    const ce = u(0), ro = () => {
+    const ce = c(0), io = () => {
       ce.value += 1;
     };
-    H([() => j.value, () => W.value], async ([o]) => {
-      o || (await x(), b.value = Ce(), await x(), ro(), await x(), Ao({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
+    U([() => G.value, () => j.value], async ([o]) => {
+      o || (await z(), g.value = Ce(), await z(), io(), await z(), Ao({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
     }, { flush: "post", deep: !1 });
-    const { isPrinting: de, isImaging: ve, generatePdf: fe, generateImage: he } = Jo({
-      elementId: `cluster_${z.value}`,
+    const { isPrinting: de, isImaging: ve, generatePdf: fe, generateImage: he } = Ko({
+      elementId: `cluster_${M.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-molecule",
       options: e.value.userOptions.print
-    }), io = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), uo = h(() => Ho(e.value.customPalette)), v = u({
+    }), uo = C(() => e.value.userOptions.show && !e.value.style.chart.title.text), co = C(() => zo(e.value.customPalette)), u = c({
       showTable: e.value.table.show,
       showDataLabels: !0,
-      showTooltip: e.value.style.chart.tooltip.show
+      showTooltip: e.value.style.chart.tooltip.show,
+      showZoom: e.value.style.chart.zoom.show
     });
-    H(e, () => {
-      v.value = {
+    U(e, () => {
+      u.value = {
         showTable: e.value.table.show,
         showDataLabels: !0,
-        showTooltip: e.value.style.chart.tooltip.show
+        showTooltip: e.value.style.chart.tooltip.show,
+        showZoom: e.value.style.chart.zoom.show
       };
     }, { immediate: !0 });
     function pe(o, l = 0) {
       return Array.isArray(o) && o.length > 0 && o[0].nodes ? pe(o[0].nodes, l + 1) : l;
     }
     function Ce() {
-      const o = pe(W.value);
+      const o = pe(j.value);
       let l = 100, t = l;
-      for (let n = 0; n < o; n += 1)
+      for (let s = 0; s < o; s += 1)
         l /= 1, t += l;
       return {
         height: t,
         width: t
       };
     }
-    const b = u(Ce());
-    function be(o, l = { x: -b.value.width / 2.43, y: b.value.height / 2 }, t = b.value.width / 1.1, n = 24, s = 0, c = 0, g = "#BBBBBB", Q = 0) {
+    const g = c(Ce());
+    function ge(o, l = { x: -g.value.width / 2.43, y: g.value.height / 2 }, t = g.value.width / 1.1, s = 24, n = 0, d = 0, b = "#BBBBBB", Q = 0) {
       if (!Array.isArray(o) || o.length === 0) return o;
-      const _o = Vo({
+      const Oo = Vo({
         plot: l,
         radius: t,
         sides: o.length,
-        rotation: s
+        rotation: n
       });
-      return o.forEach((m, Te) => {
-        const Fe = _o.coordinates[Te], _e = m.color ? (() => {
-          let ee = Ie(m.color);
+      return o.forEach((m, Fe) => {
+        const _e = Oo.coordinates[Fe], Oe = m.color ? (() => {
+          let ee = Ne(m.color);
           return ee.startsWith("#") ? ee : `#${ee}`;
         })() : null;
-        let D;
-        _e ? D = _e : Q === 0 ? D = g : Q === 1 ? (D = uo.value[c] || Pe[c] || g, c += 1) : D = g, m.polygonPath = { coordinates: [Fe] }, m.circleRadius = n, m.color = D, m.uid = Be(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = be(
+        let O;
+        Oe ? O = Oe : Q === 0 ? O = b : Q === 1 ? (O = co.value[d] || Ie[d] || b, d += 1) : O = b, m.polygonPath = { coordinates: [_e] }, m.circleRadius = s, m.color = O, m.uid = Pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = ge(
           m.nodes,
-          Fe,
+          _e,
           t / 2.9,
-          n / 2.2,
-          s + Math.PI * Te / m.nodes.length,
-          c,
-          D,
+          s / 2.2,
+          n + Math.PI * Fe / m.nodes.length,
+          d,
+          O,
           Q + 1
         ));
       }), o;
     }
-    function co(o) {
+    function vo(o) {
       const l = /* @__PURE__ */ new Set();
-      function t(s) {
-        s.forEach((c) => {
-          if (!c.color) return;
-          let g = c.color;
-          /^#?[0-9A-F]{6}$/i.test(g) || (g = Ie(g)), g.startsWith("#") || (g = `#${g}`), l.add(g), Array.isArray(c.nodes) && c.nodes.length && t(c.nodes);
+      function t(n) {
+        n.forEach((d) => {
+          if (!d.color) return;
+          let b = d.color;
+          /^#?[0-9A-F]{6}$/i.test(b) || (b = Ne(b)), b.startsWith("#") || (b = `#${b}`), l.add(b), Array.isArray(d.nodes) && d.nodes.length && t(d.nodes);
         });
       }
       t(o);
-      const n = {};
-      return Array.from(l).forEach((s) => {
-        const c = s.slice(1);
-        n[s] = `gradient_${c}`;
-      }), n;
+      const s = {};
+      return Array.from(l).forEach((n) => {
+        const d = n.slice(1);
+        s[n] = `gradient_${d}`;
+      }), s;
     }
-    const vo = h(() => co(k.value)), k = h(() => {
-      const o = xo(W.value);
-      return be(o);
-    }), Z = u(null);
-    function fo(o) {
-      Z.value = {
+    const fo = C(() => vo(k.value)), k = C(() => {
+      const o = Ho(j.value);
+      return ge(o);
+    }), Y = c(null);
+    function ho(o) {
+      Y.value = {
         datapoint: o,
         seriesIndex: -1,
         series: k.value,
@@ -255,7 +257,7 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         series: k.value,
         config: e.value
       })))
-        N.value = l({
+        L.value = l({
           seriesIndex: -1,
           // well, ok
           datapoint: o,
@@ -264,40 +266,40 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         });
       else {
         let t = "";
-        t += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${o.color}">⬤</div><div>${o.name}</div></div>`, o.details && (t += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${o.details}</div>`), N.value = `<div style="font-family:inherit">${t}</div>`;
+        t += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${o.color}">⬤</div><div>${o.name}</div></div>`, o.details && (t += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${o.details}</div>`), L.value = `<div style="font-family:inherit">${t}</div>`;
       }
     }
-    const R = u(null), B = u(null), ge = u(null);
-    function ho(o) {
-      ge.value = R.value, R.value = o, o ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ge.value || R.value, seriesIndex: -1 }), o ? (V.value = !0, fo(o), B.value = o.uid) : (V.value = !1, N.value = "", B.value = null);
-    }
+    const Z = c(null), P = c(null), be = c(null);
     function po(o) {
+      be.value = Z.value, Z.value = o, o ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: be.value || Z.value, seriesIndex: -1 }), o ? (x.value = !0, ho(o), P.value = o.uid) : (x.value = !1, L.value = "", P.value = null);
+    }
+    function Co(o) {
       const l = [];
-      function t(n) {
-        n.forEach((s) => {
-          const c = {
-            name: s.name,
-            details: s.details || "-",
-            ancestor: s.ancestor && s.ancestor.name || "-",
-            color: s.color || ""
+      function t(s) {
+        s.forEach((n) => {
+          const d = {
+            name: n.name,
+            details: n.details || "-",
+            ancestor: n.ancestor && n.ancestor.name || "-",
+            color: n.color || ""
           };
-          l.push(c), s.nodes && s.nodes.length > 0 && t(s.nodes, s.name);
+          l.push(d), n.nodes && n.nodes.length > 0 && t(n.nodes, n.name);
         });
       }
       return t(o), l;
     }
-    const Co = h(() => po(k.value)), F = h(() => {
+    const go = C(() => Co(k.value)), F = C(() => {
       const o = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
-      ], l = Co.value.map((s, c) => [
+      ], l = go.value.map((n, d) => [
         {
-          color: s.color,
-          name: s.name
+          color: n.color,
+          name: n.name
         },
-        s.details,
-        s.ancestor || ""
+        n.details,
+        n.ancestor || ""
       ]), t = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -310,7 +312,7 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           outline: e.value.table.td.outline
         },
         breakpoint: e.value.table.responsiveBreakpoint
-      }, n = [
+      }, s = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
@@ -319,60 +321,63 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         head: o,
         body: l,
         config: t,
-        colNames: n
+        colNames: s
       };
     });
     function q(o = null) {
-      x(() => {
-        const l = F.value.body.map((s, c) => [[s[0].name], [s[1]], [s[2]]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...F.value.head]]].concat(l), n = Go(t);
-        o ? o(n) : jo({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+      z(() => {
+        const l = F.value.body.map((n, d) => [[n[0].name], [n[1]], [n[2]]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...F.value.head]]].concat(l), s = Go(t);
+        o ? o(s) : jo({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
     function bo() {
       return k.value;
     }
-    const _ = u(!1);
+    const _ = c(!1);
     function me(o) {
       _.value = o, se.value += 1;
     }
-    function Ae() {
-      v.value.showTable = !v.value.showTable;
-    }
     function ye() {
-      v.value.showDataLabels = !v.value.showDataLabels;
+      u.value.showTable = !u.value.showTable;
+    }
+    function Ae() {
+      u.value.showDataLabels = !u.value.showDataLabels;
     }
     function ke() {
-      v.value.showTooltip = !v.value.showTooltip;
+      u.value.showTooltip = !u.value.showTooltip;
     }
-    const P = u(!1);
+    function we() {
+      u.value.showZoom = !u.value.showZoom;
+    }
+    const I = c(!1);
     function J() {
-      P.value = !P.value;
+      I.value = !I.value;
     }
-    const go = h(() => !P.value), { viewBox: U, resetZoom: K, isZoom: mo, setInitialViewBox: Ao } = lt(L, {
+    const mo = C(() => !I.value && u.value.showZoom), { viewBox: R, resetZoom: K, isZoom: yo, setInitialViewBox: Ao } = at(B, {
       x: 0,
       y: 0,
-      width: Math.max(10, b.value.width),
-      height: Math.max(10, b.value.height)
-    }, e.value.style.chart.zoom.speed, go);
-    function yo(o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: -1 }), so("selectNode", o);
+      width: Math.max(10, g.value.width),
+      height: Math.max(10, g.value.height)
+    }, e.value.style.chart.zoom.speed, mo);
+    function ko(o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: -1 }), no("selectNode", o);
     }
-    async function ko({ scale: o = 2 } = {}) {
+    async function wo({ scale: o = 2 } = {}) {
       if (!$.value) return;
-      const { width: l, height: t } = $.value.getBoundingClientRect(), n = l / t, { imageUri: s, base64: c } = await tt({ domElement: $.value, base64: !0, img: !0, scale: o });
+      const { width: l, height: t } = $.value.getBoundingClientRect(), s = l / t, { imageUri: n, base64: d } = await lt({ domElement: $.value, base64: !0, img: !0, scale: o });
       return {
-        imageUri: s,
-        base64: c,
+        imageUri: n,
+        base64: d,
         title: e.value.style.chart.title.text,
         width: l,
         height: t,
-        aspectRatio: n
+        aspectRatio: s
       };
     }
-    const I = h(() => {
-      const o = e.value.table.useDialog && !e.value.table.show, l = v.value.showTable;
+    const N = C(() => {
+      const o = e.value.table.useDialog && !e.value.table.show, l = u.value.showTable;
       return {
-        component: o ? oo : Xe,
+        component: o ? to : Xe,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: o ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -399,78 +404,79 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         }
       };
     });
-    H(() => v.value.showTable, (o) => {
+    U(() => u.value.showTable, (o) => {
       e.value.table.show || (o && e.value.table.useDialog && E.value ? E.value.open() : "close" in E.value && E.value.close());
     });
-    function we() {
-      v.value.showTable = !1, G.value && G.value.setTableIconState(!1);
+    function $e() {
+      u.value.showTable = !1, V.value && V.value.setTableIconState(!1);
     }
-    const wo = h(() => e.value.style.chart.backgroundColor), $o = h(() => e.value.style.chart.title), { exportSvg: To, getSvg: Fo } = Ko({
-      svg: L,
-      title: $o,
-      backgroundColor: wo
+    const $o = C(() => e.value.style.chart.backgroundColor), To = C(() => e.value.style.chart.title), { exportSvg: Fo, getSvg: _o } = Qo({
+      svg: B,
+      title: To,
+      backgroundColor: $o
     });
-    async function $e({ isCb: o }) {
+    async function Te({ isCb: o }) {
       if (o) {
-        const { blob: l, url: t, text: n, dataUrl: s } = await Fo();
-        e.value.userOptions.callbacks.svg({ blob: l, url: t, text: n, dataUrl: s });
+        const { blob: l, url: t, text: s, dataUrl: n } = await _o();
+        e.value.userOptions.callbacks.svg({ blob: l, url: t, text: s, dataUrl: n });
       } else
-        To();
+        Fo();
     }
     return Ve({
       getData: bo,
-      getImage: ko,
+      getImage: wo,
       generatePdf: fe,
       generateCsv: q,
       generateImage: he,
-      generateSvg: $e,
-      toggleTable: Ae,
-      toggleLabels: ye,
+      generateSvg: Te,
+      toggleTable: ye,
+      toggleLabels: Ae,
       toggleTooltip: ke,
       toggleAnnotator: J,
-      toggleFullscreen: me
-    }), (o, l) => (d(), y("div", {
+      toggleFullscreen: me,
+      toggleZoom: we
+    }), (o, l) => (v(), A("div", {
       ref_key: "moleculeChart",
       ref: $,
       class: De(`vue-data-ui-component vue-ui-molecule ${_.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      style: M(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `cluster_${z.value}`,
+      style: H(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `cluster_${M.value}`,
       onMouseleave: l[2] || (l[2] = (t) => {
-        R.value = null, B.value = null, a(ie)(!1);
+        Z.value = null, P.value = null, a(ie)(!1);
       }),
       onMouseenter: l[3] || (l[3] = () => a(ie)(!0))
     }, [
-      e.value.userOptions.buttons.annotator ? (d(), T(a(Ze), {
+      e.value.userOptions.buttons.annotator && a(B) ? (v(), T(a(qe), {
         key: 0,
-        svgRef: a(L),
+        svgRef: a(B),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: P.value,
+        active: I.value,
         onClose: J
       }, {
         "annotator-action-close": r(() => [
           i(o.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": r(({ color: t }) => [
-          i(o.$slots, "annotator-action-color", p(C({ color: t })), void 0, !0)
+          i(o.$slots, "annotator-action-color", f(h({ color: t })), void 0, !0)
         ]),
         "annotator-action-draw": r(({ mode: t }) => [
-          i(o.$slots, "annotator-action-draw", p(C({ mode: t })), void 0, !0)
+          i(o.$slots, "annotator-action-draw", f(h({ mode: t })), void 0, !0)
         ]),
         "annotator-action-undo": r(({ disabled: t }) => [
-          i(o.$slots, "annotator-action-undo", p(C({ disabled: t })), void 0, !0)
+          i(o.$slots, "annotator-action-undo", f(h({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-redo": r(({ disabled: t }) => [
-          i(o.$slots, "annotator-action-redo", p(C({ disabled: t })), void 0, !0)
+          i(o.$slots, "annotator-action-redo", f(h({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-delete": r(({ disabled: t }) => [
-          i(o.$slots, "annotator-action-delete", p(C({ disabled: t })), void 0, !0)
+          i(o.$slots, "annotator-action-delete", f(h({ disabled: t })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : A("", !0),
-      io.value ? (d(), y("div", nt, null, 512)) : A("", !0),
-      e.value.style.chart.title.text ? (d(), y("div", rt, [
-        (d(), T(a(je), {
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      uo.value ? (v(), A("div", rt, null, 512)) : y("", !0),
+      e.value.style.chart.title.text ? (v(), A("div", it, [
+        (v(), T(a(je), {
           key: `title_${ne.value}`,
           config: {
             title: {
@@ -483,16 +489,16 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
             }
           }
         }, null, 8, ["config"]))
-      ])) : A("", !0),
-      e.value.userOptions.show && le.value && (a(ue) || a(X)) ? (d(), T(a(qe), {
+      ])) : y("", !0),
+      e.value.userOptions.show && le.value && (a(ue) || a(W)) ? (v(), T(a(Je), {
         ref_key: "userOptionsRef",
-        ref: G,
+        ref: V,
         key: `user_options_${se.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: a(de),
         isImaging: a(ve),
-        uid: z.value,
+        uid: M.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
@@ -501,32 +507,35 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isTooltip: v.value.showTooltip,
+        isTooltip: u.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: $.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: P.value,
+        isAnnotation: I.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
+        hasZoom: e.value.userOptions.buttons.zoom,
+        isZoom: u.value.showZoom,
         onToggleFullscreen: me,
         onGeneratePdf: a(fe),
         onGenerateCsv: q,
         onGenerateImage: a(he),
-        onGenerateSvg: $e,
-        onToggleTable: Ae,
-        onToggleLabels: ye,
+        onGenerateSvg: Te,
+        onToggleTable: ye,
+        onToggleLabels: Ae,
         onToggleTooltip: ke,
         onToggleAnnotator: J,
-        style: M({
-          visibility: a(ue) ? a(X) ? "visible" : "hidden" : "visible"
+        onToggleZoom: we,
+        style: H({
+          visibility: a(ue) ? a(W) ? "visible" : "hidden" : "visible"
         })
-      }, Oe({ _: 2 }, [
+      }, Se({ _: 2 }, [
         o.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: r(({ isOpen: t, color: n }) => [
-            i(o.$slots, "menuIcon", p(C({ isOpen: t, color: n })), void 0, !0)
+          fn: r(({ isOpen: t, color: s }) => [
+            i(o.$slots, "menuIcon", f(h({ isOpen: t, color: s })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -581,43 +590,50 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         } : void 0,
         o.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: r(({ toggleFullscreen: t, isFullscreen: n }) => [
-            i(o.$slots, "optionFullscreen", p(C({ toggleFullscreen: t, isFullscreen: n })), void 0, !0)
+          fn: r(({ toggleFullscreen: t, isFullscreen: s }) => [
+            i(o.$slots, "optionFullscreen", f(h({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         o.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: r(({ toggleAnnotator: t, isAnnotator: n }) => [
-            i(o.$slots, "optionAnnotator", p(C({ toggleAnnotator: t, isAnnotator: n })), void 0, !0)
+          fn: r(({ toggleAnnotator: t, isAnnotator: s }) => [
+            i(o.$slots, "optionAnnotator", f(h({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
           ]),
           key: "9"
+        } : void 0,
+        o.$slots.optionZoom ? {
+          name: "optionZoom",
+          fn: r(({ toggleZoom: t, isZoomLocked: s }) => [
+            i(o.$slots, "optionZoom", f(h({ toggleZoom: t, isZoomLocked: s })), void 0, !0)
+          ]),
+          key: "10"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : A("", !0),
-      (d(), y("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "hasZoom", "isZoom", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      (v(), A("svg", {
         ref_key: "svgRef",
-        ref: L,
+        ref: B,
         key: `svg_${ce.value}`,
         xmlns: a(Mo),
-        viewBox: `${a(U).x} ${a(U).y} ${a(U).width} ${a(U).height}`,
+        viewBox: `${a(R).x} ${a(R).y} ${a(R).width} ${a(R).height}`,
         class: De({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
-        style: M(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+        style: H(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        O(a(Je)),
-        o.$slots["chart-background"] ? (d(), y("foreignObject", {
+        D(a(Ke)),
+        o.$slots["chart-background"] ? (v(), A("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: b.value.width <= 0 ? 10 : b.value.width,
-          height: b.value.height <= 0 ? 10 : b.value.height,
+          width: g.value.width <= 0 ? 10 : g.value.width,
+          height: g.value.height <= 0 ? 10 : g.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
           i(o.$slots, "chart-background", {}, void 0, !0)
-        ], 8, ut)) : A("", !0),
+        ], 8, ct)) : y("", !0),
         S("defs", null, [
-          (d(!0), y(Eo, null, Bo(Object.keys(vo.value), (t) => (d(), y("radialGradient", {
+          (v(!0), A(Bo, null, Po(Object.keys(fo.value), (t) => (v(), A("radialGradient", {
             id: `gradient_${t}`,
             cx: "50%",
             cy: "30%",
@@ -627,67 +643,67 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
           }, [
             S("stop", {
               offset: "0%",
-              "stop-color": a(zo)(t, 0.5)
-            }, null, 8, dt),
+              "stop-color": a(xo)(t, 0.5)
+            }, null, 8, vt),
             S("stop", {
               offset: "100%",
               "stop-color": t
-            }, null, 8, vt)
-          ], 8, ct))), 256))
+            }, null, 8, ft)
+          ], 8, dt))), 256))
         ]),
-        O(a(Ke), {
+        D(a(Qe), {
           dataset: k.value,
           color: e.value.style.chart.links.stroke,
           backgroundColor: e.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        O(a(eo), {
+        D(a(oo), {
           dataset: k.value,
-          hoveredUid: B.value,
+          hoveredUid: P.value,
           stroke: e.value.style.chart.nodes.stroke,
           strokeHovered: e.value.style.chart.nodes.strokeHovered,
-          onClick: yo,
-          onHover: ho
+          onClick: ko,
+          onHover: po
         }, {
           node: r(({ node: t }) => [
-            i(o.$slots, "node", p(C({ node: t })), void 0, !0)
+            i(o.$slots, "node", f(h({ node: t })), void 0, !0)
           ]),
           _: 3
         }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        v.value.showDataLabels && !a(j) ? (d(), T(a(Qe), {
+        u.value.showDataLabels && !a(G) ? (v(), T(a(eo), {
           key: 1,
           dataset: k.value,
           color: e.value.style.chart.color,
-          hoveredUid: B.value
-        }, null, 8, ["dataset", "color", "hoveredUid"])) : A("", !0),
-        i(o.$slots, "svg", { svg: b.value }, void 0, !0)
-      ], 14, it)),
-      o.$slots.watermark ? (d(), y("div", ft, [
-        i(o.$slots, "watermark", p(C({ isPrinting: a(de) || a(ve) })), void 0, !0)
-      ])) : A("", !0),
-      a(mo) ? (d(), y("div", ht, [
+          hoveredUid: P.value
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : y("", !0),
+        i(o.$slots, "svg", { svg: g.value }, void 0, !0)
+      ], 14, ut)),
+      o.$slots.watermark ? (v(), A("div", ht, [
+        i(o.$slots, "watermark", f(h({ isPrinting: a(de) || a(ve) })), void 0, !0)
+      ])) : y("", !0),
+      a(yo) ? (v(), A("div", pt, [
         i(o.$slots, "reset-action", { reset: a(K) }, () => [
           S("button", {
             "data-cy-reset": "",
             tabindex: "0",
             role: "button",
             class: "vue-data-ui-refresh-button",
-            style: M({
+            style: H({
               background: e.value.style.chart.backgroundColor
             }),
             onClick: l[0] || (l[0] = (t) => a(K)(!0))
           }, [
-            O(a(te), {
+            D(a(te), {
               name: "refresh",
               stroke: e.value.style.chart.color
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
-      ])) : A("", !0),
-      o.$slots.source ? (d(), y("div", pt, [
+      ])) : y("", !0),
+      o.$slots.source ? (v(), A("div", Ct, [
         i(o.$slots, "source", {}, void 0, !0)
-      ], 512)) : A("", !0),
-      O(a(We), {
-        show: v.value.showTooltip && V.value,
+      ], 512)) : y("", !0),
+      D(a(We), {
+        show: u.value.showTooltip && x.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -698,7 +714,7 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: $.value,
-        content: N.value,
+        content: L.value,
         isFullscreen: _.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
@@ -707,37 +723,37 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
         "tooltip-before": r(() => [
-          i(o.$slots, "tooltip-before", p(C({ ...Z.value })), void 0, !0)
+          i(o.$slots, "tooltip-before", f(h({ ...Y.value })), void 0, !0)
         ]),
         "tooltip-after": r(() => [
-          i(o.$slots, "tooltip-after", p(C({ ...Z.value })), void 0, !0)
+          i(o.$slots, "tooltip-after", f(h({ ...Y.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      le.value && e.value.userOptions.buttons.table ? (d(), T(Po(I.value.component), Io({ key: 7 }, I.value.props, {
+      le.value && e.value.userOptions.buttons.table ? (v(), T(Io(N.value.component), No({ key: 7 }, N.value.props, {
         ref_key: "tableUnit",
         ref: E,
-        onClose: we
-      }), Oe({
+        onClose: $e
+      }), Se({
         content: r(() => [
-          (d(), T(a(Ye), {
+          (v(), T(a(Ye), {
             key: `table_${re.value}`,
             colNames: F.value.colNames,
             head: F.value.head,
             body: F.value.body,
             config: F.value.config,
-            title: e.value.table.useDialog ? "" : I.value.title,
+            title: e.value.table.useDialog ? "" : N.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: we
+            onClose: $e
           }, {
             th: r(({ th: t }) => [
               S("div", {
                 innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Ct)
+              }, null, 8, gt)
             ]),
             td: r(({ td: t }) => [
-              Se(Ee(t.name || t), 1)
+              Ee(Be(t.name || t), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -747,7 +763,7 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
         e.value.table.useDialog ? {
           name: "title",
           fn: r(() => [
-            Se(Ee(I.value.title), 1)
+            Ee(Be(N.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -759,24 +775,24 @@ const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nod
               class: "vue-ui-user-options-button",
               onClick: l[1] || (l[1] = (t) => q(e.value.userOptions.callbacks.csv))
             }, [
-              O(a(te), {
+              D(a(te), {
                 name: "excel",
-                stroke: I.value.props.color
+                stroke: N.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : A("", !0),
-      a(j) ? (d(), T(qo, { key: 8 })) : A("", !0)
-    ], 46, st));
+      ]), 1040)) : y("", !0),
+      a(G) ? (v(), T(Jo, { key: 8 })) : y("", !0)
+    ], 46, nt));
   }
-}, gt = /* @__PURE__ */ at(bt, [["__scopeId", "data-v-3823dab9"]]), Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, mt = /* @__PURE__ */ st(bt, [["__scopeId", "data-v-053b8c13"]]), Pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: gt
+  default: mt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Et as a,
-  Bt as b,
-  gt as v
+  Bt as a,
+  Pt as b,
+  mt as v
 };