vlite3 0.7.15 → 0.8.2

package/components/Form/FormField.vue.js

@@ -29,19 +29,20 @@ const me = /* @__PURE__ */ B({
     error: { default: "" },
     isUpdate: { type: Boolean, default: !1 },
     label: {},
-    floatingActive: { type: Boolean, default: !0 }
+    floatingActive: { type: Boolean, default: !0 },
+    loading: { type: Boolean, default: !1 }
   },
   emits: ["change", "addonChange", "addonAction"],
   setup(l, { emit: A }) {
-    const e = l, c = A, d = (t, a) => {
-      c("change", { value: t, data: a });
-    }, C = (t) => {
-      c("change", { value: t });
+    const e = l, c = A, d = (a, t) => {
+      c("change", { value: a, data: t });
+    }, C = (a) => {
+      c("change", { value: a });
     }, F = o(() => {
-      const t = e.field.type;
-      if (y(t))
-        return N(t);
-      switch (t) {
+      const a = e.field.type;
+      if (y(a))
+        return N(a);
+      switch (a) {
         case "text":
         case "email":
         case "password":
@@ -78,17 +79,17 @@ const me = /* @__PURE__ */ B({
           return x;
       }
     }), z = o(() => {
-      const t = e.field.type, a = {
+      const a = e.field.type, t = {
         disabled: e.disabled || e.field.disabled === !0,
         ...e?.field || {},
         ...e.field.props || {},
         label: "",
         labelI18n: ""
       }, i = e.field.placeholderI18n ? D(e.field.placeholderI18n) : e.field.placeholder, g = e.variant === "floating" && e.label && !e.floatingActive, u = g ? "" : i;
-      return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || t === "textarea" || !t ? {
-        ...a,
+      return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || !a ? {
+        ...t,
         modelValue: e.value ?? "",
-        type: t || "text",
+        type: a || "text",
         placeholder: u,
         label: e.label,
         icon: e.field.icon,
@@ -103,10 +104,10 @@ const me = /* @__PURE__ */ B({
         min: e.field.min,
         // kept for validation attributes if needed
         max: e.field.max,
-        rows: t === "textarea" ? e.field.props?.rows || 3 : void 0,
+        rows: a === "textarea" ? e.field.props?.rows || 3 : void 0,
         class: `${e.field.className}`
-      } : t === "number" ? {
-        ...a,
+      } : a === "number" ? {
+        ...t,
         modelValue: e.value ?? void 0,
         min: e.field.min,
         max: e.field.max,
@@ -117,19 +118,19 @@ const me = /* @__PURE__ */ B({
         rounded: e.rounded,
         placeholder: u,
         class: e.field.className
-      } : t === "switch" ? {
-        ...a,
+      } : a === "switch" ? {
+        ...t,
         modelValue: !!e.value,
         size: "sm",
         label: ""
         // Label handled externally
-      } : t === "check" ? {
-        ...a,
+      } : a === "check" ? {
+        ...t,
         modelValue: !!e.value,
         label: ""
         // Label handled externally
-      } : t === "select" ? {
-        ...a,
+      } : a === "select" ? {
+        ...t,
         modelValue: e.value,
         options: e.field.options || [],
         placeholder: u,
@@ -140,18 +141,18 @@ const me = /* @__PURE__ */ B({
           size: e.size,
           ...g ? { text: "​" } : {}
         }
-      } : t === "multiSelect" ? {
-        ...a,
+      } : a === "multiSelect" ? {
+        ...t,
         modelValue: Array.isArray(e.value) ? e.value : [],
         options: e.field.options || [],
         placeholder: i,
         variant: e.variant,
         size: e.size,
         rounded: e.rounded
-      } : t === "date" || t === "time" ? {
-        ...a,
+      } : a === "date" || a === "time" ? {
+        ...t,
         modelValue: e.value,
-        mode: t === "time" ? "time" : "date",
+        mode: a === "time" ? "time" : "date",
         placeholder: u,
         btnProps: {
           variant: e.variant === "floating" ? "outline-floating" : e.variant || "outline",
@@ -159,32 +160,34 @@ const me = /* @__PURE__ */ B({
           class: "px-3!",
           ...g ? { text: "​" } : {}
         }
-      } : t === "fileUploader" || t === "file" ? {
-        ...a,
+      } : a === "fileUploader" || a === "file" ? {
+        ...t,
         modelValue: e.value,
         multiSelect: e.field.props?.multiple || !1,
         maxFiles: e.field.maxFiles || e.field.props?.maxFiles,
         fileTypes: e.field.props?.accept ? e.field.props.accept.split(",") : [],
         returnFormat: "base64",
-        variant: t === "file" ? "input" : "dropzone",
+        variant: a === "file" ? "input" : "dropzone",
         placeholder: u,
         size: e.size,
         rounded: e.rounded,
-        maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0
-      } : t === "avatarUpload" ? {
+        maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0,
+        loading: e.loading
+      } : a === "avatarUpload" ? {
         size: "2xl",
-        ...a,
+        ...t,
         modelValue: e.value,
         editable: !e.readonly,
-        maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0
-      } : t === "color" ? {
-        ...a,
+        maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0,
+        loading: e.loading
+      } : a === "color" ? {
+        ...t,
         modelValue: e.value || "#000000"
-      } : t === "iconPicker" ? {
-        ...a,
+      } : a === "iconPicker" ? {
+        ...t,
         value: e.value || "lucide:smile"
-      } : t === "customFields" ? {
-        ...a,
+      } : a === "customFields" ? {
+        ...t,
         label: e?.field?.label,
         labelI18n: e?.field?.labelI18n,
         modelValue: Array.isArray(e.value) ? e.value : [],
@@ -195,57 +198,57 @@ const me = /* @__PURE__ */ B({
         size: e.size,
         rounded: e.rounded,
         isUpdate: e.isUpdate
-      } : y(t) ? {
-        ...a,
+      } : y(a) ? {
+        ...t,
         value: e.value,
         values: e.values
-      } : a;
+      } : t;
     }), k = o(() => {
-      const t = e.field.type;
-      return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || t === "textarea" || t === "switch" || t === "check" || t === "number" || !t ? {
+      const a = e.field.type;
+      return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || a === "switch" || a === "check" || a === "number" || !a ? {
         "update:modelValue": C
-      } : t === "select" ? {
-        onSelect: (a) => {
-          d(a.value, a.data);
+      } : a === "select" ? {
+        onSelect: (t) => {
+          d(t.value, t.data);
         }
-      } : t === "multiSelect" ? {
-        change: (a) => d(a)
-      } : t === "date" || t === "time" ? {
-        change: (a) => d(a)
-      } : t === "fileUploader" || t === "file" ? {
-        change: (a) => {
-          d(a);
+      } : a === "multiSelect" ? {
+        change: (t) => d(t)
+      } : a === "date" || a === "time" ? {
+        change: (t) => d(t)
+      } : a === "fileUploader" || a === "file" ? {
+        change: (t) => {
+          d(t);
         },
-        "update:modelValue": (a) => {
-          d(a);
+        "update:modelValue": (t) => {
+          d(t);
         }
-      } : t === "avatarUpload" ? {
-        change: (a) => {
-          d(a);
+      } : a === "avatarUpload" ? {
+        change: (t) => {
+          d(t);
         },
-        "update:modelValue": (a) => {
-          d(a);
+        "update:modelValue": (t) => {
+          d(t);
         }
-      } : t === "color" ? {
-        change: (a) => d(a)
-      } : t === "iconPicker" ? {
-        onSelect: (a) => d(a)
-      } : t === "customFields" ? {
-        change: (a) => d(a)
-      } : y(t) ? {
-        onChange: (a) => {
-          d(a.value, a.data);
+      } : a === "color" ? {
+        change: (t) => d(t)
+      } : a === "iconPicker" ? {
+        onSelect: (t) => d(t)
+      } : a === "customFields" ? {
+        change: (t) => d(t)
+      } : y(a) ? {
+        onChange: (t) => {
+          d(t.value, t.data);
         }
       } : {};
     }), P = o(() => v(e.field.addonLeft) || v(e.field.addonRight)), U = o(() => {
-      const t = e.field.type;
-      return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || !t;
-    }), I = o(() => P.value && U.value), V = (t, a) => {
-      c("addonChange", t.name, { value: a.value });
-    }, S = (t) => {
-      t.action && c("addonAction", t.action);
+      const a = e.field.type;
+      return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || !a;
+    }), I = o(() => P.value && U.value), V = (a, t) => {
+      c("addonChange", a.name, { value: t.value });
+    }, S = (a) => {
+      a.action && c("addonAction", a.action);
     };
-    return (t, a) => I.value ? (r(), s(x, f({ key: 0 }, {
+    return (a, t) => I.value ? (r(), s(x, f({ key: 0 }, {
       ...z.value,
       ...l.field?.props || {}
     }, R(k.value)), O({ _: 2 }, [
@@ -257,7 +260,7 @@ const me = /* @__PURE__ */ B({
             modelValue: l.field.addonLeft.name ? l.values[l.field.addonLeft.name] : void 0,
             options: l.field.addonLeft.options || []
           }, l.field.addonLeft.props || {}, {
-            onOnSelect: a[0] || (a[0] = (i) => V(l.field.addonLeft, i))
+            onOnSelect: t[0] || (t[0] = (i) => V(l.field.addonLeft, i))
           }), {
             trigger: n(({ selectedLabel: i }) => [
               $(h, { variant: "outline" }, {
@@ -272,7 +275,7 @@ const me = /* @__PURE__ */ B({
             key: 1,
             variant: "outline"
           }, l.field.addonLeft.props || {}, {
-            onClick: a[1] || (a[1] = (i) => S(l.field.addonLeft))
+            onClick: t[1] || (t[1] = (i) => S(l.field.addonLeft))
           }), {
             default: n(() => [
               m(p(l.field.addonLeft.text), 1)
@@ -290,7 +293,7 @@ const me = /* @__PURE__ */ B({
             modelValue: l.field.addonRight.name ? l.values[l.field.addonRight.name] : void 0,
             options: l.field.addonRight.options || []
           }, l.field.addonRight.props || {}, {
-            onOnSelect: a[2] || (a[2] = (i) => V(l.field.addonRight, i))
+            onOnSelect: t[2] || (t[2] = (i) => V(l.field.addonRight, i))
           }), {
             trigger: n(({ selectedLabel: i }) => [
               $(h, { variant: "outline" }, {
@@ -305,7 +308,7 @@ const me = /* @__PURE__ */ B({
             key: 1,
             variant: "outline"
           }, l.field.addonRight.props || {}, {
-            onClick: a[3] || (a[3] = (i) => S(l.field.addonRight))
+            onClick: t[3] || (t[3] = (i) => S(l.field.addonRight))
           }), {
             default: n(() => [
               m(p(l.field.addonRight.text), 1)

package/components/Form/FormFields.vue.d.ts

@@ -4,6 +4,7 @@ interface Props {
     schema: IForm[];
     values: Record<string, any>;
     errors: Record<string, string>;
+    fieldLoading?: Record<string, boolean>;
     variant?: InputVariant;
     size?: InputSize;
     rounded?: InputRounded;
@@ -29,5 +30,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     rounded: InputRounded;
     showRequiredAsterisk: boolean;
     isUpdate: boolean;
+    fieldLoading: Record<string, boolean>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/components/Form/FormFields.vue.js

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

package/components/Form/FormFields.vue2.js

@@ -1,12 +1,12 @@
-import { defineComponent as M, computed as O, ref as _, openBlock as a, createElementBlock as o, normalizeClass as d, Fragment as p, renderList as j, withMemo as G, createBlock as y, withCtx as R, unref as z, resolveDynamicComponent as L, createTextVNode as k, toDisplayString as h, createCommentVNode as c, createElementVNode as J, createVNode as K, markRaw as P } from "vue";
-import { isComponent as v, getNestedValue as Q } from "./utils/form.utils.js";
+import { defineComponent as M, computed as O, ref as j, openBlock as s, createElementBlock as r, normalizeClass as d, Fragment as y, renderList as G, withMemo as J, createBlock as h, withCtx as L, unref as R, resolveDynamicComponent as z, createTextVNode as k, toDisplayString as p, createCommentVNode as c, createElementVNode as K, createVNode as P, markRaw as Q } from "vue";
+import { isComponent as v, getNestedValue as W } from "./utils/form.utils.js";
 import U from "../Label.vue.js";
-import W from "./FormField.vue.js";
-import { $t as X } from "../../utils/i18n.js";
-const Y = {
+import X from "./FormField.vue.js";
+import { $t as Y } from "../../utils/i18n.js";
+const Z = {
   key: 0,
   class: "text-destructive ml-0.5"
-}, Z = ["onFocusin", "onFocusout"], ee = ["for"], te = {
+}, _ = ["onFocusin", "onFocusout"], ee = ["for"], te = {
   key: 0,
   class: "text-destructive ml-0.5"
 }, ne = {
@@ -21,6 +21,7 @@ const Y = {
     schema: {},
     values: {},
     errors: {},
+    fieldLoading: { default: () => ({}) },
     variant: { default: "outline" },
     size: { default: "md" },
     rounded: { default: "md" },
@@ -32,19 +33,19 @@ const Y = {
     isFieldReadonly: {}
   },
   emits: ["change", "addonAction"],
-  setup(s, { emit: q }) {
-    const r = s, g = q, D = O(() => {
-      if (r.className) return r.className;
-    }), F = (t) => Q(r.values, t.name), l = (t) => r.errors[t.name] || "", $ = (t) => r.isFieldVisible ? r.isFieldVisible(t) : !0, x = (t) => r.isFieldDisabled ? r.isFieldDisabled(t) : t.disabled === !0, A = (t) => r.isFieldReadonly ? r.isFieldReadonly(t) : t.readonly === !0, u = (t) => t.labelI18n ? X(t.labelI18n) : t.label, w = (t) => {
+  setup(a, { emit: q }) {
+    const o = a, g = q, D = O(() => {
+      if (o.className) return o.className;
+    }), F = (t) => W(o.values, t.name), l = (t) => o.errors[t.name] || "", $ = (t) => o.isFieldVisible ? o.isFieldVisible(t) : !0, x = (t) => o.isFieldDisabled ? o.isFieldDisabled(t) : t.disabled === !0, A = (t) => o.isFieldReadonly ? o.isFieldReadonly(t) : t.readonly === !0, u = (t) => t.labelI18n ? Y(t.labelI18n) : t.label, w = (t) => {
       if (t)
-        return v(t) ? P(t) : t;
+        return v(t) ? Q(t) : t;
     }, B = (t, n) => {
       g("change", t.name, n);
-    }, I = (t) => t.itemClass || "", E = (t, n) => {
+    }, I = (t) => t.itemClass || "", f = (t, n) => {
       g("change", t, n);
-    }, T = (t) => {
+    }, E = (t) => {
       g("addonAction", t);
-    }, m = _({}), f = (t) => {
+    }, m = j({}), T = (t) => {
       m.value[t] = !0;
     }, S = (t) => {
       m.value[t] = !1;
@@ -55,7 +56,7 @@ const Y = {
       const n = t.type || "text";
       return ["text", "email", "password", "tel", "url", "search", "textarea"].includes(n);
     }, H = (t) => t.type === "number" ? (t.props?.variant ?? "split") === "split" ? "left-4" : "left-3" : t.type === "date" || t.type === "time" || t.type === "color" ? "left-10" : "left-3", b = (t) => {
-      if (r.variant !== "floating") return !1;
+      if (o.variant !== "floating") return !1;
       const n = t.type || "text";
       return ![
         "switch",
@@ -70,47 +71,48 @@ const Y = {
       if (!(!n || v(n)))
         return n;
     };
-    return (t, n) => (a(), o("div", {
-      class: d(["grid", s.variant === "floating" ? "gap-5 mt-1" : "gap-4", D.value])
+    return (t, n) => (s(), r("div", {
+      class: d(["grid", a.variant === "floating" ? "gap-5 mt-1" : "gap-4", D.value])
     }, [
-      (a(!0), o(p, null, j(s.schema, (e) => (a(), o(p, {
+      (s(!0), r(y, null, G(a.schema, (e) => (s(), r(y, {
         key: e.name
       }, [
-        $(e) ? G([
+        $(e) ? J([
           e,
           F(e),
           l(e),
           x(e),
           A(e),
           m.value[e.name],
-          s.variant,
-          s.size,
-          s.rounded,
-          s.isUpdate,
-          s.showRequiredAsterisk
-        ], () => (a(), o("div", {
+          a.variant,
+          a.size,
+          a.rounded,
+          a.isUpdate,
+          a.showRequiredAsterisk,
+          a.fieldLoading[e.name]
+        ], () => (s(), r("div", {
           key: 0,
           class: d(["max-md:col-span-full! form-field-item", I(e)])
         }, [
-          u(e) && e.type !== "switch" && e.type !== "check" && e.type !== "customFields" && !b(e) ? (a(), y(U, {
+          u(e) && e.type !== "switch" && e.type !== "check" && e.type !== "customFields" && !b(e) ? (s(), h(U, {
             key: 0,
             for: e.name,
             class: "mb-2 block text-sm font-medium"
           }, {
-            default: R(() => [
-              z(v)(u(e)) ? (a(), y(L(w(u(e))), { key: 0 })) : (a(), o(p, { key: 1 }, [
-                k(h(u(e)) + " ", 1),
-                e.required && s.showRequiredAsterisk ? (a(), o("span", Y, "*")) : c("", !0)
+            default: L(() => [
+              R(v)(u(e)) ? (s(), h(z(w(u(e))), { key: 0 })) : (s(), r(y, { key: 1 }, [
+                k(p(u(e)) + " ", 1),
+                e.required && a.showRequiredAsterisk ? (s(), r("span", Z, "*")) : c("", !0)
               ], 64))
             ]),
             _: 2
           }, 1032, ["for"])) : c("", !0),
-          J("div", {
+          K("div", {
             class: d(["relative", ["switch", "check"].includes(e.type) ? "w-auto" : "w-full"]),
-            onFocusin: (i) => f(e.name),
+            onFocusin: (i) => T(e.name),
             onFocusout: (i) => S(e.name)
           }, [
-            b(e) && N(e) && !V(e) ? (a(), o("label", {
+            b(e) && N(e) && !V(e) ? (s(), r("label", {
               key: 0,
               for: e.name,
               class: d([
@@ -118,13 +120,13 @@ const Y = {
                 C(e) ? "-top-2.5 left-3 text-xs bg-background px-1 text-black shadow-[0_4px_4px_-4px_bg-background]" : `top-1/2 -translate-y-1/2 text-sm text-muted-foreground/70 ${H(e)}`
               ])
             }, [
-              z(v)(u(e)) ? (a(), y(L(w(u(e))), { key: 0 })) : (a(), o(p, { key: 1 }, [
-                k(h(u(e)) + " ", 1),
-                e.required ? (a(), o("span", te, "*")) : c("", !0)
+              R(v)(u(e)) ? (s(), h(z(w(u(e))), { key: 0 })) : (s(), r(y, { key: 1 }, [
+                k(p(u(e)) + " ", 1),
+                e.required ? (s(), r("span", te, "*")) : c("", !0)
               ], 64))
             ], 10, ee)) : c("", !0),
-            K(W, {
-              field: r.variant === "floating" ? {
+            P(X, {
+              field: o.variant === "floating" ? {
                 ...e,
                 placeholder: void 0,
                 placeholderI18n: void 0,
@@ -133,31 +135,32 @@ const Y = {
               value: F(e),
               floatingActive: C(e),
               label: e.type === "customFields" ? void 0 : b(e) ? N(e) : void 0,
-              values: s.values,
-              variant: s.variant,
-              size: s.size,
-              rounded: s.rounded,
+              values: a.values,
+              variant: a.variant,
+              size: a.size,
+              rounded: a.rounded,
               disabled: x(e),
               readonly: A(e),
               error: l(e),
-              isUpdate: s.isUpdate,
+              isUpdate: a.isUpdate,
+              loading: a.fieldLoading[e.name],
               onChange: (i) => B(e, i),
-              onAddonChange: E,
-              onAddonAction: T
-            }, null, 8, ["field", "value", "floatingActive", "label", "values", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "onChange"])
-          ], 42, Z),
-          u(e) && (e.type === "switch" || e.type === "check") ? (a(), y(U, {
+              onAddonChange: f,
+              onAddonAction: E
+            }, null, 8, ["field", "value", "floatingActive", "label", "values", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "loading", "onChange"])
+          ], 42, _),
+          u(e) && (e.type === "switch" || e.type === "check") ? (s(), h(U, {
             key: 1,
             for: e.name,
             class: "ml-2 text-sm font-medium cursor-pointer"
           }, {
-            default: R(() => [
-              k(h(u(e)) + " ", 1),
-              e.required ? (a(), o("span", ne, "*")) : c("", !0)
+            default: L(() => [
+              k(p(u(e)) + " ", 1),
+              e.required ? (s(), r("span", ne, "*")) : c("", !0)
             ]),
             _: 2
           }, 1032, ["for"])) : c("", !0),
-          l(e) ? (a(), o("p", ae, h(l(e)), 1)) : c("", !0)
+          l(e) ? (s(), r("p", ae, p(l(e)), 1)) : c("", !0)
         ], 2)), n, 0) : c("", !0)
       ], 64))), 128))
     ], 2));

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

@@ -17,6 +17,8 @@ export interface UseFormReturn {
     isSubmitting: Ref<boolean>;
     /** Whether form has been modified */
     isDirty: Ref<boolean>;
+    /** Loading state of individual fields (e.g. file uploads) */
+    fieldLoading: Ref<Record<string, boolean>>;
     /** Handle field value change */
     handleFieldChange: (name: string, value: any, data?: any) => void;
     /** Validate a single field */