vlite3 0.3.8 → 0.4.3

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/Form.vue.d.ts

@@ -44,6 +44,8 @@ interface Props {
     footerClass?: string;
     /** Timeline text position */
     timelineTextPosition?: TimelineTextPosition;
+    /** Fields to explicitly include in the submit payload */
+    emitFields?: string[];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -89,6 +91,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     showCancel: boolean;
     groupClass: string;
     timelineTextPosition: TimelineTextPosition;
+    emitFields: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/Form/Form.vue.js

@@ -1,7 +1,7 @@
 import o from "./Form.vue2.js";
 /* empty css          */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b1fa52ca"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-a67bf34e"]]);
 export {
   f as default
 };

package/components/Form/Form.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as W, inject as X, computed as d, ref as Y, watch as Z, openBlock as l, createElementBlock as o, withModifiers as _, normalizeClass as h, createVNode as x, createCommentVNode as c, unref as t, Fragment as ee, renderList as te, createElementVNode as U, toDisplayString as k, renderSlot as ae, createBlock as p, mergeProps as ie } from "vue";
-import { useForm as se } from "./composables/useForm.js";
+import { defineComponent as W, inject as X, computed as d, ref as Y, watch as Z, openBlock as s, createElementBlock as o, withModifiers as _, normalizeClass as h, createVNode as x, createCommentVNode as c, unref as t, Fragment as ee, renderList as te, createElementVNode as U, toDisplayString as k, renderSlot as ae, createBlock as p, mergeProps as ie } from "vue";
+import { useForm as le } from "./composables/useForm.js";
 import D from "./FormFields.vue.js";
 import A from "../Button.vue.js";
-import le from "../Timeline.vue.js";
+import se from "../Timeline.vue.js";
 const ne = {
   key: 0,
   class: "form-timeline mb-18"
@@ -45,40 +45,42 @@ const ne = {
     groupClass: { default: "" },
     headerClass: { default: "" },
     footerClass: { default: "" },
-    timelineTextPosition: { default: "bottom" }
+    timelineTextPosition: { default: "bottom" },
+    emitFields: { default: () => ["__typename"] }
   },
   emits: ["onSubmit", "onCancel", "onStepChange", "onAddonAction"],
   setup(e, { emit: M }) {
-    const s = e, m = M, f = X("modal-context", null), G = d(() => s.showCancel || !!f), $ = d(() => !!f), b = d(() => !s.schema || s.schema.length === 0 ? !1 : Array.isArray(s.schema[0])), r = d(() => s.tabs && s.tabs.length > 0 && b.value), i = Y(0), w = d(() => s.tabs ? s.tabs.map((n, a) => ({
+    const l = e, m = M, f = X("modal-context", null), G = d(() => l.showCancel || !!f), $ = d(() => !!f), b = d(() => !l.schema || l.schema.length === 0 ? !1 : Array.isArray(l.schema[0])), r = d(() => l.tabs && l.tabs.length > 0 && b.value), i = Y(0), w = d(() => l.tabs ? l.tabs.map((n, a) => ({
       id: n.id?.toString() || a.toString(),
       title: n.title,
       icon: n.icon,
       description: n.description,
       status: a < i.value ? "completed" : a === i.value ? "current" : "upcoming"
-    })) : []), g = d(() => b.value ? s.schema : [s.schema]), P = d(() => r.value ? g.value[i.value] || [] : []), {
+    })) : []), g = d(() => b.value ? l.schema : [l.schema]), P = d(() => r.value ? g.value[i.value] || [] : []), {
       formValues: y,
-      errors: S,
+      errors: F,
       isSubmitting: N,
       handleFieldChange: j,
       validateField: E,
       validateAll: he,
-      isFieldVisible: C,
-      isFieldDisabled: F,
+      isFieldVisible: S,
+      isFieldDisabled: C,
       isFieldReadonly: V,
       getFieldValue: be,
       handleSubmit: L,
       flatSchema: ge
-    } = se({
-      schema: s.schema,
-      values: s.values,
-      isUpdate: s.isUpdate,
-      folderId: s.folderId,
+    } = le({
+      schema: l.schema,
+      values: l.values,
+      isUpdate: l.isUpdate,
+      folderId: l.folderId,
+      emitFields: l.emitFields,
       onSubmit: (n) => {
         m("onSubmit", n, f?.close);
       }
     });
     Z(
-      () => s.values,
+      () => l.values,
       (n) => {
       },
       { deep: !0 }
@@ -90,7 +92,7 @@ const ne = {
       const n = P.value;
       let a = !0;
       for (const u of n) {
-        if (!C(u) || F(u)) continue;
+        if (!S(u) || C(u)) continue;
         E(u) && (a = !1);
       }
       return a;
@@ -112,12 +114,12 @@ const ne = {
     }, O = () => {
       m("onCancel"), f && f?.close?.();
     };
-    return (n, a) => (l(), o("form", {
-      class: h(["form-container", s.class]),
+    return (n, a) => (s(), o("form", {
+      class: h(["form-container", l.class]),
       onSubmit: _(H, ["prevent"])
     }, [
-      r.value && w.value.length > 0 ? (l(), o("div", ne, [
-        x(le, {
+      r.value && w.value.length > 0 ? (s(), o("div", ne, [
+        x(se, {
           steps: w.value,
           activeStep: i.value,
           direction: "horizontal",
@@ -126,71 +128,71 @@ const ne = {
           onStepClick: K
         }, null, 8, ["steps", "activeStep", "textPosition"])
       ])) : c("", !0),
-      b.value ? b.value && !r.value ? (l(), o("div", re, [
-        (l(!0), o(ee, null, te(g.value, (u, v) => (l(), o("div", {
+      b.value ? b.value && !r.value ? (s(), o("div", re, [
+        (s(!0), o(ee, null, te(g.value, (u, v) => (s(), o("div", {
           key: v,
           class: h(["form-group border rounded-lg overflow-hidden", e.groupClass])
         }, [
-          e.groupsHeadings?.[v] ? (l(), o("div", {
+          e.groupsHeadings?.[v] ? (s(), o("div", {
             key: 0,
             class: h(["form-group-header bg-muted/50 px-6 py-4 border-b", e.headerClass])
           }, [
             U("h3", de, k(e.groupsHeadings[v]), 1),
-            e.groupHeadingsDescription?.[v] ? (l(), o("p", ue, k(e.groupHeadingsDescription[v]), 1)) : c("", !0)
+            e.groupHeadingsDescription?.[v] ? (s(), o("p", ue, k(e.groupHeadingsDescription[v]), 1)) : c("", !0)
           ], 2)) : c("", !0),
           U("div", ce, [
             x(D, {
               schema: u,
               values: t(y),
-              errors: t(S),
+              errors: t(F),
               variant: e.variant,
               size: e.size,
               rounded: e.rounded,
               className: e.className,
               isUpdate: e.isUpdate,
-              isFieldVisible: t(C),
-              isFieldDisabled: t(F),
+              isFieldVisible: t(S),
+              isFieldDisabled: t(C),
               isFieldReadonly: t(V),
               onChange: z,
               onAddonAction: a[1] || (a[1] = (Q) => m("onAddonAction", Q))
             }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
           ])
         ], 2))), 128))
-      ])) : r.value ? (l(), o("div", me, [
-        e.tabs?.[i.value] ? (l(), o("div", {
+      ])) : r.value ? (s(), o("div", me, [
+        e.tabs?.[i.value] ? (s(), o("div", {
           key: 0,
           class: h(["form-step-header mb-6", e.headerClass])
         }, [
           U("h2", ve, k(e.tabs[i.value].title), 1),
-          e.tabs[i.value].description ? (l(), o("p", fe, k(e.tabs[i.value].description), 1)) : c("", !0)
+          e.tabs[i.value].description ? (s(), o("p", fe, k(e.tabs[i.value].description), 1)) : c("", !0)
         ], 2)) : c("", !0),
         x(D, {
           schema: P.value,
           values: t(y),
-          errors: t(S),
+          errors: t(F),
           variant: e.variant,
           size: e.size,
           rounded: e.rounded,
           className: e.className,
           isUpdate: e.isUpdate,
-          isFieldVisible: t(C),
-          isFieldDisabled: t(F),
+          isFieldVisible: t(S),
+          isFieldDisabled: t(C),
           isFieldReadonly: t(V),
           onChange: z,
           onAddonAction: a[2] || (a[2] = (u) => m("onAddonAction", u))
         }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
-      ])) : c("", !0) : (l(), o("div", oe, [
+      ])) : c("", !0) : (s(), o("div", oe, [
         x(D, {
           schema: e.schema,
           values: t(y),
-          errors: t(S),
+          errors: t(F),
           variant: e.variant,
           size: e.size,
           rounded: e.rounded,
           className: e.className,
           isUpdate: e.isUpdate,
-          isFieldVisible: t(C),
-          isFieldDisabled: t(F),
+          isFieldVisible: t(S),
+          isFieldDisabled: t(C),
           isFieldReadonly: t(V),
           onChange: z,
           onAddonAction: a[0] || (a[0] = (u) => m("onAddonAction", u))
@@ -198,11 +200,11 @@ const ne = {
       ])),
       ae(n.$slots, "default", {
         values: t(y),
-        errors: t(S),
+        errors: t(F),
         isSubmitting: t(N),
         handleSubmit: H
       }, void 0, !0),
-      e.footer ? (l(), o("div", {
+      e.footer ? (s(), o("div", {
         key: 4,
         class: h([
           "form-footer flex items-center justify-end gap-3",
@@ -210,7 +212,7 @@ const ne = {
           $.value ? "sticky bottom-0 z-20 bg-body pt-4 border-t border-border/75 -mx-4 px-4  mt-8" : "mt-6"
         ])
       }, [
-        G.value ? (l(), p(A, {
+        G.value ? (s(), p(A, {
           key: 0,
           type: "button",
           variant: "outline",
@@ -218,7 +220,7 @@ const ne = {
           disabled: e.loading || t(N),
           onClick: O
         }, null, 8, ["text", "disabled"])) : c("", !0),
-        r.value && R.value ? (l(), p(A, {
+        r.value && R.value ? (s(), p(A, {
           key: 1,
           type: "button",
           variant: "outline",
@@ -226,14 +228,14 @@ const ne = {
           text: "Previous",
           onClick: J
         })) : c("", !0),
-        r.value && !B.value ? (l(), p(A, {
+        r.value && !B.value ? (s(), p(A, {
           key: 2,
           type: "button",
           variant: "primary",
           text: "Next",
           iconRight: "lucide:arrow-right",
           onClick: T
-        })) : (l(), p(A, ie({
+        })) : (s(), p(A, ie({
           key: 3,
           type: "submit",
           variant: "primary",

package/components/Form/composables/useForm.d.ts

@@ -5,6 +5,7 @@ export interface UseFormOptions {
     values?: Record<string, any>;
     isUpdate?: boolean;
     folderId?: string;
+    emitFields?: string[];
     onSubmit?: (payload: IFormSubmitPayload) => void | Promise<void>;
 }
 export interface UseFormReturn {

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 B, deepClone as m, cleanSubmitValues as Q, getNestedValue as M, evaluateConditional as z, setNestedValue as w, collectFileFields as W, filterNullCustomFields as X } from "../utils/form.utils.js";
+import { useFileUpload as Y } from "./useFileUpload.js";
+function te(x) {
+  const { schema: o, values: U, isUpdate: F = !1, folderId: g, onSubmit: j } = x, { handleUploadFile: E } = Y(), t = v(B(o, U)), u = v({}), b = v(!1), d = v(!1), h = v(m(t.value)), y = K(() => o ? Array.isArray(o[0]) ? o.flat() : o : []);
+  L(
+    () => U,
     (e) => {
-      e && (t.value = q(u, e), h.value = v(t.value), f.value = !1);
+      e && (t.value = B(o, 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
+  }), C = (e) => M(t.value, e), T = (e) => u.value[e] || "", N = (e, l) => {
+    l ? u.value[e] = l : delete u.value[e];
+  }, S = () => {
+    u.value = {};
+  }, O = (e) => e.when ? z(e.when, V()) : !0, D = (e) => z(e.disabled, V()), I = (e) => z(e.readonly, V()), P = (e) => {
+    const l = C(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 c = s instanceof File ? s.size : s?.fileSize || s?.file?.size || s?.size;
+          if (c !== void 0 && c > 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;
+      isUpdate: F
+    })), a ? u.value[e.name] = a : delete u.value[e.name], a;
   }, $ = () => {
-    V();
+    S();
     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 (!O(l) || D(l)) continue;
+      P(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 u.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: N
       });
-      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 = W(o, e), a = (s, c) => {
+      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 || c.split("/").pop() || "unknown",
+        fileUrl: c,
+        fileType: s?.fileType || r?.type || "application/octet-stream",
+        fileSize: s?.fileSize || r?.size || 0
+      };
+    }, i = l.map(async (s) => {
+      const { name: c, value: r, field: J } = s, k = J.returnFileObject === !0;
+      if (Array.isArray(r)) {
+        const q = r.map(async (f) => {
+          if (f instanceof File || f && typeof f == "object" && f.file instanceof File) {
+            const A = await E(f, g);
+            return A ? k ? a(f, A) : A : null;
+          }
+          return f;
+        }), p = await Promise.all(q);
+        return { name: c, 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 E(r, g);
+          if (p)
+            return { name: c, value: k ? 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 = M(l, a.name);
+        if (Array.isArray(i)) {
+          const n = X(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,
+    errors: u,
+    isSubmitting: b,
+    isDirty: d,
+    handleFieldChange: R,
     validateField: P,
     validateAll: $,
-    isFieldVisible: C,
-    isFieldDisabled: j,
-    isFieldReadonly: O,
-    getFieldValue: U,
-    getFieldError: M,
-    setFieldError: E,
-    clearErrors: V,
+    isFieldVisible: O,
+    isFieldDisabled: D,
+    isFieldReadonly: I,
+    getFieldValue: C,
+    getFieldError: T,
+    setFieldError: N,
+    clearErrors: S,
     resetForm: () => {
-      t.value = v(h.value), V(), f.value = !1;
+      t.value = m(h.value), S(), d.value = !1;
     },
     handleSubmit: async () => {
       if ($()) {
-        y.value = !0;
+        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), l = Q(l, o, x.emitFields, []), j && await j({
+            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
+  te as useForm
 };

package/components/Form/types.d.ts

@@ -71,6 +71,18 @@ export interface IFormCustomFieldsProps {
 export interface IForm {
     /** Field name - supports dot notation for nested paths (e.g., 'pricing.baseAmount') */
     name: string;
+    /** Read initial value from a different key in the incoming data (defaults to name) */
+    mapFrom?: string;
+    /** Write submit value to a different key in the payload (defaults to name) */
+    mapTo?: string;
+    /** Key to extract from object or array of objects. Useful for mapping arrays of objects to simple values. */
+    valueKey?: string;
+    /** Alias for valueKey */
+    key?: string;
+    /** Format raw value before passing to form state */
+    format?: (value: any, rawValues: Record<string, any>) => any;
+    /** Transform form value before submitting */
+    transform?: (value: any, formValues: Record<string, any>) => any;
     /** Field label - can be string or Vue component */
     label?: string | Component;
     /** Placeholder text */
@@ -117,6 +129,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
@@ -173,6 +187,8 @@ export interface IFormProps {
     headerClass?: string;
     /** Custom class for the footer area */
     footerClass?: string;
+    /** Fields to explicitly include in the submit payload (e.g., ['__typename', 'id']) */
+    emitFields?: string[];
 }
 /**
  * Form submit payload

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
@@ -46,3 +47,9 @@ export declare function getFieldKey(name: string): string;
  * Check if a value is a Vue component
  */
 export declare function isComponent(value: any): boolean;
+/**
+ * Cleans the submit payload by extracting only schema fields,
+ * injecting specified emitFields, and removing ignoreFields recursively.
+ * Also processes mapped output and transformation functions.
+ */
+export declare function cleanSubmitValues(values: Record<string, any>, schema: IForm[] | IForm[][], emitFields?: string[], ignoreFields?: string[]): Record<string, any>;

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

@@ -1,106 +1,174 @@
-function v(e) {
+function k(e) {
   return !!e && typeof e == "object";
 }
-function s(e, n) {
+function p(e, n) {
   if (!n || !e) return;
-  const t = n.split(".");
-  let f = e;
-  for (const r of t) {
-    if (f == null) return;
-    f = f[r];
+  const r = n.split(".");
+  let l = e;
+  for (const t of r) {
+    if (l == null) return;
+    l = l[t];
   }
-  return f;
+  return l;
 }
-function d(e, n, t) {
+function m(e, n, r) {
   if (!n) return e;
-  const f = n.split("."), r = { ...e };
-  let i = r;
-  for (let o = 0; o < f.length - 1; o++) {
-    const l = f[o];
-    Array.isArray(i[l]) ? i[l] = [...i[l]] : i[l] = i[l] ? { ...i[l] } : {}, i = i[l];
+  const l = n.split("."), t = { ...e };
+  let f = t;
+  for (let i = 0; i < l.length - 1; i++) {
+    const c = l[i];
+    Array.isArray(f[c]) ? f[c] = [...f[c]] : f[c] = f[c] ? { ...f[c] } : {}, f = f[c];
   }
-  return i[f[f.length - 1]] = t, r;
+  return f[l[l.length - 1]] = r, t;
 }
-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;
+function v(e, n) {
+  return !k(n) || !n.name ? e : p(e, n.name) === void 0 && n.value !== void 0 ? m(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) {
-      const o = typeof r.value == "function" ? r.value() : r.value;
-      o !== void 0 && Object.assign(t, d(t, r.name, o));
+function E(e, n) {
+  let r = n ? d(n) : {};
+  const l = Array.isArray(e[0]) ? e.flat() : e;
+  for (const t of l) {
+    if (!t.name) continue;
+    const f = t.mapFrom || t.name;
+    let i = n ? p(n, f) : void 0;
+    if (i != null) {
+      const c = t.valueKey || t.key;
+      c && (Array.isArray(i) ? i = i.map(
+        (u) => u && typeof u == "object" ? p(u, c) : u
+      ) : typeof i == "object" && (i = p(i, c))), t.format && (i = t.format(i, n || {}));
     }
-    t = m(t, r.addonLeft), t = m(t, r.addonRight);
+    if (i === void 0) {
+      if (t.mapFrom && n) {
+        const c = p(n, t.name);
+        c !== void 0 && (i = c);
+      }
+      if (i === void 0) {
+        const c = typeof t.value == "function" ? t.value() : t.value;
+        c !== void 0 && Object.assign(r, m(r, t.name, c));
+      } else
+        Object.assign(r, m(r, t.name, i));
+    } else
+      Object.assign(r, m(r, t.name, i));
+    r = v(r, t.addonLeft), r = v(r, t.addonRight);
   }
-  return t;
+  return r;
 }
-function h(e, n) {
+function O(e, n) {
   return e === void 0 ? !1 : typeof e == "boolean" ? e : typeof e == "function" ? e(n) : !1;
 }
-function F(e, n) {
-  return Array.isArray(e) ? e.filter((t) => t ? !n.every((r) => {
-    const i = t[r.name];
-    return i == null || i === "";
+function S(e, n) {
+  return Array.isArray(e) ? e.filter((r) => r ? !n.every((t) => {
+    const f = r[t.name];
+    return f == null || f === "";
   }) : !1) : [];
 }
-function V(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);
-      o && t.push({
-        name: r.name,
-        value: o,
-        type: i
+function F(e, n) {
+  const r = [], l = Array.isArray(e[0]) ? e.flat() : e;
+  for (const t of l) {
+    if (!t.name) continue;
+    const f = t.type;
+    if (f === "file" || f === "avatarUpload" || f === "fileUploader") {
+      const i = p(n, t.name);
+      i && r.push({
+        name: t.name,
+        value: i,
+        type: f,
+        field: t
       });
     }
-    if (i === "customFields" && r.props?.schema) {
-      const o = s(n, r.name);
-      if (Array.isArray(o)) {
-        const y = r.props.schema.filter(
-          (a) => a.type === "file" || a.type === "avatarUpload" || a.type === "fileUploader"
+    if (f === "customFields" && t.props?.schema) {
+      const i = p(n, t.name);
+      if (Array.isArray(i)) {
+        const u = t.props.schema.filter(
+          (s) => s.type === "file" || s.type === "avatarUpload" || s.type === "fileUploader"
         );
-        y.length > 0 && o.forEach((a, A) => {
-          y.forEach((u) => {
-            const p = a?.[u.name];
-            p && t.push({
-              name: `${r.name}.${A}.${u.name}`,
-              value: p,
-              type: u.type
+        u.length > 0 && i.forEach((s, o) => {
+          u.forEach((a) => {
+            const y = s?.[a.name];
+            y && r.push({
+              name: `${t.name}.${o}.${a.name}`,
+              value: y,
+              type: a.type,
+              field: a
             });
           });
         });
       }
     }
   }
-  return t;
+  return r;
 }
-function c(e) {
+function d(e) {
   if (e === null || typeof e != "object") return e;
   if (e instanceof Date) return new Date(e.getTime());
   if (e instanceof File) return e;
-  if (Array.isArray(e)) return e.map((t) => c(t));
+  if (Array.isArray(e)) return e.map((r) => d(r));
   const n = {};
-  for (const t in e)
-    Object.prototype.hasOwnProperty.call(e, t) && (n[t] = c(e[t]));
+  for (const r in e)
+    Object.prototype.hasOwnProperty.call(e, r) && (n[r] = d(e[r]));
   return n;
 }
-function k(e) {
+function x(e) {
   return e ? typeof e == "object" && (typeof e.render == "function" || typeof e.setup == "function" || e.__name !== void 0 || e.name !== void 0) : !1;
 }
+function g(e, n, r, l) {
+  const t = r === void 0 && l === void 0, f = t ? d(e) : {}, i = Array.isArray(n[0]) ? n.flat() : n, c = r || [], u = l || [];
+  for (const s of i) {
+    if (!s.name) continue;
+    let o = p(e, s.name);
+    if (o === void 0) continue;
+    if (s.type === "customFields" && s.props?.schema && Array.isArray(o)) {
+      const A = s.props.schema;
+      o = o.map((h) => g(h, A, r, l));
+    }
+    let a = !1;
+    s.transform && (o = s.transform(o, e), a = !0);
+    const y = s.mapTo || s.name;
+    y !== s.name && (a = !0, t && !s.name.includes(".") && delete f[s.name]), !t || a ? Object.assign(f, m(f, y, o)) : Object.assign(f, m(f, s.name, o));
+  }
+  if (c.length > 0) {
+    const s = (o, a) => {
+      if (!(!o || typeof o != "object") && !(!a || typeof a != "object"))
+        if (Array.isArray(o) && Array.isArray(a))
+          o.forEach((y, A) => {
+            a[A] && s(y, a[A]);
+          });
+        else {
+          for (const y of c)
+            o[y] !== void 0 && a[y] === void 0 && (a[y] = d(o[y]));
+          for (const y in a)
+            typeof a[y] == "object" && typeof o[y] == "object" && s(o[y], a[y]);
+        }
+    };
+    for (const o of c)
+      e[o] !== void 0 && f[o] === void 0 && (f[o] = d(e[o]));
+    s(e, f);
+  }
+  if (u.length > 0) {
+    const s = (o) => {
+      if (!(!o || typeof o != "object"))
+        if (Array.isArray(o))
+          o.forEach(s);
+        else {
+          for (const a of u)
+            delete o[a];
+          for (const a in o)
+            s(o[a]);
+        }
+    };
+    s(f);
+  }
+  return f;
+}
 export {
-  V as collectFileFields,
-  c as deepClone,
-  h as evaluateConditional,
-  F as filterNullCustomFields,
-  s as getNestedValue,
-  g as initializeFormValues,
-  v as isAddonObject,
-  k as isComponent,
-  d as setNestedValue
+  g as cleanSubmitValues,
+  F as collectFileFields,
+  d as deepClone,
+  O as evaluateConditional,
+  S as filterNullCustomFields,
+  p as getNestedValue,
+  E as initializeFormValues,
+  k as isAddonObject,
+  x as isComponent,
+  m as setNestedValue
 };

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.3",
   "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;
@@ -713,5 +713,5 @@ textarea::-webkit-scrollbar-thumb {
 }
 
 /* --- Vite Generated CSS --- */
-.accordion-enter-active[data-v-aa189e08],.accordion-leave-active[data-v-aa189e08]{transition:height .3s ease-in-out}.button-group[data-v-ba735fac] button{align-self:stretch;height:auto!important;min-height:unset!important;min-width:unset!important;width:auto!important}.button-group[data-v-ba735fac]:not(.vertical-group) button{aspect-ratio:unset}.attached-group[data-v-ba735fac] button{position:relative;--radius: .375rem}.attached-group[data-v-ba735fac] button:focus-visible,.attached-group[data-v-ba735fac] button:hover{z-index:10}.attached-group[data-v-ba735fac]:not(.vertical-group) button:not(:first-child){margin-left:-1px}.attached-group[data-v-ba735fac]:not(.vertical-group) button:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);border-top-right-radius:0;border-bottom-right-radius:0}.attached-group[data-v-ba735fac]:not(.vertical-group) button:not(:first-child):not(:last-child){border-radius:0}.attached-group[data-v-ba735fac]:not(.vertical-group) button:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-bottom-left-radius:0}.vertical-group[data-v-ba735fac] button:not(:first-child){margin-top:-1px}.vertical-group[data-v-ba735fac] button:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.vertical-group[data-v-ba735fac] button:not(:first-child):not(:last-child){border-radius:0}.vertical-group[data-v-ba735fac] button:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-top-right-radius:0}.attached-group[data-v-ba735fac]:not(.vertical-group) button:not(:first-child):not(.border):before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none;height:100%}.vertical-group[data-v-ba735fac] button:not(:first-child):not(.border):before{content:"";position:absolute;top:0;left:0;right:0;height:1px;width:100%;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none}.carousel-wrapper[data-v-655a78c8]{width:100%;position:relative}.IroBox{border-radius:8px!important}input[data-v-e7171c4f]::-webkit-outer-spin-button,input[data-v-e7171c4f]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type=number][data-v-e7171c4f]{-moz-appearance:textfield;appearance:textfield}.custom-fields-table[data-v-ce6a94e8] .form-field-item{margin-bottom:0!important;height:100%}.custom-fields-table[data-v-ce6a94e8] input,.custom-fields-table[data-v-ce6a94e8] textarea{padding-left:1em;padding-right:.5em}.custom-fields-table[data-v-ce6a94e8] input,.custom-fields-table[data-v-ce6a94e8] textarea,.custom-fields-table[data-v-ce6a94e8] select,.custom-fields-table[data-v-ce6a94e8] .input-wrapper,.custom-fields-table[data-v-ce6a94e8] .tooltip-trigger button{border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;height:100%!important;min-height:40px}.custom-fields-table[data-v-ce6a94e8] .tooltip-trigger button{justify-content:space-between!important}.custom-fields-table[data-v-ce6a94e8] input:focus,.custom-fields-table[data-v-ce6a94e8] textarea:focus,.custom-fields-table[data-v-ce6a94e8] select:focus,.custom-fields-table[data-v-ce6a94e8] .input-wrapper:focus-within{background-color:hsla(var(--primary) / .03)!important;box-shadow:inset 0 0 0 2px hsla(var(--primary) / .1)!important}.custom-fields-table[data-v-ce6a94e8] .w-full{width:100%;height:100%}.list-enter-active[data-v-ce6a94e8]{transition:all .15s cubic-bezier(.16,1,.3,1)}.list-enter-from[data-v-ce6a94e8]{opacity:0;transform:translateY(-5px)}.form-field-item[data-v-47af145c]{display:flex;flex-direction:column}.form-field-item[data-v-47af145c]:has([role=switch]),.form-field-item[data-v-47af145c]:has([role=checkbox]){flex-direction:row;align-items:center}.form-container[data-v-b1fa52ca]{width:100%}.heatmap-container[data-v-00476f00]{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}.heatmap-wrapper[data-v-00476f00]{width:100%;height:100%;overflow:auto;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;position:relative}.heatmap-grid[data-v-00476f00]{width:fit-content;height:fit-content;transition:all .2s ease-in-out}.heatmap-cell[data-v-00476f00]{aspect-ratio:1 / 1;border-radius:2px;transition:all .15s ease-in-out;border:1px solid transparent;box-sizing:border-box}.heatmap-cell-interactive[data-v-00476f00]{cursor:pointer}.heatmap-cell-interactive[data-v-00476f00]:hover{transform:scale(1.1);border-color:var(--border);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10;position:relative}.heatmap-cell-empty[data-v-00476f00]{opacity:.6}.heatmap-cell-hovered[data-v-00476f00]{outline:2px solid var(--primary);outline-offset:1px}.heatmap-cell-label[data-v-00476f00]{font-size:8px;font-weight:500;color:var(--foreground);opacity:.8;display:flex;align-items:center;justify-content:center;height:100%;width:100%;pointer-events:none}.heatmap-legend[data-v-00476f00]{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;color:var(--muted-foreground);flex-shrink:0}.heatmap-legend-label[data-v-00476f00]{font-weight:500}.heatmap-legend-colors[data-v-00476f00]{display:flex;gap:.125rem}.heatmap-legend-item[data-v-00476f00]{width:.75rem;height:.75rem;border-radius:.375rem;border:1px solid var(--border)}@media(max-width:640px){.heatmap-wrapper[data-v-00476f00]{padding:12px}.heatmap-cell[data-v-00476f00]{border-radius:2px}.heatmap-cell-label[data-v-00476f00]{font-size:7px}}@media(min-width:641px)and (max-width:1023px){.heatmap-wrapper[data-v-00476f00]{padding:14px}.heatmap-cell[data-v-00476f00]{border-radius:2px}}@media(min-width:1024px){.heatmap-wrapper[data-v-00476f00]{padding:16px}.heatmap-cell[data-v-00476f00]{border-radius:3px}}.custom-scrollbar[data-v-9ac38977]::-webkit-scrollbar{width:0px}.custom-scrollbar[data-v-9ac38977]::-webkit-scrollbar-track{background:transparent}.custom-scrollbar[data-v-9ac38977]::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:10px}.custom-scrollbar-x[data-v-11bc76c9]::-webkit-scrollbar{height:8px}.custom-scrollbar-x[data-v-11bc76c9]::-webkit-scrollbar-track{background:transparent}.custom-scrollbar-x[data-v-11bc76c9]::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:10px}.masonry-item[data-v-c29d0159]{content-visibility:auto;contain-intrinsic-size:1px 200px}.slide-right-enter-active[data-v-495f8aa0],.slide-right-leave-active[data-v-495f8aa0],.slide-left-enter-active[data-v-495f8aa0],.slide-left-leave-active[data-v-495f8aa0]{transition:transform .3s ease-in-out}.slide-right-enter-from[data-v-495f8aa0],.slide-right-leave-to[data-v-495f8aa0]{transform:translate(100%)}.slide-left-enter-from[data-v-495f8aa0],.slide-left-leave-to[data-v-495f8aa0]{transform:translate(-100%)}.sidebar-manu-item .tooltip-trigger{width:100%!important}.sidebar-menu-tooltip{margin-left:4px!important}[dir=rtl] .sidebar-menu-tooltip{margin-right:4px!important}.first-toast-enter-active[data-v-6b631840]{animation:first-toast-in-6b631840 .45s cubic-bezier(.23,1,.32,1) forwards}.first-toast-leave-active[data-v-6b631840]{transition:all .25s ease-in}.first-toast-leave-to[data-v-6b631840]{opacity:0;transform:scale(.98)}@keyframes first-toast-in-6b631840{0%{opacity:var(--entrance-opacity, .6);transform:translateY(var(--entrance-offset, 25px)) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.stack-toast-enter-active[data-v-6b631840],.stack-toast-leave-active[data-v-6b631840]{transition:all .3s cubic-bezier(.16,1,.3,1)}.stack-toast-enter-from[data-v-6b631840]{opacity:0;transform:scale(.95) translateY(10px)}.stack-toast-leave-to[data-v-6b631840]{opacity:0;transform:scale(.95)}.stack-toast-move[data-v-6b631840]{transition:transform .4s cubic-bezier(.16,1,.3,1)}.bg-stripe[data-v-454a1505]{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.animate-progress-stripe[data-v-454a1505]{animation:progress-stripe-454a1505 1s linear infinite}@keyframes progress-stripe-454a1505{0%{background-position:1rem 0}to{background-position:0 0}}.animate-progress-indeterminate[data-v-454a1505]{animation:progress-indeterminate-454a1505 1.5s infinite cubic-bezier(.65,.815,.735,.395)}@keyframes progress-indeterminate-454a1505{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(0) scaleX(.5)}to{transform:translate(100%) scaleX(.2)}}
+.accordion-enter-active[data-v-aa189e08],.accordion-leave-active[data-v-aa189e08]{transition:height .3s ease-in-out}.button-group[data-v-ba735fac] button{align-self:stretch;height:auto!important;min-height:unset!important;min-width:unset!important;width:auto!important}.button-group[data-v-ba735fac]:not(.vertical-group) button{aspect-ratio:unset}.attached-group[data-v-ba735fac] button{position:relative;--radius: .375rem}.attached-group[data-v-ba735fac] button:focus-visible,.attached-group[data-v-ba735fac] button:hover{z-index:10}.attached-group[data-v-ba735fac]:not(.vertical-group) button:not(:first-child){margin-left:-1px}.attached-group[data-v-ba735fac]:not(.vertical-group) button:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);border-top-right-radius:0;border-bottom-right-radius:0}.attached-group[data-v-ba735fac]:not(.vertical-group) button:not(:first-child):not(:last-child){border-radius:0}.attached-group[data-v-ba735fac]:not(.vertical-group) button:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-bottom-left-radius:0}.vertical-group[data-v-ba735fac] button:not(:first-child){margin-top:-1px}.vertical-group[data-v-ba735fac] button:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.vertical-group[data-v-ba735fac] button:not(:first-child):not(:last-child){border-radius:0}.vertical-group[data-v-ba735fac] button:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-top-right-radius:0}.attached-group[data-v-ba735fac]:not(.vertical-group) button:not(:first-child):not(.border):before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none;height:100%}.vertical-group[data-v-ba735fac] button:not(:first-child):not(.border):before{content:"";position:absolute;top:0;left:0;right:0;height:1px;width:100%;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none}.carousel-wrapper[data-v-655a78c8]{width:100%;position:relative}.IroBox{border-radius:8px!important}input[data-v-e7171c4f]::-webkit-outer-spin-button,input[data-v-e7171c4f]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type=number][data-v-e7171c4f]{-moz-appearance:textfield;appearance:textfield}.custom-fields-table[data-v-ce6a94e8] .form-field-item{margin-bottom:0!important;height:100%}.custom-fields-table[data-v-ce6a94e8] input,.custom-fields-table[data-v-ce6a94e8] textarea{padding-left:1em;padding-right:.5em}.custom-fields-table[data-v-ce6a94e8] input,.custom-fields-table[data-v-ce6a94e8] textarea,.custom-fields-table[data-v-ce6a94e8] select,.custom-fields-table[data-v-ce6a94e8] .input-wrapper,.custom-fields-table[data-v-ce6a94e8] .tooltip-trigger button{border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;height:100%!important;min-height:40px}.custom-fields-table[data-v-ce6a94e8] .tooltip-trigger button{justify-content:space-between!important}.custom-fields-table[data-v-ce6a94e8] input:focus,.custom-fields-table[data-v-ce6a94e8] textarea:focus,.custom-fields-table[data-v-ce6a94e8] select:focus,.custom-fields-table[data-v-ce6a94e8] .input-wrapper:focus-within{background-color:hsla(var(--primary) / .03)!important;box-shadow:inset 0 0 0 2px hsla(var(--primary) / .1)!important}.custom-fields-table[data-v-ce6a94e8] .w-full{width:100%;height:100%}.list-enter-active[data-v-ce6a94e8]{transition:all .15s cubic-bezier(.16,1,.3,1)}.list-enter-from[data-v-ce6a94e8]{opacity:0;transform:translateY(-5px)}.form-field-item[data-v-47af145c]{display:flex;flex-direction:column}.form-field-item[data-v-47af145c]:has([role=switch]),.form-field-item[data-v-47af145c]:has([role=checkbox]){flex-direction:row;align-items:center}.form-container[data-v-a67bf34e]{width:100%}.heatmap-container[data-v-00476f00]{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}.heatmap-wrapper[data-v-00476f00]{width:100%;height:100%;overflow:auto;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;position:relative}.heatmap-grid[data-v-00476f00]{width:fit-content;height:fit-content;transition:all .2s ease-in-out}.heatmap-cell[data-v-00476f00]{aspect-ratio:1 / 1;border-radius:2px;transition:all .15s ease-in-out;border:1px solid transparent;box-sizing:border-box}.heatmap-cell-interactive[data-v-00476f00]{cursor:pointer}.heatmap-cell-interactive[data-v-00476f00]:hover{transform:scale(1.1);border-color:var(--border);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10;position:relative}.heatmap-cell-empty[data-v-00476f00]{opacity:.6}.heatmap-cell-hovered[data-v-00476f00]{outline:2px solid var(--primary);outline-offset:1px}.heatmap-cell-label[data-v-00476f00]{font-size:8px;font-weight:500;color:var(--foreground);opacity:.8;display:flex;align-items:center;justify-content:center;height:100%;width:100%;pointer-events:none}.heatmap-legend[data-v-00476f00]{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;color:var(--muted-foreground);flex-shrink:0}.heatmap-legend-label[data-v-00476f00]{font-weight:500}.heatmap-legend-colors[data-v-00476f00]{display:flex;gap:.125rem}.heatmap-legend-item[data-v-00476f00]{width:.75rem;height:.75rem;border-radius:.375rem;border:1px solid var(--border)}@media(max-width:640px){.heatmap-wrapper[data-v-00476f00]{padding:12px}.heatmap-cell[data-v-00476f00]{border-radius:2px}.heatmap-cell-label[data-v-00476f00]{font-size:7px}}@media(min-width:641px)and (max-width:1023px){.heatmap-wrapper[data-v-00476f00]{padding:14px}.heatmap-cell[data-v-00476f00]{border-radius:2px}}@media(min-width:1024px){.heatmap-wrapper[data-v-00476f00]{padding:16px}.heatmap-cell[data-v-00476f00]{border-radius:3px}}.custom-scrollbar[data-v-9ac38977]::-webkit-scrollbar{width:0px}.custom-scrollbar[data-v-9ac38977]::-webkit-scrollbar-track{background:transparent}.custom-scrollbar[data-v-9ac38977]::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:10px}.custom-scrollbar-x[data-v-11bc76c9]::-webkit-scrollbar{height:8px}.custom-scrollbar-x[data-v-11bc76c9]::-webkit-scrollbar-track{background:transparent}.custom-scrollbar-x[data-v-11bc76c9]::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:10px}.masonry-item[data-v-c29d0159]{content-visibility:auto;contain-intrinsic-size:1px 200px}.slide-right-enter-active[data-v-495f8aa0],.slide-right-leave-active[data-v-495f8aa0],.slide-left-enter-active[data-v-495f8aa0],.slide-left-leave-active[data-v-495f8aa0]{transition:transform .3s ease-in-out}.slide-right-enter-from[data-v-495f8aa0],.slide-right-leave-to[data-v-495f8aa0]{transform:translate(100%)}.slide-left-enter-from[data-v-495f8aa0],.slide-left-leave-to[data-v-495f8aa0]{transform:translate(-100%)}.sidebar-manu-item .tooltip-trigger{width:100%!important}.sidebar-menu-tooltip{margin-left:4px!important}[dir=rtl] .sidebar-menu-tooltip{margin-right:4px!important}.first-toast-enter-active[data-v-6b631840]{animation:first-toast-in-6b631840 .45s cubic-bezier(.23,1,.32,1) forwards}.first-toast-leave-active[data-v-6b631840]{transition:all .25s ease-in}.first-toast-leave-to[data-v-6b631840]{opacity:0;transform:scale(.98)}@keyframes first-toast-in-6b631840{0%{opacity:var(--entrance-opacity, .6);transform:translateY(var(--entrance-offset, 25px)) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.stack-toast-enter-active[data-v-6b631840],.stack-toast-leave-active[data-v-6b631840]{transition:all .3s cubic-bezier(.16,1,.3,1)}.stack-toast-enter-from[data-v-6b631840]{opacity:0;transform:scale(.95) translateY(10px)}.stack-toast-leave-to[data-v-6b631840]{opacity:0;transform:scale(.95)}.stack-toast-move[data-v-6b631840]{transition:transform .4s cubic-bezier(.16,1,.3,1)}.bg-stripe[data-v-454a1505]{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.animate-progress-stripe[data-v-454a1505]{animation:progress-stripe-454a1505 1s linear infinite}@keyframes progress-stripe-454a1505{0%{background-position:1rem 0}to{background-position:0 0}}.animate-progress-indeterminate[data-v-454a1505]{animation:progress-indeterminate-454a1505 1.5s infinite cubic-bezier(.65,.815,.735,.395)}@keyframes progress-indeterminate-454a1505{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(0) scaleX(.5)}to{transform:translate(100%) scaleX(.2)}}
 

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;