vlite3 1.2.1 → 1.2.2

package/components/Screen/components/ScreenToolbar.vue.d.ts

@@ -0,0 +1,62 @@
+type __VLS_Props = {
+    selectedRows: any[];
+    hideSelectable?: boolean;
+    hideDeleteBtn?: boolean;
+    txtDeleteSelected: string;
+    hasMultipleViews: boolean;
+    activeView: string;
+    resolvedViews: any[];
+    showRefresh?: boolean;
+    loading?: boolean;
+    txtRefresh: string;
+    filterSchema?: any[];
+    filterType?: string;
+    activeFilters: any;
+    canSearch?: boolean;
+    searchQuery: string;
+    txtSearch: string;
+    canAdd?: boolean;
+    addComponent?: any;
+    addBtn?: any;
+    data?: any[];
+    refetch?: any;
+    hasExportOrImport?: boolean;
+    exportProps?: any;
+    importProps?: any;
+    screenState: any;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'before-search'?(_: any): any;
+        actions?(_: any): any;
+        'after-add'?(_: any): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    delete: (items: any[]) => any;
+    add: () => any;
+    "update:activeView": (val: string) => any;
+    "update:activeFilters": (val: any) => any;
+    "update:searchQuery": (val: string) => any;
+    refresh: () => any;
+    "select-dropdown": (opt: any) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (items: any[]) => any;
+    onAdd?: () => any;
+    "onUpdate:activeView"?: (val: string) => any;
+    "onUpdate:activeFilters"?: (val: any) => any;
+    "onUpdate:searchQuery"?: (val: string) => any;
+    onRefresh?: () => any;
+    "onSelect-dropdown"?: (opt: any) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Screen/components/ScreenToolbar.vue.js

@@ -0,0 +1,116 @@
+import { defineComponent as h, openBlock as o, createElementBlock as m, createElementVNode as u, createBlock as d, createCommentVNode as i, renderSlot as n, normalizeProps as r, guardReactiveProps as s, createVNode as c } from "vue";
+import f from "../../Button.vue.js";
+import v from "../../Input.vue.js";
+/* empty css               */
+import w from "./ScreenViewToggle.vue.js";
+import y from "../ScreenFilter.vue.js";
+import $ from "./ScreenAddAction.vue.js";
+import S from "./ScreenOptionsDropdown.vue.js";
+const g = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none justify-start sm:justify-end" }, B = {
+  key: 4,
+  class: "w-full md:w-60! max-sm:order-last"
+}, k = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, E = /* @__PURE__ */ h({
+  __name: "ScreenToolbar",
+  props: {
+    selectedRows: {},
+    hideSelectable: { type: Boolean },
+    hideDeleteBtn: { type: Boolean },
+    txtDeleteSelected: {},
+    hasMultipleViews: { type: Boolean },
+    activeView: {},
+    resolvedViews: {},
+    showRefresh: { type: Boolean },
+    loading: { type: Boolean },
+    txtRefresh: {},
+    filterSchema: {},
+    filterType: {},
+    activeFilters: {},
+    canSearch: { type: Boolean },
+    searchQuery: {},
+    txtSearch: {},
+    canAdd: { type: Boolean },
+    addComponent: {},
+    addBtn: {},
+    data: {},
+    refetch: {},
+    hasExportOrImport: { type: Boolean },
+    exportProps: {},
+    importProps: {},
+    screenState: {}
+  },
+  emits: ["update:activeView", "update:activeFilters", "update:searchQuery", "delete", "refresh", "add", "select-dropdown"],
+  setup(e) {
+    return (l, t) => (o(), m("div", null, [
+      u("div", g, [
+        e.selectedRows.length > 0 && !e.hideSelectable && !e.hideDeleteBtn ? (o(), d(f, {
+          key: 0,
+          variant: "outline",
+          class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
+          icon: "lucide:trash-2",
+          title: e.txtDeleteSelected,
+          onClick: t[0] || (t[0] = (a) => l.$emit("delete", e.selectedRows))
+        }, null, 8, ["title"])) : i("", !0),
+        e.hasMultipleViews ? (o(), d(w, {
+          key: 1,
+          "model-value": e.activeView,
+          "onUpdate:modelValue": t[1] || (t[1] = (a) => l.$emit("update:activeView", a)),
+          views: e.resolvedViews
+        }, null, 8, ["model-value", "views"])) : i("", !0),
+        n(l.$slots, "before-search", r(s(e.screenState))),
+        e.showRefresh ? (o(), d(f, {
+          key: 2,
+          variant: "outline",
+          icon: "lucide:refresh-cw",
+          size: "lg",
+          class: "shrink-0 h-9! w-9!",
+          title: e.txtRefresh,
+          disabled: e.loading,
+          onClick: t[2] || (t[2] = (a) => l.$emit("refresh"))
+        }, null, 8, ["title", "disabled"])) : i("", !0),
+        e.filterSchema && e.filterSchema.length > 0 ? (o(), d(y, {
+          key: 3,
+          schema: e.filterSchema,
+          type: e.filterType,
+          "model-value": e.activeFilters,
+          "onUpdate:modelValue": t[3] || (t[3] = (a) => l.$emit("update:activeFilters", a)),
+          onChange: t[4] || (t[4] = (a) => l.$emit("refresh"))
+        }, null, 8, ["schema", "type", "model-value"])) : i("", !0),
+        e.canSearch ? (o(), m("div", B, [
+          c(v, {
+            lazy: "",
+            "model-value": e.searchQuery,
+            "onUpdate:modelValue": t[5] || (t[5] = (a) => l.$emit("update:searchQuery", String(a))),
+            icon: "lucide:search",
+            placeholder: e.txtSearch,
+            variant: "outline",
+            class: "bg-background w-full",
+            "show-clear-button": !0
+          }, null, 8, ["model-value", "placeholder"])
+        ])) : i("", !0)
+      ]),
+      u("div", k, [
+        n(l.$slots, "actions", r(s(e.screenState)), () => [
+          c($, {
+            "can-add": e.canAdd,
+            "add-component": e.addComponent,
+            "add-btn": e.addBtn,
+            loading: e.loading,
+            data: e.data,
+            refetch: e.refetch,
+            onAdd: t[6] || (t[6] = (a) => l.$emit("add"))
+          }, null, 8, ["can-add", "add-component", "add-btn", "loading", "data", "refetch"])
+        ]),
+        e.hasExportOrImport ? (o(), d(S, {
+          key: 0,
+          "export-props": e.exportProps,
+          "import-props": e.importProps,
+          onSelect: t[7] || (t[7] = (a) => l.$emit("select-dropdown", a))
+        }, null, 8, ["export-props", "import-props"])) : i("", !0),
+        n(l.$slots, "after-add", r(s(e.screenState)))
+      ])
+    ]));
+  }
+});
+export {
+  E as default
+};

package/components/Screen/components/ScreenToolbar.vue2.js

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

package/components/Screen/types.d.ts

@@ -5,6 +5,7 @@ import { IForm } from '../Form';
 import { ExportField } from '../ExportData/types';
 import { ImportField } from '../ImportData/types';
 import { TabesVariant } from '../Tabes';
+import { StatItemSchema, StatsProps } from '../Stats/types';
 export interface ScreenPaginationProps extends Omit<PaginationProps, 'currentPage' | 'totalPages'> {
 }
 export interface AddBtnConfig {
@@ -69,6 +70,9 @@ export interface ScreenProps {
     pageInfo?: PageInfo;
     data?: any[];
     loading?: boolean;
+    variant?: 'one' | 'two';
+    stats?: StatItemSchema[] | any[];
+    statsProps?: Partial<StatsProps>;
     /**
      * Called on every search, filter, pagination, sort, or quick-filter change.
      * Standard payload shape: { pagination, search, sort, filter }
@@ -139,7 +143,12 @@ export interface ScreenProps {
     filterType?: 'modal' | 'dropdown';
     showRefresh?: boolean;
     containerClass?: string;
+    mainContainerClass?: string;
     headerClass?: string;
+    topHeaderClass?: string;
+    bottomHeaderClass?: string;
+    filtersContainerClass?: string;
+    actionsContainerClass?: string;
     titleClass?: string;
     descriptionClass?: string;
     viewProps?: Record<string, any>;

package/components/Stats/StatItem.vue.js

@@ -1,27 +1,27 @@
-import { defineComponent as B, computed as k, openBlock as e, createElementBlock as i, normalizeStyle as I, normalizeClass as n, Fragment as b, createElementVNode as r, toDisplayString as o, unref as y, createBlock as c, createCommentVNode as d } from "vue";
-import { $t as s } from "../../utils/i18n.js";
-import { formatCurrency as C } from "../../utils/functions.js";
-import f from "./components/StatTrend.vue.js";
+import { defineComponent as B, computed as k, openBlock as e, createElementBlock as i, normalizeStyle as I, normalizeClass as l, Fragment as x, createElementVNode as d, toDisplayString as o, unref as s, createBlock as c, createCommentVNode as r } from "vue";
+import { $t as f } from "../../utils/i18n.js";
+import { formatCurrency as C, formatNumber as j } from "../../utils/functions.js";
+import b from "./components/StatTrend.vue.js";
 import g from "./components/StatIconBox.vue.js";
-const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
+const F = { class: "flex items-center justify-between w-full mt-1" }, $ = {
   key: 0,
   class: "h-8 w-24 bg-gray-50 animate-pulse rounded-md"
 }, N = {
   key: 0,
   class: "h-9 w-24 bg-gray-50 animate-pulse rounded-md"
-}, V = {
+}, T = {
   key: 1,
   class: "h-8 w-20 bg-gray-50 animate-pulse rounded-md mt-1"
-}, E = {
+}, V = {
   key: 3,
   class: "flex-1 flex flex-col justify-center min-w-0"
-}, M = {
+}, E = {
   key: 0,
   class: "h-9 w-24 bg-gray-50 animate-pulse rounded-md mt-0.5"
-}, D = {
+}, M = {
   key: 1,
   class: "h-6 w-5 bg-gray-50 animate-pulse rounded-sm shrink-0"
-}, F = { class: "flex-1 flex flex-col justify-center min-w-0" }, L = { class: "flex items-baseline gap-2 mt-1" }, P = {
+}, D = { class: "flex-1 flex flex-col justify-center min-w-0" }, L = { class: "flex items-baseline gap-2 mt-1" }, P = {
   key: 0,
   class: "h-8 w-24 bg-gray-50 animate-pulse rounded-md"
 }, K = /* @__PURE__ */ B({
@@ -39,28 +39,29 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
     iconBoxStyle: { default: "filled" }
   },
   setup(t) {
-    const l = t;
-    function m(a) {
-      return a.isPrice ? C(Number(a.value)) : a.value;
+    const n = t;
+    function y(a) {
+      const m = Number(a.value);
+      return a.isPrice ? C(m, { numberFormat: a.numberFormat || "compact", compactThreshold: a.compactThreshold }) : a.numberFormat ? j(m, { numberFormat: a.numberFormat, compactThreshold: a.compactThreshold }) : a.value;
     }
     const S = k(() => {
-      const a = l.layout === "inline-label-value" ? "flex px-3.5 py-3" : "flex p-3", x = {
+      const a = n.layout === "inline-label-value" ? "flex px-3.5 py-3" : n.layout === "centered-value-title" ? "flex px-1 py-1" : "flex p-3", m = {
         "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",
         "title-top-icon-bottom-right": "flex-col items-start gap-0 text-left px-5! py-4!",
-        "centered-value-title": "flex-col items-center justify-center text-center gap-1",
+        "centered-value-title": "flex-col items-center justify-center text-center gap-0",
         "floating-icon": "flex-col items-start gap-1 text-left relative",
         "split-bar": "flex-row items-center gap-3 text-left border-l-4",
         "inline-label-value": "flex-row items-center gap-2.5 text-left"
-      }, h = x[l.layout] || x["icon-left"];
+      }, h = m[n.layout] || m["icon-left"];
       let u = "";
-      if (l.attached)
-        l.variant === "transparent" ? u = "border-b border-r border-transparent bg-transparent hover:bg-muted/30 transition-colors" : l.variant === "outline" ? u = "border-b border-r border-border bg-transparent hover:bg-muted/30 transition-colors" : u = "border-b border-r border-border bg-card hover:bg-muted/30 transition-colors";
+      if (n.attached)
+        n.variant === "transparent" ? u = "border-b border-r border-transparent bg-transparent hover:bg-muted/30 transition-colors" : n.variant === "outline" ? u = "border-b border-r border-border bg-transparent hover:bg-muted/30 transition-colors" : u = "border-b border-r border-border bg-card hover:bg-muted/30 transition-colors";
       else {
-        switch (l.variant) {
+        switch (n.variant) {
           case "solid": {
-            const w = l.item.color || "primary", v = {
+            const w = n.item.color || "primary", v = {
               primary: "bg-primary-light",
               secondary: "bg-secondary",
               success: "bg-success-light",
@@ -85,13 +86,13 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
       }
       return [a, h, u].join(" ");
     }), z = k(() => {
-      if (l.variant === "solid" && !l.attached) {
-        const a = l.item.color;
+      if (n.variant === "solid" && !n.attached) {
+        const a = n.item.color;
         if (a && !["primary", "secondary", "success", "warning", "danger", "info"].includes(a))
           return { backgroundColor: `${a}15` };
       }
-      if (l.layout === "split-bar") {
-        const a = l.item.color, x = {
+      if (n.layout === "split-bar") {
+        const a = n.item.color, m = {
           primary: "var(--color-primary)",
           secondary: "var(--color-secondary)",
           success: "var(--color-success)",
@@ -100,29 +101,29 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
           info: "var(--color-info)"
         };
         if (a)
-          return { borderLeftColor: x[a] || a };
+          return { borderLeftColor: m[a] || a };
       }
       return {};
     });
-    return (a, x) => (e(), i("div", {
-      class: n(S.value),
+    return (a, m) => (e(), i("div", {
+      class: l(S.value),
       style: I(z.value)
     }, [
-      t.layout === "title-top-icon-bottom-right" ? (e(), i(b, { key: 0 }, [
-        r("h3", {
-          class: n(t.titleSize || "text-sm font-medium text-muted-foreground truncate w-full")
-        }, o(t.item.titleI18n ? y(s)(t.item.titleI18n) : t.item.title), 3),
-        r("div", j, [
-          r("div", null, [
+      t.layout === "title-top-icon-bottom-right" ? (e(), i(x, { key: 0 }, [
+        d("h3", {
+          class: l(t.titleSize || "text-sm font-medium text-muted-foreground truncate w-full")
+        }, o(t.item.titleI18n ? s(f)(t.item.titleI18n) : t.item.title), 3),
+        d("div", F, [
+          d("div", null, [
             t.loading ? (e(), i("div", $)) : (e(), i("p", {
               key: 1,
-              class: n(t.valueSize || "text-2xl font-bold text-foreground truncate")
-            }, o(m(t.item)), 3)),
-            t.item.trend && !t.loading ? (e(), c(f, {
+              class: l(t.valueSize || "text-2xl font-bold text-foreground truncate")
+            }, o(y(t.item)), 3)),
+            t.item.trend && !t.loading ? (e(), c(b, {
               key: 2,
               trend: t.item.trend,
               layout: t.layout
-            }, null, 8, ["trend", "layout"])) : d("", !0)
+            }, null, 8, ["trend", "layout"])) : r("", !0)
           ]),
           t.item.icon ? (e(), c(g, {
             key: 0,
@@ -133,22 +134,22 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
             "icon-box-shape": t.iconBoxShape,
             "icon-box-style": t.iconBoxStyle,
             "icon-size": t.iconSize
-          }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0)
+          }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : r("", !0)
         ])
-      ], 64)) : t.layout === "centered-value-title" ? (e(), i(b, { key: 1 }, [
+      ], 64)) : t.layout === "centered-value-title" ? (e(), i(x, { key: 1 }, [
         t.loading ? (e(), i("div", N)) : (e(), i("p", {
           key: 1,
-          class: n(t.valueSize || "text-3xl font-bold text-foreground")
-        }, o(m(t.item)), 3)),
-        r("h3", {
-          class: n(t.titleSize || "text-sm font-medium text-muted-foreground")
-        }, o(t.item.titleI18n ? y(s)(t.item.titleI18n) : t.item.title), 3),
-        t.item.trend && !t.loading ? (e(), c(f, {
+          class: l(t.valueSize || "text-3xl font-bold text-foreground")
+        }, o(y(t.item)), 3)),
+        d("h3", {
+          class: l(t.titleSize || "text-sm font-medium text-muted-foreground")
+        }, o(t.item.titleI18n ? s(f)(t.item.titleI18n) : t.item.title), 3),
+        t.item.trend && !t.loading ? (e(), c(b, {
           key: 2,
           trend: t.item.trend,
           layout: t.layout
-        }, null, 8, ["trend", "layout"])) : d("", !0)
-      ], 64)) : t.layout === "floating-icon" ? (e(), i(b, { key: 2 }, [
+        }, null, 8, ["trend", "layout"])) : r("", !0)
+      ], 64)) : t.layout === "floating-icon" ? (e(), i(x, { key: 2 }, [
         t.item.icon ? (e(), c(g, {
           key: 0,
           item: t.item,
@@ -159,35 +160,35 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
           "icon-box-style": t.iconBoxStyle,
           "icon-size": t.iconSize,
           class: "absolute top-4 right-4"
-        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0),
-        r("h3", {
-          class: n(t.titleSize || "text-sm font-medium text-muted-foreground truncate pr-12")
-        }, o(t.item.titleI18n ? y(s)(t.item.titleI18n) : t.item.title), 3),
-        t.loading ? (e(), i("div", V)) : (e(), i("p", {
+        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : r("", !0),
+        d("h3", {
+          class: l(t.titleSize || "text-sm font-medium text-muted-foreground truncate pr-12")
+        }, o(t.item.titleI18n ? s(f)(t.item.titleI18n) : t.item.title), 3),
+        t.loading ? (e(), i("div", T)) : (e(), i("p", {
           key: 2,
-          class: n(t.valueSize || "text-2xl font-bold text-foreground truncate mt-1")
-        }, o(m(t.item)), 3)),
-        t.item.trend && !t.loading ? (e(), c(f, {
+          class: l(t.valueSize || "text-2xl font-bold text-foreground truncate mt-1")
+        }, o(y(t.item)), 3)),
+        t.item.trend && !t.loading ? (e(), c(b, {
           key: 3,
           trend: t.item.trend,
           layout: t.layout
-        }, null, 8, ["trend", "layout"])) : d("", !0)
-      ], 64)) : t.layout === "split-bar" ? (e(), i("div", E, [
-        r("h3", {
-          class: n(
+        }, null, 8, ["trend", "layout"])) : r("", !0)
+      ], 64)) : t.layout === "split-bar" ? (e(), i("div", V, [
+        d("h3", {
+          class: l(
             t.titleSize || "text-xs font-semibold uppercase tracking-widest text-muted-foreground truncate"
           )
-        }, o(t.item.titleI18n ? y(s)(t.item.titleI18n) : t.item.title), 3),
-        t.loading ? (e(), i("div", M)) : (e(), i("p", {
+        }, o(t.item.titleI18n ? s(f)(t.item.titleI18n) : t.item.title), 3),
+        t.loading ? (e(), i("div", E)) : (e(), i("p", {
           key: 1,
-          class: n(t.valueSize || "text-3xl font-black text-foreground truncate mt-0.5")
-        }, o(m(t.item)), 3)),
-        t.item.trend && !t.loading ? (e(), c(f, {
+          class: l(t.valueSize || "text-3xl font-black text-foreground truncate mt-0.5")
+        }, o(y(t.item)), 3)),
+        t.item.trend && !t.loading ? (e(), c(b, {
           key: 2,
           trend: t.item.trend,
           layout: t.layout
-        }, null, 8, ["trend", "layout"])) : d("", !0)
-      ])) : t.layout === "inline-label-value" ? (e(), i(b, { key: 4 }, [
+        }, null, 8, ["trend", "layout"])) : r("", !0)
+      ])) : t.layout === "inline-label-value" ? (e(), i(x, { key: 4 }, [
         t.item.icon ? (e(), c(g, {
           key: 0,
           item: t.item,
@@ -197,20 +198,20 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
           "icon-box-shape": t.iconBoxShape,
           "icon-box-style": t.iconBoxStyle,
           "icon-size": t.iconSize
-        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0),
-        r("span", {
-          class: n([t.titleSize || "-text-fs-2 font-medium text-muted-foreground truncate", "flex-1 min-w-0"])
-        }, o(t.item.titleI18n ? y(s)(t.item.titleI18n) : t.item.title), 3),
-        t.loading ? (e(), i("div", D)) : (e(), i("span", {
+        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : r("", !0),
+        d("span", {
+          class: l([t.titleSize || "-text-fs-2 font-medium text-muted-foreground truncate", "flex-1 min-w-0"])
+        }, o(t.item.titleI18n ? s(f)(t.item.titleI18n) : t.item.title), 3),
+        t.loading ? (e(), i("div", M)) : (e(), i("span", {
           key: 2,
-          class: n(t.valueSize || "-text-fs-1 font-semibold text-foreground tabular-nums shrink-0")
-        }, o(m(t.item)), 3)),
-        t.item.trend && !t.loading ? (e(), c(f, {
+          class: l(t.valueSize || "-text-fs-1 font-semibold text-foreground tabular-nums shrink-0")
+        }, o(y(t.item)), 3)),
+        t.item.trend && !t.loading ? (e(), c(b, {
           key: 3,
           trend: t.item.trend,
           layout: t.layout
-        }, null, 8, ["trend", "layout"])) : d("", !0)
-      ], 64)) : (e(), i(b, { key: 5 }, [
+        }, null, 8, ["trend", "layout"])) : r("", !0)
+      ], 64)) : (e(), i(x, { key: 5 }, [
         t.item.icon && t.layout !== "icon-right" ? (e(), c(g, {
           key: 0,
           item: t.item,
@@ -220,22 +221,22 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
           "icon-box-shape": t.iconBoxShape,
           "icon-box-style": t.iconBoxStyle,
           "icon-size": t.iconSize
-        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0),
-        r("div", F, [
-          r("h3", {
-            class: n(t.titleSize || "text-sm font-medium text-muted-foreground truncate")
-          }, o(t.item.titleI18n ? y(s)(t.item.titleI18n) : t.item.title), 3),
-          r("div", L, [
+        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : r("", !0),
+        d("div", D, [
+          d("h3", {
+            class: l(t.titleSize || "text-sm font-medium text-muted-foreground truncate")
+          }, o(t.item.titleI18n ? s(f)(t.item.titleI18n) : t.item.title), 3),
+          d("div", L, [
             t.loading ? (e(), i("div", P)) : (e(), i("p", {
               key: 1,
-              class: n(t.valueSize || "text-2xl font-bold text-foreground truncate")
-            }, o(m(t.item)), 3))
+              class: l(t.valueSize || "text-2xl font-bold text-foreground truncate")
+            }, o(y(t.item)), 3))
           ]),
-          t.item.trend && !t.loading ? (e(), c(f, {
+          t.item.trend && !t.loading ? (e(), c(b, {
             key: 0,
             trend: t.item.trend,
             layout: t.layout
-          }, null, 8, ["trend", "layout"])) : d("", !0)
+          }, null, 8, ["trend", "layout"])) : r("", !0)
         ]),
         t.item.icon && t.layout === "icon-right" ? (e(), c(g, {
           key: 1,
@@ -246,7 +247,7 @@ const j = { class: "flex items-center justify-between w-full mt-1" }, $ = {
           "icon-box-shape": t.iconBoxShape,
           "icon-box-style": t.iconBoxStyle,
           "icon-size": t.iconSize
-        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0)
+        }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : r("", !0)
       ], 64))
     ], 6));
   }

package/components/Stats/Stats.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as s, computed as o, openBlock as l, createElementBlock as n, normalizeClass as u, Fragment as g, renderList as f, createBlock as m } from "vue";
-import S from "./StatItem.vue.js";
-const z = /* @__PURE__ */ s({
+import { defineComponent as s, computed as n, openBlock as l, createElementBlock as r, normalizeClass as u, Fragment as g, renderList as f, createBlock as m } from "vue";
+import v from "./StatItem.vue.js";
+const x = /* @__PURE__ */ s({
   __name: "Stats",
   props: {
     items: {},
@@ -17,32 +17,32 @@ const z = /* @__PURE__ */ s({
     class: { default: "" }
   },
   setup(e) {
-    const a = e, r = o(() => {
-      const t = Number(a.columns) || 4;
-      return t === 1 ? "grid-cols-1" : t === 2 ? "grid-cols-1 sm:grid-cols-2" : t === 3 ? "grid-cols-1 sm:grid-cols-3" : t === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : t === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : t === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
-    }), d = o(() => {
-      const t = a.attached && a.variant !== "transparent" ? "border-t border-l border-border overflow-hidden" : "overflow-hidden";
+    const t = e, o = 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";
+    }), d = n(() => {
+      const a = t.attached && t.variant !== "transparent" ? "border-t border-l border-border overflow-hidden" : "overflow-hidden";
       return [
         "grid",
-        r.value,
-        a.attached ? `gap-0 ${t}` : "gap-3 sm:gap-4.5",
-        a.variant === "shadow" && a.attached ? "shadow-md" : "",
-        a?.layout === "inline-label-value" ? "rounded-sm" : "",
-        a.class
+        o.value,
+        t.attached ? `gap-0 ${a}` : t.variant === "transparent-header" ? "gap-2 md:gap-3.5" : "gap-3 sm:gap-4.5",
+        t.variant === "shadow" && t.attached ? "shadow-md" : "",
+        t?.layout === "inline-label-value" ? "rounded-sm" : "",
+        t.class
       ].join(" ");
     });
-    return (t, h) => (l(), n("div", {
+    return (a, S) => (l(), r("div", {
       class: u(d.value)
     }, [
-      (l(!0), n(g, null, f(e.items, (i, c) => (l(), m(S, {
+      (l(!0), r(g, null, f(e.items, (i, c) => (l(), m(v, {
         key: i.id || c,
         item: i,
-        variant: e.variant,
-        layout: e.layout,
+        variant: e.variant.startsWith("transparent") ? "transparent" : e.variant,
+        layout: e.variant === "transparent-header" ? "centered-value-title" : e.layout,
         attached: e.attached,
         loading: e.loading,
-        titleSize: e.titleSize,
-        valueSize: e.valueSize,
+        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
@@ -51,5 +51,5 @@ const z = /* @__PURE__ */ s({
   }
 });
 export {
-  z as default
+  x 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/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?: {