vue-data-ui 2.7.4 → 2.7.6-beta.0

package/dist/{vue-ui-xy-canvas-BpblELcE.js → vue-ui-xy-canvas-DHn7SPRK.js}

@@ -1,19 +1,19 @@
-import { ref as c, computed as R, onMounted as ot, nextTick as Oe, onBeforeUnmount as $t, watch as Q, createElementBlock as M, openBlock as w, Fragment as je, createCommentVNode as Z, normalizeClass as ve, createElementVNode as W, withDirectives as gt, normalizeStyle as X, createVNode as me, toDisplayString as Ke, unref as D, vModelText as pt, withModifiers as mt, renderList as bt, useSlots as Gt, createBlock as ie, createSlots as Zt, withCtx as A, renderSlot as P, normalizeProps as ye, guardReactiveProps as ge, createTextVNode as qt } from "vue";
-import { l as St, f as be, X as jt, u as _t, c as Kt, t as Qt, p as pe, a as Jt, C as _e, b as el, D as lt, i as Le, d as xt, $ as tl, J as ll, ai as al, o as ol, e as nl, x as kt, q as rl, r as ul, y as sl, s as Re } from "./index-D3VntmA9.js";
+import { ref as c, computed as R, onMounted as ot, nextTick as Oe, onBeforeUnmount as $t, watch as _, createElementBlock as M, openBlock as w, Fragment as je, createCommentVNode as Z, normalizeStyle as N, normalizeClass as ve, createElementVNode as W, withDirectives as gt, createVNode as me, toDisplayString as Qe, unref as D, vModelText as pt, withModifiers as mt, renderList as bt, useSlots as Gt, createBlock as ie, createSlots as Zt, withCtx as A, renderSlot as P, normalizeProps as ye, guardReactiveProps as ge, createTextVNode as qt } from "vue";
+import { l as St, f as be, X as jt, u as Kt, c as Qt, t as _t, p as pe, a as Jt, C as Ke, b as el, D as lt, i as Le, d as xt, $ as tl, J as ll, ai as al, o as ol, e as nl, x as kt, q as rl, r as ul, y as sl, s as Re } from "./index-CFNGWoG-.js";
 import { d as il, t as vl, u as cl, c as dl, a as Lt, l as F, r as at, b as ne, p as wt } from "./useResponsive-Cw4oZ8sQ.js";
-import { _ as hl } from "./Tooltip-3NNIdJ6N.js";
-import { L as fl } from "./Legend-CIjMjfNk.js";
-import { _ as yl } from "./Title-UjBqdYyD.js";
-import { S as gl } from "./Slicer-CqYLlNlU.js";
-import { u as pl, U as ml } from "./usePrinter-H3tAjGXs.js";
-import bl from "./vue-ui-accordion-DGJQIcdB.js";
-import { D as xl } from "./DataTable-DOKlm7k4.js";
-import kl from "./vue-ui-skeleton-pHcbvN3-.js";
-import { u as Ct } from "./useNestedProp-DTlOqz2P.js";
+import { _ as hl } from "./Tooltip-DzsG-nM2.js";
+import { L as fl } from "./Legend-DMevrWiD.js";
+import { _ as yl } from "./Title-L3SvCQfU.js";
+import { S as gl } from "./Slicer-BXhvESja.js";
+import { u as pl, U as ml } from "./usePrinter-DlDdG5QU.js";
+import bl from "./vue-ui-accordion-BVInR1D8.js";
+import { D as xl } from "./DataTable-DXHBxZCy.js";
+import kl from "./vue-ui-skeleton-Dexat5oZ.js";
+import { u as Ct } from "./useNestedProp-DHVUTEIl.js";
 import { u as Ll } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as wl } from "./useChartAccessibility-BWojgys7.js";
-import De from "./BaseIcon-BLhJaEYy.js";
-import { C as Cl } from "./ColorPicker-Dlg-p-yo.js";
+import De from "./BaseIcon-BRjEohPB.js";
+import { C as Cl } from "./ColorPicker-DKHOITuH.js";
 import { _ as zt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const $l = {
   class: /* @__PURE__ */ ve({
@@ -40,8 +40,8 @@ const $l = {
     }
   },
   emits: ["close"],
-  setup(S, { emit: Qe }) {
-    const J = S, Je = Qe, k = c([]), q = c([]), re = c("0 0 0 0"), H = c(J.color), f = c(1), p = c("draw"), L = c(null), ee = c(!1), d = c(null), j = c({ x: 0, y: 0 }), _ = c([""]), T = c({ row: 0, col: 0 }), N = c(16);
+  setup($, { emit: _e }) {
+    const J = $, Je = _e, k = c([]), q = c([]), re = c("0 0 0 0"), H = c(J.color), f = c(1), p = c("draw"), L = c(null), ee = c(!1), d = c(null), j = c({ x: 0, y: 0 }), K = c([""]), T = c({ row: 0, col: 0 }), B = c(16);
     let te = 1;
     function le() {
       return te++;
@@ -59,15 +59,15 @@ const $l = {
     function Ce(s) {
       if (!L.value || p.value !== "text" || ee.value) return;
       const { x: n, y: a } = we(s);
-      j.value = { x: n, y: a }, _.value = [""], T.value = { row: 0, col: 0 };
+      j.value = { x: n, y: a }, K.value = [""], T.value = { row: 0, col: 0 };
       const r = document.createElementNS("http://www.w3.org/2000/svg", "text");
-      r.setAttribute("x", n), r.setAttribute("y", a), r.setAttribute("fill", H.value), r.setAttribute("font-size", N.value), r.setAttribute("font-family", "sans-serif"), r.setAttribute("class", "vue-data-ui-doodle"), r.setAttribute("dominant-baseline", "hanging"), r.setAttribute("pointer-events", "all");
+      r.setAttribute("x", n), r.setAttribute("y", a), r.setAttribute("fill", H.value), r.setAttribute("font-size", B.value), r.setAttribute("font-family", "sans-serif"), r.setAttribute("class", "vue-data-ui-doodle"), r.setAttribute("dominant-baseline", "hanging"), r.setAttribute("pointer-events", "all");
       const v = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-      v.setAttribute("x", n), v.setAttribute("dy", "0"), v.textContent = "", r.appendChild(v), r.style.pointerEvents = "none", L.value.appendChild(r), d.value = r, ee.value = !0, window.addEventListener("keydown", $e), window.addEventListener("mousedown", ze, !0), ce(), Se();
+      v.setAttribute("x", n), v.setAttribute("dy", "0"), v.textContent = "", r.appendChild(v), r.style.pointerEvents = "none", r.style.userSelect = "none", L.value.appendChild(r), d.value = r, ee.value = !0, window.addEventListener("keydown", $e), window.addEventListener("mousedown", ze, !0), ce(), Se();
     }
     function $e(s) {
       if (!ee.value) return;
-      let { row: n, col: a } = T.value, r = _.value.slice(), v = !1;
+      let { row: n, col: a } = T.value, r = K.value.slice(), v = !1;
       if (s.key === "Enter") {
         const h = r[n], l = h.slice(0, a), z = h.slice(a);
         r.splice(n, 1, l, z), n += 1, a = 0, v = !0, s.preventDefault();
@@ -95,14 +95,14 @@ const $l = {
         Me(!0);
         return;
       } else s.key === "Tab" && s.preventDefault();
-      v && (_.value = r, T.value = { row: n, col: a }, ce(), Se());
+      v && (K.value = r, T.value = { row: n, col: a }, ce(), Se());
     }
     function ce() {
       const s = d.value, { x: n, y: a } = j.value;
       for (; s.firstChild; ) s.removeChild(s.firstChild);
-      _.value.forEach((r, v) => {
+      K.value.forEach((r, v) => {
         const h = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-        h.setAttribute("x", n), h.setAttribute("dy", v === 0 ? "0" : `${N.value * 1.2}`), h.textContent = r.length ? r : "​", s.appendChild(h);
+        h.setAttribute("x", n), h.setAttribute("dy", v === 0 ? "0" : `${B.value * 1.2}`), h.textContent = r.length ? r : "​", s.appendChild(h);
       });
     }
     function Se() {
@@ -110,7 +110,7 @@ const $l = {
       s && L.value.removeChild(s);
       const n = d.value;
       if (!n) return;
-      const { x: a, y: r } = j.value, { row: v, col: h } = T.value, l = N.value, z = n.childNodes[v];
+      const { x: a, y: r } = j.value, { row: v, col: h } = T.value, l = B.value, z = n.childNodes[v];
       if (!z) return;
       let I = z.textContent.slice(0, h);
       I.endsWith(" ") && (I += " ");
@@ -118,9 +118,9 @@ const $l = {
       y.setAttribute("x", a), y.setAttribute("y", r), y.setAttribute("font-size", l), y.setAttribute("font-family", "sans-serif"), y.textContent = I || "", L.value.appendChild(y);
       const E = y.getBBox();
       L.value.removeChild(y);
-      let $ = r + v * l * 1.2, g = a + E.width;
+      let S = r + v * l * 1.2, g = a + E.width;
       const i = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      i.setAttribute("x", g), i.setAttribute("y", $), i.setAttribute("width", 1), i.setAttribute("height", l), i.setAttribute("fill", H.value), i.setAttribute("class", "vue-data-ui-svg-caret"), L.value.appendChild(i);
+      i.setAttribute("x", g), i.setAttribute("y", S), i.setAttribute("width", 1), i.setAttribute("height", l), i.setAttribute("fill", H.value), i.setAttribute("class", "vue-data-ui-svg-caret"), L.value.appendChild(i);
     }
     function ze(s) {
       if (d.value && !d.value.contains(s.target)) {
@@ -133,7 +133,7 @@ const $l = {
       window.removeEventListener("keydown", $e), window.removeEventListener("mousedown", ze, !0);
       const n = (r = L.value) == null ? void 0 : r.querySelector(".vue-data-ui-svg-caret");
       n && L.value.removeChild(n);
-      const a = _.value.every(
+      const a = K.value.every(
         (v) => !v || v === "​"
       );
       s || a || k.value.push({
@@ -142,11 +142,11 @@ const $l = {
         x: j.value.x,
         y: j.value.y,
         color: H.value,
-        fontSize: N.value,
-        lines: _.value.map((v) => v)
-      }), d.value && L.value && L.value.contains(d.value) && L.value.removeChild(d.value), ee.value = !1, d.value = null, _.value = [""], T.value = { row: 0, col: 0 };
+        fontSize: B.value,
+        lines: K.value.map((v) => v)
+      }), d.value && L.value && L.value.contains(d.value) && L.value.removeChild(d.value), ee.value = !1, d.value = null, K.value = [""], T.value = { row: 0, col: 0 };
     }
-    const K = R(() => St(J.color, 0.6));
+    const Q = R(() => St(J.color, 0.6));
     function de({ width: s, height: n }) {
       re.value = `0 0 ${s} ${n}`;
     }
@@ -166,7 +166,7 @@ const $l = {
       }), L.value = U.value.querySelector("g");
     }), $t(() => {
       ue.value && ue.value.disconnect();
-    }), Q(
+    }), _(
       () => J.parent,
       (s) => {
         if (!s) return;
@@ -174,7 +174,7 @@ const $l = {
         de({ width: n, height: a });
       },
       { immediate: !0 }
-    ), Q(p, (s) => {
+    ), _(p, (s) => {
       var n, a;
       s === "text" ? (n = U.value) == null || n.addEventListener("mousedown", Ce) : (a = U.value) == null || a.removeEventListener("mousedown", Ce);
     });
@@ -199,7 +199,7 @@ const $l = {
         return s;
       const r = Te(a), v = [`M ${r[0]} ${r[1]}`];
       for (let z = 2; z < r.length - 2; z += 2) {
-        const I = r[z - 2], y = r[z - 1], E = r[z], $ = r[z + 1], g = (I + E) / 2, i = (y + $) / 2;
+        const I = r[z - 2], y = r[z - 1], E = r[z], S = r[z + 1], g = (I + E) / 2, i = (y + S) / 2;
         v.push(`Q ${I} ${y} ${g} ${i}`);
       }
       const h = r[r.length - 2], l = r[r.length - 1];
@@ -222,17 +222,17 @@ const $l = {
           if (r = z, r === "M" || r === "L")
             v = parseFloat(n[++l]), h = parseFloat(n[++l]), a += `${r}${v} ${h}`;
           else if (r === "Q") {
-            const I = parseFloat(n[++l]), y = parseFloat(n[++l]), E = parseFloat(n[++l]), $ = parseFloat(n[++l]);
-            I === v && y === h ? a += `t${E - v} ${$ - h}` : a += `q${I - v} ${y - h} ${E - v} ${$ - h}`, v = E, h = $;
+            const I = parseFloat(n[++l]), y = parseFloat(n[++l]), E = parseFloat(n[++l]), S = parseFloat(n[++l]);
+            I === v && y === h ? a += `t${E - v} ${S - h}` : a += `q${I - v} ${y - h} ${E - v} ${S - h}`, v = E, h = S;
           }
         } else {
           const I = parseFloat(z), y = parseFloat(n[++l]);
           if (r === "L") {
-            const E = I - v, $ = y - h;
-            E === 0 ? a += `v${$}` : $ === 0 ? a += `h${E}` : a += `l${E} ${$}`, v = I, h = y;
+            const E = I - v, S = y - h;
+            E === 0 ? a += `v${S}` : S === 0 ? a += `h${E}` : a += `l${E} ${S}`, v = I, h = y;
           } else if (r === "Q") {
-            const E = I, $ = y, g = parseFloat(n[++l]), i = parseFloat(n[++l]);
-            E === v && $ === h ? a += `t${g - v} ${i - h}` : a += `q${E - v} ${$ - h} ${g - v} ${i - h}`, v = g, h = i;
+            const E = I, S = y, g = parseFloat(n[++l]), i = parseFloat(n[++l]);
+            E === v && S === h ? a += `t${g - v} ${i - h}` : a += `q${E - v} ${S - h} ${g - v} ${i - h}`, v = g, h = i;
           }
         }
       }
@@ -272,58 +272,59 @@ const $l = {
     }
     const Ie = c(null);
     return (s, n) => (w(), M(je, null, [
-      S.active ? (w(), M("div", {
+      $.active ? (w(), M("div", {
         key: 0,
         "data-dom-to-png-ignore": "",
         class: ve({
           "vue-ui-pen-and-paper-actions": !0,
-          visible: S.active
-        })
+          visible: $.active
+        }),
+        style: N({ backgroundColor: $.backgroundColor })
       }, [
         W("button", {
           class: "vue-ui-pen-and-paper-action",
-          style: X({
-            backgroundColor: S.backgroundColor,
-            border: `1px solid ${K.value}`
+          style: N({
+            backgroundColor: $.backgroundColor,
+            border: `1px solid ${Q.value}`
           }),
           onClick: n[0] || (n[0] = (a) => Je("close"))
         }, [
           me(De, {
             name: "close",
-            stroke: S.color
+            stroke: $.color
           }, null, 8, ["stroke"])
         ], 4),
         W("button", $l, [
           me(Cl, {
             value: H.value,
             "onUpdate:value": n[1] || (n[1] = (a) => H.value = a),
-            backgroundColor: S.backgroundColor,
-            buttonBorderColor: K.value
+            backgroundColor: $.backgroundColor,
+            buttonBorderColor: Q.value
           }, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
         ]),
         W("button", {
           class: ve(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": p.value === "text" }]),
           onClick: n[2] || (n[2] = (a) => p.value = p.value === "text" ? "draw" : "text"),
-          style: X({
-            backgroundColor: S.backgroundColor,
-            border: `1px solid ${K.value}`
+          style: N({
+            backgroundColor: $.backgroundColor,
+            border: `1px solid ${Q.value}`
           })
         }, [
           me(De, {
             name: p.value === "draw" ? "annotator" : "text",
-            stroke: S.color
+            stroke: $.color
           }, null, 8, ["name", "stroke"]),
           W("div", {
-            style: X({
+            style: N({
               position: "absolute",
               bottom: "-20px",
-              color: K.value,
+              color: Q.value,
               width: "100%",
               textAlign: "center",
               fontSize: "12px"
             })
-          }, Ke(D(be)({
-            v: p.value === "draw" ? f.value : N.value,
+          }, Qe(D(be)({
+            v: p.value === "draw" ? f.value : B.value,
             s: "px",
             r: 1
           })), 5)
@@ -334,16 +335,16 @@ const $l = {
             "vue-ui-pen-and-paper-action-disabled": !k.value.length
           }),
           disabled: !k.value.length,
-          style: X({
-            backgroundColor: S.backgroundColor,
-            border: `1px solid ${K.value}`,
+          style: N({
+            backgroundColor: $.backgroundColor,
+            border: `1px solid ${Q.value}`,
             marginTop: "20px"
           }),
           onClick: Xe
         }, [
           me(De, {
             name: "restart",
-            stroke: S.color
+            stroke: $.color
           }, null, 8, ["stroke"])
         ], 14, Sl),
         W("button", {
@@ -351,15 +352,15 @@ const $l = {
             "vue-ui-pen-and-paper-action": !0,
             "vue-ui-pen-and-paper-action-disabled": !q.value.length
           }),
-          style: X({
-            backgroundColor: S.backgroundColor,
-            border: `1px solid ${K.value}`
+          style: N({
+            backgroundColor: $.backgroundColor,
+            border: `1px solid ${Q.value}`
           }),
           onClick: He
         }, [
           me(De, {
             name: "restart",
-            stroke: S.color,
+            stroke: $.color,
             style: { transform: "scaleX(-1)" }
           }, null, 8, ["stroke"])
         ], 6),
@@ -368,15 +369,15 @@ const $l = {
             "vue-ui-pen-and-paper-action": !0,
             "vue-ui-pen-and-paper-action-disabled": !k.value.length
           }, "vue-ui-pen-and-paper-action"]),
-          style: X({
-            backgroundColor: S.backgroundColor,
-            border: `1px solid ${K.value}`
+          style: N({
+            backgroundColor: $.backgroundColor,
+            border: `1px solid ${Q.value}`
           }),
           onClick: Ue
         }, [
           me(De, {
             name: "trash",
-            stroke: S.color
+            stroke: $.color
           }, null, 8, ["stroke"])
         ], 6),
         p.value === "draw" ? gt((w(), M("input", {
@@ -389,7 +390,7 @@ const $l = {
           max: 12,
           step: 0.1,
           "onUpdate:modelValue": n[3] || (n[3] = (a) => f.value = a),
-          style: X({ accentColor: S.color })
+          style: N({ accentColor: $.color })
         }, null, 4)), [
           [pt, f.value]
         ]) : Z("", !0),
@@ -402,12 +403,12 @@ const $l = {
           min: 3,
           max: 48,
           step: 0.1,
-          "onUpdate:modelValue": n[4] || (n[4] = (a) => N.value = a),
-          style: X({ accentColor: S.color })
+          "onUpdate:modelValue": n[4] || (n[4] = (a) => B.value = a),
+          style: N({ accentColor: $.color })
         }, null, 4)), [
-          [pt, N.value]
+          [pt, B.value]
         ]) : Z("", !0)
-      ], 2)) : Z("", !0),
+      ], 6)) : Z("", !0),
       (w(), M("svg", {
         "data-mode": p.value,
         ref_key: "svgElement",
@@ -416,7 +417,7 @@ const $l = {
         viewBox: re.value,
         class: ve({
           "vue-ui-pen-and-paper": !0,
-          inactive: !S.active
+          inactive: !$.active
         }),
         onMousedown: Ne,
         onMousemove: Be,
@@ -460,7 +461,7 @@ const $l = {
                 key: v,
                 x: a.x,
                 dy: v === 0 ? "0" : a.fontSize * 1.2
-              }, Ke(r.length ? r : "​"), 9, Al))), 128))
+              }, Qe(r.length ? r : "​"), 9, Al))), 128))
             ], 8, Il)) : Z("", !0)
           ], 64))), 128))
         ], 512),
@@ -475,7 +476,7 @@ const $l = {
       ], 42, zl))
     ], 64));
   }
-}, Fl = /* @__PURE__ */ zt(Pl, [["__scopeId", "data-v-c74c326e"]]), Rl = ["id"], Dl = ["onClick"], Ol = {
+}, Fl = /* @__PURE__ */ zt(Pl, [["__scopeId", "data-v-14478ba4"]]), Rl = ["id"], Dl = ["onClick"], Ol = {
   key: 2,
   class: "vue-data-ui-watermark"
 }, Nl = ["innerHTML"], Bl = {
@@ -495,8 +496,8 @@ const $l = {
     }
   },
   emits: ["selectLegend"],
-  setup(S, { expose: Qe, emit: J }) {
-    const { vue_ui_xy_canvas: Je } = _t(), k = S, q = c(Kt()), re = c(null), H = c(null), f = c(null), p = c(1), L = c(1), ee = c(!1), d = c(null), j = c(""), _ = c(null), T = c([]), N = c(1), te = c(!0), le = c(!0), we = c(null), Ce = c(0), $e = c(0), ce = c(!1), Se = c(null), ze = c(null), Me = c(null), K = c(null), de = c(0), ue = c(0), ae = c(0), O = c(null), U = R(() => !!k.dataset && k.dataset.length), Ne = J, Be = Gt();
+  setup($, { expose: _e, emit: J }) {
+    const { vue_ui_xy_canvas: Je } = Kt(), k = $, q = c(Qt()), re = c(null), H = c(null), f = c(null), p = c(1), L = c(1), ee = c(!1), d = c(null), j = c(""), K = c(null), T = c([]), B = c(1), te = c(!0), le = c(!0), we = c(null), Ce = c(0), $e = c(0), ce = c(!1), Se = c(null), ze = c(null), Me = c(null), Q = c(null), de = c(0), ue = c(0), ae = c(0), O = c(null), U = R(() => !!k.dataset && k.dataset.length), Ne = J, Be = Gt();
     ot(() => {
       Be["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
     });
@@ -515,12 +516,12 @@ const $l = {
           userConfig: Jt.vue_ui_xy_canvas[e.theme] || k.config,
           defaultConfig: e
         }),
-        customPalette: Qt[e.theme] || pe
-      } : o = e, k.config && _e(k.config, "style.chart.scale.min") ? o.style.chart.scale.min = k.config.style.chart.scale.min : o.style.chart.scale.min = null, k.config && _e(k.config, "style.chart.scale.max") ? o.style.chart.scale.max = k.config.style.chart.scale.max : o.style.chart.scale.max = null, k.config && _e(k.config, "style.chart.zoom.startIndex") ? o.style.chart.zoom.startIndex = k.config.style.chart.zoom.startIndex : o.style.chart.zoom.startIndex = null, k.config && _e(k.config, "style.chart.zoom.endIndex") ? o.style.chart.zoom.endIndex = k.config.style.chart.zoom.endIndex : o.style.chart.zoom.endIndex = null, o;
+        customPalette: _t[e.theme] || pe
+      } : o = e, k.config && Ke(k.config, "style.chart.scale.min") ? o.style.chart.scale.min = k.config.style.chart.scale.min : o.style.chart.scale.min = null, k.config && Ke(k.config, "style.chart.scale.max") ? o.style.chart.scale.max = k.config.style.chart.scale.max : o.style.chart.scale.max = null, k.config && Ke(k.config, "style.chart.zoom.startIndex") ? o.style.chart.zoom.startIndex = k.config.style.chart.zoom.startIndex : o.style.chart.zoom.startIndex = null, k.config && Ke(k.config, "style.chart.zoom.endIndex") ? o.style.chart.zoom.endIndex = k.config.style.chart.zoom.endIndex : o.style.chart.zoom.endIndex = null, o;
     }
-    Q(() => k.config, (e) => {
+    _(() => k.config, (e) => {
       t.value = Xe(), Te.value = !t.value.userOptions.showOnChartHover, et(), de.value += 1, ue.value += 1, ae.value += 1, a.value.showTable = t.value.table.show, a.value.showDataLabels = t.value.style.chart.dataLabels.show, a.value.stacked = t.value.style.chart.stacked, a.value.showTooltip = t.value.style.chart.tooltip.show;
-    }, { deep: !0 }), Q(() => k.dataset, () => {
+    }, { deep: !0 }), _(() => k.dataset, () => {
       et(), de.value += 1, ue.value += 1, ae.value += 1;
     }, { deep: !0 });
     const He = c(t.value.style.chart.aspectRatio), { isPrinting: Ue, isImaging: Ie, generatePdf: s, generateImage: n } = pl({
@@ -536,7 +537,7 @@ const $l = {
     function r(e) {
       ce.value = e, $e.value += 1;
     }
-    const v = R(() => el(t.value.customPalette)), h = R(() => $.value ? Math.max(...$.value.filter((e, o) => !T.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), l = R(() => {
+    const v = R(() => el(t.value.customPalette)), h = R(() => S.value ? Math.max(...S.value.filter((e, o) => !T.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), l = R(() => {
       const e = p.value - p.value * (t.value.style.chart.paddingProportions.left + t.value.style.chart.paddingProportions.right);
       return {
         canvasWidth: p.value,
@@ -553,13 +554,13 @@ const $l = {
     function z(e, o) {
       return e / o;
     }
-    function I({ hasAutoScale: e, series: o, min: u, max: m, scale: x, yOffset: Y, individualHeight: b, stackIndex: C = null }) {
+    function I({ hasAutoScale: e, series: o, min: u, max: m, scale: x, yOffset: X, individualHeight: b, stackIndex: C = null }) {
       return o.map((he, G) => {
         const se = x.min < 0 ? Math.abs(x.min) : 0, fe = z(he + se, se + x.max);
         let Pe, Fe;
         e && (Pe = x.min, Fe = z(he - Pe, x.max - Pe));
         let oe = 0;
-        return C === null ? oe = l.value.bottom - l.value.height * (e ? Fe : fe) : oe = l.value.bottom - Y - b * (e ? Fe : fe), {
+        return C === null ? oe = l.value.bottom - l.value.height * (e ? Fe : fe) : oe = l.value.bottom - X - b * (e ? Fe : fe), {
           x: l.value.left + l.value.slot * G + l.value.slot / 2,
           y: oe,
           value: he
@@ -567,7 +568,7 @@ const $l = {
       });
     }
     const y = R(() => {
-      const e = t.value.style.chart.scale.min !== null ? t.value.style.chart.scale.min : Math.min(...$.value.filter((b, C) => !T.value.includes(b.absoluteIndex)).flatMap((b) => b.series.slice(i.value.start, i.value.end))), o = t.value.style.chart.scale.max !== null ? t.value.style.chart.scale.max : Math.max(...$.value.filter((b, C) => !T.value.includes(b.absoluteIndex)).flatMap((b) => b.series.slice(i.value.start, i.value.end))), u = lt(e < 0 ? e : 0, o === e ? e + 1 < 0 ? 0 : e + 1 : o < 0 ? 0 : o, t.value.style.chart.scale.ticks), m = u.min < 0 ? Math.abs(u.min) : 0, x = l.value.bottom - l.value.height * (m / (u.max + m)), Y = u.ticks.map((b) => ({
+      const e = t.value.style.chart.scale.min !== null ? t.value.style.chart.scale.min : Math.min(...S.value.filter((b, C) => !T.value.includes(b.absoluteIndex)).flatMap((b) => b.series.slice(i.value.start, i.value.end))), o = t.value.style.chart.scale.max !== null ? t.value.style.chart.scale.max : Math.max(...S.value.filter((b, C) => !T.value.includes(b.absoluteIndex)).flatMap((b) => b.series.slice(i.value.start, i.value.end))), u = lt(e < 0 ? e : 0, o === e ? e + 1 < 0 ? 0 : e + 1 : o < 0 ? 0 : o, t.value.style.chart.scale.ticks), m = u.min < 0 ? Math.abs(u.min) : 0, x = l.value.bottom - l.value.height * (m / (u.max + m)), X = u.ticks.map((b) => ({
         y: l.value.bottom - l.value.height * ((b + m) / (u.max + m)),
         x: l.value.left - 8,
         value: b
@@ -577,7 +578,7 @@ const $l = {
         max: o,
         min: e,
         scale: u,
-        yLabels: Y,
+        yLabels: X,
         zero: x
       };
     }), E = R(() => g.value.map((e) => `
@@ -598,7 +599,7 @@ const $l = {
       { datapoint: e, seriesIndex: d.value }
     )}</span>
             </div>
-        `)), $ = R(() => k.dataset.map((e, o) => ({
+        `)), S = R(() => k.dataset.map((e, o) => ({
       ...e,
       series: tl({
         data: ll(e.series),
@@ -607,10 +608,10 @@ const $l = {
       absoluteIndex: o,
       color: xt(e.color || v.value[o] || pe[o] || pe[o % pe.length])
     })));
-    Q(h, (e) => {
+    _(h, (e) => {
       e && nt();
     });
-    const g = R(() => al($.value.filter((e, o) => !T.value.includes(e.absoluteIndex))).map((e, o) => ({
+    const g = R(() => al(S.value.filter((e, o) => !T.value.includes(e.absoluteIndex))).map((e, o) => ({
       ...e,
       series: e.series.slice(i.value.start, i.value.end)
     })).map((e, o) => {
@@ -619,9 +620,9 @@ const $l = {
       const x = {
         valueMin: u,
         valueMax: m
-      }, Y = e.scaleSteps || t.value.style.chart.scale.ticks;
+      }, X = e.scaleSteps || t.value.style.chart.scale.ticks;
       let b;
-      e.autoScaling ? b = lt(x.valueMin, x.valueMax, Y) : b = lt(x.valueMin < 0 ? x.valueMin : 0, x.valueMax <= 0 ? 0 : x.valueMax, Y);
+      e.autoScaling ? b = lt(x.valueMin, x.valueMax, X) : b = lt(x.valueMin < 0 ? x.valueMin : 0, x.valueMax <= 0 ? 0 : x.valueMax, X);
       const C = a.value.stacked ? l.value.height * (1 - e.cumulatedStackRatio) : 0, he = a.value.stacked ? l.value.height / t.value.style.chart.stackGap : 0, G = a.value.stacked ? l.value.height * e.stackRatio - he : l.value.height, se = b.min < 0 ? Math.abs(b.min) : 0;
       let fe;
       e.autoScaling && a.value.stacked && m <= 0 ? fe = l.value.bottom - C - G : fe = l.value.bottom - C - G * (se / (b.max + se));
@@ -669,12 +670,12 @@ const $l = {
       const o = h.value;
       return e > o ? o : e < 0 || t.value.style.chart.zoom.startIndex !== null && e < t.value.style.chart.zoom.startIndex ? t.value.style.chart.zoom.startIndex !== null ? t.value.style.chart.zoom.startIndex + 1 : 1 : e;
     }
-    const Tt = R(() => g.value.filter((e) => ["line", "plot", void 0].includes(e.type))), B = R(() => g.value.filter((e) => e.type === "bar"));
+    const Tt = R(() => g.value.filter((e) => ["line", "plot", void 0].includes(e.type))), Y = R(() => g.value.filter((e) => e.type === "bar"));
     function It() {
       if (!V.value)
         return;
       const e = H.value.offsetWidth, o = H.value.offsetHeight;
-      V.value.width = e * N.value * 2, V.value.height = o * N.value * 2, p.value = e * N.value * 2, L.value = o * N.value * 2, f.value.scale(N.value, N.value), Ae();
+      V.value.width = e * B.value * 2, V.value.height = o * B.value * 2, p.value = e * B.value * 2, L.value = o * B.value * 2, f.value.scale(B.value, B.value), Ae();
     }
     function At() {
       if (f.value.clearRect(0, 0, 1e4, 1e4), f.value.fillStyle = t.value.style.chart.backgroundColor, f.value.fillRect(0, 0, l.value.canvasWidth, l.value.canvasHeight), a.value.stacked)
@@ -1052,25 +1053,25 @@ const $l = {
       );
     }
     function Nt() {
-      B.value.forEach((e, o) => {
+      Y.value.forEach((e, o) => {
         for (let u = 0; u < e.coordinatesLine.length; u += 1)
           at(
             f.value,
             [
               {
-                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / B.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * B.value.length) * o)),
+                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / Y.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * Y.value.length) * o)),
                 y: a.value.stacked ? e.localZero : y.value.zero
               },
               {
-                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / B.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * B.value.length) * o)) + l.value.slot * 0.8 / (a.value.stacked ? 1 : B.value.length),
+                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / Y.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * Y.value.length) * o)) + l.value.slot * 0.8 / (a.value.stacked ? 1 : Y.value.length),
                 y: a.value.stacked ? e.localZero : y.value.zero
               },
               {
-                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / B.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * B.value.length) * o)) + l.value.slot * 0.8 / (a.value.stacked ? 1 : B.value.length),
+                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / Y.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * Y.value.length) * o)) + l.value.slot * 0.8 / (a.value.stacked ? 1 : Y.value.length),
                 y: e.coordinatesLine[u].y
               },
               {
-                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / B.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * B.value.length) * o)),
+                x: l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / Y.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * Y.value.length) * o)),
                 y: e.coordinatesLine[u].y
               }
             ],
@@ -1105,7 +1106,7 @@ const $l = {
               }),
               { datapoint: e.coordinatesLine[u], seriesIndex: u }
             ),
-            l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / B.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * B.value.length) * o)) + l.value.slot * 0.4 / (a.value.stacked ? 1 : B.value.length),
+            l.value.left + l.value.slot * u + l.value.slot / 10 + (a.value.stacked ? 0 : l.value.slot / Y.value.length * o - (o === 0 ? 0 : l.value.slot / (5 * Y.value.length) * o)) + l.value.slot * 0.4 / (a.value.stacked ? 1 : Y.value.length),
             (e.coordinatesLine[u].value < 0 ? a.value.stacked ? e.localZero : y.value.zero : e.coordinatesLine[u].y) + t.value.style.chart.dataLabels.offsetY,
             {
               align: "center",
@@ -1189,7 +1190,7 @@ const $l = {
       }
       const x = m * 2 - l.value.left;
       if (d.value = Math.floor(x / l.value.slot), ee.value = !0, !le.value) return;
-      let Y = "";
+      let X = "";
       const b = t.value.style.chart.tooltip.customFormat;
       kt(b) && sl(() => b({
         seriesIndex: d.value,
@@ -1213,19 +1214,19 @@ const $l = {
         })),
         series: g.value,
         config: t.value
-      }) : (t.value.style.chart.grid.y.timeLabels.values.slice(i.value.start, i.value.end)[d.value] && (Y += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${t.value.style.chart.grid.y.timeLabels.values.slice(i.value.start, i.value.end)[d.value]}</div>`), Y += E.value.join(""), j.value = Y), le.value = !1;
+      }) : (t.value.style.chart.grid.y.timeLabels.values.slice(i.value.start, i.value.end)[d.value] && (X += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${t.value.style.chart.grid.y.timeLabels.values.slice(i.value.start, i.value.end)[d.value]}</div>`), X += E.value.join(""), j.value = X), le.value = !1;
     }
-    Q(() => d.value, (e) => {
+    _(() => d.value, (e) => {
       We();
-    }), Q(() => i.value, (e) => {
+    }), _(() => i.value, (e) => {
       te.value = !0, Ae();
     }, {
       deep: !0
-    }), Q(() => a.value.showDataLabels, (e) => {
+    }), _(() => a.value.showDataLabels, (e) => {
       te.value = !0, Ae();
-    }), Q(() => O.value, (e) => {
+    }), _(() => O.value, (e) => {
       e && Ae();
-    }), Q(() => a.value.stacked, (e) => {
+    }), _(() => a.value.stacked, (e) => {
       te.value = !0, le.value = !0, We();
     });
     function Ht() {
@@ -1246,7 +1247,7 @@ const $l = {
             title: t.value.style.chart.title.text ? Se.value : null,
             legend: t.value.style.chart.legend.show ? ze.value : null,
             slicer: t.value.style.chart.zoom.show && h.value > 1 ? Me.value : null,
-            source: K.value
+            source: Q.value
           });
           requestAnimationFrame(() => {
             He.value = `${o} / ${u}`;
@@ -1265,7 +1266,7 @@ const $l = {
     function st(e) {
       Ne("selectLegend", g.value.find((o) => o.absoluteIndex === e)), T.value.includes(e) ? T.value = T.value.filter((o) => o !== e) : T.value.push(e), te.value = !0, We();
     }
-    const it = R(() => $.value.map((e, o) => ({
+    const it = R(() => S.value.map((e, o) => ({
       ...e,
       name: e.name,
       color: xt(e.color) || v.value[o] || pe[o] || pe[o % pe.length],
@@ -1289,8 +1290,8 @@ const $l = {
       const e = [""].concat(g.value.map((x) => x.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 o = [];
       for (let x = 0; x < h.value; x += 1) {
-        const Y = g.value.map((b) => b.series[x] ?? 0).reduce((b, C) => b + C, 0);
-        o.push([t.value.style.chart.grid.y.timeLabels.values.slice(i.value.start, i.value.end)[x] ?? x + 1].concat(g.value.map((b) => (b.series[x] ?? 0).toFixed(t.value.table.rounding))).concat((Y ?? 0).toFixed(t.value.table.rounding)));
+        const X = g.value.map((b) => b.series[x] ?? 0).reduce((b, C) => b + C, 0);
+        o.push([t.value.style.chart.grid.y.timeLabels.values.slice(i.value.start, i.value.end)[x] ?? x + 1].concat(g.value.map((b) => (b.series[x] ?? 0).toFixed(t.value.table.rounding))).concat((X ?? 0).toFixed(t.value.table.rounding)));
       }
       const u = {
         th: {
@@ -1322,7 +1323,7 @@ const $l = {
       return { head: e, body: o };
     });
     function ct() {
-      const e = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], o = ["", ...vt.value.head.map((Y) => Y.label)], u = vt.value.body, m = e.concat([o]).concat(u), x = rl(m);
+      const e = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], o = ["", ...vt.value.head.map((X) => X.label)], u = vt.value.body, m = e.concat([o]).concat(u), x = rl(m);
       ul({ csvContent: x, title: t.value.style.chart.title.text || "vue-ui-xy-canvas" });
     }
     function Wt() {
@@ -1344,7 +1345,7 @@ const $l = {
     function tt() {
       qe.value = !qe.value;
     }
-    return Qe({
+    return _e({
       getData: Wt,
       generateCsv: ct,
       generatePdf: s,
@@ -1355,7 +1356,7 @@ const $l = {
       toggleTooltip: yt,
       toggleAnnotator: tt
     }), (e, o) => (w(), M("div", {
-      style: X(`width:100%; position:relative; ${t.value.responsive ? "height: 100%" : ""}`),
+      style: N(`width:100%; position:relative; ${t.value.responsive ? "height: 100%" : ""}`),
       ref_key: "xy",
       ref: re,
       id: `xy_canvas_${q.value}`,
@@ -1367,7 +1368,7 @@ const $l = {
         key: 0,
         ref_key: "chartTitle",
         ref: Se,
-        style: X(`width:100%;background:${t.value.style.chart.backgroundColor};`)
+        style: N(`width:100%;background:${t.value.style.chart.backgroundColor};`)
       }, [
         (w(), ie(yl, {
           key: `title_${de.value}`,
@@ -1396,7 +1397,7 @@ const $l = {
         hasImg: t.value.userOptions.buttons.img,
         hasXls: t.value.userOptions.buttons.csv,
         hasLabel: t.value.userOptions.buttons.labels,
-        hasStack: S.dataset.length > 1 && t.value.userOptions.buttons.stack,
+        hasStack: $.dataset.length > 1 && t.value.userOptions.buttons.stack,
         hasFullscreen: t.value.userOptions.buttons.fullscreen,
         hasTable: i.value.end - i.value.start < 200 && t.value.userOptions.buttons.table,
         isFullscreen: ce.value,
@@ -1416,7 +1417,7 @@ const $l = {
         onToggleStack: ft,
         onToggleTooltip: yt,
         onToggleAnnotator: tt,
-        style: X({
+        style: N({
           visibility: D(xe) ? D(Te) ? "visible" : "hidden" : "visible"
         })
       }, Zt({ _: 2 }, [
@@ -1493,7 +1494,7 @@ const $l = {
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : Z("", !0),
       W("div", {
         class: "vue-ui-xy-canvas",
-        style: X(`position: relative; aspect-ratio: ${He.value}`),
+        style: N(`position: relative; aspect-ratio: ${He.value}`),
         ref_key: "container",
         ref: H
       }, [
@@ -1539,10 +1540,10 @@ const $l = {
           isCustom: D(kt)(t.value.style.chart.tooltip.customFormat)
         }, {
           "tooltip-before": A(() => [
-            P(e.$slots, "tooltip-before", ye(ge({ ..._.value })), void 0, !0)
+            P(e.$slots, "tooltip-before", ye(ge({ ...K.value })), void 0, !0)
           ]),
           "tooltip-after": A(() => [
-            P(e.$slots, "tooltip-after", ye(ge({ ..._.value })), void 0, !0)
+            P(e.$slots, "tooltip-after", ye(ge({ ...K.value })), void 0, !0)
           ]),
           _: 3
         }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom"])
@@ -1550,7 +1551,7 @@ const $l = {
       W("div", {
         ref_key: "chartSlicer",
         ref: Me,
-        style: X(`width:100%;background:${t.value.style.chart.backgroundColor}`),
+        style: N(`width:100%;background:${t.value.style.chart.backgroundColor}`),
         "data-dom-to-png-ignore": ""
       }, [
         t.value.style.chart.zoom.show && h.value > 1 ? (w(), ie(gl, {
@@ -1599,8 +1600,8 @@ const $l = {
           item: A(({ legend: u, index: m }) => [
             W("div", {
               onClick: (x) => u.segregate(),
-              style: X(`opacity:${T.value.includes(m) ? 0.5 : 1}`)
-            }, Ke(u.name), 13, Dl)
+              style: N(`opacity:${T.value.includes(m) ? 0.5 : 1}`)
+            }, Qe(u.name), 13, Dl)
           ]),
           _: 1
         }, 8, ["legendSet", "config"])) : P(e.$slots, "legend", {
@@ -1614,7 +1615,7 @@ const $l = {
       e.$slots.source ? (w(), M("div", {
         key: 3,
         ref_key: "source",
-        ref: K,
+        ref: Q,
         dir: "auto"
       }, [
         P(e.$slots, "source", {}, void 0, !0)
@@ -1649,7 +1650,7 @@ const $l = {
               W("div", { innerHTML: u }, null, 8, Nl)
             ]),
             td: A(({ td: u }) => [
-              qt(Ke(u), 1)
+              qt(Qe(u), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))