vlite3 0.8.2 → 0.8.3

package/components/Form/Form.vue2.js

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

package/components/Form/types.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue';
-import { IDropdownOptions, InputVariant, InputSize, InputRounded } from '../../types';
+import { IDropdownOptions, InputVariant, InputSize, InputRounded, ButtonProps } from '../../types';
 /**
  * Addon configuration for input field addons (left/right)
  * Allows rendering dropdowns or buttons inside input addons from schema
@@ -193,6 +193,18 @@ export interface IFormProps {
     footerClass?: string;
     /** Fields to explicitly include in the submit payload (e.g., ['__typename', 'id']) */
     emitFields?: string[];
+    /** Enable full-page layout mode */
+    isPage?: boolean;
+    /** Title for the page mode header */
+    pageTitle?: string;
+    /** I18n key for the page title */
+    pageTitleI18n?: string;
+    /** Custom CSS class for the page title */
+    pageTitleClass?: string;
+    /** Custom CSS class for the page header container */
+    pageHeaderClass?: string;
+    /** Props to pass to the back button in page mode */
+    backButtonProps?: ButtonProps;
 }
 /**
  * Form submit payload

package/components/Modal.vue.js

@@ -1,7 +1,7 @@
 import o from "./Modal.vue2.js";
 /* empty css           */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-537da95f"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7572bc5b"]]);
 export {
-  m as default
+  p as default
 };