vue-data-ui 3.9.11 → 3.9.13

package/dist/{vue-ui-xy-canvas-9tgX_s2v.js → vue-ui-xy-canvas-Bzd8pZdH.js}

@@ -1,19 +1,19 @@
-import { defineAsyncComponent as pe, ref as d, computed as p, useSlots as Na, onMounted as $l, toRefs as _a, watch as O, nextTick as be, onBeforeUnmount as Tl, shallowRef as je, createElementBlock as Te, openBlock as I, normalizeClass as Ha, normalizeStyle as xe, createCommentVNode as V, createElementVNode as J, createBlock as W, unref as C, createSlots as Il, withCtx as b, renderSlot as S, normalizeProps as K, guardReactiveProps as ee, createVNode as El, Teleport as Xa, toDisplayString as qe, resolveDynamicComponent as Ua, mergeProps as Va, createTextVNode as Ol } from "vue";
-import { c as Wa, t as Ya, i as ja, p as le, a0 as Ce, j as qa, M as Ge, a as se, d as ue, l as Rl, Q as Ga, a6 as Za, S as Ja, o as Qa, g as Ka, x as Pl, s as Le, n as et, u as lt, q as at, Z as tt } from "./lib-W9waxHL3.js";
+import { defineAsyncComponent as pe, ref as d, computed as p, useSlots as Na, onMounted as $l, toRefs as _a, watch as R, nextTick as be, onBeforeUnmount as Tl, shallowRef as je, createElementBlock as Te, openBlock as I, normalizeClass as Ha, normalizeStyle as xe, createCommentVNode as V, createElementVNode as J, createBlock as W, unref as C, createSlots as Il, withCtx as b, renderSlot as S, normalizeProps as Q, guardReactiveProps as ee, createVNode as El, Teleport as Xa, toDisplayString as qe, resolveDynamicComponent as Ua, mergeProps as Va, createTextVNode as Rl } from "vue";
+import { c as Wa, t as Ya, i as ja, j as le, a1 as Ce, k as qa, N as Ge, a as se, d as ue, m as Ol, R as Ga, a7 as Za, T as Ja, o as Ka, g as Qa, y as Pl, s as Le, q as et, v as lt, r as at, _ as tt } from "./lib-BwysEpWI.js";
 import { c as ot, a as Ze, d as rt, t as st, u as ut, l as k, r as Ie, b as Y, p as Bl } from "./useResponsive-DfdjqQps.js";
-import { u as nt, a as Ee } from "./useNestedProp-D-jUHecl.js";
+import { u as nt, a as Ee } from "./useNestedProp--5lL-kf1.js";
 import { u as it, B as ct } from "./BaseScanner-BMpwQAfz.js";
-import { u as vt } from "./usePrinter-DhoMn87n.js";
+import { u as vt } from "./usePrinter-BJzHDpYF.js";
 import { u as dt, a as ht, l as ft } from "./useTimeLabels-DKoynYae.js";
 import { u as yt } from "./useThemeCheck-DGJ31Vi5.js";
 import { u as mt } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as gt } from "./useChartAccessibility-9icAAmYg.js";
-import pt from "./img-BJzUSmkm.js";
-import bt from "./Legend-Dxz13z4E.js";
-import xt from "./Title-DFtCaCah.js";
-import Ct from "./BaseIcon-r3_sTK1A.js";
-import Lt from "./vue-ui-accordion-B6BX2vhq.js";
-import { S as kt } from "./SlicerPreview-pHjYklxh.js";
+import pt from "./img-DKigoPDs.js";
+import bt from "./Legend-D6z73edh.js";
+import xt from "./Title-BhURirpm.js";
+import Ct from "./BaseIcon-4i3dd7Ty.js";
+import Lt from "./vue-ui-accordion-tQNKwbVi.js";
+import { S as kt } from "./SlicerPreview-oV3dMuV1.js";
 import { _ as At } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A", minimap: { selectedColor: "#8A8A8A", lineColor: "#424242", indicatorColor: "#CCCCCC" } }, selector: { color: "#CCCCCC" }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" }, grid: { y: { axisColor: "#5A5A5A", axisLabels: { color: "#CCCCCC" }, verticalLines: { color: "#4A4A4A" } }, x: { axisColor: "#5A5A5A", horizontalLines: { color: "#4A4A4A" }, timeLabels: { color: "#CCCCCC" } }, zeroLine: { color: "#5A5A5A" } }, dataLabels: { color: "#CCCCCC" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, _l = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, selector: { color: "#5D4037" }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, grid: { y: { axisColor: "#5D4037", axisLabels: { color: "#424242" }, verticalLines: { show: !1 } }, x: { axisColor: "#5D4037", horizontalLines: { color: "#9A9A9A" }, timeLabels: { color: "#424242" } }, zeroLine: { color: "#424242" } }, dataLabels: { color: "#424242" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Hl = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, selector: { color: "#BDBDBD" }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, grid: { y: { axisColor: "#5D4037", axisLabels: { color: "#BDBDBD" }, verticalLines: { show: !1 } }, x: { axisColor: "#5D4037", horizontalLines: { color: "#3A3A3A" }, timeLabels: { color: "#BDBDBD" } }, zeroLine: { color: "#5D4037" } }, dataLabels: { color: "#BDBDBD" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Xl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, selector: { color: "#66CC66" }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66", borderRadius: 0 }, grid: { y: { axisColor: "#5F6A5F", axisLabels: { color: "#99AA99" }, verticalLines: { show: !1 } }, x: { axisColor: "#5F6A5F", horizontalLines: { color: "#3A3A3A" }, timeLabels: { color: "#99AA99" } }, zeroLine: { color: "#444444" } }, dataLabels: { color: "#99AA99" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ul = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, selector: { color: "#8F837A" }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" }, grid: { y: { axisColor: "#8F837A", axisLabels: { color: "#8F837A" }, verticalLines: { show: !1 } }, x: { axisColor: "#8F837A", horizontalLines: { show: !1, alternate: !1 }, timeLabels: { color: "#8F837A" } }, zeroLine: { color: "#444444" } }, dataLabels: { color: "#8F837A" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Vl = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", zoom: { color: "#92B0AB", highlightColor: "#50606C" }, selector: { color: "#7DA9B5" }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" }, grid: { y: { axisColor: "#829C98", axisLabels: { color: "#50606C" }, verticalLines: { show: !1 } }, x: { axisColor: "#829C98", timeLabels: { color: "#50606C" } }, zeroLine: { color: "#444444" } }, dataLabels: { color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Wl = {
   default: {},
@@ -32,10 +32,10 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
   default: Wl,
   hack: Xl,
   zen: Ul
-}, Symbol.toStringTag, { value: "Module" })), wt = ["id"], zt = ["id"], St = ["id"], Ft = ["onClick"], Mt = {
+}, Symbol.toStringTag, { value: "Module" })), wt = ["id"], zt = ["id"], St = ["id"], Ft = ["onClick"], Dt = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Dt = ["innerHTML"], $t = {
+}, Mt = ["innerHTML"], $t = {
   __name: "vue-ui-xy-canvas",
   props: {
     dataset: {
@@ -57,7 +57,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
   },
   emits: ["selectLegend", "selectX"],
   setup(Je, { expose: Yl, emit: jl }) {
-    const ql = pe(() => import("./Tooltip-B79qvriT.js")), Gl = pe(() => import("./DataTable-DNeCys3I.js")), Zl = pe(() => import("./UserOptions-B-2A_KRb.js")), Jl = pe(() => import("./NonSvgPenAndPaper-ZnkWbBri.js")), Ql = pe(() => import("./BaseDraggableDialog-C167SnU0.js")), { vue_ui_xy_canvas: Kl } = nt(), { isThemeValid: ea, warnInvalidTheme: la } = yt(), g = Je, Q = d(Wa()), _ = d(null), ae = d(null), c = d(null), m = d(1), j = d(1), ne = d(!1), h = d(null), ke = d(""), Qe = d(null), F = d([]), te = d(1), R = d(!0), H = d(!0), Ae = d(null), Ke = d(0), ie = d(!1), el = d(null), ll = d(null), q = d(null), al = d(null), Oe = d(0), Re = d(0), Pe = d(0), P = d(null), tl = d(!1), ce = d(null), Be = d(null), ve = d(!1), ol = d(!1), we = d(!1), A = d(null), X = p(() => Array.isArray(He.value) && He.value.length > 0), Ne = jl, aa = Na();
+    const ql = pe(() => import("./Tooltip-TDyKgLB6.js")), Gl = pe(() => import("./DataTable-WrXCJkfE.js")), Zl = pe(() => import("./UserOptions-CzJWRC4s.js")), Jl = pe(() => import("./NonSvgPenAndPaper-7clRuQVF.js")), Kl = pe(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_xy_canvas: Ql } = nt(), { isThemeValid: ea, warnInvalidTheme: la } = yt(), g = Je, K = d(Wa()), _ = d(null), ae = d(null), c = d(null), m = d(1), j = d(1), ne = d(!1), h = d(null), ke = d(""), Ke = d(null), F = d([]), te = d(1), O = d(!0), H = d(!0), Ae = d(null), Qe = d(0), ie = d(!1), el = d(null), ll = d(null), q = d(null), al = d(null), Re = d(0), Oe = d(0), Pe = d(0), P = d(null), tl = d(!1), ce = d(null), Be = d(null), ve = d(!1), ol = d(!1), we = d(!1), A = d(null), X = p(() => Array.isArray(He.value) && He.value.length > 0), Ne = jl, aa = Na();
     $l(() => {
       aa["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
     });
@@ -129,7 +129,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
     function Ue() {
       const e = Ee({
         userConfig: g.config,
-        defaultConfig: Kl
+        defaultConfig: Ql
       });
       let a = {};
       const t = e.theme;
@@ -156,13 +156,13 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         userConfig: g.config.style.chart.grid.y.timeLabels
       })), a;
     }
-    O(() => g.config, (e) => {
-      _e.value || (l.value = Ue()), Xe.value = !l.value.userOptions.showOnChartHover, Ll(), Oe.value += 1, Re.value += 1, Pe.value += 1, v.value.showTable = l.value.table.show, v.value.showDataLabels = l.value.style.chart.dataLabels.show, v.value.stacked = l.value.style.chart.stacked, v.value.showTooltip = l.value.style.chart.tooltip.show;
-    }, { deep: !0 }), O(() => g.dataset, async (e) => {
-      !Array.isArray(e) || e.length === 0 || (await be(), w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), R.value = !0, H.value = !0, await he(), Se(), Oe.value += 1, Re.value += 1, Pe.value += 1);
+    R(() => g.config, (e) => {
+      _e.value || (l.value = Ue()), Xe.value = !l.value.userOptions.showOnChartHover, Ll(), Re.value += 1, Oe.value += 1, Pe.value += 1, v.value.showTable = l.value.table.show, v.value.showDataLabels = l.value.style.chart.dataLabels.show, v.value.stacked = l.value.style.chart.stacked, v.value.showTooltip = l.value.style.chart.tooltip.show;
+    }, { deep: !0 }), R(() => g.dataset, async (e) => {
+      !Array.isArray(e) || e.length === 0 || (await be(), w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), O.value = !0, H.value = !0, await he(), Se(), Re.value += 1, Oe.value += 1, Pe.value += 1);
     }, { deep: !0 });
     const ul = d(l.value.style.chart.aspectRatio), { isPrinting: nl, isImaging: il, generatePdf: cl, generateImage: vl } = vt({
-      elementId: `xy_canvas_${Q.value}`,
+      elementId: `xy_canvas_${K.value}`,
       fileName: l.value.style.chart.title.text || "vue-ui-xy-canvas",
       options: l.value.userOptions.print
     }), v = d({
@@ -172,7 +172,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       showTooltip: l.value.style.chart.tooltip.show
     });
     function dl(e) {
-      ie.value = e, Ke.value += 1;
+      ie.value = e, Qe.value += 1;
     }
     const hl = p(() => qa(l.value.customPalette)), E = p(() => T.value ? Math.max(...T.value.filter((e, a) => !F.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0);
     function sa(e) {
@@ -247,7 +247,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         threshold: l.value.downsample.threshold
       }),
       absoluteIndex: a,
-      color: Rl(e.color || hl.value[a] || le[a] || le[a % le.length])
+      color: Ol(e.color || hl.value[a] || le[a] || le[a % le.length])
     }))), ia = p(() => {
       if (!l.value.style.chart.zoom.minimap.show) return [];
       const e = T.value.filter((u) => !F.value.includes(u.absoluteIndex)), a = Math.max(...e.map((u) => u.series.length)), t = [];
@@ -259,7 +259,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       ...a,
       isVisible: !F.value.includes(a.absoluteIndex)
     })) : []);
-    O(E, (e) => {
+    R(E, (e) => {
       e && he();
     });
     const y = p(() => Ja(T.value.filter((e, a) => !F.value.includes(e.absoluteIndex))).map((e, a) => ({
@@ -306,7 +306,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
     })), r = d({
       start: 0,
       end: E.value
-    }), M = d({ start: 0, end: E.value }), de = d(null);
+    }), D = d({ start: 0, end: E.value }), de = d(null);
     function va() {
       return new Promise((e) => requestAnimationFrame(
         () => requestAnimationFrame(() => e())
@@ -320,16 +320,16 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         await va(), ml();
       });
     }
-    const da = p(() => l.value.style.chart.zoom.preview.enable && (M.value.start !== r.value.start || M.value.end !== r.value.end));
+    const da = p(() => l.value.style.chart.zoom.preview.enable && (D.value.start !== r.value.start || D.value.end !== r.value.end));
     function yl(e, a) {
-      M.value[e] = a;
+      D.value[e] = a;
     }
     async function ml() {
       if (!ve.value) {
         ve.value = !0;
         try {
           const { startIndex: e, endIndex: a } = l.value.style.chart.zoom, t = Math.max(...T.value.map((i) => i.series.length)), s = e ?? 0, u = a != null ? Math.min(gl(a + 1), t) : t;
-          we.value = !0, r.value.start = s, r.value.end = u, M.value.start = s, M.value.end = u, Ve(), ol.value = !0, await be(), q.value && (q.value.setStartValue(r.value.start), q.value.setEndValue(r.value.end));
+          we.value = !0, r.value.start = s, r.value.end = u, D.value.start = s, D.value.end = u, Ve(), ol.value = !0, await be(), q.value && (q.value.setStartValue(r.value.start), q.value.setEndValue(r.value.end));
         } finally {
           queueMicrotask(() => {
             we.value = !1;
@@ -338,12 +338,12 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       }
     }
     function ha(e) {
-      ve.value || we.value || e !== r.value.start && (r.value.start = e, M.value.start = e, Ve());
+      ve.value || we.value || e !== r.value.start && (r.value.start = e, D.value.start = e, Ve());
     }
     function fa(e) {
       if (ve.value || we.value) return;
       const a = gl(e);
-      a !== r.value.end && (r.value.end = a, M.value.end = a, Ve());
+      a !== r.value.end && (r.value.end = a, D.value.end = a, Ve());
     }
     function gl(e) {
       const a = E.value;
@@ -355,20 +355,20 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         Math.max(...T.value.map((s) => s.series.length))
       );
       let a = Math.max(0, Math.min(r.value.start ?? 0, e - 1)), t = Math.max(a + 1, Math.min(r.value.end ?? e, e));
-      (!Number.isFinite(a) || !Number.isFinite(t) || t <= a) && (a = 0, t = e), r.value = { start: a, end: t }, M.value.start = a, M.value.end = t, q.value && (q.value.setStartValue(a), q.value.setEndValue(t));
+      (!Number.isFinite(a) || !Number.isFinite(t) || t <= a) && (a = 0, t = e), r.value = { start: a, end: t }, D.value.start = a, D.value.end = t, q.value && (q.value.setStartValue(a), q.value.setEndValue(t));
     }
-    const ya = p(() => y.value.filter((e) => ["line", "plot", void 0].includes(e.type))), D = p(() => y.value.filter((e) => e.type === "bar"));
+    const ya = p(() => y.value.filter((e) => ["line", "plot", void 0].includes(e.type))), M = p(() => y.value.filter((e) => e.type === "bar"));
     function Se() {
       if (!w.value || !ae.value) return;
       const e = ae.value.offsetWidth, a = ae.value.offsetHeight;
       w.value.width = e * te.value * 2, w.value.height = a * te.value * 2, m.value = e * te.value * 2, j.value = a * te.value * 2, c.value?.scale(te.value, te.value), G();
     }
-    O(X, async (e) => {
+    R(X, async (e) => {
       if (!e) {
         Ae.value = null, ne.value = !1, h.value = null, P.value = null;
         return;
       }
-      await be(), w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), R.value = !0, H.value = !0, await he(), Se(), G();
+      await be(), w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), O.value = !0, H.value = !0, await he(), Se(), G();
     });
     function ma() {
       if (c.value && (c.value.clearRect(0, 0, 1e4, 1e4), c.value.fillStyle = l.value.style.chart.backgroundColor, c.value.fillRect(0, 0, o.value.canvasWidth, o.value.canvasHeight), !!X.value)) {
@@ -773,25 +773,25 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       );
     }
     function Aa() {
-      D.value.forEach((e, a) => {
+      M.value.forEach((e, a) => {
         for (let t = 0; t < e.coordinatesLine.length; t += 1)
           Ie(
             c.value,
             [
               {
-                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / D.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * D.value.length) * a)),
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)),
                 y: v.value.stacked ? e.localZero : z.value.zero
               },
               {
-                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / D.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * D.value.length) * a)) + o.value.slot * 0.8 / (v.value.stacked ? 1 : D.value.length),
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)) + o.value.slot * 0.8 / (v.value.stacked ? 1 : M.value.length),
                 y: v.value.stacked ? e.localZero : z.value.zero
               },
               {
-                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / D.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * D.value.length) * a)) + o.value.slot * 0.8 / (v.value.stacked ? 1 : D.value.length),
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)) + o.value.slot * 0.8 / (v.value.stacked ? 1 : M.value.length),
                 y: e.coordinatesLine[t].y
               },
               {
-                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / D.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * D.value.length) * a)),
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)),
                 y: e.coordinatesLine[t].y
               }
             ],
@@ -826,7 +826,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
               }),
               { datapoint: e.coordinatesLine[t], seriesIndex: t }
             ),
-            o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / D.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * D.value.length) * a)) + o.value.slot * 0.4 / (v.value.stacked ? 1 : D.value.length),
+            o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)) + o.value.slot * 0.4 / (v.value.stacked ? 1 : M.value.length),
             (e.coordinatesLine[t].value < 0 ? v.value.stacked ? e.localZero : z.value.zero : e.coordinatesLine[t].y) + l.value.style.chart.dataLabels.offsetY,
             {
               align: "center",
@@ -949,8 +949,8 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         );
       });
     }
-    function Ma() {
-      const { left: e, top: a, width: t, height: s } = o.value, u = r.value.start, n = r.value.end - u, f = t / n, x = M.value.start - u, $ = M.value.end - u, L = Math.max(0, Math.min(n, x)), N = Math.max(0, Math.min(n, $));
+    function Da() {
+      const { left: e, top: a, width: t, height: s } = o.value, u = r.value.start, n = r.value.end - u, f = t / n, x = D.value.start - u, $ = D.value.end - u, L = Math.max(0, Math.min(n, x)), N = Math.max(0, Math.min(n, $));
       Ie(
         c.value,
         [
@@ -968,7 +968,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       );
     }
     function G() {
-      !X.value || !w.value || !c.value || (ma(), R.value ? ((h.value !== null || A.value !== null) && l.value.style.chart.selector.show && xl(), Aa(), v.value.stacked && l.value.style.chart.grid.x.showAxis && Fa(), ya.value.forEach((e) => {
+      !X.value || !w.value || !c.value || (ma(), O.value ? ((h.value !== null || A.value !== null) && l.value.style.chart.selector.show && xl(), Aa(), v.value.stacked && l.value.style.chart.grid.x.showAxis && Fa(), ya.value.forEach((e) => {
         (e.type === "line" || !e.type) && Sa(e), H.value && (ga(e), v.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && xa(e));
       }), w.value && (Ae.value = ot(w.value))) : (Ae.value && (c.value.clearRect(0, 0, 1e4, 1e4), c.value.drawImage(Ae.value, 0, 0)), (h.value !== null || A.value !== null) && l.value.style.chart.selector.show && xl(), (h.value !== null || A.value !== null) && y.value.forEach((e) => {
         const a = h.value ?? A.value, t = e.coordinatesLine[a];
@@ -981,7 +981,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
             fillStyle: e.color
           }
         );
-      })), l.value.style.chart.grid.x.timeLabels.show && La(), l.value.style.chart.selector.show && l.value.style.chart.selector.showHorizontalSelector && ka(), ba(), pa(), l.value.style.chart.zoom.preview.enable && (r.value.start !== M.value.start || r.value.end !== M.value.end) && Ma(), R.value = !1);
+      })), l.value.style.chart.grid.x.timeLabels.show && La(), l.value.style.chart.selector.show && l.value.style.chart.selector.showHorizontalSelector && ka(), ba(), pa(), l.value.style.chart.zoom.preview.enable && (r.value.start !== D.value.start || r.value.end !== D.value.end) && Da(), O.value = !1);
     }
     const Fe = rt(() => {
       H.value = !0, Se();
@@ -991,7 +991,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       const { y: a, value: t } = e.coordinatesLine[h.value ?? A.value];
       return { y: a, value: t };
     }
-    function Da(e) {
+    function Ma(e) {
       if (!X.value || !w.value) return;
       const { left: a, top: t } = w.value.getBoundingClientRect(), s = e.clientX - a;
       if (P.value = (e.clientY - t) * 2, (P.value < o.value.top || P.value > o.value.bottom) && (P.value = null), s * 2 < o.value.left || s * 2 > o.value.right) {
@@ -1028,27 +1028,27 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         indexLabel: ""
       });
     }
-    O(() => g.selectedXIndex, (e) => {
+    R(() => g.selectedXIndex, (e) => {
       if ([null, void 0].includes(g.selectedXIndex)) {
         h.value = null;
         return;
       }
       const a = e - r.value.start;
       a < 0 || e >= r.value.end ? h.value = null : h.value = a ?? null;
-    }, { immediate: !0 }), O(() => h.value, (e) => {
+    }, { immediate: !0 }), R(() => h.value, (e) => {
       Fe();
-    }), O(() => r.value, (e) => {
-      R.value = !0, G();
+    }), R(() => r.value, (e) => {
+      O.value = !0, G();
     }, {
       deep: !0
-    }), O(() => M.value, (e) => {
+    }), R(() => D.value, (e) => {
       G();
-    }, { deep: !0 }), O(() => v.value.showDataLabels, (e) => {
-      R.value = !0, G();
-    }), O(() => P.value, (e) => {
+    }, { deep: !0 }), R(() => v.value.showDataLabels, (e) => {
+      O.value = !0, G();
+    }), R(() => P.value, (e) => {
       e && G();
-    }), O(() => v.value.stacked, (e) => {
-      R.value = !0, H.value = !0, Fe();
+    }), R(() => v.value.stacked, (e) => {
+      O.value = !0, H.value = !0, Fe();
     });
     function Ta() {
       ne.value = !1, h.value = null, ke.value = "", P.value = null, G();
@@ -1058,8 +1058,8 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       tl.value = !0, Ll();
     });
     function Ll() {
-      if (Qa(g.dataset) && ta.value && Ka({ componentName: "VueUiXyCanvas", type: "dataset" }), be(() => {
-        w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), c.value && X.value && (R.value = !0, H.value = !0, Se());
+      if (Ka(g.dataset) && ta.value && Qa({ componentName: "VueUiXyCanvas", type: "dataset" }), be(() => {
+        w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), c.value && X.value && (O.value = !0, H.value = !0, Se());
       }), l.value.responsive) {
         const e = st(() => {
           const { width: a, height: t } = ut({
@@ -1077,14 +1077,14 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       }
       re.value && re.value.disconnect(), re.value = new ResizeObserver((e) => {
         for (const a of e)
-          a.contentBoxSize && ae.value && (R.value = !0, Fe());
+          a.contentBoxSize && ae.value && (O.value = !0, Fe());
       }), re.value.observe(ae.value), he();
     }
     Tl(() => {
       re.value && re.value.disconnect(), Z.value && (oe.value && Z.value.unobserve(oe.value), Z.value.disconnect());
     });
-    function Me(e) {
-      Ne("selectLegend", y.value.find((a) => a.absoluteIndex === e)), F.value.includes(e) ? F.value = F.value.filter((a) => a !== e) : F.value.push(e), R.value = !0, Fe();
+    function De(e) {
+      Ne("selectLegend", y.value.find((a) => a.absoluteIndex === e)), F.value.includes(e) ? F.value = F.value.filter((a) => a !== e) : F.value.push(e), O.value = !0, Fe();
     }
     function kl(e) {
       if (!T.value.length)
@@ -1094,16 +1094,16 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
     }
     function Ia(e) {
       const a = kl(e);
-      a !== null && F.value.includes(a.absoluteIndex) && Me(a.absoluteIndex);
+      a !== null && F.value.includes(a.absoluteIndex) && De(a.absoluteIndex);
     }
     function Ea(e) {
       const a = kl(e);
-      a !== null && (F.value.includes(a.absoluteIndex) || Me(a.absoluteIndex));
+      a !== null && (F.value.includes(a.absoluteIndex) || De(a.absoluteIndex));
     }
     const Al = p(() => T.value.map((e, a) => ({
       ...e,
       name: e.name,
-      color: Rl(e.color) || hl.value[a] || le[a] || le[a % le.length],
+      color: Ol(e.color) || hl.value[a] || le[a] || le[a % le.length],
       shape: e.shape || "circle",
       prefix: e.prefix || "",
       suffix: e.suffix || "",
@@ -1111,16 +1111,16 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
     })).map((e) => ({
       ...e,
       opacity: F.value.includes(e.absoluteIndex) ? 0.5 : 1,
-      segregate: () => Me(e.absoluteIndex),
+      segregate: () => De(e.absoluteIndex),
       isSegregated: F.value.includes(e.absoluteIndex)
-    }))), Oa = p(() => ({
+    }))), Ra = p(() => ({
       cy: "donut-div-legend",
       backgroundColor: l.value.style.chart.legend.backgroundColor,
       color: l.value.style.chart.legend.color,
       fontSize: l.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: l.value.style.chart.legend.bold ? "bold" : ""
-    })), De = p(() => {
+    })), Me = p(() => {
       const e = [""].concat(y.value.map((u) => u.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
       let a = [];
       for (let u = 0; u < E.value; u += 1) {
@@ -1160,7 +1160,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], t = ["", ...wl.value.head.map((n) => n.label)], s = wl.value.body, u = a.concat([t]).concat(s), i = lt(u);
       e ? e(i) : at({ csvContent: i, title: l.value.style.chart.title.text || "vue-ui-xy-canvas" });
     }
-    function Ra() {
+    function Oa() {
       return y.value;
     }
     function zl() {
@@ -1172,7 +1172,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
     function Fl() {
       v.value.stacked = !v.value.stacked;
     }
-    function Ml() {
+    function Dl() {
       v.value.showTooltip = !v.value.showTooltip;
     }
     const $e = d(!1);
@@ -1194,7 +1194,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
     const ye = p(() => {
       const e = l.value.table.useDialog && !l.value.table.show, a = v.value.showTable;
       return {
-        component: e ? Ql : Lt,
+        component: e ? Kl : Lt,
         title: `${l.value.style.chart.title.text}${l.value.style.chart.title.subtitle.text ? `: ${l.value.style.chart.title.subtitle.text}` : ""}`,
         props: e ? {
           backgroundColor: l.value.table.th.backgroundColor,
@@ -1221,14 +1221,14 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         }
       };
     });
-    O(() => v.value.showTable, (e) => {
+    R(() => v.value.showTable, (e) => {
       l.value.table.show || (e && l.value.table.useDialog && ce.value ? ce.value.open() : "close" in ce.value && ce.value.close());
     });
-    function Dl() {
+    function Ml() {
       v.value.showTable = !1, Be.value && Be.value.setTableIconState(!1);
     }
     return Yl({
-      getData: Ra,
+      getData: Oa,
       getImage: Pa,
       generateCsv: We,
       generatePdf: cl,
@@ -1238,14 +1238,14 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       toggleTable: zl,
       toggleLabels: Sl,
       toggleStack: Fl,
-      toggleTooltip: Ml,
+      toggleTooltip: Dl,
       toggleAnnotator: Ye,
       toggleFullscreen: dl
     }), (e, a) => (I(), Te("div", {
       style: xe(`width:100%; position:relative; ${l.value.responsive ? "height: 100%" : ""}; background:${l.value.style.chart.backgroundColor};`),
       ref_key: "xy",
       ref: _,
-      id: `xy_canvas_${Q.value}`,
+      id: `xy_canvas_${K.value}`,
       class: Ha(`vue-data-ui-component vue-ui-xy-canvas ${ie.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       onMouseenter: oa,
       onMouseleave: ra
@@ -1257,7 +1257,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         style: xe(`width:100%;background:${l.value.style.chart.backgroundColor};`)
       }, [
         (I(), W(xt, {
-          key: `title_${Oe.value}`,
+          key: `title_${Re.value}`,
           config: {
             title: {
               cy: "xy-canvas-title",
@@ -1271,17 +1271,17 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         }, null, 8, ["config"]))
       ], 4)) : V("", !0),
       J("div", {
-        id: `legend-top-${Q.value}`
+        id: `legend-top-${K.value}`
       }, null, 8, zt),
       l.value.userOptions.show && X.value && (C(sl) || C(Xe)) ? (I(), W(C(Zl), {
         ref_key: "userOptionsRef",
         ref: Be,
-        key: `user_option_${Ke.value}`,
+        key: `user_option_${Qe.value}`,
         backgroundColor: l.value.style.chart.backgroundColor,
         color: l.value.style.chart.color,
         isPrinting: C(nl),
         isImaging: C(il),
-        uid: Q.value,
+        uid: K.value,
         hasTooltip: l.value.userOptions.buttons.tooltip && l.value.style.chart.tooltip.show,
         hasPdf: l.value.userOptions.buttons.pdf,
         hasImg: l.value.userOptions.buttons.img,
@@ -1308,7 +1308,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         onToggleTable: zl,
         onToggleLabels: Sl,
         onToggleStack: Fl,
-        onToggleTooltip: Ml,
+        onToggleTooltip: Dl,
         onToggleAnnotator: Ye,
         style: xe({
           visibility: C(sl) ? C(Xe) ? "visible" : "hidden" : "visible"
@@ -1317,7 +1317,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         e.$slots.menuIcon ? {
           name: "menuIcon",
           fn: b(({ isOpen: t, color: s }) => [
-            S(e.$slots, "menuIcon", K(ee({ isOpen: t, color: s })), void 0, !0)
+            S(e.$slots, "menuIcon", Q(ee({ isOpen: t, color: s })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -1373,14 +1373,14 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: b(({ toggleFullscreen: t, isFullscreen: s }) => [
-            S(e.$slots, "optionFullscreen", K(ee({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
+            S(e.$slots, "optionFullscreen", Q(ee({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: b(({ toggleAnnotator: t, isAnnotator: s }) => [
-            S(e.$slots, "optionAnnotator", K(ee({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
+            S(e.$slots, "optionAnnotator", Q(ee({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
           ]),
           key: "9"
         } : void 0
@@ -1395,7 +1395,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
           ref_key: "canvas",
           ref: w,
           style: { width: "100%", height: "100%" },
-          onMousemove: a[0] || (a[0] = (t) => Da(t)),
+          onMousemove: a[0] || (a[0] = (t) => Ma(t)),
           onMouseleave: Ta
         }, null, 544),
         C(_e) ? (I(), W(ct, { key: 0 })) : V("", !0),
@@ -1420,10 +1420,10 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
           smoothSnapThreshold: l.value.style.chart.tooltip.smoothSnapThreshold
         }, {
           "tooltip-before": b(() => [
-            S(e.$slots, "tooltip-before", K(ee({ ...Qe.value })), void 0, !0)
+            S(e.$slots, "tooltip-before", Q(ee({ ...Ke.value })), void 0, !0)
           ]),
           "tooltip-after": b(() => [
-            S(e.$slots, "tooltip-after", K(ee({ ...Qe.value })), void 0, !0)
+            S(e.$slots, "tooltip-after", Q(ee({ ...Ke.value })), void 0, !0)
           ]),
           _: 3
         }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"])
@@ -1482,16 +1482,16 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         "onUpdate:start": ha
       }, {
         "reset-action": b(({ reset: t }) => [
-          S(e.$slots, "reset-action", K(ee({ reset: t })), void 0, !0)
+          S(e.$slots, "reset-action", Q(ee({ reset: t })), void 0, !0)
         ]),
         _: 3
       }, 8, ["allMinimaps", "background", "borderColor", "customFormat", "cutNullValues", "enableRangeHandles", "enableSelectionDrag", "end", "focusOnDrag", "focusRangeRatio", "fontSize", "immediate", "inputColor", "isPreview", "labelLeft", "labelRight", "max", "minimap", "minimapCompact", "minimapFrameColor", "minimapIndicatorColor", "minimapLineColor", "minimapMerged", "minimapSelectedColor", "minimapSelectedColorOpacity", "minimapSelectedIndex", "minimapSelectionRadius", "preciseLabels", "refreshEndPoint", "refreshStartPoint", "selectColor", "selectedSeries", "smoothMinimap", "start", "timeLabels", "usePreciseLabels", "textColor", "useResetSlot", "valueEnd", "valueStart", "verticalHandles"])) : V("", !0),
       J("div", {
-        id: `legend-bottom-${Q.value}`
+        id: `legend-bottom-${K.value}`
       }, null, 8, St),
       tl.value ? (I(), W(Xa, {
         key: 3,
-        to: l.value.style.chart.legend.position === "top" ? `#legend-top-${Q.value}` : `#legend-bottom-${Q.value}`
+        to: l.value.style.chart.legend.position === "top" ? `#legend-top-${K.value}` : `#legend-bottom-${K.value}`
       }, [
         J("div", {
           ref_key: "chartLegend",
@@ -1499,9 +1499,9 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         }, [
           l.value.style.chart.legend.show && X.value ? (I(), W(bt, {
             legendSet: Al.value,
-            config: Oa.value,
+            config: Ra.value,
             key: `legend_${Pe.value}`,
-            onClickMarker: a[3] || (a[3] = ({ i: t }) => Me(t))
+            onClickMarker: a[3] || (a[3] = ({ i: t }) => De(t))
           }, {
             item: b(({ legend: t, index: s }) => [
               J("div", {
@@ -1516,8 +1516,8 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
           }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : V("", !0),
-      e.$slots.watermark ? (I(), Te("div", Mt, [
-        S(e.$slots, "watermark", K(ee({ isPrinting: C(nl) || C(il) })), void 0, !0)
+      e.$slots.watermark ? (I(), Te("div", Dt, [
+        S(e.$slots, "watermark", Q(ee({ isPrinting: C(nl) || C(il) })), void 0, !0)
       ])) : V("", !0),
       e.$slots.source ? (I(), Te("div", {
         key: 5,
@@ -1530,24 +1530,24 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
       X.value && l.value.userOptions.buttons.table ? (I(), W(Ua(ye.value.component), Va({ key: 6 }, ye.value.props, {
         ref_key: "tableUnit",
         ref: ce,
-        onClose: Dl
+        onClose: Ml
       }), Il({
         content: b(() => [
           (I(), W(C(Gl), {
-            key: `table_${Re.value}`,
-            colNames: De.value.colNames,
-            head: De.value.head,
-            body: De.value.body,
-            config: De.value.config,
+            key: `table_${Oe.value}`,
+            colNames: Me.value.colNames,
+            head: Me.value.head,
+            body: Me.value.body,
+            config: Me.value.config,
             title: l.value.table.useDialog ? "" : ye.value.title,
             withCloseButton: !l.value.table.useDialog,
-            onClose: Dl
+            onClose: Ml
           }, {
             th: b(({ th: t }) => [
-              J("div", { innerHTML: t }, null, 8, Dt)
+              J("div", { innerHTML: t }, null, 8, Mt)
             ]),
             td: b(({ td: t }) => [
-              Ol(qe(t), 1)
+              Rl(qe(t), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1557,7 +1557,7 @@ const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoo
         l.value.table.useDialog ? {
           name: "title",
           fn: b(() => [
-            Ol(qe(ye.value.title), 1)
+            Rl(qe(ye.value.title), 1)
           ]),
           key: "0"
         } : void 0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "3.9.11",
+  "version": "3.9.13",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [