vlite3 1.3.11 → 1.4.2

package/components/Form/Form.vue2.js

@@ -1,31 +1,32 @@
-import { defineComponent as Pe, inject as Re, computed as r, onMounted as ue, onUnmounted as J, ref as E, watch as de, openBlock as n, createElementBlock as c, withKeys as ce, withModifiers as Q, normalizeClass as m, createElementVNode as g, createVNode as F, mergeProps as z, toDisplayString as B, unref as l, renderSlot as me, createCommentVNode as u, createBlock as C, withCtx as Ve, Fragment as ze, renderList as Be } from "vue";
-import { useForm as Ie } from "./composables/useForm.js";
-import W from "./FormFields.vue.js";
-import Le from "./FormField.vue.js";
-import Ne from "./FormSkeleton.vue.js";
+import { defineComponent as Pe, inject as Ve, computed as r, onMounted as ue, onUnmounted as X, ref as M, watch as de, openBlock as n, createElementBlock as d, withKeys as ce, withModifiers as Y, normalizeClass as m, createElementVNode as b, createVNode as k, mergeProps as $, toDisplayString as G, unref as t, renderSlot as me, createCommentVNode as c, createBlock as F, withCtx as ve, Fragment as Le, renderList as Ie } from "vue";
+import { useForm as ze } from "./composables/useForm.js";
+import j from "./FormFields.vue.js";
+import Ne from "./FormField.vue.js";
+import Be from "./FormSkeleton.vue.js";
+import De from "../Accordion/Accordion.vue.js";
 import S from "../Button.vue.js";
-import De from "../BackButton.vue.js";
-import qe from "../Timeline/Timeline.vue.js";
+import qe from "../BackButton.vue.js";
+import $e from "../Timeline/Timeline.vue.js";
 import "@iconify/vue";
 import { $t as Ge } from "../../utils/i18n.js";
 import { useVLiteConfig as He } from "../../core/config.js";
-import { resolveFieldType as $e } from "./utils/form.utils.js";
-const Ee = ["onKeydown"], Ke = { class: "flex items-center gap-3" }, Me = { class: "flex items-center gap-2 shrink-0" }, je = {
+import { resolveFieldType as Ee } from "./utils/form.utils.js";
+const Ke = ["onKeydown"], Me = { class: "flex items-center gap-3" }, je = { class: "flex items-center gap-2 shrink-0" }, Oe = {
   key: 0,
   class: "w-full order-first lg:order-last lg:min-w-100 lg:max-w-[380px] shrink-0"
-}, Oe = { key: 0 }, Je = {
+}, Je = { key: 0 }, Qe = {
   key: 0,
   class: "flex gap-3 items-end ml-auto"
-}, Qe = { class: "text-base font-semibold text-foreground" }, We = {
+}, We = { class: "text-base font-semibold text-foreground" }, Xe = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, Xe = {
-  key: 2,
+}, Ye = {
+  key: 3,
   class: "form-step"
-}, Ye = { class: "text-lg font-semibold text-foreground" }, Ze = {
+}, Ze = { class: "text-lg font-semibold text-foreground" }, _e = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, _e = { class: "flex gap-3 items-center" }, mt = /* @__PURE__ */ Pe({
+}, et = { class: "flex gap-3 items-center" }, ft = /* @__PURE__ */ Pe({
   __name: "Form",
   props: {
     schema: {},
@@ -38,7 +39,8 @@ const Ee = ["onKeydown"], Ke = { class: "flex items-center gap-3" }, Me = { clas
     footer: { type: Boolean, default: !0 },
     groupsHeadings: { type: [Array, Function], default: () => [] },
     groupHeadingsDescription: { type: [Array, Function], default: () => [] },
-    tabs: {},
+    groupLayout: { default: "basic" },
+    tabs: { default: void 0 },
     submitText: { default: "Submit" },
     submitProps: {},
     cancelText: { default: "Cancel" },
@@ -65,448 +67,484 @@ const Ee = ["onKeydown"], Ke = { class: "flex items-center gap-3" }, Me = { clas
     backButtonPath: {},
     layout: { default: "vertical" }
   },
-  emits: ["onSubmit", "onCancel", "onStepChange", "onAddonAction", "onBack"],
-  setup(e, { expose: ve, emit: fe }) {
-    const t = e, y = fe, f = Re("modal-context", null), ge = He(), I = r(() => ge?.components?.form || {}), L = r(() => t.variant ?? I.value.variant ?? "outline"), N = r(() => t.size ?? I.value.size ?? "md"), D = r(() => t.rounded ?? I.value.rounded ?? "md"), K = r(
-      () => t.showRequiredAsterisk ?? I.value.showRequiredAsterisk ?? !0
-    ), X = r(() => t.showCancel || !!f), w = r(() => !!f), P = r(
-      () => t.layout !== "inline" && (t.stickyFooter || w.value)
+  emits: ["onSubmit", "onCancel", "onStepChange", "onAddonAction", "onBack", "onChange"],
+  setup(e, { expose: fe, emit: ge }) {
+    const l = e, g = ge, h = Ve("modal-context", null), he = He(), H = r(() => he?.components?.form || {}), P = r(() => l.variant ?? H.value.variant ?? "outline"), V = r(() => l.size ?? H.value.size ?? "md"), L = r(() => l.rounded ?? H.value.rounded ?? "md"), E = r(
+      () => l.showRequiredAsterisk ?? H.value.showRequiredAsterisk ?? !0
+    ), Z = r(() => l.showCancel || !!h), R = r(() => !!h), I = r(
+      () => l.layout !== "inline" && (l.stickyFooter || R.value)
     );
     ue(() => {
-      t.footer && w.value && f?.registerFormFooter?.(!0);
-    }), J(() => {
-      w.value && f?.registerFormFooter?.(!1);
+      l.footer && R.value && h?.registerFormFooter?.(!0);
+    }), X(() => {
+      R.value && h?.registerFormFooter?.(!1);
     });
-    const he = E(null), M = E(null), Y = E(!1);
-    let j = null;
+    const be = M(null), O = M(null), _ = M(!1);
+    let J = null;
     ue(() => {
-      M.value && (j = new IntersectionObserver(
-        ([a]) => {
-          Y.value = !a.isIntersecting;
+      O.value && (J = new IntersectionObserver(
+        ([i]) => {
+          _.value = !i.isIntersecting;
         },
         { threshold: 0 }
-      ), j.observe(M.value));
-    }), J(() => {
-      j?.disconnect();
+      ), J.observe(O.value));
+    }), X(() => {
+      J?.disconnect();
     });
-    const A = r(() => !t.schema || t.schema.length === 0 ? !1 : Array.isArray(t.schema[0])), d = r(() => t.tabs && t.tabs.length > 0 && A.value), o = E(0), Z = r(() => t.tabs ? t.tabs.map((a, i) => ({
-      id: a.id?.toString() || i.toString(),
-      title: a.title,
-      icon: a.icon,
-      description: a.description,
-      status: i < o.value ? "completed" : i === o.value ? "current" : "upcoming"
-    })) : []), R = r(() => A.value ? t.schema : [t.schema]), _ = r(() => d.value ? R.value[o.value] || [] : []), ee = (a) => {
-      if (!a) return [];
-      if (Array.isArray(a)) return a;
+    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), o = M(0), ee = r(() => l.tabs ? l.tabs.map((i, a) => ({
+      id: i.id?.toString() || a.toString(),
+      title: i.title,
+      icon: i.icon,
+      description: i.description,
+      status: a < o.value ? "completed" : a === o.value ? "current" : "upcoming"
+    })) : []), z = r(() => w.value ? l.schema : [l.schema]), te = r(() => u.value ? z.value[o.value] || [] : []), ae = (i) => {
+      if (!i) return [];
+      if (Array.isArray(i)) return i;
       try {
-        const i = a({
+        const a = i({
           values: v.value,
           globalValues: v.value,
-          isUpdate: t.isUpdate
+          isUpdate: l.isUpdate
         });
-        return Array.isArray(i) ? i : [];
-      } catch (i) {
-        return console.error("[Form] Error evaluating dynamic group headings:", i), [];
+        return Array.isArray(a) ? a : [];
+      } catch (a) {
+        return console.error("[Form] Error evaluating dynamic group headings:", a), [];
       }
-    }, te = r(
-      () => ee(t.groupsHeadings)
-    ), ae = r(
-      () => ee(t.groupHeadingsDescription)
-    ), O = r(() => {
-      const a = R.value, i = [];
-      for (let s = 0; s < a.length; s++) {
-        const x = a[s];
-        !Array.isArray(x) || x.length === 0 || x.some((Ue) => U(Ue)) && i.push({ schema: x, originalIndex: s });
+    }, Q = r(() => ae(l.groupsHeadings)), W = r(
+      () => ae(l.groupHeadingsDescription)
+    ), N = r(() => {
+      const i = z.value, a = [];
+      for (let s = 0; s < i.length; s++) {
+        const f = i[s];
+        !Array.isArray(f) || f.length === 0 || f.some((Ue) => T(Ue)) && a.push({ schema: f, originalIndex: s });
       }
-      return i;
-    }), h = r(() => d.value ? null : (A.value ? t.schema.flat() : t.schema).find((i) => $e(i, {
+      return a;
+    }), y = r(() => u.value ? null : (w.value ? l.schema.flat() : l.schema).find((a) => Ee(a, {
       values: v.value,
       globalValues: v.value,
-      isUpdate: t.isUpdate
-    }) === "thumbnailSelector") ?? null), T = r(() => !!h.value), {
+      isUpdate: l.isUpdate
+    }) === "thumbnailSelector") ?? null), A = r(() => !!y.value), {
       formValues: v,
       errors: p,
-      isSubmitting: b,
-      fieldLoading: q,
+      isSubmitting: x,
+      fieldLoading: B,
       handleFieldChange: le,
-      validateField: be,
+      validateField: ye,
       validateAll: ie,
-      isFieldVisible: U,
-      isFieldDisabled: V,
-      isFieldReadonly: G,
-      handleSubmit: ye,
-      reinitialize: xe,
-      resetForm: pe,
-      setFieldError: ke,
-      clearErrors: Ce
-    } = Ie({
-      schema: t.schema,
-      values: t.values,
-      isUpdate: t.isUpdate,
-      folderId: t.folderId,
-      emitFields: t.emitFields,
-      onSubmit: (a) => {
-        y("onSubmit", a, f?.close || (() => {
+      isFieldVisible: T,
+      isFieldDisabled: U,
+      isFieldReadonly: D,
+      handleSubmit: xe,
+      reinitialize: pe,
+      resetForm: ke,
+      setFieldError: Ce,
+      clearErrors: Fe
+    } = ze({
+      schema: l.schema,
+      values: l.values,
+      isUpdate: l.isUpdate,
+      folderId: l.folderId,
+      emitFields: l.emitFields,
+      onSubmit: (i) => {
+        g("onSubmit", i, h?.close || (() => {
         }));
       }
     });
     de(
-      () => t.loading || b.value,
-      (a) => {
-        f?.setSubmitting && f.setSubmitting(a);
+      () => l.loading || x.value,
+      (i) => {
+        h?.setSubmitting && h.setSubmitting(i);
       },
       { immediate: !0 }
-    ), J(() => {
-      f?.setSubmitting && f.setSubmitting(!1);
+    ), X(() => {
+      h?.setSubmitting && h.setSubmitting(!1);
     }), de(
-      [() => t.schema, () => t.values, () => t.schemaLoading],
-      ([a, i, s]) => {
-        s || xe(a, i);
+      [() => l.schema, () => l.values, () => l.schemaLoading],
+      ([i, a, s]) => {
+        s || pe(i, a);
       }
     );
-    const H = (a, i) => {
-      le(a, i.value, i.data);
+    const q = (i, a) => {
+      le(i, a.value, a.data), g("onChange", v.value);
     }, Se = async () => {
-      if (!d.value) return !0;
-      const a = _.value;
-      let i = !0;
-      for (const s of a) {
-        if (!U(s) || V(s)) continue;
-        await be(s) && (i = !1);
+      if (!u.value) return !0;
+      const i = te.value;
+      let a = !0;
+      for (const s of i) {
+        if (!T(s) || U(s)) continue;
+        await ye(s) && (a = !1);
       }
-      return i;
-    }, Fe = r(() => d.value ? o.value < R.value.length - 1 : !1), se = r(() => d.value ? o.value > 0 : !1), $ = r(() => d.value ? o.value === R.value.length - 1 : !0), ne = async () => {
-      !Fe.value || !await Se() || (o.value++, y("onStepChange", o.value));
-    }, we = () => {
-      se.value && (o.value--, y("onStepChange", o.value));
-    }, Ae = (a, i) => {
-      i <= o.value && (o.value = i, y("onStepChange", o.value));
-    }, k = async () => {
-      if (d.value) {
-        if (!$.value && !t.isUpdate) {
+      return a;
+    }, we = r(() => u.value ? o.value < z.value.length - 1 : !1), se = r(() => u.value ? o.value > 0 : !1), K = r(() => u.value ? o.value === z.value.length - 1 : !0), ne = async () => {
+      !we.value || !await Se() || (o.value++, g("onStepChange", o.value));
+    }, Ae = () => {
+      se.value && (o.value--, g("onStepChange", o.value));
+    }, Te = (i, a) => {
+      a <= o.value && (o.value = a, g("onStepChange", o.value));
+    }, C = async () => {
+      if (u.value) {
+        if (!K.value && !l.isUpdate) {
           await ne();
           return;
         }
         if (!await ie()) {
-          const i = R.value.findIndex(
-            (s) => s.some((x) => !!p.value[x.name])
+          const a = z.value.findIndex(
+            (s) => s.some((f) => !!p.value[f.name])
           );
-          i !== -1 && i !== o.value && (o.value = i, y("onStepChange", o.value));
+          a !== -1 && a !== o.value && (o.value = a, g("onStepChange", o.value));
           return;
         }
       }
       try {
-        await ye();
+        await xe();
       } catch {
       }
-    }, Te = (a) => {
-      if (a.key !== "Enter") return;
-      const s = a.target.tagName.toLowerCase();
-      s !== "textarea" && s !== "button" && (a.preventDefault(), k());
-    }, oe = (a) => {
-      (a.metaKey || a.ctrlKey) && a.key === "s" && (a.preventDefault(), k());
+    }, Re = (i) => {
+      if (i.key !== "Enter" || i.defaultPrevented) return;
+      const a = i.target;
+      if (!a) return;
+      const s = a.tagName.toLowerCase();
+      s !== "textarea" && s !== "button" && (a.isContentEditable || (i.preventDefault(), C()));
+    }, oe = (i) => {
+      (i.metaKey || i.ctrlKey) && i.key === "s" && (i.preventDefault(), C());
     };
-    ve({
+    fe({
       formValues: v,
       errors: p,
-      isSubmitting: b,
-      handleSubmit: k,
+      isSubmitting: x,
+      handleSubmit: C,
       validateAll: ie,
-      resetForm: pe,
-      setFieldError: ke,
-      clearErrors: Ce,
+      resetForm: ke,
+      setFieldError: Ce,
+      clearErrors: Fe,
       setFieldValue: le
     });
     const re = () => {
-      y("onCancel"), f && f?.close?.();
+      g("onCancel"), h && h?.close?.();
     };
-    return (a, i) => (n(), c("form", {
-      class: m(["form-container", t.class, e.isPage && "pb-10"]),
-      onSubmit: Q(k, ["prevent"]),
+    return (i, a) => (n(), d("form", {
+      class: m(["form-container", l.class, e.isPage && "pb-10"]),
+      onSubmit: Y(C, ["prevent"]),
       onKeydown: [
-        Te,
-        ce(Q(oe, ["meta", "prevent"]), ["s"]),
-        ce(Q(oe, ["ctrl", "prevent"]), ["s"])
+        Re,
+        ce(Y(oe, ["meta", "prevent"]), ["s"]),
+        ce(Y(oe, ["ctrl", "prevent"]), ["s"])
       ]
     }, [
-      e.isPage ? (n(), c("div", {
+      e.isPage ? (n(), d("div", {
         key: 0,
         class: m([
           "form-page-header sticky top-0 z-30 bg-background flex items-center justify-between  pb-3.5 pt-4 -mt-3.5 mb-4.5",
           e.pageHeaderClass
         ])
       }, [
-        g("div", Ke, [
-          F(De, z(e.backButtonProps, {
+        b("div", Me, [
+          k(qe, $(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"]),
-          g("h1", {
+          b("h1", {
             class: m(["text-foreground max-sm:text-lg text-fs-5 truncate", e.pageTitleClass])
-          }, B(e.pageTitleI18n ? l(Ge)(e.pageTitleI18n) : e.pageTitle), 3)
+          }, G(e.pageTitleI18n ? t(Ge)(e.pageTitleI18n) : e.pageTitle), 3)
         ]),
-        g("div", Me, [
-          me(a.$slots, "header-actions", {
-            values: l(v),
-            isSubmitting: l(b),
-            handleSubmit: k
+        b("div", je, [
+          me(i.$slots, "header-actions", {
+            values: t(v),
+            isSubmitting: t(x),
+            handleSubmit: C
           }, void 0, !0),
-          F(S, z({
+          k(S, $({
             type: "button",
             variant: e.isUpdate ? "outline" : "primary",
             text: e.submitText
           }, e.submitProps, {
             disabled: e.schemaLoading,
-            loading: e.loading || l(b),
-            onClick: k,
+            loading: e.loading || t(x),
+            onClick: C,
             class: "max-sm:hidden"
           }), null, 16, ["variant", "text", "disabled", "loading"])
         ])
-      ], 2)) : u("", !0),
-      !e.schemaLoading && d.value && Z.value.length > 0 ? (n(), c("div", {
+      ], 2)) : c("", !0),
+      !e.schemaLoading && u.value && ee.value.length > 0 ? (n(), d("div", {
         key: 1,
         class: m(["form-timeline", e.timelineTextPosition == "right" ? "mb-2" : "mb-8"])
       }, [
-        F(l(qe), {
-          steps: Z.value,
+        k(t($e), {
+          steps: ee.value,
           activeStep: o.value,
           direction: "horizontal",
           textPosition: e.timelineTextPosition,
           clickable: !0,
-          onStepClick: Ae
+          onStepClick: Te
         }, null, 8, ["steps", "activeStep", "textPosition"])
-      ], 2)) : u("", !0),
-      g("div", {
-        class: m(e.footer && P.value ? "pb-2" : "")
+      ], 2)) : c("", !0),
+      b("div", {
+        class: m(e.footer && I.value ? "pb-2" : "")
       }, [
-        e.schemaLoading ? (n(), C(Ne, {
+        e.schemaLoading ? (n(), F(Be, {
           key: 0,
-          isGrouped: A.value
-        }, null, 8, ["isGrouped"])) : (n(), c("div", {
+          isGrouped: w.value
+        }, null, 8, ["isGrouped"])) : (n(), d("div", {
           key: 1,
-          class: m(T.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" : "")
         }, [
-          T.value ? (n(), c("div", je, [
-            h.value && l(U)(h.value) ? (n(), C(Le, {
+          A.value ? (n(), d("div", Oe, [
+            y.value && t(T)(y.value) ? (n(), F(Ne, {
               key: 0,
-              field: h.value,
-              value: l(v)[h.value.name],
-              values: l(v),
-              errors: l(p),
-              variant: L.value,
-              size: N.value,
-              rounded: D.value,
-              disabled: l(V)(h.value),
-              readonly: l(G)(h.value),
-              error: l(p)[h.value.name] || "",
+              field: y.value,
+              value: t(v)[y.value.name],
+              values: t(v),
+              errors: t(p),
+              variant: P.value,
+              size: V.value,
+              rounded: L.value,
+              disabled: t(U)(y.value),
+              readonly: t(D)(y.value),
+              error: t(p)[y.value.name] || "",
               isUpdate: e.isUpdate,
-              loading: l(q)[h.value?.name],
-              onChange: i[0] || (i[0] = (s) => H(h.value.name, s))
-            }, null, 8, ["field", "value", "values", "errors", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "loading"])) : u("", !0)
-          ])) : u("", !0),
-          g("div", {
-            class: m(T.value ? "flex-1 min-w-0 order-last lg:order-first" : "w-full")
+              loading: t(B)[y.value?.name],
+              onChange: a[0] || (a[0] = (s) => q(y.value.name, s))
+            }, null, 8, ["field", "value", "values", "errors", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "loading"])) : c("", !0)
+          ])) : c("", !0),
+          b("div", {
+            class: m(A.value ? "flex-1 min-w-0 order-last lg:order-first" : "w-full")
           }, [
-            A.value ? A.value && !d.value ? (n(), c("div", {
+            w.value ? w.value && !u.value && e.groupLayout === "basic" ? (n(), d("div", {
               key: 1,
               class: m(["form-groups space-y-6", e.groupContainerClass])
             }, [
-              (n(!0), c(ze, null, Be(O.value, (s) => (n(), c("div", {
+              (n(!0), d(Le, null, Ie(N.value, (s) => (n(), d("div", {
                 key: s.originalIndex,
                 class: m([
                   "form-group overflow-hidden bg-body",
                   e.groupClass,
-                  O.value.length > 1 ? "border rounded" : ""
+                  N.value.length > 1 ? "border rounded" : ""
                 ])
               }, [
-                te.value?.[s.originalIndex] ? (n(), c("div", {
+                Q.value?.[s.originalIndex] ? (n(), d("div", {
                   key: 0,
                   class: m(["form-group-header bg-muted/50 px-4 py-2.5 border-b", e.headerClass])
                 }, [
-                  g("h3", Qe, B(te.value[s.originalIndex]), 1),
-                  ae.value?.[s.originalIndex] ? (n(), c("p", We, B(ae.value[s.originalIndex]), 1)) : u("", !0)
-                ], 2)) : u("", !0),
-                g("div", {
-                  class: m(["form-group-body", [e.groupBodyClass, O.value.length > 1 ? "p-4.5" : ""]])
+                  b("h3", We, G(Q.value[s.originalIndex]), 1),
+                  W.value?.[s.originalIndex] ? (n(), d("p", Xe, G(W.value[s.originalIndex]), 1)) : c("", !0)
+                ], 2)) : c("", !0),
+                b("div", {
+                  class: m(["form-group-body", [e.groupBodyClass, N.value.length > 1 ? "p-4.5" : ""]])
                 }, [
-                  F(W, {
+                  k(j, {
                     schema: s.schema,
-                    values: l(v),
-                    errors: l(p),
-                    fieldLoading: l(q),
-                    variant: L.value,
-                    size: N.value,
-                    rounded: D.value,
+                    values: t(v),
+                    errors: t(p),
+                    fieldLoading: t(B),
+                    variant: P.value,
+                    size: V.value,
+                    rounded: L.value,
                     className: e.className,
                     isUpdate: e.isUpdate,
-                    showRequiredAsterisk: K.value,
-                    isFieldVisible: l(U),
-                    isFieldDisabled: l(V),
-                    isFieldReadonly: l(G),
-                    excludeTypes: T.value ? ["thumbnailSelector"] : [],
-                    onChange: H,
-                    onAddonAction: i[2] || (i[2] = (x) => y("onAddonAction", x))
+                    showRequiredAsterisk: E.value,
+                    isFieldVisible: t(T),
+                    isFieldDisabled: t(U),
+                    isFieldReadonly: t(D),
+                    excludeTypes: A.value ? ["thumbnailSelector"] : [],
+                    onChange: q,
+                    onAddonAction: a[2] || (a[2] = (f) => g("onAddonAction", f))
                   }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes"])
                 ], 2)
               ], 2))), 128))
-            ], 2)) : d.value ? (n(), c("div", Xe, [
-              e.tabs?.[o.value] ? (n(), c("div", {
+            ], 2)) : w.value && !u.value && e.groupLayout === "accordion" ? (n(), d("div", {
+              key: 2,
+              class: m(e.groupContainerClass)
+            }, [
+              k(De, {
+                variant: "solid",
+                items: N.value.map((s) => ({
+                  id: `form-group-${s.originalIndex}`,
+                  title: Q.value?.[s.originalIndex] || "",
+                  description: W.value?.[s.originalIndex] || void 0
+                })),
+                "allow-multiple": "",
+                class: m(e.groupClass)
+              }, {
+                content: ve(({ item: s }) => [
+                  k(j, {
+                    schema: N.value.find((f) => `form-group-${f.originalIndex}` === s.id)?.schema || [],
+                    values: t(v),
+                    errors: t(p),
+                    fieldLoading: t(B),
+                    variant: P.value,
+                    size: V.value,
+                    rounded: L.value,
+                    className: e.className,
+                    isUpdate: e.isUpdate,
+                    showRequiredAsterisk: E.value,
+                    isFieldVisible: t(T),
+                    isFieldDisabled: t(U),
+                    isFieldReadonly: t(D),
+                    excludeTypes: A.value ? ["thumbnailSelector"] : [],
+                    onChange: q,
+                    onAddonAction: a[3] || (a[3] = (f) => g("onAddonAction", f))
+                  }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes"])
+                ]),
+                _: 1
+              }, 8, ["items", "class"])
+            ], 2)) : u.value ? (n(), d("div", Ye, [
+              e.tabs?.[o.value] ? (n(), d("div", {
                 key: 0,
                 class: m(["form-step-header mb-6", e.headerClass])
               }, [
-                g("h2", Ye, B(e.tabs[o.value].title), 1),
-                e.tabs[o.value].description ? (n(), c("p", Ze, B(e.tabs[o.value].description), 1)) : u("", !0)
-              ], 2)) : u("", !0),
-              F(W, {
-                schema: _.value,
-                values: l(v),
-                errors: l(p),
-                fieldLoading: l(q),
-                variant: L.value,
-                size: N.value,
-                rounded: D.value,
+                b("h2", Ze, G(e.tabs[o.value].title), 1),
+                e.tabs[o.value].description ? (n(), d("p", _e, G(e.tabs[o.value].description), 1)) : c("", !0)
+              ], 2)) : c("", !0),
+              k(j, {
+                schema: te.value,
+                values: t(v),
+                errors: t(p),
+                fieldLoading: t(B),
+                variant: P.value,
+                size: V.value,
+                rounded: L.value,
                 className: e.className,
                 isUpdate: e.isUpdate,
-                showRequiredAsterisk: K.value,
-                isFieldVisible: l(U),
-                isFieldDisabled: l(V),
-                isFieldReadonly: l(G),
-                excludeTypes: T.value ? ["thumbnailSelector"] : [],
-                onChange: H,
-                onAddonAction: i[3] || (i[3] = (s) => y("onAddonAction", s))
+                showRequiredAsterisk: E.value,
+                isFieldVisible: t(T),
+                isFieldDisabled: t(U),
+                isFieldReadonly: t(D),
+                excludeTypes: A.value ? ["thumbnailSelector"] : [],
+                onChange: q,
+                onAddonAction: a[4] || (a[4] = (s) => g("onAddonAction", s))
               }, null, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes"])
-            ])) : u("", !0) : (n(), c("div", Oe, [
-              F(W, {
+            ])) : c("", !0) : (n(), d("div", Je, [
+              k(j, {
                 schema: e.schema,
-                values: l(v),
-                errors: l(p),
-                fieldLoading: l(q),
-                variant: L.value,
-                size: N.value,
-                rounded: D.value,
+                values: t(v),
+                errors: t(p),
+                fieldLoading: t(B),
+                variant: P.value,
+                size: V.value,
+                rounded: L.value,
                 className: e.className,
                 isUpdate: e.isUpdate,
-                showRequiredAsterisk: K.value,
-                isFieldVisible: l(U),
-                isFieldDisabled: l(V),
-                isFieldReadonly: l(G),
-                excludeTypes: T.value ? ["thumbnailSelector"] : [],
-                layout: t.layout,
-                onChange: H,
-                onAddonAction: i[1] || (i[1] = (s) => y("onAddonAction", s))
+                showRequiredAsterisk: E.value,
+                isFieldVisible: t(T),
+                isFieldDisabled: t(U),
+                isFieldReadonly: t(D),
+                excludeTypes: A.value ? ["thumbnailSelector"] : [],
+                layout: l.layout,
+                onChange: q,
+                onAddonAction: a[1] || (a[1] = (s) => g("onAddonAction", s))
               }, {
-                default: Ve(() => [
-                  t.layout === "inline" && e.footer ? (n(), c("div", Je, [
-                    X.value ? (n(), C(S, {
+                default: ve(() => [
+                  l.layout === "inline" && e.footer ? (n(), d("div", Qe, [
+                    Z.value ? (n(), F(S, {
                       key: 0,
                       type: "button",
                       variant: "outline",
                       text: e.cancelText,
-                      disabled: e.loading || l(b),
+                      disabled: e.loading || t(x),
                       onClick: re
-                    }, null, 8, ["text", "disabled"])) : u("", !0),
-                    F(S, z({
+                    }, null, 8, ["text", "disabled"])) : c("", !0),
+                    k(S, $({
                       type: "submit",
                       variant: "primary",
                       text: e.submitText
                     }, e.submitProps, {
-                      loading: e.loading || l(b)
+                      loading: e.loading || t(x)
                     }), null, 16, ["text", "loading"])
-                  ])) : u("", !0)
+                  ])) : c("", !0)
                 ]),
                 _: 1
               }, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes", "layout"])
             ])),
-            me(a.$slots, "default", {
-              values: l(v),
-              errors: l(p),
-              isSubmitting: l(b),
-              handleSubmit: k
+            me(i.$slots, "default", {
+              values: t(v),
+              errors: t(p),
+              isSubmitting: t(x),
+              handleSubmit: C
             }, void 0, !0)
           ], 2)
         ], 2)),
-        g("div", {
+        b("div", {
           ref_key: "sentinelRef",
-          ref: M,
+          ref: O,
           class: "form-scroll-sentinel h-px w-full",
           "aria-hidden": "true"
         }, null, 512)
       ], 2),
-      e.footer && !e.schemaLoading && t.layout !== "inline" ? (n(), c("div", {
+      e.footer && !e.schemaLoading && l.layout !== "inline" ? (n(), d("div", {
         key: 2,
         ref_key: "footerRef",
-        ref: he,
+        ref: be,
         class: m([
           "form-footer items-center gap-3 z-20 rounded-b-md!",
           e.isPage ? "flex sm:hidden" : "flex",
           e.footerClass,
-          d.value ? "justify-between" : "justify-end",
+          u.value ? "justify-between" : "justify-end",
           // Sticky footer: always applied when inside a modal or when stickyFooter prop is set.
           // `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).
-          P.value ? "sticky bottom-0 bg-body pt-3 pb-3 -mx-0.5 px-0.5 mt-6 border-t border-border/75" : t.layout !== "inline" ? "mt-6" : "",
+          I.value ? "sticky bottom-0 bg-body pt-3 pb-3 -mx-0.5 px-0.5 mt-6 border-t border-border/75" : l.layout !== "inline" ? "mt-6" : "",
           // Show a subtle top shadow while content is scrolling beneath the sticky footer
-          (P.value && Y.value, ""),
+          (I.value && _.value, ""),
           // Inside modal: extend footer flush to modal edge padding
-          w.value && t.layout !== "inline" ? "-mx-4 px-4 pb-3! mt-7.5!" : "",
+          R.value && l.layout !== "inline" ? "-mx-4 px-4 pb-3! mt-7.5!" : "",
           // Non-sticky inside modal keeps the original border styling
-          !P.value && w.value && t.layout !== "inline" ? "border-t border-border/75 mt-5" : "",
-          !P.value && !w.value && t.layout !== "inline" ? "mt-6" : "",
-          t.layout === "inline" ? "mt-0 shrink-0" : ""
+          !I.value && R.value && l.layout !== "inline" ? "border-t border-border/75 mt-5" : "",
+          !I.value && !R.value && l.layout !== "inline" ? "mt-6" : "",
+          l.layout === "inline" ? "mt-0 shrink-0" : ""
         ])
       }, [
-        g("div", _e, [
-          X.value ? (n(), C(S, {
+        b("div", et, [
+          Z.value ? (n(), F(S, {
             key: 0,
             type: "button",
             variant: "outline",
             text: e.cancelText,
-            disabled: e.loading || l(b),
+            disabled: e.loading || t(x),
             onClick: re
-          }, null, 8, ["text", "disabled"])) : u("", !0),
-          d.value && e.isUpdate && !$.value ? (n(), C(S, z({
+          }, null, 8, ["text", "disabled"])) : c("", !0),
+          u.value && e.isUpdate && !K.value ? (n(), F(S, $({
             key: 1,
             type: "button",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || l(b),
-            onClick: k
-          }), null, 16, ["text", "loading"])) : u("", !0)
+            loading: e.loading || t(x),
+            onClick: C
+          }), null, 16, ["text", "loading"])) : c("", !0)
         ]),
-        g("div", {
-          class: m(["flex gap-3 items-center", d.value && "ml-auto"])
+        b("div", {
+          class: m(["flex gap-3 items-center", u.value && "ml-auto"])
         }, [
-          d.value && se.value ? (n(), C(S, {
+          u.value && se.value ? (n(), F(S, {
             key: 0,
             type: "button",
             variant: "outline",
             icon: "lucide:arrow-left",
             text: "Previous",
-            onClick: we
-          })) : u("", !0),
-          d.value && !$.value ? (n(), C(S, {
+            onClick: Ae
+          })) : c("", !0),
+          u.value && !K.value ? (n(), F(S, {
             key: 1,
             type: "button",
             variant: e.isUpdate ? "outline" : "primary",
             text: "Next",
             iconRight: "lucide:arrow-right",
             onClick: ne
-          }, null, 8, ["variant"])) : u("", !0),
-          !d.value || $.value ? (n(), C(S, z({
+          }, null, 8, ["variant"])) : c("", !0),
+          !u.value || K.value ? (n(), F(S, $({
             key: 2,
             type: "submit",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || l(b)
-          }), null, 16, ["text", "loading"])) : u("", !0)
+            loading: e.loading || t(x)
+          }), null, 16, ["text", "loading"])) : c("", !0)
         ], 2)
-      ], 2)) : u("", !0)
-    ], 42, Ee));
+      ], 2)) : c("", !0)
+    ], 42, Ke));
   }
 });
 export {
-  mt as default
+  ft as default
 };