vlite3 0.8.2 → 0.8.4

package/components/Form/Form.vue2.js

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

@@ -51,5 +51,16 @@ export declare function isComponent(value: any): boolean;
  * Cleans the submit payload by extracting only schema fields,
  * injecting specified emitFields, and removing ignoreFields recursively.
  * Also processes mapped output and transformation functions.
+ *
+ * KEY BEHAVIOUR (fix for Prisma / Postgres sync on updates):
+ * A field is included in the payload only when:
+ *   1. It has a non-empty value — always included (create & update).
+ *   2. It is empty AND the field key already existed in the original `values`
+ *      object — meaning the user explicitly cleared a pre-existing value during
+ *      an update. In this case the canonical empty value (`[]` for multiSelect,
+ *      `null` for everything else) is sent so the backend overwrites the old data.
+ *
+ * Fields that were never filled in (key absent from `values`) are silently
+ * omitted to keep create payloads lean.
  */
 export declare function cleanSubmitValues(values: Record<string, any>, schema: IForm[] | IForm[][], emitFields?: string[], ignoreFields?: string[]): Record<string, any>;