vue-data-ui 3.0.0-next.0 → 3.0.0-next.2

package/dist/{vue-ui-molecule-BugMXFAK.js → vue-ui-molecule-R5-oDFeW.js}

@@ -1,31 +1,32 @@
-import { useCssVars as Qe, defineAsyncComponent as p, computed as k, onMounted as Je, ref as c, watch as Ke, createElementBlock as y, openBlock as r, unref as l, normalizeStyle as B, normalizeClass as he, createBlock as $, createCommentVNode as f, createVNode as F, createSlots as et, withCtx as d, renderSlot as i, normalizeProps as w, guardReactiveProps as T, createElementVNode as _, Fragment as tt, renderList as ot, createTextVNode as lt, toDisplayString as st, nextTick as at } from "vue";
-import { u as nt, o as rt, e as it, c as pe, t as ut, p as fe, a as ct, b as dt, Q as vt, X as ht, l as pt, R as ft, d as ge, q as gt, r as mt, x as yt, y as bt } from "./index-DMqAxz7R.js";
-import { u as me } from "./useNestedProp-YgN3FV_8.js";
-import { u as kt } from "./usePrinter-COkTjv6C.js";
-import { u as Ct } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as $t } from "./useChartAccessibility-9icAAmYg.js";
-import { u as wt } from "./usePanZoom-BQMvRXEQ.js";
-import { _ as Tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ot = ["id"], Pt = {
+import { useCssVars as Je, defineAsyncComponent as p, computed as k, onMounted as Ke, ref as c, watch as et, createElementBlock as y, openBlock as i, unref as s, normalizeStyle as R, normalizeClass as pe, createBlock as $, createCommentVNode as f, createVNode as S, createSlots as tt, withCtx as d, renderSlot as u, normalizeProps as w, guardReactiveProps as T, createElementVNode as _, Fragment as ot, renderList as lt, createTextVNode as st, toDisplayString as at, nextTick as nt } from "vue";
+import { u as rt, o as it, e as ut, c as fe, t as ct, p as ge, a as dt, b as vt, Q as ht, X as pt, l as ft, R as gt, d as me, q as mt, r as yt, x as bt, y as kt } from "./index-BzfnuLnw.js";
+import { u as ye } from "./useNestedProp-DorElw91.js";
+import { u as Ct } from "./usePrinter-C9qkgv0r.js";
+import { u as $t } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as wt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Tt } from "./usePanZoom-BQMvRXEQ.js";
+import Ot from "./img-ku4zevVD.js";
+import { _ as Pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const At = ["id"], It = {
   key: 1,
   ref: "noTitle",
   class: "vue-data-ui-no-title-space",
   style: "height:36px; width: 100%;background:transparent"
-}, At = {
+}, Nt = {
   key: 2,
   style: "width:100%;background:transparent;"
-}, It = ["xmlns", "viewBox"], Nt = ["width", "height"], Ft = ["id"], _t = ["stop-color"], St = ["stop-color"], Lt = {
+}, Ft = ["xmlns", "viewBox"], St = ["width", "height"], _t = ["id"], Lt = ["stop-color"], Dt = ["stop-color"], Bt = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Dt = {
+}, Rt = {
   key: 6,
   "data-dom-to-png-ignore": "",
   class: "reset-wrapper"
-}, Bt = {
+}, Ut = {
   key: 8,
   ref: "source",
   dir: "auto"
-}, Rt = ["innerHTML"], Ut = {
+}, Et = ["innerHTML"], xt = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -42,125 +43,125 @@ const Ot = ["id"], Pt = {
     }
   },
   emits: ["selectNode"],
-  setup(ye, { expose: be, emit: ke }) {
-    Qe((t) => ({
-      "1859f908": t.slicerColor
+  setup(be, { expose: ke, emit: Ce }) {
+    Je((t) => ({
+      "7a354ece": t.slicerColor
     }));
-    const Ce = p(() => import("./vue-ui-accordion-P6eFHGQp.js")), $e = p(() => import("./BaseIcon-DoDjTdD5.js")), we = p(() => import("./DataTable-BBbOgI-a.js")), Te = p(() => import("./PackageVersion-D0VPY8-5.js")), Oe = p(() => import("./PenAndPaper-DhBJsnob.js")), Pe = p(() => import("./RecursiveCircles-Dn3TGoL6.js")), Ae = p(() => import("./RecursiveLabels-NTMB9w5C.js")), Ie = p(() => import("./RecursiveLinks-ld_gDZH4.js")), Ne = p(() => import("./vue-ui-skeleton-CjN2ZdgT.js")), Fe = p(() => import("./Title-D29apS4l.js")), _e = p(() => import("./Tooltip-hVZUY_s5.js")), Se = p(() => import("./UserOptions-Bdit7AWO.js")), { vue_ui_molecule: Le } = nt(), C = ye, De = ke, S = k(() => !!C.dataset && C.dataset.length);
-    Je(() => {
+    const $e = p(() => import("./vue-ui-accordion-DgZK-qDz.js")), we = p(() => import("./BaseIcon-BmZ4MREl.js")), Te = p(() => import("./DataTable-CgL0Rz0x.js")), Oe = p(() => import("./PackageVersion-CAkNkiIG.js")), Pe = p(() => import("./PenAndPaper-Cx1-5zdD.js")), Ae = p(() => import("./RecursiveCircles-Dn3TGoL6.js")), Ie = p(() => import("./RecursiveLabels-NTMB9w5C.js")), Ne = p(() => import("./RecursiveLinks-ld_gDZH4.js")), Fe = p(() => import("./vue-ui-skeleton-Ch_XkFuP.js")), Se = p(() => import("./Title-pVYRzQXY.js")), _e = p(() => import("./Tooltip-NwATo4ZJ.js")), Le = p(() => import("./UserOptions-DAsRxxrf.js")), { vue_ui_molecule: De } = rt(), C = be, Be = Ce, L = k(() => !!C.dataset && C.dataset.length);
+    Ke(() => {
       W();
     });
     function W() {
-      rt(C.dataset) && it({
+      it(C.dataset) && ut({
         componentName: "VueUiMolecule",
         type: "dataset"
       });
     }
-    const R = c(pe()), Be = c(null), U = c(!1), L = c(""), E = c(null), X = c(0), j = c(0), Y = c(0), e = k({
+    const U = c(fe()), Re = c(null), E = c(!1), D = c(""), O = c(null), X = c(0), j = c(0), Y = c(0), e = k({
       get: () => Q(),
       set: (t) => t
-    }), { userOptionsVisible: x, setUserOptionsVisibility: Z, keepUserOptionState: q } = Ct({ config: e.value }), { svgRef: z } = $t({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: x, setUserOptionsVisibility: Z, keepUserOptionState: q } = $t({ config: e.value }), { svgRef: z } = wt({ config: e.value.style.chart.title });
     function Q() {
-      const t = me({
+      const t = ye({
         userConfig: C.config,
-        defaultConfig: Le
+        defaultConfig: De
       });
       return t.theme ? {
-        ...me({
-          userConfig: ct.vue_ui_molecule[t.theme] || C.config,
+        ...ye({
+          userConfig: dt.vue_ui_molecule[t.theme] || C.config,
           defaultConfig: t
         }),
-        customPalette: ut[t.theme] || fe
+        customPalette: ct[t.theme] || ge
       } : t;
     }
-    Ke(() => C.config, (t) => {
+    et(() => C.config, (t) => {
       e.value = Q(), x.value = !e.value.userOptions.showOnChartHover, W(), j.value += 1, Y.value += 1, h.value.showTable = e.value.table.show, h.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: J, isImaging: K, generatePdf: ee, generateImage: te } = kt({
-      elementId: `cluster_${R.value}`,
+    const { isPrinting: J, isImaging: K, generatePdf: ee, generateImage: te } = Ct({
+      elementId: `cluster_${U.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-molecule",
       options: e.value.userOptions.print
-    }), Re = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ue = k(() => dt(e.value.customPalette)), h = c({
+    }), Ue = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ee = k(() => vt(e.value.customPalette)), h = c({
       showTable: e.value.table.show,
       showDataLabels: !0,
       showTooltip: e.value.style.chart.tooltip.show
     });
-    function oe(t, s = 0) {
-      return Array.isArray(t) && t.length > 0 && t[0].nodes ? oe(t[0].nodes, s + 1) : s;
+    function oe(t, l = 0) {
+      return Array.isArray(t) && t.length > 0 && t[0].nodes ? oe(t[0].nodes, l + 1) : l;
     }
-    function Ee() {
+    function xe() {
       const t = oe(C.dataset);
-      let s = 100, o = s;
+      let l = 100, o = l;
       for (let n = 0; n < t; n += 1)
-        s /= 1, o += s;
+        l /= 1, o += l;
       return {
         height: o,
         width: o
       };
     }
-    const v = c(Ee());
+    const v = c(xe());
     c(`0 0 ${v.value.width} ${v.value.height}`);
-    function le(t, s = { x: -v.value.width / 2.43, y: v.value.height / 2 }, o = v.value.width / 1.1, n = 24, a = 0, u = 0, g = "#BBBBBB", G = 0) {
+    function le(t, l = { x: -v.value.width / 2.43, y: v.value.height / 2 }, o = v.value.width / 1.1, n = 24, a = 0, r = 0, g = "#BBBBBB", G = 0) {
       if (!Array.isArray(t) || t.length === 0) return t;
-      const qe = ft({
-        plot: s,
+      const Qe = gt({
+        plot: l,
         radius: o,
         sides: t.length,
         rotation: a
       });
-      return t.forEach((m, ce) => {
-        const de = qe.coordinates[ce], ve = m.color ? (() => {
-          let M = ge(m.color);
+      return t.forEach((m, de) => {
+        const ve = Qe.coordinates[de], he = m.color ? (() => {
+          let M = me(m.color);
           return M.startsWith("#") ? M : `#${M}`;
         })() : null;
-        let P;
-        ve ? P = ve : G === 0 ? P = g : G === 1 ? (P = Ue.value[u] || fe[u] || g, u += 1) : P = g, m.polygonPath = { coordinates: [de] }, m.circleRadius = n, m.color = P, m.uid = pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = le(
+        let A;
+        he ? A = he : G === 0 ? A = g : G === 1 ? (A = Ee.value[r] || ge[r] || g, r += 1) : A = g, m.polygonPath = { coordinates: [ve] }, m.circleRadius = n, m.color = A, m.uid = fe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = le(
           m.nodes,
-          de,
+          ve,
           o / 2.9,
           n / 2.2,
-          a + Math.PI * ce / m.nodes.length,
-          u,
-          P,
+          a + Math.PI * de / m.nodes.length,
+          r,
+          A,
           G + 1
         ));
       }), t;
     }
-    function xe(t) {
-      const s = /* @__PURE__ */ new Set();
+    function ze(t) {
+      const l = /* @__PURE__ */ new Set();
       function o(a) {
-        a.forEach((u) => {
-          if (!u.color) return;
-          let g = u.color;
-          /^#?[0-9A-F]{6}$/i.test(g) || (g = ge(g)), g.startsWith("#") || (g = `#${g}`), s.add(g), Array.isArray(u.nodes) && u.nodes.length && o(u.nodes);
+        a.forEach((r) => {
+          if (!r.color) return;
+          let g = r.color;
+          /^#?[0-9A-F]{6}$/i.test(g) || (g = me(g)), g.startsWith("#") || (g = `#${g}`), l.add(g), Array.isArray(r.nodes) && r.nodes.length && o(r.nodes);
         });
       }
       o(t);
       const n = {};
-      return Array.from(s).forEach((a) => {
-        const u = a.slice(1);
-        n[a] = `gradient_${u}`;
+      return Array.from(l).forEach((a) => {
+        const r = a.slice(1);
+        n[a] = `gradient_${r}`;
       }), n;
     }
-    const ze = k(() => xe(b.value)), b = k(() => {
-      const t = vt(C.dataset);
+    const He = k(() => ze(b.value)), b = k(() => {
+      const t = ht(C.dataset);
       return le(t);
     }), H = c(null);
-    function He(t) {
+    function Ve(t) {
       H.value = {
         datapoint: t,
         seriesIndex: -1,
         series: b.value,
         config: e.value
       };
-      const s = e.value.style.chart.tooltip.customFormat;
-      if (yt(s) && bt(() => s({
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (bt(l) && kt(() => l({
         seriesIndex: -1,
         datapoint: t,
         series: b.value,
         config: e.value
       })))
-        L.value = s({
+        D.value = l({
           seriesIndex: -1,
           // well, ok
           datapoint: t,
@@ -169,34 +170,34 @@ const Ot = ["id"], Pt = {
         });
       else {
         let o = "";
-        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>`), L.value = `<div style="font-family:inherit">${o}</div>`;
+        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>`), D.value = `<div style="font-family:inherit">${o}</div>`;
       }
     }
-    const se = c(null), A = c(null);
-    function Ve(t) {
-      se.value = t, t ? (U.value = !0, He(t), A.value = t.uid) : (U.value = !1, L.value = "", A.value = null);
-    }
+    const se = c(null), I = c(null);
     function Ge(t) {
-      const s = [];
+      se.value = t, t ? (E.value = !0, Ve(t), I.value = t.uid) : (E.value = !1, D.value = "", I.value = null);
+    }
+    function Me(t) {
+      const l = [];
       function o(n) {
         n.forEach((a) => {
-          const u = {
+          const r = {
             name: a.name,
             details: a.details || "-",
             ancestor: a.ancestor && a.ancestor.name || "-",
             color: a.color || ""
           };
-          s.push(u), a.nodes && a.nodes.length > 0 && o(a.nodes, a.name);
+          l.push(r), a.nodes && a.nodes.length > 0 && o(a.nodes, a.name);
         });
       }
-      return o(t), s;
+      return o(t), l;
     }
-    const Me = k(() => Ge(b.value)), O = k(() => {
+    const We = k(() => Me(b.value)), P = k(() => {
       const t = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
-      ], s = Me.value.map((a, u) => [
+      ], l = We.value.map((a, r) => [
         {
           color: a.color,
           name: a.name
@@ -222,77 +223,91 @@ const Ot = ["id"], Pt = {
       ];
       return {
         head: t,
-        body: s,
+        body: l,
         config: o,
         colNames: n
       };
     });
     function ae(t = null) {
-      at(() => {
-        const s = O.value.body.map((a, u) => [[a[0].name], [a[1]], [a[2]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...O.value.head]]].concat(s), n = gt(o);
-        t ? t(n) : mt({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+      nt(() => {
+        const l = P.value.body.map((a, r) => [[a[0].name], [a[1]], [a[2]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...P.value.head]]].concat(l), n = mt(o);
+        t ? t(n) : yt({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
-    function We() {
+    function Xe() {
       return b.value;
     }
-    const I = c(!1);
-    function Xe(t) {
-      I.value = t, X.value += 1;
+    const N = c(!1);
+    function ne(t) {
+      N.value = t, X.value += 1;
     }
-    function ne() {
+    function re() {
       h.value.showTable = !h.value.showTable;
     }
-    function re() {
+    function ie() {
       h.value.showDataLabels = !h.value.showDataLabels;
     }
-    function ie() {
+    function ue() {
       h.value.showTooltip = !h.value.showTooltip;
     }
-    const N = c(!1);
+    const F = c(!1);
     function V() {
-      N.value = !N.value;
+      F.value = !F.value;
     }
-    const je = k(() => !N.value), { viewBox: D, resetZoom: ue, isZoom: Ye } = wt(z, {
+    const je = k(() => !F.value), { viewBox: B, resetZoom: ce, isZoom: Ye } = Tt(z, {
       x: 0,
       y: 0,
       width: v.value.width <= 0 ? 10 : v.value.width,
       height: v.value.height <= 0 ? 10 : v.value.height
     }, e.value.style.chart.zoom.speed, je);
     function Ze(t) {
-      De("selectNode", t);
+      Be("selectNode", t);
+    }
+    async function qe({ scale: t = 2 } = {}) {
+      if (!O.value) return;
+      const { width: l, height: o } = O.value.getBoundingClientRect(), n = l / o, { imageUri: a, base64: r } = await Ot({ domElement: O.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: a,
+        base64: r,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: o,
+        aspectRatio: n
+      };
     }
-    return be({
-      getData: We,
+    return ke({
+      getData: Xe,
+      getImage: qe,
       generatePdf: ee,
       generateCsv: ae,
       generateImage: te,
-      toggleTable: ne,
-      toggleLabels: re,
-      toggleTooltip: ie,
-      toggleAnnotator: V
-    }), (t, s) => (r(), y("div", {
+      toggleTable: re,
+      toggleLabels: ie,
+      toggleTooltip: ue,
+      toggleAnnotator: V,
+      toggleFullscreen: ne
+    }), (t, l) => (i(), y("div", {
       ref_key: "moleculeChart",
-      ref: E,
-      class: he(`vue-ui-molecule ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      style: B(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `cluster_${R.value}`,
-      onMouseleave: s[2] || (s[2] = (o) => {
-        se.value = null, A.value = null, l(Z)(!1);
+      ref: O,
+      class: pe(`vue-ui-molecule ${N.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: R(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `cluster_${U.value}`,
+      onMouseleave: l[2] || (l[2] = (o) => {
+        se.value = null, I.value = null, s(Z)(!1);
       }),
-      onMouseenter: s[3] || (s[3] = () => l(Z)(!0))
+      onMouseenter: l[3] || (l[3] = () => s(Z)(!0))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), $(l(Oe), {
+      e.value.userOptions.buttons.annotator ? (i(), $(s(Pe), {
         key: 0,
-        svgRef: l(z),
+        svgRef: s(z),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: N.value,
+        active: F.value,
         onClose: V
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      Re.value ? (r(), y("div", Pt, null, 512)) : f("", !0),
-      e.value.style.chart.title.text ? (r(), y("div", At, [
-        (r(), $(l(Fe), {
+      Ue.value ? (i(), y("div", It, null, 512)) : f("", !0),
+      e.value.style.chart.title.text ? (i(), y("div", Nt, [
+        (i(), $(s(Se), {
           key: `title_${j.value}`,
           config: {
             title: {
@@ -306,15 +321,15 @@ const Ot = ["id"], Pt = {
           }
         }, null, 8, ["config"]))
       ])) : f("", !0),
-      e.value.userOptions.show && S.value && (l(q) || l(x)) ? (r(), $(l(Se), {
+      e.value.userOptions.show && L.value && (s(q) || s(x)) ? (i(), $(s(Le), {
         ref_key: "details",
-        ref: Be,
+        ref: Re,
         key: `user_options_${X.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: l(J),
-        isImaging: l(K),
-        uid: R.value,
+        isPrinting: s(J),
+        isImaging: s(K),
+        uid: U.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,
@@ -324,98 +339,99 @@ const Ot = ["id"], Pt = {
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isTooltip: h.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: E.value,
+        chartElement: O.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: N.value,
+        isAnnotation: F.value,
         callbacks: e.value.userOptions.callbacks,
-        onToggleFullscreen: Xe,
-        onGeneratePdf: l(ee),
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: ne,
+        onGeneratePdf: s(ee),
         onGenerateCsv: ae,
-        onGenerateImage: l(te),
-        onToggleTable: ne,
-        onToggleLabels: re,
-        onToggleTooltip: ie,
+        onGenerateImage: s(te),
+        onToggleTable: re,
+        onToggleLabels: ie,
+        onToggleTooltip: ue,
         onToggleAnnotator: V,
-        style: B({
-          visibility: l(q) ? l(x) ? "visible" : "hidden" : "visible"
+        style: R({
+          visibility: s(q) ? s(x) ? "visible" : "hidden" : "visible"
         })
-      }, et({ _: 2 }, [
+      }, tt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: d(({ isOpen: o, color: n }) => [
-            i(t.$slots, "menuIcon", w(T({ isOpen: o, color: n })), void 0, !0)
+            u(t.$slots, "menuIcon", w(T({ isOpen: o, color: n })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: d(() => [
-            i(t.$slots, "optionTooltip", {}, void 0, !0)
+            u(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
           fn: d(() => [
-            i(t.$slots, "optionPdf", {}, void 0, !0)
+            u(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
           fn: d(() => [
-            i(t.$slots, "optionCsv", {}, void 0, !0)
+            u(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
           fn: d(() => [
-            i(t.$slots, "optionImg", {}, void 0, !0)
+            u(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
           fn: d(() => [
-            i(t.$slots, "optionTable", {}, void 0, !0)
+            u(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionLabels ? {
           name: "optionLabels",
           fn: d(() => [
-            i(t.$slots, "optionLabels", {}, void 0, !0)
+            u(t.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: d(({ toggleFullscreen: o, isFullscreen: n }) => [
-            i(t.$slots, "optionFullscreen", w(T({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
+            u(t.$slots, "optionFullscreen", w(T({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: d(({ toggleAnnotator: o, isAnnotator: n }) => [
-            i(t.$slots, "optionAnnotator", w(T({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
+            u(t.$slots, "optionAnnotator", w(T({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
-      S.value ? (r(), y("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
+      L.value ? (i(), y("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: z,
-        xmlns: l(ht),
-        viewBox: `${l(D).x} ${l(D).y} ${l(D).width} ${l(D).height}`,
-        class: he({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
-        style: B(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+        xmlns: s(pt),
+        viewBox: `${s(B).x} ${s(B).y} ${s(B).width} ${s(B).height}`,
+        class: pe({ "vue-data-ui-fullscreen--on": N.value, "vue-data-ui-fulscreen--off": !N.value }),
+        style: R(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        F(l(Te)),
-        t.$slots["chart-background"] ? (r(), y("foreignObject", {
+        S(s(Oe)),
+        t.$slots["chart-background"] ? (i(), y("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -425,10 +441,10 @@ const Ot = ["id"], Pt = {
             pointerEvents: "none"
           }
         }, [
-          i(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Nt)) : f("", !0),
+          u(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, St)) : f("", !0),
         _("defs", null, [
-          (r(!0), y(tt, null, ot(Object.keys(ze.value), (o) => (r(), y("radialGradient", {
+          (i(!0), y(ot, null, lt(Object.keys(He.value), (o) => (i(), y("radialGradient", {
             id: `gradient_${o}`,
             cx: "50%",
             cy: "30%",
@@ -438,63 +454,63 @@ const Ot = ["id"], Pt = {
           }, [
             _("stop", {
               offset: "0%",
-              "stop-color": l(pt)(o, 0.5)
-            }, null, 8, _t),
+              "stop-color": s(ft)(o, 0.5)
+            }, null, 8, Lt),
             _("stop", {
               offset: "100%",
               "stop-color": o
-            }, null, 8, St)
-          ], 8, Ft))), 256))
+            }, null, 8, Dt)
+          ], 8, _t))), 256))
         ]),
-        F(l(Ie), {
+        S(s(Ne), {
           dataset: b.value,
           color: e.value.style.chart.links.stroke,
           backgroundColor: e.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        F(l(Pe), {
+        S(s(Ae), {
           dataset: b.value,
-          hoveredUid: A.value,
+          hoveredUid: I.value,
           stroke: e.value.style.chart.nodes.stroke,
           strokeHovered: e.value.style.chart.nodes.strokeHovered,
           onClick: Ze,
-          onHover: Ve
+          onHover: Ge
         }, {
           node: d(({ node: o }) => [
-            i(t.$slots, "node", w(T({ node: o })), void 0, !0)
+            u(t.$slots, "node", w(T({ node: o })), void 0, !0)
           ]),
           _: 3
         }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        h.value.showDataLabels ? (r(), $(l(Ae), {
+        h.value.showDataLabels ? (i(), $(s(Ie), {
           key: 1,
           dataset: b.value,
           color: e.value.style.chart.color,
-          hoveredUid: A.value
+          hoveredUid: I.value
         }, null, 8, ["dataset", "color", "hoveredUid"])) : f("", !0),
-        i(t.$slots, "svg", { svg: v.value }, void 0, !0)
-      ], 14, It)) : f("", !0),
-      t.$slots.watermark ? (r(), y("div", Lt, [
-        i(t.$slots, "watermark", w(T({ isPrinting: l(J) || l(K) })), void 0, !0)
+        u(t.$slots, "svg", { svg: v.value }, void 0, !0)
+      ], 14, Ft)) : f("", !0),
+      t.$slots.watermark ? (i(), y("div", Bt, [
+        u(t.$slots, "watermark", w(T({ isPrinting: s(J) || s(K) })), void 0, !0)
       ])) : f("", !0),
-      l(Ye) ? (r(), y("div", Dt, [
-        i(t.$slots, "reset-action", { reset: l(ue) }, () => [
+      s(Ye) ? (i(), y("div", Rt, [
+        u(t.$slots, "reset-action", { reset: s(ce) }, () => [
           _("button", {
             "data-cy-reset": "",
             tabindex: "0",
             role: "button",
             class: "vue-data-ui-refresh-button",
-            style: B({
+            style: R({
               background: e.value.style.chart.backgroundColor
             }),
-            onClick: s[0] || (s[0] = (o) => l(ue)(!0))
+            onClick: l[0] || (l[0] = (o) => s(ce)(!0))
           }, [
-            F(l($e), {
+            S(s(we), {
               name: "refresh",
               stroke: e.value.style.chart.color
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
       ])) : f("", !0),
-      S.value ? f("", !0) : (r(), $(l(Ne), {
+      L.value ? f("", !0) : (i(), $(s(Fe), {
         key: 7,
         config: {
           type: "molecule",
@@ -506,11 +522,11 @@ const Ot = ["id"], Pt = {
           }
         }
       }, null, 8, ["config"])),
-      t.$slots.source ? (r(), y("div", Bt, [
-        i(t.$slots, "source", {}, void 0, !0)
+      t.$slots.source ? (i(), y("div", Ut, [
+        u(t.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      F(l(_e), {
-        show: h.value.showTooltip && U.value,
+      S(s(_e), {
+        show: h.value.showTooltip && E.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -520,20 +536,20 @@ const Ot = ["id"], Pt = {
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: E.value,
-        content: L.value,
-        isFullscreen: I.value,
+        parent: O.value,
+        content: D.value,
+        isFullscreen: N.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
       }, {
         "tooltip-before": d(() => [
-          i(t.$slots, "tooltip-before", w(T({ ...H.value })), void 0, !0)
+          u(t.$slots, "tooltip-before", w(T({ ...H.value })), void 0, !0)
         ]),
         "tooltip-after": d(() => [
-          i(t.$slots, "tooltip-after", w(T({ ...H.value })), void 0, !0)
+          u(t.$slots, "tooltip-after", w(T({ ...H.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      S.value ? (r(), $(l(Ce), {
+      L.value ? (i(), $(s($e), {
         key: 9,
         hideDetails: "",
         config: {
@@ -550,32 +566,32 @@ const Ot = ["id"], Pt = {
         }
       }, {
         content: d(() => [
-          (r(), $(l(we), {
+          (i(), $(s(Te), {
             key: `table_${Y.value}`,
-            colNames: O.value.colNames,
-            head: O.value.head,
-            body: O.value.body,
-            config: O.value.config,
+            colNames: P.value.colNames,
+            head: P.value.head,
+            body: P.value.body,
+            config: P.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: s[1] || (s[1] = (o) => h.value.showTable = !1)
+            onClose: l[1] || (l[1] = (o) => h.value.showTable = !1)
           }, {
             th: d(({ th: o }) => [
               _("div", {
                 innerHTML: o,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Rt)
+              }, null, 8, Et)
             ]),
             td: d(({ td: o }) => [
-              lt(st(o.name || o), 1)
+              st(at(o.name || o), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : f("", !0)
-    ], 46, Ot));
+    ], 46, At));
   }
-}, Xt = /* @__PURE__ */ Tt(Ut, [["__scopeId", "data-v-20a9487b"]]);
+}, Zt = /* @__PURE__ */ Pt(xt, [["__scopeId", "data-v-7d6bc092"]]);
 export {
-  Xt as default
+  Zt as default
 };