vlite3 0.3.8 → 0.4.2

package/components/Button.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as B, useSlots as I, computed as r, inject as R, withDirectives as S, openBlock as s, createElementBlock as g, normalizeClass as o, createBlock as u, createCommentVNode as h, renderSlot as f, createTextVNode as m, toDisplayString as b, unref as G } from "vue";
-import d from "./Icon.vue.js";
+import { defineComponent as B, useSlots as I, computed as r, inject as R, withDirectives as S, openBlock as s, createElementBlock as g, normalizeClass as i, createBlock as d, createCommentVNode as h, renderSlot as m, createTextVNode as f, toDisplayString as b, unref as G } from "vue";
+import u from "./Icon.vue.js";
 import { vRipple as j } from "../directives/vRipple.js";
 const V = ["type", "disabled"], E = /* @__PURE__ */ B({
   __name: "Button",
@@ -20,8 +20,8 @@ const V = ["type", "disabled"], E = /* @__PURE__ */ B({
     asIcon: { type: Boolean }
   },
   setup(e) {
-    const t = e, x = I(), l = r(() => t?.asIcon || t.icon && !t.text && !x.default), v = R("buttonGroup", null), w = r(() => !!v?.isInGroup), y = r(() => {
-      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", i = {
+    const n = e, x = I(), l = r(() => n?.asIcon || n.icon && !n.text && !x.default), v = R("buttonGroup", null), w = r(() => !!v?.isInGroup), p = r(() => {
+      const t = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", o = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -41,27 +41,31 @@ const V = ["type", "disabled"], E = /* @__PURE__ */ B({
         "outline-success": "border border-success text-success hover:bg-success/10",
         ghost: "hover:bg-accent hover:text-accent-foreground text-foreground",
         link: "text-primary underline-offset-4 hover:underline"
-      }, p = {
+      }, y = {
         xs: "h-6.5 px-2",
         sm: "h-7.5 px-3",
+        sm2: "h-8 px-3",
         md: "h-9 px-4 py-2",
         lg: "h-10 px-6",
         xl: "h-12 px-10"
       }, z = {
         xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
         sm: "h-7 w-7 min-h-7 min-w-7",
+        sm2: "h-7 w-7 min-h-7 min-w-7",
         md: "h-7.5 w-7.5 min-h-7.5 min-w-7.5",
         lg: "h-8 w-8 min-h-8 min-w-8",
         xl: "h-8.5 w-8.5 min-h-8.5 min-w-8.5"
       }, C = {
         xs: "px-2",
         sm: "px-3",
+        sm2: "px-3",
         md: "px-4",
         lg: "px-6",
         xl: "px-10"
       }, k = {
         none: "rounded-none",
         sm: "rounded-sm",
+        sm2: "rounded-sm",
         md: "rounded",
         lg: "rounded-lg",
         xl: "rounded-xl",
@@ -69,57 +73,59 @@ const V = ["type", "disabled"], E = /* @__PURE__ */ B({
         full: "rounded-full"
       };
       let c;
-      return l.value ? c = w.value ? C[t.size] : z[t.size] : c = p[t.size], [
-        n,
-        i[t.variant],
-        k[t.rounded],
+      return l.value ? c = w.value ? C[n.size] : z[n.size] : c = y[n.size], [
+        t,
+        o[n.variant],
+        k[n.rounded],
         c,
-        t.class
+        n.class
       ].join(" ");
     }), a = r(() => {
-      const n = {
+      const t = {
         xs: "w-3 h-3",
         sm: "w-4 h-4",
+        sm2: "w-4 h-4",
         md: "w-4 h-4",
         lg: "w-4 h-4",
         xl: "w-4 h-4"
-      }, i = {
+      }, o = {
         xs: "w-3 h-3",
         sm: "w-3.5 h-3.5",
+        sm2: "w-3.5 h-3.5",
         md: "w-3.5 h-3.5",
         lg: "w-4 h-4",
         xl: "w-4 h-4"
       };
-      return l.value ? i[t.size] : n[t.size];
+      return l.value ? o[n.size] : t[n.size];
     });
-    return (n, i) => S((s(), g("button", {
+    return (t, o) => S((s(), g("button", {
       type: e.type,
-      class: o(y.value),
+      class: i(p.value),
       disabled: e.disabled || e.loading
     }, [
-      e.loading ? (s(), u(d, {
+      e.loading ? (s(), d(u, {
         key: 0,
         icon: "lucide:loader-2",
-        class: o(["animate-spin pointer-events-none", a.value])
-      }, null, 8, ["class"])) : e.icon ? (s(), u(d, {
+        class: i(["animate-spin pointer-events-none", a.value])
+      }, null, 8, ["class"])) : e.icon ? (s(), d(u, {
         key: 1,
         icon: e.icon,
-        class: o(["pointer-events-none", [e.iconClass, a.value, l.value ? "mx-auto" : ""]])
+        class: i(["pointer-events-none", [e.iconClass, a.value, l.value ? "mx-auto" : ""]])
       }, null, 8, ["icon", "class"])) : h("", !0),
       e.textClass ? (s(), g("span", {
         key: 2,
-        class: o(e.textClass)
+        class: i(e.textClass)
       }, [
-        f(n.$slots, "default", {}, () => [
-          m(b(e.text), 1)
+        m(t.$slots, "default", {}, () => [
+          f(b(e.text), 1)
         ])
-      ], 2)) : f(n.$slots, "default", { key: 3 }, () => [
-        m(b(e.text), 1)
+      ], 2)) : m(t.$slots, "default", { key: 3 }, () => [
+        f(b(e.text), 1)
       ]),
-      e.iconRight && !e.loading ? (s(), u(d, {
+      e.iconRight && !e.loading ? (s(), d(u, {
         key: 4,
         icon: e.iconRight,
-        class: o([[e.iconRightClass, a.value], "h-4 w-4 pointer-events-none"])
+        class: i([[e.iconRightClass, a.value], "h-4 w-4 pointer-events-none"])
       }, null, 8, ["icon", "class"])) : h("", !0)
     ], 10, V)), [
       [G(j)]

package/components/ConfirmationModal.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as f, openBlock as m, createBlock as u, withCtx as a, createElementVNode as x, createVNode as r, renderSlot as d } from "vue";
-import g from "./Modal.vue.js";
-import c from "./Button.vue.js";
-const w = { class: "flex w-full items-center justify-end space-x-2" }, k = /* @__PURE__ */ f({
+import { defineComponent as x, openBlock as u, createBlock as g, withCtx as i, createElementVNode as n, toDisplayString as d, createVNode as c, renderSlot as r } from "vue";
+import p from "./Modal.vue.js";
+import m from "./Button.vue.js";
+const h = { class: "py-2 px-[2px]" }, w = { class: "mb-1.5" }, C = { class: "text-sm text-muted" }, v = { class: "flex w-full items-center justify-end space-x-2 px-[2px]" }, B = /* @__PURE__ */ x({
   __name: "ConfirmationModal",
   props: {
     show: { type: Boolean, default: !1 },
@@ -13,46 +13,52 @@ const w = { class: "flex w-full items-center justify-end space-x-2" }, k = /* @_
     variant: { default: "danger" }
   },
   emits: ["cancel", "confirm"],
-  setup(e, { emit: s }) {
-    const i = s, n = () => {
-      i("cancel");
+  setup(e, { emit: f }) {
+    const l = f, o = () => {
+      l("cancel");
     };
-    return (l, t) => (m(), u(g, {
+    return (s, t) => (u(), g(p, {
       show: e.show,
-      title: e.title,
-      description: e.description,
       footerClass: "border-t-0! pt-0! pb-3.5!",
       "max-width": "max-w-[400px]",
-      onClose: n,
-      "onUpdate:show": t[1] || (t[1] = (o) => !o && n())
+      onClose: o,
+      "onUpdate:show": t[1] || (t[1] = (a) => !a && o())
     }, {
-      trigger: a(() => [
-        d(l.$slots, "trigger", {}, () => [
-          d(l.$slots, "default")
+      trigger: i(() => [
+        r(s.$slots, "trigger", {}, () => [
+          r(s.$slots, "default")
         ])
       ]),
-      footer: a(({ close: o }) => [
-        x("div", w, [
-          r(c, {
-            variant: "outline",
+      footer: i(({ close: a }) => [
+        n("div", v, [
+          c(m, {
+            variant: "secondary",
             text: e.cancelText,
             disabled: e.loading,
+            size: "sm2",
             onClick: () => {
-              o?.(), n?.();
+              a?.(), o?.();
             }
           }, null, 8, ["text", "disabled", "onClick"]),
-          r(c, {
+          c(m, {
+            size: "sm2",
             variant: e.variant,
             text: e.confirmText,
             loading: e.loading,
-            onClick: t[0] || (t[0] = (C) => i("confirm"))
+            onClick: t[0] || (t[0] = (y) => l("confirm"))
           }, null, 8, ["variant", "text", "loading"])
         ])
       ]),
+      default: i(() => [
+        n("div", h, [
+          n("h3", w, d(e.title), 1),
+          n("p", C, d(e.description), 1)
+        ])
+      ]),
       _: 3
-    }, 8, ["show", "title", "description"]));
+    }, 8, ["show"]));
   }
 });
 export {
-  k as default
+  B as default
 };

package/components/Form/composables/useForm.js

@@ -1,134 +1,148 @@
-import { ref as d, computed as G, watch as H } from "vue";
-import { initializeFormValues as q, deepClone as v, getNestedValue as B, evaluateConditional as A, setNestedValue as S, collectFileFields as J, filterNullCustomFields as K } from "../utils/form.utils.js";
-import { useFileUpload as L } from "./useFileUpload.js";
-function ee(D) {
-  const { schema: u, values: w, isUpdate: m = !1, folderId: x, onSubmit: g } = D, { handleUploadFile: z } = L(), t = d(q(u, w)), n = d({}), y = d(!1), f = d(!1), h = d(v(t.value)), p = G(() => u ? Array.isArray(u[0]) ? u.flat() : u : []);
-  H(
-    () => w,
+import { ref as v, computed as K, watch as L } from "vue";
+import { initializeFormValues as q, deepClone as m, getNestedValue as B, evaluateConditional as z, setNestedValue as w, collectFileFields as Q, filterNullCustomFields as W } from "../utils/form.utils.js";
+import { useFileUpload as X } from "./useFileUpload.js";
+function se(M) {
+  const { schema: c, values: x, isUpdate: F = !1, folderId: U, onSubmit: g } = M, { handleUploadFile: j } = X(), t = v(q(c, x)), o = v({}), b = v(!1), d = v(!1), h = v(m(t.value)), y = K(() => c ? Array.isArray(c[0]) ? c.flat() : c : []);
+  L(
+    () => x,
     (e) => {
-      e && (t.value = q(u, e), h.value = v(t.value), f.value = !1);
+      e && (t.value = q(c, e), h.value = m(t.value), d.value = !1);
     },
     { deep: !0 }
   );
-  const b = () => ({
+  const V = () => ({
     values: t.value,
-    isUpdate: m
-  }), U = (e) => B(t.value, e), M = (e) => n.value[e] || "", E = (e, a) => {
-    a ? n.value[e] = a : delete n.value[e];
-  }, V = () => {
-    n.value = {};
-  }, C = (e) => e.when ? A(e.when, b()) : !0, j = (e) => A(e.disabled, b()), O = (e) => A(e.readonly, b()), P = (e) => {
-    const a = U(e.name);
-    let l = "";
-    if (e.required && (a == null || a === "" || Array.isArray(a) && a.length === 0) && (l = `${e.label || e.name} is required`), !l && e.maxFileSize) {
-      const r = e.maxFileSize * 1024 * 1024;
-      if (a != null && a !== "") {
-        const s = Array.isArray(a) ? a : [a];
-        for (const o of s) {
-          const i = o instanceof File ? o.size : o?.fileSize || o?.file?.size || o?.size;
-          if (i !== void 0 && i > r) {
-            l = `${e.label || e.name} size must be less than ${e.maxFileSize}MB`;
+    isUpdate: F
+  }), E = (e) => B(t.value, e), T = (e) => o.value[e] || "", C = (e, l) => {
+    l ? o.value[e] = l : delete o.value[e];
+  }, A = () => {
+    o.value = {};
+  }, N = (e) => e.when ? z(e.when, V()) : !0, O = (e) => z(e.disabled, V()), I = (e) => z(e.readonly, V()), D = (e) => {
+    const l = E(e.name);
+    let a = "";
+    if (e.required && (l == null || l === "" || Array.isArray(l) && l.length === 0) && (a = `${e.label || e.name} is required`), !a && e.maxFileSize) {
+      const i = e.maxFileSize * 1024 * 1024;
+      if (l != null && l !== "") {
+        const n = Array.isArray(l) ? l : [l];
+        for (const s of n) {
+          const u = s instanceof File ? s.size : s?.fileSize || s?.file?.size || s?.size;
+          if (u !== void 0 && u > i) {
+            a = `${e.label || e.name} size must be less than ${e.maxFileSize}MB`;
             break;
           }
         }
       }
     }
-    if (!l && (e.type === "file" || e.type === "fileUploader") && (e.props?.multiple || e.maxFiles)) {
-      const r = e.maxFiles || e.props?.maxFiles;
-      r && Array.isArray(a) && a.length > r && (l = `Maximum ${r} files allowed`);
+    if (!a && (e.type === "file" || e.type === "fileUploader") && (e.props?.multiple || e.maxFiles)) {
+      const i = e.maxFiles || e.props?.maxFiles;
+      i && Array.isArray(l) && l.length > i && (a = `Maximum ${i} files allowed`);
     }
-    return !l && e.validation && (l = e.validation({
-      value: a,
+    return !a && e.validation && (a = e.validation({
+      value: l,
       values: t.value,
-      isUpdate: m
-    })), l ? n.value[e.name] = l : delete n.value[e.name], l;
-  }, $ = () => {
-    V();
+      isUpdate: F
+    })), a ? o.value[e.name] = a : delete o.value[e.name], a;
+  }, P = () => {
+    A();
     let e = !0;
-    for (const a of p.value) {
-      if (!C(a) || j(a)) continue;
-      P(a) && (e = !1);
+    for (const l of y.value) {
+      if (!N(l) || O(l)) continue;
+      D(l) && (e = !1);
     }
     return e;
-  }, k = (e, a, l) => {
-    t.value = S(t.value, e, a), f.value = !0, delete n.value[e];
-    const r = p.value.find((s) => s.name === e);
-    if (r?.updateValues) {
-      const s = r.updateValues({
+  }, R = (e, l, a) => {
+    t.value = w(t.value, e, l), d.value = !0, delete o.value[e];
+    const i = y.value.find((n) => n.name === e);
+    if (i?.updateValues) {
+      const n = i.updateValues({
         values: t.value,
-        data: l,
-        isUpdate: m,
-        updateError: E
+        data: a,
+        isUpdate: F,
+        updateError: C
       });
-      s && typeof s == "object" && (t.value = { ...t.value, ...s });
+      n && typeof n == "object" && (t.value = { ...t.value, ...n });
     }
-  }, I = async () => {
-    const e = v(t.value), l = J(u, e).map(async (s) => {
-      const { name: o, value: i } = s;
-      if (Array.isArray(i)) {
-        const N = i.map(async (c) => c instanceof File || c && typeof c == "object" && c.file instanceof File ? await z(c, x) || null : c), F = await Promise.all(N);
-        return { name: o, value: F };
+  }, G = async () => {
+    const e = m(t.value), l = Q(c, e), a = (s, u) => {
+      let r = null;
+      return s instanceof File ? r = s : s && typeof s == "object" && s.file instanceof File && (r = s.file), {
+        fileName: s?.fileName || r?.name || u.split("/").pop() || "unknown",
+        fileUrl: u,
+        fileType: s?.fileType || r?.type || "application/octet-stream",
+        fileSize: s?.fileSize || r?.size || 0
+      };
+    }, i = l.map(async (s) => {
+      const { name: u, value: r, field: J } = s, $ = J.returnFileObject === !0;
+      if (Array.isArray(r)) {
+        const k = r.map(async (f) => {
+          if (f instanceof File || f && typeof f == "object" && f.file instanceof File) {
+            const S = await j(f, U);
+            return S ? $ ? a(f, S) : S : null;
+          }
+          return f;
+        }), p = await Promise.all(k);
+        return { name: u, value: p };
       } else {
-        if (i instanceof File || i && typeof i == "object" && i.file instanceof File) {
-          const F = await z(i, x);
-          if (F)
-            return { name: o, value: F };
+        if (r instanceof File || r && typeof r == "object" && r.file instanceof File) {
+          const p = await j(r, U);
+          if (p)
+            return { name: u, value: $ ? a(r, p) : p };
         }
         return null;
       }
     });
-    return (await Promise.all(l)).forEach((s) => {
-      s && Object.assign(e, S(e, s.name, s.value));
+    return (await Promise.all(i)).forEach((s) => {
+      s && Object.assign(e, w(e, s.name, s.value));
     }), e;
-  }, R = (e) => {
-    const a = { ...e };
-    for (const l of p.value)
-      if (l.type === "customFields" && l.props?.schema) {
-        const r = B(a, l.name);
-        if (Array.isArray(r)) {
-          const s = K(r, l.props.schema);
-          Object.assign(a, S(a, l.name, s));
+  }, H = (e) => {
+    const l = { ...e };
+    for (const a of y.value)
+      if (a.type === "customFields" && a.props?.schema) {
+        const i = B(l, a.name);
+        if (Array.isArray(i)) {
+          const n = W(i, a.props.schema);
+          Object.assign(l, w(l, a.name, n));
         }
       }
-    return a;
+    return l;
   };
   return {
     formValues: t,
-    errors: n,
-    isSubmitting: y,
-    isDirty: f,
-    handleFieldChange: k,
-    validateField: P,
-    validateAll: $,
-    isFieldVisible: C,
-    isFieldDisabled: j,
-    isFieldReadonly: O,
-    getFieldValue: U,
-    getFieldError: M,
-    setFieldError: E,
-    clearErrors: V,
+    errors: o,
+    isSubmitting: b,
+    isDirty: d,
+    handleFieldChange: R,
+    validateField: D,
+    validateAll: P,
+    isFieldVisible: N,
+    isFieldDisabled: O,
+    isFieldReadonly: I,
+    getFieldValue: E,
+    getFieldError: T,
+    setFieldError: C,
+    clearErrors: A,
     resetForm: () => {
-      t.value = v(h.value), V(), f.value = !1;
+      t.value = m(h.value), A(), d.value = !1;
     },
     handleSubmit: async () => {
-      if ($()) {
-        y.value = !0;
+      if (P()) {
+        b.value = !0;
         try {
-          let a = await I();
-          a = R(a), g && await g({
-            values: a,
-            isUpdate: m
-          }), f.value = !1, h.value = v(a);
-        } catch (a) {
-          throw console.error("[useForm] Submit error:", a), a;
+          let l = await G();
+          l = H(l), g && await g({
+            values: l,
+            isUpdate: F
+          }), d.value = !1, h.value = m(l);
+        } catch (l) {
+          throw console.error("[useForm] Submit error:", l), l;
         } finally {
-          y.value = !1;
+          b.value = !1;
         }
       }
     },
-    flatSchema: p
+    flatSchema: y
   };
 }
 export {
-  ee as useForm
+  se as useForm
 };

package/components/Form/types.d.ts

@@ -117,6 +117,8 @@ export interface IForm {
     maxFileSize?: number;
     /** Maximum number of files allowed when multiple is true */
     maxFiles?: number;
+    /** Return file values as objects { fileName, fileUrl, fileType, fileSize } instead of string URLs */
+    returnFileObject?: boolean;
 }
 /**
  * Timeline step for multi-step forms

package/components/Form/utils/form.utils.d.ts

@@ -33,6 +33,7 @@ export declare function collectFileFields(schema: IForm[] | IForm[][], values: R
     name: string;
     value: any;
     type: string;
+    field: IForm;
 }>;
 /**
  * Deep clone an object

package/components/Form/utils/form.utils.js

@@ -1,7 +1,7 @@
 function v(e) {
   return !!e && typeof e == "object";
 }
-function s(e, n) {
+function u(e, n) {
   if (!n || !e) return;
   const t = n.split(".");
   let f = e;
@@ -22,14 +22,14 @@ function d(e, n, t) {
   return i[f[f.length - 1]] = t, r;
 }
 function m(e, n) {
-  return !v(n) || !n.name ? e : s(e, n.name) === void 0 && n.value !== void 0 ? d(e, n.name, n.value) : e;
+  return !v(n) || !n.name ? e : u(e, n.name) === void 0 && n.value !== void 0 ? d(e, n.name, n.value) : e;
 }
 function g(e, n) {
   let t = n ? c(n) : {};
   const f = Array.isArray(e[0]) ? e.flat() : e;
   for (const r of f) {
     if (!r.name) continue;
-    if (s(t, r.name) === void 0) {
+    if (u(t, r.name) === void 0) {
       const o = typeof r.value == "function" ? r.value() : r.value;
       o !== void 0 && Object.assign(t, d(t, r.name, o));
     }
@@ -40,38 +40,40 @@ function g(e, n) {
 function h(e, n) {
   return e === void 0 ? !1 : typeof e == "boolean" ? e : typeof e == "function" ? e(n) : !1;
 }
-function F(e, n) {
+function V(e, n) {
   return Array.isArray(e) ? e.filter((t) => t ? !n.every((r) => {
     const i = t[r.name];
     return i == null || i === "";
   }) : !1) : [];
 }
-function V(e, n) {
+function F(e, n) {
   const t = [], f = Array.isArray(e[0]) ? e.flat() : e;
   for (const r of f) {
     if (!r.name) continue;
     const i = r.type;
     if (i === "file" || i === "avatarUpload" || i === "fileUploader") {
-      const o = s(n, r.name);
+      const o = u(n, r.name);
       o && t.push({
         name: r.name,
         value: o,
-        type: i
+        type: i,
+        field: r
       });
     }
     if (i === "customFields" && r.props?.schema) {
-      const o = s(n, r.name);
+      const o = u(n, r.name);
       if (Array.isArray(o)) {
         const y = r.props.schema.filter(
           (a) => a.type === "file" || a.type === "avatarUpload" || a.type === "fileUploader"
         );
         y.length > 0 && o.forEach((a, A) => {
-          y.forEach((u) => {
-            const p = a?.[u.name];
+          y.forEach((s) => {
+            const p = a?.[s.name];
             p && t.push({
-              name: `${r.name}.${A}.${u.name}`,
+              name: `${r.name}.${A}.${s.name}`,
               value: p,
-              type: u.type
+              type: s.type,
+              field: s
             });
           });
         });
@@ -94,11 +96,11 @@ function k(e) {
   return e ? typeof e == "object" && (typeof e.render == "function" || typeof e.setup == "function" || e.__name !== void 0 || e.name !== void 0) : !1;
 }
 export {
-  V as collectFileFields,
+  F as collectFileFields,
   c as deepClone,
   h as evaluateConditional,
-  F as filterNullCustomFields,
-  s as getNestedValue,
+  V as filterNullCustomFields,
+  u as getNestedValue,
   g as initializeFormValues,
   v as isAddonObject,
   k as isComponent,

package/components/Screen/Screen.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as W, computed as S, ref as y, provide as E, watch as N, resolveComponent as X, openBlock as a, createElementBlock as i, normalizeClass as D, createElementVNode as h, renderSlot as B, toDisplayString as f, createCommentVNode as m, createBlock as s, unref as I, createVNode as r, resolveDynamicComponent as R, Fragment as P, mergeProps as c, withCtx as o, createTextVNode as v } from "vue";
+import { defineComponent as W, computed as N, ref as y, provide as E, watch as R, resolveComponent as X, openBlock as a, createElementBlock as i, normalizeClass as D, createElementVNode as h, renderSlot as B, toDisplayString as f, createCommentVNode as m, createBlock as s, unref as I, createVNode as r, resolveDynamicComponent as U, Fragment as P, mergeProps as c, withCtx as o, createTextVNode as v } from "vue";
 import Y from "../Input.vue.js";
 import u from "../Button.vue.js";
 import F from "../Icon.vue.js";
@@ -61,32 +61,32 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
   },
   emits: ["add", "delete"],
   setup(e, { emit: L }) {
-    const l = e, U = L, K = S(() => l.name || l.title || "default-screen"), b = te(
+    const l = e, j = L, K = N(() => l.name || l.title || "default-screen"), b = te(
       `view-mode-${K.value}`,
       l.table ? "table" : "list"
-    ), x = y(""), A = y({}), w = y(l.pageInfo?.currentPage || 1), $ = y(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), g = y([]), j = y([]), k = y(!1);
-    E("screen-selected-rows", g), E("screen-request-delete", (t) => T(t));
-    const T = (t) => {
-      j.value = t, k.value = !0;
+    ), x = y(""), A = y({}), w = y(l.pageInfo?.currentPage || 1), $ = y(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), g = y([]), V = y([]), k = y(!1);
+    E("screen-selected-rows", g), E("screen-request-delete", (t) => S(t));
+    const S = (t) => {
+      V.value = t, k.value = !0;
     }, O = () => {
-      U("delete", j.value), k.value = !1, g.value = [];
+      j("delete", V.value), k.value = !1, g.value = [];
     }, Q = (t) => {
-      U("delete", t), g.value = [];
+      j("delete", t), g.value = [];
     };
-    N(
+    R(
       () => l.pageInfo?.currentPage,
       (t) => {
         t && (w.value = t);
       }
-    ), N(
+    ), R(
       () => l.pageInfo?.itemsPerPage,
       (t) => {
         t && ($.value = t);
       }
     );
-    let V = null;
-    N(x, (t) => {
-      V && clearTimeout(V), V = setTimeout(() => {
+    let T = null;
+    R(x, (t) => {
+      T && clearTimeout(T), T = setTimeout(() => {
         w.value = 1, C();
       }, 300);
     });
@@ -108,7 +108,7 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
         filter: A.value
       };
       l.refetch && l.refetch(t);
-    }, z = S(() => b.value === "table" && l.table ? l.table : l.list), M = S(() => l.data && l.data.length > 0);
+    }, z = N(() => b.value === "table" && l.table ? l.table : l.list), M = N(() => l.data && l.data.length > 0);
     return (t, n) => {
       const q = X("router-link");
       return a(), i("div", ae, [
@@ -132,13 +132,13 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
                 class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
                 icon: "lucide:trash-2",
                 title: "Delete Selected",
-                onClick: n[0] || (n[0] = (d) => T(g.value))
+                onClick: n[0] || (n[0] = (d) => S(g.value))
               })) : m("", !0),
               e.table && e.list ? (a(), i("div", se, [
                 h("button", {
                   onClick: n[1] || (n[1] = (d) => b.value = "list"),
                   class: D(["p-1.5 rounded", [
-                    I(b) === "list" ? "bg-secondary/85 dark:bg-gray-250 shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+                    I(b) === "list" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
                   title: "List View"
                 }, [
@@ -150,7 +150,7 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
                 h("button", {
                   onClick: n[2] || (n[2] = (d) => b.value = "table"),
                   class: D(["p-1.5 rounded", [
-                    I(b) === "table" ? "bg-secondary/85 dark:bg-gray-250 shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+                    I(b) === "table" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
                   title: "Table View"
                 }, [
@@ -194,7 +194,7 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
             ]),
             h("div", ue, [
               B(t.$slots, "actions", {}, () => [
-                e.addComponent ? (a(), s(R(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
+                e.addComponent ? (a(), s(U(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
                   e.addBtn ? (a(), i(P, { key: 0 }, [
                     e.addBtn.modal ? (a(), s(H, c({
                       key: 0,
@@ -293,7 +293,7 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
               icon: e.emptyIcon
             }, {
               action: o(() => [
-                e.addComponent ? (a(), s(R(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
+                e.addComponent ? (a(), s(U(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
                   e.addBtn ? (a(), i(P, { key: 0 }, [
                     e.addBtn.modal ? (a(), s(H, c({
                       key: 0,
@@ -373,14 +373,14 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
               _: 1
             }, 8, ["title", "description", "icon"])
           ]) : (a(), i(P, { key: 1 }, [
-            z.value ? (a(), s(R(z.value), {
+            z.value ? (a(), s(U(z.value), {
               key: 0,
               data: e.data,
               loading: e.loading,
               refetch: e.refetch,
               selectedRows: g.value,
               "onUpdate:selectedRows": n[9] || (n[9] = (d) => g.value = d),
-              delete: T,
+              delete: S,
               onDelete: Q
             }, null, 40, ["data", "loading", "refetch", "selectedRows"])) : (a(), i("div", me, " Please provide a `:list` or `:table` component. "))
           ], 64))
@@ -399,13 +399,13 @@ const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex
           show: k.value,
           "onUpdate:show": n[10] || (n[10] = (d) => k.value = d),
           title: "Confirm Deletion",
-          description: "Are you sure you want to delete the selected items? This action cannot be undone.",
+          description: `Are you sure you want to delete the selected ${V.value.length > 1 ? "items" : "item"}?`,
           "confirm-text": "Delete",
           "cancel-text": "Cancel",
           variant: "danger",
           onConfirm: O,
           onCancel: n[11] || (n[11] = (d) => k.value = !1)
-        }, null, 8, ["show"])
+        }, null, 8, ["show", "description"])
       ]);
     };
   }

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.3.8",
+  "version": "0.4.2",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -259,7 +259,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 
-@utility dark {
+.dark {
   --color-white: #0b0b0b !important;
   --color-mixture-1: #0c0c0c !important;
   --color-mixture-2: #ffffff !important;

package/types/button.d.ts

@@ -1,6 +1,6 @@
 export type ButtonVariant = 'primary' | 'primary-light' | 'secondary' | 'danger' | 'danger-light' | 'warning' | 'warning-light' | 'info' | 'info-light' | 'success' | 'success-light' | 'outline' | 'outline-primary' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'outline-success' | 'ghost' | 'link';
-export type ButtonSize = 'xs' | 'md' | 'sm' | 'lg' | 'xl';
-export type ButtonRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type ButtonSize = 'xs' | 'sm' | 'sm2' | 'md' | 'lg' | 'xl';
+export type ButtonRounded = 'none' | 'sm' | 'sm2' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 export interface ButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;