vlite3 1.4.25 → 1.4.27

package/components/CategoryManager/CategoryManager.vue2.js

@@ -15,6 +15,7 @@ import "v-tooltip-lite/style.css";
 /* empty css                            */
 import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
+/* empty css                      */
 import "@jaames/iro";
 import "@vueuse/core";
 /* empty css                           */
@@ -45,7 +46,7 @@ const Ue = { class: "flex items-center justify-between mb-6" }, Oe = { class: "t
 }, Le = {
   key: 0,
   class: "absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-background/60 backdrop-blur-[1px] transition-opacity"
-}, We = { class: "flex items-center gap-2 text-sm text-muted-foreground" }, At = /* @__PURE__ */ Me({
+}, We = { class: "flex items-center gap-2 text-sm text-muted-foreground" }, kt = /* @__PURE__ */ Me({
   __name: "CategoryManager",
   props: {
     modelValue: { default: () => [] },
@@ -494,5 +495,5 @@ const Ue = { class: "flex items-center justify-between mb-6" }, Oe = { class: "t
   }
 });
 export {
-  At as default
+  kt as default
 };

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

@@ -33,9 +33,9 @@ declare const _default: import('vue').DefineComponent<BarChartProps, {}, {}, {},
     height: number;
     orientation: "vertical" | "horizontal";
     colors: string[];
+    showGrid: boolean;
     showLegend: boolean;
     showTooltip: boolean;
-    showGrid: boolean;
     showXAxis: boolean;
     showYAxis: boolean;
     showXLabels: boolean;

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

@@ -0,0 +1,22 @@
+import { ChartDataPoint } from './types';
+export type ChartLegendsVariant = 'default' | 'variant1' | 'variant2';
+export type ChartLegendPosition = 'right' | 'bottom';
+type __VLS_Props = {
+    data: ChartDataPoint[];
+    total: number;
+    colors?: string[];
+    legendsVariant?: ChartLegendsVariant;
+    legendPosition?: ChartLegendPosition;
+    hoveredIndex?: number | null;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    hover: (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHover?: (index: number) => any;
+}>, {
+    colors: string[];
+    legendsVariant: ChartLegendsVariant;
+    legendPosition: ChartLegendPosition;
+    hoveredIndex: number | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/Chart/ChartLegend.vue.js

@@ -0,0 +1,91 @@
+import { defineComponent as b, computed as m, openBlock as a, createElementBlock as u, normalizeClass as c, Fragment as f, renderList as p, createElementVNode as t, normalizeStyle as v, toDisplayString as r, unref as h, createTextVNode as k } from "vue";
+import { getColor as M, formatNumber as g } from "./utils.js";
+const _ = ["onMouseenter"], C = { class: "text-xs text-foreground whitespace-nowrap" }, I = { class: "font-medium" }, V = { class: "text-muted-foreground" }, $ = ["onMouseenter"], N = { class: "inline-flex items-center gap-2 min-w-0" }, j = { class: "text-xs font-medium text-foreground truncate" }, z = { class: "text-xs text-muted-foreground tabular-nums shrink-0 text-right" }, B = { class: "text-foreground/70" }, E = ["onMouseenter"], L = { class: "min-w-0" }, P = { class: "text-xs font-medium text-foreground truncate" }, S = { class: "text-[10px] text-muted-foreground" }, T = /* @__PURE__ */ b({
+  __name: "ChartLegend",
+  props: {
+    data: {},
+    total: {},
+    colors: { default: () => [] },
+    legendsVariant: { default: "default" },
+    legendPosition: { default: "right" },
+    hoveredIndex: { default: null }
+  },
+  emits: ["hover"],
+  setup(o, { emit: y }) {
+    const i = o, d = y, x = m(
+      () => i.data.map((l, n) => {
+        const e = Number(l.value) || 0, s = i.total ? Math.round(e / i.total * 100) : 0;
+        return {
+          ...l,
+          index: n,
+          color: l.color ?? M(i.colors, n),
+          value: e,
+          pct: s
+        };
+      })
+    ), w = m(() => {
+      const l = i.legendsVariant, n = i.legendPosition;
+      return l === "variant1" ? "flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2 min-w-0 w-full" : l === "variant2" ? n === "bottom" ? "flex flex-col gap-2.5 w-full min-w-0" : "flex flex-col gap-2.5 min-w-[160px]" : n === "bottom" ? "flex flex-row flex-wrap justify-center gap-x-5 gap-y-3 min-w-0" : "flex flex-col gap-2 min-w-[120px]";
+    });
+    return (l, n) => (a(), u("div", {
+      class: c(w.value),
+      role: "list"
+    }, [
+      o.legendsVariant === "variant1" ? (a(!0), u(f, { key: 0 }, p(x.value, (e) => (a(), u("button", {
+        key: e.index,
+        type: "button",
+        role: "listitem",
+        class: c(["inline-flex items-center gap-2 text-left cursor-pointer transition-opacity duration-150", o.hoveredIndex !== null && o.hoveredIndex !== e.index ? "opacity-45" : "opacity-100"]),
+        onMouseenter: (s) => d("hover", e.index),
+        onMouseleave: n[0] || (n[0] = (s) => d("hover", null))
+      }, [
+        t("span", {
+          class: "w-2 h-2 rounded-full shrink-0",
+          style: v({ backgroundColor: e.color })
+        }, null, 4),
+        t("span", C, [
+          t("span", I, r(e.label), 1),
+          t("span", V, " (" + r(h(g)(e.value)) + ", " + r(e.pct) + "%) ", 1)
+        ])
+      ], 42, _))), 128)) : o.legendsVariant === "variant2" ? (a(!0), u(f, { key: 1 }, p(x.value, (e) => (a(), u("button", {
+        key: e.index,
+        type: "button",
+        role: "listitem",
+        class: c(["flex w-full items-center justify-between gap-4 text-left cursor-pointer transition-opacity duration-150", o.hoveredIndex !== null && o.hoveredIndex !== e.index ? "opacity-45" : "opacity-100"]),
+        onMouseenter: (s) => d("hover", e.index),
+        onMouseleave: n[1] || (n[1] = (s) => d("hover", null))
+      }, [
+        t("span", N, [
+          t("span", {
+            class: "w-2.5 h-2.5 rounded-sm shrink-0",
+            style: v({ backgroundColor: e.color })
+          }, null, 4),
+          t("span", j, r(e.label), 1)
+        ]),
+        t("span", z, [
+          k(r(h(g)(e.value)) + " ", 1),
+          t("span", B, "(" + r(e.pct) + "%)", 1)
+        ])
+      ], 42, $))), 128)) : (a(!0), u(f, { key: 2 }, p(x.value, (e) => (a(), u("button", {
+        key: e.index,
+        type: "button",
+        role: "listitem",
+        class: c(["flex items-center gap-2 cursor-pointer text-left transition-opacity duration-150", o.hoveredIndex !== null && o.hoveredIndex !== e.index ? "opacity-45" : "opacity-100"]),
+        onMouseenter: (s) => d("hover", e.index),
+        onMouseleave: n[2] || (n[2] = (s) => d("hover", null))
+      }, [
+        t("span", {
+          class: "w-2.5 h-2.5 rounded-sm shrink-0",
+          style: v({ backgroundColor: e.color })
+        }, null, 4),
+        t("div", L, [
+          t("div", P, r(e.label), 1),
+          t("div", S, r(h(g)(e.value)) + " (" + r(e.pct) + "%) ", 1)
+        ])
+      ], 42, E))), 128))
+    ], 2));
+  }
+});
+export {
+  T as default
+};

package/components/Chart/ChartLegend.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ChartLegend.vue.js";
+export {
+  f as default
+};

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

@@ -43,9 +43,9 @@ declare const _default: import('vue').DefineComponent<GanttChartProps, {}, {}, {
     draggable: boolean;
     showHeader: boolean;
     colors: string[];
-    showLabels: boolean;
-    showTooltip: boolean;
     showGrid: boolean;
+    showTooltip: boolean;
+    showLabels: boolean;
     barRadius: number;
     rowHeight: number;
     barHeight: number;

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"]>;