vlite3 1.1.2 → 1.1.4

package/components/Form/Form.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as pe, inject as Se, computed as r, onMounted as te, onUnmounted as O, ref as K, watch as ae, openBlock as s, createElementBlock as d, withKeys as le, withModifiers as J, normalizeClass as m, createElementVNode as f, createVNode as A, mergeProps as M, toDisplayString as z, unref as t, renderSlot as ie, createCommentVNode as c, createBlock as S, Fragment as Ce, renderList as Fe } from "vue";
+import { defineComponent as pe, inject as Se, computed as r, onMounted as te, onUnmounted as O, ref as K, watch as ae, openBlock as s, createElementBlock as d, withKeys as le, withModifiers as J, normalizeClass as m, createElementVNode as f, createVNode as T, mergeProps as M, toDisplayString as z, unref as t, renderSlot as ie, createCommentVNode as c, createBlock as C, Fragment as Ce, renderList as Fe } from "vue";
 import { useForm as we } from "./composables/useForm.js";
 import Q from "./FormFields.vue.js";
 import Ae from "./FormField.vue.js";
 import Te from "./FormSkeleton.vue.js";
-import T from "../Button.vue.js";
+import R from "../Button.vue.js";
 import Re from "../BackButton.vue.js";
 import Pe from "../Timeline/Timeline.vue.js";
 import "@iconify/vue";
@@ -65,11 +65,11 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
   setup(e, { emit: se }) {
     const l = e, h = se, v = Se("modal-context", null), ne = Ve(), B = r(() => ne?.components?.form || {}), L = r(() => l.variant ?? B.value.variant ?? "outline"), N = r(() => l.size ?? B.value.size ?? "md"), D = r(() => l.rounded ?? B.value.rounded ?? "md"), G = r(
       () => l.showRequiredAsterisk ?? B.value.showRequiredAsterisk ?? !0
-    ), oe = r(() => l.showCancel || !!v), C = r(() => !!v), R = r(() => l.stickyFooter || C.value);
+    ), oe = r(() => l.showCancel || !!v), F = r(() => !!v), P = r(() => l.stickyFooter || F.value);
     te(() => {
-      l.footer && C.value && v?.registerFormFooter?.(!0);
+      l.footer && F.value && v?.registerFormFooter?.(!0);
     }), O(() => {
-      C.value && v?.registerFormFooter?.(!1);
+      F.value && v?.registerFormFooter?.(!1);
     });
     const re = K(null), j = K(null), W = K(!1);
     let E = null;
@@ -83,20 +83,20 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
     }), O(() => {
       E?.disconnect();
     });
-    const F = r(() => !l.schema || l.schema.length === 0 ? !1 : Array.isArray(l.schema[0])), u = r(() => l.tabs && l.tabs.length > 0 && F.value), n = K(0), X = r(() => l.tabs ? l.tabs.map((a, i) => ({
+    const w = r(() => !l.schema || l.schema.length === 0 ? !1 : Array.isArray(l.schema[0])), u = r(() => l.tabs && l.tabs.length > 0 && w.value), n = K(0), X = r(() => l.tabs ? l.tabs.map((a, i) => ({
       id: a.id?.toString() || i.toString(),
       title: a.title,
       icon: a.icon,
       description: a.description,
       status: i < n.value ? "completed" : i === n.value ? "current" : "upcoming"
-    })) : []), P = r(() => F.value ? l.schema : [l.schema]), Y = r(() => u.value ? P.value[n.value] || [] : []), g = r(() => u.value ? null : (F.value ? l.schema.flat() : l.schema).find((i) => ze(i, {
+    })) : []), x = r(() => w.value ? l.schema : [l.schema]), Y = r(() => u.value ? x.value[n.value] || [] : []), g = r(() => u.value ? null : (w.value ? l.schema.flat() : l.schema).find((i) => ze(i, {
       values: b.value,
       globalValues: b.value,
       isUpdate: l.isUpdate
-    }) === "thumbnailSelector") ?? null), w = r(() => !!g.value), {
+    }) === "thumbnailSelector") ?? null), A = r(() => !!g.value), {
       formValues: b,
-      errors: x,
-      isSubmitting: k,
+      errors: k,
+      isSubmitting: p,
       fieldLoading: q,
       handleFieldChange: ue,
       validateField: de,
@@ -118,7 +118,7 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
       }
     });
     ae(
-      () => l.loading || k.value,
+      () => l.loading || p.value,
       (a) => {
         v?.setSubmitting && v.setSubmitting(a);
       },
@@ -142,21 +142,21 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
         await de(o) && (i = !1);
       }
       return i;
-    }, ge = r(() => u.value ? n.value < P.value.length - 1 : !1), Z = r(() => u.value ? n.value > 0 : !1), I = r(() => u.value ? n.value === P.value.length - 1 : !0), _ = async () => {
+    }, ge = r(() => u.value ? n.value < x.value.length - 1 : !1), Z = r(() => u.value ? n.value > 0 : !1), I = r(() => u.value ? n.value === x.value.length - 1 : !0), _ = async () => {
       !ge.value || !await fe() || (n.value++, h("onStepChange", n.value));
     }, he = () => {
       Z.value && (n.value--, h("onStepChange", n.value));
     }, be = (a, i) => {
       i <= n.value && (n.value = i, h("onStepChange", n.value));
-    }, p = async () => {
+    }, S = async () => {
       if (u.value) {
         if (!I.value && !l.isUpdate) {
           await _();
           return;
         }
         if (!await ce()) {
-          const i = P.value.findIndex(
-            (o) => o.some((y) => !!x.value[y.name])
+          const i = x.value.findIndex(
+            (o) => o.some((y) => !!k.value[y.name])
           );
           i !== -1 && i !== n.value && (n.value = i, h("onStepChange", n.value));
           return;
@@ -169,15 +169,15 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
     }, ye = (a) => {
       if (a.key !== "Enter") return;
       const o = a.target.tagName.toLowerCase();
-      o !== "textarea" && o !== "button" && (a.preventDefault(), p());
+      o !== "textarea" && o !== "button" && (a.preventDefault(), S());
     }, ee = (a) => {
-      (a.metaKey || a.ctrlKey) && a.key === "s" && (a.preventDefault(), p());
+      (a.metaKey || a.ctrlKey) && a.key === "s" && (a.preventDefault(), S());
     }, xe = () => {
       h("onCancel"), v && v?.close?.();
     };
     return (a, i) => (s(), d("form", {
       class: m(["form-container ", l.class, e.isPage && "pb-10"]),
-      onSubmit: J(p, ["prevent"]),
+      onSubmit: J(S, ["prevent"]),
       onKeydown: [
         ye,
         le(J(ee, ["meta", "prevent"]), ["s"]),
@@ -192,7 +192,7 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
         ])
       }, [
         f("div", Le, [
-          A(Re, M(e.backButtonProps, {
+          T(Re, M(e.backButtonProps, {
             fallback: e.backButtonPath,
             class: "max-sm:w-8 max-sm:h-8 max-sm:min-w-8 max-sm:min-h-8 max-sm:px-0 shrink-0"
           }), null, 16, ["fallback"]),
@@ -203,17 +203,17 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
         f("div", Ne, [
           ie(a.$slots, "header-actions", {
             values: t(b),
-            isSubmitting: t(k),
-            handleSubmit: p
+            isSubmitting: t(p),
+            handleSubmit: S
           }, void 0, !0),
-          A(T, M({
+          T(R, M({
             type: "button",
             variant: e.isUpdate ? "outline" : "primary",
             text: e.submitText
           }, e.submitProps, {
             disabled: e.schemaLoading,
-            loading: e.loading || t(k),
-            onClick: p,
+            loading: e.loading || t(p),
+            onClick: S,
             class: "max-sm:hidden"
           }), null, 16, ["variant", "text", "disabled", "loading"])
         ])
@@ -222,7 +222,7 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
         key: 1,
         class: m(["form-timeline", e.timelineTextPosition == "right" ? "mb-6.5" : "mb-13"])
       }, [
-        A(t(Pe), {
+        T(t(Pe), {
           steps: X.value,
           activeStep: n.value,
           direction: "horizontal",
@@ -232,43 +232,47 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
         }, null, 8, ["steps", "activeStep", "textPosition"])
       ], 2)) : c("", !0),
       f("div", {
-        class: m(e.footer && R.value ? "pb-2" : "")
+        class: m(e.footer && P.value ? "pb-2" : "")
       }, [
-        e.schemaLoading ? (s(), S(Te, {
+        e.schemaLoading ? (s(), C(Te, {
           key: 0,
-          isGrouped: F.value
+          isGrouped: w.value
         }, null, 8, ["isGrouped"])) : (s(), d("div", {
           key: 1,
-          class: m(w.value ? "flex flex-col lg:flex-row gap-10 lg:gap-16" : "")
+          class: m(A.value ? "flex flex-col lg:flex-row gap-10 lg:gap-16" : "")
         }, [
-          w.value ? (s(), d("div", De, [
-            g.value && t(U)(g.value) ? (s(), S(Ae, {
+          A.value ? (s(), d("div", De, [
+            g.value && t(U)(g.value) ? (s(), C(Ae, {
               key: 0,
               field: g.value,
               value: t(b)[g.value.name],
               values: t(b),
-              errors: t(x),
+              errors: t(k),
               variant: L.value,
               size: N.value,
               rounded: D.value,
               disabled: t(V)(g.value),
               readonly: t(H)(g.value),
-              error: t(x)[g.value.name] || "",
+              error: t(k)[g.value.name] || "",
               isUpdate: e.isUpdate,
               loading: t(q)[g.value?.name],
               onChange: i[0] || (i[0] = (o) => $(g.value.name, o))
             }, null, 8, ["field", "value", "values", "errors", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "loading"])) : c("", !0)
           ])) : c("", !0),
           f("div", {
-            class: m(w.value ? "flex-1 min-w-0 order-last lg:order-first" : "w-full")
+            class: m(A.value ? "flex-1 min-w-0 order-last lg:order-first" : "w-full")
           }, [
-            F.value ? F.value && !u.value ? (s(), d("div", {
+            w.value ? w.value && !u.value ? (s(), d("div", {
               key: 1,
               class: m(["form-groups space-y-6", e.groupContainerClass])
             }, [
-              (s(!0), d(Ce, null, Fe(P.value, (o, y) => (s(), d("div", {
+              (s(!0), d(Ce, null, Fe(x.value, (o, y) => (s(), d("div", {
                 key: y,
-                class: m(["form-group border rounded overflow-hidden bg-body", e.groupClass])
+                class: m([
+                  "form-group overflow-hidden bg-body",
+                  e.groupClass,
+                  x.value?.length > 1 ? "border rounded" : ""
+                ])
               }, [
                 e.groupsHeadings?.[y] ? (s(), d("div", {
                   key: 0,
@@ -278,12 +282,12 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
                   e.groupHeadingsDescription?.[y] ? (s(), d("p", $e, z(e.groupHeadingsDescription[y]), 1)) : c("", !0)
                 ], 2)) : c("", !0),
                 f("div", {
-                  class: m(["form-group-body p-4.5", e.groupBodyClass])
+                  class: m(["form-group-body", [e.groupBodyClass, x.value?.length > 1 ? "p-4.5" : ""]])
                 }, [
-                  A(Q, {
+                  T(Q, {
                     schema: o,
                     values: t(b),
-                    errors: t(x),
+                    errors: t(k),
                     fieldLoading: t(q),
                     variant: L.value,
                     size: N.value,
@@ -294,7 +298,7 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
                     isFieldVisible: t(U),
                     isFieldDisabled: t(V),
                     isFieldReadonly: t(H),
-                    excludeTypes: w.value ? ["thumbnailSelector"] : [],
+                    excludeTypes: A.value ? ["thumbnailSelector"] : [],
                     onChange: $,
                     onAddonAction: i[2] || (i[2] = (ke) => h("onAddonAction", ke))
                   }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes"])
@@ -308,10 +312,10 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
                 f("h2", Ke, z(e.tabs[n.value].title), 1),
                 e.tabs[n.value].description ? (s(), d("p", Me, z(e.tabs[n.value].description), 1)) : c("", !0)
               ], 2)) : c("", !0),
-              A(Q, {
+              T(Q, {
                 schema: Y.value,
                 values: t(b),
-                errors: t(x),
+                errors: t(k),
                 fieldLoading: t(q),
                 variant: L.value,
                 size: N.value,
@@ -322,15 +326,15 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
                 isFieldVisible: t(U),
                 isFieldDisabled: t(V),
                 isFieldReadonly: t(H),
-                excludeTypes: w.value ? ["thumbnailSelector"] : [],
+                excludeTypes: A.value ? ["thumbnailSelector"] : [],
                 onChange: $,
                 onAddonAction: i[3] || (i[3] = (o) => h("onAddonAction", o))
               }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes"])
             ])) : c("", !0) : (s(), d("div", qe, [
-              A(Q, {
+              T(Q, {
                 schema: e.schema,
                 values: t(b),
-                errors: t(x),
+                errors: t(k),
                 fieldLoading: t(q),
                 variant: L.value,
                 size: N.value,
@@ -341,16 +345,16 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
                 isFieldVisible: t(U),
                 isFieldDisabled: t(V),
                 isFieldReadonly: t(H),
-                excludeTypes: w.value ? ["thumbnailSelector"] : [],
+                excludeTypes: A.value ? ["thumbnailSelector"] : [],
                 onChange: $,
                 onAddonAction: i[1] || (i[1] = (o) => h("onAddonAction", o))
               }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes"])
             ])),
             ie(a.$slots, "default", {
               values: t(b),
-              errors: t(x),
-              isSubmitting: t(k),
-              handleSubmit: p
+              errors: t(k),
+              isSubmitting: t(p),
+              handleSubmit: S
             }, void 0, !0)
           ], 2)
         ], 2)),
@@ -374,39 +378,39 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
           // `sticky bottom-0` anchors the footer to the bottom of the nearest scrollable ancestor
           // (the modal's overflow-y-auto body), keeping it visible at all times without leaving
           // the normal document flow (unlike `fixed` which would escape the modal bounds).
-          R.value ? "sticky bottom-0 bg-body pt-3 pb-3 -mx-0.5 px-0.5 mt-6 border-t border-border/75" : "mt-6",
+          P.value ? "sticky bottom-0 bg-body pt-3 pb-3 -mx-0.5 px-0.5 mt-6 border-t border-border/75" : "mt-6",
           // Show a subtle top shadow while content is scrolling beneath the sticky footer
-          (R.value && W.value, ""),
+          (P.value && W.value, ""),
           // Inside modal: extend footer flush to modal edge padding
-          C.value ? "-mx-4 px-4 pb-3! mt-7.5!" : "",
+          F.value ? "-mx-4 px-4 pb-3! mt-7.5!" : "",
           // Non-sticky inside modal keeps the original border styling
-          !R.value && C.value ? "border-t border-border/75 mt-5" : "",
-          !R.value && !C.value ? "mt-6" : ""
+          !P.value && F.value ? "border-t border-border/75 mt-5" : "",
+          !P.value && !F.value ? "mt-6" : ""
         ])
       }, [
         f("div", Ge, [
-          oe.value ? (s(), S(T, {
+          oe.value ? (s(), C(R, {
             key: 0,
             type: "button",
             variant: "outline",
             text: e.cancelText,
-            disabled: e.loading || t(k),
+            disabled: e.loading || t(p),
             onClick: xe
           }, null, 8, ["text", "disabled"])) : c("", !0),
-          u.value && e.isUpdate && !I.value ? (s(), S(T, M({
+          u.value && e.isUpdate && !I.value ? (s(), C(R, M({
             key: 1,
             type: "button",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || t(k),
-            onClick: p
+            loading: e.loading || t(p),
+            onClick: S
           }), null, 16, ["text", "loading"])) : c("", !0)
         ]),
         f("div", {
           class: m(["flex gap-3 items-center", u.value && "ml-auto"])
         }, [
-          u.value && Z.value ? (s(), S(T, {
+          u.value && Z.value ? (s(), C(R, {
             key: 0,
             type: "button",
             variant: "outline",
@@ -414,7 +418,7 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
             text: "Previous",
             onClick: he
           })) : c("", !0),
-          u.value && !I.value ? (s(), S(T, {
+          u.value && !I.value ? (s(), C(R, {
             key: 1,
             type: "button",
             variant: e.isUpdate ? "outline" : "primary",
@@ -422,13 +426,13 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
             iconRight: "lucide:arrow-right",
             onClick: _
           }, null, 8, ["variant"])) : c("", !0),
-          !u.value || I.value ? (s(), S(T, M({
+          !u.value || I.value ? (s(), C(R, M({
             key: 2,
             type: "submit",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || t(k)
+            loading: e.loading || t(p)
           }), null, 16, ["text", "loading"])) : c("", !0)
         ], 2)
       ], 2)) : c("", !0)