vlite3 1.4.25 → 1.4.26

package/components/Stats/Stats.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as y, computed as l, openBlock as i, createElementBlock as r, normalizeClass as d, createElementVNode as h, Fragment as u, renderList as s, createBlock as g } from "vue";
+import { defineComponent as y, computed as n, openBlock as i, createElementBlock as r, normalizeClass as d, createElementVNode as f, Fragment as u, renderList as s, createBlock as g } from "vue";
 import S from "./StatItem.vue.js";
-const C = /* @__PURE__ */ y({
+const k = /* @__PURE__ */ y({
   __name: "Stats",
   props: {
     items: {},
@@ -14,70 +14,74 @@ const C = /* @__PURE__ */ y({
     iconSize: { default: "" },
     iconBoxShape: { default: "rounded" },
     iconBoxStyle: { default: "filled" },
+    sparklineHeight: { default: 56 },
     class: { default: "" }
   },
-  setup(a) {
-    const t = a, c = l(() => {
-      const e = Number(t.columns) || 4;
-      return e === 1 ? "grid-cols-1" : e === 2 ? "grid-cols-1 sm:grid-cols-2" : e === 3 ? "grid-cols-1 sm:grid-cols-3" : e === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : e === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : e === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
-    }), m = l(() => [
+  setup(e) {
+    const t = e, c = n(() => {
+      const a = Number(t.columns) || 4;
+      return a === 1 ? "grid-cols-1" : a === 2 ? "grid-cols-1 sm:grid-cols-2" : a === 3 ? "grid-cols-1 sm:grid-cols-3" : a === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : a === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : a === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+    }), h = n(() => [
       "grid",
       c.value,
+      t.layout === "layout-9" ? "items-stretch" : "",
       t.variant === "transparent-header" ? "gap-2 md:gap-3.5" : "gap-3 sm:gap-4.5",
       t?.layout === "layout-8" ? "rounded-sm" : "",
       t.class
-    ].join(" ")), v = l(() => [
+    ].join(" ")), m = n(() => [
       t.layout === "layout-8" ? "rounded-sm" : "rounded-lg",
       "overflow-hidden",
       t.variant !== "transparent" ? "border border-border" : "",
       t.variant === "shadow" ? "shadow-md bg-card" : "",
       t.class
-    ].join(" ")), f = l(() => [
+    ].join(" ")), v = n(() => [
       "grid",
       c.value,
       "w-[calc(100%+1px)] -mb-px -mr-px gap-0"
     ].join(" "));
-    return (e, x) => a.attached ? (i(), r("div", {
+    return (a, x) => e.attached ? (i(), r("div", {
       key: 0,
-      class: d(v.value)
+      class: d(m.value)
     }, [
-      h("div", {
-        class: d(f.value)
+      f("div", {
+        class: d(v.value)
       }, [
-        (i(!0), r(u, null, s(a.items, (n, o) => (i(), g(S, {
-          key: n.id || o,
-          item: n,
-          variant: a.variant.startsWith("transparent") ? "transparent" : a.variant,
-          layout: a.variant === "transparent-header" ? "layout-5" : a.layout,
-          attached: a.attached,
-          loading: a.loading,
-          titleSize: a.variant === "transparent-header" && !a.titleSize ? "text-sm font-normal! text-gray-900" : a.titleSize,
-          valueSize: a.variant === "transparent-header" && !a.valueSize ? "text-lg font-bold text-gray-900" : a.valueSize,
-          iconSize: a.iconSize,
-          iconBoxShape: a.iconBoxShape,
-          iconBoxStyle: a.iconBoxStyle
-        }, null, 8, ["item", "variant", "layout", "attached", "loading", "titleSize", "valueSize", "iconSize", "iconBoxShape", "iconBoxStyle"]))), 128))
+        (i(!0), r(u, null, s(e.items, (l, o) => (i(), g(S, {
+          key: l.id || o,
+          item: l,
+          variant: e.variant.startsWith("transparent") ? "transparent" : e.variant,
+          layout: e.variant === "transparent-header" ? "layout-5" : e.layout,
+          attached: e.attached,
+          loading: e.loading,
+          titleSize: e.variant === "transparent-header" && !e.titleSize ? "text-sm font-normal! text-gray-900" : e.titleSize,
+          valueSize: e.variant === "transparent-header" && !e.valueSize ? "text-lg font-bold text-gray-900" : e.valueSize,
+          iconSize: e.iconSize,
+          iconBoxShape: e.iconBoxShape,
+          iconBoxStyle: e.iconBoxStyle,
+          sparklineHeight: e.sparklineHeight
+        }, null, 8, ["item", "variant", "layout", "attached", "loading", "titleSize", "valueSize", "iconSize", "iconBoxShape", "iconBoxStyle", "sparklineHeight"]))), 128))
       ], 2)
     ], 2)) : (i(), r("div", {
       key: 1,
-      class: d(m.value)
+      class: d(h.value)
     }, [
-      (i(!0), r(u, null, s(a.items, (n, o) => (i(), g(S, {
-        key: n.id || o,
-        item: n,
-        variant: a.variant.startsWith("transparent") ? "transparent" : a.variant,
-        layout: a.variant === "transparent-header" ? "layout-5" : a.layout,
-        attached: a.attached,
-        loading: a.loading,
-        titleSize: a.variant === "transparent-header" && !a.titleSize ? "text-sm font-normal! text-gray-900" : a.titleSize,
-        valueSize: a.variant === "transparent-header" && !a.valueSize ? "text-lg font-bold text-gray-900" : a.valueSize,
-        iconSize: a.iconSize,
-        iconBoxShape: a.iconBoxShape,
-        iconBoxStyle: a.iconBoxStyle
-      }, null, 8, ["item", "variant", "layout", "attached", "loading", "titleSize", "valueSize", "iconSize", "iconBoxShape", "iconBoxStyle"]))), 128))
+      (i(!0), r(u, null, s(e.items, (l, o) => (i(), g(S, {
+        key: l.id || o,
+        item: l,
+        variant: e.variant.startsWith("transparent") ? "transparent" : e.variant,
+        layout: e.variant === "transparent-header" ? "layout-5" : e.layout,
+        attached: e.attached,
+        loading: e.loading,
+        titleSize: e.variant === "transparent-header" && !e.titleSize ? "text-sm font-normal! text-gray-900" : e.titleSize,
+        valueSize: e.variant === "transparent-header" && !e.valueSize ? "text-lg font-bold text-gray-900" : e.valueSize,
+        iconSize: e.iconSize,
+        iconBoxShape: e.iconBoxShape,
+        iconBoxStyle: e.iconBoxStyle,
+        sparklineHeight: e.sparklineHeight
+      }, null, 8, ["item", "variant", "layout", "attached", "loading", "titleSize", "valueSize", "iconSize", "iconBoxShape", "iconBoxStyle", "sparklineHeight"]))), 128))
     ], 2));
   }
 });
 export {
-  C as default
+  k as default
 };

package/components/Stats/components/StatTrend.vue.js

@@ -1,48 +1,51 @@
-import { defineComponent as f, computed as s, openBlock as l, createElementBlock as i, normalizeClass as a, createVNode as d, createTextVNode as g, toDisplayString as o, createElementVNode as y, createCommentVNode as x } from "vue";
-import m from "../../Icon.vue.js";
-const v = {
-  key: 0,
-  class: "text-muted-foreground truncate"
-}, p = /* @__PURE__ */ f({
+import { defineComponent as k, computed as t, openBlock as u, createElementBlock as s, normalizeClass as l, createBlock as g, createCommentVNode as i, createTextVNode as h, toDisplayString as c, createElementVNode as C } from "vue";
+import x from "../../Icon.vue.js";
+const w = {
+  key: 1,
+  class: "text-muted-foreground truncate font-normal"
+}, B = /* @__PURE__ */ k({
   __name: "StatTrend",
   props: {
     trend: {},
     layout: {}
   },
-  setup(e) {
-    const t = e, u = s(() => t.layout === "layout-8"), r = s(() => t.layout === "layout-5"), c = s(() => {
-      if (u.value)
-        return [
-          "shrink-0 flex items-center gap-0.5 text-xs font-medium",
-          t.trend.isPositive ? "text-success-subtle-fg" : "text-danger-subtle-fg"
-        ].join(" ");
-      const n = "flex items-center text-sm";
-      return r.value ? `${n} gap-1` : t.layout === "layout-6" || t.layout === "layout-1" || t.layout === "layout-2" || t.layout === "layout-3" ? `${n} mt-2 gap-1.5` : `${n} mt-1 gap-1`;
+  setup(n) {
+    const e = n, d = t(() => e.layout === "layout-8"), f = t(() => e.layout === "layout-5"), m = t(() => e.layout === "layout-9"), a = t(() => e.trend.neutral || e.trend.isPositive === null ? "neutral" : e.trend.isPositive === !1 ? "negative" : "positive"), o = t(() => a.value === "neutral" ? "text-muted-foreground" : a.value === "negative" ? "text-danger-subtle-fg" : "text-success-subtle-fg"), p = t(() => a.value === "neutral" ? "text-muted-foreground" : a.value === "negative" ? "text-danger" : "text-success"), v = t(() => a.value === "neutral" ? "lucide:minus" : a.value === "negative" ? "lucide:trending-down" : "lucide:trending-up"), y = t(() => {
+      if (d.value)
+        return ["shrink-0 flex items-center gap-0.5 text-xs font-medium", o.value].join(
+          " "
+        );
+      if (m.value)
+        return ["flex items-center gap-1 mt-1.5 text-xs", o.value].join(" ");
+      const r = "flex items-center text-sm";
+      return f.value ? `${r} gap-1` : e.layout === "layout-6" || e.layout === "layout-1" || e.layout === "layout-2" || e.layout === "layout-3" ? `${r} mt-2 gap-1.5` : `${r} mt-1 gap-1`;
     });
-    return (n, b) => u.value ? (l(), i("span", {
+    return (r, b) => d.value ? (u(), s("span", {
       key: 0,
-      class: a(c.value)
+      class: l(y.value)
     }, [
-      d(m, {
-        icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
+      n.trend.hideIcon ? i("", !0) : (u(), g(x, {
+        key: 0,
+        icon: v.value,
         class: "w-3 h-3"
-      }, null, 8, ["icon"]),
-      g(" " + o(e.trend.value), 1)
-    ], 2)) : (l(), i("div", {
+      }, null, 8, ["icon"])),
+      h(" " + c(n.trend.value), 1)
+    ], 2)) : (u(), s("div", {
       key: 1,
-      class: a(c.value)
+      class: l(y.value)
     }, [
-      d(m, {
-        icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
-        class: a([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
-      }, null, 8, ["icon", "class"]),
-      y("span", {
-        class: a([e.trend.isPositive ? "text-success-subtle-fg" : "text-danger-subtle-fg", "font-medium whitespace-nowrap"])
-      }, o(e.trend.value), 3),
-      e.trend.label && !r.value ? (l(), i("span", v, o(e.trend.label), 1)) : x("", !0)
+      n.trend.hideIcon ? i("", !0) : (u(), g(x, {
+        key: 0,
+        icon: v.value,
+        class: l([p.value, m.value ? "w-3.5 h-3.5" : "w-4 h-4", "shrink-0"])
+      }, null, 8, ["icon", "class"])),
+      C("span", {
+        class: l([o.value, "font-medium whitespace-nowrap"])
+      }, c(n.trend.value), 3),
+      n.trend.label && !f.value ? (u(), s("span", w, c(n.trend.label), 1)) : i("", !0)
     ], 2));
   }
 });
 export {
-  p as default
+  B as default
 };

package/components/Stats/types.d.ts

@@ -1,11 +1,28 @@
 export type StatsVariant = 'solid' | 'outline' | 'shadow' | 'transparent' | 'transparent-header';
-export type StatsLayout = 'layout-1' | 'layout-2' | 'layout-3' | 'layout-4' | 'layout-5' | 'layout-6' | 'layout-7' | 'layout-8';
+export type StatsLayout = 'layout-1' | 'layout-2' | 'layout-3' | 'layout-4' | 'layout-5' | 'layout-6' | 'layout-7' | 'layout-8'
+/** Executive / sparkline card: icon → title → value → trend → sparkline */
+ | 'layout-9';
 export type IconBoxShape = 'rounded' | 'full-rounded' | 'none';
 export type IconBoxStyle = 'filled' | 'transparent';
 export interface StatTrend {
     value: string | number;
-    isPositive?: boolean;
+    /**
+     * Trend direction. `true` = positive/up, `false` = negative/down,
+     * `null`/`undefined` with no explicit flag falls back to positive styling
+     * unless `neutral` is set.
+     */
+    isPositive?: boolean | null;
+    /** Force neutral (muted) trend styling */
+    neutral?: boolean;
+    /** Comparison text, e.g. "vs last period" */
     label?: string;
+    /** Hide the trending arrow icon */
+    hideIcon?: boolean;
+}
+export interface StatSparklinePoint {
+    label?: string;
+    value: number;
+    color?: string;
 }
 export interface StatItemSchema {
     id: string | number;
@@ -18,6 +35,17 @@ export interface StatItemSchema {
     icon?: string;
     color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | string;
     trend?: StatTrend;
+    /**
+     * Optional sparkline data for `layout-9`.
+     * Accepts chart points or a plain number series.
+     */
+    sparkline?: StatSparklinePoint[] | number[];
+    /** Override sparkline stroke/fill color (defaults to item.color) */
+    sparklineColor?: string;
+    /** Fill area under the sparkline (default: true for layout-9) */
+    sparklineFill?: boolean;
+    /** Per-item sparkline height override */
+    sparklineHeight?: number;
     [key: string]: any;
 }
 export interface StatsProps {
@@ -32,5 +60,7 @@ export interface StatsProps {
     iconSize?: string;
     iconBoxShape?: IconBoxShape;
     iconBoxStyle?: IconBoxStyle;
+    /** Default sparkline height for layout-9 (px) */
+    sparklineHeight?: number;
     class?: string;
 }