vue-data-ui 3.16.4 → 3.17.0

package/dist/{vue-ui-onion-QsjwjlCa.js → vue-ui-onion-MM3QZLzF.js}

@@ -1,8 +1,8 @@
-import { defineAsyncComponent as L, computed as h, ref as s, toRefs as Jt, watch as q, shallowRef as et, onMounted as Qt, onBeforeUnmount as Zt, openBlock as r, createElementBlock as g, unref as u, normalizeStyle as R, normalizeClass as oe, createElementVNode as S, toDisplayString as J, createBlock as O, createCommentVNode as m, withCtx as v, renderSlot as d, normalizeProps as $, guardReactiveProps as T, createSlots as tt, createVNode as Ce, Fragment as Q, renderList as Z, Teleport as ea, resolveDynamicComponent as ta, mergeProps as aa, createTextVNode as at, nextTick as $e } from "vue";
-import { j as la, t as lt, m as oa, p as ot, n as na, o as nt, q as Te, s as sa, k as Pe, l as E, X as ra, T as st, a0 as ua, a1 as ia, U as ca } from "./lib-DBptbyyI.js";
+import { defineAsyncComponent as L, computed as h, ref as s, toRefs as Jt, watch as q, shallowRef as et, onMounted as Qt, onBeforeUnmount as Zt, openBlock as u, createElementBlock as g, unref as r, normalizeStyle as R, normalizeClass as ne, createElementVNode as S, toDisplayString as J, createBlock as O, createCommentVNode as m, withCtx as v, renderSlot as d, normalizeProps as k, guardReactiveProps as w, createSlots as tt, createVNode as Ce, Fragment as Q, renderList as Z, Teleport as ea, resolveDynamicComponent as ta, mergeProps as aa, createTextVNode as at, nextTick as $e } from "vue";
+import { j as la, t as lt, m as oa, p as ot, n as na, o as nt, q as Te, s as sa, k as Pe, l as E, X as ua, T as st, a0 as ra, a1 as ia, U as ca } from "./lib-DBptbyyI.js";
 import { b as va } from "./labelUtils-CqTHa20R.js";
 import { t as da, u as ha } from "./useResponsive-DfdjqQps.js";
-import { u as ga } from "./useConfig-CpJA0VZa.js";
+import { u as ga } from "./useConfig-ChRble71.js";
 import { u as fa, B as pa } from "./BaseScanner-BhhkKVoj.js";
 import { u as ya } from "./usePrinter-CEpYU3r5.js";
 import { u as ma } from "./useSvgExport-ByUukOZt.js";
@@ -43,8 +43,8 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
     }
   },
   emits: ["selectLegend", "copyAlt"],
-  setup(rt, { expose: ut, emit: it }) {
-    const ct = L(() => import("./Tooltip-Bf-kM3_A.js")), vt = L(() => import("./BaseIcon-Cb3zzG6s.js")), dt = L(() => import("./vue-ui-accordion-BF4v32wv.js")), ht = L(() => import("./DataTable-DT2kIdQ6.js")), gt = L(() => import("./UserOptions-rW2fRf3V.js")), ft = L(() => import("./PenAndPaper-Ct3qJ4lA.js")), pt = L(() => import("./PackageVersion-1BHnPIBZ.js")), yt = L(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_onion: mt } = ga(), { isThemeValid: bt, warnInvalidTheme: kt } = ba(), P = rt, Se = h(() => !!P.dataset && P.dataset.length), k = s(la()), wt = s(null), xe = s(0), Y = s(!1), ne = s(""), y = s([]), I = s(null), Oe = s(null), Ie = s(null), De = s(null), Fe = s(null), Me = s(0), _e = s(0), Le = s(0), D = s(!1), Re = s(!1), X = s(null), ee = s(!1), te = s(!1), F = s(null), Be = s({ x: 0, y: 0 }), G = s("pointer"), se = s(!1), e = s(ie()), B = h(() => e.value.userOptions.useCursorPointer), Ct = h(() => lt({
+  setup(ut, { expose: rt, emit: it }) {
+    const ct = L(() => import("./Tooltip-C8KGyqQk.js")), vt = L(() => import("./BaseIcon-Cb3zzG6s.js")), dt = L(() => import("./vue-ui-accordion-CnDW2UQL.js")), ht = L(() => import("./DataTable-DT2kIdQ6.js")), gt = L(() => import("./UserOptions-rW2fRf3V.js")), ft = L(() => import("./PenAndPaper-Ct3qJ4lA.js")), pt = L(() => import("./PackageVersion-B3kmPxTR.js")), yt = L(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_onion: mt } = ga(), { isThemeValid: bt, warnInvalidTheme: kt } = ba(), P = ut, Se = h(() => !!P.dataset && P.dataset.length), C = s(la()), wt = s(null), xe = s(0), Y = s(!1), se = s(""), y = s([]), I = s(null), Oe = s(null), Ie = s(null), De = s(null), Fe = s(null), Me = s(0), _e = s(0), Le = s(0), D = s(!1), Re = s(!1), X = s(null), ee = s(!1), te = s(!1), F = s(null), Be = s({ x: 0, y: 0 }), G = s("pointer"), ue = s(!1), e = s(ce()), B = h(() => e.value.userOptions.useCursorPointer), Ct = h(() => lt({
       defaultConfig: {
         userOptions: { show: !1 },
         table: { show: !1 },
@@ -67,7 +67,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
     })), { loading: A, FINAL_DATASET: Ne, manualLoading: re } = fa({
       ...Jt(P),
       FINAL_CONFIG: e,
-      prepareConfig: ie,
+      prepareConfig: ce,
       callback: () => {
         Promise.resolve().then(async () => {
           await $e(), Ge();
@@ -83,8 +83,8 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         defaultConfig: e.value,
         userConfig: Ct.value
       })
-    }), { userOptionsVisible: ue, setUserOptionsVisibility: ze, keepUserOptionState: Ve } = ka({ config: e.value }), { svgRef: M } = wa({ config: e.value.style.chart.title });
-    function ie() {
+    }), { userOptionsVisible: ie, setUserOptionsVisibility: ze, keepUserOptionState: Ve } = ka({ config: e.value }), { svgRef: M } = wa({ config: e.value.style.chart.title });
+    function ce() {
       const t = Ae({
         userConfig: P.config,
         defaultConfig: mt
@@ -105,18 +105,18 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       };
     }
     q(() => P.config, (t) => {
-      A.value || (e.value = ie()), ue.value = !e.value.userOptions.showOnChartHover, Xe(), Me.value += 1, _e.value += 1, Le.value += 1, w.value.showTable = e.value.table.show, w.value.showTooltip = e.value.style.chart.tooltip.show;
+      A.value || (e.value = ce()), ie.value = !e.value.userOptions.showOnChartHover, Xe(), Me.value += 1, _e.value += 1, Le.value += 1, $.value.showTable = e.value.table.show, $.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: ce, isImaging: ve, generatePdf: Ue, generateImage: Ee } = ya({
-      elementId: `vue-ui-onion_${k.value}`,
+    const { isPrinting: ve, isImaging: de, generatePdf: Ue, generateImage: Ee } = ya({
+      elementId: `vue-ui-onion_${C.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-onion",
       options: e.value.userOptions.print
-    }), $t = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), Tt = h(() => na(e.value.customPalette)), w = s({
+    }), $t = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), Tt = h(() => na(e.value.customPalette)), $ = s({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
     q(e, () => {
-      w.value = {
+      $.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.chart.tooltip.show
       };
@@ -145,7 +145,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       sizeRef: Pt,
       labelClass: ".vue-ui-onion-label"
     }), At = h(() => e.value.debug);
-    let de = null;
+    let he = null;
     function Xe() {
       if (nt(P.dataset) && (Te({
         componentName: "VueUiOnion",
@@ -153,7 +153,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         debug: At.value
       }), re.value = !0), nt(P.dataset) || (re.value = e.value.loading), e.value.responsive) {
         const l = da(() => {
-          de && clearTimeout(de), D.value = !0;
+          he && clearTimeout(he), D.value = !0;
           let { width: a, height: o } = ha({
             chart: I.value,
             title: e.value.style.chart.title.text ? Oe.value : null,
@@ -162,7 +162,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
             noTitle: Fe.value
           });
           o -= 12, requestAnimationFrame(async () => {
-            n.value.width = a, n.value.height = o, n.value.padding.top = Math.max(a, o) * 0.125, n.value.padding.right = Math.max(a, o) * 0.125, n.value.padding.bottom = Math.max(a, o) * 0.125, n.value.padding.left = Math.max(a, o) * 0.125, n.value.minRadius = Math.min(a, o) * 0.125, de = setTimeout(() => {
+            n.value.width = a, n.value.height = o, n.value.padding.top = Math.max(a, o) * 0.125, n.value.padding.right = Math.max(a, o) * 0.125, n.value.padding.bottom = Math.max(a, o) * 0.125, n.value.padding.left = Math.max(a, o) * 0.125, n.value.minRadius = Math.min(a, o) * 0.125, he = setTimeout(() => {
               D.value = !1, Ye();
             }, 0);
           });
@@ -198,7 +198,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         index: l
       });
     }), Ne.value.map((t, l) => {
-      const a = `onion_serie_${l}_${k.value}`;
+      const a = `onion_serie_${l}_${C.value}`;
       return {
         ...t,
         percentage: t.percentage || 0,
@@ -225,7 +225,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         v: t.percentage ?? 0,
         s: "%",
         r: e.value.style.chart.legend.roundingPercentage
-      }), C = ye({
+      }), T = me({
         showVal: a,
         showPercentage: o,
         val: c,
@@ -234,19 +234,19 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       });
       return {
         ...t,
-        display: `${t.name}${a || o ? ": " : ""}${C}`
+        display: `${t.name}${a || o ? ": " : ""}${T}`
       };
-    })), K = s(b.value), St = h(() => e.value.useStartAnimation), xt = s(null), Ot = h(() => Math.max(...b.value.map((t) => t.percentage))), he = s(!1);
+    })), K = s(b.value), St = h(() => e.value.useStartAnimation), xt = s(null), Ot = h(() => Math.max(...b.value.map((t) => t.percentage))), ge = s(!1);
     q(() => b.value, Ge, { immediate: !0, deep: !0 }), q(() => P.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (re.value = !1);
     }, { deep: !0 });
     function Ge() {
-      if (St.value && !he.value && !A.value) {
+      if (St.value && !ge.value && !A.value) {
         let l = function() {
-          t >= Ot.value ? (cancelAnimationFrame(xt.value), K.value = b.value, he.value = !0) : (K.value = b.value.map((a) => ({
+          t >= Ot.value ? (cancelAnimationFrame(xt.value), K.value = b.value, ge.value = !0) : (K.value = b.value.map((a) => ({
             ...a,
             percentage: t < a.targetPercentage ? t : a.targetPercentage
-          })), t += 1, requestAnimationFrame(l), he.value = !0);
+          })), t += 1, requestAnimationFrame(l), ge.value = !0);
         };
         K.value = b.value.map((a) => ({
           ...a,
@@ -327,7 +327,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
     function Rt() {
       return f.value;
     }
-    const ge = h(() => {
+    const fe = h(() => {
       const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], l = f.value.map((a) => [
         a.name,
         a.percentage,
@@ -335,7 +335,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       ]);
       return { head: t, body: l };
     }), U = h(() => {
-      const t = ge.value.head, l = f.value.map((o) => [
+      const t = fe.value.head, l = f.value.map((o) => [
         `<span style="color:${o.color}" aria-hidden="true">⬤</span> ${o.name}`,
         `${Number(o.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
         `${o.prefix || ""}${[null, void 0, NaN, "NaN"].includes(o.value) ? "-" : o.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${o.suffix || ""}`
@@ -354,9 +354,9 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       };
       return { head: t, body: l, config: a, colNames: t };
     });
-    function fe(t = null) {
+    function pe(t = null) {
       $e(() => {
-        const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = ge.value.head, o = ge.value.body, c = l.concat([a]).concat(o), i = ua(c);
+        const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = fe.value.head, o = fe.value.body, c = l.concat([a]).concat(o), i = ra(c);
         t ? t(i) : ia({ csvContent: i, title: e.value.style.chart.title.text || "vue-ui-onion" });
       });
     }
@@ -364,13 +364,13 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
     function We(t) {
       z.value = t, xe.value += 1;
     }
-    function pe({ datapoint: t }) {
+    function ye({ datapoint: t }) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
     }
     function je({ datapoint: t }) {
       x.value = void 0, Y.value = !1, F.value = null, G.value = "pointer", e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
     }
-    function ye({
+    function me({
       val: t,
       percentage: l,
       showVal: a,
@@ -386,7 +386,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       });
     }
     function Bt(t, l) {
-      const a = e.value.style.chart.layout.labels.value.show, o = e.value.style.chart.layout.labels.percentage.show, c = ye({
+      const a = e.value.style.chart.layout.labels.value.show, o = e.value.style.chart.layout.labels.percentage.show, c = me({
         config: e.value.style.chart.layout.labels,
         showVal: a,
         showPercentage: o,
@@ -409,36 +409,36 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       });
       return `${t.name}${a || o ? ": " : ""}${c}`;
     }
-    const me = s(null);
+    const le = s(null);
     function be({ datapoint: t, seriesIndex: l, show: a = !0, triggerMode: o = "pointer" }) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex }), G.value = o, F.value = l;
       const c = t.absoluteIndex;
-      x.value = l, me.value = {
+      x.value = l, le.value = {
         datapoint: t,
         seriesIndex: c,
         series: b.value,
         config: e.value
       }, Y.value = a;
       let i = "";
-      const C = e.value.style.chart.tooltip.customFormat;
-      if (st(C) && ca(() => C({
+      const T = e.value.style.chart.tooltip.customFormat;
+      if (st(T) && ca(() => T({
         seriesIndex: c,
         datapoint: t,
         series: b.value,
         config: e.value
       })))
-        ne.value = C({
+        se.value = T({
           seriesIndex: c,
           datapoint: t,
           series: b.value,
           config: e.value
         });
       else {
-        const le = e.value.style.chart.tooltip.showPercentage, qt = e.value.style.chart.tooltip.showValue;
-        i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/></svg>`, i += `<b>${ye({
+        const oe = e.value.style.chart.tooltip.showPercentage, qt = e.value.style.chart.tooltip.showValue;
+        i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/></svg>`, i += `<b>${me({
           config: e.value.style.chart.tooltip,
           showVal: qt,
-          showPercentage: le,
+          showPercentage: oe,
           val: `<span>${Pe(
             e.value.style.chart.layout.labels.value.formatter,
             t.value,
@@ -458,14 +458,14 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
             s: "%",
             r: e.value.style.chart.tooltip.roundingPercentage
           })
-        })}</b></div>`, ne.value = `<div>${i}</div>`;
+        })}</b></div>`, se.value = `<div>${i}</div>`;
       }
     }
     function qe() {
-      w.value.showTable = !w.value.showTable;
+      $.value.showTable = !$.value.showTable;
     }
     function Je() {
-      w.value.showTooltip = !w.value.showTooltip;
+      $.value.showTooltip = !$.value.showTooltip;
     }
     const W = s(!1);
     function ke() {
@@ -484,7 +484,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       };
     }
     const j = h(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, l = w.value.showTable;
+      const t = e.value.table.useDialog && !e.value.table.show, l = $.value.showTable;
       return {
         component: t ? yt : dt,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
@@ -514,7 +514,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         }
       };
     });
-    q(() => w.value.showTable, (t) => {
+    q(() => $.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && X.value ? X.value.open() : "close" in X.value && X.value.close());
     });
     const zt = h(() => H.value.map((t) => ({
@@ -564,10 +564,10 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       }));
     }
     function Ht() {
-      F.value = null, se.value = !0;
+      F.value = null, ue.value = !0;
     }
     function Kt() {
-      F.value = null, G.value = "pointer", Y.value = !1, x.value = void 0, se.value = !1;
+      F.value = null, G.value = "pointer", Y.value = !1, x.value = void 0, ue.value = !1;
     }
     function Wt(t) {
       if (!M.value || W.value || document.activeElement !== M.value || !f.value.length) return;
@@ -579,16 +579,16 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       }
       if (o) {
         if (F.value === null) return;
-        const le = f.value[F.value];
-        if (!le) return;
-        pe({ datapoint: le });
+        const oe = f.value[F.value];
+        if (!oe) return;
+        ye({ datapoint: oe });
         return;
       }
       let i = F.value;
       i === null || i < 0 || i >= f.value.length ? i = a ? 0 : f.value.length - 1 : a ? (i += 1, i >= f.value.length && (i = 0)) : l && (i -= 1, i < 0 && (i = f.value.length - 1));
-      const C = f.value[i];
-      C && (jt(i), be({
-        datapoint: C,
+      const T = f.value[i];
+      T && (jt(i), be({
+        datapoint: T,
         seriesIndex: i,
         show: !0,
         triggerMode: "keyboard"
@@ -598,21 +598,21 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       if (!Number.isFinite(t) || !M.value) return;
       const l = f.value[t];
       if (!l) return;
-      const a = l.radius, o = Math.PI * 7 / 4, c = p.value.centerX + a * Math.cos(o), i = p.value.centerY + a * Math.sin(o), C = M.value.getBoundingClientRect();
+      const a = l.radius, o = Math.PI * 7 / 4, c = p.value.centerX + a * Math.cos(o), i = p.value.centerY + a * Math.sin(o), T = M.value.getBoundingClientRect();
       Be.value = {
-        x: C.left + c / n.value.width * C.width,
-        y: C.top + i / n.value.height * C.height
+        x: T.left + c / n.value.width * T.width,
+        y: T.top + i / n.value.height * T.height
       };
     }
     const we = h(() => {
       const t = U.value?.colNames ?? [], l = U.value?.body ?? [];
       return { headers: t, rows: l };
     });
-    return ut({
+    return rt({
       getData: Rt,
       getImage: Nt,
       generatePdf: Ue,
-      generateCsv: fe,
+      generateCsv: pe,
       generateImage: Ee,
       generateSvg: Qe,
       hideSeries: Lt,
@@ -622,32 +622,32 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       toggleAnnotator: ke,
       toggleFullscreen: We,
       copyAlt: Ze
-    }), (t, l) => (r(), g("div", {
-      class: oe(`vue-data-ui-component vue-ui-onion ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+    }), (t, l) => (u(), g("div", {
+      class: ne(`vue-data-ui-component vue-ui-onion ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "onionChart",
       ref: I,
-      id: `vue-ui-onion_${k.value}`,
+      id: `vue-ui-onion_${C.value}`,
       style: R(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      onMouseenter: l[4] || (l[4] = () => u(ze)(!0)),
-      onMouseleave: l[5] || (l[5] = () => u(ze)(!1))
+      onMouseenter: l[4] || (l[4] = () => r(ze)(!0)),
+      onMouseleave: l[5] || (l[5] = () => r(ze)(!1))
     }, [
       S("div", {
-        id: `chart-instructions-${k.value}`,
+        id: `chart-instructions-${C.value}`,
         class: "sr-only"
       }, [
         S("p", null, J(e.value.a11y.translations.keyboardNavigation), 1)
       ], 8, Da),
-      we.value?.rows?.length ? (r(), O(Sa, {
+      we.value?.rows?.length ? (u(), O(Sa, {
         key: 0,
-        uid: k.value,
+        uid: C.value,
         head: we.value.headers,
         body: we.value.rows,
         notice: e.value.a11y.translations.tableAvailable,
         caption: e.value.a11y.translations.tableCaption
       }, null, 8, ["uid", "head", "body", "notice", "caption"])) : m("", !0),
-      e.value.userOptions.buttons.annotator ? (r(), O(u(ft), {
+      e.value.userOptions.buttons.annotator ? (u(), O(r(ft), {
         key: 1,
-        svgRef: u(M),
+        svgRef: r(M),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: W.value,
@@ -658,36 +658,36 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
           d(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": v(({ color: a }) => [
-          d(t.$slots, "annotator-action-color", $(T({ color: a })), void 0, !0)
+          d(t.$slots, "annotator-action-color", k(w({ color: a })), void 0, !0)
         ]),
         "annotator-action-draw": v(({ mode: a }) => [
-          d(t.$slots, "annotator-action-draw", $(T({ mode: a })), void 0, !0)
+          d(t.$slots, "annotator-action-draw", k(w({ mode: a })), void 0, !0)
         ]),
         "annotator-action-undo": v(({ disabled: a }) => [
-          d(t.$slots, "annotator-action-undo", $(T({ disabled: a })), void 0, !0)
+          d(t.$slots, "annotator-action-undo", k(w({ disabled: a })), void 0, !0)
         ]),
         "annotator-action-redo": v(({ disabled: a }) => [
-          d(t.$slots, "annotator-action-redo", $(T({ disabled: a })), void 0, !0)
+          d(t.$slots, "annotator-action-redo", k(w({ disabled: a })), void 0, !0)
         ]),
         "annotator-action-delete": v(({ disabled: a }) => [
-          d(t.$slots, "annotator-action-delete", $(T({ disabled: a })), void 0, !0)
+          d(t.$slots, "annotator-action-delete", k(w({ disabled: a })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : m("", !0),
-      $t.value ? (r(), g("div", {
+      $t.value ? (u(), g("div", {
         key: 2,
         ref_key: "noTitle",
         ref: Fe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : m("", !0),
-      e.value.style.chart.title.text ? (r(), g("div", {
+      e.value.style.chart.title.text ? (u(), g("div", {
         key: 3,
         ref_key: "chartTitle",
         ref: Oe,
         style: "width:100%;background:transparent"
       }, [
-        (r(), O(Ta, {
+        (u(), O(Ta, {
           key: `title_${Me.value}`,
           config: {
             title: {
@@ -702,17 +702,17 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         }, null, 8, ["config"]))
       ], 512)) : m("", !0),
       S("div", {
-        id: `legend-top-${k.value}`
+        id: `legend-top-${C.value}`
       }, null, 8, Fa),
-      e.value.userOptions.show && Se.value && (u(Ve) || u(ue)) ? (r(), O(u(gt), {
+      e.value.userOptions.show && Se.value && (r(Ve) || r(ie)) ? (u(), O(r(gt), {
         ref_key: "details",
         ref: wt,
         key: `user_options${xe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: u(ve),
-        isPrinting: u(ce),
-        uid: k.value,
+        isImaging: r(de),
+        isPrinting: r(ve),
+        uid: C.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -722,7 +722,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         hasAltCopy: e.value.userOptions.buttons.altCopy,
         isFullscreen: z.value,
-        isTooltip: w.value.showTooltip,
+        isTooltip: $.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: I.value,
         position: e.value.userOptions.position,
@@ -733,8 +733,8 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         tableDialog: e.value.table.useDialog,
         isCursorPointer: B.value,
         onToggleFullscreen: We,
-        onGeneratePdf: u(Ue),
-        onGenerateCsv: fe,
+        onGeneratePdf: r(Ue),
+        onGenerateCsv: pe,
         onGenerateImage: Gt,
         onGenerateSvg: Qe,
         onToggleTable: qe,
@@ -742,13 +742,13 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         onToggleAnnotator: ke,
         onCopyAlt: Ze,
         style: R({
-          visibility: u(Ve) ? u(ue) ? "visible" : "hidden" : "visible"
+          visibility: r(Ve) ? r(ie) ? "visible" : "hidden" : "visible"
         })
       }, tt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: v(({ isOpen: a, color: o }) => [
-            d(t.$slots, "menuIcon", $(T({ isOpen: a, color: o })), void 0, !0)
+            d(t.$slots, "menuIcon", k(w({ isOpen: a, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -797,32 +797,32 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: v(({ toggleFullscreen: a, isFullscreen: o }) => [
-            d(t.$slots, "optionFullscreen", $(T({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+            d(t.$slots, "optionFullscreen", k(w({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: v(({ toggleAnnotator: a, isAnnotator: o }) => [
-            d(t.$slots, "optionAnnotator", $(T({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+            d(t.$slots, "optionAnnotator", k(w({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAltCopy ? {
           name: "optionAltCopy",
           fn: v(({ altCopy: a }) => [
-            d(t.$slots, "optionAltCopy", $(T({ altCopy: a })), void 0, !0)
+            d(t.$slots, "optionAltCopy", k(w({ altCopy: a })), void 0, !0)
           ]),
           key: "9"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : m("", !0),
       S("div", Ma, [
-        (r(), g("svg", {
+        (u(), g("svg", {
           ref_key: "svgRef",
           ref: M,
-          xmlns: u(ra),
-          "aria-describedby": `chart-instructions-${k.value}`,
-          class: oe({ "vue-data-ui-fullscreen--on": z.value, "vue-data-ui-fulscreen--off": !z.value, resizing: D.value }),
+          xmlns: r(ua),
+          "aria-describedby": `chart-instructions-${C.value}`,
+          class: ne({ "vue-data-ui-fullscreen--on": z.value, "vue-data-ui-fulscreen--off": !z.value, resizing: D.value }),
           viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
           style: R(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`),
           tabindex: "0",
@@ -830,8 +830,8 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
           onBlur: Kt,
           onKeydown: Wt
         }, [
-          Ce(u(pt)),
-          t.$slots["chart-background"] ? (r(), g("foreignObject", {
+          Ce(r(pt)),
+          t.$slots["chart-background"] ? (u(), g("foreignObject", {
             key: 0,
             x: 0,
             y: 0,
@@ -843,7 +843,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
           }, [
             d(t.$slots, "chart-background", {}, void 0, !0)
           ], 8, La)) : m("", !0),
-          (r(!0), g(Q, null, Z(f.value, (a, o) => (r(), g("circle", {
+          (u(!0), g(Q, null, Z(f.value, (a, o) => (u(), g("circle", {
             cx: p.value.centerX,
             cy: p.value.centerY,
             r: a.radius <= 0 ? 1e-4 : a.radius,
@@ -853,15 +853,15 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
             "stroke-dasharray": a.path.bgDashArray,
             "stroke-dashoffset": a.path.fullOffset,
             "stroke-linecap": "round",
-            class: oe({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== o }),
+            class: ne({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== o }),
             style: R({
               transform: "rotate(-90deg)",
               transformOrigin: "50% 50%",
-              transition: D.value || u(A) ? "none" : "all 0.3s ease-in-out !important",
-              animation: D.value || u(A) ? "none" : "xyAnimation 0.5s ease-in"
+              transition: D.value || r(A) ? "none" : "all 0.3s ease-in-out !important",
+              animation: D.value || r(A) ? "none" : "xyAnimation 0.5s ease-in"
             })
           }, null, 14, Ra))), 256)),
-          (r(!0), g(Q, null, Z(f.value, (a, o) => (r(), g("circle", {
+          (u(!0), g(Q, null, Z(f.value, (a, o) => (u(), g("circle", {
             cx: p.value.centerX,
             cy: p.value.centerY,
             r: a.radius < 0 ? 1e-4 : a.radius,
@@ -870,18 +870,18 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
             fill: "none",
             "stroke-dasharray": a.path.dashArray,
             "stroke-dashoffset": a.path.dashOffset,
-            class: oe({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== o }),
+            class: ne({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== o }),
             "stroke-linecap": "round",
             style: R({
               transform: "rotate(-90deg)",
               transformOrigin: "50% 50%",
-              transition: D.value || u(A) ? "none" : "all 0.3s ease-in-out !important",
-              animation: D.value || u(A) ? "none" : "xyAnimation 0.5s ease-in"
+              transition: D.value || r(A) ? "none" : "all 0.3s ease-in-out !important",
+              animation: D.value || r(A) ? "none" : "xyAnimation 0.5s ease-in"
             })
           }, null, 14, Ba))), 256)),
           S("defs", null, [
             S("filter", {
-              id: `blur_${k.value}`,
+              id: `blur_${C.value}`,
               x: "-50%",
               y: "-50%",
               width: "200%",
@@ -893,11 +893,11 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
               }, null, 8, za)
             ], 8, Na)
           ]),
-          e.value.style.chart.useGradient ? (r(), g("g", {
+          e.value.style.chart.useGradient ? (u(), g("g", {
             key: 1,
-            filter: `url(#blur_${k.value})`
+            filter: `url(#blur_${C.value})`
           }, [
-            (r(!0), g(Q, null, Z(f.value, (a, o) => (r(), g("circle", {
+            (u(!0), g(Q, null, Z(f.value, (a, o) => (u(), g("circle", {
               cx: p.value.centerX,
               cy: p.value.centerY,
               r: a.radius <= 0 ? 1e-4 : a.radius,
@@ -910,12 +910,12 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
               style: R({
                 transform: "rotate(-90deg)",
                 transformOrigin: "50% 50%",
-                transition: D.value || u(A) ? "none" : "all 0.3s ease-in-out !important",
-                animation: D.value || u(A) ? "none" : "xyAnimation 0.5s ease-in"
+                transition: D.value || r(A) ? "none" : "all 0.3s ease-in-out !important",
+                animation: D.value || r(A) ? "none" : "xyAnimation 0.5s ease-in"
               })
             }, null, 12, Ua))), 256))
           ], 8, Va)) : m("", !0),
-          (r(!0), g(Q, null, Z(f.value, (a, o) => (r(), g("circle", {
+          (u(!0), g(Q, null, Z(f.value, (a, o) => (u(), g("circle", {
             cx: p.value.centerX,
             cy: p.value.centerY,
             r: a.radius <= 0 ? 1e-4 : a.radius,
@@ -937,10 +937,10 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
               triggerMode: "pointer"
             }),
             onMouseleave: (c) => je({ datapoint: a }),
-            onClick: (c) => pe({ datapoint: a })
+            onClick: (c) => ye({ datapoint: a })
           }, null, 40, Ea))), 256)),
-          e.value.style.chart.layout.labels.show ? (r(), g("g", Ya, [
-            (r(!0), g(Q, null, Z(f.value, (a, o) => (r(), g("g", {
+          e.value.style.chart.layout.labels.show ? (u(), g("g", Ya, [
+            (u(!0), g(Q, null, Z(f.value, (a, o) => (u(), g("g", {
               onMouseenter: (c) => be({
                 datapoint: a,
                 show: !0,
@@ -948,9 +948,9 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
                 triggerMode: "pointer"
               }),
               onMouseleave: (c) => je({ datapoint: a }),
-              onClick: (c) => pe({ datapoint: a })
+              onClick: (c) => ye({ datapoint: a })
             }, [
-              y.value.includes(a.id) ? m("", !0) : (r(), g("text", {
+              y.value.includes(a.id) ? m("", !0) : (u(), g("text", {
                 key: 0,
                 class: "vue-ui-onion-label",
                 x: n.value.width / 2 - N.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
@@ -965,30 +965,30 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
           d(t.$slots, "svg", {
             svg: {
               ...n.value,
-              isPrintingImg: u(ce) | u(ve) | ee.value,
+              isPrintingImg: r(ve) | r(de) | ee.value,
               isPrintingSvg: te.value
             }
           }, void 0, !0)
         ], 46, _a)),
-        t.$slots.hint ? (r(), g("div", Ha, [
-          d(t.$slots, "hint", $(T({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: se.value })), void 0, !0)
+        t.$slots.hint ? (u(), g("div", Ha, [
+          d(t.$slots, "hint", k(w({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: ue.value })), void 0, !0)
         ])) : m("", !0)
       ]),
-      t.$slots.watermark ? (r(), g("div", Ka, [
-        d(t.$slots, "watermark", $(T({ isPrinting: u(ce) || u(ve) || ee.value || te.value })), void 0, !0)
+      t.$slots.watermark ? (u(), g("div", Ka, [
+        d(t.$slots, "watermark", k(w({ isPrinting: r(ve) || r(de) || ee.value || te.value })), void 0, !0)
       ])) : m("", !0),
       S("div", {
-        id: `legend-bottom-${k.value}`
+        id: `legend-bottom-${C.value}`
       }, null, 8, Wa),
-      Re.value ? (r(), O(ea, {
+      Re.value ? (u(), O(ea, {
         key: 6,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${k.value}` : `#legend-bottom-${k.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${C.value}` : `#legend-bottom-${C.value}`
       }, [
         S("div", {
           ref_key: "chartLegend",
           ref: Ie
         }, [
-          e.value.style.chart.legend.show ? (r(), O(Pa, {
+          e.value.style.chart.legend.show ? (u(), O(Pa, {
             key: `legend_${Le.value}`,
             legendSet: H.value,
             config: It.value,
@@ -996,7 +996,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
             onClickMarker: l[0] || (l[0] = ({ legend: a }) => ae(a.id))
           }, {
             item: v(({ legend: a }) => [
-              u(A) ? m("", !0) : (r(), g("div", {
+              r(A) ? m("", !0) : (u(), g("div", {
                 key: 0,
                 "data-cy-legend-item": "",
                 onClick: (o) => a.segregate(),
@@ -1004,7 +1004,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
               }, J(a.display), 13, ja))
             ]),
             legendToggle: v(() => [
-              H.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !u(A) ? (r(), O(xa, {
+              H.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !r(A) ? (u(), O(xa, {
                 key: 0,
                 backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
                 color: e.value.style.chart.legend.selectAllToggle.color,
@@ -1021,7 +1021,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
           }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : m("", !0),
-      t.$slots.source ? (r(), g("div", {
+      t.$slots.source ? (u(), g("div", {
         key: 7,
         ref_key: "source",
         ref: De,
@@ -1029,9 +1029,9 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
       }, [
         d(t.$slots, "source", {}, void 0, !0)
       ], 512)) : m("", !0),
-      Ce(u(ct), {
+      Ce(r(ct), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
-        show: w.value.showTooltip && Y.value,
+        show: $.value.showTooltip && Y.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -1042,9 +1042,9 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: I.value,
-        content: ne.value,
+        content: se.value,
         isFullscreen: z.value,
-        isCustom: u(st)(e.value.style.chart.tooltip.customFormat),
+        isCustom: r(st)(e.value.style.chart.tooltip.customFormat),
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
@@ -1053,20 +1053,23 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         a11yPosition: Be.value
       }, {
         "tooltip-before": v(() => [
-          d(t.$slots, "tooltip-before", $(T({ ...me.value })), void 0, !0)
+          d(t.$slots, "tooltip-before", k(w({ ...le.value })), void 0, !0)
+        ]),
+        tooltip: v(() => [
+          d(t.$slots, "tooltip", k(w({ ...le.value })), void 0, !0)
         ]),
         "tooltip-after": v(() => [
-          d(t.$slots, "tooltip-after", $(T({ ...me.value })), void 0, !0)
+          d(t.$slots, "tooltip-after", k(w({ ...le.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
-      Se.value && e.value.userOptions.buttons.table ? (r(), O(ta(j.value.component), aa({ key: 8 }, j.value.props, {
+      Se.value && e.value.userOptions.buttons.table ? (u(), O(ta(j.value.component), aa({ key: 8 }, j.value.props, {
         ref_key: "tableUnit",
         ref: X,
-        onClose: l[3] || (l[3] = (a) => w.value.showTable = !1)
+        onClose: l[3] || (l[3] = (a) => $.value.showTable = !1)
       }), tt({
         content: v(() => [
-          (r(), O(u(ht), {
+          (u(), O(r(ht), {
             key: `table_${_e.value}`,
             colNames: U.value.colNames,
             head: U.value.head,
@@ -1075,7 +1078,7 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
             title: e.value.table.useDialog ? "" : j.value.title,
             withCloseButton: !e.value.table.useDialog,
             isCursorPointer: B.value,
-            onClose: l[2] || (l[2] = (a) => w.value.showTable = !1)
+            onClose: l[2] || (l[2] = (a) => $.value.showTable = !1)
           }, {
             th: v(({ th: a }) => [
               at(J(a), 1)
@@ -1101,10 +1104,10 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
             S("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: l[1] || (l[1] = (a) => fe(e.value.userOptions.callbacks.csv)),
+              onClick: l[1] || (l[1] = (a) => pe(e.value.userOptions.callbacks.csv)),
               style: R({ cursor: B.value ? "pointer" : "default" })
             }, [
-              Ce(u(vt), {
+              Ce(r(vt), {
                 name: "fileCsv",
                 stroke: j.value.props.color
               }, null, 8, ["stroke"])
@@ -1114,11 +1117,11 @@ const Ia = ["id"], Da = ["id"], Fa = ["id"], Ma = { style: { position: "relative
         } : void 0
       ]), 1040)) : m("", !0),
       d(t.$slots, "skeleton", {}, () => [
-        u(A) ? (r(), O(pa, { key: 0 })) : m("", !0)
+        r(A) ? (u(), O(pa, { key: 0 })) : m("", !0)
       ], !0)
     ], 46, Ia));
   }
-}, ml = /* @__PURE__ */ Oa(Ja, [["__scopeId", "data-v-f8701594"]]);
+}, ml = /* @__PURE__ */ Oa(Ja, [["__scopeId", "data-v-a1697707"]]);
 export {
   ml as default
 };