vue-data-ui 3.17.9 → 3.17.11

package/dist/{vue-ui-xy-canvas--zevqB3i.js → vue-ui-xy-canvas-DLvVyHZO.js}

@@ -1,6 +1,6 @@
-import { defineAsyncComponent as ze, ref as c, computed as g, useSlots as vl, onMounted as Ja, toRefs as cl, watch as E, nextTick as Te, onBeforeUnmount as sa, watchEffect as ua, shallowRef as na, openBlock as I, createElementBlock as $e, normalizeClass as dl, normalizeStyle as ve, createElementVNode as H, toDisplayString as Ae, createBlock as q, createCommentVNode as W, unref as z, createSlots as Qa, withCtx as b, renderSlot as C, normalizeProps as j, guardReactiveProps as G, createVNode as et, Teleport as hl, resolveDynamicComponent as fl, mergeProps as ml, createTextVNode as at } from "vue";
+import { defineAsyncComponent as ze, ref as c, computed as g, useSlots as vl, onMounted as Ja, toRefs as cl, watch as E, nextTick as Te, onBeforeUnmount as sa, watchEffect as ua, shallowRef as na, openBlock as I, createElementBlock as $e, normalizeClass as dl, normalizeStyle as ve, createElementVNode as W, toDisplayString as Ae, createBlock as q, createCommentVNode as N, unref as z, createSlots as Qa, withCtx as b, renderSlot as C, normalizeProps as j, guardReactiveProps as G, createVNode as et, Teleport as hl, resolveDynamicComponent as fl, mergeProps as ml, createTextVNode as at } from "vue";
 import { j as yl, t as tt, m as gl, p as se, $ as pl, n as bl, D as ra, k as ce, l as de, s as lt, H as xl, a8 as Ll, J as Cl, o as kl, q as wl, T as ia, u as Ie, x as Sl, a0 as zl, a1 as Tl, U as ot } from "./lib-DMzrGQHK.js";
-import { c as $l, a as va, d as Al, t as Il, u as Ml, l as T, r as Ve, b as Q, p as st } from "./useResponsive-DfdjqQps.js";
+import { c as $l, a as va, d as Al, t as Il, u as Ml, l as T, r as _e, b as Q, p as st } from "./useResponsive-DfdjqQps.js";
 import { u as Fl, a as ut, b as Pl } from "./useTimeLabels-Cv0tD9In.js";
 import { u as Rl } from "./useConfig-B70q17MC.js";
 import { u as Dl, B as Ol } from "./BaseScanner-C2j3TsSY.js";
@@ -11,8 +11,8 @@ import { u as Bl } from "./useUserOptionState-B7Ej974k.js";
 import { u as Hl } from "./useChartAccessibility-cp6XQtqi.js";
 import Wl from "./img-CjTQXS0U.js";
 import Xl from "./vue_ui_xy_canvas-6BBDSowT.js";
-import _l from "./Legend-DGN5lY60.js";
-import Vl from "./Title-BbKoiBk2.js";
+import Vl from "./Legend-DGN5lY60.js";
+import _l from "./Title-BbKoiBk2.js";
 import Ul from "./BaseIcon-DX0hTWa-.js";
 import Yl from "./vue-ui-accordion-_zwPlx0H.js";
 import { S as ql } from "./SlicerPreview-D_CgrN_7.js";
@@ -58,7 +58,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       () => import("./NonSvgPenAndPaper-B6E0zEYe.js")
     ), ht = ze(
       () => import("./BaseDraggableDialog-Di8Hlru3.js")
-    ), { vue_ui_xy_canvas: ft } = Rl(), { isThemeValid: mt, warnInvalidTheme: yt } = Nl(), D = ca, Z = c(yl()), K = c(null), ue = c(null), v = c(null), y = c(1), ee = c(1), he = c(!1), h = c(null), fe = c(""), Me = c(null), p = c([]), ne = c(1), N = c(!0), X = c(!0), Fe = c(null), da = c(0), me = c(!1), ha = c(null), fa = c(null), ae = c(null), ma = c(null), Ye = c(0), qe = c(0), je = c(0), _ = c(null), ya = c(!1), ye = c(null), Ge = c(null), ge = c(!1), ga = c(!1), Pe = c(!1), $ = c(null), Ze = c(!1), Re = c(!1), Ke = c(!1), V = c(null), pa = c({ x: 0, y: 0 }), U = g(
+    ), { vue_ui_xy_canvas: ft } = Rl(), { isThemeValid: mt, warnInvalidTheme: yt } = Nl(), D = ca, Z = c(yl()), K = c(null), ue = c(null), v = c(null), y = c(1), ee = c(1), he = c(!1), h = c(null), fe = c(""), Me = c(null), p = c([]), ne = c(1), B = c(!0), X = c(!0), Fe = c(null), da = c(0), me = c(!1), ha = c(null), fa = c(null), ae = c(null), ma = c(null), Ye = c(0), qe = c(0), je = c(0), V = c(null), ya = c(!1), ye = c(null), Ge = c(null), ge = c(!1), ga = c(!1), Pe = c(!1), $ = c(null), Ze = c(!1), Re = c(!1), Ke = c(!1), _ = c(null), pa = c({ x: 0, y: 0 }), U = g(
       () => Array.isArray(Je.value) && Je.value.length > 0
     ), De = rt, gt = vl();
     Ja(() => {
@@ -72,12 +72,12 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       ).length;
       return `${e}. ${l} series. ${t} visible data points.`;
     }), bt = g(() => {
-      if (V.value === null) return "";
-      const e = V.value + s.value.start, t = a.value.style.chart.grid.x.timeLabels.values.slice(
+      if (_.value === null) return "";
+      const e = _.value + s.value.start, t = a.value.style.chart.grid.x.timeLabels.values.slice(
         s.value.start,
         s.value.end
-      )[V.value] ? a.value.style.chart.tooltip.useDefaultTimeFormat ? w.value.slice(s.value.start, s.value.end)[V.value]?.text : Be.value[V.value]?.text : w.value[e]?.text ?? `Point ${e + 1}`, l = f.value.filter((u) => !p.value.includes(u.absoluteIndex)).map((u) => {
-        const n = u.series[V.value], i = n?.value ?? n ?? null;
+      )[_.value] ? a.value.style.chart.tooltip.useDefaultTimeFormat ? w.value.slice(s.value.start, s.value.end)[_.value]?.text : Be.value[_.value]?.text : w.value[e]?.text ?? `Point ${e + 1}`, l = f.value.filter((u) => !p.value.includes(u.absoluteIndex)).map((u) => {
+        const n = u.series[_.value], i = n?.value ?? n ?? null;
         return `${u.name}: ${i}`;
       }).join(". ");
       return `${t}. ${l}.`;
@@ -196,7 +196,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     E(
       () => D.config,
       (e) => {
-        Oe.value || (a.value = ea()), Qe.value = !a.value.userOptions.showOnChartHover, _a(), Ye.value += 1, qe.value += 1, je.value += 1, d.value.showTable = a.value.table.show, d.value.showDataLabels = a.value.style.chart.dataLabels.show, d.value.stacked = a.value.style.chart.stacked, d.value.showTooltip = a.value.style.chart.tooltip.show;
+        Oe.value || (a.value = ea()), Qe.value = !a.value.userOptions.showOnChartHover, Va(), Ye.value += 1, qe.value += 1, je.value += 1, d.value.showTable = a.value.table.show, d.value.showDataLabels = a.value.style.chart.dataLabels.show, d.value.stacked = a.value.style.chart.stacked, d.value.showTooltip = a.value.style.chart.tooltip.show;
       },
       { deep: !0 }
     ), E(
@@ -204,7 +204,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       async (e) => {
         !Array.isArray(e) || e.length === 0 || (await Te(), k.value && !v.value && (v.value = k.value.getContext("2d", {
           willReadFrequently: !0
-        })), N.value = !0, X.value = !0, await xe(), Ne(), Ye.value += 1, qe.value += 1, je.value += 1);
+        })), B.value = !0, X.value = !0, await xe(), Ne(), Ye.value += 1, qe.value += 1, je.value += 1);
       },
       { deep: !0 }
     );
@@ -242,8 +242,8 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       v.value.save(), v.value.font = i;
       let r = 0;
       for (let Y = t; Y < l; Y += 1) {
-        const B = e[Y]?.text ?? `${Y + 1}`, _e = v.value.measureText(String(B));
-        _e.width > r && (r = _e.width);
+        const H = e[Y]?.text ?? `${Y + 1}`, Ve = v.value.measureText(String(H));
+        Ve.width > r && (r = Ve.width);
       }
       v.value.restore();
       const L = (a.value.style.chart.grid.x.timeLabels.rotation || 0) * Math.PI / 180, x = n, S = Math.abs(Math.sin(L)) * r + Math.abs(Math.cos(L)) * x, R = a.value.style.chart.grid.x.timeLabels.offsetY || 1, oe = y.value / R;
@@ -296,10 +296,10 @@ const Zl = ["id"], Kl = ["id"], Jl = {
           L - oe,
           n.max - oe
         ));
-        let B = 0;
-        return m === null ? B = o.value.bottom - o.value.height * (e ? Y : R) : B = o.value.bottom - i - r * (e ? Y : R), {
+        let H = 0;
+        return m === null ? H = o.value.bottom - o.value.height * (e ? Y : R) : H = o.value.bottom - i - r * (e ? Y : R), {
           x: o.value.left + o.value.slot * x + o.value.slot / 2,
-          y: B,
+          y: H,
           value: L
         };
       });
@@ -391,7 +391,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       series: e.series.slice(s.value.start, s.value.end)
     })).map((e, t) => {
       let l = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, u = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
-      l === u && (l = l >= 0 ? u - 1 : l, u = u >= 0 ? u : l + 1), e.series.filter((B) => ![null, void 0].includes(B)).map((B) => (B - l) / (u - l));
+      l === u && (l = l >= 0 ? u - 1 : l, u = u >= 0 ? u : l + 1), e.series.filter((H) => ![null, void 0].includes(H)).map((H) => (H - l) / (u - l));
       const n = {
         valueMin: l,
         valueMax: u
@@ -409,10 +409,10 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       const m = d.value.stacked ? o.value.height * (1 - e.cumulatedStackRatio) : 0, L = d.value.stacked ? o.value.height / a.value.style.chart.stackGap : 0, x = d.value.stacked ? o.value.height * e.stackRatio - L : o.value.height, S = r.min < 0 ? Math.abs(r.min) : 0;
       let R;
       e.autoScaling && d.value.stacked && u <= 0 ? R = o.value.bottom - m - x : R = o.value.bottom - m - x * (S / (r.max + S));
-      const oe = r.ticks.map((B, _e) => ({
-        y: o.value.bottom - m - x * (_e / (r.ticks.length - 1)),
+      const oe = r.ticks.map((H, Ve) => ({
+        y: o.value.bottom - m - x * (Ve / (r.ticks.length - 1)),
         x: o.value.left - 8,
-        value: B
+        value: H
       })), Y = $t({
         hasAutoScale: d.value.stacked && e.autoScaling,
         series: e.series,
@@ -497,10 +497,10 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     }
     E(U, async (e) => {
       if (!e) {
-        Fe.value = null, he.value = !1, h.value = null, _.value = null;
+        Fe.value = null, he.value = !1, h.value = null, V.value = null;
         return;
       }
-      await Te(), k.value && !v.value && (v.value = k.value.getContext("2d", { willReadFrequently: !0 })), N.value = !0, X.value = !0, await xe(), Ne(), J();
+      await Te(), k.value && !v.value && (v.value = k.value.getContext("2d", { willReadFrequently: !0 })), B.value = !0, X.value = !0, await xe(), Ne(), J();
     });
     function Ot() {
       if (v.value && (v.value.clearRect(0, 0, 1e4, 1e4), v.value.fillStyle = a.value.style.chart.backgroundColor, v.value.fillRect(
@@ -550,7 +550,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
               );
           }), a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? f.value.forEach((e) => {
             e.localYLabels.forEach((t, l) => {
-              l < e.localYLabels.length - 1 && Ve(
+              l < e.localYLabels.length - 1 && _e(
                 v.value,
                 [
                   { x: o.value.left, y: t.y },
@@ -684,7 +684,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
                 }
               );
           a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? A.value.yLabels.forEach((e, t) => {
-            t < A.value.yLabels.length - 1 && Ve(
+            t < A.value.yLabels.length - 1 && _e(
               v.value,
               [
                 { x: o.value.left, y: e.y },
@@ -1001,11 +1001,11 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       );
     }
     function Xt() {
-      _.value && T(
+      V.value && T(
         v.value,
         [
-          { x: o.value.left, y: _.value },
-          { x: o.value.right, y: _.value }
+          { x: o.value.left, y: V.value },
+          { x: o.value.right, y: V.value }
         ],
         {
           color: a.value.style.chart.selector.color,
@@ -1014,10 +1014,10 @@ const Zl = ["id"], Kl = ["id"], Jl = {
         }
       );
     }
-    function _t() {
+    function Vt() {
       P.value.forEach((e, t) => {
         for (let l = 0; l < e.coordinatesLine.length; l += 1)
-          Ve(
+          _e(
             v.value,
             [
               {
@@ -1086,7 +1086,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
           );
       });
     }
-    function Vt(e, t) {
+    function _t(e, t) {
       const l = e.coordinatesLine.map((r, m) => {
         const L = e.series[m];
         return L != null && Number.isFinite(r?.y) ? r : null;
@@ -1149,7 +1149,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       if (e.useArea) {
         const l = d.value.stacked ? e.localZero : A.value.zero;
         if (t) {
-          const { polygons: u, singles: n } = Vt(e, l);
+          const { polygons: u, singles: n } = _t(e, l);
           for (const r of u)
             st(v.value, r, {
               fillColor: Ie(
@@ -1202,7 +1202,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     }
     function jt() {
       const { left: e, top: t, width: l, height: u } = o.value, n = s.value.start, r = s.value.end - n, m = l / r, L = F.value.start - n, x = F.value.end - n, S = Math.max(0, Math.min(r, L)), R = Math.max(0, Math.min(r, x));
-      Ve(
+      _e(
         v.value,
         [
           { x: e + S * m, y: t },
@@ -1224,7 +1224,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       );
     }
     function J() {
-      !U.value || !k.value || !v.value || (Ot(), N.value ? ((h.value !== null || $.value !== null) && a.value.style.chart.selector.show && Ba(), _t(), d.value.stacked && a.value.style.chart.grid.x.showAxis && qt(), Dt.value.forEach((e) => {
+      !U.value || !k.value || !v.value || (Ot(), B.value ? ((h.value !== null || $.value !== null) && a.value.style.chart.selector.show && Ba(), Vt(), d.value.stacked && a.value.style.chart.grid.x.showAxis && qt(), Dt.value.forEach((e) => {
         (e.type === "line" || !e.type) && Yt(e), X.value && (Et(e), d.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Ht(e));
       }), k.value && (Fe.value = $l(k.value))) : (Fe.value && (v.value.clearRect(0, 0, 1e4, 1e4), v.value.drawImage(Fe.value, 0, 0)), (h.value !== null || $.value !== null) && a.value.style.chart.selector.show && Ba(), (h.value !== null || $.value !== null) && f.value.forEach((e) => {
         const t = h.value ?? $.value, l = e.coordinatesLine[t];
@@ -1237,7 +1237,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
             fillStyle: e.color
           }
         );
-      })), a.value.style.chart.grid.x.timeLabels.show && Wt(), a.value.style.chart.selector.show && a.value.style.chart.selector.showHorizontalSelector && Xt(), Bt(), Nt(), a.value.style.chart.zoom.preview.enable && (s.value.start !== F.value.start || s.value.end !== F.value.end) && jt(), N.value = !1);
+      })), a.value.style.chart.grid.x.timeLabels.show && Wt(), a.value.style.chart.selector.show && a.value.style.chart.selector.showHorizontalSelector && Xt(), Bt(), Nt(), a.value.style.chart.zoom.preview.enable && (s.value.start !== F.value.start || s.value.end !== F.value.end) && jt(), B.value = !1);
     }
     const Le = Al(
       () => {
@@ -1257,12 +1257,12 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     function Gt(e) {
       if (!U.value || !k.value || aa.value) return;
       const { left: t, top: l } = k.value.getBoundingClientRect(), u = e.clientX - t;
-      if (_.value = (e.clientY - l) * 2, (_.value < o.value.top || _.value > o.value.bottom) && (_.value = null), u * 2 < o.value.left || u * 2 > o.value.right) {
+      if (V.value = (e.clientY - l) * 2, (V.value < o.value.top || V.value > o.value.bottom) && (V.value = null), u * 2 < o.value.left || u * 2 > o.value.right) {
         ke();
         return;
       }
       const n = u * 2 - o.value.left, i = Math.floor(n / o.value.slot);
-      if (h.value = i, V.value = i, he.value = !0, Re.value = !1, !X.value) return;
+      if (h.value = i, _.value = i, he.value = !0, Re.value = !1, !X.value) return;
       let r = "";
       const m = a.value.style.chart.tooltip.customFormat, L = f.value.map((x) => ({
         shape: x.shape || null,
@@ -1338,10 +1338,10 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       };
     }
     function Wa(e, { fromKeyboard: t = !1 } = {}) {
-      !U.value || aa.value || e != null && (e < 0 || e >= s.value.end - s.value.start || (h.value = e, V.value = e, he.value = !0, Re.value = t, fe.value = Kt(e), t && Jt(e), X.value = !1, J()));
+      !U.value || aa.value || e != null && (e < 0 || e >= s.value.end - s.value.start || (h.value = e, _.value = e, he.value = !0, Re.value = t, fe.value = Kt(e), t && Jt(e), X.value = !1, J()));
     }
     function ke() {
-      he.value = !1, h.value = null, V.value = null, fe.value = "", _.value = null, Re.value = !1, J();
+      he.value = !1, h.value = null, _.value = null, fe.value = "", V.value = null, Re.value = !1, J();
     }
     function Qt() {
       Ke.value = !0;
@@ -1356,7 +1356,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       const u = s.value.end - s.value.start;
       if (u <= 0) return;
       e.preventDefault(), e.stopPropagation();
-      let n = V.value;
+      let n = _.value;
       n !== null && n >= 0 && n < u ? l ? (n += 1, n >= u && (n = 0)) : (n -= 1, n < 0 && (n = u - 1)) : l ? n = 0 : n = u - 1, Wa(n, { fromKeyboard: !0 });
     }
     function Xa({ seriesIndex: e, datapoint: t }) {
@@ -1386,7 +1386,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     ), E(
       () => s.value,
       (e) => {
-        N.value = !0, J();
+        B.value = !0, J();
       },
       {
         deep: !0
@@ -1400,17 +1400,17 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     ), E(
       () => d.value.showDataLabels,
       (e) => {
-        N.value = !0, J();
+        B.value = !0, J();
       }
     ), E(
-      () => _.value,
+      () => V.value,
       (e) => {
         e && J();
       }
     ), E(
       () => d.value.stacked,
       (e) => {
-        N.value = !0, X.value = !0, Le();
+        B.value = !0, X.value = !0, Le();
       }
     );
     function tl() {
@@ -1418,13 +1418,13 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     }
     const te = na(null), re = na(null), ie = na(null);
     Ja(() => {
-      ya.value = !0, _a();
+      ya.value = !0, Va();
     });
-    function _a() {
+    function Va() {
       if (kl(D.dataset) && xt.value && wl({ componentName: "VueUiXyCanvas", type: "dataset" }), Te(() => {
         k.value && !v.value && (v.value = k.value.getContext("2d", {
           willReadFrequently: !0
-        })), v.value && U.value && (N.value = !0, X.value = !0, Ne());
+        })), v.value && U.value && (B.value = !0, X.value = !0, Ne());
       }), a.value.responsive) {
         const e = Il(() => {
           const { width: t, height: l } = Ml({
@@ -1442,7 +1442,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       }
       ie.value && ie.value.disconnect(), ie.value = new ResizeObserver(async (e) => {
         for (const t of e)
-          t.contentBoxSize && ue.value && (N.value = !0, Le());
+          t.contentBoxSize && ue.value && (B.value = !0, Le());
       }), ie.value.observe(ue.value), xe();
     }
     sa(() => {
@@ -1451,26 +1451,26 @@ const Zl = ["id"], Kl = ["id"], Jl = {
     function ll() {
       p.value.length ? p.value = [] : We.value.forEach((e, t) => {
         p.value.push(t);
-      }), N.value = !0, Le();
+      }), B.value = !0, Le();
     }
     function He(e) {
       De(
         "selectLegend",
         f.value.find((t) => t.absoluteIndex === e)
-      ), p.value.includes(e) ? p.value = p.value.filter((t) => t !== e) : p.value.push(e), N.value = !0, Le();
+      ), p.value.includes(e) ? p.value = p.value.filter((t) => t !== e) : p.value.push(e), B.value = !0, Le();
     }
-    function Va(e) {
+    function _a(e) {
       if (!M.value.length)
         return a.value.debug && console.warn("VueUiXyCanvas - There are no series to show."), null;
       const t = M.value.find((l) => l.name === e);
       return t || (a.value.debug && console.warn(`VueUiXyCanvas - Series name not found "${e}"`), null);
     }
     function ol(e) {
-      const t = Va(e);
+      const t = _a(e);
       t !== null && p.value.includes(t.absoluteIndex) && He(t.absoluteIndex);
     }
     function sl(e) {
-      const t = Va(e);
+      const t = _a(e);
       t !== null && (p.value.includes(t.absoluteIndex) || He(t.absoluteIndex));
     }
     const We = g(() => M.value.map((e, t) => ({
@@ -1700,20 +1700,20 @@ const Zl = ["id"], Kl = ["id"], Jl = {
       onMouseenter: Ct,
       onMouseleave: kt
     }, [
-      H("div", {
+      W("div", {
         id: `chart-instructions-${Z.value}`,
         class: "sr-only"
       }, [
-        H("p", null, Ae(a.value.a11y.translations.keyboardNavigation), 1)
+        W("p", null, Ae(a.value.a11y.translations.keyboardNavigation), 1)
       ], 8, Kl),
-      H("div", Jl, Ae(bt.value), 1),
+      W("div", Jl, Ae(bt.value), 1),
       a.value.style.chart.title.text ? (I(), $e("div", {
         key: 0,
         ref_key: "chartTitle",
         ref: ha,
         style: ve(`width:100%;background:${a.value.style.chart.backgroundColor};`)
       }, [
-        (I(), q(Vl, {
+        (I(), q(_l, {
           key: `title_${Ye.value}`,
           config: {
             title: {
@@ -1726,8 +1726,8 @@ const Zl = ["id"], Kl = ["id"], Jl = {
             }
           }
         }, null, 8, ["config"]))
-      ], 4)) : W("", !0),
-      H("div", {
+      ], 4)) : N("", !0),
+      W("div", {
         id: `legend-top-${Z.value}`
       }, null, 8, Ql),
       a.value.userOptions.show && U.value && (z(xa) || z(Qe)) ? (I(), q(z(ct), {
@@ -1851,14 +1851,14 @@ const Zl = ["id"], Kl = ["id"], Jl = {
           ]),
           key: "10"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasAltCopy", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : W("", !0),
-      H("div", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasAltCopy", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : N("", !0),
+      W("div", {
         class: "vue-ui-xy-canvas",
         style: ve(`position: relative; aspect-ratio: ${La.value}`),
         ref_key: "container",
         ref: ue
       }, [
-        H("canvas", {
+        W("canvas", {
           ref_key: "canvas",
           ref: k,
           "aria-label": pt.value,
@@ -1878,9 +1878,9 @@ const Zl = ["id"], Kl = ["id"], Jl = {
             hint: a.value.a11y.translations.keyboardNavigation,
             isVisible: Ke.value
           })), void 0, !0)
-        ])) : W("", !0),
+        ])) : N("", !0),
         C(e.$slots, "skeleton", {}, () => [
-          z(Oe) ? (I(), q(Ol, { key: 0 })) : W("", !0)
+          z(Oe) ? (I(), q(Ol, { key: 0 })) : N("", !0)
         ], !0),
         et(z(it), {
           teleportTo: a.value.style.chart.tooltip.teleportTo,
@@ -1982,54 +1982,53 @@ const Zl = ["id"], Kl = ["id"], Jl = {
           C(e.$slots, "reset-action", j(G({ reset: l })), 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", "maxWidth", "additionalMinimapHeight", "handleType", "handleIconColor", "handleBorderWidth", "handleBorderColor", "handleFill", "handleWidth"])) : W("", !0),
-      H("div", {
+      }, 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", "maxWidth", "additionalMinimapHeight", "handleType", "handleIconColor", "handleBorderWidth", "handleBorderColor", "handleFill", "handleWidth"])) : N("", !0),
+      W("div", {
         id: `legend-bottom-${Z.value}`
       }, null, 8, to),
-      ya.value ? (I(), q(hl, {
+      ya.value && (a.value.style.chart.legend.show || e.$slots.legend) ? (I(), q(hl, {
         key: 3,
         to: a.value.style.chart.legend.position === "top" ? `#legend-top-${Z.value}` : `#legend-bottom-${Z.value}`
       }, [
-        H("div", {
+        W("div", {
           ref_key: "chartLegend",
           ref: fa
         }, [
-          a.value.style.chart.legend.show && U.value ? (I(), q(_l, {
-            legendSet: We.value,
-            config: ul.value,
-            key: `legend_${je.value}`,
-            isCursorPointer: le.value,
-            onClickMarker: t[3] || (t[3] = ({ i: l }) => He(l))
-          }, {
-            item: b(({ legend: l, index: u }) => [
-              H("div", {
-                onClick: (n) => l.segregate(),
-                style: ve(`opacity:${p.value.includes(u) ? 0.5 : 1}`)
-              }, Ae(l.name), 13, lo)
-            ]),
-            legendToggle: b(() => [
-              We.value.length > 2 && a.value.style.chart.legend.selectAllToggle.show && !z(Oe) ? (I(), q(jl, {
-                key: 0,
-                backgroundColor: a.value.style.chart.legend.selectAllToggle.backgroundColor,
-                color: a.value.style.chart.legend.selectAllToggle.color,
-                fontSize: a.value.style.chart.legend.fontSize,
-                checked: p.value.length > 0,
-                isCursorPointer: le.value,
-                onToggle: ll
-              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : W("", !0)
-            ]),
-            _: 1
-          }, 8, ["legendSet", "config", "isCursorPointer"])) : C(e.$slots, "legend", {
-            key: 1,
-            legend: We.value
-          }, void 0, !0)
+          C(e.$slots, "legend", { legend: We.value }, () => [
+            a.value.style.chart.legend.show && U.value ? (I(), q(Vl, {
+              legendSet: We.value,
+              config: ul.value,
+              key: `legend_${je.value}`,
+              isCursorPointer: le.value,
+              onClickMarker: t[3] || (t[3] = ({ i: l }) => He(l))
+            }, {
+              item: b(({ legend: l, index: u }) => [
+                W("div", {
+                  onClick: (n) => l.segregate(),
+                  style: ve(`opacity:${p.value.includes(u) ? 0.5 : 1}`)
+                }, Ae(l.name), 13, lo)
+              ]),
+              legendToggle: b(() => [
+                We.value.length > 2 && a.value.style.chart.legend.selectAllToggle.show && !z(Oe) ? (I(), q(jl, {
+                  key: 0,
+                  backgroundColor: a.value.style.chart.legend.selectAllToggle.backgroundColor,
+                  color: a.value.style.chart.legend.selectAllToggle.color,
+                  fontSize: a.value.style.chart.legend.fontSize,
+                  checked: p.value.length > 0,
+                  isCursorPointer: le.value,
+                  onToggle: ll
+                }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : N("", !0)
+              ]),
+              _: 1
+            }, 8, ["legendSet", "config", "isCursorPointer"])) : N("", !0)
+          ], !0)
         ], 512)
-      ], 8, ["to"])) : W("", !0),
+      ], 8, ["to"])) : N("", !0),
       e.$slots.watermark ? (I(), $e("div", oo, [
         C(e.$slots, "watermark", j(G({
           isPrinting: z(Ca) || z(ka) || Ze.value
         })), void 0, !0)
-      ])) : W("", !0),
+      ])) : N("", !0),
       e.$slots.source ? (I(), $e("div", {
         key: 5,
         ref_key: "source",
@@ -2037,7 +2036,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
         dir: "auto"
       }, [
         C(e.$slots, "source", {}, void 0, !0)
-      ], 512)) : W("", !0),
+      ], 512)) : N("", !0),
       U.value && a.value.userOptions.buttons.table ? (I(), q(fl(Se.value.component), ml({ key: 6 }, Se.value.props, {
         ref_key: "tableUnit",
         ref: ye,
@@ -2056,7 +2055,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
             onClose: Za
           }, {
             th: b(({ th: l }) => [
-              H("div", { innerHTML: l }, null, 8, so)
+              W("div", { innerHTML: l }, null, 8, so)
             ]),
             td: b(({ td: l }) => [
               at(Ae(l), 1)
@@ -2076,7 +2075,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
         a.value.table.useDialog ? {
           name: "actions",
           fn: b(() => [
-            H("button", {
+            W("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
               onClick: t[4] || (t[4] = (l) => la(a.value.userOptions.callbacks.csv)),
@@ -2090,7 +2089,7 @@ const Zl = ["id"], Kl = ["id"], Jl = {
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : W("", !0),
+      ]), 1040)) : N("", !0),
       a.value.userOptions.buttons.annotator && f.value.length ? (I(), q(z(dt), {
         key: 7,
         parent: K.value,
@@ -2099,10 +2098,10 @@ const Zl = ["id"], Kl = ["id"], Jl = {
         active: we.value,
         isCursorPointer: le.value,
         onClose: oa
-      }, null, 8, ["parent", "backgroundColor", "color", "active", "isCursorPointer"])) : W("", !0)
+      }, null, 8, ["parent", "backgroundColor", "color", "active", "isCursorPointer"])) : N("", !0)
     ], 46, Zl));
   }
-}, $o = /* @__PURE__ */ Gl(uo, [["__scopeId", "data-v-db327a26"]]);
+}, $o = /* @__PURE__ */ Gl(uo, [["__scopeId", "data-v-4a0b7ab5"]]);
 export {
   $o as default
 };

package/package.json

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