@evanschleret/formforgeclient 1.2.4 → 2.0.0

package/dist/runtime/renderers/default/FormForgeRenderer.vue

@@ -1,25 +1,23 @@
 <script setup>
 import { computed, ref, useTemplateRef, watch } from "#imports";
-import { getLocalTimeZone, parseAbsoluteToLocal, parseDate, parseDateTime, parseTime } from "@internationalized/date";
-import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
-import UCheckboxGroup from "@nuxt/ui/components/CheckboxGroup.vue";
-import UFileUpload from "@nuxt/ui/components/FileUpload.vue";
+import { parseDate, parseTime } from "@internationalized/date";
 import UInput from "@nuxt/ui/components/Input.vue";
-import UInputDate from "@nuxt/ui/components/InputDate.vue";
-import UInputNumber from "@nuxt/ui/components/InputNumber.vue";
-import UInputTime from "@nuxt/ui/components/InputTime.vue";
 import UProgress from "@nuxt/ui/components/Progress.vue";
-import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
-import USelect from "@nuxt/ui/components/Select.vue";
-import USelectMenu from "@nuxt/ui/components/SelectMenu.vue";
-import UStepper from "@nuxt/ui/components/Stepper.vue";
-import USwitch from "@nuxt/ui/components/Switch.vue";
-import UTextarea from "@nuxt/ui/components/Textarea.vue";
 import { isFormForgeJsonObject } from "../../utils/object";
+import { createDefaultAddressFields } from "../../utils/defaults";
+import { resolveTemporalMode } from "../../utils/temporal";
 import { sanitizePayloadWithSchema } from "../../utils/renderer-payload";
 import { useFormForgeForm } from "../../composables/useFormForgeForm";
 import { useFormForgeI18n } from "../../composables/useFormForgeI18n";
 import { useFormForgeSubmit } from "../../composables/useFormForgeSubmit";
+import { createFormForgeZodSchema } from "../../validation/zod";
+import {
+  evaluatePageLogicRule,
+  getPageLogic,
+  resolvePageLogicJumpTarget
+} from "../../utils/page-logic";
+import FormForgeRendererField from "./FormForgeRendererField.vue";
+import FormForgeRendererPage from "./FormForgeRendererPage.vue";
 const props = defineProps({
   schema: { type: Object, required: false, default: void 0 },
   modelValue: { type: Object, required: false, default: void 0 },
@@ -37,12 +35,12 @@ const props = defineProps({
   uploadMode: { type: String, required: false, default: void 0 },
   clearAfterSubmit: { type: Boolean, required: false, default: false },
   showProgress: { type: Boolean, required: false, default: false },
-  progressVariant: { type: String, required: false, default: "stepper" },
   showAlertOnError: { type: Boolean, required: false, default: false },
   validateOn: { type: Array, required: false, default: void 0 },
-  validateOnBlur: { type: Boolean, required: false, default: void 0 }
+  validateOnBlur: { type: Boolean, required: false, default: void 0 },
+  previewPageKey: { type: [String, null], required: false, default: null }
 });
-const { t } = useFormForgeI18n({
+const { t, locale } = useFormForgeI18n({
   locale: () => props.clientConfig?.locale
 });
 const emit = defineEmits(["update:modelValue", "submit", "submitted", "error"]);
@@ -106,7 +104,7 @@ const internalSubmit = useFormForgeSubmit({
   key: internalFormKey.value === "" ? "__missing_form_key__" : internalFormKey.value,
   version: props.formVersion,
   endpoint: props.endpoint,
-  schema: () => internalForm.schema.value,
+  schema: () => getResolvedSchema(),
   state: () => internalForm.state.value,
   clientConfig: props.clientConfig
 });
@@ -134,7 +132,13 @@ function getResolvedSchema() {
 }
 function getResolvedZodSchema() {
   if (usesExternalSchema.value) {
-    return unwrapZodSchemaProp(props.zodSchema);
+    const schema = unwrapSchemaProp(props.schema);
+    if (schema === null) {
+      return void 0;
+    }
+    return unwrapZodSchemaProp(props.zodSchema) ?? createFormForgeZodSchema(schema, {
+      locale: locale.value
+    });
   }
   return internalForm.zodSchema.value;
 }
@@ -160,6 +164,32 @@ const formState = computed({
     internalForm.replaceState(value);
   }
 });
+const submissionCode = ref("");
+const isPreviewMode = computed(() => {
+  return typeof props.previewPageKey === "string" && props.previewPageKey.trim() !== "";
+});
+const requiresSubmissionCode = computed(() => {
+  const schema = getResolvedSchema();
+  if (schema === null) {
+    return false;
+  }
+  return schema.submission_code_required === true;
+});
+const availabilityAlert = computed(() => {
+  const schema = getResolvedSchema();
+  if (schema === null) {
+    return null;
+  }
+  const publishAt = typeof schema.publish_at === "string" ? Date.parse(schema.publish_at) : Number.NaN;
+  if (!Number.isNaN(publishAt) && publishAt > Date.now()) {
+    return t("renderer.formNotAvailableYet");
+  }
+  const pauseAt = typeof schema.pause_at === "string" ? Date.parse(schema.pause_at) : Number.NaN;
+  if (!Number.isNaN(pauseAt) && pauseAt <= Date.now()) {
+    return t("renderer.formPaused");
+  }
+  return null;
+});
 watch(
   () => [usesExternalModel.value, getResolvedSchema(), unwrapModelValueProp(props.modelValue)],
   ([externalModel, schema, modelValue]) => {
@@ -200,6 +230,26 @@ const displayPages = computed(() => {
     }
   ];
 });
+const previewPage = computed(() => {
+  if (!isPreviewMode.value) {
+    return null;
+  }
+  const pageKey = props.previewPageKey?.trim();
+  if (typeof pageKey !== "string" || pageKey === "") {
+    return displayPages.value[0] ?? null;
+  }
+  return displayPages.value.find((page) => page.page_key === pageKey) ?? displayPages.value[0] ?? null;
+});
+const pageLogicByKey = computed(() => {
+  const map = {};
+  for (const page of displayPages.value) {
+    map[page.page_key] = getPageLogic(page);
+  }
+  return map;
+});
+const hasPageLogicRules = computed(() => {
+  return Object.values(pageLogicByKey.value).some((logic) => logic.rules.length > 0);
+});
 const fieldsByKey = computed(() => {
   const map = {};
   for (const page of displayPages.value) {
@@ -233,7 +283,7 @@ function isEmptyValue(value) {
       const rangeValue = value;
       return isEmptyValue(rangeValue.start) && isEmptyValue(rangeValue.end);
     }
-    return Object.keys(value).length === 0;
+    return Object.values(value).every((entry) => isEmptyValue(entry));
   }
   return false;
 }
@@ -407,7 +457,30 @@ const runtimeConditions = computed(() => {
       };
     }
   }
-  if (schema === null || !Array.isArray(schema.conditions)) {
+  const requiredByLogic = /* @__PURE__ */ new Set();
+  if (schema === null || hasPageLogicRules.value || !Array.isArray(schema.conditions)) {
+    for (const [pageKey, logic] of Object.entries(pageLogicByKey.value)) {
+      const page = displayPages.value.find((item) => item.page_key === pageKey);
+      if (page === void 0) {
+        continue;
+      }
+      for (const rule of logic.rules) {
+        if (!evaluatePageLogicRule(rule, page, (field) => formState.value[field.name])) {
+          continue;
+        }
+        for (const thenAction of rule.then) {
+          if (thenAction.action === "require" && typeof thenAction.field_key === "string" && thenAction.field_key !== "") {
+            requiredByLogic.add(thenAction.field_key);
+          }
+        }
+      }
+    }
+    for (const fieldKey of requiredByLogic) {
+      const fieldState = fieldsState[fieldKey];
+      if (fieldState !== void 0) {
+        fieldState.required = true;
+      }
+    }
     return {
       pages: pagesState,
       fields: fieldsState
@@ -479,6 +552,28 @@ const runtimeConditions = computed(() => {
       fieldState.required = true;
     }
   }
+  for (const [pageKey, logic] of Object.entries(pageLogicByKey.value)) {
+    const page = displayPages.value.find((item) => item.page_key === pageKey);
+    if (page === void 0) {
+      continue;
+    }
+    for (const rule of logic.rules) {
+      if (!evaluatePageLogicRule(rule, page, (field) => formState.value[field.name])) {
+        continue;
+      }
+      for (const thenAction of rule.then) {
+        if (thenAction.action === "require" && typeof thenAction.field_key === "string" && thenAction.field_key !== "") {
+          requiredByLogic.add(thenAction.field_key);
+        }
+      }
+    }
+  }
+  for (const fieldKey of requiredByLogic) {
+    const fieldState = fieldsState[fieldKey];
+    if (fieldState !== void 0) {
+      fieldState.required = true;
+    }
+  }
   return {
     pages: pagesState,
     fields: fieldsState
@@ -497,6 +592,26 @@ const pageKeyByFieldName = computed(() => {
   return map;
 });
 const activePageKey = ref(null);
+const isPageTransitioning = ref(false);
+watch(
+  () => [isPreviewMode.value, props.previewPageKey, displayPages.value.map((page) => page.page_key)],
+  ([previewMode, previewPageKey, pageKeys]) => {
+    if (!previewMode) {
+      return;
+    }
+    const pageKey = typeof previewPageKey === "string" ? previewPageKey.trim() : "";
+    if (pageKey !== "" && pageKeys.includes(pageKey)) {
+      activePageKey.value = pageKey;
+      return;
+    }
+    if (pageKeys.length > 0 && (activePageKey.value === null || !pageKeys.includes(activePageKey.value))) {
+      activePageKey.value = pageKeys[0];
+    }
+  },
+  {
+    immediate: true
+  }
+);
 watch(
   () => visiblePages.value.map((page) => page.page_key),
   (pageKeys) => {
@@ -527,17 +642,7 @@ const activePageIndex = computed(() => {
   return index;
 });
 const shouldShowProgress = computed(() => {
-  return props.showProgress && visiblePages.value.length > 1;
-});
-const stepperItems = computed(() => {
-  return visiblePages.value.map((page, index) => ({
-    title: page.title !== "" ? page.title : t("renderer.pageTitle", { index: index + 1 }),
-    description: typeof page.description === "string" && page.description.trim() !== "" ? page.description : void 0,
-    value: index + 1
-  }));
-});
-const pagedMode = computed(() => {
-  return shouldShowProgress.value;
+  return props.showProgress && visiblePages.value.length > 1 && (!isPreviewMode.value || props.simulation);
 });
 const currentVisiblePage = computed(() => {
   if (visiblePages.value.length === 0) {
@@ -546,9 +651,57 @@ const currentVisiblePage = computed(() => {
   const page = visiblePages.value[activePageIndex.value];
   return page ?? null;
 });
+const progressValue = computed(() => {
+  if (visiblePages.value.length === 0) {
+    return 0;
+  }
+  return (activePageIndex.value + 1) / visiblePages.value.length * 100;
+});
+const shouldShowNavigation = computed(() => {
+  return visiblePages.value.length > 1 && (!isPreviewMode.value || props.simulation);
+});
+function resolveNextPageKey() {
+  const currentKey = activePageKey.value;
+  if (currentKey === null) {
+    return null;
+  }
+  const currentDisplayIndex = displayPages.value.findIndex((page) => page.page_key === currentKey);
+  if (currentDisplayIndex < 0) {
+    return null;
+  }
+  const currentPage = displayPages.value[currentDisplayIndex];
+  const logic = pageLogicByKey.value[currentPage.page_key];
+  if (logic !== void 0) {
+    for (const rule of logic.rules) {
+      if (!evaluatePageLogicRule(rule, currentPage, (field) => formState.value[field.name])) {
+        continue;
+      }
+      const gotoTarget = resolvePageLogicJumpTarget(rule, currentDisplayIndex, displayPages.value.length);
+      if (gotoTarget !== null) {
+        const targetPage = displayPages.value[gotoTarget];
+        if (targetPage !== void 0 && isPageVisible(targetPage)) {
+          return targetPage.page_key;
+        }
+      }
+    }
+  }
+  for (let index = currentDisplayIndex + 1; index < displayPages.value.length; index += 1) {
+    const page = displayPages.value[index];
+    if (page !== void 0 && isPageVisible(page)) {
+      return page.page_key;
+    }
+  }
+  return null;
+}
 const renderedPages = computed(() => {
-  if (!pagedMode.value) {
-    return visiblePages.value;
+  if (isPreviewMode.value && props.simulation) {
+    if (currentVisiblePage.value !== null) {
+      return [currentVisiblePage.value];
+    }
+    return [];
+  }
+  if (previewPage.value !== null) {
+    return [previewPage.value];
   }
   if (currentVisiblePage.value === null) {
     return [];
@@ -559,14 +712,21 @@ const canGoPrev = computed(() => {
   return activePageIndex.value > 0;
 });
 const canGoNext = computed(() => {
-  return activePageIndex.value < visiblePages.value.length - 1;
+  return resolveNextPageKey() !== null;
 });
 const isLastVisiblePage = computed(() => {
-  return visiblePages.value.length > 0 && activePageIndex.value === visiblePages.value.length - 1;
+  return resolveNextPageKey() === null;
 });
 const shouldShowErrorAlert = computed(() => {
   return props.showAlertOnError && rendererErrors.value.length > 0;
 });
+function filterErrorsByFieldNames(errors, fieldNames) {
+  if (fieldNames.length === 0) {
+    return errors;
+  }
+  const fieldNameSet = new Set(fieldNames);
+  return errors.filter((error) => typeof error.name === "string" && fieldNameSet.has(error.name));
+}
 const resolvedSubmitLabel = computed(() => {
   if (typeof props.submitLabel === "string" && props.submitLabel.trim() !== "") {
     return props.submitLabel;
@@ -595,6 +755,9 @@ function isFieldVisible(field) {
   return runtimeField.visible;
 }
 function isFieldRequired(field) {
+  if (field.type === "address") {
+    return addressFieldDefinitions(field).some((addressField) => addressField.visible && addressField.required);
+  }
   const runtimeField = runtimeConditions.value.fields[field.field_key];
   if (runtimeField === void 0) {
     return field.required === true;
@@ -618,23 +781,43 @@ function setActivePageIndex(index) {
   const page = visiblePages.value[safeIndex];
   activePageKey.value = page.page_key;
 }
-function onStepperModelUpdate(value) {
-  if (typeof value !== "number") {
-    return;
-  }
-  setActivePageIndex(value - 1);
-}
-function goToPrevPage() {
+async function goToPrevPage() {
   if (!canGoPrev.value) {
     return;
   }
-  setActivePageIndex(activePageIndex.value - 1);
+  isPageTransitioning.value = true;
+  try {
+    setActivePageIndex(activePageIndex.value - 1);
+  } finally {
+    await Promise.resolve();
+    isPageTransitioning.value = false;
+  }
 }
-function goToNextPage() {
-  if (!canGoNext.value) {
-    return;
+async function goToNextPage() {
+  isPageTransitioning.value = true;
+  try {
+    const currentPage = currentVisiblePage.value;
+    if (currentPage !== null) {
+      const fieldNames = currentPage.fields.map((field) => field.name).filter((fieldName) => fieldName.trim() !== "");
+      if (fieldNames.length > 0) {
+        const isValid = await validateForm({
+          name: fieldNames,
+          nested: true
+        });
+        if (!isValid) {
+          return;
+        }
+      }
+    }
+    const nextPageKey = resolveNextPageKey();
+    if (nextPageKey === null) {
+      return;
+    }
+    setActivePage(nextPageKey);
+  } finally {
+    await Promise.resolve();
+    isPageTransitioning.value = false;
   }
-  setActivePageIndex(activePageIndex.value + 1);
 }
 function resolvePageIndexByFieldName(fieldName) {
   const pageKey = pageKeyByFieldName.value[fieldName];
@@ -671,7 +854,18 @@ async function validateForm(options = {}) {
     return true;
   }
   try {
-    await formInstance.validate(options);
+    const result = await formInstance.validate(options);
+    if (result === false) {
+      const requestedFieldNames = Array.isArray(options.name) ? options.name : typeof options.name === "string" ? [options.name] : [];
+      const errors = filterErrorsByFieldNames(formInstance.getErrors(), requestedFieldNames);
+      rendererErrors.value = errors.map((error) => ({
+        id: error.id,
+        name: error.name,
+        message: error.message
+      }));
+      navigateToFirstErrorPage(rendererErrors.value);
+      return false;
+    }
     rendererErrors.value = [];
     return true;
   } catch {
@@ -715,7 +909,7 @@ const shouldValidateFieldOnBlur = computed(() => {
   return usesExternalModel.value;
 });
 function onFieldBlur(fieldName) {
-  if (!shouldValidateFieldOnBlur.value) {
+  if (!shouldValidateFieldOnBlur.value || isPageTransitioning.value) {
     return;
   }
   validateField(fieldName).catch(() => {
@@ -727,81 +921,33 @@ defineExpose({
   clearErrors,
   getErrors
 });
-function hasDateMethod(value) {
-  if (value === null || Array.isArray(value) || typeof value !== "object") {
-    return false;
-  }
-  return typeof value.toDate === "function";
-}
 function hasToStringMethod(value) {
   if (value === null || Array.isArray(value) || typeof value !== "object") {
     return false;
   }
   return typeof value.toString === "function";
 }
-function isRangeInput(value) {
-  if (value === null || Array.isArray(value) || typeof value !== "object") {
-    return false;
-  }
-  return "start" in value && "end" in value;
-}
 function isFileValue(value) {
   if (typeof File === "undefined") {
     return false;
   }
   return value instanceof File;
 }
-function stripDatetimeOffset(value) {
-  if (value.endsWith("Z")) {
-    return value.slice(0, -1);
-  }
-  const match = value.match(/^(.*)([+-]\d{2}:\d{2})$/);
-  if (match === null) {
-    return value;
-  }
-  return match[1];
-}
-function formatTwoDigits(value) {
-  return String(value).padStart(2, "0");
-}
-function serializeDateWithOffset(date) {
-  const year = date.getFullYear();
-  const month = formatTwoDigits(date.getMonth() + 1);
-  const day = formatTwoDigits(date.getDate());
-  const hours = formatTwoDigits(date.getHours());
-  const minutes = formatTwoDigits(date.getMinutes());
-  const seconds = formatTwoDigits(date.getSeconds());
-  const offsetMinutes = -date.getTimezoneOffset();
-  const sign = offsetMinutes >= 0 ? "+" : "-";
-  const absoluteOffset = Math.abs(offsetMinutes);
-  const offsetHours = formatTwoDigits(Math.floor(absoluteOffset / 60));
-  const offsetRemainder = formatTwoDigits(absoluteOffset % 60);
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${sign}${offsetHours}:${offsetRemainder}`;
-}
-function serializeDateAsUtc(date) {
-  return date.toISOString().replace(".000Z", "Z");
-}
-function parseSingleDateValue(type, value) {
+function parseSingleDateValue(mode, value) {
   try {
-    if (type === "date") {
+    if (mode === "date") {
       return parseDate(value);
     }
-    if (type === "time") {
+    if (mode === "time") {
       return parseTime(value);
     }
-    if (type === "datetime") {
-      if (value.endsWith("Z") || /[+-]\d{2}:\d{2}$/.test(value)) {
-        return parseAbsoluteToLocal(value);
-      }
-      return parseDateTime(stripDatetimeOffset(value));
-    }
   } catch {
     return null;
   }
   return null;
 }
-function serializeSingleDateValue(type, value, mode) {
-  if (type === "date" || type === "time") {
+function serializeSingleDateValue(mode, value) {
+  if (mode === "date" || mode === "time") {
     if (hasToStringMethod(value)) {
       return value.toString();
     }
@@ -810,60 +956,32 @@ function serializeSingleDateValue(type, value, mode) {
     }
     return null;
   }
-  if (type === "datetime") {
-    if (hasDateMethod(value)) {
-      const date = value.toDate(getLocalTimeZone());
-      return mode === "utc" ? serializeDateAsUtc(date) : serializeDateWithOffset(date);
-    }
-    if (typeof value === "string") {
-      return value;
-    }
-    return null;
-  }
   return null;
 }
-function parseRangeValue(type, value) {
-  if (value === null || Array.isArray(value) || typeof value !== "object") {
-    return null;
+function choiceDisplayValue(field) {
+  if (field.display === "list" || field.display === "menu") {
+    return field.display;
   }
-  const rangeValue = value;
-  const startValue = rangeValue.start;
-  const endValue = rangeValue.end;
-  const parsedStart = typeof startValue === "string" ? parseSingleDateValue(type === "date_range" ? "date" : "datetime", startValue) : null;
-  const parsedEnd = typeof endValue === "string" ? parseSingleDateValue(type === "date_range" ? "date" : "datetime", endValue) : null;
-  return {
-    start: parsedStart,
-    end: parsedEnd
-  };
-}
-function serializeRangeValue(type, value) {
-  if (!isRangeInput(value)) {
-    return {
-      start: null,
-      end: null
-    };
+  if (field.type === "radio" || field.type === "checkbox_group") {
+    return "list";
   }
-  const startValue = serializeSingleDateValue(type === "date_range" ? "date" : "datetime", value.start, props.datetimeMode);
-  const endValue = serializeSingleDateValue(type === "date_range" ? "date" : "datetime", value.end, props.datetimeMode);
-  return {
-    start: startValue,
-    end: endValue
-  };
+  return "menu";
 }
 function normalizeSelectOptions(options) {
   if (options === void 0) {
     return [];
   }
   const items = [];
-  for (const option of options) {
+  for (const [index, option] of options.entries()) {
     if (typeof option === "string" || typeof option === "number" || typeof option === "boolean" || option === null) {
+      const primitiveLabel = option === null ? "" : String(option);
       items.push({
-        label: String(option ?? ""),
+        label: primitiveLabel.trim() === "" ? `Option ${index + 1}` : primitiveLabel,
         value: option
       });
       continue;
     }
-    const label = typeof option.label === "string" ? option.label : String(option.value ?? "");
+    const label = typeof option.label === "string" && option.label.trim() !== "" ? option.label : `Option ${index + 1}`;
     items.push({
       label,
       value: option.value,
@@ -902,6 +1020,15 @@ function getResolvedFormFieldUi(field) {
 function getFieldValue(field) {
   return formState.value[field.name];
 }
+function addressFieldDefinitions(field) {
+  if (field.type !== "address") {
+    return [];
+  }
+  if (!Array.isArray(field.address_fields) || field.address_fields.length === 0) {
+    return createDefaultAddressFields(locale.value);
+  }
+  return field.address_fields;
+}
 function setFieldValue(fieldName, value) {
   formState.value = {
     ...formState.value,
@@ -910,21 +1037,29 @@ function setFieldValue(fieldName, value) {
 }
 function getComponentModelValue(field) {
   const value = getFieldValue(field);
-  if (field.type === "date" || field.type === "time" || field.type === "datetime") {
+  const temporalMode = resolveTemporalMode(field);
+  if (field.type === "temporal" || field.type === "date" || field.type === "time") {
     if (typeof value === "string") {
-      return parseSingleDateValue(field.type, value);
+      return parseSingleDateValue(temporalMode, value);
     }
     return null;
   }
-  if (field.type === "date_range" || field.type === "datetime_range") {
-    return parseRangeValue(field.type, value);
-  }
-  if (field.type === "checkbox" || field.type === "switch") {
+  if (field.type === "checkbox" || field.type === "consent" || field.type === "switch") {
     return typeof value === "boolean" ? value : false;
   }
   if (field.type === "checkbox_group") {
     return Array.isArray(value) ? value : [];
   }
+  if (field.type === "address") {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      return value;
+    }
+    const nextValue = {};
+    for (const addressField of addressFieldDefinitions(field)) {
+      nextValue[addressField.key] = null;
+    }
+    return nextValue;
+  }
   if (field.type === "file") {
     if (field.multiple === true) {
       if (Array.isArray(value)) {
@@ -965,14 +1100,15 @@ function getComponentProps(field, page) {
     componentProps.max = field.max ?? void 0;
     componentProps.step = field.step ?? void 0;
   }
+  if (field.type === "consent") {
+    componentProps.label = field.consent_label ?? field.label ?? "";
+    componentProps.required = false;
+  }
   if (field.type === "select" || field.type === "select_menu" || field.type === "radio" || field.type === "checkbox_group") {
     componentProps.items = normalizeSelectOptions(field.options);
-  }
-  if (field.type === "date_range" || field.type === "datetime_range") {
-    componentProps.range = true;
-  }
-  if (field.type === "datetime" || field.type === "datetime_range") {
-    componentProps.granularity = "second";
+    if (field.type === "checkbox_group" && choiceDisplayValue(field) === "menu") {
+      componentProps.multiple = true;
+    }
   }
   if (field.type === "file") {
     componentProps.multiple = field.multiple === true;
@@ -987,12 +1123,9 @@ function getComponentProps(field, page) {
   return componentProps;
 }
 function onFieldUpdate(field, value) {
-  if (field.type === "date" || field.type === "time" || field.type === "datetime") {
-    setFieldValue(field.name, serializeSingleDateValue(field.type, value, props.datetimeMode));
-    return;
-  }
-  if (field.type === "date_range" || field.type === "datetime_range") {
-    setFieldValue(field.name, serializeRangeValue(field.type, value));
+  const temporalMode = resolveTemporalMode(field);
+  if (field.type === "temporal" || field.type === "date" || field.type === "time") {
+    setFieldValue(field.name, serializeSingleDateValue(temporalMode, value));
     return;
   }
   setFieldValue(field.name, value);
@@ -1017,7 +1150,8 @@ async function onSubmit() {
     const response = await internalSubmit.submit({
       test: props.simulation,
       version: props.formVersion,
-      mode: props.uploadMode
+      mode: props.uploadMode,
+      meta: requiresSubmissionCode.value ? { submission_code: submissionCode.value } : submissionCode.value.trim() !== "" ? { submission_code: submissionCode.value } : void 0
     });
     submittedResponse.value = response;
     if (props.clearAfterSubmit) {
@@ -1058,20 +1192,10 @@ async function onSubmit() {
     @error="onFormError"
   >
     <div class="space-y-6">
-      <UStepper
-        v-if="shouldShowProgress && progressVariant === 'stepper'"
-        class="w-full"
-        :items="stepperItems"
-        :model-value="activePageIndex + 1"
-        :linear="false"
-        @update:model-value="onStepperModelUpdate"
-      />
-
       <UProgress
-        v-if="shouldShowProgress && progressVariant === 'progress'"
-        :model-value="activePageIndex + 1"
-        :max="visiblePages.length"
-        status
+        v-if="shouldShowProgress"
+        :model-value="progressValue"
+        :max="100"
       />
 
       <UAlert
@@ -1123,132 +1247,54 @@ async function onSubmit() {
         :title="t('renderer.alert.submitted')"
       />
 
-      <section
+      <UAlert
+        v-if="availabilityAlert !== null"
+        color="warning"
+        variant="soft"
+        :title="availabilityAlert"
+      />
+
+      <div
+        v-if="requiresSubmissionCode"
+        class="space-y-2 rounded-xl border border-muted bg-elevated/40 p-4"
+      >
+        <p class="text-sm font-medium text-default">
+          {{ t("renderer.submissionCodeLabel") }}
+        </p>
+        <UInput
+          v-model="submissionCode"
+          type="password"
+          autocomplete="one-time-code"
+          :placeholder="t('renderer.submissionCodePlaceholder')"
+        />
+      </div>
+
+      <FormForgeRendererPage
         v-for="page in renderedPages"
         :key="page.page_key"
+        :page="page"
         class="space-y-4"
         @focusin="setActivePage(page.page_key)"
         @pointerdown="setActivePage(page.page_key)"
       >
-        <div
-          v-if="page.title !== '' || typeof page.description === 'string' && page.description !== ''"
-          class="space-y-1"
-        >
-          <h3
-            v-if="page.title !== ''"
-            class="text-base font-semibold text-default"
-          >
-            {{ page.title }}
-          </h3>
-          <p
-            v-if="typeof page.description === 'string' && page.description !== ''"
-            class="text-sm text-muted"
-          >
-            {{ page.description }}
-          </p>
-        </div>
-
-        <div class="space-y-4">
-          <UFormField
-            v-for="field in page.fields"
-            v-show="isFieldVisible(field)"
-            :key="field.field_key"
-            :name="field.name"
-            :label="field.label"
-            :help="field.help_text"
-            :required="isFieldRequired(field)"
-            :ui="getResolvedFormFieldUi(field)"
-            @focusout="() => onFieldBlur(field.name)"
-          >
-            <UInput
-              v-if="field.type === 'text' || field.type === 'email'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <UTextarea
-              v-else-if="field.type === 'textarea'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <UInputNumber
-              v-else-if="field.type === 'number'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <USelect
-              v-else-if="field.type === 'select'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <USelectMenu
-              v-else-if="field.type === 'select_menu'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <URadioGroup
-              v-else-if="field.type === 'radio'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <UCheckbox
-              v-else-if="field.type === 'checkbox'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <UCheckboxGroup
-              v-else-if="field.type === 'checkbox_group'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <USwitch
-              v-else-if="field.type === 'switch'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <UInputDate
-              v-else-if="field.type === 'date' || field.type === 'datetime' || field.type === 'date_range' || field.type === 'datetime_range'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <UInputTime
-              v-else-if="field.type === 'time'"
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-
-            <UFileUpload
-              v-else
-              :model-value="getLooseModelValue(field)"
-              v-bind="getComponentProps(field, page)"
-              @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
-            />
-          </UFormField>
-        </div>
-      </section>
+        <FormForgeRendererField
+          v-for="field in page.fields"
+          v-show="isFieldVisible(field)"
+          :key="field.field_key"
+          :field="field"
+          :model-value="getLooseModelValue(field)"
+          :component-props="getComponentProps(field, page)"
+          :field-ui="getResolvedFormFieldUi(field)"
+          :address-fields="addressFieldDefinitions(field)"
+          :required="isFieldRequired(field)"
+          :disabled="isFieldDisabled(field, page)"
+          @update:model-value="(nextValue) => onFieldModelUpdate(field, nextValue)"
+          @blur="() => onFieldBlur(field.name)"
+        />
+      </FormForgeRendererPage>
 
       <div
-        v-if="pagedMode"
+        v-if="shouldShowNavigation"
         class="flex items-center justify-between gap-2"
       >
         <UButton
@@ -1271,23 +1317,23 @@ async function onSubmit() {
         </UButton>
 
         <UButton
-          v-else-if="!usesExternalModel && showSubmit"
+          v-else-if="showSubmit"
           type="submit"
           :loading="internalSubmit.submitting.value"
-          :disabled="internalForm.loading.value || getResolvedSchema() === null"
+          :disabled="internalForm.loading.value || getResolvedSchema() === null || availabilityAlert !== null || requiresSubmissionCode && submissionCode.trim() === ''"
         >
           {{ resolvedSubmitLabel }}
         </UButton>
       </div>
 
       <div
-        v-else-if="!usesExternalModel && showSubmit"
+        v-else-if="showSubmit"
         class="flex justify-end"
       >
         <UButton
           type="submit"
           :loading="internalSubmit.submitting.value"
-          :disabled="internalForm.loading.value || getResolvedSchema() === null"
+          :disabled="internalForm.loading.value || getResolvedSchema() === null || availabilityAlert !== null"
         >
           {{ resolvedSubmitLabel }}
         </UButton>
@@ -1295,3 +1341,7 @@ async function onSubmit() {
     </div>
   </UForm>
 </template>
+
+<style scoped>
+.formforge-rich-text :deep(p){margin:.25rem 0}.formforge-rich-text :deep(p:first-child){margin-top:0}.formforge-rich-text :deep(p:last-child){margin-bottom:0}.formforge-rich-text :deep(ol),.formforge-rich-text :deep(ul){margin:.25rem 0;padding-left:1.25rem}.formforge-rich-text :deep(a){text-decoration:underline}
+</style>