vue-data-ui 3.17.7 → 3.17.9

package/dist/{vue-ui-quadrant-BP91bgJ2.js → vue-ui-quadrant-Foz7WuoD.js}

@@ -1,42 +1,42 @@
-import { defineAsyncComponent as R, computed as m, ref as h, toRefs as sl, watch as Fe, shallowRef as xt, onMounted as nl, onBeforeUnmount as rl, openBlock as n, createElementBlock as r, unref as v, normalizeStyle as _, normalizeClass as O, createElementVNode as d, toDisplayString as w, createBlock as B, createCommentVNode as y, withCtx as p, renderSlot as g, normalizeProps as T, guardReactiveProps as q, createSlots as $t, createVNode as de, Fragment as A, renderList as N, mergeProps as kt, Teleport as il, resolveDynamicComponent as vl, createTextVNode as wt, nextTick as Se } from "vue";
-import { j as Lt, t as dl, m as cl, p as Ie, o as hl, q as ae, n as yl, s as bl, ak as fl, k as D, l as H, X as pl, u as _e, v as gl, al as ml, Z as xl, W as $l, a0 as kl, a1 as wl, T as Ll, U as Cl } from "./lib-DMzrGQHK.js";
-import { t as Sl, u as _l } from "./useResponsive-DfdjqQps.js";
-import { u as Tl } from "./useConfig-DTHxOX6V.js";
-import { u as ql, B as Al } from "./BaseScanner-C2j3TsSY.js";
-import { u as zl } from "./usePrinter-C4t8DdQ-.js";
-import { u as Wl } from "./useSvgExport-BTG4hVPO.js";
-import { u as Xl } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as Re } from "./useNestedProp-DH0BEVVS.js";
-import { u as Pl } from "./useUserOptionState-B7Ej974k.js";
-import { u as Yl } from "./useChartAccessibility-cp6XQtqi.js";
-import Ml from "./img-CjTQXS0U.js";
-import Ol from "./Title-BbKoiBk2.js";
-import { _ as Ct } from "./Shape-CxJ5_Rre.js";
-import Bl from "./vue_ui_quadrant-DjRs--Uz.js";
-import Nl from "./Legend-DGN5lY60.js";
-import { A as Vl } from "./A11yDataTable-BpmuNomI.js";
-import { B as Fl } from "./BaseLegendToggle-cMP8M2u0.js";
-import { _ as Il } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative" } }, Ul = ["xmlns", "aria-describedby", "viewBox", "id"], Ql = ["x", "y", "width", "height"], Gl = ["id"], Kl = ["stop-color"], jl = ["stop-color"], Jl = { key: 1 }, Zl = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], ea = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ta = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], la = { key: 2 }, aa = ["points", "fill"], oa = ["points", "fill"], ua = ["points", "fill"], sa = ["points", "fill"], na = { key: 3 }, ra = ["y", "fill", "font-size"], ia = ["x", "y", "fill", "font-size"], va = ["x", "y", "fill", "font-size"], da = ["y", "fill", "font-size"], ca = { key: 4 }, ha = ["x", "y", "font-size", "fill"], ya = ["x", "y", "font-size", "fill"], ba = ["x", "y", "font-size", "fill"], fa = ["id", "font-size", "transform", "fill"], pa = ["id", "font-size", "transform", "fill"], ga = ["id", "font-size", "transform", "fill"], ma = { key: 5 }, xa = ["fill", "points"], $a = ["x", "y", "width", "height"], ka = ["x", "y", "width", "height"], wa = ["x", "y", "width", "height"], La = ["x", "y", "width", "height"], Ca = ["x", "y", "onMouseenter", "onMouseleave", "onClick"], Sa = ["data-a11y-plot-id", "cx", "cy", "r", "aria-label"], _a = ["data-a11y-plot-id", "cx", "cy", "r", "aria-label"], Ta = {
+import { defineAsyncComponent as D, computed as m, ref as h, toRefs as nl, watch as Ve, shallowRef as $t, onMounted as rl, onBeforeUnmount as il, openBlock as n, createElementBlock as r, unref as v, normalizeStyle as _, normalizeClass as O, createElementVNode as y, toDisplayString as w, createBlock as B, createCommentVNode as d, withCtx as p, renderSlot as g, normalizeProps as T, guardReactiveProps as q, createSlots as kt, createVNode as ce, Fragment as A, renderList as N, mergeProps as wt, Teleport as vl, resolveDynamicComponent as dl, createTextVNode as Lt, nextTick as _e } from "vue";
+import { j as Ct, t as cl, m as hl, p as Re, o as yl, q as oe, n as bl, s as fl, ak as pl, k as H, l as E, X as gl, u as Te, v as ml, al as xl, Z as $l, W as kl, a0 as wl, a1 as Ll, T as Cl, U as Sl } from "./lib-DMzrGQHK.js";
+import { t as _l, u as Tl } from "./useResponsive-DfdjqQps.js";
+import { u as ql } from "./useConfig-B70q17MC.js";
+import { u as Al, B as zl } from "./BaseScanner-C2j3TsSY.js";
+import { u as Wl } from "./usePrinter-C4t8DdQ-.js";
+import { u as Xl } from "./useSvgExport-BTG4hVPO.js";
+import { u as Pl } from "./useThemeCheck-C9Ccl7U9.js";
+import { u as De } from "./useNestedProp-DH0BEVVS.js";
+import { u as Yl } from "./useUserOptionState-B7Ej974k.js";
+import { u as Ml } from "./useChartAccessibility-cp6XQtqi.js";
+import Ol from "./img-CjTQXS0U.js";
+import Bl from "./Title-BbKoiBk2.js";
+import { _ as St } from "./Shape-CxJ5_Rre.js";
+import Nl from "./vue_ui_quadrant-DjRs--Uz.js";
+import Fl from "./Legend-DGN5lY60.js";
+import { A as Il } from "./A11yDataTable-BpmuNomI.js";
+import { B as Vl } from "./BaseLegendToggle-cMP8M2u0.js";
+import { _ as Rl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Dl = ["id"], Hl = ["id"], El = ["id"], Ul = { style: { position: "relative" } }, Ql = ["xmlns", "aria-describedby", "viewBox", "id"], Gl = ["x", "y", "width", "height"], Kl = ["id"], jl = ["stop-color"], Jl = ["stop-color"], Zl = { key: 1 }, ea = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], ta = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], la = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], aa = { key: 2 }, oa = ["points", "fill"], ua = ["points", "fill"], sa = ["points", "fill"], na = ["points", "fill"], ra = { key: 3 }, ia = ["y", "fill", "font-size"], va = ["x", "y", "fill", "font-size"], da = ["x", "y", "fill", "font-size"], ca = ["y", "fill", "font-size"], ha = { key: 4 }, ya = ["x", "y", "font-size", "fill"], ba = ["x", "y", "font-size", "fill"], fa = ["x", "y", "font-size", "fill"], pa = ["id", "font-size", "transform", "fill"], ga = ["id", "font-size", "transform", "fill"], ma = ["id", "font-size", "transform", "fill"], xa = { key: 5 }, $a = ["fill", "points"], ka = ["x", "y", "width", "height"], wa = ["x", "y", "width", "height"], La = ["x", "y", "width", "height"], Ca = ["x", "y", "width", "height"], Sa = ["x", "y", "onMouseenter", "onMouseleave", "onClick"], _a = ["data-a11y-plot-id", "cx", "cy", "r"], Ta = ["data-a11y-plot-id", "cx", "cy", "r"], qa = {
   key: 0,
   style: { "pointer-events": "none" }
-}, qa = ["x", "y", "font-size", "fill"], Aa = ["x", "y", "font-size", "fill", "innerHTML"], za = { key: 0 }, Wa = ["x", "y", "onMouseover", "onMouseleave", "onClick"], Xa = {
+}, Aa = ["x", "y", "font-size", "fill"], za = ["x", "y", "font-size", "fill", "innerHTML"], Wa = { key: 0 }, Xa = ["x", "y", "onMouseover", "onMouseleave", "onClick"], Pa = {
   key: 8,
   class: "vue-ui-dna"
-}, Pa = ["points", "fill"], Ya = ["points", "fill"], Ma = ["points", "fill"], Oa = ["points", "fill"], Ba = { key: 9 }, Na = ["x", "y", "font-size", "fill", "font-weight"], Va = { key: 10 }, Fa = ["x", "y", "fill"], Ia = ["x", "y", "fill"], Ra = ["x", "y", "fill"], Da = ["x", "y", "fill"], Ha = ["stroke", "d"], Ea = ["stroke", "d"], Ua = {
+}, Ya = ["points", "fill"], Ma = ["points", "fill"], Oa = ["points", "fill"], Ba = ["points", "fill"], Na = { key: 9 }, Fa = ["x", "y", "font-size", "fill", "font-weight"], Ia = { key: 10 }, Va = ["x", "y", "fill"], Ra = ["x", "y", "fill"], Da = ["x", "y", "fill"], Ha = ["x", "y", "fill"], Ea = ["stroke", "d"], Ua = ["stroke", "d"], Qa = {
   key: 0,
   style: { position: "absolute", top: "100%", left: "0", width: "100%" },
   "data-dom-to-png-ignore": "",
   "aria-hidden": "true"
-}, Qa = {
+}, Ga = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Ga = ["id"], Ka = ["onClick"], ja = {
+}, Ka = ["id"], ja = ["onClick"], Ja = {
   key: 0,
   height: "14",
   width: "14",
   viewBox: "0 0 20 20"
-}, Ja = ["innerHTML"], Za = {
+}, Za = ["innerHTML"], eo = {
   __name: "vue-ui-quadrant",
   props: {
     config: {
@@ -58,18 +58,18 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
     "selectLegend",
     "copyAlt"
   ],
-  setup(St, { expose: _t, emit: Tt }) {
-    const qt = R(() => import("./Tooltip-Cvt7Fi0Q.js")), At = R(() => import("./BaseIcon-DX0hTWa-.js")), zt = R(() => import("./vue-ui-accordion-BHmfmb_6.js")), Wt = R(() => import("./DataTable-cMnb68Ik.js")), Xt = R(
+  setup(_t, { expose: Tt, emit: qt }) {
+    const At = D(() => import("./Tooltip-Cvt7Fi0Q.js")), zt = D(() => import("./BaseIcon-DX0hTWa-.js")), Wt = D(() => import("./vue-ui-accordion-_zwPlx0H.js")), Xt = D(() => import("./DataTable-cMnb68Ik.js")), Pt = D(
       () => import("./PenAndPaper-CJDoB5H9.js")
-    ), Pt = R(
+    ), Yt = D(
       () => import("./UserOptions-DVduN6X7.js")
-    ), Yt = R(
-      () => import("./PackageVersion-D7UsxIU3.js")
-    ), Mt = R(
+    ), Mt = D(
+      () => import("./PackageVersion-Ov37I8ii.js")
+    ), Ot = D(
       () => import("./BaseDraggableDialog-Di8Hlru3.js")
-    ), { vue_ui_quadrant: Ot } = Tl(), { isThemeValid: Bt, warnInvalidTheme: Nt } = Xl(), M = St, De = m(() => !!M.dataset && M.dataset.length), $ = h(Lt()), ce = Tt, he = h(!1), Te = h(""), He = h(0), x = h(!1), V = h(null), Ee = h(null), Ue = h(null), Qe = h(null), Ge = h(null), Ke = h(0), je = h(0), Je = h(0), Ze = h(!1), oe = h(null), qe = h(null), ye = h(!1), be = h(!1), j = h(null), fe = h(null), et = h({ x: 0, y: 0 }), Ae = h("pointer"), pe = h(!1), e = h(We()), X = m(
+    ), { vue_ui_quadrant: Bt } = ql(), { isThemeValid: Nt, warnInvalidTheme: Ft } = Pl(), M = _t, He = m(() => !!M.dataset && M.dataset.length), $ = h(Ct()), he = qt, ye = h(!1), qe = h(""), Ee = h(0), x = h(!1), F = h(null), Ue = h(null), Qe = h(null), Ge = h(null), Ke = h(null), je = h(0), Je = h(0), Ze = h(0), et = h(!1), ue = h(null), Ae = h(null), be = h(!1), fe = h(!1), J = h(null), pe = h(null), tt = h({ x: 0, y: 0 }), ze = h("pointer"), ge = h(!1), e = h(Xe()), X = m(
       () => e.value.userOptions.useCursorPointer
-    ), Vt = m(() => ({
+    ), It = m(() => ({
       defaultConfig: {
         userOptions: { show: !1 },
         table: { show: !1 },
@@ -106,13 +106,13 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         }
       },
       userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: ge, FINAL_DATASET: tt } = ql({
-      ...sl(M),
+    })), { loading: me, FINAL_DATASET: lt } = Al({
+      ...nl(M),
       FINAL_CONFIG: e,
-      prepareConfig: We,
+      prepareConfig: Xe,
       callback: () => {
         Promise.resolve().then(async () => {
-          await Se(), k.value.showTable = e.value.table.show;
+          await _e(), k.value.showTable = e.value.table.show;
         });
       },
       skeletonDataset: M.config?.skeletonDataset ?? [
@@ -137,95 +137,95 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
           ]
         }
       ],
-      skeletonConfig: dl({
+      skeletonConfig: cl({
         defaultConfig: e.value,
-        userConfig: Vt.value
+        userConfig: It.value
       })
-    }), { userOptionsVisible: ze, setUserOptionsVisibility: lt, keepUserOptionState: at } = Pl({ config: e.value }), { svgRef: E } = Yl({
+    }), { userOptionsVisible: We, setUserOptionsVisibility: at, keepUserOptionState: ot } = Yl({ config: e.value }), { svgRef: U } = Ml({
       config: e.value.style.chart.title
     });
-    function We() {
-      const l = Re({
+    function Xe() {
+      const l = De({
         userConfig: M.config,
-        defaultConfig: Ot
+        defaultConfig: Bt
       }), o = l.theme;
       if (!o) return l;
-      if (!Bt.value(l))
-        return Nt(l), l;
-      const a = Re({
-        userConfig: Bl[o] || M.config,
+      if (!Nt.value(l))
+        return Ft(l), l;
+      const a = De({
+        userConfig: Nl[o] || M.config,
         defaultConfig: l
-      }), s = Re({
+      }), s = De({
         userConfig: M.config,
         defaultConfig: a
       });
       return {
         ...s,
-        customPalette: s.customPalette.length ? s.customPalette : cl[o] || Ie
+        customPalette: s.customPalette.length ? s.customPalette : hl[o] || Re
       };
     }
-    Fe(
+    Ve(
       () => M.config,
       (l) => {
-        e.value = We(), ze.value = !e.value.userOptions.showOnChartHover, ot(), Ke.value += 1, je.value += 1, Je.value += 1, k.value.plotLabels.show = e.value.style.chart.layout.labels.plotLabels.show, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.chart.tooltip.show;
+        e.value = Xe(), We.value = !e.value.userOptions.showOnChartHover, ut(), je.value += 1, Je.value += 1, Ze.value += 1, k.value.plotLabels.show = e.value.style.chart.layout.labels.plotLabels.show, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.chart.tooltip.show;
       },
       { deep: !0 }
     );
-    const F = xt(null), J = xt(null), Z = m(() => e.value.debug);
-    function ot() {
-      if (hl(M.dataset) ? ae({
+    const V = $t(null), Z = $t(null), ee = m(() => e.value.debug);
+    function ut() {
+      if (yl(M.dataset) ? oe({
         componentName: "VueUiQuadrant",
         type: "dataset",
-        debug: Z.value
+        debug: ee.value
       }) : M.dataset.forEach((l, o) => {
-        [null, void 0].includes(l.name) && ae({
+        [null, void 0].includes(l.name) && oe({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
           property: "name",
           index: o,
-          debug: Z.value
-        }), [null, void 0].includes(l.series) ? ae({
+          debug: ee.value
+        }), [null, void 0].includes(l.series) ? oe({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
           property: "series",
           index: o,
-          debug: Z.value
+          debug: ee.value
         }) : l.series.forEach((a, s) => {
-          [null, void 0].includes(a.name) && ae({
+          [null, void 0].includes(a.name) && oe({
             componentName: "VueUiQuadrant",
             type: "datasetSerieAttribute",
             property: "name",
             key: "series",
             index: s,
-            debug: Z.value
+            debug: ee.value
           });
         });
       }), e.value.responsive) {
-        const l = Sl(() => {
-          const { width: o, height: a } = _l({
-            chart: V.value,
-            title: e.value.style.chart.title.text ? Ee.value : null,
-            legend: e.value.style.chart.legend.show ? Ue.value : null,
-            source: Qe.value,
-            noTitle: Ge.value
+        const l = _l(() => {
+          const { width: o, height: a } = Tl({
+            chart: F.value,
+            title: e.value.style.chart.title.text ? Ue.value : null,
+            legend: e.value.style.chart.legend.show ? Qe.value : null,
+            source: Ge.value,
+            noTitle: Ke.value
           });
           L.value = 48, requestAnimationFrame(() => {
             t.value.height = a, t.value.usableHeight = a - L.value * 2, t.value.width = o, t.value.usableWidth = o - L.value * 2, t.value.top = L.value, t.value.left = L.value, t.value.right = o - L.value, t.value.bottom = a - L.value, t.value.centerX = o / 2, t.value.centerY = a - a / 2, t.value.padding = L.value;
           });
         });
-        F.value && (J.value && F.value.unobserve(J.value), F.value.disconnect()), F.value = new ResizeObserver(l), J.value = V.value.parentNode, F.value.observe(J.value);
+        V.value && (Z.value && V.value.unobserve(Z.value), V.value.disconnect()), V.value = new ResizeObserver(l), Z.value = F.value.parentNode, V.value.observe(Z.value);
       }
     }
-    nl(() => {
-      Ze.value = !0, ot();
-    }), rl(() => {
-      F.value && (J.value && F.value.unobserve(J.value), F.value.disconnect());
+    rl(() => {
+      et.value = !0, ut();
+    }), il(() => {
+      V.value && (Z.value && V.value.unobserve(Z.value), V.value.disconnect());
     });
-    const { isPrinting: Xe, isImaging: Pe, generatePdf: ut, generateImage: st } = zl({
+    const { isPrinting: Pe, isImaging: Ye, generatePdf: st, generateImage: nt } = Wl({
       elementId: `vue-ui-quadrant_${$.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-quadrant",
       options: e.value.userOptions.print
-    }), Ft = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), nt = m(() => yl(e.value.customPalette)), k = h({
+    }), Vt = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), rt = m(() => bl(e.value.customPalette)), k = h({
       plotLabels: {
         show: e.value.style.chart.layout.labels.plotLabels.show
       },
@@ -248,7 +248,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
       startX: 0,
       startY: 0
     });
-    Fe(
+    Ve(
       () => t.value,
       (l) => {
         l && (b.value = {
@@ -259,7 +259,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
       },
       { deep: !0 }
     );
-    const f = h(null), U = m(() => {
+    const f = h(null), Q = m(() => {
       switch (f.value) {
         case "TL":
           return {
@@ -307,9 +307,9 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
             bold: !1
           };
       }
-    }), It = h(null), me = h(!1);
-    function ue({ targetX: l, targetY: o, targetW: a, targetH: s, side: u }) {
-      f.value && re(u);
+    }), Rt = h(null), xe = h(!1);
+    function se({ targetX: l, targetY: o, targetW: a, targetH: s, side: u }) {
+      f.value && ie(u);
       const i = {
         x: l - b.value.startX,
         y: o - b.value.startY,
@@ -317,15 +317,16 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         h: s - b.value.height
       }, c = e.value.zoomAnimationFrames;
       let Y = 0;
-      function Le() {
-        me.value = !0, b.value.startX += i.x / c, b.value.startY += i.y / c, b.value.width += i.w / c, b.value.height += i.h / c, Y += 1, Y < c ? It.value = requestAnimationFrame(Le) : me.value = !1;
+      function Ce() {
+        xe.value = !0, b.value.startX += i.x / c, b.value.startY += i.y / c, b.value.width += i.w / c, b.value.height += i.h / c, Y += 1, Y < c ? Rt.value = requestAnimationFrame(Ce) : xe.value = !1;
       }
-      Le();
+      Ce();
     }
-    function I(l) {
-      if (!me.value)
+    const I = m(() => e.value.zoomEnabled);
+    function R(l) {
+      if (I.value && !xe.value)
         if (x.value && f.value === l)
-          ue({
+          se({
             targetX: 0,
             targetY: 0,
             targetW: t.value.width,
@@ -334,7 +335,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         else {
           switch (f.value = l, l) {
             case "TL":
-              ue({
+              se({
                 targetX: 0,
                 targetY: 0,
                 targetW: t.value.width / 2 + t.value.left,
@@ -343,7 +344,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               });
               break;
             case "TR":
-              ue({
+              se({
                 targetX: t.value.width / 2 - t.value.left,
                 targetY: 0,
                 targetW: t.value.width / 2 + t.value.left,
@@ -352,7 +353,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               });
               break;
             case "BR":
-              ue({
+              se({
                 targetX: t.value.width / 2 - t.value.left,
                 targetY: t.value.height / 2 - t.value.top,
                 targetW: t.value.width / 2 + t.value.left,
@@ -361,7 +362,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               });
               break;
             case "BL":
-              ue({
+              se({
                 targetX: 0,
                 targetY: t.value.height / 2 - t.value.top,
                 targetW: t.value.width / 2 + t.value.left,
@@ -376,7 +377,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
           x.value = !0;
         }
     }
-    const Rt = m(() => {
+    const Dt = m(() => {
       const l = e.value.style.chart.layout.grid.graduations.steps, o = t.value.usableWidth / (l * 2), a = t.value.top, s = [];
       for (let u = 0; u < l; u += 1)
         s.push({
@@ -390,13 +391,13 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
     }), z = m(() => {
       let l = e.value.style.chart.layout.grid.xAxis.max, o = e.value.style.chart.layout.grid.xAxis.min, a = e.value.style.chart.layout.grid.yAxis.max, s = e.value.style.chart.layout.grid.yAxis.min;
       return e.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(
-        ...ee.value.flatMap((u) => u.series.map((i) => i.x))
+        ...te.value.flatMap((u) => u.series.map((i) => i.x))
       ), o = Math.min(
-        ...ee.value.flatMap((u) => u.series.map((i) => i.x))
+        ...te.value.flatMap((u) => u.series.map((i) => i.x))
       )), e.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(
-        ...ee.value.flatMap((u) => u.series.map((i) => i.y))
+        ...te.value.flatMap((u) => u.series.map((i) => i.y))
       ), s = Math.min(
-        ...ee.value.flatMap((u) => u.series.map((i) => i.y))
+        ...te.value.flatMap((u) => u.series.map((i) => i.y))
       )), {
         x: {
           max: l,
@@ -407,66 +408,68 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
           min: s
         }
       };
-    }), C = h([]), ee = m(
-      () => tt.value.map((l, o) => ({
+    }), C = h([]), te = m(
+      () => lt.value.map((l, o) => ({
         ...l,
-        series: fl({
+        series: pl({
           data: l.series,
           threshold: e.value.downsample.threshold
         }),
         id: `cat_${o}_${$.value}`,
-        color: bl(l.color) || nt.value[o] || Ie[o]
+        color: fl(l.color) || rt.value[o] || Re[o]
       }))
-    ), Ye = m(() => ee.value.filter((l) => !C.value.includes(l.id))), Dt = m(() => ee.value.map((l, o) => ({
+    ), Me = m(() => te.value.filter((l) => !C.value.includes(l.id))), Ht = m(() => te.value.map((l, o) => ({
       ...l,
       shape: l.shape || "circle",
       series: l.series.map((a) => ({
         ...a,
-        x: rt(a.x),
-        y: it(a.y),
+        x: it(a.x),
+        y: vt(a.y),
         xValue: a.x,
         yValue: a.y,
-        quadrantSide: dt({ x: a.x, y: a.y }),
+        quadrantSide: ct({ x: a.x, y: a.y }),
         categoryName: l.name,
+        category: l,
         shape: l.shape,
         color: l.color
       }))
-    }))), W = m(() => (tt.value.forEach((l, o) => {
+    }))), W = m(() => (lt.value.forEach((l, o) => {
       l.series.forEach((a, s) => {
-        [null, void 0].includes(a.x) && ae({
+        [null, void 0].includes(a.x) && oe({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
           property: "x",
           key: "series",
           index: s,
-          debug: Z.value
-        }), [null, void 0].includes(a.y) && ae({
+          debug: ee.value
+        }), [null, void 0].includes(a.y) && oe({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
           property: "y",
           key: "series",
           index: s,
-          debug: Z.value
+          debug: ee.value
         });
       });
-    }), Ye.value.map((l, o) => ({
+    }), Me.value.map((l, o) => ({
       ...l,
       shape: l.shape || "circle",
-      color: l.color || nt.value[o] || Ie[o],
+      color: l.color || rt.value[o] || Re[o],
       series: l.series.map((a) => ({
         ...a,
-        x: rt(a.x),
-        y: it(a.y),
+        category: l,
+        x: it(a.x),
+        y: vt(a.y),
         xValue: a.x,
         yValue: a.y,
-        quadrantSide: dt({ x: a.x, y: a.y }),
+        quadrantSide: ct({ x: a.x, y: a.y }),
         categoryName: l.name,
         shape: l.shape,
         color: l.color,
-        uid: Lt()
+        uid: Ct()
       }))
     }))));
-    function rt(l) {
+    function it(l) {
       if (l >= 0) {
         const o = l / z.value.x.max;
         return t.value.centerX + t.value.usableWidth / 2 * o;
@@ -475,7 +478,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         return t.value.centerX - t.value.usableWidth / 2 * o;
       }
     }
-    function it(l) {
+    function vt(l) {
       if (l >= 0) {
         const o = l / z.value.y.max;
         return t.value.centerY + (1 - t.value.usableHeight / 2 * o);
@@ -484,7 +487,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         return t.value.centerY - (1 - t.value.usableHeight / 2 * o);
       }
     }
-    const xe = m(() => {
+    const $e = m(() => {
       const l = W.value.flatMap((c) => c.series.map((Y) => ({
         x: Y.xValue,
         y: Y.yValue,
@@ -511,26 +514,26 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         color: c.color
       }));
       return { head: s, body: u, itsShapes: i, tableData: l };
-    }), te = m(() => {
-      const l = xe.value.head, o = xe.value.tableData.map((u) => [
+    }), le = m(() => {
+      const l = $e.value.head, o = $e.value.tableData.map((u) => [
         {
           shape: u.shape,
           color: u.color,
           name: u.category
         },
         u.name,
-        D(
+        H(
           e.value.style.chart.layout.labels.plotLabels.x.formatter,
           u.x,
-          H({
+          E({
             v: u.x,
             r: e.value.style.chart.layout.labels.plotLabels.rounding
           })
         ),
-        D(
+        H(
           e.value.style.chart.layout.labels.plotLabels.y.formatter,
           u.y,
-          H({
+          E({
             v: u.y,
             r: e.value.style.chart.layout.labels.plotLabels.rounding
           })
@@ -551,40 +554,40 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
       };
       return { head: l, body: o, a11yBody: a, config: s, colNames: l };
     });
-    function Ht() {
-      C.value.length ? C.value = [] : Q.value.forEach((l) => {
+    function Et() {
+      C.value.length ? C.value = [] : G.value.forEach((l) => {
         C.value.push(l.id);
       });
     }
-    function se(l) {
+    function ne(l) {
       C.value.includes(l) ? C.value = C.value.filter((a) => a !== l) : C.value.push(l);
-      const o = ct();
-      ce("selectLegend", o);
+      const o = ht();
+      he("selectLegend", o);
     }
-    const Q = m(() => Dt.value.map((l) => ({
+    const G = m(() => Ht.value.map((l) => ({
       name: l.name,
       shape: l.shape,
       color: l.color,
       id: l.id,
       opacity: C.value.includes(l.id) ? 0.5 : 1,
-      segregate: () => se(l.id),
+      segregate: () => ne(l.id),
       isSegregated: C.value.includes(l.id)
     })));
-    function vt(l) {
-      if (!Q.value.length)
+    function dt(l) {
+      if (!G.value.length)
         return e.value.debug && console.warn("VueUiQuadrant - There are no series to show."), null;
-      const o = Q.value.find((a) => a.name === l);
+      const o = G.value.find((a) => a.name === l);
       return o || (e.value.debug && console.warn(`VueUiQuadrant - Series name not found "${l}"`), null);
     }
-    function Et(l) {
-      const o = vt(l);
-      o !== null && C.value.includes(o.id) && se(o.id);
-    }
     function Ut(l) {
-      const o = vt(l);
-      o !== null && (C.value.includes(o.id) || se(o.id));
+      const o = dt(l);
+      o !== null && C.value.includes(o.id) && ne(o.id);
+    }
+    function Qt(l) {
+      const o = dt(l);
+      o !== null && (C.value.includes(o.id) || ne(o.id));
     }
-    const Qt = m(() => ({
+    const Gt = m(() => ({
       cy: "quadrant-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -592,7 +595,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
     }));
-    function dt(l) {
+    function ct(l) {
       switch (!0) {
         case (l.x >= 0 && l.y >= 0):
           return "tr";
@@ -606,35 +609,35 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
           return "";
       }
     }
-    const G = h(null), ne = h(null), $e = h(null);
-    function Me() {
-      G.value = null, ne.value = null, j.value = null, fe.value = null, he.value = !1;
+    const K = h(null), re = h(null), ke = h(null);
+    function Oe() {
+      K.value = null, re.value = null, J.value = null, pe.value = null, ye.value = !1;
     }
-    function Gt(l) {
-      if (!E.value || !l) return;
-      const o = `[data-a11y-plot-id="${l}"]`, a = E.value.querySelector(o);
+    function Kt(l) {
+      if (!U.value || !l) return;
+      const o = `[data-a11y-plot-id="${l}"]`, a = U.value.querySelector(o);
       if (!a) return;
       const s = a.getBoundingClientRect();
-      et.value = {
+      tt.value = {
         x: s.left + s.width / 2,
         y: s.top + s.height / 2
       };
     }
-    function ke(l, o, a, s = "pointer", u = null) {
+    function we(l, o, a, s = "pointer", u = null) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({
         datapoint: o,
         seriesIndex: a
-      }), G.value = o.uid, ne.value = {
+      }), K.value = o.uid, re.value = {
         color: l.color,
         shape: l.shape
-      }, Ae.value = s, j.value = u, fe.value = o.uid, $e.value = {
+      }, ze.value = s, J.value = u, pe.value = o.uid, ke.value = {
         datapoint: o,
         seriesIndex: a,
         series: W.value,
         config: e.value
       };
       const i = e.value.style.chart.tooltip.customFormat;
-      if (Ll(i) && Cl(
+      if (Cl(i) && Sl(
         () => i({
           seriesIndex: a,
           datapoint: o,
@@ -642,7 +645,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
           config: e.value
         })
       ))
-        Te.value = i({
+        qe.value = i({
           seriesIndex: a,
           datapoint: o,
           series: W.value,
@@ -650,35 +653,35 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         });
       else {
         let c = "";
-        o.quadrantSide && (c += `<div style="color:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].color};font-weight:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].bold ? "bold" : "400"}">${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text}</div>`), c += `<div>${l.name}</div>`, c += `<div style="padding-bottom:6px;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px">${o.name}</div>`, c += `<div>${e.value.style.chart.layout.grid.xAxis.name ? e.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${D(
+        o.quadrantSide && (c += `<div style="color:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].color};font-weight:${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].bold ? "bold" : "400"}">${e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text}</div>`), c += `<div>${l.name}</div>`, c += `<div style="padding-bottom:6px;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px">${o.name}</div>`, c += `<div>${e.value.style.chart.layout.grid.xAxis.name ? e.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${H(
           e.value.style.chart.layout.labels.plotLabels.x.formatter,
           o.xValue,
-          H({
+          E({
             v: o.xValue,
             r: e.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: o, category: l, categoryIndex: a }
-        )}</b></div>`, c += `<div>${e.value.style.chart.layout.grid.yAxis.name ? e.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${D(
+        )}</b></div>`, c += `<div>${e.value.style.chart.layout.grid.yAxis.name ? e.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${H(
           e.value.style.chart.layout.labels.plotLabels.y.formatter,
           o.yValue,
-          H({
+          E({
             v: o.yValue,
             r: e.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: o, category: l, categoryIndex: a }
-        )}</b></div>`, Te.value = `<div style="text-align:left;font-size:${e.value.style.chart.tooltip.fontSize}px">${c}</div>`;
+        )}</b></div>`, qe.value = `<div style="text-align:left;font-size:${e.value.style.chart.tooltip.fontSize}px">${c}</div>`;
       }
-      s === "keyboard" && Se(() => {
-        Gt(o.uid);
-      }), he.value = !0;
+      s === "keyboard" && _e(() => {
+        Kt(o.uid);
+      }), ye.value = !0;
     }
-    function Oe(l, o) {
+    function Be(l, o) {
       e.value.events.datapointLeave && e.value.events.datapointLeave({
         datapoint: l,
         seriesIndex: o
-      }), !(fe.value === l.uid && Ae.value === "keyboard") && (he.value = !1, G.value = null, ne.value = null);
+      }), !(pe.value === l.uid && ze.value === "keyboard") && (ye.value = !1, K.value = null, re.value = null);
     }
-    function we(l, o, a) {
+    function Le(l, o, a) {
       e.value.events.datapointClick && e.value.events.datapointClick({
         datapoint: o,
         seriesIndex: a
@@ -692,9 +695,9 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         quadrantSide: o.quadrantSide,
         sideName: e.value.style.chart.layout.labels.quadrantLabels[o.quadrantSide].text
       };
-      ce("selectPlot", s);
+      he("selectPlot", s);
     }
-    function re(l) {
+    function ie(l) {
       if (!l) return;
       const o = W.value.flatMap(
         (s) => s.series.filter((u) => u.quadrantSide === l).map((u) => ({
@@ -708,7 +711,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         sideName: e.value.style.chart.layout.labels.quadrantLabels[l].text,
         items: [...o]
       };
-      ce("selectSide", a);
+      he("selectSide", a);
     }
     const S = m(() => ({
       TL: {
@@ -816,7 +819,7 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         }
       }
     }));
-    function ct() {
+    function ht() {
       return W.value.map((l) => ({
         color: l.color,
         name: l.name,
@@ -830,40 +833,40 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         }))
       }));
     }
-    function Be(l = null) {
-      Se(() => {
+    function Ne(l = null) {
+      _e(() => {
         const o = [
           [e.value.style.chart.title.text],
           [e.value.style.chart.title.subtitle.text],
           [""]
-        ], a = xe.value.head, s = xe.value.body, u = o.concat([a]).concat(s), i = kl(u);
-        l ? l(i) : wl({
+        ], a = $e.value.head, s = $e.value.body, u = o.concat([a]).concat(s), i = wl(u);
+        l ? l(i) : Ll({
           csvContent: i,
           title: e.value.style.chart.title.text || "vue-ui-quadrant"
         });
       });
     }
-    const K = h(!1);
-    function ht(l) {
-      K.value = l, He.value += 1;
+    const j = h(!1);
+    function yt(l) {
+      j.value = l, Ee.value += 1;
     }
-    function yt() {
+    function bt() {
       k.value.showTable = !k.value.showTable;
     }
-    function bt() {
+    function ft() {
       k.value.plotLabels.show = !k.value.plotLabels.show;
     }
-    function ft() {
+    function pt() {
       k.value.showTooltip = !k.value.showTooltip;
     }
-    const ie = h(!1);
-    function Ne() {
-      ie.value = !ie.value;
+    const ve = h(!1);
+    function Fe() {
+      ve.value = !ve.value;
     }
-    async function Kt({ scale: l = 2 } = {}) {
-      if (!V.value) return;
-      const { width: o, height: a } = V.value.getBoundingClientRect(), s = o / a, { imageUri: u, base64: i } = await Ml({
-        domElement: V.value,
+    async function jt({ scale: l = 2 } = {}) {
+      if (!F.value) return;
+      const { width: o, height: a } = F.value.getBoundingClientRect(), s = o / a, { imageUri: u, base64: i } = await Ol({
+        domElement: F.value,
         base64: !0,
         img: !0,
         scale: l
@@ -877,18 +880,18 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         aspectRatio: s
       };
     }
-    const ve = m(() => {
+    const de = m(() => {
       const l = e.value.table.useDialog && !e.value.table.show, o = k.value.showTable;
       return {
-        component: l ? Mt : zt,
+        component: l ? Ot : Wt,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: l ? {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: K.value,
-          fullscreenParent: V.value,
+          isFullscreen: j.value,
+          fullscreenParent: F.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8),
           isCursorPointer: X.value
         } : {
@@ -908,27 +911,27 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         }
       };
     });
-    Fe(
+    Ve(
       () => k.value.showTable,
       (l) => {
-        e.value.table.show || (l && e.value.table.useDialog && oe.value ? oe.value.open() : "close" in oe.value && oe.value.close());
+        e.value.table.show || (l && e.value.table.useDialog && ue.value ? ue.value.open() : "close" in ue.value && ue.value.close());
       }
     );
-    function pt() {
-      k.value.showTable = !1, qe.value && qe.value.setTableIconState(!1);
+    function gt() {
+      k.value.showTable = !1, Ae.value && Ae.value.setTableIconState(!1);
     }
-    const jt = m(() => e.value.style.chart.backgroundColor), Jt = m(() => e.value.style.chart.legend), Zt = m(() => e.value.style.chart.title), { exportSvg: el, getSvg: tl } = Wl({
-      svg: E,
-      title: Zt,
-      legend: Jt,
-      legendItems: Q,
-      backgroundColor: jt
+    const Jt = m(() => e.value.style.chart.backgroundColor), Zt = m(() => e.value.style.chart.legend), el = m(() => e.value.style.chart.title), { exportSvg: tl, getSvg: ll } = Xl({
+      svg: U,
+      title: el,
+      legend: Zt,
+      legendItems: G,
+      backgroundColor: Jt
     });
-    async function gt({ isCb: l }) {
-      be.value = !0, await Se();
+    async function mt({ isCb: l }) {
+      fe.value = !0, await _e();
       try {
         if (l) {
-          const { blob: o, url: a, text: s, dataUrl: u } = await tl();
+          const { blob: o, url: a, text: s, dataUrl: u } = await ll();
           await Promise.resolve(
             e.value.userOptions.callbacks.svg({
               blob: o,
@@ -938,26 +941,26 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
             })
           );
         } else
-          await Promise.resolve(el());
+          await Promise.resolve(tl());
       } finally {
-        be.value = !1;
+        fe.value = !1;
       }
     }
-    function ll(l) {
+    function al(l) {
       if (l?.stage === "start") {
-        ye.value = !0;
+        be.value = !0;
         return;
       }
       if (l?.stage === "end") {
-        ye.value = !1;
+        be.value = !1;
         return;
       }
-      st();
+      nt();
     }
-    async function mt() {
-      if (ce("copyAlt", {
+    async function xt() {
+      if (he("copyAlt", {
         config: e.value,
-        dataset: Ye.value
+        dataset: Me.value
       }), !e.value.userOptions.callbacks.altCopy) {
         console.warn(
           "Vue Data UI - A callback must be set for `altCopy` in userOptions."
@@ -967,102 +970,102 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
       await Promise.resolve(
         e.value.userOptions.callbacks.altCopy({
           config: e.value,
-          dataset: Ye.value
+          dataset: Me.value
         })
       );
     }
-    function al() {
-      j.value = null, fe.value = null, pe.value = !0;
-    }
     function ol() {
-      Me(), pe.value = !1;
+      J.value = null, pe.value = null, ge.value = !0;
+    }
+    function ul() {
+      Oe(), ge.value = !1;
     }
-    function ul(l) {
-      if (!E.value || ie.value || document.activeElement !== E.value || !P.value.length) return;
+    function sl(l) {
+      if (!U.value || ve.value || document.activeElement !== U.value || !P.value.length) return;
       const o = l.key === "ArrowLeft" || l.key === "ArrowUp", a = l.key === "ArrowRight" || l.key === "ArrowDown", s = l.key === "Enter" || l.key === " ", u = l.key === "Escape";
       if (!o && !a && !s && !u)
         return;
       if (l.preventDefault(), l.stopPropagation(), u) {
-        Me();
+        Oe();
         return;
       }
       if (s) {
-        if (j.value === null) return;
-        const le = P.value[j.value];
-        if (!le) return;
-        we(le.category, le.plot, le.categoryIndex);
+        if (J.value === null) return;
+        const ae = P.value[J.value];
+        if (!ae) return;
+        Le(ae.category, ae.plot, ae.categoryIndex);
         return;
       }
-      let i = j.value;
-      const c = G.value ? P.value.findIndex(
-        (le) => le.plot.uid === G.value
-      ) : null, Y = i !== null && i >= 0 && i < P.value.length, Le = c !== null && c >= 0 && c < P.value.length;
-      Y ? (i += a ? 1 : -1, i < 0 && (i = P.value.length - 1), i >= P.value.length && (i = 0)) : Le ? (i = a ? c + 1 : c - 1, i >= P.value.length && (i = 0), i < 0 && (i = P.value.length - 1)) : a ? i = 0 : i = P.value.length - 1;
-      const Ce = P.value[i];
-      Ce && ke(
-        Ce.category,
-        Ce.plot,
-        Ce.categoryIndex,
+      let i = J.value;
+      const c = K.value ? P.value.findIndex(
+        (ae) => ae.plot.uid === K.value
+      ) : null, Y = i !== null && i >= 0 && i < P.value.length, Ce = c !== null && c >= 0 && c < P.value.length;
+      Y ? (i += a ? 1 : -1, i < 0 && (i = P.value.length - 1), i >= P.value.length && (i = 0)) : Ce ? (i = a ? c + 1 : c - 1, i >= P.value.length && (i = 0), i < 0 && (i = P.value.length - 1)) : a ? i = 0 : i = P.value.length - 1;
+      const Se = P.value[i];
+      Se && we(
+        Se.category,
+        Se.plot,
+        Se.categoryIndex,
         "keyboard",
         i
       );
     }
-    const Ve = m(() => {
-      const l = te.value?.colNames ?? [], o = te.value?.a11yBody ?? [];
+    const Ie = m(() => {
+      const l = le.value?.colNames ?? [], o = le.value?.a11yBody ?? [];
       return { headers: l, rows: o };
     }), P = m(() => W.value.flatMap((l, o) => l.series.map((a) => ({
       category: l,
       plot: a,
       categoryIndex: o
     }))));
-    return _t({
-      getData: ct,
-      getImage: Kt,
-      generatePdf: ut,
-      generateCsv: Be,
-      generateImage: st,
-      generateSvg: gt,
-      hideSeries: Ut,
-      showSeries: Et,
-      toggleTable: yt,
-      toggleLabels: bt,
-      toggleTooltip: ft,
-      toggleAnnotator: Ne,
-      toggleFullscreen: ht,
-      copyAlt: mt
+    return Tt({
+      getData: ht,
+      getImage: jt,
+      generatePdf: st,
+      generateCsv: Ne,
+      generateImage: nt,
+      generateSvg: mt,
+      hideSeries: Qt,
+      showSeries: Ut,
+      toggleTable: bt,
+      toggleLabels: ft,
+      toggleTooltip: pt,
+      toggleAnnotator: Fe,
+      toggleFullscreen: yt,
+      copyAlt: xt
     }), (l, o) => (n(), r("div", {
-      class: O(`vue-data-ui-component vue-ui-quadrant ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      class: O(`vue-data-ui-component vue-ui-quadrant ${j.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "quadrantChart",
-      ref: V,
+      ref: F,
       id: `vue-ui-quadrant_${$.value}`,
       style: _(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
-      onMouseenter: o[14] || (o[14] = () => v(lt)(!0)),
+      onMouseenter: o[14] || (o[14] = () => v(at)(!0)),
       onMouseleave: o[15] || (o[15] = () => {
-        v(lt)(!1), pe.value || Me();
+        v(at)(!1), ge.value || Oe();
       })
     }, [
-      d("div", {
+      y("div", {
         id: `chart-instructions-${$.value}`,
         class: "sr-only"
       }, [
-        d("p", null, w(e.value.a11y.translations.keyboardNavigation), 1)
-      ], 8, Dl),
-      Ve.value?.rows?.length ? (n(), B(Vl, {
+        y("p", null, w(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Hl),
+      Ie.value?.rows?.length ? (n(), B(Il, {
         key: 0,
         uid: $.value,
-        head: Ve.value.headers,
-        body: Ve.value.rows,
+        head: Ie.value.headers,
+        body: Ie.value.rows,
         notice: e.value.a11y.translations.tableAvailable,
         caption: e.value.a11y.translations.tableCaption
-      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : y("", !0),
-      e.value.userOptions.buttons.annotator ? (n(), B(v(Xt), {
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : d("", !0),
+      e.value.userOptions.buttons.annotator ? (n(), B(v(Pt), {
         key: 1,
-        svgRef: v(E),
+        svgRef: v(U),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: ie.value,
+        active: ve.value,
         isCursorPointer: X.value,
-        onClose: Ne
+        onClose: Fe
       }, {
         "annotator-action-close": p(() => [
           g(l.$slots, "annotator-action-close", {}, void 0, !0)
@@ -1083,22 +1086,22 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
           g(l.$slots, "annotator-action-delete", T(q({ disabled: a })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : y("", !0),
-      Ft.value ? (n(), r("div", {
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : d("", !0),
+      Vt.value ? (n(), r("div", {
         key: 2,
         ref_key: "noTitle",
-        ref: Ge,
+        ref: Ke,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : y("", !0),
+      }, null, 512)) : d("", !0),
       e.value.style.chart.title.text ? (n(), r("div", {
         key: 3,
         ref_key: "chartTitle",
-        ref: Ee,
+        ref: Ue,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (n(), B(Ol, {
-          key: `table_${Ke.value}`,
+        (n(), B(Bl, {
+          key: `table_${je.value}`,
           config: {
             title: {
               cy: "quadrant-title",
@@ -1110,18 +1113,18 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : y("", !0),
-      d("div", {
+      ], 512)) : d("", !0),
+      y("div", {
         id: `legend-top-${$.value}`
-      }, null, 8, Hl),
-      e.value.userOptions.show && De.value && (v(at) || v(ze)) ? (n(), B(v(Pt), {
+      }, null, 8, El),
+      e.value.userOptions.show && He.value && (v(ot) || v(We)) ? (n(), B(v(Yt), {
         ref_key: "userOptionsRef",
-        ref: qe,
-        key: `user_options_${He.value}`,
+        ref: Ae,
+        key: `user_options_${Ee.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: v(Pe),
-        isPrinting: v(Xe),
+        isImaging: v(Ye),
+        isPrinting: v(Pe),
         uid: $.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -1132,31 +1135,31 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         hasAltCopy: e.value.userOptions.buttons.altCopy,
-        isFullscreen: K.value,
+        isFullscreen: j.value,
         isTooltip: k.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: V.value,
+        chartElement: F.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: ie.value,
+        isAnnotation: ve.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         isCursorPointer: X.value,
-        onToggleFullscreen: ht,
-        onGeneratePdf: v(ut),
-        onGenerateCsv: Be,
-        onGenerateImage: ll,
-        onGenerateSvg: gt,
-        onToggleTable: yt,
-        onToggleLabels: bt,
-        onToggleTooltip: ft,
-        onToggleAnnotator: Ne,
-        onCopyAlt: mt,
+        onToggleFullscreen: yt,
+        onGeneratePdf: v(st),
+        onGenerateCsv: Ne,
+        onGenerateImage: al,
+        onGenerateSvg: mt,
+        onToggleTable: bt,
+        onToggleLabels: ft,
+        onToggleTooltip: pt,
+        onToggleAnnotator: Fe,
+        onCopyAlt: xt,
         style: _({
-          visibility: v(at) ? v(ze) ? "visible" : "hidden" : "visible"
+          visibility: v(ot) ? v(We) ? "visible" : "hidden" : "visible"
         })
-      }, $t({ _: 2 }, [
+      }, kt({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
           fn: p(({ isOpen: a, color: s }) => [
@@ -1234,26 +1237,26 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
           ]),
           key: "10"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : y("", !0),
-      d("div", El, [
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : d("", !0),
+      y("div", Ul, [
         (n(), r("svg", {
           ref_key: "svgRef",
-          ref: E,
-          xmlns: v(pl),
+          ref: U,
+          xmlns: v(gl),
           "aria-describedby": `chart-instructions-${$.value}`,
           class: O({
-            "vue-data-ui-fullscreen--on": K.value,
-            "vue-data-ui-fulscreen--off": !K.value
+            "vue-data-ui-fullscreen--on": j.value,
+            "vue-data-ui-fulscreen--off": !j.value
           }),
           viewBox: `${b.value.startX} ${b.value.startY} ${b.value.width} ${b.value.height}`,
           style: _(`max-width:100%;overflow:hidden;background:transparent;color:${e.value.style.chart.color}`),
           id: `svg_${$.value}`,
           tabindex: "0",
-          onFocus: al,
-          onBlur: ol,
-          onKeydown: ul
+          onFocus: ol,
+          onBlur: ul,
+          onKeydown: sl
         }, [
-          de(v(Yt)),
+          ce(v(Mt)),
           l.$slots["chart-background"] ? (n(), r("foreignObject", {
             key: 0,
             x: b.value.startX,
@@ -1265,8 +1268,8 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
             }
           }, [
             g(l.$slots, "chart-background", {}, void 0, !0)
-          ], 8, Ql)) : y("", !0),
-          d("defs", null, [
+          ], 8, Gl)) : d("", !0),
+          y("defs", null, [
             (n(!0), r(A, null, N(W.value, (a, s) => (n(), r("radialGradient", {
               cx: "50%",
               cy: "50%",
@@ -1275,25 +1278,25 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               fy: "50%",
               id: `quadrant_gradient_${$.value}_${s}`
             }, [
-              d("stop", {
+              y("stop", {
                 offset: "0%",
-                "stop-color": v(_e)(
-                  v(gl)(a.color, 0.05),
+                "stop-color": v(Te)(
+                  v(ml)(a.color, 0.05),
                   e.value.style.chart.layout.areas.opacity
                 )
-              }, null, 8, Kl),
-              d("stop", {
+              }, null, 8, jl),
+              y("stop", {
                 offset: "100%",
-                "stop-color": v(_e)(
+                "stop-color": v(Te)(
                   a.color,
                   e.value.style.chart.layout.areas.opacity
                 )
-              }, null, 8, jl)
-            ], 8, Gl))), 256))
+              }, null, 8, Jl)
+            ], 8, Kl))), 256))
           ]),
-          e.value.style.chart.layout.grid.graduations.show ? (n(), r("g", Jl, [
-            (n(!0), r(A, null, N(Rt.value, (a) => (n(), r("rect", {
-              fill: e.value.style.chart.layout.grid.graduations.fill ? v(_e)(
+          e.value.style.chart.layout.grid.graduations.show ? (n(), r("g", Zl, [
+            (n(!0), r(A, null, N(Dt.value, (a) => (n(), r("rect", {
+              fill: e.value.style.chart.layout.grid.graduations.fill ? v(Te)(
                 e.value.style.chart.layout.grid.graduations.color,
                 a.opacity
               ) : "none",
@@ -1304,47 +1307,47 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               "stroke-width": e.value.style.chart.layout.grid.graduations.strokeWidth,
               stroke: e.value.style.chart.layout.grid.graduations.stroke,
               rx: e.value.style.chart.layout.grid.graduations.roundingForce
-            }, null, 8, Zl))), 256))
-          ])) : y("", !0),
-          d("line", {
+            }, null, 8, ea))), 256))
+          ])) : d("", !0),
+          y("line", {
             x1: t.value.left,
             y1: t.value.centerY,
             x2: t.value.right,
             y2: t.value.centerY,
             stroke: e.value.style.chart.layout.grid.stroke,
             "stroke-width": e.value.style.chart.layout.grid.strokeWidth
-          }, null, 8, ea),
-          d("line", {
+          }, null, 8, ta),
+          y("line", {
             x1: t.value.centerX,
             y1: t.value.top,
             x2: t.value.centerX,
             y2: t.value.bottom,
             stroke: e.value.style.chart.layout.grid.stroke,
             "stroke-width": e.value.style.chart.layout.grid.strokeWidth
-          }, null, 8, ta),
-          e.value.style.chart.layout.grid.showArrows ? (n(), r("g", la, [
-            d("polygon", {
+          }, null, 8, la),
+          e.value.style.chart.layout.grid.showArrows ? (n(), r("g", aa, [
+            y("polygon", {
               points: `${t.value.right - 8},${t.value.centerY - 6} ${t.value.right},${t.value.centerY} ${t.value.right - 8},${t.value.centerY + 6}`,
               fill: e.value.style.chart.layout.grid.stroke,
               stroke: "none"
-            }, null, 8, aa),
-            d("polygon", {
+            }, null, 8, oa),
+            y("polygon", {
               points: `${t.value.left + 8},${t.value.centerY - 6} ${t.value.left},${t.value.centerY} ${t.value.left + 8},${t.value.centerY + 6}`,
               fill: e.value.style.chart.layout.grid.stroke,
               stroke: "none"
-            }, null, 8, oa),
-            d("polygon", {
+            }, null, 8, ua),
+            y("polygon", {
               points: `${t.value.centerX - 6},${t.value.top + 8} ${t.value.centerX},${t.value.top} ${t.value.centerX + 6},${t.value.top + 8}`,
               fill: e.value.style.chart.layout.grid.stroke,
               stroke: "none"
-            }, null, 8, ua),
-            d("polygon", {
+            }, null, 8, sa),
+            y("polygon", {
               points: `${t.value.centerX - 6},${t.value.bottom - 8} ${t.value.centerX},${t.value.bottom} ${t.value.centerX + 6},${t.value.bottom - 8}`,
               fill: e.value.style.chart.layout.grid.stroke,
               stroke: "none"
-            }, null, 8, sa)
-          ])) : y("", !0),
-          e.value.style.chart.layout.labels.quadrantLabels.show && !x.value ? (n(), r("g", na, [
+            }, null, 8, na)
+          ])) : d("", !0),
+          e.value.style.chart.layout.labels.quadrantLabels.show && !x.value ? (n(), r("g", ra, [
             e.value.style.chart.layout.labels.quadrantLabels.tl.text ? (n(), r("text", {
               key: 0,
               x: 0,
@@ -1353,8 +1356,8 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               fill: e.value.style.chart.layout.labels.quadrantLabels.tl.color,
               "font-size": e.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
               style: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
-              onClick: o[0] || (o[0] = (a) => re("tl"))
-            }, w(e.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, ra)) : y("", !0),
+              onClick: o[0] || (o[0] = (a) => ie("tl"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, ia)) : d("", !0),
             e.value.style.chart.layout.labels.quadrantLabels.tr.text ? (n(), r("text", {
               key: 1,
               x: t.value.width,
@@ -1363,8 +1366,8 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               fill: e.value.style.chart.layout.labels.quadrantLabels.tr.color,
               "font-size": e.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
               style: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
-              onClick: o[1] || (o[1] = (a) => re("tr"))
-            }, w(e.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, ia)) : y("", !0),
+              onClick: o[1] || (o[1] = (a) => ie("tr"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, va)) : d("", !0),
             e.value.style.chart.layout.labels.quadrantLabels.br.text ? (n(), r("text", {
               key: 2,
               x: t.value.width,
@@ -1373,8 +1376,8 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               fill: e.value.style.chart.layout.labels.quadrantLabels.br.color,
               "font-size": e.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
               style: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
-              onClick: o[2] || (o[2] = (a) => re("br"))
-            }, w(e.value.style.chart.layout.labels.quadrantLabels.br.text), 13, va)) : y("", !0),
+              onClick: o[2] || (o[2] = (a) => ie("br"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.br.text), 13, da)) : d("", !0),
             e.value.style.chart.layout.labels.quadrantLabels.bl.text ? (n(), r("text", {
               key: 3,
               x: 0,
@@ -1383,146 +1386,150 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
               fill: e.value.style.chart.layout.labels.quadrantLabels.bl.color,
               "font-size": e.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
               style: _(`font-weight:${e.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
-              onClick: o[3] || (o[3] = (a) => re("bl"))
-            }, w(e.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, da)) : y("", !0)
-          ])) : y("", !0),
-          e.value.style.chart.layout.labels.axisLabels.show ? (n(), r("g", ca, [
-            d("text", {
+              onClick: o[3] || (o[3] = (a) => ie("bl"))
+            }, w(e.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, ca)) : d("", !0)
+          ])) : d("", !0),
+          e.value.style.chart.layout.labels.axisLabels.show ? (n(), r("g", ha, [
+            e.value.style.chart.layout.grid.yAxis.show ? (n(), r("text", {
+              key: 0,
               x: t.value.centerX,
               y: t.value.top - t.value.padding / 6,
               "text-anchor": "middle",
               "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
               fill: e.value.style.chart.layout.labels.axisLabels.color.positive
-            }, w(v(D)(
+            }, w(v(H)(
               e.value.style.chart.layout.labels.plotLabels.y.formatter,
               z.value.y.max,
-              v(H)({
+              v(E)({
                 v: z.value.y.max,
                 r: e.value.style.chart.layout.labels.plotLabels.rounding
               })
-            )), 9, ha),
-            d("text", {
+            )), 9, ya)) : d("", !0),
+            y("text", {
               x: t.value.centerX,
               y: t.value.top - t.value.padding / 2,
               "text-anchor": "middle",
               "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
               fill: e.value.style.chart.layout.labels.axisLabels.color.positive
-            }, w(e.value.style.chart.layout.grid.yAxis.name), 9, ya),
-            d("text", {
+            }, w(e.value.style.chart.layout.grid.yAxis.name), 9, ba),
+            e.value.style.chart.layout.grid.yAxis.show ? (n(), r("text", {
+              key: 1,
               x: t.value.centerX,
               y: t.value.bottom + t.value.padding * 0.35,
               "text-anchor": "middle",
               "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
               fill: e.value.style.chart.layout.labels.axisLabels.color.negative
-            }, w(v(D)(
+            }, w(v(H)(
               e.value.style.chart.layout.labels.plotLabels.y.formatter,
               z.value.y.min,
-              v(H)({
+              v(E)({
                 v: z.value.y.min,
                 r: e.value.style.chart.layout.labels.plotLabels.rounding
               })
-            )), 9, ba),
-            d("text", {
+            )), 9, fa)) : d("", !0),
+            e.value.style.chart.layout.grid.xAxis.show ? (n(), r("text", {
+              key: 2,
               id: `xLabelMin_${$.value}`,
               "text-anchor": "middle",
               "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
               transform: `translate(${t.value.padding - e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(-90)`,
               fill: e.value.style.chart.layout.labels.axisLabels.color.negative
-            }, w(v(D)(
+            }, w(v(H)(
               e.value.style.chart.layout.labels.plotLabels.x.formatter,
               z.value.x.min,
-              v(H)({
+              v(E)({
                 v: z.value.x.min,
                 r: e.value.style.chart.layout.labels.plotLabels.rounding
               })
-            )), 9, fa),
-            d("text", {
+            )), 9, pa)) : d("", !0),
+            e.value.style.chart.layout.grid.xAxis.show ? (n(), r("text", {
+              key: 3,
               id: `xLabelMax_${$.value}`,
               "text-anchor": "middle",
               "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
               transform: `translate(${t.value.width - t.value.padding + e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(90)`,
               fill: e.value.style.chart.layout.labels.axisLabels.color.positive
-            }, w(v(D)(
+            }, w(v(H)(
               e.value.style.chart.layout.labels.plotLabels.x.formatter,
               z.value.x.max,
-              v(H)({
+              v(E)({
                 v: z.value.x.max,
                 r: e.value.style.chart.layout.labels.plotLabels.rounding
               })
-            )), 9, pa),
-            d("text", {
+            )), 9, ga)) : d("", !0),
+            y("text", {
               id: `xLabelMaxName_${$.value}`,
               "text-anchor": "middle",
               "font-size": e.value.style.chart.layout.labels.axisLabels.fontSize,
               transform: `translate(${t.value.width - e.value.style.chart.layout.labels.axisLabels.fontSize}, ${t.value.height / 2}), rotate(90)`,
               fill: e.value.style.chart.layout.labels.axisLabels.color.positive
-            }, w(e.value.style.chart.layout.grid.xAxis.name), 9, ga)
-          ])) : y("", !0),
-          e.value.style.chart.layout.areas.show ? (n(), r("g", ma, [
+            }, w(e.value.style.chart.layout.grid.xAxis.name), 9, ma)
+          ])) : d("", !0),
+          e.value.style.chart.layout.areas.show ? (n(), r("g", xa, [
             (n(!0), r(A, null, N(W.value, (a, s) => (n(), r("g", null, [
               a.series.length > 2 ? (n(), r("polygon", {
                 key: 0,
                 "data-cy-quadrant-area": "",
-                fill: e.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${$.value}_${s})` : v(_e)(
+                fill: e.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${$.value}_${s})` : v(Te)(
                   a.color,
                   e.value.style.chart.layout.areas.opacity
                 ),
-                points: v(ml)(a)
-              }, null, 8, xa)) : y("", !0)
+                points: v(xl)(a)
+              }, null, 8, $a)) : d("", !0)
             ]))), 256))
-          ])) : y("", !0),
-          d("g", null, [
-            d("rect", {
-              onClick: o[4] || (o[4] = (a) => I("TL")),
+          ])) : d("", !0),
+          y("g", null, [
+            y("rect", {
+              onClick: o[4] || (o[4] = (a) => R("TL")),
               x: t.value.left,
               y: t.value.top,
               width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
               height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
               fill: "transparent",
               class: O({
-                "vue-data-ui-zoom-plus": !x.value,
-                "vue-data-ui-zoom-minus": x.value
+                "vue-data-ui-zoom-plus": !x.value && I.value,
+                "vue-data-ui-zoom-minus": x.value && I.value
               })
-            }, null, 10, $a),
-            d("rect", {
-              onClick: o[5] || (o[5] = (a) => I("TR")),
+            }, null, 10, ka),
+            y("rect", {
+              onClick: o[5] || (o[5] = (a) => R("TR")),
               x: t.value.centerX,
               y: t.value.top,
               width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
               height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
               fill: "transparent",
               class: O({
-                "vue-data-ui-zoom-plus": !x.value,
-                "vue-data-ui-zoom-minus": x.value
+                "vue-data-ui-zoom-plus": !x.value && I.value,
+                "vue-data-ui-zoom-minus": x.value && I.value
               })
-            }, null, 10, ka),
-            d("rect", {
-              onClick: o[6] || (o[6] = (a) => I("BR")),
+            }, null, 10, wa),
+            y("rect", {
+              onClick: o[6] || (o[6] = (a) => R("BR")),
               x: t.value.centerX,
               y: t.value.centerY,
               width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
               height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
               fill: "transparent",
               class: O({
-                "vue-data-ui-zoom-plus": !x.value,
-                "vue-data-ui-zoom-minus": x.value
+                "vue-data-ui-zoom-plus": !x.value && I.value,
+                "vue-data-ui-zoom-minus": x.value && I.value
               })
-            }, null, 10, wa),
-            d("rect", {
-              onClick: o[7] || (o[7] = (a) => I("BL")),
+            }, null, 10, La),
+            y("rect", {
+              onClick: o[7] || (o[7] = (a) => R("BL")),
               x: t.value.left,
               y: t.value.centerY,
               width: t.value.usableWidth / 2 <= 0 ? 1e-3 : t.value.usableWidth / 2,
               height: t.value.usableHeight / 2 <= 0 ? 1e-3 : t.value.usableHeight / 2,
               fill: "transparent",
               class: O({
-                "vue-data-ui-zoom-plus": !x.value,
-                "vue-data-ui-zoom-minus": x.value
+                "vue-data-ui-zoom-plus": !x.value && I.value,
+                "vue-data-ui-zoom-minus": x.value && I.value
               })
-            }, null, 10, La)
+            }, null, 10, Ca)
           ]),
           e.value.style.chart.layout.labels.plotLabels.showAsTag ? (n(), r(A, { key: 7 }, [
-            k.value.plotLabels.show ? (n(), r("g", za, [
+            k.value.plotLabels.show ? (n(), r("g", Wa, [
               (n(!0), r(A, null, N(W.value, (a, s) => (n(), r(A, null, [
                 (n(!0), r(A, null, N(a.series, (u) => (n(), r("foreignObject", {
                   style: { overflow: "visible" },
@@ -1530,19 +1537,19 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
                   width: "100",
                   x: u.x - 50,
                   y: u.y - e.value.style.chart.layout.labels.plotLabels.fontSize,
-                  onMouseover: (i) => ke(a, u, s),
-                  onMouseleave: (i) => Oe(u, s),
-                  onClick: (i) => we(a, u, s)
+                  onMouseover: (i) => we(a, u, s),
+                  onMouseleave: (i) => Be(u, s),
+                  onClick: (i) => Le(a, u, s)
                 }, [
-                  d("div", {
-                    style: _(`color:${v($l)(a.color)};margin: 0 auto; font-size:${e.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: fit-content;`)
+                  y("div", {
+                    style: _(`color:${v(kl)(a.color)};margin: 0 auto; font-size:${e.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: fit-content;`)
                   }, w(u.name), 5)
-                ], 40, Wa))), 256))
+                ], 40, Xa))), 256))
               ], 64))), 256))
-            ])) : y("", !0)
+            ])) : d("", !0)
           ], 64)) : (n(), r(A, { key: 6 }, [
             (n(!0), r(A, null, N(W.value, (a, s) => (n(), r("g", null, [
-              l.$slots.datapoint && !v(ge) ? (n(!0), r(A, { key: 0 }, N(a.series, (u) => (n(), r("g", {
+              l.$slots.datapoint && !v(me) ? (n(!0), r(A, { key: 0 }, N(a.series, (u) => (n(), r("g", {
                 key: u.uid
               }, [
                 (n(), r("foreignObject", {
@@ -1551,13 +1558,13 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
                   width: "2",
                   height: "2",
                   style: { overflow: "visible", "pointer-events": "none" },
-                  onMouseenter: (i) => ke(a, u, s),
-                  onMouseleave: (i) => Oe(u, s),
-                  onClick: (i) => we(a, u, s)
+                  onMouseenter: (i) => we(a, u, s),
+                  onMouseleave: (i) => Be(u, s),
+                  onClick: (i) => Le(a, u, s)
                 }, [
-                  g(l.$slots, "datapoint", kt({ ref_for: !0 }, { datapoint: u }), void 0, !0)
-                ], 40, Ca)),
-                d("circle", {
+                  g(l.$slots, "datapoint", wt({ ref_for: !0 }, { datapoint: u }), void 0, !0)
+                ], 40, Sa)),
+                y("circle", {
                   "data-a11y-plot-id": u.uid,
                   cx: u.x,
                   cy: u.y,
@@ -1566,25 +1573,24 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
                     10
                   ),
                   fill: "transparent",
-                  "aria-label": `${a.name} ${u.name}: ${e.value.style.chart.layout.grid.xAxis.name || "x"} ${u.xValue}, ${e.value.style.chart.layout.grid.yAxis.name || "y"} ${u.yValue}`,
                   style: { "pointer-events": "none" }
-                }, null, 8, Sa)
+                }, null, 8, _a)
               ]))), 128)) : (n(!0), r(A, { key: 1 }, N(a.series, (u, i) => (n(), r("g", {
                 key: u.uid
               }, [
-                de(Ct, {
+                ce(St, {
                   color: a.color,
-                  isSelected: G.value && u.uid === G.value,
+                  isSelected: K.value && u.uid === K.value,
                   plot: u,
                   radius: e.value.style.chart.layout.plots.radius / (x.value ? 1.5 : 1),
                   shape: a.shape,
                   stroke: e.value.style.chart.layout.plots.outline ? e.value.style.chart.layout.plots.outlineColor : "none",
                   strokeWidth: e.value.style.chart.layout.plots.outlineWidth,
-                  onMouseenter: (c) => ke(a, u, s, "pointer"),
-                  onMouseleave: (c) => Oe(u, s),
-                  onClick: (c) => we(a, u, s)
+                  onMouseenter: (c) => we(a, u, s, "pointer"),
+                  onMouseleave: (c) => Be(u, s),
+                  onClick: (c) => Le(a, u, s)
                 }, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseenter", "onMouseleave", "onClick"]),
-                d("circle", {
+                y("circle", {
                   "data-dom-to-png-ignore": "",
                   "data-a11y-plot-id": u.uid,
                   cx: u.x,
@@ -1594,12 +1600,11 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
                     10
                   ),
                   fill: "transparent",
-                  "aria-label": `${a.name} ${u.name}: ${e.value.style.chart.layout.grid.xAxis.name || "x"} ${u.xValue}, ${e.value.style.chart.layout.grid.yAxis.name || "y"} ${u.yValue}`,
                   style: { "pointer-events": "none" }
-                }, null, 8, _a)
+                }, null, 8, Ta)
               ]))), 128))
             ]))), 256)),
-            k.value.plotLabels.show ? (n(), r("g", Ta, [
+            k.value.plotLabels.show ? (n(), r("g", qa, [
               (n(!0), r(A, null, N(W.value, (a) => (n(), r("g", null, [
                 (n(!0), r(A, null, N(a.series, (s) => (n(), r("g", null, [
                   String(s.name).includes(`
@@ -1610,201 +1615,201 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
                     "text-anchor": "middle",
                     "font-size": e.value.style.chart.layout.labels.plotLabels.fontSize / (x.value ? 1.5 : 1),
                     fill: e.value.style.chart.layout.labels.plotLabels.color,
-                    innerHTML: v(xl)({
+                    innerHTML: v($l)({
                       content: String(s.name),
                       fontSize: e.value.style.chart.layout.labels.plotLabels.fontSize / (x.value ? 1.5 : 1),
                       fill: e.value.style.chart.layout.labels.plotLabels.color,
                       x: s.x,
                       y: s.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius
                     })
-                  }, null, 8, Aa)) : (n(), r("text", {
+                  }, null, 8, za)) : (n(), r("text", {
                     key: 0,
                     x: s.x,
                     y: s.y + e.value.style.chart.layout.labels.plotLabels.offsetY + e.value.style.chart.layout.plots.radius,
                     "text-anchor": "middle",
                     "font-size": e.value.style.chart.layout.labels.plotLabels.fontSize / (x.value ? 1.5 : 1),
                     fill: e.value.style.chart.layout.labels.plotLabels.color
-                  }, w(s.name), 9, qa))
+                  }, w(s.name), 9, Aa))
                 ]))), 256))
               ]))), 256))
-            ])) : y("", !0)
+            ])) : d("", !0)
           ], 64)),
-          x.value ? (n(), r("g", Xa, [
+          x.value ? (n(), r("g", Pa, [
             f.value === "TL" ? (n(), r("polygon", {
               key: 0,
               points: `${t.value.left - 1},${t.value.centerY} ${t.value.centerX},${t.value.centerY} ${t.value.centerX},${t.value.top - 1} ${t.value.right},${t.value.top - 1} ${t.value.right},${t.value.bottom} ${t.value.left - 1},${t.value.bottom} ${t.value.left - 1},${t.value.centerY}`,
               fill: e.value.style.chart.backgroundColor,
               style: { opacity: "1" }
-            }, null, 8, Pa)) : y("", !0),
+            }, null, 8, Ya)) : d("", !0),
             f.value === "TR" ? (n(), r("polygon", {
               key: 1,
               points: `${t.value.left},${t.value.top - 1} ${t.value.centerX},${t.value.top - 1} ${t.value.centerX},${t.value.centerY} ${t.value.right + 1},${t.value.centerY} ${t.value.right + 1},${t.value.bottom} ${t.value.left},${t.value.bottom} ${t.value.left},${t.value.top - 1}`,
               fill: e.value.style.chart.backgroundColor,
               style: { opacity: "1" }
-            }, null, 8, Ya)) : y("", !0),
+            }, null, 8, Ma)) : d("", !0),
             f.value === "BR" ? (n(), r("polygon", {
               key: 2,
               points: `${t.value.left},${t.value.top} ${t.value.right + 1},${t.value.top} ${t.value.right + 1},${t.value.centerY} ${t.value.centerX},${t.value.centerY} ${t.value.centerX},${t.value.bottom + 1} ${t.value.left},${t.value.bottom + 1} ${t.value.left},${t.value.top}`,
               fill: e.value.style.chart.backgroundColor,
               style: { opacity: "1" }
-            }, null, 8, Ma)) : y("", !0),
+            }, null, 8, Oa)) : d("", !0),
             f.value === "BL" ? (n(), r("polygon", {
               key: 3,
               points: `${t.value.left - 1},${t.value.top} ${t.value.right},${t.value.top} ${t.value.right},${t.value.bottom + 1} ${t.value.centerX},${t.value.bottom + 1} ${t.value.centerX},${t.value.centerY} ${t.value.left - 1},${t.value.centerY} ${t.value.left - 1},${t.value.top}`,
               fill: e.value.style.chart.backgroundColor,
               style: { opacity: "1" }
-            }, null, 8, Oa)) : y("", !0)
-          ])) : y("", !0),
-          f.value && !me.value ? (n(), r("g", Ba, [
-            d("text", {
-              x: U.value.x,
-              y: U.value.y - U.value.fontSize / 1.5,
-              "font-size": U.value.fontSize / 1.5,
-              fill: U.value.fill,
+            }, null, 8, Ba)) : d("", !0)
+          ])) : d("", !0),
+          f.value && !xe.value ? (n(), r("g", Na, [
+            y("text", {
+              x: Q.value.x,
+              y: Q.value.y - Q.value.fontSize / 1.5,
+              "font-size": Q.value.fontSize / 1.5,
+              fill: Q.value.fill,
               "text-anchor": "middle",
-              "font-weight": U.value.bold ? "bold" : "normal"
-            }, w(U.value.text), 9, Na)
-          ])) : y("", !0),
-          x.value && f.value ? (n(), r("g", Va, [
-            d("rect", {
+              "font-weight": Q.value.bold ? "bold" : "normal"
+            }, w(Q.value.text), 9, Fa)
+          ])) : d("", !0),
+          x.value && f.value ? (n(), r("g", Ia, [
+            y("rect", {
               x: S.value[f.value].tl.x,
               y: S.value[f.value].tl.y,
               height: "20",
               width: "20",
               fill: S.value[f.value].tl.fill,
               style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "TL" ? 1 : 0.2}`),
-              onClick: o[8] || (o[8] = (a) => I("TL")),
+              onClick: o[8] || (o[8] = (a) => R("TL")),
               class: O({
                 "vue-ui-quadrant-mini-map-cell": !0,
                 "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "TL"
               })
-            }, null, 14, Fa),
-            d("rect", {
+            }, null, 14, Va),
+            y("rect", {
               x: S.value[f.value].tr.x,
               y: S.value[f.value].tr.y,
               height: "20",
               width: "20",
               fill: S.value[f.value].tr.fill,
               style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "TR" ? 1 : 0.2}`),
-              onClick: o[9] || (o[9] = (a) => I("TR")),
+              onClick: o[9] || (o[9] = (a) => R("TR")),
               class: O({
                 "vue-ui-quadrant-mini-map-cell": !0,
                 "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "TR"
               })
-            }, null, 14, Ia),
-            d("rect", {
+            }, null, 14, Ra),
+            y("rect", {
               x: S.value[f.value].br.x,
               y: S.value[f.value].br.y,
               height: "20",
               width: "20",
               fill: S.value[f.value].br.fill,
               style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "BR" ? 1 : 0.2}`),
-              onClick: o[10] || (o[10] = (a) => I("BR")),
+              onClick: o[10] || (o[10] = (a) => R("BR")),
               class: O({
                 "vue-ui-quadrant-mini-map-cell": !0,
                 "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "BR"
               })
-            }, null, 14, Ra),
-            d("rect", {
+            }, null, 14, Da),
+            y("rect", {
               x: S.value[f.value].bl.x,
               y: S.value[f.value].bl.y,
               height: "20",
               width: "20",
               fill: S.value[f.value].bl.fill,
               style: _(`cursor: ${X.value ? "pointer" : "default"}; opacity: ${f.value === "BL" ? 1 : 0.2}`),
-              onClick: o[11] || (o[11] = (a) => I("BL")),
+              onClick: o[11] || (o[11] = (a) => R("BL")),
               class: O({
                 "vue-ui-quadrant-mini-map-cell": !0,
                 "vue-ui-quadrant-mini-map-cell-selectable": f.value !== "BL"
               })
-            }, null, 14, Da),
-            d("path", {
+            }, null, 14, Ha),
+            y("path", {
               class: "vue-ui-quadrant-minimap-crosshairs",
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": 1,
               d: S.value[f.value].crosshairs.horizontal
-            }, null, 8, Ha),
-            d("path", {
+            }, null, 8, Ea),
+            y("path", {
               class: "vue-ui-quadrant-minimap-crosshairs",
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": 1,
               d: S.value[f.value].crosshairs.vertical
-            }, null, 8, Ea)
-          ])) : y("", !0),
+            }, null, 8, Ua)
+          ])) : d("", !0),
           g(l.$slots, "svg", {
             svg: {
               ...t.value,
-              isPrintingImg: v(Xe) | v(Pe) | ye.value,
-              isPrintingSvg: be.value
+              isPrintingImg: v(Pe) | v(Ye) | be.value,
+              isPrintingSvg: fe.value
             }
           }, void 0, !0)
-        ], 46, Ul)),
-        l.$slots.hint ? (n(), r("div", Ua, [
+        ], 46, Ql)),
+        l.$slots.hint ? (n(), r("div", Qa, [
           g(l.$slots, "hint", T(q({
             hint: e.value.a11y.translations.keyboardNavigation,
-            isVisible: pe.value
+            isVisible: ge.value
           })), void 0, !0)
-        ])) : y("", !0)
+        ])) : d("", !0)
       ]),
-      l.$slots.watermark ? (n(), r("div", Qa, [
+      l.$slots.watermark ? (n(), r("div", Ga, [
         g(l.$slots, "watermark", T(q({
-          isPrinting: v(Xe) || v(Pe) || ye.value || be.value
+          isPrinting: v(Pe) || v(Ye) || be.value || fe.value
         })), void 0, !0)
-      ])) : y("", !0),
-      d("div", {
+      ])) : d("", !0),
+      y("div", {
         id: `legend-bottom-${$.value}`
-      }, null, 8, Ga),
-      Ze.value ? (n(), B(il, {
+      }, null, 8, Ka),
+      et.value && e.value.style.chart.legend.show ? (n(), B(vl, {
         key: 6,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${$.value}` : `#legend-bottom-${$.value}`
       }, [
-        d("div", {
+        y("div", {
           ref_key: "chartLegend",
-          ref: Ue
+          ref: Qe
         }, [
-          e.value.style.chart.legend.show ? (n(), B(Nl, {
-            key: `legend_${Je.value}`,
-            legendSet: Q.value,
-            config: Qt.value,
+          e.value.style.chart.legend.show ? (n(), B(Fl, {
+            key: `legend_${Ze.value}`,
+            legendSet: G.value,
+            config: Gt.value,
             isCursorPointer: X.value,
-            onClickMarker: o[12] || (o[12] = ({ legend: a }) => se(a.id))
+            onClickMarker: o[12] || (o[12] = ({ legend: a }) => ne(a.id))
           }, {
             item: p(({ legend: a }) => [
-              v(ge) ? y("", !0) : (n(), r("div", {
+              v(me) ? d("", !0) : (n(), r("div", {
                 key: 0,
-                onClick: (s) => se(a.id),
+                onClick: (s) => ne(a.id),
                 style: _(`opacity:${C.value.includes(a.id) ? 0.5 : 1}`)
-              }, w(a.name), 13, Ka))
+              }, w(a.name), 13, ja))
             ]),
             legendToggle: p(() => [
-              Q.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !v(ge) ? (n(), B(Fl, {
+              G.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !v(me) ? (n(), B(Vl, {
                 key: 0,
                 backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
                 color: e.value.style.chart.legend.selectAllToggle.color,
                 fontSize: e.value.style.chart.legend.fontSize,
                 checked: C.value.length > 0,
                 isCursorPointer: X.value,
-                onToggle: Ht
-              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : y("", !0)
+                onToggle: Et
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : d("", !0)
             ]),
             _: 1
           }, 8, ["legendSet", "config", "isCursorPointer"])) : g(l.$slots, "legend", {
             key: 1,
-            legend: Q.value
+            legend: G.value
           }, void 0, !0)
         ], 512)
-      ], 8, ["to"])) : y("", !0),
+      ], 8, ["to"])) : d("", !0),
       l.$slots.source ? (n(), r("div", {
         key: 7,
         ref_key: "source",
-        ref: Qe,
+        ref: Ge,
         dir: "auto"
       }, [
         g(l.$slots, "source", {}, void 0, !0)
-      ], 512)) : y("", !0),
-      de(v(qt), {
+      ], 512)) : d("", !0),
+      ce(v(At), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
-        show: k.value.showTooltip && he.value,
+        show: k.value.showTooltip && ye.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -1814,64 +1819,64 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: V.value,
-        content: Te.value,
-        isFullscreen: K.value,
+        parent: F.value,
+        content: qe.value,
+        isFullscreen: j.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold,
-        isA11yMode: Ae.value === "keyboard",
-        a11yPosition: et.value
+        isA11yMode: ze.value === "keyboard",
+        a11yPosition: tt.value
       }, {
         "tooltip-before": p(() => [
-          g(l.$slots, "tooltip-before", T(q({ ...$e.value })), void 0, !0)
+          g(l.$slots, "tooltip-before", T(q({ ...ke.value })), void 0, !0)
         ]),
         tooltip: p(() => [
-          g(l.$slots, "tooltip", T(q({ ...$e.value })), void 0, !0)
+          g(l.$slots, "tooltip", T(q({ ...ke.value })), void 0, !0)
         ]),
         "tooltip-after": p(() => [
-          g(l.$slots, "tooltip-after", T(q({ ...$e.value })), void 0, !0)
+          g(l.$slots, "tooltip-after", T(q({ ...ke.value })), void 0, !0)
         ]),
         default: p(() => [
-          e.value.style.chart.tooltip.showShape ? (n(), r("svg", ja, [
-            de(Ct, {
+          e.value.style.chart.tooltip.showShape ? (n(), r("svg", Ja, [
+            ce(St, {
               plot: { x: 10, y: 10 },
-              shape: ne.value.shape,
-              color: ne.value.color,
+              shape: re.value.shape,
+              color: re.value.color,
               radius: 8,
               stroke: e.value.style.chart.layout.plots.outline ? e.value.style.chart.layout.plots.outlineColor : "none",
               "stroke-width": e.value.style.chart.layout.plots.outlineWidth
             }, null, 8, ["shape", "color", "stroke", "stroke-width"])
-          ])) : y("", !0)
+          ])) : d("", !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
-      De.value && e.value.userOptions.buttons.table ? (n(), B(vl(ve.value.component), kt({ key: 8 }, ve.value.props, {
+      He.value && e.value.userOptions.buttons.table ? (n(), B(dl(de.value.component), wt({ key: 8 }, de.value.props, {
         ref_key: "tableUnit",
-        ref: oe,
-        onClose: pt
-      }), $t({
+        ref: ue,
+        onClose: gt
+      }), kt({
         content: p(() => [
-          (n(), B(v(Wt), {
-            key: `table_${je.value}`,
-            colNames: te.value.colNames,
-            head: te.value.head,
-            body: te.value.body,
-            config: te.value.config,
-            title: e.value.table.useDialog ? "" : ve.value.title,
+          (n(), B(v(Xt), {
+            key: `table_${Je.value}`,
+            colNames: le.value.colNames,
+            head: le.value.head,
+            body: le.value.body,
+            config: le.value.config,
+            title: e.value.table.useDialog ? "" : de.value.title,
             withCloseButton: !e.value.table.useDialog,
             isCursorPointer: X.value,
-            onClose: pt
+            onClose: gt
           }, {
             th: p(({ th: a }) => [
-              wt(w(a), 1)
+              Lt(w(a), 1)
             ]),
             td: p(({ td: a }) => [
-              d("div", {
+              y("div", {
                 innerHTML: a.name || a
-              }, null, 8, Ja)
+              }, null, 8, Za)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
@@ -1881,34 +1886,34 @@ const Rl = ["id"], Dl = ["id"], Hl = ["id"], El = { style: { position: "relative
         e.value.table.useDialog ? {
           name: "title",
           fn: p(() => [
-            wt(w(ve.value.title), 1)
+            Lt(w(de.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
           fn: p(() => [
-            d("button", {
+            y("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[13] || (o[13] = (a) => Be(e.value.userOptions.callbacks.csv)),
+              onClick: o[13] || (o[13] = (a) => Ne(e.value.userOptions.callbacks.csv)),
               style: _({ cursor: X.value ? "pointer" : "default" })
             }, [
-              de(v(At), {
+              ce(v(zt), {
                 name: "fileCsv",
-                stroke: ve.value.props.color
+                stroke: de.value.props.color
               }, null, 8, ["stroke"])
             ], 4)
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : y("", !0),
+      ]), 1040)) : d("", !0),
       g(l.$slots, "skeleton", {}, () => [
-        v(ge) ? (n(), B(Al, { key: 0 })) : y("", !0)
+        v(me) ? (n(), B(zl, { key: 0 })) : d("", !0)
       ], !0)
-    ], 46, Rl));
+    ], 46, Dl));
   }
-}, xo = /* @__PURE__ */ Il(Za, [["__scopeId", "data-v-259d20c0"]]);
+}, $o = /* @__PURE__ */ Rl(eo, [["__scopeId", "data-v-c7192b79"]]);
 export {
-  xo as default
+  $o as default
 };