vue-data-ui 3.5.0 → 3.5.2

package/dist/{vue-ui-molecule-BALqwB8c.js → vue-ui-molecule-Bd1OXvl3.js}

@@ -1,7 +1,7 @@
-import { useCssVars as bt, defineAsyncComponent as p, computed as h, onMounted as Ct, ref as r, toRefs as yt, watch as U, nextTick as H, createElementBlock as C, openBlock as v, unref as a, normalizeStyle as M, normalizeClass as Oe, createBlock as w, createCommentVNode as b, createVNode as D, createSlots as Se, withCtx as u, renderSlot as c, normalizeProps as T, guardReactiveProps as $, createElementVNode as P, Fragment as kt, renderList as At, resolveDynamicComponent as wt, mergeProps as Tt, createTextVNode as De, toDisplayString as Pe } from "vue";
-import { o as $t, f as _t, c as Ie, t as Ot, b as St, p as Fe, e as Dt, a7 as Pt, X as It, S as Ft, k as Nt, h as Ne, P as Lt, Q as Bt, G as xt, H as Et } from "./lib-C_mNZmhD.js";
-import { u as Rt, a as Le } from "./useNestedProp-BjZe1Y85.js";
-import { u as Ut, B as Ht } from "./BaseScanner-BgWxam9d.js";
+import { useCssVars as bt, defineAsyncComponent as p, computed as h, onMounted as Ct, ref as u, toRefs as yt, watch as x, nextTick as H, createElementBlock as k, openBlock as v, unref as a, normalizeStyle as M, normalizeClass as Oe, createBlock as T, createCommentVNode as y, createVNode as D, withCtx as r, renderSlot as i, normalizeProps as f, guardReactiveProps as g, createSlots as Se, createElementVNode as P, Fragment as kt, renderList as At, resolveDynamicComponent as wt, mergeProps as $t, createTextVNode as De, toDisplayString as Pe } from "vue";
+import { o as Tt, f as _t, c as Ie, t as Ot, b as St, p as Fe, e as Dt, a7 as Pt, X as It, S as Ft, k as Nt, h as Ne, P as Lt, Q as Bt, G as Et, H as Rt } from "./lib-C_mNZmhD.js";
+import { u as Ut, a as Le } from "./useNestedProp-CReNavA0.js";
+import { u as xt, B as Ht } from "./BaseScanner-BgWxam9d.js";
 import { u as Mt } from "./usePrinter-DTzqpYKF.js";
 import { u as Gt } from "./useSvgExport-DrjCWun4.js";
 import { u as Vt } from "./useUserOptionState-BIvW1Kz7.js";
@@ -46,24 +46,24 @@ const Zt = ["id"], Qt = {
     }
   },
   emits: ["selectNode"],
-  setup(Be, { expose: xe, emit: Ee }) {
+  setup(Be, { expose: Ee, emit: Re }) {
     bt((t) => ({
-      fddb4600: t.slicerColor
+      f4051c3a: t.slicerColor
     }));
-    const Re = p(() => import("./Title-l36lOBMx.js")), Ue = p(() => import("./Tooltip-oWCO1HKy.js")), te = p(() => import("./BaseIcon-BmMbm4d0.js")), He = p(() => import("./vue-ui-accordion-CZ0thhxa.js")), Me = p(() => import("./DataTable-BT7VF2ua.js")), Ge = p(() => import("./PenAndPaper-DSvu9dwa.js")), Ve = p(() => import("./UserOptions-CGnQt6Fd.js")), ze = p(() => import("./PackageVersion-Cyx_s25h.js")), We = p(() => import("./RecursiveLinks-00zGWPf9.js")), Xe = p(() => import("./RecursiveLabels-Bgcv0pzu.js")), je = p(() => import("./RecursiveCircles-BcLb1aRS.js")), Ye = p(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_molecule: Ze } = Rt(), k = Be, Qe = Ee, oe = h(() => !!k.dataset && k.dataset.length);
+    const Ue = p(() => import("./Title-BzH_LEA3.js")), xe = p(() => import("./Tooltip-oWCO1HKy.js")), te = p(() => import("./BaseIcon-BmMbm4d0.js")), He = p(() => import("./vue-ui-accordion-BmFTVF1a.js")), Me = p(() => import("./DataTable-BT7VF2ua.js")), Ge = p(() => import("./PenAndPaper-SZQIAgkg.js")), Ve = p(() => import("./UserOptions-CGnQt6Fd.js")), ze = p(() => import("./PackageVersion-Y7t79Jtq.js")), We = p(() => import("./RecursiveLinks-00zGWPf9.js")), Xe = p(() => import("./RecursiveLabels-Bgcv0pzu.js")), je = p(() => import("./RecursiveCircles-BcLb1aRS.js")), Ye = p(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_molecule: Ze } = Ut(), w = Be, Qe = Re, oe = h(() => !!w.dataset && w.dataset.length);
     Ct(() => {
       le();
     });
     const qe = h(() => e.value.debug);
     function le() {
-      $t(k.dataset) && _t({
+      Tt(w.dataset) && _t({
         componentName: "VueUiMolecule",
         type: "dataset",
         debug: qe.value
       });
     }
-    const G = r(Ie()), V = r(!1), B = r(""), A = r(null), ae = r(0), se = r(0), ne = r(0), I = r(null), z = r(null), e = r(Y()), { loading: W, FINAL_DATASET: X } = Ut({
-      ...yt(k),
+    const G = u(Ie()), V = u(!1), B = u(""), $ = u(null), ae = u(0), se = u(0), ne = u(0), I = u(null), z = u(null), e = u(Y()), { loading: W, FINAL_DATASET: X } = xt({
+      ...yt(w),
       FINAL_CONFIG: e,
       prepareConfig: Y,
       skeletonDataset: [
@@ -118,39 +118,39 @@ const Zt = ["id"], Qt = {
           }
         }
       })
-    }), { userOptionsVisible: j, setUserOptionsVisibility: re, keepUserOptionState: ie } = Vt({ config: e.value }), { svgRef: x } = zt({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: j, setUserOptionsVisibility: re, keepUserOptionState: ie } = Vt({ config: e.value }), { svgRef: E } = zt({ config: e.value.style.chart.title });
     function Y() {
       const t = Le({
-        userConfig: k.config,
+        userConfig: w.config,
         defaultConfig: Ze
       });
       return t.theme ? {
         ...Le({
-          userConfig: Xt.vue_ui_molecule[t.theme] || k.config,
+          userConfig: Xt.vue_ui_molecule[t.theme] || w.config,
           defaultConfig: t
         }),
         customPalette: St[t.theme] || Fe
       } : t;
     }
-    U(() => k.config, (t) => {
+    x(() => w.config, (t) => {
       e.value = Y(), j.value = !e.value.userOptions.showOnChartHover, le(), se.value += 1, ne.value += 1, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const ue = r(0), Je = () => {
+    const ue = u(0), Je = () => {
       ue.value += 1;
     };
-    U([() => W.value, () => X.value], async ([t]) => {
-      t || (await H(), f.value = fe(), await H(), Je(), await H(), ct({ x: 0, y: 0, width: 400, height: 400 }), J(!1));
+    x([() => W.value, () => X.value], async ([t]) => {
+      t || (await H(), m.value = fe(), await H(), Je(), await H(), ct({ x: 0, y: 0, width: 400, height: 400 }), J(!1));
     }, { flush: "post", deep: !1 });
     const { isPrinting: ce, isImaging: ve, generatePdf: de, generateImage: pe } = Mt({
       elementId: `cluster_${G.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-molecule",
       options: e.value.userOptions.print
-    }), Ke = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), et = h(() => Dt(e.value.customPalette)), d = r({
+    }), Ke = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), et = h(() => Dt(e.value.customPalette)), d = u({
       showTable: e.value.table.show,
       showDataLabels: !0,
       showTooltip: e.value.style.chart.tooltip.show
     });
-    U(e, () => {
+    x(e, () => {
       d.value = {
         showTable: e.value.table.show,
         showDataLabels: !0,
@@ -170,8 +170,8 @@ const Zt = ["id"], Qt = {
         width: o
       };
     }
-    const f = r(fe());
-    function ge(t, l = { x: -f.value.width / 2.43, y: f.value.height / 2 }, o = f.value.width / 1.1, n = 24, s = 0, i = 0, g = "#BBBBBB", K = 0) {
+    const m = u(fe());
+    function ge(t, l = { x: -m.value.width / 2.43, y: m.value.height / 2 }, o = m.value.width / 1.1, n = 24, s = 0, c = 0, b = "#BBBBBB", K = 0) {
       if (!Array.isArray(t) || t.length === 0) return t;
       const mt = Nt({
         plot: l,
@@ -179,19 +179,19 @@ const Zt = ["id"], Qt = {
         sides: t.length,
         rotation: s
       });
-      return t.forEach((m, Te) => {
-        const $e = mt.coordinates[Te], _e = m.color ? (() => {
-          let ee = Ne(m.color);
+      return t.forEach((C, $e) => {
+        const Te = mt.coordinates[$e], _e = C.color ? (() => {
+          let ee = Ne(C.color);
           return ee.startsWith("#") ? ee : `#${ee}`;
         })() : null;
         let S;
-        _e ? S = _e : K === 0 ? S = g : K === 1 ? (S = et.value[i] || Fe[i] || g, i += 1) : S = g, m.polygonPath = { coordinates: [$e] }, m.circleRadius = n, m.color = S, m.uid = Ie(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = ge(
-          m.nodes,
-          $e,
+        _e ? S = _e : K === 0 ? S = b : K === 1 ? (S = et.value[c] || Fe[c] || b, c += 1) : S = b, C.polygonPath = { coordinates: [Te] }, C.circleRadius = n, C.color = S, C.uid = Ie(), Array.isArray(C.nodes) && C.nodes.length && (C.nodes = ge(
+          C.nodes,
+          Te,
           o / 2.9,
           n / 2.2,
-          s + Math.PI * Te / m.nodes.length,
-          i,
+          s + Math.PI * $e / C.nodes.length,
+          c,
           S,
           K + 1
         ));
@@ -200,42 +200,42 @@ const Zt = ["id"], Qt = {
     function tt(t) {
       const l = /* @__PURE__ */ new Set();
       function o(s) {
-        s.forEach((i) => {
-          if (!i.color) return;
-          let g = i.color;
-          /^#?[0-9A-F]{6}$/i.test(g) || (g = Ne(g)), g.startsWith("#") || (g = `#${g}`), l.add(g), Array.isArray(i.nodes) && i.nodes.length && o(i.nodes);
+        s.forEach((c) => {
+          if (!c.color) return;
+          let b = c.color;
+          /^#?[0-9A-F]{6}$/i.test(b) || (b = Ne(b)), b.startsWith("#") || (b = `#${b}`), l.add(b), Array.isArray(c.nodes) && c.nodes.length && o(c.nodes);
         });
       }
       o(t);
       const n = {};
       return Array.from(l).forEach((s) => {
-        const i = s.slice(1);
-        n[s] = `gradient_${i}`;
+        const c = s.slice(1);
+        n[s] = `gradient_${c}`;
       }), n;
     }
-    const ot = h(() => tt(y.value)), y = h(() => {
+    const ot = h(() => tt(A.value)), A = h(() => {
       const t = Pt(X.value);
       return ge(t);
-    }), Z = r(null);
+    }), Z = u(null);
     function lt(t) {
       Z.value = {
         datapoint: t,
         seriesIndex: -1,
-        series: y.value,
+        series: A.value,
         config: e.value
       };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (xt(l) && Et(() => l({
+      if (Et(l) && Rt(() => l({
         seriesIndex: -1,
         datapoint: t,
-        series: y.value,
+        series: A.value,
         config: e.value
       })))
         B.value = l({
           seriesIndex: -1,
           // well, ok
           datapoint: t,
-          series: y.value,
+          series: A.value,
           config: e.value
         });
       else {
@@ -243,31 +243,31 @@ const Zt = ["id"], Qt = {
         o += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (o += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), B.value = `<div style="font-family:inherit">${o}</div>`;
       }
     }
-    const E = r(null), F = r(null), me = r(null);
+    const R = u(null), F = u(null), me = u(null);
     function at(t) {
-      me.value = E.value, E.value = t, t ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: me.value || E.value, seriesIndex: -1 }), t ? (V.value = !0, lt(t), F.value = t.uid) : (V.value = !1, B.value = "", F.value = null);
+      me.value = R.value, R.value = t, t ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: me.value || R.value, seriesIndex: -1 }), t ? (V.value = !0, lt(t), F.value = t.uid) : (V.value = !1, B.value = "", F.value = null);
     }
     function st(t) {
       const l = [];
       function o(n) {
         n.forEach((s) => {
-          const i = {
+          const c = {
             name: s.name,
             details: s.details || "-",
             ancestor: s.ancestor && s.ancestor.name || "-",
             color: s.color || ""
           };
-          l.push(i), s.nodes && s.nodes.length > 0 && o(s.nodes, s.name);
+          l.push(c), s.nodes && s.nodes.length > 0 && o(s.nodes, s.name);
         });
       }
       return o(t), l;
     }
-    const nt = h(() => st(y.value)), _ = h(() => {
+    const nt = h(() => st(A.value)), _ = h(() => {
       const t = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
-      ], l = nt.value.map((s, i) => [
+      ], l = nt.value.map((s, c) => [
         {
           color: s.color,
           name: s.name
@@ -300,14 +300,14 @@ const Zt = ["id"], Qt = {
     });
     function Q(t = null) {
       H(() => {
-        const l = _.value.body.map((s, i) => [[s[0].name], [s[1]], [s[2]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[..._.value.head]]].concat(l), n = Lt(o);
+        const l = _.value.body.map((s, c) => [[s[0].name], [s[1]], [s[2]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[..._.value.head]]].concat(l), n = Lt(o);
         t ? t(n) : Bt({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
     function rt() {
-      return y.value;
+      return A.value;
     }
-    const O = r(!1);
+    const O = u(!1);
     function be(t) {
       O.value = t, ae.value += 1;
     }
@@ -320,25 +320,25 @@ const Zt = ["id"], Qt = {
     function ke() {
       d.value.showTooltip = !d.value.showTooltip;
     }
-    const N = r(!1);
+    const N = u(!1);
     function q() {
       N.value = !N.value;
     }
-    const it = h(() => !N.value), { viewBox: R, resetZoom: J, isZoom: ut, setInitialViewBox: ct } = jt(x, {
+    const it = h(() => !N.value), { viewBox: U, resetZoom: J, isZoom: ut, setInitialViewBox: ct } = jt(E, {
       x: 0,
       y: 0,
-      width: Math.max(10, f.value.width),
-      height: Math.max(10, f.value.height)
+      width: Math.max(10, m.value.width),
+      height: Math.max(10, m.value.height)
     }, e.value.style.chart.zoom.speed, it);
     function vt(t) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: -1 }), Qe("selectNode", t);
     }
     async function dt({ scale: t = 2 } = {}) {
-      if (!A.value) return;
-      const { width: l, height: o } = A.value.getBoundingClientRect(), n = l / o, { imageUri: s, base64: i } = await Wt({ domElement: A.value, base64: !0, img: !0, scale: t });
+      if (!$.value) return;
+      const { width: l, height: o } = $.value.getBoundingClientRect(), n = l / o, { imageUri: s, base64: c } = await Wt({ domElement: $.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: s,
-        base64: i,
+        base64: c,
         title: e.value.style.chart.title.text,
         width: l,
         height: o,
@@ -356,7 +356,7 @@ const Zt = ["id"], Qt = {
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
           isFullscreen: O.value,
-          fullscreenParent: A.value,
+          fullscreenParent: $.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
@@ -375,14 +375,14 @@ const Zt = ["id"], Qt = {
         }
       };
     });
-    U(() => d.value.showTable, (t) => {
+    x(() => d.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && I.value ? I.value.open() : "close" in I.value && I.value.close());
     });
     function Ae() {
       d.value.showTable = !1, z.value && z.value.setTableIconState(!1);
     }
     const pt = h(() => e.value.style.chart.backgroundColor), ht = h(() => e.value.style.chart.title), { exportSvg: ft, getSvg: gt } = Gt({
-      svg: x,
+      svg: E,
       title: ht,
       backgroundColor: pt
     });
@@ -393,7 +393,7 @@ const Zt = ["id"], Qt = {
       } else
         ft();
     }
-    return xe({
+    return Ee({
       getData: rt,
       getImage: dt,
       generatePdf: de,
@@ -405,28 +405,48 @@ const Zt = ["id"], Qt = {
       toggleTooltip: ke,
       toggleAnnotator: q,
       toggleFullscreen: be
-    }), (t, l) => (v(), C("div", {
+    }), (t, l) => (v(), k("div", {
       ref_key: "moleculeChart",
-      ref: A,
+      ref: $,
       class: Oe(`vue-data-ui-component vue-ui-molecule ${O.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_${G.value}`,
       onMouseleave: l[2] || (l[2] = (o) => {
-        E.value = null, F.value = null, a(re)(!1);
+        R.value = null, F.value = null, a(re)(!1);
       }),
       onMouseenter: l[3] || (l[3] = () => a(re)(!0))
     }, [
-      e.value.userOptions.buttons.annotator ? (v(), w(a(Ge), {
+      e.value.userOptions.buttons.annotator ? (v(), T(a(Ge), {
         key: 0,
-        svgRef: a(x),
+        svgRef: a(E),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: N.value,
         onClose: q
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
-      Ke.value ? (v(), C("div", Qt, null, 512)) : b("", !0),
-      e.value.style.chart.title.text ? (v(), C("div", qt, [
-        (v(), w(a(Re), {
+      }, {
+        "annotator-action-close": r(() => [
+          i(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": r(({ color: o }) => [
+          i(t.$slots, "annotator-action-color", f(g({ color: o })), void 0, !0)
+        ]),
+        "annotator-action-draw": r(({ mode: o }) => [
+          i(t.$slots, "annotator-action-draw", f(g({ mode: o })), void 0, !0)
+        ]),
+        "annotator-action-undo": r(({ disabled: o }) => [
+          i(t.$slots, "annotator-action-undo", f(g({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-redo": r(({ disabled: o }) => [
+          i(t.$slots, "annotator-action-redo", f(g({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-delete": r(({ disabled: o }) => [
+          i(t.$slots, "annotator-action-delete", f(g({ disabled: o })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      Ke.value ? (v(), k("div", Qt, null, 512)) : y("", !0),
+      e.value.style.chart.title.text ? (v(), k("div", qt, [
+        (v(), T(a(Ue), {
           key: `title_${se.value}`,
           config: {
             title: {
@@ -439,8 +459,8 @@ const Zt = ["id"], Qt = {
             }
           }
         }, null, 8, ["config"]))
-      ])) : b("", !0),
-      e.value.userOptions.show && oe.value && (a(ie) || a(j)) ? (v(), w(a(Ve), {
+      ])) : y("", !0),
+      e.value.userOptions.show && oe.value && (a(ie) || a(j)) ? (v(), T(a(Ve), {
         ref_key: "userOptionsRef",
         ref: z,
         key: `user_options_${ae.value}`,
@@ -459,7 +479,7 @@ const Zt = ["id"], Qt = {
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isTooltip: d.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: A.value,
+        chartElement: $.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: N.value,
@@ -481,99 +501,99 @@ const Zt = ["id"], Qt = {
       }, Se({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: u(({ isOpen: o, color: n }) => [
-            c(t.$slots, "menuIcon", T($({ isOpen: o, color: n })), void 0, !0)
+          fn: r(({ isOpen: o, color: n }) => [
+            i(t.$slots, "menuIcon", f(g({ isOpen: o, color: n })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: u(() => [
-            c(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: r(() => [
+            i(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: u(() => [
-            c(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: r(() => [
+            i(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: u(() => [
-            c(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: r(() => [
+            i(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: u(() => [
-            c(t.$slots, "optionImg", {}, void 0, !0)
+          fn: r(() => [
+            i(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: u(() => [
-            c(t.$slots, "optionSvg", {}, void 0, !0)
+          fn: r(() => [
+            i(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: u(() => [
-            c(t.$slots, "optionTable", {}, void 0, !0)
+          fn: r(() => [
+            i(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: u(() => [
-            c(t.$slots, "optionLabels", {}, void 0, !0)
+          fn: r(() => [
+            i(t.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: u(({ toggleFullscreen: o, isFullscreen: n }) => [
-            c(t.$slots, "optionFullscreen", T($({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
+          fn: r(({ toggleFullscreen: o, isFullscreen: n }) => [
+            i(t.$slots, "optionFullscreen", f(g({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: u(({ toggleAnnotator: o, isAnnotator: n }) => [
-            c(t.$slots, "optionAnnotator", T($({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
+          fn: r(({ toggleAnnotator: o, isAnnotator: n }) => [
+            i(t.$slots, "optionAnnotator", f(g({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
           ]),
           key: "9"
         } : 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"])) : b("", !0),
-      (v(), C("svg", {
+      ]), 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"])) : y("", !0),
+      (v(), k("svg", {
         ref_key: "svgRef",
-        ref: x,
+        ref: E,
         key: `svg_${ue.value}`,
         xmlns: a(It),
-        viewBox: `${a(R).x} ${a(R).y} ${a(R).width} ${a(R).height}`,
+        viewBox: `${a(U).x} ${a(U).y} ${a(U).width} ${a(U).height}`,
         class: Oe({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
         style: M(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
         D(a(ze)),
-        t.$slots["chart-background"] ? (v(), C("foreignObject", {
+        t.$slots["chart-background"] ? (v(), k("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: f.value.width <= 0 ? 10 : f.value.width,
-          height: f.value.height <= 0 ? 10 : f.value.height,
+          width: m.value.width <= 0 ? 10 : m.value.width,
+          height: m.value.height <= 0 ? 10 : m.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
-          c(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Kt)) : b("", !0),
+          i(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Kt)) : y("", !0),
         P("defs", null, [
-          (v(!0), C(kt, null, At(Object.keys(ot.value), (o) => (v(), C("radialGradient", {
+          (v(!0), k(kt, null, At(Object.keys(ot.value), (o) => (v(), k("radialGradient", {
             id: `gradient_${o}`,
             cx: "50%",
             cy: "30%",
@@ -592,36 +612,36 @@ const Zt = ["id"], Qt = {
           ], 8, eo))), 256))
         ]),
         D(a(We), {
-          dataset: y.value,
+          dataset: A.value,
           color: e.value.style.chart.links.stroke,
           backgroundColor: e.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
         D(a(je), {
-          dataset: y.value,
+          dataset: A.value,
           hoveredUid: F.value,
           stroke: e.value.style.chart.nodes.stroke,
           strokeHovered: e.value.style.chart.nodes.strokeHovered,
           onClick: vt,
           onHover: at
         }, {
-          node: u(({ node: o }) => [
-            c(t.$slots, "node", T($({ node: o })), void 0, !0)
+          node: r(({ node: o }) => [
+            i(t.$slots, "node", f(g({ node: o })), void 0, !0)
           ]),
           _: 3
         }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        d.value.showDataLabels && !a(W) ? (v(), w(a(Xe), {
+        d.value.showDataLabels && !a(W) ? (v(), T(a(Xe), {
           key: 1,
-          dataset: y.value,
+          dataset: A.value,
           color: e.value.style.chart.color,
           hoveredUid: F.value
-        }, null, 8, ["dataset", "color", "hoveredUid"])) : b("", !0),
-        c(t.$slots, "svg", { svg: f.value }, void 0, !0)
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : y("", !0),
+        i(t.$slots, "svg", { svg: m.value }, void 0, !0)
       ], 14, Jt)),
-      t.$slots.watermark ? (v(), C("div", lo, [
-        c(t.$slots, "watermark", T($({ isPrinting: a(ce) || a(ve) })), void 0, !0)
-      ])) : b("", !0),
-      a(ut) ? (v(), C("div", ao, [
-        c(t.$slots, "reset-action", { reset: a(J) }, () => [
+      t.$slots.watermark ? (v(), k("div", lo, [
+        i(t.$slots, "watermark", f(g({ isPrinting: a(ce) || a(ve) })), void 0, !0)
+      ])) : y("", !0),
+      a(ut) ? (v(), k("div", ao, [
+        i(t.$slots, "reset-action", { reset: a(J) }, () => [
           P("button", {
             "data-cy-reset": "",
             tabindex: "0",
@@ -638,11 +658,11 @@ const Zt = ["id"], Qt = {
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
-      ])) : b("", !0),
-      t.$slots.source ? (v(), C("div", so, [
-        c(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : b("", !0),
-      D(a(Ue), {
+      ])) : y("", !0),
+      t.$slots.source ? (v(), k("div", so, [
+        i(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : y("", !0),
+      D(a(xe), {
         show: d.value.showTooltip && V.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -653,7 +673,7 @@ const Zt = ["id"], Qt = {
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: A.value,
+        parent: $.value,
         content: B.value,
         isFullscreen: O.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
@@ -662,21 +682,21 @@ const Zt = ["id"], Qt = {
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": u(() => [
-          c(t.$slots, "tooltip-before", T($({ ...Z.value })), void 0, !0)
+        "tooltip-before": r(() => [
+          i(t.$slots, "tooltip-before", f(g({ ...Z.value })), void 0, !0)
         ]),
-        "tooltip-after": u(() => [
-          c(t.$slots, "tooltip-after", T($({ ...Z.value })), void 0, !0)
+        "tooltip-after": r(() => [
+          i(t.$slots, "tooltip-after", f(g({ ...Z.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      oe.value && e.value.userOptions.buttons.table ? (v(), w(wt(L.value.component), Tt({ key: 7 }, L.value.props, {
+      oe.value && e.value.userOptions.buttons.table ? (v(), T(wt(L.value.component), $t({ key: 7 }, L.value.props, {
         ref_key: "tableUnit",
         ref: I,
         onClose: Ae
       }), Se({
-        content: u(() => [
-          (v(), w(a(Me), {
+        content: r(() => [
+          (v(), T(a(Me), {
             key: `table_${ne.value}`,
             colNames: _.value.colNames,
             head: _.value.head,
@@ -686,13 +706,13 @@ const Zt = ["id"], Qt = {
             withCloseButton: !e.value.table.useDialog,
             onClose: Ae
           }, {
-            th: u(({ th: o }) => [
+            th: r(({ th: o }) => [
               P("div", {
                 innerHTML: o,
                 style: { display: "flex", "align-items": "center" }
               }, null, 8, no)
             ]),
-            td: u(({ td: o }) => [
+            td: r(({ td: o }) => [
               De(Pe(o.name || o), 1)
             ]),
             _: 1
@@ -702,14 +722,14 @@ const Zt = ["id"], Qt = {
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: u(() => [
+          fn: r(() => [
             De(Pe(L.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: u(() => [
+          fn: r(() => [
             P("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
@@ -723,11 +743,11 @@ const Zt = ["id"], Qt = {
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : b("", !0),
-      a(W) ? (v(), w(Ht, { key: 8 })) : b("", !0)
+      ]), 1040)) : y("", !0),
+      a(W) ? (v(), T(Ht, { key: 8 })) : y("", !0)
     ], 46, Zt));
   }
-}, ko = /* @__PURE__ */ Yt(ro, [["__scopeId", "data-v-0a207d5f"]]);
+}, ko = /* @__PURE__ */ Yt(ro, [["__scopeId", "data-v-834b0111"]]);
 export {
   ko as default
 };