vue-data-ui 3.16.4 → 3.17.0

package/dist/{vue-ui-radar-d7b-Y40r.js → vue-ui-radar-CS74L65M.js}

@@ -1,7 +1,7 @@
-import { defineAsyncComponent as x, computed as p, ref as u, toRefs as aa, watch as $e, shallowRef as ut, onMounted as oa, onBeforeUnmount as la, openBlock as s, createElementBlock as c, unref as i, normalizeStyle as ae, normalizeClass as oe, createElementVNode as b, toDisplayString as R, createBlock as S, createCommentVNode as f, withCtx as d, renderSlot as g, normalizeProps as w, guardReactiveProps as $, createSlots as it, createVNode as re, Fragment as U, renderList as E, Teleport as na, resolveDynamicComponent as sa, mergeProps as ra, createTextVNode as Te, nextTick as Ae } from "vue";
+import { defineAsyncComponent as F, computed as g, ref as u, toRefs as aa, watch as $e, shallowRef as ut, onMounted as oa, onBeforeUnmount as la, openBlock as s, createElementBlock as c, unref as i, normalizeStyle as ae, normalizeClass as oe, createElementVNode as b, toDisplayString as R, createBlock as S, createCommentVNode as f, withCtx as d, renderSlot as p, normalizeProps as k, guardReactiveProps as C, createSlots as it, createVNode as ue, Fragment as U, renderList as E, Teleport as na, resolveDynamicComponent as sa, mergeProps as ra, createTextVNode as Te, nextTick as Ae } from "vue";
 import { j as ua, t as ct, m as ia, p as M, o as ca, q as W, n as va, s as vt, A as dt, K as da, l as j, k as Pe, X as pa, u as _e, v as ga, ah as pt, r as gt, a0 as ha, a1 as fa, T as ya, U as ma } from "./lib-DBptbyyI.js";
 import { t as ba, u as ka } from "./useResponsive-DfdjqQps.js";
-import { u as Ca } from "./useConfig-CpJA0VZa.js";
+import { u as Ca } from "./useConfig-ChRble71.js";
 import { u as wa, B as $a } from "./BaseScanner-BhhkKVoj.js";
 import { u as Ta } from "./usePrinter-CEpYU3r5.js";
 import { u as Aa } from "./useSvgExport-ByUukOZt.js";
@@ -11,8 +11,8 @@ import { u as _a } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Sa } from "./useChartAccessibility-9icAAmYg.js";
 import { u as Oa } from "./useAutoSizeLabelsInsideViewbox-DX7LdvFX.js";
 import Ia from "./img-LXxMLmCg.js";
-import xa from "./Title-BeMKE1cj.js";
-import Fa from "./Legend-CS7Xo5LK.js";
+import Fa from "./Title-BeMKE1cj.js";
+import xa from "./Legend-CS7Xo5LK.js";
 import Na from "./vue_ui_radar-DryGBOrz.js";
 import { A as La } from "./A11yDataTable-KcVAX2cP.js";
 import { B as Ra } from "./BaseLegendToggle-BQVIawmA.js";
@@ -49,7 +49,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
   },
   emits: ["selectLegend", "copyAlt"],
   setup(ht, { expose: ft, emit: yt }) {
-    const mt = x(() => import("./Tooltip-Bf-kM3_A.js")), bt = x(() => import("./BaseIcon-Cb3zzG6s.js")), kt = x(() => import("./vue-ui-sparkbar-BmiEOs4E.js")), Ct = x(() => import("./vue-ui-accordion-BF4v32wv.js")), wt = x(() => import("./DataTable-DT2kIdQ6.js")), $t = x(() => import("./PenAndPaper-Ct3qJ4lA.js")), Tt = x(() => import("./UserOptions-rW2fRf3V.js")), At = x(() => import("./PackageVersion-1BHnPIBZ.js")), Pt = x(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_radar: _t } = Ca(), { isThemeValid: St, warnInvalidTheme: Ot } = Pa(), O = ht, Oe = p(() => !!O.dataset && Object.keys(O.dataset).length), m = u(ua()), q = u(!1), ue = u(""), Ie = u(0), I = u(null), xe = u(null), Fe = u(null), Ne = u(null), Le = u(null), Re = u(0), De = u(0), Ve = u(0), ze = u(!1), H = u(null), ie = u(null), le = u(!1), ne = u(!1), A = u(null), Be = u({ x: 0, y: 0 }), J = u("pointer"), ce = u(!1), e = u(pe()), D = p(() => e.value.userOptions.useCursorPointer), It = p(() => ct({
+    const mt = F(() => import("./Tooltip-C8KGyqQk.js")), bt = F(() => import("./BaseIcon-Cb3zzG6s.js")), kt = F(() => import("./vue-ui-sparkbar-D6EsbW6u.js")), Ct = F(() => import("./vue-ui-accordion-CnDW2UQL.js")), wt = F(() => import("./DataTable-DT2kIdQ6.js")), $t = F(() => import("./PenAndPaper-Ct3qJ4lA.js")), Tt = F(() => import("./UserOptions-rW2fRf3V.js")), At = F(() => import("./PackageVersion-B3kmPxTR.js")), Pt = F(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_radar: _t } = Ca(), { isThemeValid: St, warnInvalidTheme: Ot } = Pa(), O = ht, Oe = g(() => !!O.dataset && Object.keys(O.dataset).length), m = u(ua()), q = u(!1), ie = u(""), Ie = u(0), I = u(null), Fe = u(null), xe = u(null), Ne = u(null), Le = u(null), Re = u(0), De = u(0), Ve = u(0), ze = u(!1), H = u(null), ce = u(null), le = u(!1), ne = u(!1), A = u(null), Be = u({ x: 0, y: 0 }), J = u("pointer"), ve = u(!1), e = u(ge()), D = g(() => e.value.userOptions.useCursorPointer), It = g(() => ct({
       defaultConfig: {
         userOptions: { show: !1 },
         table: { show: !1 },
@@ -75,13 +75,13 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         }
       },
       userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: ve, FINAL_DATASET: V } = wa({
+    })), { loading: de, FINAL_DATASET: V } = wa({
       ...aa(O),
       FINAL_CONFIG: e,
-      prepareConfig: pe,
+      prepareConfig: ge,
       callback: () => {
         Promise.resolve().then(async () => {
-          await Ae(), k.value.showTable = e.value.table.show;
+          await Ae(), w.value.showTable = e.value.table.show;
         });
       },
       skeletonDataset: O.config?.skeletonDataset ?? {
@@ -99,8 +99,8 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         defaultConfig: e.value,
         userConfig: It.value
       })
-    }), { userOptionsVisible: de, setUserOptionsVisibility: Ue, keepUserOptionState: Ee } = _a({ config: e.value }), { svgRef: F } = Sa({ config: e.value.style.chart.title });
-    function pe() {
+    }), { userOptionsVisible: pe, setUserOptionsVisibility: Ue, keepUserOptionState: Ee } = _a({ config: e.value }), { svgRef: x } = Sa({ config: e.value.style.chart.title });
+    function ge() {
       const t = Se({
         userConfig: O.config,
         defaultConfig: _t
@@ -121,9 +121,9 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       };
     }
     $e(() => O.config, (t) => {
-      e.value = pe(), de.value = !e.value.userOptions.showOnChartHover, Me(), Re.value += 1, De.value += 1, Ve.value += 1, k.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.chart.tooltip ? e.value.style.chart.tooltip.show : !1;
+      e.value = ge(), pe.value = !e.value.userOptions.showOnChartHover, Me(), Re.value += 1, De.value += 1, Ve.value += 1, w.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, w.value.showTable = e.value.table.show, w.value.showTooltip = e.value.style.chart.tooltip ? e.value.style.chart.tooltip.show : !1;
     }, { deep: !0 });
-    const N = ut(null), G = ut(null), z = p(() => e.value.debug);
+    const N = ut(null), G = ut(null), z = g(() => e.value.debug);
     function Me() {
       if (ca(O.dataset) && W({
         componentName: "VueUiRadar",
@@ -133,8 +133,8 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         const t = ba(() => {
           const { width: o, height: a } = ka({
             chart: I.value,
-            title: e.value.style.chart.title.text ? xe.value : null,
-            legend: e.value.style.chart.legend.show ? Fe.value : null,
+            title: e.value.style.chart.title.text ? Fe.value : null,
+            legend: e.value.style.chart.legend.show ? xe.value : null,
             source: Ne.value,
             noTitle: Le.value
           });
@@ -151,17 +151,17 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
     }), la(() => {
       N.value && (G.value && N.value.unobserve(G.value), N.value.disconnect());
     });
-    const { isPrinting: ge, isImaging: he, generatePdf: We, generateImage: Ge } = Ta({
+    const { isPrinting: he, isImaging: fe, generatePdf: We, generateImage: Ge } = Ta({
       elementId: `vue-ui-radar_${m.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-radar",
       options: e.value.userOptions.print
-    }), xt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Xe = p(() => va(e.value.customPalette)), k = u({
+    }), Ft = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), Xe = g(() => va(e.value.customPalette)), w = u({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), Ft = p(() => ({
+    }), xt = g(() => ({
       style: {
         backgroundColor: "#FFFFFF00",
         animation: {
@@ -265,7 +265,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       () => Rt(),
       { deep: !0, immediate: !0 }
     );
-    const P = p(() => {
+    const P = g(() => {
       const t = Array.isArray(V.value?.categories) ? V.value.categories : [], o = Xe.value ?? M;
       return t.map((a, l) => ({
         name: a?.name ?? "",
@@ -274,7 +274,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         prefix: a?.prefix ?? "",
         suffix: a?.suffix ?? ""
       }));
-    }), T = p(() => V.value.series.map((t, o) => ({
+    }), T = g(() => V.value.series.map((t, o) => ({
       ...t,
       color: vt(t.color) || Xe.value[o] || M[o] || M[o % M.length],
       serieId: `radar_serie_${m.value}_${o}`,
@@ -295,17 +295,17 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       const o = Ye(t);
       o !== null && (h.value.includes(o.absoluteIndex) || se(o.absoluteIndex));
     }
-    const je = p(() => Math.max(...T.value.flatMap((t) => t.values))), qe = p(() => T.value.length), fe = p(() => Math.min(v.value.width, v.value.height) / 3), He = p(() => dt({
+    const je = g(() => Math.max(...T.value.flatMap((t) => t.values))), qe = g(() => T.value.length), ye = g(() => Math.min(v.value.width, v.value.height) / 3), He = g(() => dt({
       plot: { x: v.value.width / 2, y: v.value.height / 2 },
-      radius: fe.value,
+      radius: ye.value,
       sides: qe.value,
       rotation: 0
-    })), zt = p(() => {
+    })), zt = g(() => {
       const t = [];
-      for (let o = 0; o < fe.value; o += fe.value / e.value.style.chart.layout.grid.graduations)
+      for (let o = 0; o < ye.value; o += ye.value / e.value.style.chart.layout.grid.graduations)
         t.push(o);
       return t;
-    }), y = p(() => He.value.coordinates.map((t, o) => {
+    }), y = g(() => He.value.coordinates.map((t, o) => {
       const a = T.value[o].values.map((l) => Ut({
         centerX: v.value.width / 2,
         centerY: v.value.height / 2,
@@ -320,19 +320,19 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       };
     }).map((t) => ({
       ...t,
-      labelX: ye(t).x,
-      labelY: ye(t).y,
-      labelAnchor: ye(t).anchor
+      labelX: me(t).x,
+      labelY: me(t).y,
+      labelAnchor: me(t).anchor
     })));
-    function ye({ x: t, y: o }) {
+    function me({ x: t, y: o }) {
       let a = "middle";
       return t = Math.round(t), o = Math.round(o), t > v.value.width / 2 && (t += 12, a = "start"), t < v.value.width / 2 && (t -= 12, a = "end"), o > v.value.height / 2 + 1 && (o += 20), o < v.value.height / 2 - 1 && (o -= 12), o === v.value.height / 2 && (o += 4), { x: t, y: o, anchor: a };
     }
-    const Bt = p({
+    const Bt = g({
       get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
       set: (t) => t
     }), { autoSizeLabels: Je } = Oa({
-      svgRef: F,
+      svgRef: x,
       fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
       minFontSize: 6,
       sizeRef: Bt,
@@ -344,7 +344,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         y: o + (l - o) * r
       };
     }
-    const _ = p(() => {
+    const _ = g(() => {
       const t = T.value.map((o, a) => o.values.map((l) => l / (o.target || je.value)));
       return P.value.map((o, a) => {
         const l = da(t.map((r) => r[a]).reduce((r, n) => r + n, 0) / T.value.length);
@@ -363,14 +363,14 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
           })}`
         };
       });
-    }), Et = p(() => ({
+    }), Et = g(() => ({
       cy: "radar-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), K = p(() => {
+    })), K = g(() => {
       const t = [
         { name: e.value.translations.datapoint, color: "" },
         { name: e.value.translations.target, color: "" },
@@ -410,7 +410,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         breakpoint: e.value.table.responsiveBreakpoint
       };
       return { head: t, body: o, config: a, colNames: t };
-    }), Y = u(null), me = u([]), be = u(null);
+    }), Y = u(null), be = u([]), re = u(null);
     function Mt(t, o) {
       q.value = !1, Y.value = null, A.value = null, J.value = "pointer", e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
     }
@@ -420,7 +420,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
     function Ze(t, o, a = "pointer") {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), J.value = a, A.value = o;
       const l = P.value.slice();
-      me.value = [], Y.value = o, q.value = !0, be.value = {
+      be.value = [], Y.value = o, q.value = !0, re.value = {
         datapoint: t,
         seriesIndex: o,
         series: {
@@ -437,7 +437,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         series: { categories: l, datapoints: T.value, radar: y.value },
         config: e.value
       }))) {
-        ue.value = r({
+        ie.value = r({
           seriesIndex: o,
           datapoint: t,
           series: { categories: l, datapoints: T.value, radar: y.value },
@@ -445,10 +445,10 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         });
         return;
       }
-      ue.value = `<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>`;
+      ie.value = `<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>`;
       for (let n = 0; n < t.values.length; n += 1)
         if (!h.value.includes(n)) {
-          const C = l[n], L = t.values[n], te = isNaN(L / t.target) ? 0 : L / t.target * 100, st = Pe(
+          const $ = l[n], L = t.values[n], te = isNaN(L / t.target) ? 0 : L / t.target * 100, st = Pe(
             t.formatter,
             L,
             j({
@@ -463,10 +463,10 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
             s: "%",
             r: e.value.style.chart.tooltip.roundingPercentage
           }), ta = e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${st} (${rt})` : e.value.style.chart.tooltip.showValue && !e.value.style.chart.tooltip.showPercentage ? st : !e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${rt}` : "";
-          me.value.push({
-            name: C?.name ?? `#${n + 1}`,
+          be.value.push({
+            name: $?.name ?? `#${n + 1}`,
             value: t.values[n] / t.target * 100,
-            color: C?.color,
+            color: $?.color,
             suffix: ta,
             prefix: "",
             rounding: e.value.style.chart.tooltip.roundingPercentage,
@@ -476,9 +476,9 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
     }
     function ke(t = null) {
       Ae(() => {
-        const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = [[""], [e.value.translations.target], ..._.value.flatMap((C) => [[C.name], ["%"]])], l = V.value.series.map((C, L) => [C.name, C.target, ...C.values.flatMap((te) => [
+        const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = [[""], [e.value.translations.target], ..._.value.flatMap(($) => [[$.name], ["%"]])], l = V.value.series.map(($, L) => [$.name, $.target, ...$.values.flatMap((te) => [
           te,
-          isNaN(te / C.target) ? "" : te / C.target * 100
+          isNaN(te / $.target) ? "" : te / $.target * 100
         ])]), r = o.concat([a]).concat(l), n = ha(r);
         t ? t(n) : fa({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-radar" });
       });
@@ -488,10 +488,10 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       B.value = t, Ie.value += 1;
     }
     function tt() {
-      k.value.showTable = !k.value.showTable;
+      w.value.showTable = !w.value.showTable;
     }
     function at() {
-      k.value.showTooltip = !k.value.showTooltip;
+      w.value.showTooltip = !w.value.showTooltip;
     }
     const Z = u(!1);
     function Ce() {
@@ -509,8 +509,8 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         aspectRatio: l
       };
     }
-    const ee = p(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, o = k.value.showTable;
+    const ee = g(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, o = w.value.showTable;
       return {
         component: t ? Pt : Ct,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
@@ -540,17 +540,17 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         }
       };
     });
-    $e(() => k.value.showTable, (t) => {
+    $e(() => w.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && H.value ? H.value.open() : "close" in H.value && H.value.close());
     });
     function ot() {
-      k.value.showTable = !1, ie.value && ie.value.setTableIconState(!1);
+      w.value.showTable = !1, ce.value && ce.value.setTableIconState(!1);
     }
-    const Gt = p(() => _.value.map((t) => ({
+    const Gt = g(() => _.value.map((t) => ({
       ...t,
       name: t.display
-    }))), Xt = p(() => e.value.style.chart.backgroundColor), Kt = p(() => e.value.style.chart.legend), Yt = p(() => e.value.style.chart.title), { exportSvg: jt, getSvg: qt } = Aa({
-      svg: F,
+    }))), Xt = g(() => e.value.style.chart.backgroundColor), Kt = g(() => e.value.style.chart.legend), Yt = g(() => e.value.style.chart.title), { exportSvg: jt, getSvg: qt } = Aa({
+      svg: x,
       title: Yt,
       legend: Kt,
       legendItems: Gt,
@@ -593,23 +593,23 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       }));
     }
     function Jt() {
-      A.value = null, ce.value = !0;
+      A.value = null, ve.value = !0;
     }
     function Qt() {
-      A.value = null, J.value = "pointer", q.value = !1, Y.value = null, ce.value = !1;
+      A.value = null, J.value = "pointer", q.value = !1, Y.value = null, ve.value = !1;
     }
     function Zt(t) {
-      if (!Number.isFinite(t) || !F.value) return;
+      if (!Number.isFinite(t) || !x.value) return;
       const o = y.value[t];
       if (!o) return;
-      const a = F.value.getBoundingClientRect();
+      const a = x.value.getBoundingClientRect();
       Be.value = {
         x: a.left + o.labelX / v.value.width * a.width,
         y: a.top + o.labelY / v.value.height * a.height
       };
     }
     function ea(t) {
-      if (!F.value || Z.value || document.activeElement !== F.value || !y.value.length) return;
+      if (!x.value || Z.value || document.activeElement !== x.value || !y.value.length) return;
       const o = ["ArrowLeft", "ArrowUp"].includes(t.key), a = ["ArrowRight", "ArrowDown"].includes(t.key), l = t.key === "Enter" || t.key === " ", r = t.key === "Escape";
       if (!o && !a && !l && !r) return;
       if (t.preventDefault(), t.stopPropagation(), r) {
@@ -625,10 +625,10 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       }
       let n = A.value;
       n === null || n < 0 || n >= y.value.length ? n = a ? 0 : y.value.length - 1 : a ? (n += 1, n >= y.value.length && (n = 0)) : o && (n -= 1, n < 0 && (n = y.value.length - 1));
-      const C = y.value[n];
-      C && (A.value = n, Zt(n), Ze(C, n, "keyboard"));
+      const $ = y.value[n];
+      $ && (A.value = n, Zt(n), Ze($, n, "keyboard"));
     }
-    const we = p(() => {
+    const we = g(() => {
       const t = K.value?.colNames?.map((a) => a.name ?? a) ?? [], o = K.value?.body ?? [];
       return { headers: t, rows: o };
     });
@@ -671,7 +671,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       }, null, 8, ["uid", "head", "body", "notice", "caption"])) : f("", !0),
       e.value.userOptions.buttons.annotator ? (s(), S(i($t), {
         key: 1,
-        svgRef: i(F),
+        svgRef: i(x),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: Z.value,
@@ -679,26 +679,26 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         onClose: Ce
       }, {
         "annotator-action-close": d(() => [
-          g(t.$slots, "annotator-action-close", {}, void 0, !0)
+          p(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": d(({ color: a }) => [
-          g(t.$slots, "annotator-action-color", w($({ color: a })), void 0, !0)
+          p(t.$slots, "annotator-action-color", k(C({ color: a })), void 0, !0)
         ]),
         "annotator-action-draw": d(({ mode: a }) => [
-          g(t.$slots, "annotator-action-draw", w($({ mode: a })), void 0, !0)
+          p(t.$slots, "annotator-action-draw", k(C({ mode: a })), void 0, !0)
         ]),
         "annotator-action-undo": d(({ disabled: a }) => [
-          g(t.$slots, "annotator-action-undo", w($({ disabled: a })), void 0, !0)
+          p(t.$slots, "annotator-action-undo", k(C({ disabled: a })), void 0, !0)
         ]),
         "annotator-action-redo": d(({ disabled: a }) => [
-          g(t.$slots, "annotator-action-redo", w($({ disabled: a })), void 0, !0)
+          p(t.$slots, "annotator-action-redo", k(C({ disabled: a })), void 0, !0)
         ]),
         "annotator-action-delete": d(({ disabled: a }) => [
-          g(t.$slots, "annotator-action-delete", w($({ disabled: a })), void 0, !0)
+          p(t.$slots, "annotator-action-delete", k(C({ disabled: a })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : f("", !0),
-      xt.value ? (s(), c("div", {
+      Ft.value ? (s(), c("div", {
         key: 2,
         ref_key: "noTitle",
         ref: Le,
@@ -708,10 +708,10 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       e.value.style.chart.title.text ? (s(), c("div", {
         key: 3,
         ref_key: "chartTitle",
-        ref: xe,
+        ref: Fe,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (s(), S(xa, {
+        (s(), S(Fa, {
           key: `title_${Re.value}`,
           config: {
             title: {
@@ -728,14 +728,14 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       b("div", {
         id: `legend-top-${m.value}`
       }, null, 8, Ba),
-      e.value.userOptions.show && Oe.value && (i(Ee) || i(de)) ? (s(), S(i(Tt), {
+      e.value.userOptions.show && Oe.value && (i(Ee) || i(pe)) ? (s(), S(i(Tt), {
         ref_key: "userOptionsRef",
-        ref: ie,
+        ref: ce,
         key: `user_options_${Ie.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: i(he),
-        isPrinting: i(ge),
+        isImaging: i(fe),
+        isPrinting: i(he),
         uid: m.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -746,7 +746,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         hasAltCopy: e.value.userOptions.buttons.altCopy,
         isFullscreen: B.value,
-        isTooltip: k.value.showTooltip,
+        isTooltip: w.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: I.value,
         position: e.value.userOptions.position,
@@ -766,76 +766,76 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         onToggleAnnotator: Ce,
         onCopyAlt: nt,
         style: ae({
-          visibility: i(Ee) ? i(de) ? "visible" : "hidden" : "visible"
+          visibility: i(Ee) ? i(pe) ? "visible" : "hidden" : "visible"
         })
       }, it({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: d(({ isOpen: a, color: l }) => [
-            g(t.$slots, "menuIcon", w($({ isOpen: a, color: l })), void 0, !0)
+            p(t.$slots, "menuIcon", k(C({ isOpen: a, color: l })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: d(() => [
-            g(t.$slots, "optionTooltip", {}, void 0, !0)
+            p(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
           fn: d(() => [
-            g(t.$slots, "optionPdf", {}, void 0, !0)
+            p(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
           fn: d(() => [
-            g(t.$slots, "optionCsv", {}, void 0, !0)
+            p(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
           fn: d(() => [
-            g(t.$slots, "optionImg", {}, void 0, !0)
+            p(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
           fn: d(() => [
-            g(t.$slots, "optionSvg", {}, void 0, !0)
+            p(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
           fn: d(() => [
-            g(t.$slots, "optionTable", {}, void 0, !0)
+            p(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: d(({ toggleFullscreen: a, isFullscreen: l }) => [
-            g(t.$slots, "optionFullscreen", w($({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+            p(t.$slots, "optionFullscreen", k(C({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: d(({ toggleAnnotator: a, isAnnotator: l }) => [
-            g(t.$slots, "optionAnnotator", w($({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+            p(t.$slots, "optionAnnotator", k(C({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAltCopy ? {
           name: "optionAltCopy",
           fn: d(({ altCopy: a }) => [
-            g(t.$slots, "optionAltCopy", w($({ altCopy: a })), void 0, !0)
+            p(t.$slots, "optionAltCopy", k(C({ altCopy: a })), void 0, !0)
           ]),
           key: "9"
         } : void 0
@@ -843,7 +843,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       b("div", Ua, [
         (s(), c("svg", {
           ref_key: "svgRef",
-          ref: F,
+          ref: x,
           xmlns: i(pa),
           "aria-describedby": `chart-instructions-${m.value}`,
           class: oe({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value }),
@@ -854,7 +854,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
           onBlur: Qt,
           onKeydown: ea
         }, [
-          re(i(At)),
+          ue(i(At)),
           t.$slots["chart-background"] ? (s(), c("foreignObject", {
             key: 0,
             x: 0,
@@ -865,7 +865,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
               pointerEvents: "none"
             }
           }, [
-            g(t.$slots, "chart-background", {}, void 0, !0)
+            p(t.$slots, "chart-background", {}, void 0, !0)
           ], 8, Ma)) : f("", !0),
           b("defs", null, [
             (s(!0), c(U, null, E(P.value, (a, l) => (s(), c("radialGradient", {
@@ -963,20 +963,20 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
               }, null, 10, ao))), 256))
             ]))), 256))
           ])) : f("", !0),
-          g(t.$slots, "svg", {
+          p(t.$slots, "svg", {
             svg: {
               ...v.value,
-              isPrintingImg: i(ge) | i(he) | le.value,
+              isPrintingImg: i(he) | i(fe) | le.value,
               isPrintingSvg: ne.value
             }
           }, void 0, !0)
         ], 46, Ea)),
         t.$slots.hint ? (s(), c("div", oo, [
-          g(t.$slots, "hint", w($({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: ce.value })), void 0, !0)
+          p(t.$slots, "hint", k(C({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: ve.value })), void 0, !0)
         ])) : f("", !0)
       ]),
       t.$slots.watermark ? (s(), c("div", lo, [
-        g(t.$slots, "watermark", w($({ isPrinting: i(ge) || i(he) || le.value || ne.value })), void 0, !0)
+        p(t.$slots, "watermark", k(C({ isPrinting: i(he) || i(fe) || le.value || ne.value })), void 0, !0)
       ])) : f("", !0),
       b("div", {
         id: `legend-bottom-${m.value}`
@@ -987,9 +987,9 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
       }, [
         b("div", {
           ref_key: "chartLegend",
-          ref: Fe
+          ref: xe
         }, [
-          e.value.style.chart.legend.show ? (s(), S(Fa, {
+          e.value.style.chart.legend.show ? (s(), S(xa, {
             key: `legend_${Ve.value}`,
             legendSet: _.value,
             config: Et.value,
@@ -997,14 +997,14 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
             onClickMarker: o[0] || (o[0] = ({ i: a }) => se(a))
           }, {
             item: d(({ legend: a, index: l }) => [
-              i(ve) ? f("", !0) : (s(), c("div", {
+              i(de) ? f("", !0) : (s(), c("div", {
                 key: 0,
                 onClick: (r) => a.segregate(),
                 style: ae(`opacity:${h.value.includes(l) ? 0.5 : 1}`)
               }, R(a.display), 13, so))
             ]),
             legendToggle: d(() => [
-              _.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !i(ve) ? (s(), S(Ra, {
+              _.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !i(de) ? (s(), S(Ra, {
                 key: 0,
                 backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
                 color: e.value.style.chart.legend.selectAllToggle.color,
@@ -1015,7 +1015,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
               }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : f("", !0)
             ]),
             _: 1
-          }, 8, ["legendSet", "config", "isCursorPointer"])) : g(t.$slots, "legend", {
+          }, 8, ["legendSet", "config", "isCursorPointer"])) : p(t.$slots, "legend", {
             key: 1,
             legend: _.value
           }, void 0, !0)
@@ -1027,11 +1027,11 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         ref: Ne,
         dir: "auto"
       }, [
-        g(t.$slots, "source", {}, void 0, !0)
+        p(t.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      re(i(mt), {
+      ue(i(mt), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
-        show: k.value.showTooltip && q.value,
+        show: w.value.showTooltip && q.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -1042,7 +1042,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: I.value,
-        content: ue.value,
+        content: ie.value,
         isFullscreen: B.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
@@ -1053,13 +1053,16 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
         a11yPosition: Be.value
       }, {
         "tooltip-before": d(() => [
-          g(t.$slots, "tooltip-before", w($({ ...be.value })), void 0, !0)
+          p(t.$slots, "tooltip-before", k(C({ ...re.value })), void 0, !0)
+        ]),
+        tooltip: d(() => [
+          p(t.$slots, "tooltip", k(C({ ...re.value })), void 0, !0)
         ]),
         "tooltip-after": d(() => [
-          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? f("", !0) : (s(), c("div", ro, [
-            re(i(kt), {
-              dataset: me.value,
-              config: Ft.value,
+          !["function"].includes(typeof e.value.style.chart.tooltip.customFormat) && !t.$slots.tooltip ? (s(), c("div", ro, [
+            ue(i(kt), {
+              dataset: be.value,
+              config: xt.value,
               backgroundOpacity: 0
             }, {
               "data-label": d(({ bar: a }) => [
@@ -1070,8 +1073,8 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
               ]),
               _: 1
             }, 8, ["dataset", "config"])
-          ])),
-          g(t.$slots, "tooltip-after", w($({ ...be.value })), void 0, !0)
+          ])) : f("", !0),
+          p(t.$slots, "tooltip-after", k(C({ ...re.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
@@ -1119,7 +1122,7 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
               onClick: o[1] || (o[1] = (a) => ke(e.value.userOptions.callbacks.csv)),
               style: ae({ cursor: D.value ? "pointer" : "default" })
             }, [
-              re(i(bt), {
+              ue(i(bt), {
                 name: "fileCsv",
                 stroke: ee.value.props.color
               }, null, 8, ["stroke"])
@@ -1128,12 +1131,12 @@ const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative
           key: "1"
         } : void 0
       ]), 1040)) : f("", !0),
-      g(t.$slots, "skeleton", {}, () => [
-        i(ve) ? (s(), S($a, { key: 0 })) : f("", !0)
+      p(t.$slots, "skeleton", {}, () => [
+        i(de) ? (s(), S($a, { key: 0 })) : f("", !0)
       ], !0)
     ], 46, Va));
   }
-}, Fo = /* @__PURE__ */ Da(vo, [["__scopeId", "data-v-b7b15d24"]]);
+}, xo = /* @__PURE__ */ Da(vo, [["__scopeId", "data-v-dd180fcd"]]);
 export {
-  Fo as default
+  xo as default
 };