vlite3 0.7.15 → 0.8.2

package/components/Form/Form.vue2.js

@@ -1,26 +1,26 @@
-import { defineComponent as ge, inject as he, computed as n, ref as U, onMounted as be, onUnmounted as X, watch as Y, openBlock as o, createElementBlock as d, withKeys as Z, withModifiers as L, normalizeClass as g, createVNode as z, unref as s, createCommentVNode as c, createElementVNode as h, Fragment as ye, renderList as pe, toDisplayString as D, renderSlot as ke, createBlock as C, mergeProps as _ } from "vue";
-import { useForm as Se } from "./composables/useForm.js";
-import j from "./FormFields.vue.js";
+import { defineComponent as he, inject as be, computed as n, ref as U, onMounted as ye, onUnmounted as Y, watch as Z, openBlock as o, createElementBlock as d, withKeys as _, withModifiers as j, normalizeClass as g, createVNode as z, unref as i, createCommentVNode as c, createElementVNode as h, Fragment as pe, renderList as ke, toDisplayString as D, renderSlot as Se, createBlock as C, mergeProps as ee } from "vue";
+import { useForm as Ce } from "./composables/useForm.js";
+import G from "./FormFields.vue.js";
 import x from "../Button.vue.js";
-import Ce from "../Timeline/Timeline.vue.js";
+import xe from "../Timeline/Timeline.vue.js";
 import "@iconify/vue";
-import { useVLiteConfig as xe } from "../../core/config.js";
-const Fe = ["onKeydown"], we = {
+import { useVLiteConfig as Fe } from "../../core/config.js";
+const we = ["onKeydown"], Ae = {
   key: 0,
   class: "form-fields-single"
-}, Ae = {
+}, Re = {
   key: 1,
   class: "form-groups space-y-6"
-}, Re = { class: "text-base font-semibold text-foreground" }, Ne = {
+}, Ne = { class: "text-base font-semibold text-foreground" }, Ve = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, Ve = { class: "form-group-body p-4.5" }, Ue = {
+}, Ue = { class: "form-group-body p-4.5" }, ze = {
   key: 2,
   class: "form-step"
-}, ze = { class: "text-lg font-semibold text-foreground" }, De = {
+}, De = { class: "text-lg font-semibold text-foreground" }, Pe = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, Pe = { class: "flex items-center gap-3" }, Ie = /* @__PURE__ */ ge({
+}, Le = { class: "flex items-center gap-3" }, Ie = /* @__PURE__ */ he({
   __name: "Form",
   props: {
     schema: {},
@@ -47,45 +47,46 @@ const Fe = ["onKeydown"], we = {
     timelineTextPosition: { default: "right" },
     emitFields: { default: () => ["__typename"] },
     showRequiredAsterisk: { type: Boolean },
-    stickyFooter: { type: Boolean, default: !0 }
+    stickyFooter: { type: Boolean, default: !1 }
   },
   emits: ["onSubmit", "onCancel", "onStepChange", "onAddonAction"],
-  setup(e, { emit: ee }) {
-    const a = e, v = ee, m = he(
+  setup(e, { emit: te }) {
+    const a = e, v = te, m = be(
       "modal-context",
       null
-    ), te = xe(), F = n(() => te?.components?.form || {}), P = n(() => a.variant ?? F.value.variant ?? "outline"), q = n(() => a.size ?? F.value.size ?? "md"), B = n(() => a.rounded ?? F.value.rounded ?? "md"), T = n(
+    ), ie = Fe(), F = n(() => ie?.components?.form || {}), P = n(() => a.variant ?? F.value.variant ?? "outline"), L = n(() => a.size ?? F.value.size ?? "md"), q = n(() => a.rounded ?? F.value.rounded ?? "md"), B = n(
       () => a.showRequiredAsterisk ?? F.value.showRequiredAsterisk ?? !0
-    ), ae = n(() => a.showCancel || !!m), H = n(() => !!m), b = n(() => a.stickyFooter), ie = U(null), K = U(null), G = U(!1);
-    let M = null;
-    be(() => {
-      K.value && (M = new IntersectionObserver(
+    ), ae = n(() => a.showCancel || !!m), T = n(() => !!m), b = n(() => a.stickyFooter), se = U(null), H = U(null), $ = U(!1);
+    let K = null;
+    ye(() => {
+      H.value && (K = new IntersectionObserver(
         ([t]) => {
-          G.value = !t.isIntersecting;
+          $.value = !t.isIntersecting;
         },
         { threshold: 0 }
-      ), M.observe(K.value));
-    }), X(() => {
-      M?.disconnect();
+      ), K.observe(H.value));
+    }), Y(() => {
+      K?.disconnect();
     });
-    const w = n(() => !a.schema || a.schema.length === 0 ? !1 : Array.isArray(a.schema[0])), r = n(() => a.tabs && a.tabs.length > 0 && w.value), l = U(0), $ = n(() => a.tabs ? a.tabs.map((t, i) => ({
-      id: t.id?.toString() || i.toString(),
+    const w = n(() => !a.schema || a.schema.length === 0 ? !1 : Array.isArray(a.schema[0])), r = n(() => a.tabs && a.tabs.length > 0 && w.value), l = U(0), O = n(() => a.tabs ? a.tabs.map((t, s) => ({
+      id: t.id?.toString() || s.toString(),
       title: t.title,
       icon: t.icon,
       description: t.description,
-      status: i < l.value ? "completed" : i === l.value ? "current" : "upcoming"
-    })) : []), y = n(() => w.value ? a.schema : [a.schema]), O = n(() => r.value ? y.value[l.value] || [] : []), {
+      status: s < l.value ? "completed" : s === l.value ? "current" : "upcoming"
+    })) : []), y = n(() => w.value ? a.schema : [a.schema]), J = n(() => r.value ? y.value[l.value] || [] : []), {
       formValues: A,
       errors: p,
       isSubmitting: k,
-      handleFieldChange: se,
-      validateField: le,
-      validateAll: oe,
+      fieldLoading: M,
+      handleFieldChange: le,
+      validateField: oe,
+      validateAll: ne,
       isFieldVisible: R,
       isFieldDisabled: N,
       isFieldReadonly: E,
-      handleSubmit: ne
-    } = Se({
+      handleSubmit: re
+    } = Ce({
       schema: a.schema,
       values: a.values,
       isUpdate: a.isUpdate,
@@ -96,91 +97,91 @@ const Fe = ["onKeydown"], we = {
         }));
       }
     });
-    Y(
+    Z(
       () => a.loading || k.value,
       (t) => {
         m?.setSubmitting && m.setSubmitting(t);
       },
       { immediate: !0 }
-    ), X(() => {
+    ), Y(() => {
       m?.setSubmitting && m.setSubmitting(!1);
-    }), Y(
+    }), Z(
       () => a.values,
       (t) => {
       },
       { deep: !0 }
     );
-    const I = (t, i) => {
-      se(t, i.value, i.data);
-    }, re = () => {
+    const I = (t, s) => {
+      le(t, s.value, s.data);
+    }, ue = () => {
       if (!r.value) return !0;
-      const t = O.value;
-      let i = !0;
+      const t = J.value;
+      let s = !0;
       for (const u of t) {
         if (!R(u) || N(u)) continue;
-        le(u) && (i = !1);
+        oe(u) && (s = !1);
       }
-      return i;
-    }, ue = n(() => r.value ? l.value < y.value.length - 1 : !1), J = n(() => r.value ? l.value > 0 : !1), V = n(() => r.value ? l.value === y.value.length - 1 : !0), Q = () => {
-      ue.value && re() && (l.value++, v("onStepChange", l.value));
-    }, de = () => {
-      J.value && (l.value--, v("onStepChange", l.value));
-    }, ce = (t, i) => {
-      i <= l.value && (l.value = i, v("onStepChange", l.value));
+      return s;
+    }, de = n(() => r.value ? l.value < y.value.length - 1 : !1), Q = n(() => r.value ? l.value > 0 : !1), V = n(() => r.value ? l.value === y.value.length - 1 : !0), W = () => {
+      de.value && ue() && (l.value++, v("onStepChange", l.value));
+    }, ce = () => {
+      Q.value && (l.value--, v("onStepChange", l.value));
+    }, ve = (t, s) => {
+      s <= l.value && (l.value = s, v("onStepChange", l.value));
     }, S = async () => {
       if (r.value) {
         if (!V.value && !a.isUpdate) {
-          Q();
+          W();
           return;
         }
-        if (!oe()) {
-          const i = y.value.findIndex(
+        if (!ne()) {
+          const s = y.value.findIndex(
             (u) => u.some((f) => !!p.value[f.name])
           );
-          i !== -1 && i !== l.value && (l.value = i, v("onStepChange", l.value));
+          s !== -1 && s !== l.value && (l.value = s, v("onStepChange", l.value));
           return;
         }
       }
       try {
-        await ne();
+        await re();
       } catch {
       }
-    }, ve = (t) => {
+    }, me = (t) => {
       if (t.key !== "Enter") return;
       const u = t.target.tagName.toLowerCase();
       u !== "textarea" && u !== "button" && (t.preventDefault(), S());
-    }, W = (t) => {
+    }, X = (t) => {
       (t.metaKey || t.ctrlKey) && t.key === "s" && (t.preventDefault(), S());
-    }, me = () => {
+    }, fe = () => {
       v("onCancel"), m && m?.close?.();
     };
-    return (t, i) => (o(), d("form", {
+    return (t, s) => (o(), d("form", {
       class: g(["form-container ", a.class]),
-      onSubmit: L(S, ["prevent"]),
+      onSubmit: j(S, ["prevent"]),
       onKeydown: [
-        ve,
-        Z(L(W, ["meta", "prevent"]), ["s"]),
-        Z(L(W, ["ctrl", "prevent"]), ["s"])
+        me,
+        _(j(X, ["meta", "prevent"]), ["s"]),
+        _(j(X, ["ctrl", "prevent"]), ["s"])
       ]
     }, [
-      r.value && $.value.length > 0 ? (o(), d("div", {
+      r.value && O.value.length > 0 ? (o(), d("div", {
         key: 0,
         class: g(["form-timeline", e.timelineTextPosition == "right" ? "mb-6.5" : "mb-13"])
       }, [
-        z(s(Ce), {
-          steps: $.value,
+        z(i(xe), {
+          steps: O.value,
           activeStep: l.value,
           direction: "horizontal",
           textPosition: e.timelineTextPosition,
           clickable: !0,
-          onStepClick: ce
+          onStepClick: ve
         }, null, 8, ["steps", "activeStep", "textPosition"])
       ], 2)) : c("", !0),
       h("div", {
         class: g(e.footer && b.value ? "pb-2" : "")
       }, [
-        w.value ? w.value && !r.value ? (o(), d("div", Ae, [
-          (o(!0), d(ye, null, pe(y.value, (u, f) => (o(), d("div", {
+        w.value ? w.value && !r.value ? (o(), d("div", Re, [
+          (o(!0), d(pe, null, ke(y.value, (u, f) => (o(), d("div", {
             key: f,
             class: g(["form-group border rounded overflow-hidden bg-body", e.groupClass])
           }, [
@@ -188,79 +189,82 @@ const Fe = ["onKeydown"], we = {
               key: 0,
               class: g(["form-group-header bg-muted/50 px-4 py-2.5 border-b", e.headerClass])
             }, [
-              h("h3", Re, D(e.groupsHeadings[f]), 1),
-              e.groupHeadingsDescription?.[f] ? (o(), d("p", Ne, D(e.groupHeadingsDescription[f]), 1)) : c("", !0)
+              h("h3", Ne, D(e.groupsHeadings[f]), 1),
+              e.groupHeadingsDescription?.[f] ? (o(), d("p", Ve, D(e.groupHeadingsDescription[f]), 1)) : c("", !0)
             ], 2)) : c("", !0),
-            h("div", Ve, [
-              z(j, {
+            h("div", Ue, [
+              z(G, {
                 schema: u,
-                values: s(A),
-                errors: s(p),
+                values: i(A),
+                errors: i(p),
+                fieldLoading: i(M),
                 variant: P.value,
-                size: q.value,
-                rounded: B.value,
+                size: L.value,
+                rounded: q.value,
                 className: e.className,
                 isUpdate: e.isUpdate,
-                showRequiredAsterisk: T.value,
-                isFieldVisible: s(R),
-                isFieldDisabled: s(N),
-                isFieldReadonly: s(E),
+                showRequiredAsterisk: B.value,
+                isFieldVisible: i(R),
+                isFieldDisabled: i(N),
+                isFieldReadonly: i(E),
                 onChange: I,
-                onAddonAction: i[1] || (i[1] = (fe) => v("onAddonAction", fe))
-              }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+                onAddonAction: s[1] || (s[1] = (ge) => v("onAddonAction", ge))
+              }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
             ])
           ], 2))), 128))
-        ])) : r.value ? (o(), d("div", Ue, [
+        ])) : r.value ? (o(), d("div", ze, [
           e.tabs?.[l.value] ? (o(), d("div", {
             key: 0,
             class: g(["form-step-header mb-6", e.headerClass])
           }, [
-            h("h2", ze, D(e.tabs[l.value].title), 1),
-            e.tabs[l.value].description ? (o(), d("p", De, D(e.tabs[l.value].description), 1)) : c("", !0)
+            h("h2", De, D(e.tabs[l.value].title), 1),
+            e.tabs[l.value].description ? (o(), d("p", Pe, D(e.tabs[l.value].description), 1)) : c("", !0)
           ], 2)) : c("", !0),
-          z(j, {
-            schema: O.value,
-            values: s(A),
-            errors: s(p),
+          z(G, {
+            schema: J.value,
+            values: i(A),
+            errors: i(p),
+            fieldLoading: i(M),
             variant: P.value,
-            size: q.value,
-            rounded: B.value,
+            size: L.value,
+            rounded: q.value,
             className: e.className,
             isUpdate: e.isUpdate,
-            showRequiredAsterisk: T.value,
-            isFieldVisible: s(R),
-            isFieldDisabled: s(N),
-            isFieldReadonly: s(E),
+            showRequiredAsterisk: B.value,
+            isFieldVisible: i(R),
+            isFieldDisabled: i(N),
+            isFieldReadonly: i(E),
             onChange: I,
-            onAddonAction: i[2] || (i[2] = (u) => v("onAddonAction", u))
-          }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
-        ])) : c("", !0) : (o(), d("div", we, [
-          z(j, {
+            onAddonAction: s[2] || (s[2] = (u) => v("onAddonAction", u))
+          }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+        ])) : c("", !0) : (o(), d("div", Ae, [
+          z(G, {
             schema: e.schema,
-            values: s(A),
-            errors: s(p),
+            values: i(A),
+            errors: i(p),
+            fieldLoading: i(M),
             variant: P.value,
-            size: q.value,
-            rounded: B.value,
+            size: L.value,
+            rounded: q.value,
             className: e.className,
             isUpdate: e.isUpdate,
-            showRequiredAsterisk: T.value,
-            isFieldVisible: s(R),
-            isFieldDisabled: s(N),
-            isFieldReadonly: s(E),
+            showRequiredAsterisk: B.value,
+            isFieldVisible: i(R),
+            isFieldDisabled: i(N),
+            isFieldReadonly: i(E),
             onChange: I,
-            onAddonAction: i[0] || (i[0] = (u) => v("onAddonAction", u))
-          }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+            onAddonAction: s[0] || (s[0] = (u) => v("onAddonAction", u))
+          }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
         ])),
-        ke(t.$slots, "default", {
-          values: s(A),
-          errors: s(p),
-          isSubmitting: s(k),
+        Se(t.$slots, "default", {
+          values: i(A),
+          errors: i(p),
+          isSubmitting: i(k),
           handleSubmit: S
         }, void 0, !0),
         h("div", {
           ref_key: "sentinelRef",
-          ref: K,
+          ref: H,
           class: "form-scroll-sentinel h-px w-full",
           "aria-hidden": "true"
         }, null, 512)
@@ -268,7 +272,7 @@ const Fe = ["onKeydown"], we = {
       e.footer ? (o(), d("div", {
         key: 1,
         ref_key: "footerRef",
-        ref: ie,
+        ref: se,
         class: g([
           "form-footer flex items-center gap-3 z-20",
           e.footerClass,
@@ -276,43 +280,43 @@ const Fe = ["onKeydown"], we = {
           // Sticky positioning
           b.value ? "sticky bottom-0 bg-background/95 pt-3 pb-2 -mx-0.5 px-0.5" : "mt-6",
           // Inside modal: extend to modal edges and add top border always
-          H.value ? "-mx-4 px-4 pb-0!" : "",
+          T.value ? "-mx-4 px-4 pb-0! pt-3!" : "",
           // Shadow only while actually stuck (sentinel has scrolled out of view)
-          b.value && G.value ? "" : b.value ? "border-t border-transparent" : "",
+          b.value && $.value ? "" : b.value ? "border-t border-transparent" : "",
           // Non-sticky inside modal keeps the original border styling
-          !b.value && H.value ? "border-t border-border/75 mt-8" : "",
-          !b.value && !H.value ? "mt-6" : ""
+          !b.value && T.value ? "border-t border-border/75 mt-5" : "",
+          !b.value && !T.value ? "mt-6" : ""
         ])
       }, [
-        h("div", Pe, [
+        h("div", Le, [
           ae.value ? (o(), C(x, {
             key: 0,
             type: "button",
             variant: "outline",
             text: e.cancelText,
-            disabled: e.loading || s(k),
-            onClick: me
+            disabled: e.loading || i(k),
+            onClick: fe
           }, null, 8, ["text", "disabled"])) : c("", !0),
-          r.value && e.isUpdate && !V.value ? (o(), C(x, _({
+          r.value && e.isUpdate && !V.value ? (o(), C(x, ee({
             key: 1,
             type: "button",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || s(k),
+            loading: e.loading || i(k),
             onClick: S
           }), null, 16, ["text", "loading"])) : c("", !0)
         ]),
         h("div", {
           class: g(["flex items-center gap-3", r.value && "ml-auto"])
         }, [
-          r.value && J.value ? (o(), C(x, {
+          r.value && Q.value ? (o(), C(x, {
             key: 0,
             type: "button",
             variant: "outline",
             icon: "lucide:arrow-left",
             text: "Previous",
-            onClick: de
+            onClick: ce
           })) : c("", !0),
           r.value && !V.value ? (o(), C(x, {
             key: 1,
@@ -320,19 +324,19 @@ const Fe = ["onKeydown"], we = {
             variant: e.isUpdate ? "outline" : "primary",
             text: "Next",
             iconRight: "lucide:arrow-right",
-            onClick: Q
+            onClick: W
           }, null, 8, ["variant"])) : c("", !0),
-          !r.value || V.value ? (o(), C(x, _({
+          !r.value || V.value ? (o(), C(x, ee({
             key: 2,
             type: "submit",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || s(k)
+            loading: e.loading || i(k)
           }), null, 16, ["text", "loading"])) : c("", !0)
         ], 2)
       ], 2)) : c("", !0)
-    ], 42, Fe));
+    ], 42, we));
   }
 });
 export {

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

@@ -14,6 +14,8 @@ interface Props {
     label?: string;
     /** Whether the floating label is currently in the 'active' (raised) position */
     floatingActive?: boolean;
+    /** Whether the specific field is currently loading/processing */
+    loading?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (payload: IFormFieldChangePayload) => any;
@@ -30,6 +32,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     rounded: InputRounded;
     error: string;
     disabled: boolean;
+    loading: boolean;
     isUpdate: boolean;
     floatingActive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;