vlite3 1.2.1 → 1.2.4

package/components/Stats/components/StatIconBox.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as y, computed as c, openBlock as d, createElementBlock as m, normalizeStyle as u, normalizeClass as i, createVNode as x, createBlock as p, createCommentVNode as k } from "vue";
-import g from "../../Icon.vue.js";
-const w = /* @__PURE__ */ y({
+import { defineComponent as y, computed as s, openBlock as u, createElementBlock as m, normalizeStyle as g, normalizeClass as c, createVNode as x, createBlock as b, createCommentVNode as p } from "vue";
+import f from "../../Icon.vue.js";
+const S = /* @__PURE__ */ y({
   __name: "StatIconBox",
   props: {
     item: {},
@@ -12,31 +12,31 @@ const w = /* @__PURE__ */ y({
     iconSize: {},
     class: {}
   },
-  setup(t) {
-    const e = t, a = c(() => e.layout === "inline-label-value"), f = c(() => e.iconBoxShape === "full-rounded" ? "rounded-full" : e.iconBoxShape === "none" ? "rounded-none" : "rounded-lg"), s = c(() => {
-      if (a.value) {
-        const n = e.item.color || "primary";
+  setup(r) {
+    const e = r, o = s(() => e.layout === "inline-label-value"), d = s(() => e.iconBoxShape === "full-rounded" ? "rounded-full" : e.iconBoxShape === "none" ? "rounded-none" : "rounded-lg"), i = s(() => {
+      if (o.value) {
+        const t = e.item.color || "primary";
         return `shrink-0 ${{
           primary: "text-primary",
           secondary: "text-secondary-foreground",
-          success: "text-success-dark",
-          warning: "text-warning-dark",
-          danger: "text-danger-dark",
-          info: "text-info-dark"
-        }[n] || "text-primary"} ${e.class || ""}`;
+          success: "text-success-subtle-fg",
+          warning: "text-warning-subtle-fg",
+          danger: "text-danger-subtle-fg",
+          info: "text-info-subtle-fg"
+        }[t] || "text-primary"} ${e.class || ""}`;
       }
-      const r = `flex items-center justify-center shrink-0 ${f.value} p-3 ${e.class || ""}`, o = e.item.color || "primary";
+      const n = `flex items-center justify-center shrink-0 ${d.value} p-3 ${e.class || ""}`, a = e.item.color || "primary";
       if (e.iconBoxStyle === "transparent")
-        return `${r} bg-transparent ${{
+        return `${n} bg-transparent ${{
           primary: "text-primary",
           secondary: "text-secondary-foreground",
-          success: "text-success-dark",
-          warning: "text-warning-dark",
-          danger: "text-danger-dark",
-          info: "text-info-dark"
-        }[o] || "text-primary"}`;
+          success: "text-success-subtle-fg",
+          warning: "text-warning-subtle-fg",
+          danger: "text-danger-subtle-fg",
+          info: "text-info-subtle-fg"
+        }[a] || "text-primary"}`;
       if (e.variant === "solid" && !e.attached) {
-        const n = {
+        const t = {
           primary: "bg-primary text-primary-fg",
           secondary: "bg-foreground text-background",
           success: "bg-success text-success-fg",
@@ -44,39 +44,39 @@ const w = /* @__PURE__ */ y({
           danger: "bg-danger text-danger-fg",
           info: "bg-info text-info-fg"
         };
-        return `${r} ${n[o] || n.primary}`;
+        return `${n} ${t[a] || t.primary}`;
       } else {
-        const n = {
+        const t = {
           primary: "bg-primary-light text-primary",
           secondary: "bg-secondary text-secondary-foreground",
-          success: "bg-success-light text-success-dark",
-          warning: "bg-warning-light text-warning-dark",
-          danger: "bg-danger-light text-danger-dark",
-          info: "bg-info-light text-info-dark"
+          success: "bg-success-subtle text-success-subtle-fg",
+          warning: "bg-warning-subtle text-warning-subtle-fg",
+          danger: "bg-danger-subtle text-danger-subtle-fg",
+          info: "bg-info-subtle text-info-subtle-fg"
         };
-        return `${r} ${n[o] || n.primary}`;
+        return `${n} ${t[a] || t.primary}`;
       }
-    }), l = c(() => {
-      const r = e.item.color;
-      return a.value ? r && !["primary", "secondary", "success", "warning", "danger", "info"].includes(r) ? { color: r } : {} : r && !["primary", "secondary", "success", "warning", "danger", "info"].includes(r) ? e.iconBoxStyle === "transparent" ? { color: r } : e.variant === "solid" && !e.attached ? { backgroundColor: r, color: "#fff" } : { color: r, backgroundColor: `${r}20` } : {};
+    }), l = s(() => {
+      const n = e.item.color;
+      return o.value ? n && !["primary", "secondary", "success", "warning", "danger", "info"].includes(n) ? { color: n } : {} : n && !["primary", "secondary", "success", "warning", "danger", "info"].includes(n) ? e.iconBoxStyle === "transparent" ? { color: n } : e.variant === "solid" && !e.attached ? { backgroundColor: n, color: "#fff" } : { color: n, backgroundColor: `${n}20` } : {};
     });
-    return (r, o) => !a.value && t.item.icon ? (d(), m("div", {
+    return (n, a) => !o.value && r.item.icon ? (u(), m("div", {
       key: 0,
-      class: i(s.value),
-      style: u(l.value)
+      class: c(i.value),
+      style: g(l.value)
     }, [
-      x(g, {
-        icon: t.item.icon,
-        class: i(t.iconSize || "w-6 h-6")
+      x(f, {
+        icon: r.item.icon,
+        class: c(r.iconSize || "w-6 h-6")
       }, null, 8, ["icon", "class"])
-    ], 6)) : a.value && t.item.icon ? (d(), p(g, {
+    ], 6)) : o.value && r.item.icon ? (u(), b(f, {
       key: 1,
-      icon: t.item.icon,
-      class: i([s.value, t.iconSize || "w-4.5 h-4.5"]),
-      style: u(l.value)
-    }, null, 8, ["icon", "class", "style"])) : k("", !0);
+      icon: r.item.icon,
+      class: c([i.value, r.iconSize || "w-4.5 h-4.5"]),
+      style: g(l.value)
+    }, null, 8, ["icon", "class", "style"])) : p("", !0);
   }
 });
 export {
-  w as default
+  S as default
 };

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

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

package/components/Stats/types.d.ts

@@ -1,4 +1,4 @@
-export type StatsVariant = 'solid' | 'outline' | 'shadow' | 'transparent';
+export type StatsVariant = 'solid' | 'outline' | 'shadow' | 'transparent' | 'transparent-header';
 export type StatsLayout = 'icon-left' | 'icon-right' | 'icon-top' | 'title-top-icon-bottom-right' | 'centered-value-title' | 'floating-icon' | 'split-bar' | 'inline-label-value';
 export type IconBoxShape = 'rounded' | 'full-rounded' | 'none';
 export type IconBoxStyle = 'filled' | 'transparent';
@@ -13,6 +13,8 @@ export interface StatItemSchema {
     titleI18n?: string;
     value: string | number;
     isPrice?: boolean;
+    numberFormat?: 'standard' | 'compact';
+    compactThreshold?: number;
     icon?: string;
     color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | string;
     trend?: StatTrend;

package/components/Timeline/Timeline.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, computed as g, openBlock as r, createElementBlock as d, normalizeClass as k, createElementVNode as y, normalizeStyle as S, createCommentVNode as P, Fragment as p, renderList as B, isMemoSame as T, createBlock as z, withCtx as o, renderSlot as n, mergeProps as s } from "vue";
+import { defineComponent as p, computed as g, openBlock as r, createElementBlock as d, normalizeClass as k, createElementVNode as b, normalizeStyle as S, createCommentVNode as P, Fragment as C, renderList as B, isMemoSame as T, createBlock as z, withCtx as o, renderSlot as n, mergeProps as s } from "vue";
 import V from "./TimelineItem.vue.js";
 const E = {
   key: 0,
@@ -8,7 +8,7 @@ const E = {
   key: 1,
   class: "absolute top-4 left-4 right-4 h-0.5 bg-border block sm:hidden",
   "aria-hidden": "true"
-}, L = /* @__PURE__ */ C({
+}, L = /* @__PURE__ */ p({
   __name: "Timeline",
   props: {
     steps: {},
@@ -22,14 +22,14 @@ const E = {
   },
   emits: ["step-click"],
   setup(e, { emit: w }) {
-    const l = e, x = w, a = g(() => l.direction === "vertical"), b = g(() => l.steps.length <= 1 ? 0 : Math.min(l.activeStep, l.steps.length - 1) / (l.steps.length - 1) * 100), $ = (i, f) => {
+    const l = e, x = w, a = g(() => l.direction === "vertical"), y = g(() => l.steps.length <= 1 ? 0 : Math.min(l.activeStep, l.steps.length - 1) / (l.steps.length - 1) * 100), $ = (i, f) => {
       x("step-click", i, f);
     };
     return (i, f) => (r(), d("nav", {
       "aria-label": "Progress",
-      class: k(["w-full", l.class])
+      class: k(["w-full pb-5", l.class])
     }, [
-      y("ol", {
+      b("ol", {
         role: "list",
         class: k([
           "relative flex",
@@ -39,19 +39,29 @@ const E = {
         ])
       }, [
         !a.value && e.textPosition === "bottom" ? (r(), d("div", E, [
-          y("div", {
+          b("div", {
             class: "h-full bg-primary transition-all duration-300 ease-in-out",
-            style: S({ width: `${b.value}%` })
+            style: S({ width: `${y.value}%` })
           }, null, 4)
         ])) : P("", !0),
         !a.value && e.textPosition === "right" ? (r(), d("div", M, [
-          y("div", {
+          b("div", {
             class: "h-full bg-primary transition-all duration-300 ease-in-out",
-            style: S({ width: `${b.value}%` })
+            style: S({ width: `${y.value}%` })
           }, null, 4)
         ])) : P("", !0),
-        (r(!0), d(p, null, B(e.steps, (c, m, N, u) => {
-          const v = [c, m, e.activeStep, e.direction, e.textPosition, e.lineStyle, e.indicatorType, e.clickable, e.steps.length];
+        (r(!0), d(C, null, B(e.steps, (c, m, N, u) => {
+          const v = [
+            c,
+            m,
+            e.activeStep,
+            e.direction,
+            e.textPosition,
+            e.lineStyle,
+            e.indicatorType,
+            e.clickable,
+            e.steps.length
+          ];
           if (u && u.key === c.id && T(u, v)) return u;
           const h = (r(), z(V, {
             key: c.id,

package/components/Timeline/TimelineItem.vue.js

@@ -60,7 +60,7 @@ const B = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, V = { class
         }, null, 2))
       ]),
       i("div", {
-        class: o(["flex-1 flex flex-col pt-0.5", e.isLast ? "pb-0" : "pb-10"])
+        class: o(["flex-1 flex flex-col pt-0.5", e.isLast ? "pb-0" : "pb-5"])
       }, [
         a(t.$slots, "content", {
           step: e.step,

package/core/config.d.ts

@@ -32,6 +32,8 @@ export declare const configState: {
         };
         price?: {
             currency?: string;
+            numberFormat?: "standard" | "compact";
+            compactThreshold?: number;
         };
         datetime?: {
             format?: string;
@@ -87,6 +89,7 @@ export declare const configState: {
                 due?: string;
                 from?: string;
                 billedTo?: string;
+                shipTo?: string;
                 status?: string;
                 item?: string;
                 price?: string;
@@ -97,6 +100,8 @@ export declare const configState: {
                 notes?: string;
                 sku?: string;
                 taxId?: string;
+                paymentMethod?: string;
+                shippingMethod?: string;
             };
         };
         footer?: {
@@ -142,6 +147,8 @@ export declare function useVLiteConfig(): {
         };
         price?: {
             currency?: string;
+            numberFormat?: "standard" | "compact";
+            compactThreshold?: number;
         };
         datetime?: {
             format?: string;
@@ -197,6 +204,7 @@ export declare function useVLiteConfig(): {
                 due?: string;
                 from?: string;
                 billedTo?: string;
+                shipTo?: string;
                 status?: string;
                 item?: string;
                 price?: string;
@@ -207,6 +215,8 @@ export declare function useVLiteConfig(): {
                 notes?: string;
                 sku?: string;
                 taxId?: string;
+                paymentMethod?: string;
+                shippingMethod?: string;
             };
         };
         footer?: {

package/core/config.js

@@ -1,11 +1,13 @@
-import { reactive as n, inject as i } from "vue";
-import { deepMerge as c } from "../utils/object.js";
-const r = /* @__PURE__ */ Symbol("vlite-config"), s = {
+import { reactive as n, inject as c } from "vue";
+import { deepMerge as r } from "../utils/object.js";
+const i = /* @__PURE__ */ Symbol("vlite-config"), s = {
   services: {},
   components: {
     form: {},
     price: {
-      currency: "USD"
+      currency: "USD",
+      numberFormat: "standard",
+      compactThreshold: 1e3
     },
     datetime: {
       format: "MM/DD/YYYY"
@@ -16,16 +18,16 @@ const r = /* @__PURE__ */ Symbol("vlite-config"), s = {
     }
   }
 }, e = n({ ...s });
-function a(t) {
-  const o = c(e, t);
+function f(t) {
+  const o = r(e, t);
   Object.assign(e, o);
 }
 function u() {
-  return i(r, e);
+  return c(i, e);
 }
 export {
-  r as VLITE_CONFIG_KEY,
+  i as VLITE_CONFIG_KEY,
   e as configState,
-  a as updateConfig,
+  f as updateConfig,
   u as useVLiteConfig
 };

package/index.d.ts

@@ -56,6 +56,8 @@ export * from './components/Calendar';
 export * from './components/Skeleton';
 export * from './components/Chart';
 export * from './components/AppShell';
+export * from './components/Rating';
+export * from './components/AsyncSelect';
 export { default as Icon } from './components/Icon.vue';
 export { default as Logo } from './components/Logo.vue';
 export { default as Alert } from './components/Alert.vue';