vlite3 1.4.18 → 1.4.20

package/components/CategoryManager/CategoryManager.vue2.js

@@ -17,13 +17,13 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                           */
+/* empty css                          */
 import qe from "../IconPicker.vue.js";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/Chart/BarChart.vue.d.ts

@@ -25,6 +25,8 @@ export interface BarChartProps {
     gridOpacity?: number;
     /** Opacity of axis border lines (0–1) */
     axisOpacity?: number;
+    /** Fixed width for Y-axis labels (horizontal mode) */
+    yLabelWidth?: number;
 }
 declare const _default: import('vue').DefineComponent<BarChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BarChartProps> & Readonly<{}>, {
     animate: boolean;

package/components/Chart/BarChart.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as se, ref as A, computed as f, onMounted as ie, watch as ce, onUnmounted as ve, openBlock as n, createElementBlock as u, Fragment as d, renderList as h, createElementVNode as w, normalizeStyle as U, createTextVNode as de, toDisplayString as p, createCommentVNode as m, unref as k, withDirectives as he, vShow as fe, createBlock as me, Teleport as ye } from "vue";
-import { CHART_COLORS as xe, getColor as J, formatNumber as R, niceYTicks as ge, animateProgress as $e } from "./utils.js";
-const be = {
+import { defineComponent as ie, ref as S, computed as f, onMounted as ce, watch as ve, onUnmounted as de, openBlock as n, createElementBlock as u, Fragment as d, renderList as h, createElementVNode as w, normalizeStyle as U, createTextVNode as he, toDisplayString as k, createCommentVNode as m, unref as M, withDirectives as fe, vShow as me, createBlock as ye, Teleport as xe } from "vue";
+import { CHART_COLORS as ge, getColor as J, formatNumber as X, niceYTicks as $e, animateProgress as be } from "./utils.js";
+const pe = {
   key: 0,
   class: "flex flex-wrap gap-x-4 gap-y-1 mb-3 pl-14"
-}, pe = ["width", "height"], ke = ["id"], we = ["stop-color"], Le = ["stop-color"], Me = ["id"], Ve = ["stop-color"], Ce = ["stop-color"], Be = ["transform"], Ye = ["y1", "x2", "y2", "stroke-opacity"], Re = ["y"], Xe = ["d", "fill"], Oe = ["x", "y"], ze = ["x", "y", "text-anchor", "transform"], Se = ["y1", "x2", "y2", "stroke-opacity"], Ae = ["y2", "stroke-opacity"], Ge = ["transform"], Te = ["x1", "x2", "y2", "stroke-opacity"], We = ["x"], Pe = ["y"], He = ["d", "fill"], Ne = ["x", "y"], Qe = ["y2", "stroke-opacity"], Ze = ["y1", "x2", "y2", "stroke-opacity"], De = { class: "font-medium text-xs mb-1.5" }, Ee = {
+}, ke = ["width", "height"], Me = ["id"], Le = ["stop-color"], we = ["stop-color"], Ve = ["id"], Ce = ["stop-color"], Be = ["stop-color"], Re = ["transform"], Xe = ["y1", "x2", "y2", "stroke-opacity"], Ye = ["y"], ze = ["d", "fill"], Oe = ["x", "y"], Se = ["x", "y", "text-anchor", "transform"], Ae = ["y1", "x2", "y2", "stroke-opacity"], We = ["y2", "stroke-opacity"], Ge = ["transform"], Te = ["x1", "x2", "y2", "stroke-opacity"], Pe = ["x"], He = ["x", "y"], Ne = ["d", "fill"], Qe = ["x", "y"], Ze = ["y2", "stroke-opacity"], De = ["y1", "x2", "y2", "stroke-opacity"], Ee = { class: "font-medium text-xs mb-1.5" }, Fe = {
   key: 0,
   class: "text-muted-foreground"
-}, Fe = { class: "font-semibold" }, _e = /* @__PURE__ */ se({
+}, Ie = { class: "font-semibold" }, je = /* @__PURE__ */ ie({
   __name: "BarChart",
   props: {
     data: {},
@@ -19,7 +19,7 @@ const be = {
     showLegend: { type: Boolean, default: !0 },
     showTooltip: { type: Boolean, default: !0 },
     showValues: { type: Boolean, default: !1 },
-    colors: { default: () => xe },
+    colors: { default: () => ge },
     animate: { type: Boolean, default: !0 },
     formatValue: {},
     showXAxis: { type: Boolean, default: !0 },
@@ -27,10 +27,11 @@ const be = {
     showXLabels: { type: Boolean, default: !0 },
     showYLabels: { type: Boolean, default: !0 },
     gridOpacity: { default: 0.07 },
-    axisOpacity: { default: 0.1 }
+    axisOpacity: { default: 0.1 },
+    yLabelWidth: {}
   },
   setup(i) {
-    const s = i, G = A(), O = A(600), g = f(() => s.datasets?.length ? s.datasets.map((l, e) => ({
+    const s = i, A = S(), C = S(600), b = f(() => s.datasets?.length ? s.datasets.map((l, e) => ({
       label: l.label,
       color: l.color ?? J(s.colors, e),
       values: l.data
@@ -41,123 +42,137 @@ const be = {
         // will use per-bar color from data
         values: (s.data ?? []).map((l) => l.value)
       }
-    ]), $ = f(() => g.value.length > 1 || !!s.datasets?.length), v = f(() => s.labels?.length ? s.labels : s.datasets?.length ? g.value[0]?.values.map((t, l) => String(l + 1)) ?? [] : (s.data ?? []).map((t) => t.label)), z = f(() => {
+    ]), p = f(() => b.value.length > 1 || !!s.datasets?.length), v = f(() => s.labels?.length ? s.labels : s.datasets?.length ? b.value[0]?.values.map((t, l) => String(l + 1)) ?? [] : (s.data ?? []).map((t) => t.label)), z = f(() => {
       if (s.orientation !== "vertical" || !s.showXLabels || v.value.length === 0) return !1;
-      const t = Math.max(2, Math.floor(O.value / 65));
+      const t = Math.max(2, Math.floor(C.value / 65));
       return v.value.length > t;
-    }), b = f(() => {
-      const t = (o) => String(o).length;
+    }), K = (t, l) => {
+      if (!t) return "";
+      const e = Math.max(1, Math.floor(l / 6));
+      return t.length > e ? t.slice(0, Math.max(1, e - 2)) + "..." : t;
+    }, g = f(() => {
+      const t = (a) => String(a).length;
       if (s.orientation === "horizontal") {
-        const o = s.showYLabels ? Math.max(2, ...v.value.map((y) => t(y))) * 6.5 : 0, r = s.showYLabels ? Math.max(24, o + 12) : 8;
-        let M = 16;
+        let a = 8;
+        if (s.showYLabels)
+          if (s.yLabelWidth !== void 0)
+            a = s.yLabelWidth;
+          else {
+            const L = Math.max(2, ...v.value.map((x) => t(x))) * 6, y = Math.max(40, C.value * 0.4);
+            a = Math.min(y, Math.max(24, L + 16));
+          }
+        let r = 16;
         if (s.showValues) {
-          const y = g.value.flatMap((C) => C.values), V = Math.max(2, ...y.map((C) => t(s.formatValue ? s.formatValue(C) : R(C)))) * 6.5;
-          M = Math.max(16, V + 8);
+          const L = b.value.flatMap((x) => x.values), y = Math.max(2, ...L.map((x) => t(s.formatValue ? s.formatValue(x) : X(x)))) * 6.5;
+          r = Math.max(16, y + 8);
         }
         return {
           // top holds the value-tick labels that float above; collapse when hidden
           top: s.showXLabels ? 16 : 4,
-          right: M,
+          right: r,
           bottom: 0,
-          left: r
+          left: a
         };
       }
-      const l = s.showYLabels ? Math.max(2, ...B.value.map((o) => t(s.formatValue ? s.formatValue(o) : R(o)))) * 6.5 : 0, e = s.showYLabels ? Math.max(24, l + 12) : 8;
-      let a = s.showXLabels ? 24 : 6;
-      return s.showXLabels && z.value && (a = Math.max(2, ...v.value.map((r) => String(r).length)) * 6.5 * 0.7 + 16), {
+      const l = s.showYLabels ? Math.max(2, ...B.value.map((a) => t(s.formatValue ? s.formatValue(a) : X(a)))) * 6.5 : 0, e = s.showYLabels ? Math.max(24, l + 12) : 8;
+      let o = s.showXLabels ? 24 : 6;
+      return s.showXLabels && z.value && (o = Math.max(2, ...v.value.map((r) => String(r).length)) * 6.5 * 0.7 + 16), {
         top: 24,
         right: 0,
-        bottom: a,
+        bottom: o,
         left: e
       };
-    }), x = f(() => Math.max(0, O.value - b.value.left - b.value.right)), c = f(() => Math.max(0, s.height - b.value.top - b.value.bottom)), Q = f(() => {
+    }), $ = f(() => Math.max(0, C.value - g.value.left - g.value.right)), c = f(() => Math.max(0, s.height - g.value.top - g.value.bottom)), N = f(() => {
       if (s.orientation !== "vertical") return 1;
-      const t = z.value ? 25 : 65, l = Math.max(2, Math.floor(x.value / t));
+      const t = z.value ? 25 : 65, l = Math.max(2, Math.floor($.value / t));
       return Math.ceil(v.value.length / l);
-    }), K = (t) => {
+    }), ee = (t) => {
       if (s.orientation !== "vertical") return !0;
       const l = v.value.length;
-      return Q.value <= 1 || t === 0 || t === l - 1 ? !0 : l - 1 - t < Q.value * 0.7 ? !1 : t % Q.value === 0;
-    }, T = f(
+      return N.value <= 1 || t === 0 || t === l - 1 ? !0 : l - 1 - t < N.value * 0.7 ? !1 : t % N.value === 0;
+    }, W = f(
       () => (s.data ?? []).map((t, l) => t.color ?? J(s.colors, l))
-    ), ee = f(() => g.value.flatMap((t) => t.values)), _ = f(() => Math.max(...ee.value) || 1), B = f(() => ge(0, _.value, 5)), L = f(() => B.value[B.value.length - 1] || _.value), W = A(s.animate ? 0 : 1);
-    let Z = null;
+    ), te = f(() => b.value.flatMap((t) => t.values)), _ = f(() => Math.max(...te.value) || 1), B = f(() => {
+      const t = s.orientation === "vertical" ? s.height : C.value, l = Math.max(2, Math.floor(t / 80));
+      return $e(0, _.value, Math.min(5, l));
+    }), V = f(() => B.value[B.value.length - 1] || _.value), G = S(s.animate ? 0 : 1);
+    let Q = null;
     function j() {
-      Z?.(), W.value = 0, Z = $e(800, (t) => W.value = t);
+      Q?.(), G.value = 0, Q = be(800, (t) => G.value = t);
     }
-    ie(() => {
-      te(), s.animate && j();
-    }), ce(() => [s.data, s.datasets], () => {
+    ce(() => {
+      le(), s.animate && j();
+    }), ve(() => [s.data, s.datasets], () => {
       s.animate && j();
-    }, { deep: !0 }), ve(() => {
-      Z?.(), D?.disconnect();
+    }, { deep: !0 }), de(() => {
+      Q?.(), Z?.disconnect();
     });
-    let D = null;
-    function te() {
-      G.value && (D = new ResizeObserver((t) => {
-        O.value = t[0].contentRect.width || 600;
-      }), D.observe(G.value), O.value = G.value.clientWidth || 600);
+    let Z = null;
+    function le() {
+      A.value && (Z = new ResizeObserver((t) => {
+        C.value = t[0].contentRect.width || 600;
+      }), Z.observe(A.value), C.value = A.value.clientWidth || 600);
     }
-    const le = f(() => {
+    const ae = f(() => {
       const t = v.value.length;
       if (t === 0) return [];
-      const l = x.value / t, e = g.value.length, a = l * 0.2, o = l - a * 2, r = $.value ? o / e : o;
-      return v.value.map((M, y) => {
-        const V = y * l + a, C = g.value.map((P, H) => {
-          const N = P.values[y] ?? 0, S = N / L.value * c.value * W.value, E = V + H * r, F = c.value - S, I = $.value ? P.color : T.value[y];
-          return { val: N, bh: S, x: E, y: F, w: r - ($.value ? 2 : 0), color: I };
+      const l = $.value / t, e = b.value.length, o = l * 0.2, a = l - o * 2, r = p.value ? a / e : a;
+      return v.value.map((L, y) => {
+        const x = y * l + o, D = b.value.map((T, P) => {
+          const H = T.values[y] ?? 0, O = H / V.value * c.value * G.value, E = x + P * r, F = c.value - O, I = p.value ? T.color : W.value[y];
+          return { val: H, bh: O, x: E, y: F, w: r - (p.value ? 2 : 0), color: I };
         });
-        return { label: M, bars: C };
+        return { label: L, bars: D };
       });
-    }), ae = f(() => {
+    }), oe = f(() => {
       const t = v.value.length;
       if (t === 0) return [];
-      const l = c.value / t, e = g.value.length, a = l * 0.2, o = l - a * 2, r = $.value ? o / e : o, M = L.value;
-      return v.value.map((y, V) => {
-        const C = V * l + a, P = g.value.map((H, N) => {
-          const S = H.values[V] ?? 0, E = S / M * x.value * W.value, F = C + N * r, I = $.value ? H.color : T.value[V];
-          return { val: S, bw: E, x: 0, y: F, h: r - ($.value ? 2 : 0), color: I };
+      const l = c.value / t, e = b.value.length, o = l * 0.2, a = l - o * 2, r = p.value ? a / e : a, L = V.value;
+      return v.value.map((y, x) => {
+        const D = x * l + o, T = b.value.map((P, H) => {
+          const O = P.values[x] ?? 0, E = O / L * $.value * G.value, F = D + H * r, I = p.value ? P.color : W.value[x];
+          return { val: O, bw: E, x: 0, y: F, h: r - (p.value ? 2 : 0), color: I };
         });
-        return { label: y, bars: P };
+        return { label: y, bars: T };
       });
-    }), Y = A(null), q = A(null);
-    function oe(t) {
+    }), R = S(null), q = S(null);
+    function ne(t) {
       if (!s.showTooltip) return;
-      const l = t.currentTarget.getBoundingClientRect(), e = t.clientX - l.left - b.value.left, a = t.clientY - l.top - b.value.top, o = v.value.length;
-      if (o === 0) return;
+      const l = t.currentTarget.getBoundingClientRect(), e = t.clientX - l.left - g.value.left, o = t.clientY - l.top - g.value.top, a = v.value.length;
+      if (a === 0) return;
       let r;
-      s.orientation === "vertical" ? r = Math.floor(e / x.value * o) : r = Math.floor(a / c.value * o), r = Math.max(0, Math.min(o - 1, r)), q.value = r;
-      const M = g.value.map((y, V) => ({
-        color: $.value ? y.color : T.value[r],
+      s.orientation === "vertical" ? r = Math.floor(e / $.value * a) : r = Math.floor(o / c.value * a), r = Math.max(0, Math.min(a - 1, r)), q.value = r;
+      const L = b.value.map((y, x) => ({
+        color: p.value ? y.color : W.value[r],
         label: y.label,
-        value: s.formatValue ? s.formatValue(y.values[r]) : R(y.values[r])
+        value: s.formatValue ? s.formatValue(y.values[r]) : X(y.values[r])
       }));
-      Y.value = {
+      R.value = {
         x: t.clientX,
         y: t.clientY,
         label: v.value[r],
-        items: M
+        items: L
       };
     }
-    function ne() {
-      Y.value = null, q.value = null;
+    function ue() {
+      R.value = null, q.value = null;
     }
-    function ue(t, l, e, a, o) {
-      const r = Math.min(o, e / 2, a / 2);
-      return r <= 0 || a <= 0 ? `M${t},${l + a} L${t},${l} L${t + e},${l} L${t + e},${l + a} Z` : `M${t},${l + a} L${t},${l + r} Q${t},${l} ${t + r},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + a} Z`;
+    function re(t, l, e, o, a) {
+      const r = Math.min(a, e / 2, o / 2);
+      return r <= 0 || o <= 0 ? `M${t},${l + o} L${t},${l} L${t + e},${l} L${t + e},${l + o} Z` : `M${t},${l + o} L${t},${l + r} Q${t},${l} ${t + r},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + o} Z`;
     }
-    function re(t, l, e, a, o) {
-      const r = Math.min(o, e / 2, a / 2);
-      return r <= 0 || e <= 0 ? `M${t},${l} L${t + e},${l} L${t + e},${l + a} L${t},${l + a} Z` : `M${t},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + a - r} Q${t + e},${l + a} ${t + e - r},${l + a} L${t},${l + a} Z`;
+    function se(t, l, e, o, a) {
+      const r = Math.min(a, e / 2, o / 2);
+      return r <= 0 || e <= 0 ? `M${t},${l} L${t + e},${l} L${t + e},${l + o} L${t},${l + o} Z` : `M${t},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + o - r} Q${t + e},${l + o} ${t + e - r},${l + o} L${t},${l + o} Z`;
     }
-    const X = Math.random().toString(36).slice(2, 7);
+    const Y = Math.random().toString(36).slice(2, 7);
     return (t, l) => (n(), u("div", {
       ref_key: "containerRef",
-      ref: G,
+      ref: A,
       class: "vlite-bar-chart w-full select-none"
     }, [
-      i.showLegend && $.value ? (n(), u("div", be, [
-        (n(!0), u(d, null, h(g.value, (e) => (n(), u("div", {
+      i.showLegend && p.value ? (n(), u("div", pe, [
+        (n(!0), u(d, null, h(b.value, (e) => (n(), u("div", {
           key: e.label,
           class: "flex items-center gap-1.5 text-xs text-muted-foreground"
         }, [
@@ -165,22 +180,22 @@ const be = {
             class: "w-2.5 h-2.5 rounded-sm inline-block",
             style: U({ backgroundColor: e.color })
           }, null, 4),
-          de(" " + p(e.label), 1)
+          he(" " + k(e.label), 1)
         ]))), 128))
       ])) : m("", !0),
       (n(), u("svg", {
-        width: O.value,
+        width: C.value,
         height: i.height,
         role: "img",
         "aria-label": "Bar chart",
         class: "overflow-visible",
-        onMousemove: oe,
-        onMouseleave: ne
+        onMousemove: ne,
+        onMouseleave: ue
       }, [
         w("defs", null, [
-          (n(!0), u(d, null, h(g.value, (e, a) => (n(), u("linearGradient", {
-            key: a,
-            id: `bgrad-${k(X)}-${a}`,
+          (n(!0), u(d, null, h(b.value, (e, o) => (n(), u("linearGradient", {
+            key: o,
+            id: `bgrad-${M(Y)}-${o}`,
             x1: "0",
             y1: "0",
             x2: "0",
@@ -190,16 +205,16 @@ const be = {
               offset: "0%",
               "stop-color": e.color,
               "stop-opacity": "1"
-            }, null, 8, we),
+            }, null, 8, Le),
             w("stop", {
               offset: "100%",
               "stop-color": e.color,
               "stop-opacity": "0.7"
-            }, null, 8, Le)
-          ], 8, ke))), 128)),
-          (n(!0), u(d, null, h(T.value, (e, a) => (n(), u("linearGradient", {
-            key: `sc-${a}`,
-            id: `bgrad-single-${k(X)}-${a}`,
+            }, null, 8, we)
+          ], 8, Me))), 128)),
+          (n(!0), u(d, null, h(W.value, (e, o) => (n(), u("linearGradient", {
+            key: `sc-${o}`,
+            id: `bgrad-single-${M(Y)}-${o}`,
             x1: "0",
             y1: "0",
             x2: "0",
@@ -209,74 +224,74 @@ const be = {
               offset: "0%",
               "stop-color": e,
               "stop-opacity": "1"
-            }, null, 8, Ve),
+            }, null, 8, Ce),
             w("stop", {
               offset: "100%",
               "stop-color": e,
               "stop-opacity": "0.7"
-            }, null, 8, Ce)
-          ], 8, Me))), 128))
+            }, null, 8, Be)
+          ], 8, Ve))), 128))
         ]),
         i.orientation === "vertical" ? (n(), u("g", {
           key: 0,
-          transform: `translate(${b.value.left},${b.value.top})`
+          transform: `translate(${g.value.left},${g.value.top})`
         }, [
           i.showGrid ? (n(!0), u(d, { key: 0 }, h(B.value, (e) => (n(), u("line", {
             key: e,
             x1: 0,
-            y1: c.value - e / L.value * c.value,
-            x2: x.value,
-            y2: c.value - e / L.value * c.value,
+            y1: c.value - e / V.value * c.value,
+            x2: $.value,
+            y2: c.value - e / V.value * c.value,
             stroke: "currentColor",
             "stroke-opacity": i.gridOpacity,
             "stroke-width": "1"
-          }, null, 8, Ye))), 128)) : m("", !0),
+          }, null, 8, Xe))), 128)) : m("", !0),
           i.showYLabels ? (n(!0), u(d, { key: 1 }, h(B.value, (e) => (n(), u("text", {
             key: `yt-${e}`,
             x: -10,
-            y: c.value - e / L.value * c.value,
+            y: c.value - e / V.value * c.value,
             "text-anchor": "end",
             "dominant-baseline": "middle",
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, p(i.formatValue ? i.formatValue(e) : k(R)(e)), 9, Re))), 128)) : m("", !0),
-          (n(!0), u(d, null, h(le.value, (e, a) => (n(), u("g", { key: a }, [
-            (n(!0), u(d, null, h(e.bars, (o, r) => (n(), u("path", {
+          }, k(i.formatValue ? i.formatValue(e) : M(X)(e)), 9, Ye))), 128)) : m("", !0),
+          (n(!0), u(d, null, h(ae.value, (e, o) => (n(), u("g", { key: o }, [
+            (n(!0), u(d, null, h(e.bars, (a, r) => (n(), u("path", {
               key: r,
-              d: ue(o.x, o.y, o.w, o.bh, i.barRadius),
-              fill: $.value ? `url(#bgrad-${k(X)}-${r})` : `url(#bgrad-single-${k(X)}-${a})`,
+              d: re(a.x, a.y, a.w, a.bh, i.barRadius),
+              fill: p.value ? `url(#bgrad-${M(Y)}-${r})` : `url(#bgrad-single-${M(Y)}-${o})`,
               class: "transition-opacity duration-150"
-            }, null, 8, Xe))), 128)),
-            i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (o, r) => (n(), u("text", {
+            }, null, 8, ze))), 128)),
+            i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (a, r) => (n(), u("text", {
               key: `vl-${r}`,
-              x: o.x + o.w / 2,
-              y: o.y - 6,
+              x: a.x + a.w / 2,
+              y: a.y - 6,
               "text-anchor": "middle",
               "font-size": "10",
               "font-weight": "600",
               class: "fill-foreground"
-            }, p(i.formatValue ? i.formatValue(o.val) : k(R)(o.val)), 9, Oe))), 128)) : m("", !0)
+            }, k(i.formatValue ? i.formatValue(a.val) : M(X)(a.val)), 9, Oe))), 128)) : m("", !0)
           ]))), 128)),
-          i.showXLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, a) => he((n(), u("text", {
-            key: `xl-${a}`,
-            x: (a + 0.5) * (x.value / v.value.length),
+          i.showXLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, o) => fe((n(), u("text", {
+            key: `xl-${o}`,
+            x: (o + 0.5) * ($.value / v.value.length),
             y: c.value + (z.value ? 12 : 16),
             "text-anchor": z.value ? "end" : "middle",
-            transform: z.value ? `rotate(-45, ${(a + 0.5) * (x.value / v.value.length)}, ${c.value + 12})` : void 0,
+            transform: z.value ? `rotate(-45, ${(o + 0.5) * ($.value / v.value.length)}, ${c.value + 12})` : void 0,
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, p(e), 9, ze)), [
-            [fe, K(a)]
+          }, k(e), 9, Se)), [
+            [me, ee(o)]
           ])), 128)) : m("", !0),
           i.showXAxis ? (n(), u("line", {
             key: 3,
             x1: 0,
             y1: c.value,
-            x2: x.value,
+            x2: $.value,
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, Se)) : m("", !0),
+          }, null, 8, Ae)) : m("", !0),
           i.showYAxis ? (n(), u("line", {
             key: 4,
             x1: 0,
@@ -285,16 +300,16 @@ const be = {
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, Ae)) : m("", !0)
-        ], 8, Be)) : (n(), u("g", {
+          }, null, 8, We)) : m("", !0)
+        ], 8, Re)) : (n(), u("g", {
           key: 1,
-          transform: `translate(${b.value.left},${b.value.top})`
+          transform: `translate(${g.value.left},${g.value.top})`
         }, [
           i.showGrid ? (n(!0), u(d, { key: 0 }, h(B.value, (e) => (n(), u("line", {
             key: e,
-            x1: e / L.value * x.value,
+            x1: e / V.value * $.value,
             y1: 0,
-            x2: e / L.value * x.value,
+            x2: e / V.value * $.value,
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.gridOpacity,
@@ -302,37 +317,37 @@ const be = {
           }, null, 8, Te))), 128)) : m("", !0),
           i.showXLabels ? (n(!0), u(d, { key: 1 }, h(B.value, (e) => (n(), u("text", {
             key: `xt-${e}`,
-            x: e / L.value * x.value,
+            x: e / V.value * $.value,
             y: -8,
             "text-anchor": "middle",
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, p(i.formatValue ? i.formatValue(e) : k(R)(e)), 9, We))), 128)) : m("", !0),
-          i.showYLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, a) => (n(), u("text", {
-            key: `yl-${a}`,
-            x: -12,
-            y: (a + 0.5) * (c.value / v.value.length),
-            "text-anchor": "end",
+          }, k(i.formatValue ? i.formatValue(e) : M(X)(e)), 9, Pe))), 128)) : m("", !0),
+          i.showYLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, o) => (n(), u("text", {
+            key: `yl-${o}`,
+            x: -g.value.left + 4,
+            y: (o + 0.5) * (c.value / v.value.length),
+            "text-anchor": "start",
             "dominant-baseline": "middle",
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, p(e), 9, Pe))), 128)) : m("", !0),
-          (n(!0), u(d, null, h(ae.value, (e, a) => (n(), u("g", { key: a }, [
-            (n(!0), u(d, null, h(e.bars, (o, r) => (n(), u("path", {
+          }, k(K(String(e), g.value.left - 12)), 9, He))), 128)) : m("", !0),
+          (n(!0), u(d, null, h(oe.value, (e, o) => (n(), u("g", { key: o }, [
+            (n(!0), u(d, null, h(e.bars, (a, r) => (n(), u("path", {
               key: r,
-              d: re(o.x, o.y, o.bw, o.h, i.barRadius),
-              fill: $.value ? `url(#bgrad-${k(X)}-${r})` : `url(#bgrad-single-${k(X)}-${a})`,
+              d: se(a.x, a.y, a.bw, a.h, i.barRadius),
+              fill: p.value ? `url(#bgrad-${M(Y)}-${r})` : `url(#bgrad-single-${M(Y)}-${o})`,
               class: "transition-opacity duration-150"
-            }, null, 8, He))), 128)),
-            i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (o, r) => (n(), u("text", {
+            }, null, 8, Ne))), 128)),
+            i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (a, r) => (n(), u("text", {
               key: `hvl-${r}`,
-              x: o.bw + 6,
-              y: o.y + o.h / 2,
+              x: a.bw + 6,
+              y: a.y + a.h / 2,
               "dominant-baseline": "middle",
               "font-size": "10",
               "font-weight": "600",
               class: "fill-foreground"
-            }, p(i.formatValue ? i.formatValue(o.val) : k(R)(o.val)), 9, Ne))), 128)) : m("", !0)
+            }, k(i.formatValue ? i.formatValue(a.val) : M(X)(a.val)), 9, Qe))), 128)) : m("", !0)
           ]))), 128)),
           i.showYAxis ? (n(), u("line", {
             key: 3,
@@ -342,26 +357,26 @@ const be = {
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, Qe)) : m("", !0),
+          }, null, 8, Ze)) : m("", !0),
           i.showXAxis ? (n(), u("line", {
             key: 4,
             x1: 0,
             y1: c.value,
-            x2: x.value,
+            x2: $.value,
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, Ze)) : m("", !0)
+          }, null, 8, De)) : m("", !0)
         ], 8, Ge))
-      ], 40, pe)),
-      (n(), me(ye, { to: "body" }, [
-        Y.value ? (n(), u("div", {
+      ], 40, ke)),
+      (n(), ye(xe, { to: "body" }, [
+        R.value ? (n(), u("div", {
           key: 0,
           class: "vlite-chart-tooltip",
-          style: U({ left: `${Y.value.x + 12}px`, top: `${Y.value.y - 10}px` })
+          style: U({ left: `${R.value.x + 12}px`, top: `${R.value.y - 10}px` })
         }, [
-          w("div", De, p(Y.value.label), 1),
-          (n(!0), u(d, null, h(Y.value.items, (e) => (n(), u("div", {
+          w("div", Ee, k(R.value.label), 1),
+          (n(!0), u(d, null, h(R.value.items, (e) => (n(), u("div", {
             key: e.label,
             class: "flex items-center gap-1.5 text-xs"
           }, [
@@ -369,8 +384,8 @@ const be = {
               class: "w-2 h-2 rounded-sm shrink-0",
               style: U({ backgroundColor: e.color })
             }, null, 4),
-            e.label ? (n(), u("span", Ee, p(e.label) + ":", 1)) : m("", !0),
-            w("span", Fe, p(e.value), 1)
+            e.label ? (n(), u("span", Fe, k(e.label) + ":", 1)) : m("", !0),
+            w("span", Ie, k(e.value), 1)
           ]))), 128))
         ], 4)) : m("", !0)
       ]))
@@ -378,5 +393,5 @@ const be = {
   }
 });
 export {
-  _e as default
+  je as default
 };

package/components/Chart/types.d.ts

@@ -73,6 +73,8 @@ export interface BarChartProps {
     animate?: boolean;
     /** Custom value formatter */
     formatValue?: (v: number) => string;
+    /** Fixed width for Y-axis labels (horizontal mode) */
+    yLabelWidth?: number;
 }
 export type PieLabelMode = 'percent' | 'value' | 'label' | 'none' | 'outside';
 export type LegendPosition = 'right' | 'bottom';