vlite3 1.0.4 → 1.0.6

package/components/Stats/Stats.vue.js

@@ -1,37 +1,55 @@
-import { defineComponent as N, computed as w, openBlock as s, createElementBlock as a, normalizeClass as t, Fragment as y, renderList as V, normalizeStyle as v, createElementVNode as c, toDisplayString as l, unref as b, createVNode as f, createCommentVNode as d, createBlock as E, createTextVNode as L } from "vue";
+import { defineComponent as N, computed as w, openBlock as n, createElementBlock as r, normalizeClass as s, Fragment as y, renderList as V, normalizeStyle as b, createElementVNode as i, toDisplayString as c, unref as h, createVNode as f, createCommentVNode as d, createBlock as E, createTextVNode as L } from "vue";
 import g from "../Icon.vue.js";
-import { $t as h } from "../../utils/i18n.js";
+import { $t as v } from "../../utils/i18n.js";
 const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
   key: 0,
-  class: "mt-1 flex items-center gap-1 text-sm"
+  class: "h-8 w-24 bg-gray-50 animate-pulse rounded-md"
 }, F = {
+  key: 2,
+  class: "mt-1 flex items-center gap-1 text-sm"
+}, T = {
   key: 0,
   class: "text-muted-foreground truncate"
-}, T = {
+}, q = {
   key: 0,
+  class: "h-9 w-24 bg-gray-50 animate-pulse rounded-md"
+}, A = {
+  key: 2,
   class: "flex items-center gap-1 text-sm"
-}, q = {
+}, G = {
   key: 1,
+  class: "h-8 w-20 bg-gray-50 animate-pulse rounded-md mt-1"
+}, H = {
+  key: 3,
   class: "mt-2 flex items-center gap-1.5 text-sm"
-}, A = {
+}, J = {
   key: 0,
   class: "text-muted-foreground truncate"
-}, G = {
+}, K = {
   key: 3,
   class: "flex-1 flex flex-col justify-center min-w-0"
-}, H = {
+}, Q = {
   key: 0,
+  class: "h-9 w-24 bg-gray-50 animate-pulse rounded-md mt-0.5"
+}, R = {
+  key: 2,
   class: "mt-1 flex items-center gap-1 text-sm"
-}, J = {
+}, U = {
   key: 0,
   class: "text-muted-foreground truncate"
-}, K = { class: "flex-1 flex flex-col justify-center min-w-0" }, Q = { class: "flex items-baseline gap-2 mt-1" }, R = {
+}, W = {
+  key: 1,
+  class: "h-6 w-5 bg-gray-50 animate-pulse rounded-sm shrink-0"
+}, X = { class: "flex-1 flex flex-col justify-center min-w-0" }, Y = { class: "flex items-baseline gap-2 mt-1" }, Z = {
+  key: 0,
+  class: "h-8 w-24 bg-gray-50 animate-pulse rounded-md"
+}, _ = {
   key: 0,
   class: "mt-2 flex items-center gap-1.5 text-sm"
-}, U = {
+}, ee = {
   key: 0,
   class: "text-muted-foreground truncate"
-}, Z = /* @__PURE__ */ N({
+}, se = /* @__PURE__ */ N({
   __name: "Stats",
   props: {
     items: {},
@@ -39,6 +57,7 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
     layout: { default: "icon-left" },
     columns: { default: 4 },
     attached: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
     titleSize: { default: "" },
     valueSize: { default: "" },
     iconSize: { default: "" },
@@ -46,19 +65,22 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
     iconBoxStyle: { default: "transparent" },
     class: { default: "" }
   },
-  setup(n) {
-    const o = n, S = w(() => {
-      const i = Number(o.columns) || 4;
-      return i === 1 ? "grid-cols-1" : i === 2 ? "grid-cols-1 sm:grid-cols-2" : i === 3 ? "grid-cols-1 sm:grid-cols-3" : i === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : i === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : i === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
-    }), z = w(() => [
-      "grid",
-      S.value,
-      o.attached ? "gap-0 border-t border-l overflow-hidden" : "gap-3 sm:gap-4.5",
-      o.variant === "shadow" && o.attached ? "shadow-md" : "",
-      o?.layout === "inline-label-value" ? "rounded-sm overflow-hidden" : "",
-      o.class
-    ].join(" ")), I = (i, r) => {
-      const e = o.layout === "inline-label-value" ? "flex px-3.5 py-3 relative transition-all duration-200" : "flex p-3 relative transition-all duration-200", u = {
+  setup(t) {
+    const o = t, S = w(() => {
+      const l = Number(o.columns) || 4;
+      return l === 1 ? "grid-cols-1" : l === 2 ? "grid-cols-1 sm:grid-cols-2" : l === 3 ? "grid-cols-1 sm:grid-cols-3" : l === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : l === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : l === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+    }), z = w(() => {
+      const l = o.attached && o.variant !== "transparent" ? "border-t border-l border-border overflow-hidden" : "overflow-hidden";
+      return [
+        "grid",
+        S.value,
+        o.attached ? `gap-0 ${l}` : "gap-3 sm:gap-4.5",
+        o.variant === "shadow" && o.attached ? "shadow-md" : "",
+        o?.layout === "inline-label-value" ? "rounded-sm" : "",
+        o.class
+      ].join(" ");
+    }), C = (l, a) => {
+      const e = o.layout === "inline-label-value" ? "flex px-3.5 py-3 relative " : "flex p-3 relative ", u = {
         "icon-left": "flex-row items-center gap-3 text-left",
         "icon-right": "flex-row items-center justify-between gap-3 text-left",
         "icon-top": "flex-col items-start gap-1 px-5! pt-2! text-left",
@@ -75,11 +97,11 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
       }, j = u[o.layout] || u["icon-left"];
       let x = "";
       if (o.attached)
-        x = "border-b border-r hover:bg-muted/30", o.variant !== "transparent" && (x += " bg-card");
+        o.variant === "transparent" ? x = "border-b border-r border-transparent hover:bg-muted/30" : o.variant === "outline" ? x = "border-b border-r border-border hover:bg-muted/30" : x = "border-b border-r border-border hover:bg-muted/30 bg-card";
       else {
         switch (o.variant) {
           case "solid": {
-            const M = i.color || "primary", m = {
+            const M = l.color || "primary", p = {
               primary: "bg-primary-light",
               secondary: "bg-secondary",
               success: "bg-success-light",
@@ -87,14 +109,14 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
               danger: "bg-danger-light",
               info: "bg-info-light"
             };
-            x = `${m[M] || m.primary}`;
+            x = `${p[M] || p.primary}`;
             break;
           }
           case "outline":
-            x = "bg-body border";
+            x = "border border-border";
             break;
           case "shadow":
-            x = "bg-body shadow-md border border-border/50";
+            x = "bg-card shadow-md border border-border/50";
             break;
           case "transparent":
             x = "bg-transparent";
@@ -103,14 +125,14 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
         x += " rounded-lg";
       }
       return [e, j, x].join(" ");
-    }, C = (i) => {
+    }, I = (l) => {
       if (o.variant === "solid" && !o.attached) {
-        const r = i.color;
-        if (r && !["primary", "secondary", "success", "warning", "danger", "info"].includes(r))
-          return { backgroundColor: `${r}15` };
+        const a = l.color;
+        if (a && !["primary", "secondary", "success", "warning", "danger", "info"].includes(a))
+          return { backgroundColor: `${a}15` };
       }
       if (o.layout === "split-bar") {
-        const r = i.color, e = {
+        const a = l.color, e = {
           primary: "var(--color-primary)",
           secondary: "var(--color-secondary)",
           success: "var(--color-success)",
@@ -118,14 +140,14 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
           danger: "var(--color-danger)",
           info: "var(--color-info)"
         };
-        if (r)
-          return { borderLeftColor: e[r] || r };
+        if (a)
+          return { borderLeftColor: e[a] || a };
       }
       return {};
-    }, P = w(() => o.iconBoxShape === "full-rounded" ? "rounded-full" : o.iconBoxShape === "none" ? "rounded-none" : "rounded-lg"), p = (i) => {
-      const r = `flex items-center justify-center shrink-0 ${P.value} p-3`, e = i.color || "primary";
+    }, P = w(() => o.iconBoxShape === "full-rounded" ? "rounded-full" : o.iconBoxShape === "none" ? "rounded-none" : "rounded-lg"), k = (l) => {
+      const a = `flex items-center justify-center shrink-0 ${P.value} p-3`, e = l.color || "primary";
       if (o.iconBoxStyle === "transparent")
-        return `${r} bg-transparent ${{
+        return `${a} bg-transparent ${{
           primary: "text-primary",
           secondary: "text-secondary-foreground",
           success: "text-success-dark",
@@ -142,7 +164,7 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
           danger: "bg-danger text-danger-fg",
           info: "bg-info text-info-fg"
         };
-        return `${r} ${u[e] || u.primary}`;
+        return `${a} ${u[e] || u.primary}`;
       } else {
         const u = {
           primary: "bg-primary-light text-primary",
@@ -152,10 +174,10 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
           danger: "bg-danger-light text-danger-dark",
           info: "bg-info-light text-info-dark"
         };
-        return `${r} ${u[e] || u.primary}`;
+        return `${a} ${u[e] || u.primary}`;
       }
-    }, $ = (i) => {
-      const r = i.color || "primary";
+    }, B = (l) => {
+      const a = l.color || "primary";
       return `shrink-0 ${{
         primary: "text-primary",
         secondary: "text-secondary-foreground",
@@ -163,177 +185,183 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
         warning: "text-warning-dark",
         danger: "text-danger-dark",
         info: "text-info-dark"
-      }[r] || "text-primary"}`;
-    }, B = (i) => {
-      const r = i.color;
-      return r && !["primary", "secondary", "success", "warning", "danger", "info"].includes(r) ? { color: r } : {};
-    }, k = (i) => {
-      const r = i.color;
-      return r && !["primary", "secondary", "success", "warning", "danger", "info"].includes(r) ? o.iconBoxStyle === "transparent" ? { color: r } : o.variant === "solid" && !o.attached ? { backgroundColor: r, color: "#fff" } : { color: r, backgroundColor: `${r}20` } : {};
+      }[a] || "text-primary"}`;
+    }, $ = (l) => {
+      const a = l.color;
+      return a && !["primary", "secondary", "success", "warning", "danger", "info"].includes(a) ? { color: a } : {};
+    }, m = (l) => {
+      const a = l.color;
+      return a && !["primary", "secondary", "success", "warning", "danger", "info"].includes(a) ? o.iconBoxStyle === "transparent" ? { color: a } : o.variant === "solid" && !o.attached ? { backgroundColor: a, color: "#fff" } : { color: a, backgroundColor: `${a}20` } : {};
     };
-    return (i, r) => (s(), a("div", {
-      class: t(z.value)
+    return (l, a) => (n(), r("div", {
+      class: s(z.value)
     }, [
-      (s(!0), a(y, null, V(n.items, (e, u) => (s(), a("div", {
+      (n(!0), r(y, null, V(t.items, (e, u) => (n(), r("div", {
         key: e.id || u,
-        class: t(I(e)),
-        style: v(C(e))
+        class: s(C(e)),
+        style: b(I(e))
       }, [
-        n.layout === "title-top-icon-bottom-right" ? (s(), a(y, { key: 0 }, [
-          c("h3", {
-            class: t(n.titleSize || "text-sm font-medium text-muted-foreground truncate w-full")
-          }, l(e.titleI18n ? b(h)(e.titleI18n) : e.title), 3),
-          c("div", O, [
-            c("div", null, [
-              c("p", {
-                class: t(n.valueSize || "text-2xl font-bold text-foreground truncate")
-              }, l(e.value), 3),
-              e.trend ? (s(), a("div", D, [
+        t.layout === "title-top-icon-bottom-right" ? (n(), r(y, { key: 0 }, [
+          i("h3", {
+            class: s(t.titleSize || "text-sm font-medium text-muted-foreground truncate w-full")
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          i("div", O, [
+            i("div", null, [
+              t.loading ? (n(), r("div", D)) : (n(), r("p", {
+                key: 1,
+                class: s(t.valueSize || "text-2xl font-bold text-foreground truncate")
+              }, c(e.value), 3)),
+              e.trend && !t.loading ? (n(), r("div", F, [
                 f(g, {
                   icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
-                  class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+                  class: s([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
                 }, null, 8, ["icon", "class"]),
-                c("span", {
-                  class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
-                }, l(e.trend.value), 3),
-                e.trend.label ? (s(), a("span", F, l(e.trend.label), 1)) : d("", !0)
+                i("span", {
+                  class: s([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+                }, c(e.trend.value), 3),
+                e.trend.label ? (n(), r("span", T, c(e.trend.label), 1)) : d("", !0)
               ])) : d("", !0)
             ]),
-            e.icon ? (s(), a("div", {
+            e.icon ? (n(), r("div", {
               key: 0,
-              class: t(p(e)),
-              style: v(k(e))
+              class: s(k(e)),
+              style: b(m(e))
             }, [
               f(g, {
                 icon: e.icon,
-                class: t(n.iconSize || "w-6 h-6")
+                class: s(t.iconSize || "w-6 h-6")
               }, null, 8, ["icon", "class"])
             ], 6)) : d("", !0)
           ])
-        ], 64)) : n.layout === "centered-value-title" ? (s(), a(y, { key: 1 }, [
-          c("p", {
-            class: t(n.valueSize || "text-3xl font-bold text-foreground")
-          }, l(e.value), 3),
-          c("h3", {
-            class: t(n.titleSize || "text-sm font-medium text-muted-foreground")
-          }, l(e.titleI18n ? b(h)(e.titleI18n) : e.title), 3),
-          e.trend ? (s(), a("div", T, [
+        ], 64)) : t.layout === "centered-value-title" ? (n(), r(y, { key: 1 }, [
+          t.loading ? (n(), r("div", q)) : (n(), r("p", {
+            key: 1,
+            class: s(t.valueSize || "text-3xl font-bold text-foreground")
+          }, c(e.value), 3)),
+          i("h3", {
+            class: s(t.titleSize || "text-sm font-medium text-muted-foreground")
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          e.trend && !t.loading ? (n(), r("div", A, [
             f(g, {
               icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
-              class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+              class: s([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
             }, null, 8, ["icon", "class"]),
-            c("span", {
-              class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium"])
-            }, l(e.trend.value), 3)
+            i("span", {
+              class: s([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium"])
+            }, c(e.trend.value), 3)
           ])) : d("", !0)
-        ], 64)) : n.layout === "floating-icon" ? (s(), a(y, { key: 2 }, [
-          e.icon ? (s(), a("div", {
+        ], 64)) : t.layout === "floating-icon" ? (n(), r(y, { key: 2 }, [
+          e.icon ? (n(), r("div", {
             key: 0,
-            class: t([p(e), "absolute top-4 right-4"]),
-            style: v(k(e))
+            class: s([k(e), "absolute top-4 right-4"]),
+            style: b(m(e))
           }, [
             f(g, {
               icon: e.icon,
-              class: t(n.iconSize || "w-6 h-6")
+              class: s(t.iconSize || "w-6 h-6")
             }, null, 8, ["icon", "class"])
           ], 6)) : d("", !0),
-          c("h3", {
-            class: t(n.titleSize || "text-sm font-medium text-muted-foreground truncate pr-12")
-          }, l(e.titleI18n ? b(h)(e.titleI18n) : e.title), 3),
-          c("p", {
-            class: t(n.valueSize || "text-2xl font-bold text-foreground truncate mt-1")
-          }, l(e.value), 3),
-          e.trend ? (s(), a("div", q, [
+          i("h3", {
+            class: s(t.titleSize || "text-sm font-medium text-muted-foreground truncate pr-12")
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          t.loading ? (n(), r("div", G)) : (n(), r("p", {
+            key: 2,
+            class: s(t.valueSize || "text-2xl font-bold text-foreground truncate mt-1")
+          }, c(e.value), 3)),
+          e.trend && !t.loading ? (n(), r("div", H, [
             f(g, {
               icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
-              class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+              class: s([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
             }, null, 8, ["icon", "class"]),
-            c("span", {
-              class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
-            }, l(e.trend.value), 3),
-            e.trend.label ? (s(), a("span", A, l(e.trend.label), 1)) : d("", !0)
+            i("span", {
+              class: s([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+            }, c(e.trend.value), 3),
+            e.trend.label ? (n(), r("span", J, c(e.trend.label), 1)) : d("", !0)
           ])) : d("", !0)
-        ], 64)) : n.layout === "split-bar" ? (s(), a("div", G, [
-          c("h3", {
-            class: t(
-              n.titleSize || "text-xs font-semibold uppercase tracking-widest text-muted-foreground truncate"
+        ], 64)) : t.layout === "split-bar" ? (n(), r("div", K, [
+          i("h3", {
+            class: s(
+              t.titleSize || "text-xs font-semibold uppercase tracking-widest text-muted-foreground truncate"
             )
-          }, l(e.titleI18n ? b(h)(e.titleI18n) : e.title), 3),
-          c("p", {
-            class: t(n.valueSize || "text-3xl font-black text-foreground truncate mt-0.5")
-          }, l(e.value), 3),
-          e.trend ? (s(), a("div", H, [
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          t.loading ? (n(), r("div", Q)) : (n(), r("p", {
+            key: 1,
+            class: s(t.valueSize || "text-3xl font-black text-foreground truncate mt-0.5")
+          }, c(e.value), 3)),
+          e.trend && !t.loading ? (n(), r("div", R, [
             f(g, {
               icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
-              class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+              class: s([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
             }, null, 8, ["icon", "class"]),
-            c("span", {
-              class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
-            }, l(e.trend.value), 3),
-            e.trend.label ? (s(), a("span", J, l(e.trend.label), 1)) : d("", !0)
+            i("span", {
+              class: s([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+            }, c(e.trend.value), 3),
+            e.trend.label ? (n(), r("span", U, c(e.trend.label), 1)) : d("", !0)
           ])) : d("", !0)
-        ])) : n.layout === "inline-label-value" ? (s(), a(y, { key: 4 }, [
-          e.icon ? (s(), E(g, {
+        ])) : t.layout === "inline-label-value" ? (n(), r(y, { key: 4 }, [
+          e.icon ? (n(), E(g, {
             key: 0,
             icon: e.icon,
-            class: t([$(e), n.iconSize || "w-4.5 h-4.5"]),
-            style: v(B(e))
+            class: s([B(e), t.iconSize || "w-4.5 h-4.5"]),
+            style: b($(e))
           }, null, 8, ["icon", "class", "style"])) : d("", !0),
-          c("span", {
-            class: t([n.titleSize || "-text-fs-2 font-medium text-muted-foreground truncate", "flex-1 min-w-0"])
-          }, l(e.titleI18n ? b(h)(e.titleI18n) : e.title), 3),
-          c("span", {
-            class: t(n.valueSize || "-text-fs-1 font-semibold text-foreground tabular-nums shrink-0")
-          }, l(e.value), 3),
-          e.trend ? (s(), a("span", {
-            key: 1,
-            class: t(["shrink-0 flex items-center gap-0.5 text-xs font-medium", e.trend.isPositive ? "text-success-dark" : "text-danger-dark"])
+          i("span", {
+            class: s([t.titleSize || "-text-fs-2 font-medium text-muted-foreground truncate", "flex-1 min-w-0"])
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          t.loading ? (n(), r("div", W)) : (n(), r("span", {
+            key: 2,
+            class: s(t.valueSize || "-text-fs-1 font-semibold text-foreground tabular-nums shrink-0")
+          }, c(e.value), 3)),
+          e.trend && !t.loading ? (n(), r("span", {
+            key: 3,
+            class: s(["shrink-0 flex items-center gap-0.5 text-xs font-medium", e.trend.isPositive ? "text-success-dark" : "text-danger-dark"])
           }, [
             f(g, {
               icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
               class: "w-3 h-3"
             }, null, 8, ["icon"]),
-            L(" " + l(e.trend.value), 1)
+            L(" " + c(e.trend.value), 1)
           ], 2)) : d("", !0)
-        ], 64)) : (s(), a(y, { key: 5 }, [
-          e.icon && n.layout !== "icon-right" ? (s(), a("div", {
+        ], 64)) : (n(), r(y, { key: 5 }, [
+          e.icon && t.layout !== "icon-right" ? (n(), r("div", {
             key: 0,
-            class: t(p(e)),
-            style: v(k(e))
+            class: s(k(e)),
+            style: b(m(e))
           }, [
             f(g, {
               icon: e.icon,
-              class: t(n.iconSize || "w-6 h-6")
+              class: s(t.iconSize || "w-6 h-6")
             }, null, 8, ["icon", "class"])
           ], 6)) : d("", !0),
-          c("div", K, [
-            c("h3", {
-              class: t(n.titleSize || "text-sm font-medium text-muted-foreground truncate")
-            }, l(e.titleI18n ? b(h)(e.titleI18n) : e.title), 3),
-            c("div", Q, [
-              c("p", {
-                class: t(n.valueSize || "text-2xl font-bold text-foreground truncate")
-              }, l(e.value), 3)
+          i("div", X, [
+            i("h3", {
+              class: s(t.titleSize || "text-sm font-medium text-muted-foreground truncate")
+            }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+            i("div", Y, [
+              t.loading ? (n(), r("div", Z)) : (n(), r("p", {
+                key: 1,
+                class: s(t.valueSize || "text-2xl font-bold text-foreground truncate")
+              }, c(e.value), 3))
             ]),
-            e.trend ? (s(), a("div", R, [
+            e.trend && !t.loading ? (n(), r("div", _, [
               f(g, {
                 icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
-                class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+                class: s([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
               }, null, 8, ["icon", "class"]),
-              c("span", {
-                class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
-              }, l(e.trend.value), 3),
-              e.trend.label ? (s(), a("span", U, l(e.trend.label), 1)) : d("", !0)
+              i("span", {
+                class: s([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+              }, c(e.trend.value), 3),
+              e.trend.label ? (n(), r("span", ee, c(e.trend.label), 1)) : d("", !0)
             ])) : d("", !0)
           ]),
-          e.icon && n.layout === "icon-right" ? (s(), a("div", {
+          e.icon && t.layout === "icon-right" ? (n(), r("div", {
             key: 1,
-            class: t(p(e)),
-            style: v(k(e))
+            class: s(k(e)),
+            style: b(m(e))
           }, [
             f(g, {
               icon: e.icon,
-              class: t(n.iconSize || "w-6 h-6")
+              class: s(t.iconSize || "w-6 h-6")
             }, null, 8, ["icon", "class"])
           ], 6)) : d("", !0)
         ], 64))
@@ -342,5 +370,5 @@ const O = { class: "flex items-center justify-between w-full mt-1" }, D = {
   }
 });
 export {
-  Z as default
+  se as default
 };

package/components/Stats/types.d.ts

@@ -23,6 +23,7 @@ export interface StatsProps {
     layout?: StatsLayout;
     columns?: number | string;
     attached?: boolean;
+    loading?: boolean;
     titleSize?: string;
     valueSize?: string;
     iconSize?: string;

package/components/Workbook/Sheet.vue.d.ts

@@ -34,9 +34,9 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     onDuplicate?: (id: string) => any;
 }>, {
     itemClass: string;
-    confirmDelete: boolean;
     isEditing: boolean;
     canDelete: boolean;
+    confirmDelete: boolean;
     allowIconChange: boolean;
     activeItemClass: string;
     inactiveItemClass: string;

package/directives/vRipple.js

@@ -1,16 +1,35 @@
-const c = (e, i) => {
-  const n = i.getBoundingClientRect(), s = e.clientX - n.left, l = e.clientY - n.top, t = document.createElement("span"), p = Math.max(n.width, n.height), o = p / 2;
-  t.style.width = t.style.height = `${p}px`, t.style.left = `${s - o}px`, t.style.top = `${l - o}px`, t.style.position = "absolute", t.style.pointerEvents = "none", t.classList.add("ripple"), i.querySelectorAll(".ripple").forEach((r) => r.remove()), i.appendChild(t), setTimeout(() => {
-    t && t.parentNode && t.remove();
-  }, 600);
-}, a = {
+const y = (e, t) => {
+  const i = t.getBoundingClientRect(), p = e.clientX - i.left, d = e.clientY - i.top, s = Math.max(i.width, i.height), c = s / 2;
+  t.querySelectorAll(".ripple").forEach((r) => r.remove());
+  const o = document.createElement("span");
+  o.style.cssText = `
+    width: ${s}px;
+    height: ${s}px;
+    left: ${p - c}px;
+    top: ${d - c}px;
+    position: absolute;
+    pointer-events: none;
+    border-radius: 50%;
+    transform: scale(0);
+    opacity: 0;
+    will-change: transform, opacity;
+    background-color: rgba(255, 255, 255, 1);
+  `, o.classList.add("ripple"), t.appendChild(o);
+  let a = null;
+  const m = 400, l = (r) => {
+    a || (a = r);
+    const n = Math.min((r - a) / m, 1), u = (1 - Math.pow(1 - n, 3)) * 2.5, h = n < 0.4 ? n * 0.2 : 0.08 * (1 - (n - 0.4) / 0.6);
+    o.style.transform = `scale(${u})`, o.style.opacity = `${h}`, n < 1 ? requestAnimationFrame(l) : o.remove();
+  };
+  requestAnimationFrame(l);
+}, g = {
   mounted(e) {
-    window.getComputedStyle(e).position === "static" && (e.style.position = "relative"), e.style.overflow = "hidden", e._rippleHandler = (i) => c(i, e), e.addEventListener("click", e._rippleHandler);
+    window.getComputedStyle(e).position === "static" && (e.style.position = "relative"), e.style.overflow = "hidden", e._rippleHandler = (t) => y(t, e), e.addEventListener("click", e._rippleHandler);
   },
   unmounted(e) {
-    e._rippleHandler && e.removeEventListener("click", e._rippleHandler), e.querySelectorAll(".ripple").forEach((n) => n.remove());
+    e._rippleHandler && e.removeEventListener("click", e._rippleHandler), e.querySelectorAll(".ripple").forEach((t) => t.remove());
   }
 };
 export {
-  a as vRipple
+  g as vRipple
 };