vue-data-ui 2.12.8-beta.3 → 2.13.0

package/dist/{vue-ui-xy-canvas-oHhzL0ui.js → vue-ui-xy-canvas-R0tICTKy.js}

@@ -1,13 +1,13 @@
-import { defineAsyncComponent as J, ref as d, computed as k, useSlots as _a, onMounted as ra, watch as A, nextTick as ge, shallowRef as $e, onBeforeUnmount as Ba, createElementBlock as se, openBlock as z, unref as p, normalizeClass as Va, normalizeStyle as K, createCommentVNode as U, createBlock as D, createElementVNode as ne, createSlots as Za, withCtx as m, renderSlot as x, normalizeProps as W, guardReactiveProps as X, createVNode as Ga, toDisplayString as ua, createTextVNode as ja } from "vue";
-import { u as qa, c as Ja, t as Ka, p as _, a as Qa, C as pe, b as el, D as Ie, i as Q, f as ee, d as sa, a1 as al, H as ll, ai as tl, o as ol, e as rl, x as na, q as ul, r as sl, y as nl, s as ie, l as il } from "./index-CH_mJIWj.js";
+import { defineAsyncComponent as J, ref as d, computed as C, useSlots as _a, onMounted as ra, watch as A, nextTick as ge, shallowRef as $e, onBeforeUnmount as Ba, createElementBlock as se, openBlock as z, unref as p, normalizeClass as Va, normalizeStyle as K, createCommentVNode as U, createBlock as D, createElementVNode as ne, createSlots as Za, withCtx as b, renderSlot as x, normalizeProps as W, guardReactiveProps as X, createVNode as Ga, toDisplayString as ua, createTextVNode as ja } from "vue";
+import { u as qa, c as Ja, t as Ka, p as _, a as Qa, C as pe, b as el, D as Ie, i as Q, f as ee, d as sa, a1 as al, H as ll, ai as tl, o as ol, e as rl, x as na, q as ul, r as sl, y as nl, s as ie, l as il } from "./index-BXbyT0Qn.js";
 import { d as vl, t as cl, u as dl, c as hl, a as ia, l as L, r as Me, b as R, p as va } from "./useResponsive-JZ9xq-JV.js";
-import { u as ca } from "./useNestedProp-rMR-JeOJ.js";
-import { u as yl } from "./usePrinter-DJ7WfWUs.js";
+import { u as ca } from "./useNestedProp-DVZpeH84.js";
+import { u as yl } from "./usePrinter-aKh5-HcK.js";
 import { u as fl } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as gl } from "./useChartAccessibility-9icAAmYg.js";
-import pl from "./Legend-DRqzYrP9.js";
-import bl from "./Title-apr_T9tg.js";
-import { S as ml } from "./Slicer-o6jJH5bw.js";
+import pl from "./Legend-DcDRW3Xd.js";
+import ml from "./Title-DoWqzga-.js";
+import { S as bl } from "./Slicer-CxdgZOQ7.js";
 import { _ as xl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Ll = ["id"], kl = ["onClick"], Cl = {
   key: 2,
@@ -30,11 +30,11 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
   },
   emits: ["selectLegend"],
   setup(Te, { expose: da, emit: ha }) {
-    const ya = J(() => import("./vue-ui-accordion-Ds4zkPIx.js")), fa = J(() => import("./DataTable-BBqbcutV.js")), ga = J(() => import("./NonSvgPenAndPaper-CQIC2PMP.js")), pa = J(() => import("./vue-ui-skeleton-C6PWt_m5.js")), ba = J(() => import("./Tooltip-BuHsMAfp.js")), ma = J(() => import("./UserOptions-OVNxxnq5.js")), { vue_ui_xy_canvas: xa } = qa(), g = Te, be = d(Ja()), ae = d(null), le = d(null), s = d(null), y = d(1), P = d(1), ve = d(!1), v = d(null), ce = d(""), Oe = d(null), $ = d([]), B = d(1), H = d(!0), V = d(!0), me = d(null), Re = d(0), Pe = d(0), de = d(!1), Ee = d(null), Fe = d(null), Ae = d(null), De = d(null), xe = d(0), Le = d(0), ke = d(0), M = d(null), Ce = k(() => !!g.dataset && g.dataset.length), La = ha, ka = _a();
+    const ya = J(() => import("./vue-ui-accordion-CXsjHe1y.js")), fa = J(() => import("./DataTable-DBkfb6pd.js")), ga = J(() => import("./NonSvgPenAndPaper-DYA_rF1x.js")), pa = J(() => import("./vue-ui-skeleton-Fxr752Oi.js")), ma = J(() => import("./Tooltip-DYCBNM-_.js")), ba = J(() => import("./UserOptions-B3q-xfQV.js")), { vue_ui_xy_canvas: xa } = qa(), g = Te, me = d(Ja()), ae = d(null), le = d(null), s = d(null), y = d(1), P = d(1), ve = d(!1), v = d(null), ce = d(""), Oe = d(null), $ = d([]), B = d(1), H = d(!0), V = d(!0), be = d(null), Re = d(0), Pe = d(0), de = d(!1), Ee = d(null), Fe = d(null), Ae = d(null), De = d(null), xe = d(0), Le = d(0), ke = d(0), M = d(null), Ce = C(() => !!g.dataset && g.dataset.length), La = ha, ka = _a();
     ra(() => {
       ka["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
     });
-    const a = k({
+    const a = C({
       get: () => Ye(),
       set: (e) => e
     }), { userOptionsVisible: we, setUserOptionsVisibility: He, keepUserOptionState: Ne } = fl({ config: a.value }), { svgRef: T } = gl({ config: a.value.style.chart.title });
@@ -58,7 +58,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       ze(), xe.value += 1, Le.value += 1, ke.value += 1;
     }, { deep: !0 });
     const Ue = d(a.value.style.chart.aspectRatio), { isPrinting: We, isImaging: Xe, generatePdf: _e, generateImage: Be } = yl({
-      elementId: `xy_canvas_${be.value}`,
+      elementId: `xy_canvas_${me.value}`,
       fileName: a.value.style.chart.title.text || "vue-ui-xy-canvas",
       options: a.value.userOptions.print
     }), u = d({
@@ -70,7 +70,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
     function Ca(e) {
       de.value = e, Pe.value += 1;
     }
-    const Ve = k(() => el(a.value.customPalette)), I = k(() => Z.value ? Math.max(...Z.value.filter((e, t) => !$.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), l = k(() => {
+    const Ve = C(() => el(a.value.customPalette)), I = C(() => Z.value ? Math.max(...Z.value.filter((e, t) => !$.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), l = C(() => {
       const e = y.value - y.value * (a.value.style.chart.paddingProportions.left + a.value.style.chart.paddingProportions.right);
       return {
         canvasWidth: y.value,
@@ -87,21 +87,21 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
     function Ze(e, t) {
       return e / t;
     }
-    function wa({ hasAutoScale: e, series: t, min: o, max: n, scale: c, yOffset: w, individualHeight: i, stackIndex: f = null }) {
+    function wa({ hasAutoScale: e, series: t, min: o, max: n, scale: c, yOffset: k, individualHeight: i, stackIndex: f = null }) {
       return t.map((N, S) => {
         const F = c.min < 0 ? Math.abs(c.min) : 0, Y = Ze(N + F, F + c.max);
         let re, ue;
         e && (re = c.min, ue = Ze(N - re, c.max - re));
         let O = 0;
-        return f === null ? O = l.value.bottom - l.value.height * (e ? ue : Y) : O = l.value.bottom - w - i * (e ? ue : Y), {
+        return f === null ? O = l.value.bottom - l.value.height * (e ? ue : Y) : O = l.value.bottom - k - i * (e ? ue : Y), {
           x: l.value.left + l.value.slot * S + l.value.slot / 2,
           y: O,
           value: N
         };
       });
     }
-    const b = k(() => {
-      const e = a.value.style.chart.scale.min !== null ? a.value.style.chart.scale.min : Math.min(...Z.value.filter((i, f) => !$.value.includes(i.absoluteIndex)).flatMap((i) => i.series.slice(r.value.start, r.value.end))), t = a.value.style.chart.scale.max !== null ? a.value.style.chart.scale.max : Math.max(...Z.value.filter((i, f) => !$.value.includes(i.absoluteIndex)).flatMap((i) => i.series.slice(r.value.start, r.value.end))), o = Ie(e < 0 ? e : 0, t === e ? e + 1 < 0 ? 0 : e + 1 : t < 0 ? 0 : t, a.value.style.chart.scale.ticks), n = o.min < 0 ? Math.abs(o.min) : 0, c = l.value.bottom - l.value.height * (n / (o.max + n)), w = o.ticks.map((i) => ({
+    const m = C(() => {
+      const e = a.value.style.chart.scale.min !== null ? a.value.style.chart.scale.min : Math.min(...Z.value.filter((i, f) => !$.value.includes(i.absoluteIndex)).flatMap((i) => i.series.slice(r.value.start, r.value.end))), t = a.value.style.chart.scale.max !== null ? a.value.style.chart.scale.max : Math.max(...Z.value.filter((i, f) => !$.value.includes(i.absoluteIndex)).flatMap((i) => i.series.slice(r.value.start, r.value.end))), o = Ie(e < 0 ? e : 0, t === e ? e + 1 < 0 ? 0 : e + 1 : t < 0 ? 0 : t, a.value.style.chart.scale.ticks), n = o.min < 0 ? Math.abs(o.min) : 0, c = l.value.bottom - l.value.height * (n / (o.max + n)), k = o.ticks.map((i) => ({
         y: l.value.bottom - l.value.height * ((i + n) / (o.max + n)),
         x: l.value.left - 8,
         value: i
@@ -111,10 +111,10 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
         max: t,
         min: e,
         scale: o,
-        yLabels: w,
+        yLabels: k,
         zero: c
       };
-    }), za = k(() => h.value.map((e) => `
+    }), za = C(() => h.value.map((e) => `
             <div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
                 <svg viewBox="0 0 10 10" height="12" width="12">
                     <circle cx="5" cy="5" r="5" fill="${e.color}"/>
@@ -132,7 +132,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       { datapoint: e, seriesIndex: v.value }
     )}</span>
             </div>
-        `)), Z = k(() => g.dataset.map((e, t) => ({
+        `)), Z = C(() => g.dataset.map((e, t) => ({
       ...e,
       series: al({
         data: ll(e.series),
@@ -144,7 +144,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
     A(I, (e) => {
       e && Ge();
     });
-    const h = k(() => tl(Z.value.filter((e, t) => !$.value.includes(e.absoluteIndex))).map((e, t) => ({
+    const h = C(() => tl(Z.value.filter((e, t) => !$.value.includes(e.absoluteIndex))).map((e, t) => ({
       ...e,
       series: e.series.slice(r.value.start, r.value.end)
     })).map((e, t) => {
@@ -153,9 +153,9 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       const c = {
         valueMin: o,
         valueMax: n
-      }, w = e.scaleSteps || a.value.style.chart.scale.ticks;
+      }, k = e.scaleSteps || a.value.style.chart.scale.ticks;
       let i;
-      e.autoScaling ? i = Ie(c.valueMin, c.valueMax, w) : i = Ie(c.valueMin < 0 ? c.valueMin : 0, c.valueMax <= 0 ? 0 : c.valueMax, w);
+      e.autoScaling ? i = Ie(c.valueMin, c.valueMax, k) : i = Ie(c.valueMin < 0 ? c.valueMin : 0, c.valueMax <= 0 ? 0 : c.valueMax, k);
       const f = u.value.stacked ? l.value.height * (1 - e.cumulatedStackRatio) : 0, N = u.value.stacked ? l.value.height / a.value.style.chart.stackGap : 0, S = u.value.stacked ? l.value.height * e.stackRatio - N : l.value.height, F = i.min < 0 ? Math.abs(i.min) : 0;
       let Y;
       e.autoScaling && u.value.stacked && n <= 0 ? Y = l.value.bottom - f - S : Y = l.value.bottom - f - S * (F / (i.max + F));
@@ -166,9 +166,9 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       })), ue = wa({
         hasAutoScale: u.value.stacked && e.autoScaling,
         series: e.series,
-        min: u.value.stacked ? o : b.value.min,
-        max: u.value.stacked ? n : b.value.max,
-        scale: u.value.stacked ? i : b.value.scale,
+        min: u.value.stacked ? o : m.value.min,
+        max: u.value.stacked ? n : m.value.max,
+        scale: u.value.stacked ? i : m.value.scale,
         yOffset: f,
         individualHeight: S,
         stackIndex: u.value.stacked ? t : null
@@ -203,7 +203,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       const t = I.value;
       return e > t ? t : e < 0 || a.value.style.chart.zoom.startIndex !== null && e < a.value.style.chart.zoom.startIndex ? a.value.style.chart.zoom.startIndex !== null ? a.value.style.chart.zoom.startIndex + 1 : 1 : e;
     }
-    const $a = k(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), C = k(() => h.value.filter((e) => e.type === "bar"));
+    const $a = C(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), w = C(() => h.value.filter((e) => e.type === "bar"));
     function Ia() {
       if (!T.value)
         return;
@@ -348,21 +348,21 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
                 color: a.value.style.chart.grid.y.verticalLines.color
               }
             );
-        a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? b.value.yLabels.forEach((e, t) => {
-          t < b.value.yLabels.length - 1 && Me(
+        a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? m.value.yLabels.forEach((e, t) => {
+          t < m.value.yLabels.length - 1 && Me(
             s.value,
             [
               { x: l.value.left, y: e.y },
               { x: l.value.right, y: e.y },
-              { x: l.value.right, y: b.value.yLabels[t + 1].y },
-              { x: l.value.left, y: b.value.yLabels[t + 1].y }
+              { x: l.value.right, y: m.value.yLabels[t + 1].y },
+              { x: l.value.left, y: m.value.yLabels[t + 1].y }
             ],
             {
               fillColor: t % 2 === 0 ? "transparent" : ie(a.value.style.chart.grid.x.horizontalLines.color, a.value.style.chart.grid.x.horizontalLines.opacity),
               strokeColor: "transparent"
             }
           );
-        }) : b.value.yLabels.forEach((e) => {
+        }) : m.value.yLabels.forEach((e) => {
           L(
             s.value,
             [
@@ -396,8 +396,8 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
         ), a.value.style.chart.grid.zeroLine.show && L(
           s.value,
           [
-            { x: l.value.left, y: b.value.zero },
-            { x: l.value.right, y: b.value.zero }
+            { x: l.value.left, y: m.value.zero },
+            { x: l.value.right, y: m.value.zero }
           ],
           {
             color: a.value.style.chart.grid.zeroLine.color,
@@ -493,7 +493,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
             }
           );
         });
-      }) : b.value.yLabels.forEach((e, t) => {
+      }) : m.value.yLabels.forEach((e, t) => {
         R(
           s.value,
           Q(
@@ -586,25 +586,25 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       );
     }
     function Aa() {
-      C.value.forEach((e, t) => {
+      w.value.forEach((e, t) => {
         for (let o = 0; o < e.coordinatesLine.length; o += 1)
           Me(
             s.value,
             [
               {
-                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / C.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * C.value.length) * t)),
-                y: u.value.stacked ? e.localZero : b.value.zero
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / w.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * w.value.length) * t)),
+                y: u.value.stacked ? e.localZero : m.value.zero
               },
               {
-                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / C.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * C.value.length) * t)) + l.value.slot * 0.8 / (u.value.stacked ? 1 : C.value.length),
-                y: u.value.stacked ? e.localZero : b.value.zero
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / w.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * w.value.length) * t)) + l.value.slot * 0.8 / (u.value.stacked ? 1 : w.value.length),
+                y: u.value.stacked ? e.localZero : m.value.zero
               },
               {
-                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / C.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * C.value.length) * t)) + l.value.slot * 0.8 / (u.value.stacked ? 1 : C.value.length),
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / w.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * w.value.length) * t)) + l.value.slot * 0.8 / (u.value.stacked ? 1 : w.value.length),
                 y: e.coordinatesLine[o].y
               },
               {
-                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / C.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * C.value.length) * t)),
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / w.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * w.value.length) * t)),
                 y: e.coordinatesLine[o].y
               }
             ],
@@ -618,7 +618,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
                 },
                 end: {
                   x: e.coordinatesLine[o].x,
-                  y: u.value.stacked ? e.localZero : b.value.zero
+                  y: u.value.stacked ? e.localZero : m.value.zero
                 },
                 stops: [
                   { offset: 0, color: e.color },
@@ -639,8 +639,8 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
               }),
               { datapoint: e.coordinatesLine[o], seriesIndex: o }
             ),
-            l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / C.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * C.value.length) * t)) + l.value.slot * 0.4 / (u.value.stacked ? 1 : C.value.length),
-            (e.coordinatesLine[o].value < 0 ? u.value.stacked ? e.localZero : b.value.zero : e.coordinatesLine[o].y) + a.value.style.chart.dataLabels.offsetY,
+            l.value.left + l.value.slot * o + l.value.slot / 10 + (u.value.stacked ? 0 : l.value.slot / w.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * w.value.length) * t)) + l.value.slot * 0.4 / (u.value.stacked ? 1 : w.value.length),
+            (e.coordinatesLine[o].value < 0 ? u.value.stacked ? e.localZero : m.value.zero : e.coordinatesLine[o].y) + a.value.style.chart.dataLabels.offsetY,
             {
               align: "center",
               font: `${Math.round(y.value / 40 * a.value.style.chart.dataLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
@@ -661,7 +661,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
         }
       ) : va(
         s.value,
-        [{ x: e.coordinatesLine[0].x, y: b.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: b.value.zero }],
+        [{ x: e.coordinatesLine[0].x, y: m.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: m.value.zero }],
         {
           fillColor: ie(e.color, a.value.style.chart.area.opacity),
           strokeColor: "transparent"
@@ -689,7 +689,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
     function te() {
       Ma(), H.value ? (v.value !== null && a.value.style.chart.selector.show && qe(), Aa(), u.value.stacked && a.value.style.chart.grid.x.showAxis && Ha(), $a.value.forEach((e) => {
         (e.type === "line" || !e.type) && Da(e), V.value && (Ta(e), u.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Pa(e));
-      }), me.value = hl(T.value)) : (me.value && (s.value.clearRect(0, 0, 1e4, 1e4), s.value.drawImage(me.value, 0, 0)), v.value !== null && a.value.style.chart.selector.show && qe(), v.value !== null && h.value.forEach((e) => {
+      }), be.value = hl(T.value)) : (be.value && (s.value.clearRect(0, 0, 1e4, 1e4), s.value.drawImage(be.value, 0, 0)), v.value !== null && a.value.style.chart.selector.show && qe(), v.value !== null && h.value.forEach((e) => {
         if (e.type === "line" || !e.type || e.type === "plot") {
           if (!e.coordinatesLine[v.value]) return;
           e.coordinatesLine[v.value].x !== void 0 && e.coordinatesLine[v.value].y !== void 0 && ia(
@@ -723,7 +723,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       }
       const c = n * 2 - l.value.left;
       if (v.value = Math.floor(c / l.value.slot), ve.value = !0, !V.value) return;
-      let w = "";
+      let k = "";
       const i = a.value.style.chart.tooltip.customFormat;
       na(i) && nl(() => i({
         seriesIndex: v.value,
@@ -747,7 +747,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
         })),
         series: h.value,
         config: a.value
-      }) : (a.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[v.value] && (w += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${a.value.style.chart.tooltip.borderColor}; width:100%">${a.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[v.value]}</div>`), w += za.value.join(""), ce.value = w), V.value = !1;
+      }) : (a.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[v.value] && (k += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${a.value.style.chart.tooltip.borderColor}; width:100%">${a.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[v.value]}</div>`), k += za.value.join(""), ce.value = k), V.value = !1;
     }
     A(() => v.value, (e) => {
       he();
@@ -799,7 +799,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
     function Je(e) {
       La("selectLegend", h.value.find((t) => t.absoluteIndex === e)), $.value.includes(e) ? $.value = $.value.filter((t) => t !== e) : $.value.push(e), H.value = !0, he();
     }
-    const Ke = k(() => Z.value.map((e, t) => ({
+    const Ke = C(() => Z.value.map((e, t) => ({
       ...e,
       name: e.name,
       color: sa(e.color) || Ve.value[t] || _[t] || _[t % _.length],
@@ -812,19 +812,19 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       opacity: $.value.includes(e.absoluteIndex) ? 0.5 : 1,
       segregate: () => Je(e.absoluteIndex),
       isSegregated: $.value.includes(e.absoluteIndex)
-    }))), Ua = k(() => ({
+    }))), Ua = C(() => ({
       cy: "donut-div-legend",
       backgroundColor: a.value.style.chart.legend.backgroundColor,
       color: a.value.style.chart.legend.color,
       fontSize: a.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: a.value.style.chart.legend.bold ? "bold" : ""
-    })), ye = k(() => {
+    })), ye = C(() => {
       const e = [""].concat(h.value.map((c) => c.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 t = [];
       for (let c = 0; c < I.value; c += 1) {
-        const w = h.value.map((i) => i.series[c] ?? 0).reduce((i, f) => i + f, 0);
-        t.push([a.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[c] ?? c + 1].concat(h.value.map((i) => (i.series[c] ?? 0).toFixed(a.value.table.rounding))).concat((w ?? 0).toFixed(a.value.table.rounding)));
+        const k = h.value.map((i) => i.series[c] ?? 0).reduce((i, f) => i + f, 0);
+        t.push([a.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[c] ?? c + 1].concat(h.value.map((i) => (i.series[c] ?? 0).toFixed(a.value.table.rounding))).concat((k ?? 0).toFixed(a.value.table.rounding)));
       }
       const o = {
         th: {
@@ -840,7 +840,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
         breakpoint: a.value.table.responsiveBreakpoint
       }, n = [a.value.table.columnNames.period].concat(h.value.map((c) => c.name)).concat(a.value.table.columnNames.total);
       return { head: e, body: t.slice(0, r.value.end - r.value.start), config: o, colNames: n };
-    }), Qe = k(() => {
+    }), Qe = C(() => {
       if (h.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
       const e = h.value.map((o) => ({
         label: o.name,
@@ -855,9 +855,9 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       }
       return { head: e, body: t };
     });
-    function ea() {
-      const e = [[a.value.style.chart.title.text], [a.value.style.chart.title.subtitle.text], [""]], t = ["", ...Qe.value.head.map((w) => w.label)], o = Qe.value.body, n = e.concat([t]).concat(o), c = ul(n);
-      sl({ csvContent: c, title: a.value.style.chart.title.text || "vue-ui-xy-canvas" });
+    function ea(e = null) {
+      const t = [[a.value.style.chart.title.text], [a.value.style.chart.title.subtitle.text], [""]], o = ["", ...Qe.value.head.map((i) => i.label)], n = Qe.value.body, c = t.concat([o]).concat(n), k = ul(c);
+      e ? e(k) : sl({ csvContent: k, title: a.value.style.chart.title.text || "vue-ui-xy-canvas" });
     }
     function Wa() {
       return h.value;
@@ -892,7 +892,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       style: K(`width:100%; position:relative; ${a.value.responsive ? "height: 100%" : ""}`),
       ref_key: "xy",
       ref: ae,
-      id: `xy_canvas_${be.value}`,
+      id: `xy_canvas_${me.value}`,
       class: Va(`vue-ui-donut ${de.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       onMouseenter: t[5] || (t[5] = () => p(He)(!0)),
       onMouseleave: t[6] || (t[6] = () => p(He)(!1))
@@ -903,7 +903,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
         ref: Ee,
         style: K(`width:100%;background:${a.value.style.chart.backgroundColor};`)
       }, [
-        (z(), D(bl, {
+        (z(), D(ml, {
           key: `title_${xe.value}`,
           config: {
             title: {
@@ -917,14 +917,14 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
           }
         }, null, 8, ["config"]))
       ], 4)) : U("", !0),
-      a.value.userOptions.show && Ce.value && (p(Ne) || p(we)) ? (z(), D(p(ma), {
+      a.value.userOptions.show && Ce.value && (p(Ne) || p(we)) ? (z(), D(p(ba), {
         ref: "details",
         key: `user_option_${Pe.value}`,
         backgroundColor: a.value.style.chart.backgroundColor,
         color: a.value.style.chart.color,
         isPrinting: p(We),
         isImaging: p(Xe),
-        uid: be.value,
+        uid: me.value,
         hasTooltip: a.value.userOptions.buttons.tooltip && a.value.style.chart.tooltip.show,
         hasPdf: a.value.userOptions.buttons.pdf,
         hasImg: a.value.userOptions.buttons.img,
@@ -957,70 +957,70 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       }, Za({ _: 2 }, [
         e.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: m(({ isOpen: o, color: n }) => [
+          fn: b(({ isOpen: o, color: n }) => [
             x(e.$slots, "menuIcon", W(X({ isOpen: o, color: n })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: m(() => [
+          fn: b(() => [
             x(e.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: m(() => [
+          fn: b(() => [
             x(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: m(() => [
+          fn: b(() => [
             x(e.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
-          fn: m(() => [
+          fn: b(() => [
             x(e.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.$slots.optionTable ? {
           name: "optionTable",
-          fn: m(() => [
+          fn: b(() => [
             x(e.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         e.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: m(() => [
+          fn: b(() => [
             x(e.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         e.$slots.optionStack ? {
           name: "optionStack",
-          fn: m(() => [
+          fn: b(() => [
             x(e.$slots, "optionStack", {}, void 0, !0)
           ]),
           key: "7"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: m(({ toggleFullscreen: o, isFullscreen: n }) => [
+          fn: b(({ toggleFullscreen: o, isFullscreen: n }) => [
             x(e.$slots, "optionFullscreen", W(X({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: m(({ toggleAnnotator: o, isAnnotator: n }) => [
+          fn: b(({ toggleAnnotator: o, isAnnotator: n }) => [
             x(e.$slots, "optionAnnotator", W(X({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
           ]),
           key: "9"
@@ -1057,7 +1057,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
             }
           }
         }, null, 8, ["config"])),
-        Ga(p(ba), {
+        Ga(p(ma), {
           show: u.value.showTooltip && ve.value,
           backgroundColor: a.value.style.chart.tooltip.backgroundColor,
           color: a.value.style.chart.tooltip.color,
@@ -1073,10 +1073,10 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
           backgroundOpacity: a.value.style.chart.tooltip.backgroundOpacity,
           isCustom: p(na)(a.value.style.chart.tooltip.customFormat)
         }, {
-          "tooltip-before": m(() => [
+          "tooltip-before": b(() => [
             x(e.$slots, "tooltip-before", W(X({ ...Oe.value })), void 0, !0)
           ]),
-          "tooltip-after": m(() => [
+          "tooltip-after": b(() => [
             x(e.$slots, "tooltip-after", W(X({ ...Oe.value })), void 0, !0)
           ]),
           _: 3
@@ -1088,7 +1088,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
         style: K(`width:100%;background:${a.value.style.chart.backgroundColor}`),
         "data-dom-to-png-ignore": ""
       }, [
-        a.value.style.chart.zoom.show && I.value > 1 ? (z(), D(ml, {
+        a.value.style.chart.zoom.show && I.value > 1 ? (z(), D(bl, {
           ref_key: "slicerComponent",
           ref: G,
           key: `slicer_${Re.value}`,
@@ -1115,7 +1115,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
           enableSelectionDrag: a.value.style.chart.zoom.enableSelectionDrag,
           onReset: Ge
         }, {
-          "reset-action": m(({ reset: o }) => [
+          "reset-action": b(({ reset: o }) => [
             x(e.$slots, "reset-action", W(X({ reset: o })), void 0, !0)
           ]),
           _: 3
@@ -1131,7 +1131,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
           key: `legend_${ke.value}`,
           onClickMarker: t[3] || (t[3] = ({ i: o }) => Je(o))
         }, {
-          item: m(({ legend: o, index: n }) => [
+          item: b(({ legend: o, index: n }) => [
             ne("div", {
               onClick: (c) => o.segregate(),
               style: K(`opacity:${$.value.includes(n) ? 0.5 : 1}`)
@@ -1170,7 +1170,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
           }
         }
       }, {
-        content: m(() => [
+        content: b(() => [
           (z(), D(p(fa), {
             key: `table_${Le.value}`,
             colNames: ye.value.colNames,
@@ -1180,10 +1180,10 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
             title: `${a.value.style.chart.title.text}${a.value.style.chart.title.subtitle.text ? ` : ${a.value.style.chart.title.subtitle.text}` : ""}`,
             onClose: t[4] || (t[4] = (o) => u.value.showTable = !1)
           }, {
-            th: m(({ th: o }) => [
+            th: b(({ th: o }) => [
               ne("div", { innerHTML: o }, null, 8, wl)
             ]),
-            td: m(({ td: o }) => [
+            td: b(({ td: o }) => [
               ja(ua(o), 1)
             ]),
             _: 1
@@ -1201,7 +1201,7 @@ const Ll = ["id"], kl = ["onClick"], Cl = {
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : U("", !0)
     ], 46, Ll));
   }
-}, Dl = /* @__PURE__ */ xl(zl, [["__scopeId", "data-v-e72e8115"]]);
+}, Dl = /* @__PURE__ */ xl(zl, [["__scopeId", "data-v-3390327e"]]);
 export {
   Dl as default
 };

package/package.json

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