vlite3 1.3.4 → 1.3.6

package/components/Stats/Stats.vue.d.ts

@@ -11,5 +11,5 @@ declare const _default: import('vue').DefineComponent<StatsProps, {}, {}, {}, {}
     iconSize: string;
     titleSize: string;
     valueSize: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/Stats/Stats.vue.js

@@ -1,6 +1,6 @@
-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 { defineComponent as h, computed as n, openBlock as i, createElementBlock as r, normalizeClass as d, createElementVNode as x, Fragment as u, renderList as s, createBlock as g } from "vue";
 import v from "./StatItem.vue.js";
-const x = /* @__PURE__ */ s({
+const b = /* @__PURE__ */ h({
   __name: "Stats",
   props: {
     items: {},
@@ -17,26 +17,54 @@ const x = /* @__PURE__ */ s({
     class: { default: "" }
   },
   setup(e) {
-    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",
-        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 (a, S) => (l(), r("div", {
-      class: u(d.value)
+    const a = e, c = n(() => {
+      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";
+    }), S = n(() => [
+      "grid",
+      c.value,
+      a.variant === "transparent-header" ? "gap-2 md:gap-3.5" : "gap-3 sm:gap-4.5",
+      a?.layout === "inline-label-value" ? "rounded-sm" : "",
+      a.class
+    ].join(" ")), m = n(() => [
+      a.layout === "inline-label-value" ? "rounded-sm" : "rounded-lg",
+      "overflow-hidden",
+      a.variant !== "transparent" ? "border border-border" : "",
+      a.variant === "shadow" ? "shadow-md bg-card" : "",
+      a.class
+    ].join(" ")), f = n(() => [
+      "grid",
+      c.value,
+      "w-[calc(100%+1px)] -mb-px -mr-px gap-0"
+    ].join(" "));
+    return (t, y) => e.attached ? (i(), r("div", {
+      key: 0,
+      class: d(m.value)
     }, [
-      (l(!0), r(g, null, f(e.items, (i, c) => (l(), m(v, {
-        key: i.id || c,
-        item: i,
+      x("div", {
+        class: d(f.value)
+      }, [
+        (i(!0), r(u, null, s(e.items, (l, o) => (i(), g(v, {
+          key: l.id || o,
+          item: l,
+          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.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
+        }, null, 8, ["item", "variant", "layout", "attached", "loading", "titleSize", "valueSize", "iconSize", "iconBoxShape", "iconBoxStyle"]))), 128))
+      ], 2)
+    ], 2)) : (i(), r("div", {
+      key: 1,
+      class: d(S.value)
+    }, [
+      (i(!0), r(u, null, s(e.items, (l, o) => (i(), g(v, {
+        key: l.id || o,
+        item: l,
         variant: e.variant.startsWith("transparent") ? "transparent" : e.variant,
         layout: e.variant === "transparent-header" ? "centered-value-title" : e.layout,
         attached: e.attached,
@@ -51,5 +79,5 @@ const x = /* @__PURE__ */ s({
   }
 });
 export {
-  x as default
+  b as default
 };

package/components/StatusChip/status-map.js

@@ -94,6 +94,7 @@ const o = {
   disabled: { variant: "secondary", icon: "lucide:toggle-left" },
   void: { variant: "secondary", icon: "lucide:ban" },
   refunded: { variant: "pink", icon: "lucide:corner-up-left" },
+  reversed: { variant: "pink", icon: "lucide:rotate-ccw" },
   outofstock: { variant: "danger", icon: "lucide:package-x" },
   absent: { variant: "danger", icon: "lucide:user-x" },
   offline: { variant: "secondary", icon: "lucide:wifi-off" },

package/components/ThemeToggle.vue.d.ts

@@ -10,7 +10,7 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {
             toggleTheme: () => void;
-            theme: "light" | "dark";
+            theme: "light-mode" | "dark";
         }): any;
     };
     refs: {};

package/components/ThemeToggle.vue.js

@@ -12,7 +12,7 @@ const w = /* @__PURE__ */ m({
   },
   setup(t) {
     const { theme: i, toggleTheme: s } = f(), a = d(() => {
-      const n = i.value === "light", l = "vlite.themeToggle.switchToDark", r = "vlite.themeToggle.switchToLight";
+      const n = i.value === "light-mode", l = "vlite.themeToggle.switchToDark", r = "vlite.themeToggle.switchToLight";
       if (n) {
         const e = c(l);
         return e !== l ? e : "Switch to dark mode";
@@ -26,7 +26,7 @@ const w = /* @__PURE__ */ m({
       theme: o(i)
     }, () => [
       h(T, {
-        icon: o(i) === "light" ? "lucide:sun" : "lucide:moon",
+        icon: o(i) === "light-mode" ? "lucide:sun" : "lucide:moon",
         variant: t.variant || "secondary",
         rounded: t.rounded || "full",
         size: t.size,

package/components/Timeline/TimelineItem.vue.js

@@ -1,27 +1,24 @@
-import { defineComponent as C, computed as g, openBlock as s, createElementBlock as l, normalizeClass as o, createElementVNode as i, createVNode as y, createCommentVNode as c, renderSlot as a, toDisplayString as d, createBlock as u, createTextVNode as P, resolveDynamicComponent as I, normalizeProps as $, mergeProps as T } from "vue";
-import h from "../Icon.vue.js";
-import k from "./TimelineIndicator.vue.js";
-import { $t as m } from "../../utils/i18n.js";
-const B = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, V = { class: "flex flex-col gap-1" }, N = { class: "flex justify-between items-start gap-4" }, D = { class: "text-sm font-semibold text-foreground leading-none" }, j = {
+import { defineComponent as P, computed as b, openBlock as s, createElementBlock as l, normalizeClass as o, createElementVNode as i, createVNode as y, createCommentVNode as c, renderSlot as a, toDisplayString as d, createBlock as g, resolveDynamicComponent as I, normalizeProps as $, mergeProps as L } from "vue";
+import h from "./TimelineIndicator.vue.js";
+import B from "../StatusChip/StatusChip.vue.js";
+import { $t as r } from "../../utils/i18n.js";
+const C = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, T = { class: "flex flex-col gap-1" }, V = { class: "flex justify-between items-start gap-4" }, D = { class: "text-sm font-semibold text-foreground leading-none" }, N = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, p = {
+}, j = {
   key: 0,
   class: "shrink-0"
-}, z = {
-  key: 0,
-  class: "h-1.5 w-1.5 rounded-full bg-muted-foreground"
-}, E = { class: "mt-1" }, q = {
+}, z = { class: "mt-1" }, E = {
   key: 1,
   class: "text-sm text-muted-foreground"
-}, A = {
+}, q = {
   key: 0,
   class: "text-xs text-muted-foreground mt-1"
-}, F = {
+}, A = {
   key: 0,
   class: "hidden sm:block flex-1 h-0.5 bg-border ml-2",
   "aria-hidden": "true"
-}, O = /* @__PURE__ */ C({
+}, M = /* @__PURE__ */ P({
   __name: "TimelineItem",
   props: {
     step: {},
@@ -35,85 +32,71 @@ const B = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, V = { class
     clickable: { type: Boolean }
   },
   emits: ["step-click"],
-  setup(e, { emit: v }) {
-    const n = e, w = v, S = g(() => n.direction === "vertical"), r = g(() => n.step.progressStatus ? n.step.progressStatus : n.index < n.activeStep ? "completed" : n.index === n.activeStep ? "current" : "upcoming"), x = (t) => t.titleI18n ? m(t.titleI18n) : t.title, L = (t) => t.subtitleI18n ? m(t.subtitleI18n) : t.subtitle, f = (t) => t.descriptionI18n ? m(t.descriptionI18n) : t.description, b = () => {
-      n.clickable && w("step-click", n.step, n.index);
+  setup(t, { emit: v }) {
+    const n = t, k = v, S = b(() => n.direction === "vertical"), m = b(() => n.step.progressStatus ? n.step.progressStatus : n.index < n.activeStep ? "completed" : n.index === n.activeStep ? "current" : "upcoming"), u = (e) => e.titleI18n ? r(e.titleI18n) : e.title, w = (e) => e.subtitleI18n ? r(e.subtitleI18n) : e.subtitle, x = (e) => e.descriptionI18n ? r(e.descriptionI18n) : e.description, f = () => {
+      n.clickable && k("step-click", n.step, n.index);
     };
-    return (t, G) => S.value ? (s(), l("li", {
+    return (e, F) => S.value ? (s(), l("li", {
       key: 0,
-      class: o(["relative flex w-full", e.clickable ? "cursor-pointer" : ""]),
-      onClick: b
+      class: o(["relative flex w-full", t.clickable ? "cursor-pointer" : ""]),
+      onClick: f
     }, [
-      i("div", B, [
-        y(k, {
-          status: r.value,
-          type: e.indicatorType,
-          index: e.index,
-          icon: e.step.icon
+      i("div", C, [
+        y(h, {
+          status: m.value,
+          type: t.indicatorType,
+          index: t.index,
+          icon: t.step.icon
         }, null, 8, ["status", "type", "index", "icon"]),
-        e.isLast ? c("", !0) : (s(), l("div", {
+        t.isLast ? c("", !0) : (s(), l("div", {
           key: 0,
           class: o(["my-2 flex-1 transition-colors duration-300", [
-            e.lineStyle === "dashed" ? "w-0 border-l-[1.5px] border-dashed" : "w-0.5",
-            r.value === "completed" ? e.lineStyle === "dashed" ? "border-primary" : "bg-primary" : e.lineStyle === "dashed" ? "border-border" : "bg-border"
+            t.lineStyle === "dashed" ? "w-0 border-l-[1.5px] border-dashed" : "w-0.5",
+            m.value === "completed" ? t.lineStyle === "dashed" ? "border-primary" : "bg-primary" : t.lineStyle === "dashed" ? "border-border" : "bg-border"
           ]])
         }, null, 2))
       ]),
       i("div", {
-        class: o(["flex-1 flex flex-col pt-0.5", e.isLast ? "pb-0" : "pb-5"])
+        class: o(["flex-1 flex flex-col pt-0.5", t.isLast ? "pb-0" : "pb-5"])
       }, [
-        a(t.$slots, "content", {
-          step: e.step,
-          index: e.index
+        a(e.$slots, "content", {
+          step: t.step,
+          index: t.index
         }, () => [
-          i("div", V, [
-            i("div", N, [
+          i("div", T, [
+            i("div", V, [
               i("div", null, [
-                a(t.$slots, "title", {
-                  step: e.step,
-                  index: e.index
+                a(e.$slots, "title", {
+                  step: t.step,
+                  index: t.index
                 }, () => [
-                  i("h4", D, d(x(e.step)), 1)
+                  i("h4", D, d(u(t.step)), 1)
                 ]),
-                a(t.$slots, "subtitle", {
-                  step: e.step,
-                  index: e.index
+                a(e.$slots, "subtitle", {
+                  step: t.step,
+                  index: t.index
                 }, () => [
-                  e.step.subtitle || e.step.subtitleI18n ? (s(), l("p", j, d(L(e.step)), 1)) : c("", !0)
+                  t.step.subtitle || t.step.subtitleI18n ? (s(), l("p", N, d(w(t.step)), 1)) : c("", !0)
                 ])
               ]),
-              e.step.status || t.$slots.status ? (s(), l("div", p, [
-                a(t.$slots, "status", {
-                  step: e.step,
-                  index: e.index
+              t.step.status || e.$slots.status ? (s(), l("div", j, [
+                a(e.$slots, "status", {
+                  step: t.step,
+                  index: t.index
                 }, () => [
-                  i("span", {
-                    class: o(["inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border", [
-                      e.step.status?.toLowerCase().includes("approv") || e.step.status?.toLowerCase().includes("complet") ? "bg-success-light text-success-dark border-success/20" : "",
-                      e.step.status?.toLowerCase().includes("pend") ? "bg-muted text-muted-foreground border-border" : "",
-                      e.step.status?.toLowerCase().includes("progress") ? "bg-primary-light text-primary border-primary/20" : ""
-                    ]])
-                  }, [
-                    e.step.status?.toLowerCase().includes("pend") ? (s(), l("span", z)) : e.step.status?.toLowerCase().includes("approv") || e.step.status?.toLowerCase().includes("complet") ? (s(), u(h, {
-                      key: 1,
-                      icon: "lucide:check",
-                      class: "h-3 w-3"
-                    })) : e.step.status?.toLowerCase().includes("progress") ? (s(), u(h, {
-                      key: 2,
-                      icon: "lucide:loader-2",
-                      class: "h-3 w-3 animate-spin"
-                    })) : c("", !0),
-                    P(" " + d(e.step.status), 1)
-                  ], 2)
+                  t.step.status ? (s(), g(B, {
+                    key: 0,
+                    status: t.step.status
+                  }, null, 8, ["status"])) : c("", !0)
                 ])
               ])) : c("", !0)
             ]),
-            i("div", E, [
-              a(t.$slots, "body", {
-                step: e.step,
-                index: e.index
+            i("div", z, [
+              a(e.$slots, "body", {
+                step: t.step,
+                index: t.index
               }, () => [
-                e.step.component ? (s(), u(I(e.step.component), $(T({ key: 0 }, e.step.componentProps)), null, 16)) : e.step.description || e.step.descriptionI18n ? (s(), l("p", q, d(f(e.step)), 1)) : c("", !0)
+                t.step.component ? (s(), g(I(t.step.component), $(L({ key: 0 }, t.step.componentProps)), null, 16)) : t.step.description || t.step.descriptionI18n ? (s(), l("p", E, d(x(t.step)), 1)) : c("", !0)
               ])
             ])
           ])
@@ -121,47 +104,47 @@ const B = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, V = { class
       ], 2)
     ], 2)) : (s(), l("li", {
       key: 1,
-      onClick: b,
+      onClick: f,
       class: o([
         "relative",
-        e.clickable ? "cursor-pointer" : "",
-        e.textPosition === "bottom" ? "flex-none w-8" : "flex-1 last:flex-none"
+        t.clickable ? "cursor-pointer" : "",
+        t.textPosition === "bottom" ? "flex-none w-8" : "flex-1 last:flex-none"
       ])
     }, [
       i("div", {
         class: o([
           "group relative flex",
-          e.textPosition === "bottom" ? "flex-col items-center justify-center" : "flex-col items-center sm:flex-row sm:items-center sm:gap-2 w-full"
+          t.textPosition === "bottom" ? "flex-col items-center justify-center" : "flex-col items-center sm:flex-row sm:items-center sm:gap-2 w-full"
         ])
       }, [
-        y(k, {
-          status: r.value,
-          type: e.indicatorType,
-          index: e.index,
-          icon: e.step.icon
+        y(h, {
+          status: m.value,
+          type: t.indicatorType,
+          index: t.index,
+          icon: t.step.icon
         }, null, 8, ["status", "type", "index", "icon"]),
         i("span", {
           class: o([
             "min-w-[max-content] flex-col hidden sm:flex",
-            e.textPosition === "bottom" ? "absolute top-10 text-center" : "",
-            e.textPosition === "bottom" && e.index === 0 ? "left-0 text-left items-start" : "",
-            e.textPosition === "bottom" && e.isLast ? "right-0 text-right items-end" : "",
-            e.textPosition === "bottom" && e.index > 0 && !e.isLast ? "left-1/2 -translate-x-1/2 items-center" : ""
+            t.textPosition === "bottom" ? "absolute top-10 text-center" : "",
+            t.textPosition === "bottom" && t.index === 0 ? "left-0 text-left items-start" : "",
+            t.textPosition === "bottom" && t.isLast ? "right-0 text-right items-end" : "",
+            t.textPosition === "bottom" && t.index > 0 && !t.isLast ? "left-1/2 -translate-x-1/2 items-center" : ""
           ])
         }, [
-          a(t.$slots, "content", {
-            step: e.step,
-            index: e.index
+          a(e.$slots, "content", {
+            step: t.step,
+            index: t.index
           }, () => [
             i("span", {
-              class: o(["text-sm font-medium leading-tight", r.value === "upcoming" ? "text-muted-foreground" : "text-primary"])
-            }, d(x(e.step)), 3),
-            e.step.description || e.step.descriptionI18n ? (s(), l("span", A, d(f(e.step)), 1)) : c("", !0)
+              class: o(["text-sm font-medium leading-tight", m.value === "upcoming" ? "text-muted-foreground" : "text-primary"])
+            }, d(u(t.step)), 3),
+            t.step.description || t.step.descriptionI18n ? (s(), l("span", q, d(x(t.step)), 1)) : c("", !0)
           ])
         ], 2),
-        e.textPosition === "right" && !e.isLast ? (s(), l("div", F, [
+        t.textPosition === "right" && !t.isLast ? (s(), l("div", A, [
           i("div", {
-            class: o(["h-full bg-primary transition-all duration-300", e.index < e.activeStep ? "w-full" : "w-0"])
+            class: o(["h-full bg-primary transition-all duration-300", t.index < t.activeStep ? "w-full" : "w-0"])
           }, null, 2)
         ])) : c("", !0)
       ], 2)
@@ -169,5 +152,5 @@ const B = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, V = { class
   }
 });
 export {
-  O as default
+  M as default
 };

package/composables/useTheme.d.ts

@@ -1,4 +1,4 @@
-type Theme = 'light' | 'dark';
+type Theme = 'light-mode' | 'dark';
 export declare function initializeTheme(): void;
 export declare function useTheme(): {
     theme: import('vue').Ref<Theme, Theme>;

package/composables/useTheme.js

@@ -1,33 +1,33 @@
-import { ref as a, watch as d, onMounted as r } from "vue";
-const t = a(o());
-function o() {
-  if (typeof window > "u") return "light";
+import { ref as i, watch as m, onMounted as a } from "vue";
+const t = i(d());
+function d() {
+  if (typeof window > "u") return "light-mode";
   const e = localStorage.getItem("builto-theme");
-  return e === "light" || e === "dark" ? e : window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return e === "light-mode" || e === "dark" ? e : window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light-mode";
 }
-function n(e) {
-  document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(e);
+function o(e) {
+  document.documentElement.classList.remove("light-mode", "dark"), document.documentElement.classList.add(e);
 }
-function l() {
+function r() {
   typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-    localStorage.getItem("builto-theme") || (t.value = e.matches ? "dark" : "light", n(t.value));
+    localStorage.getItem("builto-theme") || (t.value = e.matches ? "dark" : "light-mode", o(t.value));
   });
 }
 function u() {
-  t.value = o(), n(t.value), l();
+  t.value = d(), o(t.value), r();
 }
 function c() {
-  d(
+  m(
     t,
-    (i) => {
-      localStorage.setItem("builto-theme", i), n(i);
+    (n) => {
+      localStorage.setItem("builto-theme", n), o(n);
     },
     { immediate: !0 }
-  ), r(() => {
+  ), a(() => {
     document.documentElement.classList.add("bg-body");
   });
   function e() {
-    t.value = t.value === "light" ? "dark" : "light";
+    t.value = t.value === "light-mode" ? "dark" : "light-mode";
   }
   return {
     theme: t,

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -50,7 +50,7 @@
     "v-datepicker-lite": "^0.1.10",
     "v-event-calendar": "^0.0.10",
     "v-file-preview": "^0.1.3",
-    "v-tooltip-lite": "^0.2.8",
+    "v-tooltip-lite": "^0.2.9",
     "vue-carousel-lite": "^0.2.8",
     "vue-draggable-plus": "^0.5.3",
     "vue3-google-signin": "^2.1.1",