vue-data-ui 3.16.4 → 3.17.0

package/dist/{vue-ui-rings-BQKtt-FQ.js → vue-ui-rings-D-45pPpZ.js}

@@ -1,8 +1,8 @@
-import { defineAsyncComponent as R, useSlots as Qt, ref as r, computed as d, toRefs as el, watch as ue, shallowRef as rt, onMounted as tl, onBeforeUnmount as ll, openBlock as i, createElementBlock as y, unref as u, normalizeStyle as z, normalizeClass as B, createElementVNode as m, toDisplayString as re, createBlock as P, createCommentVNode as k, withCtx as v, renderSlot as c, normalizeProps as L, guardReactiveProps as x, createSlots as Ae, createVNode as ie, Fragment as ve, renderList as Se, mergeProps as it, Teleport as al, resolveDynamicComponent as ol, createTextVNode as vt, nextTick as ct } from "vue";
-import { j as dt, t as ht, m as sl, p as X, o as gt, q as Pe, r as nl, n as ul, a8 as rl, s as pt, k as _e, l as M, X as il, u as vl, v as cl, Z as dl, a0 as hl, a1 as gl, K as pl, T as fl, U as yl } from "./lib-DBptbyyI.js";
+import { defineAsyncComponent as R, useSlots as Qt, ref as r, computed as d, toRefs as el, watch as re, shallowRef as rt, onMounted as tl, onBeforeUnmount as ll, openBlock as i, createElementBlock as y, unref as u, normalizeStyle as z, normalizeClass as B, createElementVNode as m, toDisplayString as ie, createBlock as P, createCommentVNode as k, withCtx as v, renderSlot as c, normalizeProps as T, guardReactiveProps as L, createSlots as Ae, createVNode as ve, Fragment as ce, renderList as Se, mergeProps as it, Teleport as al, resolveDynamicComponent as ol, createTextVNode as vt, nextTick as ct } from "vue";
+import { j as dt, t as ht, m as sl, p as X, o as pt, q as Pe, r as nl, n as ul, a8 as rl, s as gt, k as _e, l as M, X as il, u as vl, v as cl, Z as dl, a0 as hl, a1 as pl, K as gl, T as fl, U as yl } from "./lib-DBptbyyI.js";
 import { b as bl } from "./labelUtils-CqTHa20R.js";
 import { t as ml, u as kl } from "./useResponsive-DfdjqQps.js";
-import { u as Cl } from "./useConfig-CpJA0VZa.js";
+import { u as Cl } from "./useConfig-ChRble71.js";
 import { u as wl } from "./usePrinter-CEpYU3r5.js";
 import { u as $l, B as Tl } from "./BaseScanner-BhhkKVoj.js";
 import { u as Ll } from "./useSvgExport-ByUukOZt.js";
@@ -44,7 +44,7 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
   },
   emits: ["selectLegend", "copyAlt"],
   setup(ft, { expose: yt, emit: bt }) {
-    const mt = R(() => import("./Tooltip-Bf-kM3_A.js")), kt = R(() => import("./BaseIcon-Cb3zzG6s.js")), Ct = R(() => import("./vue-ui-accordion-BF4v32wv.js")), wt = R(() => import("./DataTable-DT2kIdQ6.js")), $t = R(() => import("./PenAndPaper-Ct3qJ4lA.js")), Tt = R(() => import("./UserOptions-rW2fRf3V.js")), Lt = R(() => import("./PackageVersion-1BHnPIBZ.js")), xt = R(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_rings: At } = Cl(), { isThemeValid: St, warnInvalidTheme: Pt } = xl(), _t = Qt(), w = ft, T = r(!1), Fe = d(() => !!w.dataset && w.dataset.length), C = r(dt()), G = r(!1), ce = r(""), b = r(null), Ie = r(0), _ = r(null), De = r(null), Ne = r(null), Re = r(null), ze = r(null), Be = r(0), Me = r(0), Ve = r(0), de = r(!1), Ee = r(!1), q = r(null), he = r(null), oe = r(!1), se = r(!1), O = r(null), Ue = r({ x: 0, y: 0 }), Z = r("pointer"), ge = r(!1), e = r(fe()), V = d(() => e.value.userOptions.useCursorPointer), Ot = d(() => ht({
+    const mt = R(() => import("./Tooltip-C8KGyqQk.js")), kt = R(() => import("./BaseIcon-Cb3zzG6s.js")), Ct = R(() => import("./vue-ui-accordion-CnDW2UQL.js")), wt = R(() => import("./DataTable-DT2kIdQ6.js")), $t = R(() => import("./PenAndPaper-Ct3qJ4lA.js")), Tt = R(() => import("./UserOptions-rW2fRf3V.js")), Lt = R(() => import("./PackageVersion-B3kmPxTR.js")), xt = R(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_rings: At } = Cl(), { isThemeValid: St, warnInvalidTheme: Pt } = xl(), _t = Qt(), w = ft, x = r(!1), Fe = d(() => !!w.dataset && w.dataset.length), C = r(dt()), G = r(!1), de = r(""), b = r(null), Ie = r(0), _ = r(null), De = r(null), Ne = r(null), Re = r(null), ze = r(null), Be = r(0), Me = r(0), Ve = r(0), he = r(!1), Ee = r(!1), q = r(null), pe = r(null), oe = r(!1), se = r(!1), O = r(null), Ue = r({ x: 0, y: 0 }), Z = r("pointer"), ge = r(!1), e = r(ye()), V = d(() => e.value.userOptions.useCursorPointer), Ot = d(() => ht({
       defaultConfig: {
         userOptions: { show: !1 },
         table: { show: !1 },
@@ -74,7 +74,7 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
     })), { loading: A, FINAL_DATASET: We, manualLoading: ne } = $l({
       ...el(w),
       FINAL_CONFIG: e,
-      prepareConfig: fe,
+      prepareConfig: ye,
       skeletonDataset: w.config?.skeletonDataset ?? [
         { name: "_", values: [13], color: "#808080" },
         { name: "_", values: [8], color: "#969696" },
@@ -86,8 +86,8 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
         defaultConfig: e.value,
         userConfig: Ot.value
       })
-    }), { userOptionsVisible: pe, setUserOptionsVisibility: He, keepUserOptionState: Xe } = Al({ config: e.value }), { svgRef: E } = Sl({ config: e.value.style.chart.title });
-    function fe() {
+    }), { userOptionsVisible: fe, setUserOptionsVisibility: He, keepUserOptionState: Xe } = Al({ config: e.value }), { svgRef: E } = Sl({ config: e.value.style.chart.title });
+    function ye() {
       const t = Oe({
         userConfig: w.config,
         defaultConfig: At
@@ -107,8 +107,8 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
         customPalette: t.customPalette.length ? t.customPalette : sl[t.theme] || X
       };
     }
-    ue(() => w.config, (t) => {
-      A.value || (e.value = fe()), pe.value = !e.value.userOptions.showOnChartHover, Ke(), Be.value += 1, Me.value += 1, Ve.value += 1, f.value.showTable = e.value.table.show, f.value.showTooltip = e.value.style.chart.tooltip.show, f.value.showLabels = e.value.style.chart.layout.labels.dataLabels.show, h.value.width = e.value.style.chart.size, h.value.height = e.value.style.chart.size;
+    re(() => w.config, (t) => {
+      A.value || (e.value = ye()), fe.value = !e.value.userOptions.showOnChartHover, Ke(), Be.value += 1, Me.value += 1, Ve.value += 1, f.value.showTable = e.value.table.show, f.value.showTooltip = e.value.style.chart.tooltip.show, f.value.showLabels = e.value.style.chart.layout.labels.dataLabels.show, h.value.width = e.value.style.chart.size, h.value.height = e.value.style.chart.size;
     }, { deep: !0 });
     const Ge = d(() => {
       const { markers: t } = e.value.style.chart.layout.labels.dataLabels, a = W.value / 2, l = f.value.showLabels ? t.position === "left" ? a : -a : 0, o = f.value.showLabels ? h.value.width / 2 - a : 0, n = t.position === "left" ? o : -o;
@@ -120,24 +120,24 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
       x: h.value.width / 2 + Ge.value.x,
       y: h.value.height / 2 + Ge.value.y
     }));
-    ue(() => w.dataset, (t) => {
+    re(() => w.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (ne.value = !1);
     }, { deep: !0 });
     const D = rt(null), K = rt(null);
     tl(() => {
       Ee.value = !0, Ke();
     });
-    const ye = d(() => !!e.value.debug);
+    const be = d(() => !!e.value.debug);
     function Ke() {
-      if (gt(w.dataset) ? (Pe({
+      if (pt(w.dataset) ? (Pe({
         componentName: "VueUiRings",
         type: "dataset",
-        debug: ye.value
+        debug: be.value
       }), ne.value = !0) : w.dataset.forEach((t, a) => {
         t.values.length || (Pe({
           componentName: "VueUiRings",
           type: "dataset",
-          debug: ye.value
+          debug: be.value
         }), ne.value = !0), nl({
           datasetObject: t,
           requiredAttributes: ["name", "values"]
@@ -147,12 +147,12 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
             type: "datasetSerieAttribute",
             property: l,
             index: a,
-            debug: ye.value
+            debug: be.value
           });
         });
-      }), gt(w.dataset) || (ne.value = e.value.loading), e.value.responsive) {
+      }), pt(w.dataset) || (ne.value = e.value.loading), e.value.responsive) {
         const t = ml(() => {
-          de.value = !0;
+          he.value = !0;
           const { width: a, height: l } = kl({
             chart: _.value,
             title: e.value.style.chart.title.text ? De.value : null,
@@ -161,19 +161,19 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
             noTitle: ze.value
           });
           requestAnimationFrame(() => {
-            h.value.width = a, h.value.height = l - 12, de.value = !1;
+            h.value.width = a, h.value.height = l - 12, he.value = !1;
           });
         });
         D.value && (K.value && D.value.unobserve(K.value), D.value.disconnect()), D.value = new ResizeObserver(t), K.value = _.value.parentNode, D.value.observe(K.value);
       }
       setTimeout(() => {
-        T.value = !0;
+        x.value = !0;
       }, 600);
     }
     ll(() => {
       D.value && (K.value && D.value.unobserve(K.value), D.value.disconnect());
     });
-    const { isPrinting: be, isImaging: me, generatePdf: je, generateImage: Ye } = wl({
+    const { isPrinting: me, isImaging: ke, generatePdf: je, generateImage: Ye } = wl({
       elementId: `rings_${C.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-rings",
       options: e.value.userOptions.print
@@ -182,7 +182,7 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
       showTooltip: e.value.style.chart.tooltip.show,
       showLabels: e.value.style.chart.layout.labels.dataLabels.show
     });
-    ue(e, () => {
+    re(e, () => {
       f.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.chart.tooltip.show,
@@ -192,20 +192,20 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
     const h = r({
       height: e.value.style.chart.size,
       width: e.value.style.chart.size
-    }), It = d(() => Math.min(h.value.height, h.value.width)), Ze = bt, p = r([]);
+    }), It = d(() => Math.min(h.value.height, h.value.width)), Ze = bt, g = r([]);
     function Dt() {
-      p.value.length ? p.value = [] : Q.value.forEach((t) => {
-        p.value.push(t.uid);
+      g.value.length ? g.value = [] : Q.value.forEach((t) => {
+        g.value.push(t.uid);
       });
     }
     function J(t) {
-      if (p.value.includes(t))
-        p.value = p.value.filter((a) => a !== t);
+      if (g.value.includes(t))
+        g.value = g.value.filter((a) => a !== t);
       else {
-        if (p.value.length === U.value.length - 1) return;
-        p.value.push(t);
+        if (g.value.length === U.value.length - 1) return;
+        g.value.push(t);
       }
-      Ze("selectLegend", g.value.map((a) => ({
+      Ze("selectLegend", p.value.map((a) => ({
         name: a.name,
         color: a.color,
         value: a.value
@@ -219,14 +219,14 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
     }
     function Nt(t) {
       const a = Je(t);
-      a !== null && p.value.includes(a.uid) && J(a.uid);
+      a !== null && g.value.includes(a.uid) && J(a.uid);
     }
     function Rt(t) {
       const a = Je(t);
-      a !== null && (p.value.includes(a.uid) || J(a.uid));
+      a !== null && (g.value.includes(a.uid) || J(a.uid));
     }
     const zt = d(() => Math.max(
-      ...U.value.filter((t) => !p.value.includes(t.uid)).map(({ value: t }) => t)
+      ...U.value.filter((t) => !g.value.includes(t.uid)).map(({ value: t }) => t)
     ));
     function Qe(t) {
       return t / zt.value;
@@ -235,7 +235,7 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
       const n = rl(t).reduce((s, $) => s + $, 0);
       return {
         name: a,
-        color: l || pt(l) || qe.value[o] || X[o] || X[o % X.length],
+        color: l || gt(l) || qe.value[o] || X[o] || X[o % X.length],
         value: n,
         proportion: n / We.value.map((s) => (s.values || []).reduce(($, Y) => $ + Y, 0)).reduce((s, $) => s + $, 0),
         uid: dt(),
@@ -247,18 +247,18 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
         v: t.value,
         s: e.value.style.chart.layout.labels.dataLabels.suffix,
         r: e.value.style.chart.legend.roundingValue
-      }), { datapoint: t, index: a }), o = isNaN(t.value / I.value) ? "-" : M({ v: t.value / I.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage }), n = Ce({
+      }), { datapoint: t, index: a }), o = isNaN(t.value / I.value) ? "-" : M({ v: t.value / I.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage }), n = we({
         showVal: e.value.style.chart.legend.showValue,
         showPercentage: e.value.style.chart.legend.showPercentage,
         val: l,
-        percentage: p.value.includes(t.uid) ? "-%" : o
+        percentage: g.value.includes(t.uid) ? "-%" : o
       });
       return {
         ...t,
         shape: "circle",
-        opacity: p.value.includes(t.uid) ? 0.5 : 1,
+        opacity: g.value.includes(t.uid) ? 0.5 : 1,
         segregate: () => J(t.uid),
-        isSegregated: p.value.includes(t.uid),
+        isSegregated: g.value.includes(t.uid),
         display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${n}`
       };
     }).toSorted((t, a) => a.value - t.value)), Bt = d(() => ({
@@ -268,18 +268,18 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), I = d(() => U.value.filter((t) => !p.value.includes(t.uid)).map(({ value: t }) => t).reduce((t, a) => t + a, 0)), g = d(() => U.value.filter((t) => !p.value.includes(t.uid)).map(({ name: t, value: a, color: l = null, uid: o, absoluteIndex: n }, s) => ({
+    })), I = d(() => U.value.filter((t) => !g.value.includes(t.uid)).map(({ value: t }) => t).reduce((t, a) => t + a, 0)), p = d(() => U.value.filter((t) => !g.value.includes(t.uid)).map(({ name: t, value: a, color: l = null, uid: o, absoluteIndex: n }, s) => ({
       absoluteIndex: n,
       uid: o,
       name: t,
-      color: l || pt(l) || qe.value[s] || X[s] || X[s % X.length],
+      color: l || gt(l) || qe.value[s] || X[s] || X[s % X.length],
       value: a,
       proportion: Qe(a),
       percentage: a / I.value * 100,
       strokeWidth: e.value.style.chart.layout.rings.strokeWidth * Qe(a)
     })).toSorted((t, a) => a.value - t.value));
     function Mt() {
-      return g.value.map(
+      return p.value.map(
         ({ name: t, color: a, value: l, absoluteValues: o, percentage: n }) => ({
           name: t,
           color: a,
@@ -290,13 +290,13 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
       );
     }
     const W = d(() => It.value - e.value.style.chart.layout.rings.strokeWidth * 2);
-    function ke(t, a) {
+    function Ce(t, a) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
     }
     function et(t, a) {
       b.value = null, G.value = !1, O.value = null, Z.value = "pointer", e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
     }
-    function Ce({
+    function we({
       val: t,
       percentage: a,
       showVal: l,
@@ -327,7 +327,7 @@ const zl = ["id"], Bl = ["id"], Ml = ["id"], Vl = { style: { position: "relative
         r: a.roundingPercentage
       });
       return `${t.name}
-${Ce({
+${we({
         val: l,
         percentage: o,
         showVal: a.showValue,
@@ -335,10 +335,10 @@ ${Ce({
       })}`;
     }
     function ee(t) {
-      return pl(W.value * t.proportion / 2 * 0.9 <= 0 ? 1e-4 : W.value * t.proportion / 2 * 0.9);
+      return gl(W.value * t.proportion / 2 * 0.9 <= 0 ? 1e-4 : W.value * t.proportion / 2 * 0.9);
     }
     function te(t, a) {
-      return a === 0 ? F.value.y : F.value.y + W.value * g.value[0].proportion / 2 - W.value * t.proportion / 2 - 2 * (a + 1);
+      return a === 0 ? F.value.y : F.value.y + W.value * p.value[0].proportion / 2 - W.value * t.proportion / 2 - 2 * (a + 1);
     }
     function S(t, a) {
       const o = e.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? -(W.value / 2) : W.value / 2;
@@ -347,31 +347,31 @@ ${Ce({
         y: te(t, a) - ee(t)
       };
     }
-    const we = r(null);
+    const ue = r(null);
     function $e(t, a, l = "pointer") {
-      if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), p.value.length === w.dataset.length) return;
-      we.value = {
+      if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), g.value.length === w.dataset.length) return;
+      ue.value = {
         datapoint: t,
         seriesIndex: a,
-        series: g.value,
+        series: p.value,
         config: e.value
       }, b.value = a, O.value = a, Z.value = l;
-      const o = g.value[a], n = e.value.style.chart.tooltip.customFormat;
+      const o = p.value[a], n = e.value.style.chart.tooltip.customFormat;
       if (fl(n) && yl(() => n({
         seriesIndex: a,
         datapoint: t,
-        series: g.value,
+        series: p.value,
         config: e.value
       })))
-        ce.value = n({
+        de.value = n({
           seriesIndex: a,
           datapoint: t,
-          series: g.value,
+          series: p.value,
           config: e.value
         });
       else {
         let s = "";
-        s += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${o.name}</div>`, s += `<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="${o.color}" />${_t.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${C.value}_${t.absoluteIndex})" />` : ""}</svg>`, s += `<b>${Ce({
+        s += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${o.name}</div>`, s += `<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="${o.color}" />${_t.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${C.value}_${t.absoluteIndex})" />` : ""}</svg>`, s += `<b>${we({
           showVal: e.value.style.chart.tooltip.showValue,
           showPercentage: e.value.style.chart.tooltip.showPercentage,
           val: `<span>${_e(
@@ -390,15 +390,15 @@ ${Ce({
             s: "%",
             r: e.value.style.chart.tooltip.roundingPercentage
           })
-        })}</b></div>`, ce.value = s;
+        })}</b></div>`, de.value = s;
       }
       G.value = !0;
     }
     const N = d(() => {
-      const t = g.value.map((l) => ({
+      const t = p.value.map((l) => ({
         name: l.name,
         color: l.color
-      })), a = g.value.map((l) => l.value);
+      })), a = p.value.map((l) => l.value);
       return { head: t, body: a };
     }), j = d(() => {
       const t = [
@@ -442,7 +442,7 @@ ${Ce({
         const a = N.value.head.map((n, s) => [[
           n.name
         ], [N.value.body[s]], [isNaN(N.value.body[s] / I.value) ? "-" : N.value.body[s] / I.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = hl(l);
-        t ? t(o) : gl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-rings" });
+        t ? t(o) : pl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-rings" });
       });
     }
     const H = r(!1);
@@ -505,11 +505,11 @@ ${Ce({
         }
       };
     });
-    ue(() => f.value.showTable, (t) => {
+    re(() => f.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && q.value ? q.value.open() : "close" in q.value && q.value.close());
     });
     function st() {
-      f.value.showTable = !1, he.value && he.value.setTableIconState(!1);
+      f.value.showTable = !1, pe.value && pe.value.setTableIconState(!1);
     }
     const Ut = d(() => Q.value.map((t) => ({
       ...t,
@@ -547,14 +547,14 @@ ${Ce({
     async function ut() {
       if (Ze("copyAlt", {
         config: e.value,
-        dataset: g.value
+        dataset: p.value
       }), !e.value.userOptions.callbacks.altCopy) {
         console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
         return;
       }
       await Promise.resolve(e.value.userOptions.callbacks.altCopy({
         config: e.value,
-        dataset: g.value
+        dataset: p.value
       }));
     }
     function Yt() {
@@ -564,7 +564,7 @@ ${Ce({
       O.value = null, Z.value = "pointer", G.value = !1, b.value = null, ge.value = !1;
     }
     function Zt(t) {
-      if (!E.value || le.value || document.activeElement !== E.value || !g.value.length || p.value.length === w.dataset.length) return;
+      if (!E.value || le.value || document.activeElement !== E.value || !p.value.length || g.value.length === w.dataset.length) return;
       const a = ["ArrowLeft", "ArrowUp"].includes(t.key), l = ["ArrowRight", "ArrowDown"].includes(t.key), o = t.key === "Enter" || t.key === " ", n = t.key === "Escape";
       if (!a && !l && !o && !n) return;
       if (t.preventDefault(), t.stopPropagation(), n) {
@@ -573,19 +573,19 @@ ${Ce({
       }
       if (o) {
         if (O.value === null) return;
-        const Y = g.value[O.value];
+        const Y = p.value[O.value];
         if (!Y) return;
-        ke(Y, O.value);
+        Ce(Y, O.value);
         return;
       }
       let s = O.value;
-      s === null || s < 0 || s >= g.value.length ? s = l ? 0 : g.value.length - 1 : l ? (s += 1, s >= g.value.length && (s = 0)) : a && (s -= 1, s < 0 && (s = g.value.length - 1));
-      const $ = g.value[s];
+      s === null || s < 0 || s >= p.value.length ? s = l ? 0 : p.value.length - 1 : l ? (s += 1, s >= p.value.length && (s = 0)) : a && (s -= 1, s < 0 && (s = p.value.length - 1));
+      const $ = p.value[s];
       $ && (Jt(s), $e($, s, "keyboard"));
     }
     function Jt(t) {
       if (!Number.isFinite(t) || !E.value) return;
-      const a = g.value[t];
+      const a = p.value[t];
       if (!a) return;
       const l = S(a, t), o = E.value.getBoundingClientRect();
       Ue.value = {
@@ -627,7 +627,7 @@ ${Ce({
         id: `chart-instructions-${C.value}`,
         class: "sr-only"
       }, [
-        m("p", null, re(e.value.a11y.translations.keyboardNavigation), 1)
+        m("p", null, ie(e.value.a11y.translations.keyboardNavigation), 1)
       ], 8, Bl),
       xe.value?.rows?.length ? (i(), P(Dl, {
         key: 0,
@@ -650,19 +650,19 @@ ${Ce({
           c(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": v(({ color: l }) => [
-          c(t.$slots, "annotator-action-color", L(x({ color: l })), void 0, !0)
+          c(t.$slots, "annotator-action-color", T(L({ color: l })), void 0, !0)
         ]),
         "annotator-action-draw": v(({ mode: l }) => [
-          c(t.$slots, "annotator-action-draw", L(x({ mode: l })), void 0, !0)
+          c(t.$slots, "annotator-action-draw", T(L({ mode: l })), void 0, !0)
         ]),
         "annotator-action-undo": v(({ disabled: l }) => [
-          c(t.$slots, "annotator-action-undo", L(x({ disabled: l })), void 0, !0)
+          c(t.$slots, "annotator-action-undo", T(L({ disabled: l })), void 0, !0)
         ]),
         "annotator-action-redo": v(({ disabled: l }) => [
-          c(t.$slots, "annotator-action-redo", L(x({ disabled: l })), void 0, !0)
+          c(t.$slots, "annotator-action-redo", T(L({ disabled: l })), void 0, !0)
         ]),
         "annotator-action-delete": v(({ disabled: l }) => [
-          c(t.$slots, "annotator-action-delete", L(x({ disabled: l })), void 0, !0)
+          c(t.$slots, "annotator-action-delete", T(L({ disabled: l })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : k("", !0),
@@ -696,14 +696,14 @@ ${Ce({
       m("div", {
         id: `legend-top-${C.value}`
       }, null, 8, Ml),
-      e.value.userOptions.show && Fe.value && (u(Xe) || u(pe)) ? (i(), P(u(Tt), {
+      e.value.userOptions.show && Fe.value && (u(Xe) || u(fe)) ? (i(), P(u(Tt), {
         ref_key: "userOptionsRef",
-        ref: he,
+        ref: pe,
         key: `user_options_${Ie.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: u(be),
-        isImaging: u(me),
+        isPrinting: u(me),
+        isImaging: u(ke),
         uid: C.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -736,13 +736,13 @@ ${Ce({
         onToggleLabels: ot,
         onCopyAlt: ut,
         style: z({
-          visibility: u(Xe) ? u(pe) ? "visible" : "hidden" : "visible"
+          visibility: u(Xe) ? u(fe) ? "visible" : "hidden" : "visible"
         })
       }, Ae({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: v(({ isOpen: l, color: o }) => [
-            c(t.$slots, "menuIcon", L(x({ isOpen: l, color: o })), void 0, !0)
+            c(t.$slots, "menuIcon", T(L({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -798,21 +798,21 @@ ${Ce({
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: v(({ toggleFullscreen: l, isFullscreen: o }) => [
-            c(t.$slots, "optionFullscreen", L(x({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+            c(t.$slots, "optionFullscreen", T(L({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: v(({ toggleAnnotator: l, isAnnotator: o }) => [
-            c(t.$slots, "optionAnnotator", L(x({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+            c(t.$slots, "optionAnnotator", T(L({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "9"
         } : void 0,
         t.$slots.optionAltCopy ? {
           name: "optionAltCopy",
           fn: v(({ altCopy: l }) => [
-            c(t.$slots, "optionAltCopy", L(x({ altCopy: l })), void 0, !0)
+            c(t.$slots, "optionAltCopy", T(L({ altCopy: l })), void 0, !0)
           ]),
           key: "10"
         } : void 0
@@ -822,7 +822,7 @@ ${Ce({
           ref_key: "svgRef",
           ref: E,
           xmlns: u(il),
-          class: B({ "vue-data-ui-fullscreen--on": H.value, "vue-data-ui-fulscreen--off": !H.value, resizing: de.value || u(A) }),
+          class: B({ "vue-data-ui-fullscreen--on": H.value, "vue-data-ui-fulscreen--off": !H.value, resizing: he.value || u(A) }),
           viewBox: `0 0 ${h.value.width <= 0 ? 10 : h.value.width} ${h.value.height <= 0 ? 10 : h.value.height}`,
           style: z(`max-width:100%;overflow:hidden;background:transparent;color:${e.value.style.chart.color}`),
           "aria-describedby": `chart-instructions-${C.value}`,
@@ -831,7 +831,7 @@ ${Ce({
           onBlur: qt,
           onKeydown: Zt
         }, [
-          ie(u(Lt)),
+          ve(u(Lt)),
           t.$slots["chart-background"] ? (i(), y("foreignObject", {
             key: 0,
             x: 0,
@@ -845,7 +845,7 @@ ${Ce({
             c(t.$slots, "chart-background", {}, void 0, !0)
           ], 8, Ul)) : k("", !0),
           m("defs", null, [
-            (i(!0), y(ve, null, Se(g.value, (l, o) => (i(), y("radialGradient", {
+            (i(!0), y(ce, null, Se(p.value, (l, o) => (i(), y("radialGradient", {
               cx: "50%",
               cy: "30%",
               r: "50%",
@@ -864,15 +864,15 @@ ${Ce({
             ], 8, Wl))), 256))
           ]),
           t.$slots.pattern ? (i(), y("g", Gl, [
-            (i(!0), y(ve, null, Se(g.value, (l) => (i(), y("defs", null, [
+            (i(!0), y(ce, null, Se(p.value, (l) => (i(), y("defs", null, [
               c(t.$slots, "pattern", it({ ref_for: !0 }, { seriesIndex: l.absoluteIndex, patternId: `pattern_${C.value}_${l.absoluteIndex}` }), void 0, !0)
             ]))), 256))
           ])) : k("", !0),
-          (i(!0), y(ve, null, Se(g.value, (l, o) => (i(), y("g", null, [
+          (i(!0), y(ce, null, Se(p.value, (l, o) => (i(), y("g", null, [
             m("circle", {
               class: B({
-                "vue-ui-rings-item": T.value && e.value.useCssAnimation,
-                "vue-rings-item-onload": !T.value && e.value.useCssAnimation && !u(A),
+                "vue-ui-rings-item": x.value && e.value.useCssAnimation,
+                "vue-rings-item-onload": !x.value && e.value.useCssAnimation && !u(A),
                 "vue-ui-rings-opacity": b.value !== null && b.value !== o
               }),
               style: z(`animation-delay:${o * 100}ms`),
@@ -884,8 +884,8 @@ ${Ce({
             }, null, 14, Kl),
             m("circle", {
               class: B({
-                "vue-ui-rings-item": T.value && e.value.useCssAnimation,
-                "vue-rings-item-onload": !T.value && e.value.useCssAnimation && !u(A),
+                "vue-ui-rings-item": x.value && e.value.useCssAnimation,
+                "vue-rings-item-onload": !x.value && e.value.useCssAnimation && !u(A),
                 "vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
                 "vue-ui-rings-blur": b.value !== null && b.value !== o
               }),
@@ -900,8 +900,8 @@ ${Ce({
             t.$slots.pattern ? (i(), y("circle", {
               key: 0,
               class: B({
-                "vue-ui-rings-item": T.value && e.value.useCssAnimation,
-                "vue-rings-item-onload": !T.value && e.value.useCssAnimation && !u(A),
+                "vue-ui-rings-item": x.value && e.value.useCssAnimation,
+                "vue-rings-item-onload": !x.value && e.value.useCssAnimation && !u(A),
                 "vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
                 "vue-ui-rings-blur": b.value !== null && b.value !== o
               }),
@@ -921,9 +921,9 @@ ${Ce({
               fill: "transparent",
               onMouseenter: (n) => $e(l, o, "pointer"),
               onMouseleave: (n) => et(l, o),
-              onClick: (n) => ke(l, o)
+              onClick: (n) => Ce(l, o)
             }, null, 40, ql),
-            f.value.showLabels ? (i(), y(ve, { key: 1 }, [
+            f.value.showLabels ? (i(), y(ce, { key: 1 }, [
               m("rect", {
                 x: e.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? S(l, o).x : F.value.x,
                 y: S(l, o).y - e.value.style.chart.layout.labels.dataLabels.markers.strokeWidth / 2,
@@ -932,8 +932,8 @@ ${Ce({
                 fill: e.value.style.chart.layout.labels.dataLabels.markers.stroke,
                 rx: e.value.style.chart.layout.labels.dataLabels.markers.strokeWidth,
                 class: B({
-                  "vue-ui-rings-item": T.value && e.value.useCssAnimation,
-                  "vue-rings-item-onload": !T.value && e.value.useCssAnimation && !u(A),
+                  "vue-ui-rings-item": x.value && e.value.useCssAnimation,
+                  "vue-rings-item-onload": !x.value && e.value.useCssAnimation && !u(A),
                   "vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
                   "vue-ui-rings-blur": b.value !== null && b.value !== o
                 })
@@ -945,8 +945,8 @@ ${Ce({
                 fill: l.color,
                 stroke: e.value.style.chart.backgroundColor,
                 class: B({
-                  "vue-ui-rings-item": T.value && e.value.useCssAnimation,
-                  "vue-rings-item-onload": !T.value && e.value.useCssAnimation && !u(A),
+                  "vue-ui-rings-item": x.value && e.value.useCssAnimation,
+                  "vue-rings-item-onload": !x.value && e.value.useCssAnimation && !u(A),
                   "vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
                   "vue-ui-rings-blur": b.value !== null && b.value !== o
                 })
@@ -959,14 +959,14 @@ ${Ce({
                 fill: e.value.style.chart.layout.labels.dataLabels.color,
                 "font-weight": e.value.style.chart.layout.labels.dataLabels.bold ? "bold" : "normal",
                 class: B({
-                  "vue-ui-rings-item": T.value && e.value.useCssAnimation,
-                  "vue-rings-item-onload": !T.value && e.value.useCssAnimation && !u(A),
+                  "vue-ui-rings-item": x.value && e.value.useCssAnimation,
+                  "vue-rings-item-onload": !x.value && e.value.useCssAnimation && !u(A),
                   "vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
                   "vue-ui-rings-blur": b.value !== null && b.value !== o
                 }),
                 onMouseenter: (n) => $e(l, o, "pointer"),
                 onMouseleave: (n) => et(l, o),
-                onClick: (n) => ke(l, o),
+                onClick: (n) => Ce(l, o),
                 innerHTML: u(dl)({
                   content: Vt(l),
                   fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
@@ -981,17 +981,17 @@ ${Ce({
           c(t.$slots, "svg", {
             svg: {
               ...h.value,
-              isPrintingImg: u(be) | u(me) | oe.value,
+              isPrintingImg: u(me) | u(ke) | oe.value,
               isPrintingSvg: se.value
             }
           }, void 0, !0)
         ], 46, El)),
         t.$slots.hint ? (i(), y("div", ea, [
-          c(t.$slots, "hint", L(x({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: ge.value })), void 0, !0)
+          c(t.$slots, "hint", T(L({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: ge.value })), void 0, !0)
         ])) : k("", !0)
       ]),
       t.$slots.watermark ? (i(), y("div", ta, [
-        c(t.$slots, "watermark", L(x({ isPrinting: u(be) || u(me) || oe.value || se.value })), void 0, !0)
+        c(t.$slots, "watermark", T(L({ isPrinting: u(me) || u(ke) || oe.value || se.value })), void 0, !0)
       ])) : k("", !0),
       m("div", {
         id: `legend-bottom-${C.value}`
@@ -1015,8 +1015,8 @@ ${Ce({
               u(A) ? k("", !0) : (i(), y("div", {
                 key: 0,
                 onClick: (n) => J(l.uid),
-                style: z(`opacity:${p.value.includes(l.uid) ? 0.5 : 1}`)
-              }, re(l.display), 13, aa))
+                style: z(`opacity:${g.value.includes(l.uid) ? 0.5 : 1}`)
+              }, ie(l.display), 13, aa))
             ]),
             legendToggle: v(() => [
               Q.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !u(A) ? (i(), P(Nl, {
@@ -1024,7 +1024,7 @@ ${Ce({
                 backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
                 color: e.value.style.chart.legend.selectAllToggle.color,
                 fontSize: e.value.style.chart.legend.fontSize,
-                checked: p.value.length > 0,
+                checked: g.value.length > 0,
                 isCursorPointer: V.value,
                 onToggle: Dt
               }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : k("", !0)
@@ -1034,7 +1034,7 @@ ${Ce({
             t.$slots.pattern ? {
               name: "legend-pattern",
               fn: v(({ legend: l, index: o }) => [
-                ie(_l, {
+                ve(_l, {
                   shape: l.shape,
                   radius: 30,
                   stroke: "none",
@@ -1058,9 +1058,9 @@ ${Ce({
       }, [
         c(t.$slots, "source", {}, void 0, !0)
       ], 512)) : k("", !0),
-      ie(u(mt), {
+      ve(u(mt), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
-        show: f.value.showTooltip && G.value && p.value.length < w.dataset.length,
+        show: f.value.showTooltip && G.value && g.value.length < w.dataset.length,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -1071,7 +1071,7 @@ ${Ce({
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: _.value,
-        content: ce.value,
+        content: de.value,
         isFullscreen: H.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
@@ -1082,10 +1082,13 @@ ${Ce({
         a11yPosition: Ue.value
       }, {
         "tooltip-before": v(() => [
-          c(t.$slots, "tooltip-before", L(x({ ...we.value })), void 0, !0)
+          c(t.$slots, "tooltip-before", T(L({ ...ue.value })), void 0, !0)
+        ]),
+        tooltip: v(() => [
+          c(t.$slots, "tooltip", T(L({ ...ue.value })), void 0, !0)
         ]),
         "tooltip-after": v(() => [
-          c(t.$slots, "tooltip-after", L(x({ ...we.value })), void 0, !0)
+          c(t.$slots, "tooltip-after", T(L({ ...ue.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"]),
@@ -1113,7 +1116,7 @@ ${Ce({
               }, null, 8, oa)
             ]),
             td: v(({ td: l }) => [
-              vt(re(l.name || l), 1)
+              vt(ie(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
@@ -1123,7 +1126,7 @@ ${Ce({
         e.value.table.useDialog ? {
           name: "title",
           fn: v(() => [
-            vt(re(ae.value.title), 1)
+            vt(ie(ae.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -1136,7 +1139,7 @@ ${Ce({
               onClick: a[1] || (a[1] = (l) => Te(e.value.userOptions.callbacks.csv)),
               style: z({ cursor: V.value ? "pointer" : "default" })
             }, [
-              ie(u(kt), {
+              ve(u(kt), {
                 name: "fileCsv",
                 stroke: ae.value.props.color
               }, null, 8, ["stroke"])
@@ -1150,7 +1153,7 @@ ${Ce({
       ], !0)
     ], 46, zl));
   }
-}, xa = /* @__PURE__ */ Rl(sa, [["__scopeId", "data-v-570d90eb"]]);
+}, xa = /* @__PURE__ */ Rl(sa, [["__scopeId", "data-v-4b1d044b"]]);
 export {
   xa as default
 };