vlite3 1.4.24 → 1.4.26

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

@@ -31,6 +31,8 @@ export interface LineChartProps {
     axisOpacity?: number;
     /** Stroke width of the chart lines */
     lineWidth?: number;
+    /** Top stop opacity for the area fill gradient (0–1) */
+    fillOpacity?: number;
 }
 declare const _default: import('vue').DefineComponent<LineChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LineChartProps> & Readonly<{}>, {
     fill: boolean;
@@ -38,10 +40,10 @@ declare const _default: import('vue').DefineComponent<LineChartProps, {}, {}, {}
     height: number;
     colors: string[];
     smooth: boolean;
-    showLegend: boolean;
-    showTooltip: boolean;
     showDots: boolean;
     showGrid: boolean;
+    showLegend: boolean;
+    showTooltip: boolean;
     showXAxis: boolean;
     showYAxis: boolean;
     showXLabels: boolean;
@@ -49,6 +51,7 @@ declare const _default: import('vue').DefineComponent<LineChartProps, {}, {}, {}
     gridOpacity: number;
     axisOpacity: number;
     lineWidth: number;
+    fillOpacity: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     containerRef: HTMLDivElement;
 }, HTMLDivElement>;

package/components/Chart/LineChart.vue.js

@@ -1,7 +1,7 @@
 import o from "./LineChart.vue2.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-07c9fb47"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-044e962d"]]);
 export {
   m as default
 };

package/components/Chart/LineChart.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as ae, ref as S, computed as r, onMounted as oe, watch as ne, onUnmounted as ue, openBlock as o, createElementBlock as n, Fragment as p, renderList as g, createElementVNode as h, normalizeStyle as W, createTextVNode as se, toDisplayString as b, createCommentVNode as i, unref as M, withDirectives as re, vShow as ie, createBlock as ce, Teleport as de } from "vue";
+import { defineComponent as ae, ref as R, computed as r, onMounted as oe, watch as ne, onUnmounted as ue, openBlock as o, createElementBlock as n, Fragment as p, renderList as g, createElementVNode as h, normalizeStyle as W, createTextVNode as se, toDisplayString as b, createCommentVNode as i, unref as M, withDirectives as re, vShow as ie, createBlock as ce, Teleport as de } from "vue";
 import { CHART_COLORS as he, formatNumber as D, getColor as E, niceYTicks as ve, smoothPath as fe, linearPath as ye, animateProgress as me } from "./utils.js";
 const xe = {
   key: 0,
   class: "flex flex-wrap gap-x-4 gap-y-1 mb-3 pl-14"
-}, pe = ["width", "height"], ge = ["id"], be = ["width", "height"], ke = ["id"], we = ["stop-color"], Me = ["stop-color"], Le = ["transform"], $e = ["y1", "x2", "y2", "stroke-opacity"], Be = ["y"], Ce = ["x", "y", "text-anchor", "transform"], _e = ["y1", "x2", "y2", "stroke-opacity"], Ve = ["y2", "stroke-opacity"], Xe = ["x1", "x2", "y2"], Re = ["d", "fill", "clip-path"], Se = ["d", "stroke", "stroke-width", "clip-path"], Ye = ["cx", "cy", "r", "fill", "opacity", "clip-path"], Oe = ["x", "y"], Pe = ["x", "y"], ze = { class: "font-medium text-xs mb-1.5" }, Ae = {
+}, pe = ["width", "height"], ge = ["id"], be = ["width", "height"], ke = ["id"], we = ["stop-color", "stop-opacity"], Me = ["stop-color"], Le = ["transform"], $e = ["y1", "x2", "y2", "stroke-opacity"], Be = ["y"], Ce = ["x", "y", "text-anchor", "transform"], Ve = ["y1", "x2", "y2", "stroke-opacity"], _e = ["y2", "stroke-opacity"], Xe = ["x1", "x2", "y2"], Oe = ["d", "fill", "clip-path"], Re = ["d", "stroke", "stroke-width", "clip-path"], Se = ["cx", "cy", "r", "fill", "opacity", "clip-path"], Ye = ["x", "y"], Pe = ["x", "y"], ze = { class: "font-medium text-xs mb-1.5" }, Ae = {
   key: 0,
   class: "text-muted-foreground"
 }, Te = { class: "font-semibold" }, Ne = /* @__PURE__ */ ae({
@@ -32,17 +32,18 @@ const xe = {
     showYLabels: { type: Boolean, default: !0 },
     gridOpacity: { default: 0.07 },
     axisOpacity: { default: 0.1 },
-    lineWidth: { default: 2.5 }
+    lineWidth: { default: 2.5 },
+    fillOpacity: { default: 0.25 }
   },
   setup(u) {
-    const l = u, L = S(), X = S(600), y = r(() => l.labels?.length ? l.labels : l.datasets?.length ? l.datasets[0].data.map((t, a) => String(a + 1)) : (l.data ?? []).map((t) => t.label)), R = r(() => {
+    const l = u, L = R(), X = R(600), y = r(() => l.labels?.length ? l.labels : l.datasets?.length ? l.datasets[0].data.map((t, a) => String(a + 1)) : (l.data ?? []).map((t) => t.label)), O = r(() => {
       if (!l.showXLabels || y.value.length === 0) return !1;
       const t = Math.max(2, Math.floor(X.value / 65));
       return y.value.length > t;
     }), v = r(() => {
       const t = (c) => String(c).length, a = l.showYLabels ? Math.max(2, ...$.value.map((c) => t(l.formatValue ? l.formatValue(c) : D(c)))) * 6.5 : 0, e = l.showYLabels ? Math.max(24, a + 12) : 8;
       let s = l.showXLabels ? 24 : 6;
-      return l.showXLabels && R.value && (s = Math.max(2, ...y.value.map((m) => String(m).length)) * 6.5 * 0.7 + 16), {
+      return l.showXLabels && O.value && (s = Math.max(2, ...y.value.map((m) => String(m).length)) * 6.5 * 0.7 + 16), {
         top: 16,
         right: 16,
         bottom: s,
@@ -64,7 +65,7 @@ const xe = {
         }
       ];
     }), P = r(() => {
-      const t = R.value ? 25 : 65, a = Math.max(2, Math.floor(f.value / t));
+      const t = O.value ? 25 : 65, a = Math.max(2, Math.floor(f.value / t));
       return Math.ceil(y.value.length / a);
     }), F = (t) => {
       const a = y.value.length;
@@ -77,7 +78,7 @@ const xe = {
       const a = y.value.length;
       return a < 2 ? f.value / 2 : t / (a - 1) * f.value;
     }
-    const Y = S(l.animate ? 0 : 1);
+    const S = R(l.animate ? 0 : 1);
     let A = null;
     function Z(t) {
       return t.map((a, e) => [C(e), B(a)]);
@@ -89,8 +90,8 @@ const xe = {
       })
     );
     function G() {
-      A?.(), Y.value = 0, A = me(900, (t) => {
-        Y.value = t;
+      A?.(), S.value = 0, A = me(900, (t) => {
+        S.value = t;
       });
     }
     oe(() => {
@@ -110,17 +111,17 @@ const xe = {
         X.value = t[0].contentRect.width || 600;
       }), T.observe(L.value), X.value = L.value.clientWidth || 600);
     }
-    const w = S(null), _ = S(null);
+    const w = R(null), V = R(null);
     function K(t) {
       if (!l.showTooltip) return;
       const a = t.currentTarget.getBoundingClientRect(), e = t.clientX - a.left - v.value.left, s = y.value.length;
       if (s === 0) return;
       const c = s < 2 ? f.value : f.value / (s - 1), m = Math.round(e / c), x = Math.max(0, Math.min(s - 1, m));
-      _.value = x;
-      const ee = k.value.map((O) => ({
-        color: O.color,
-        label: O.label,
-        value: l.formatValue ? l.formatValue(O.values[x]) : D(O.values[x])
+      V.value = x;
+      const ee = k.value.map((Y) => ({
+        color: Y.color,
+        label: Y.label,
+        value: l.formatValue ? l.formatValue(Y.values[x]) : D(Y.values[x])
       })), te = C(x) + v.value.left, le = B(k.value[0].values[x]) + v.value.top;
       w.value = {
         x: te,
@@ -130,9 +131,9 @@ const xe = {
       };
     }
     function Q() {
-      w.value = null, _.value = null;
+      w.value = null, V.value = null;
     }
-    const V = Math.random().toString(36).slice(2, 7);
+    const _ = Math.random().toString(36).slice(2, 7);
     return (t, a) => (o(), n("div", {
       ref_key: "containerRef",
       ref: L,
@@ -161,18 +162,18 @@ const xe = {
       }, [
         h("defs", null, [
           h("clipPath", {
-            id: `clip-${M(V)}`
+            id: `clip-${M(_)}`
           }, [
             h("rect", {
               x: 0,
               y: -10,
-              width: f.value * Y.value,
+              width: f.value * S.value,
               height: d.value + 20
             }, null, 8, be)
           ], 8, ge),
           (o(!0), n(p, null, g(k.value, (e, s) => (o(), n("linearGradient", {
             key: s,
-            id: `grad-${M(V)}-${s}`,
+            id: `grad-${M(_)}-${s}`,
             x1: "0",
             y1: "0",
             x2: "0",
@@ -181,7 +182,7 @@ const xe = {
             h("stop", {
               offset: "0%",
               "stop-color": e.color,
-              "stop-opacity": "0.25"
+              "stop-opacity": u.fillOpacity
             }, null, 8, we),
             h("stop", {
               offset: "100%",
@@ -215,9 +216,9 @@ const xe = {
           u.showXLabels ? (o(!0), n(p, { key: 2 }, g(y.value, (e, s) => re((o(), n("text", {
             key: `xl-${s}`,
             x: C(s),
-            y: d.value + (R.value ? 12 : 16),
-            "text-anchor": R.value ? "end" : "middle",
-            transform: R.value ? `rotate(-45, ${C(s)}, ${d.value + 12})` : void 0,
+            y: d.value + (O.value ? 12 : 16),
+            "text-anchor": O.value ? "end" : "middle",
+            transform: O.value ? `rotate(-45, ${C(s)}, ${d.value + 12})` : void 0,
             class: "fill-muted-foreground",
             "font-size": "11"
           }, b(e), 9, Ce)), [
@@ -231,7 +232,7 @@ const xe = {
             y2: d.value,
             stroke: "currentColor",
             "stroke-opacity": u.axisOpacity
-          }, null, 8, _e)) : i("", !0),
+          }, null, 8, Ve)) : i("", !0),
           u.showYAxis ? (o(), n("line", {
             key: 4,
             x1: 0,
@@ -240,12 +241,12 @@ const xe = {
             y2: d.value,
             stroke: "currentColor",
             "stroke-opacity": u.axisOpacity
-          }, null, 8, Ve)) : i("", !0),
-          _.value !== null ? (o(), n("line", {
+          }, null, 8, _e)) : i("", !0),
+          V.value !== null ? (o(), n("line", {
             key: 5,
-            x1: C(_.value),
+            x1: C(V.value),
             y1: 0,
-            x2: C(_.value),
+            x2: C(V.value),
             y2: d.value,
             stroke: "currentColor",
             "stroke-opacity": "0.12",
@@ -256,9 +257,9 @@ const xe = {
             u.fill ? (o(), n("path", {
               key: 0,
               d: e.fillPath,
-              fill: `url(#grad-${M(V)}-${s})`,
-              "clip-path": `url(#clip-${M(V)})`
-            }, null, 8, Re)) : i("", !0),
+              fill: `url(#grad-${M(_)}-${s})`,
+              "clip-path": `url(#clip-${M(_)})`
+            }, null, 8, Oe)) : i("", !0),
             h("path", {
               d: e.line,
               fill: "none",
@@ -266,18 +267,18 @@ const xe = {
               "stroke-width": u.lineWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
-              "clip-path": `url(#clip-${M(V)})`
-            }, null, 8, Se),
+              "clip-path": `url(#clip-${M(_)})`
+            }, null, 8, Re),
             u.showDots ? (o(!0), n(p, { key: 1 }, g(e.pts, (c, m) => (o(), n("circle", {
               key: m,
               cx: c[0],
               cy: c[1],
-              r: _.value === m ? 5 : 3.5,
+              r: V.value === m ? 5 : 3.5,
               fill: e.color,
               class: "transition-[r] duration-150",
-              opacity: Y.value > 0 ? 1 : 0,
-              "clip-path": `url(#clip-${M(V)})`
-            }, null, 8, Ye))), 128)) : i("", !0)
+              opacity: S.value > 0 ? 1 : 0,
+              "clip-path": `url(#clip-${M(_)})`
+            }, null, 8, Se))), 128)) : i("", !0)
           ]))), 128)),
           u.yLabel ? (o(), n("text", {
             key: 6,
@@ -287,7 +288,7 @@ const xe = {
             transform: "rotate(-90)",
             "font-size": "11",
             class: "fill-muted-foreground font-medium"
-          }, b(u.yLabel), 9, Oe)) : i("", !0),
+          }, b(u.yLabel), 9, Ye)) : i("", !0),
           u.xLabel ? (o(), n("text", {
             key: 7,
             x: f.value / 2,

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

@@ -1,6 +1,5 @@
-import { ChartDataPoint } from './types';
-export type PieLabelMode = 'percent' | 'value' | 'label' | 'none' | 'outside';
-export type LegendPosition = 'right' | 'bottom';
+import { ChartDataPoint, ChartLegendsVariant, LegendPosition, PieLabelMode } from './types';
+export type { PieLabelMode, LegendPosition, ChartLegendsVariant };
 export interface PieChartProps {
     data: ChartDataPoint[];
     donut?: boolean;
@@ -9,6 +8,13 @@ export interface PieChartProps {
     startAngle?: number;
     showLegend?: boolean;
     legendPosition?: LegendPosition;
+    /**
+     * Legend layout preset.
+     * - `default` — original two-line items (label + value)
+     * - `variant1` — compact horizontal wrap: "Label (value, pct%)"
+     * - `variant2` — vertical rows with value/pct aligned right
+     */
+    legendsVariant?: ChartLegendsVariant;
     labelMode?: PieLabelMode;
     colors?: string[];
     animate?: boolean;
@@ -34,10 +40,11 @@ declare const __VLS_component: import('vue').DefineComponent<PieChartProps, {},
     colors: string[];
     showLegend: boolean;
     showTooltip: boolean;
+    legendsVariant: ChartLegendsVariant;
+    legendPosition: LegendPosition;
     donut: boolean;
     innerRadius: number;
     startAngle: number;
-    legendPosition: LegendPosition;
     labelMode: PieLabelMode;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/components/Chart/PieChart.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as se, ref as E, onMounted as ie, watch as ue, onUnmounted as re, computed as f, openBlock as s, createElementBlock as i, normalizeClass as Z, createElementVNode as u, unref as M, Fragment as p, renderList as $, createCommentVNode as h, toDisplayString as d, renderSlot as de, normalizeStyle as I, createBlock as ce, Teleport as ve, createTextVNode as fe } from "vue";
-import { CHART_COLORS as he, getColor as _, arcPath as me, formatNumber as z, animateProgress as xe } from "./utils.js";
-const ye = { class: "shrink-0" }, ge = ["width", "height"], be = ["id"], Me = ["filter"], ke = ["d", "fill", "transform", "onMouseenter"], we = {
+import { defineComponent as re, ref as B, onMounted as ue, watch as de, onUnmounted as ce, computed as d, openBlock as i, createElementBlock as s, normalizeClass as W, createElementVNode as u, unref as T, Fragment as D, renderList as N, createCommentVNode as f, toDisplayString as x, renderSlot as ve, createBlock as Z, Teleport as fe, normalizeStyle as _, createTextVNode as he } from "vue";
+import { CHART_COLORS as me, getColor as ge, arcPath as xe, formatNumber as E, animateProgress as ye } from "./utils.js";
+import be from "./ChartLegend.vue.js";
+const Me = ["width", "height"], ke = ["id"], we = ["filter"], pe = ["d", "fill", "transform", "opacity", "onMouseenter"], $e = {
   key: 0,
   style: { "pointer-events": "none" }
-}, pe = ["d", "opacity"], $e = ["x", "y", "text-anchor", "font-size", "font-weight", "fill", "opacity"], ze = { key: 2 }, Le = ["x", "y"], Ae = ["x", "y"], Pe = ["onMouseenter"], Ce = { class: "min-w-0" }, Re = { class: "text-xs font-medium text-foreground truncate" }, Se = { class: "text-[10px] text-muted-foreground" }, Be = { class: "flex items-center gap-1.5 mb-1" }, Ve = { class: "text-xs font-semibold" }, Te = { class: "text-xs text-muted-foreground" }, De = { class: "font-medium text-foreground ml-1" }, Oe = /* @__PURE__ */ se({
+}, Le = ["d", "opacity"], ze = ["x", "y", "text-anchor", "font-size", "font-weight", "fill", "opacity"], Pe = { key: 2 }, Ae = ["x", "y"], Ve = ["x", "y"], Ce = { class: "flex items-center gap-1.5 mb-1" }, Re = { class: "text-xs font-semibold" }, Se = { class: "text-xs text-muted-foreground" }, Be = { class: "font-medium text-foreground ml-1" }, He = /* @__PURE__ */ re({
   __name: "PieChart",
   props: {
     data: {},
@@ -13,59 +14,72 @@ const ye = { class: "shrink-0" }, ge = ["width", "height"], be = ["id"], Me = ["
     startAngle: { default: -90 },
     showLegend: { type: Boolean, default: !0 },
     legendPosition: { default: "right" },
+    legendsVariant: { default: "default" },
     labelMode: { default: "percent" },
-    colors: { default: () => he },
+    colors: { default: () => me },
     animate: { type: Boolean, default: !0 },
     showTooltip: { type: Boolean, default: !0 },
     centerLabel: {},
     centerValue: {}
   },
   setup(e) {
-    const o = e, O = Math.random().toString(36).slice(2, 7), L = E(o.animate ? 0 : 1);
-    let A = null;
-    function j() {
-      A?.(), L.value = 0, A = xe(1e3, (a) => L.value = a);
+    const t = e, H = Math.random().toString(36).slice(2, 7), w = B(t.animate ? 0 : 1);
+    let p = null;
+    function I() {
+      p?.(), w.value = 0, p = ye(1e3, (l) => w.value = l);
     }
-    ie(() => {
-      o.animate && j();
-    }), ue(() => o.data, () => {
-      o.animate && j();
-    }, { deep: !0 }), re(() => A?.());
-    const X = f(() => o.labelMode === "outside"), m = f(() => o.size / 2), v = f(() => o.size / 2), x = f(() => o.size / 2 - (X.value ? 36 : 4)), Y = f(() => o.donut ? x.value * (o.innerRadius / 100) : 0), P = f(() => o.data.reduce((a, n) => a + n.value, 0) || 1), k = f(() => {
-      let a = o.startAngle;
-      return o.data.map((n, t) => {
-        const l = n.value / P.value, c = l * 360 * L.value, C = n.color ?? _(o.colors, t), g = a, R = a + c;
-        a += l * 360;
-        const F = (g + R) / 2 * (Math.PI / 180), w = Math.cos(F), S = Math.sin(F), B = w >= 0, H = x.value * 0.65 + Y.value * 0.35;
-        let U = m.value + H * w, q = v.value + H * S, G = "middle", J = 0, K = 0, V = 0, T = 0, D = 0, N = 0, Q = "";
-        if (X.value) {
-          const W = x.value + 20, ae = 14;
-          J = m.value + x.value * w, K = v.value + x.value * S, V = m.value + W * w, T = v.value + W * S, D = V + ae * (B ? 1 : -1), N = T, Q = `M ${J},${K} L ${V},${T} L ${D},${N}`, U = D + 5 * (B ? 1 : -1), q = N, G = B ? "start" : "end";
+    ue(() => {
+      t.animate && I();
+    }), de(
+      () => t.data,
+      () => {
+        t.animate && I();
+      },
+      { deep: !0 }
+    ), ce(() => p?.());
+    const O = d(() => t.labelMode === "outside"), h = d(() => t.size / 2), c = d(() => t.size / 2), m = d(() => t.size / 2 - (O.value ? 36 : 4)), X = d(() => t.donut ? m.value * (t.innerRadius / 100) : 0), $ = d(() => t.data.reduce((l, a) => l + a.value, 0) || 1), ee = d(() => t.legendPosition === "bottom" ? t.legendsVariant === "variant2" ? "flex flex-col items-stretch gap-5 w-full" : "inline-flex flex-col items-center gap-4" : "inline-flex flex-row items-center gap-6"), M = d(() => {
+      let l = t.startAngle;
+      return t.data.map((a, o) => {
+        const n = a.value / $.value, g = n * 360 * w.value, L = a.color ?? ge(t.colors, o), y = l, z = l + g;
+        l += n * 360;
+        const Y = (y + z) / 2 * (Math.PI / 180), k = Math.cos(Y), P = Math.sin(Y), A = k >= 0, j = m.value * 0.65 + X.value * 0.35;
+        let F = h.value + j * k, U = c.value + j * P, q = "middle", G = 0, J = 0, V = 0, C = 0, R = 0, S = 0, K = "";
+        if (O.value) {
+          const Q = m.value + 20, se = 14;
+          G = h.value + m.value * k, J = c.value + m.value * P, V = h.value + Q * k, C = c.value + Q * P, R = V + se * (A ? 1 : -1), S = C, K = `M ${G},${J} L ${V},${C} L ${R},${S}`, F = R + 5 * (A ? 1 : -1), U = S, q = A ? "start" : "end";
         }
-        const ne = me(m.value, v.value, x.value, g, R, Y.value);
+        const ie = xe(h.value, c.value, m.value, y, z, X.value);
         let b = "";
-        return o.labelMode === "percent" ? b = `${Math.round(l * 100)}%` : o.labelMode === "value" ? b = z(n.value) : o.labelMode === "label" ? b = n.label : o.labelMode === "outside" && (b = `${z(n.value)} (${Math.round(l * 100)}%)`), { d: n, path: ne, color: C, lx: U, ly: q, label: b, pct: l, startA: g, endA: R, leaderPath: Q, textAnchor: G };
+        return t.labelMode === "percent" ? b = `${Math.round(n * 100)}%` : t.labelMode === "value" ? b = E(a.value) : t.labelMode === "label" ? b = a.label : t.labelMode === "outside" && (b = `${E(a.value)} (${Math.round(n * 100)}%)`), { d: a, path: ie, color: L, lx: F, ly: U, label: b, pct: n, startA: y, endA: z, leaderPath: K, textAnchor: q };
       });
-    }), y = E(null), r = E(null);
-    function ee(a, n) {
-      y.value = n, o.showTooltip && (r.value = { x: a.clientX, y: a.clientY, item: k.value[n] });
+    }), v = B(null), r = B(null);
+    function te(l, a) {
+      v.value = a, t.showTooltip && (r.value = { x: l.clientX, y: l.clientY, item: M.value[a] });
     }
-    function te(a) {
-      r.value && (r.value = { ...r.value, x: a.clientX, y: a.clientY });
+    function le(l) {
+      r.value && (r.value = { ...r.value, x: l.clientX, y: l.clientY });
     }
-    function le() {
-      y.value = null, r.value = null;
+    function oe() {
+      v.value = null, r.value = null;
     }
-    function oe(a, n, t) {
-      if (y.value !== a) return "";
-      const l = (n + t) / 2 * (Math.PI / 180), c = 8, C = Math.cos(l) * c, g = Math.sin(l) * c;
-      return `translate(${C}, ${g})`;
+    function ne(l) {
+      v.value = l;
     }
-    return (a, n) => (s(), i("div", {
-      class: Z(["vlite-pie-chart inline-flex gap-6 select-none", e.legendPosition === "bottom" ? "flex-col items-center" : "flex-row items-center"])
+    function ae(l, a, o) {
+      if (v.value !== l) return "";
+      const n = (a + o) / 2 * (Math.PI / 180), g = 8, L = Math.cos(n) * g, y = Math.sin(n) * g;
+      return `translate(${L}, ${y})`;
+    }
+    return (l, a) => (i(), s("div", {
+      class: W(["vlite-pie-chart select-none", ee.value])
     }, [
-      u("div", ye, [
-        (s(), i("svg", {
+      u("div", {
+        class: W([
+          "shrink-0",
+          e.legendPosition === "bottom" && e.legendsVariant === "variant2" ? "self-center" : ""
+        ])
+      }, [
+        (i(), s("svg", {
           width: e.size,
           height: e.size,
           role: "img",
@@ -74,130 +88,120 @@ const ye = { class: "shrink-0" }, ge = ["width", "height"], be = ["id"], Me = ["
         }, [
           u("defs", null, [
             u("filter", {
-              id: `shadow-${M(O)}`,
+              id: `shadow-${T(H)}`,
               x: "-20%",
               y: "-20%",
               width: "140%",
               height: "140%"
-            }, [...n[1] || (n[1] = [
+            }, [...a[0] || (a[0] = [
               u("feDropShadow", {
                 dx: "0",
                 dy: "2",
                 stdDeviation: "3",
                 "flood-opacity": "0.12"
               }, null, -1)
-            ])], 8, be)
+            ])], 8, ke)
           ]),
           u("g", {
-            filter: `url(#shadow-${M(O)})`
+            filter: `url(#shadow-${T(H)})`
           }, [
-            (s(!0), i(p, null, $(k.value, (t, l) => (s(), i("path", {
-              key: l,
-              d: t.path,
-              fill: t.color,
-              transform: oe(l, t.startA, t.endA),
+            (i(!0), s(D, null, N(M.value, (o, n) => (i(), s("path", {
+              key: n,
+              d: o.path,
+              fill: o.color,
+              transform: ae(n, o.startA, o.endA),
               class: "cursor-pointer transition-transform duration-200",
+              opacity: v.value !== null && v.value !== n ? 0.55 : 1,
               stroke: "var(--color-background)",
               "stroke-width": "2",
-              onMouseenter: (c) => ee(c, l),
-              onMousemove: te,
-              onMouseleave: le
-            }, null, 40, ke))), 128))
-          ], 8, Me),
-          e.labelMode === "outside" ? (s(), i("g", we, [
-            (s(!0), i(p, null, $(k.value, (t, l) => (s(), i("path", {
-              key: `leader-${l}`,
-              d: t.leaderPath,
+              onMouseenter: (g) => te(g, n),
+              onMousemove: le,
+              onMouseleave: oe
+            }, null, 40, pe))), 128))
+          ], 8, we),
+          e.labelMode === "outside" ? (i(), s("g", $e, [
+            (i(!0), s(D, null, N(M.value, (o, n) => (i(), s("path", {
+              key: `leader-${n}`,
+              d: o.leaderPath,
               fill: "none",
               stroke: "var(--color-muted-foreground)",
               "stroke-width": "1",
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
-              opacity: t.pct > 0.02 ? 0.5 : 0
-            }, null, 8, pe))), 128))
-          ])) : h("", !0),
-          e.labelMode !== "none" ? (s(!0), i(p, { key: 1 }, $(k.value, (t, l) => (s(), i("text", {
-            key: `lbl-${l}`,
-            x: t.lx,
-            y: t.ly,
-            "text-anchor": e.labelMode === "outside" ? t.textAnchor : "middle",
+              opacity: o.pct > 0.02 ? 0.5 : 0
+            }, null, 8, Le))), 128))
+          ])) : f("", !0),
+          e.labelMode !== "none" ? (i(!0), s(D, { key: 1 }, N(M.value, (o, n) => (i(), s("text", {
+            key: `lbl-${n}`,
+            x: o.lx,
+            y: o.ly,
+            "text-anchor": e.labelMode === "outside" ? o.textAnchor : "middle",
             "dominant-baseline": "middle",
             "font-size": e.labelMode === "outside" ? 11.5 : 11,
             "font-weight": e.labelMode === "outside" ? "500" : "600",
             fill: e.labelMode === "outside" ? "var(--color-foreground)" : "white",
-            opacity: t.pct > 0.04 ? 1 : 0
-          }, d(t.label), 9, $e))), 128)) : h("", !0),
-          e.donut ? (s(), i("g", ze, [
-            de(a.$slots, "center", {
-              total: P.value,
+            opacity: o.pct > 0.04 ? 1 : 0
+          }, x(o.label), 9, ze))), 128)) : f("", !0),
+          e.donut ? (i(), s("g", Pe, [
+            ve(l.$slots, "center", {
+              total: $.value,
               data: e.data
             }, () => [
-              e.centerValue ? (s(), i("text", {
+              e.centerValue ? (i(), s("text", {
                 key: 0,
-                x: m.value,
-                y: e.centerLabel ? v.value - 8 : v.value,
+                x: h.value,
+                y: e.centerLabel ? c.value - 8 : c.value,
                 "text-anchor": "middle",
                 "dominant-baseline": "central",
                 "font-size": "22",
                 "font-weight": "700",
                 class: "fill-foreground"
-              }, d(e.centerValue), 9, Le)) : h("", !0),
-              e.centerLabel ? (s(), i("text", {
+              }, x(e.centerValue), 9, Ae)) : f("", !0),
+              e.centerLabel ? (i(), s("text", {
                 key: 1,
-                x: m.value,
-                y: v.value + (e.centerValue ? 14 : 0),
+                x: h.value,
+                y: c.value + (e.centerValue ? 14 : 0),
                 "text-anchor": "middle",
                 "dominant-baseline": "middle",
                 "font-size": "12",
                 class: "fill-muted-foreground"
-              }, d(e.centerLabel), 9, Ae)) : h("", !0)
+              }, x(e.centerLabel), 9, Ve)) : f("", !0)
             ])
-          ])) : h("", !0)
-        ], 8, ge))
-      ]),
-      e.showLegend ? (s(), i("div", {
+          ])) : f("", !0)
+        ], 8, Me))
+      ], 2),
+      e.showLegend ? (i(), Z(be, {
         key: 0,
-        class: Z(["flex flex-col gap-2 min-w-[120px]", e.legendPosition === "bottom" ? "flex-row flex-wrap justify-center" : ""])
-      }, [
-        (s(!0), i(p, null, $(e.data, (t, l) => (s(), i("div", {
-          key: l,
-          class: "flex items-center gap-2 cursor-pointer",
-          style: { transition: "opacity 0.15s" },
-          onMouseenter: (c) => y.value = l,
-          onMouseleave: n[0] || (n[0] = (c) => y.value = null)
-        }, [
-          u("span", {
-            class: "w-2.5 h-2.5 rounded-sm shrink-0",
-            style: I({ backgroundColor: t.color ?? M(_)(e.colors, l) })
-          }, null, 4),
-          u("div", Ce, [
-            u("div", Re, d(t.label), 1),
-            u("div", Se, d(M(z)(t.value)) + " (" + d(Math.round(t.value / P.value * 100)) + "%) ", 1)
-          ])
-        ], 40, Pe))), 128))
-      ], 2)) : h("", !0),
-      (s(), ce(ve, { to: "body" }, [
-        r.value ? (s(), i("div", {
+        data: e.data,
+        total: $.value,
+        colors: e.colors,
+        "legends-variant": e.legendsVariant,
+        "legend-position": e.legendPosition,
+        "hovered-index": v.value,
+        onHover: ne
+      }, null, 8, ["data", "total", "colors", "legends-variant", "legend-position", "hovered-index"])) : f("", !0),
+      (i(), Z(fe, { to: "body" }, [
+        r.value ? (i(), s("div", {
           key: 0,
           class: "vlite-chart-tooltip",
-          style: I({ left: `${r.value.x + 12}px`, top: `${r.value.y - 10}px` })
+          style: _({ left: `${r.value.x + 12}px`, top: `${r.value.y - 10}px` })
         }, [
-          u("div", Be, [
+          u("div", Ce, [
             u("span", {
               class: "w-2.5 h-2.5 rounded-sm shrink-0",
-              style: I({ backgroundColor: r.value.item.color })
+              style: _({ backgroundColor: r.value.item.color })
             }, null, 4),
-            u("span", Ve, d(r.value.item.d.label), 1)
+            u("span", Re, x(r.value.item.d.label), 1)
           ]),
-          u("div", Te, [
-            fe(d(M(z)(r.value.item.d.value)) + " ", 1),
-            u("span", De, " (" + d(Math.round(r.value.item.pct * 100)) + "%) ", 1)
+          u("div", Se, [
+            he(x(T(E)(r.value.item.d.value)) + " ", 1),
+            u("span", Be, " (" + x(Math.round(r.value.item.pct * 100)) + "%) ", 1)
           ])
-        ], 4)) : h("", !0)
+        ], 4)) : f("", !0)
       ]))
     ], 2));
   }
 });
 export {
-  Oe as default
+  He as default
 };

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

@@ -13,8 +13,8 @@ export interface SegmentBarChartProps {
 declare const _default: import('vue').DefineComponent<SegmentBarChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SegmentBarChartProps> & Readonly<{}>, {
     animate: boolean;
     colors: string[];
-    showLabels: boolean;
     showTooltip: boolean;
+    showLabels: boolean;
     barRadius: number;
     showValues: boolean;
     barHeight: number;

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

@@ -14,9 +14,9 @@ declare const _default: import('vue').DefineComponent<TimelineChartProps, {}, {}
     animate: boolean;
     height: number;
     colors: string[];
-    showLabels: boolean;
-    showTooltip: boolean;
     showGrid: boolean;
+    showTooltip: boolean;
+    showLabels: boolean;
     barRadius: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;