@evanschleret/formforgeclient 1.2.4 → 2.0.0

package/dist/runtime/composables/useFormForgeBuilder.js

@@ -1,21 +1,21 @@
-import { computed, ref, watch } from "#imports";
+import { computed, ref, toRaw, watch } from "#imports";
 import { useFormForgeClient } from "./useFormForgeClient.js";
+import { isLegacyTemporalFieldType, isTemporalMode, temporalModeFromFieldType } from "../utils/temporal.js";
+import { createPageLogic, ensurePageLogic } from "../utils/page-logic.js";
+import {
+  createDefaultAddressFields,
+  resolveDefaultAnswerPlaceholder,
+  resolveDefaultConsentLabel,
+  resolveDefaultFieldLabel
+} from "../utils/defaults.js";
 export const FORM_FORGE_BUILDER_FIELD_TYPES = [
   "text",
-  "textarea",
-  "email",
   "number",
-  "select",
-  "select_menu",
   "radio",
-  "checkbox",
+  "consent",
   "checkbox_group",
-  "switch",
-  "date",
-  "time",
-  "datetime",
-  "date_range",
-  "datetime_range",
+  "address",
+  "temporal",
   "file"
 ];
 export const FORM_FORGE_BUILDER_CONDITION_TARGET_TYPES = ["page", "field"];
@@ -38,39 +38,119 @@ export const FORM_FORGE_BUILDER_CONDITION_OPERATORS = [
 function shortKey(prefix) {
   return `${prefix}_${Math.random().toString(36).slice(2, 8)}`;
 }
-function fieldLabelFromType(type) {
-  if (type === "checkbox_group") {
-    return "Checkbox Group";
+function cloneJsonObject(value) {
+  const rawValue = toRaw(value);
+  if (typeof structuredClone === "function") {
+    return structuredClone(rawValue);
   }
-  if (type === "select_menu") {
-    return "Select Menu";
+  return JSON.parse(JSON.stringify(rawValue));
+}
+function cloneJsonValue(value) {
+  const rawValue = toRaw(value);
+  if (typeof structuredClone === "function") {
+    return structuredClone(rawValue);
   }
-  if (type === "date_range") {
-    return "Date Range";
+  return JSON.parse(JSON.stringify(rawValue));
+}
+function isChoiceFieldType(type) {
+  return type === "radio" || type === "checkbox_group";
+}
+function choiceOptionCount(type) {
+  return type === "checkbox_group" ? 3 : 2;
+}
+function minimumChoiceOptionCount(type) {
+  return type === "checkbox_group" ? 2 : 1;
+}
+function createChoiceOptions(type) {
+  const options = [];
+  const count = choiceOptionCount(type);
+  for (let index = 0; index < count; index += 1) {
+    options.push({
+      label: "",
+      value: `option_${index + 1}`
+    });
   }
-  if (type === "datetime_range") {
-    return "Datetime Range";
+  return options;
+}
+function defaultChoiceDisplay(type) {
+  return type === "radio" || type === "checkbox_group" ? "list" : "menu";
+}
+function temporalFieldDefaultMode(type) {
+  if (isLegacyTemporalFieldType(type)) {
+    return temporalModeFromFieldType(type);
   }
-  return type.charAt(0).toUpperCase() + type.slice(1);
+  return "date";
+}
+function createTemporalDefault() {
+  return null;
+}
+function normalizeTemporalField(field) {
+  const rawType = field.type;
+  if (isLegacyTemporalFieldType(field.type)) {
+    field.type = "temporal";
+  }
+  if (field.type !== "temporal") {
+    return;
+  }
+  const resolvedMode = isTemporalMode(field.temporal_mode) ? field.temporal_mode : temporalModeFromFieldType(rawType);
+  field.temporal_mode = resolvedMode;
+  field.hour_cycle = resolvedMode === "time" ? field.hour_cycle === 12 ? 12 : 24 : void 0;
+  field.default = null;
 }
-function createField(type, pageKey) {
+function createAddressValue() {
+  return {
+    line1: null,
+    line2: null,
+    city: null,
+    state: null,
+    zip: null,
+    country: null
+  };
+}
+function createField(type, pageKey, locale) {
   const fieldKey = shortKey("fk");
   const name = fieldKey.replace("fk_", "");
+  const temporalMode = temporalFieldDefaultMode(type);
+  const resolvedType = isLegacyTemporalFieldType(type) ? "temporal" : type;
   const baseField = {
     field_key: fieldKey,
-    type,
+    type: resolvedType,
     name,
     page_key: pageKey,
-    label: fieldLabelFromType(type),
+    label: resolveDefaultFieldLabel(resolvedType, locale, temporalMode),
     required: false,
     nullable: false,
     disabled: false,
     readonly: false,
-    default: null,
+    default: resolvedType === "temporal" ? createTemporalDefault() : null,
     rules: [],
     meta: {},
-    options: type === "select" || type === "select_menu" || type === "radio" || type === "checkbox_group" ? [] : void 0
+    placeholder: type === "text" || type === "number" ? resolveDefaultAnswerPlaceholder(locale) : void 0,
+    options: type === "radio" || type === "checkbox_group" ? [] : void 0
   };
+  if (isChoiceFieldType(type)) {
+    return {
+      ...baseField,
+      options: createChoiceOptions(type),
+      display: defaultChoiceDisplay(type)
+    };
+  }
+  if (type === "consent") {
+    return {
+      ...baseField,
+      type: "consent",
+      consent_label: resolveDefaultConsentLabel(locale)
+    };
+  }
+  if (resolvedType === "temporal") {
+    return {
+      ...baseField,
+      type: "temporal",
+      temporal_mode: temporalMode,
+      hour_cycle: temporalMode === "time" ? 24 : void 0,
+      default: createTemporalDefault()
+    };
+  }
   if (type === "file") {
     return {
       ...baseField,
@@ -79,16 +159,26 @@ function createField(type, pageKey) {
       accept: []
     };
   }
+  if (type === "address") {
+    return {
+      ...baseField,
+      type: "address",
+      default: createAddressValue(),
+      address_fields: createDefaultAddressFields(locale)
+    };
+  }
   return baseField;
 }
-function createPage() {
+function createPage(type = "text", locale) {
   const pageKey = shortKey("pg");
   return {
     page_key: pageKey,
-    title: "Page",
+    title: "",
     description: null,
-    meta: {},
-    fields: [createField("text", pageKey)]
+    meta: {
+      logic: createPageLogic()
+    },
+    fields: [createField(type, pageKey, locale)]
   };
 }
 function createCondition() {
@@ -111,7 +201,11 @@ function cloneField(field) {
   return {
     ...field,
     field_key: shortKey("fk"),
-    name: shortKey("field")
+    name: shortKey("field"),
+    default: cloneJsonValue(field.default),
+    meta: cloneJsonObject(field.meta),
+    options: Array.isArray(field.options) ? cloneJsonValue(field.options) : field.options,
+    address_fields: Array.isArray(field.address_fields) ? cloneJsonValue(field.address_fields) : field.address_fields
   };
 }
 function isUuidLike(value) {
@@ -144,13 +238,28 @@ function resolveMutationIdentifier(draft) {
   }
   return null;
 }
-function sanitizeDraftShape(value) {
+function sanitizeDraftShape(value, locale) {
   if (typeof value.uuid !== "string" || value.uuid === "") {
     value.uuid = null;
   }
   if (typeof value.key !== "string" || value.key === "") {
     value.key = null;
   }
+  if (!Number.isInteger(value.schema_version) || value.schema_version <= 0) {
+    value.schema_version = 2;
+  }
+  if (typeof value.api !== "object" || value.api === null || Array.isArray(value.api)) {
+    value.api = {};
+  }
+  if (typeof value.public_url !== "string") {
+    value.public_url = null;
+  }
+  if (typeof value.submission_code_required !== "boolean") {
+    value.submission_code_required = false;
+  }
+  if (typeof value.submission_code !== "string") {
+    value.submission_code = null;
+  }
   if (value.uuid === null && typeof value.key === "string" && isUuidLike(value.key)) {
     value.uuid = value.key;
   }
@@ -164,8 +273,12 @@ function sanitizeDraftShape(value) {
       page.page_key = shortKey("pg");
     }
     if (typeof page.title !== "string") {
-      page.title = "Page";
+      page.title = "";
+    }
+    if (typeof page.meta !== "object" || page.meta === null || Array.isArray(page.meta)) {
+      page.meta = {};
     }
+    ensurePageLogic(page);
     const fields = (Array.isArray(page.fields) ? page.fields : []).filter((field) => field !== void 0 && field !== null);
     if (fields.length === 0) {
       fields.push(createField("text", page.page_key));
@@ -188,33 +301,74 @@ function sanitizeDraftShape(value) {
       if (typeof field.meta !== "object" || field.meta === null || Array.isArray(field.meta)) {
         field.meta = {};
       }
+      normalizeTemporalField(field);
+      if (isChoiceFieldType(field.type)) {
+        if (!Array.isArray(field.options) || field.options.length === 0) {
+          field.options = createChoiceOptions(field.type);
+        }
+        const minimumOptionCount = minimumChoiceOptionCount(field.type);
+        if (field.options.length < minimumOptionCount) {
+          const nextOptions = [...field.options];
+          for (let index = nextOptions.length; index < minimumOptionCount; index += 1) {
+            nextOptions.push({
+              label: "",
+              value: `option_${index + 1}`
+            });
+          }
+          field.options = nextOptions;
+        }
+        if (field.display !== "list" && field.display !== "menu") {
+          field.display = defaultChoiceDisplay(field.type);
+        }
+      }
+      if (field.type === "consent" && typeof field.consent_label !== "string") {
+        field.consent_label = resolveDefaultConsentLabel(locale);
+      }
+      if (field.type === "address") {
+        if (!Array.isArray(field.address_fields) || field.address_fields.length === 0) {
+          field.address_fields = createDefaultAddressFields(locale);
+        }
+        if (typeof field.default !== "object" || field.default === null || Array.isArray(field.default)) {
+          field.default = createAddressValue();
+        }
+      }
     }
   }
 }
 export function useFormForgeBuilder(options = {}) {
   const client = options.client ?? useFormForgeClient(options.clientConfig);
+  const locale = options.locale ?? options.clientConfig?.locale;
   const autosaveEnabled = ref(options.autosave ?? true);
   const autosaveDelay = ref(options.autosaveDelay ?? 5e3);
+  const autoPublishOnSave = ref(options.autoPublishOnSave ?? false);
   const loading = ref(false);
   const saving = ref(false);
   const publishing = ref(false);
   const error = ref(null);
   const lastSavedAt = ref(null);
-  const defaultPage = createPage();
+  const defaultPage = createPage("text", locale);
   const keyFromOptions = options.formKey ?? options.initial?.key ?? null;
   const uuidFromOptions = options.formUuid ?? options.initial?.uuid ?? null;
   const initialDraft = {
     uuid: uuidFromOptions ?? (typeof keyFromOptions === "string" && isUuidLike(keyFromOptions) ? keyFromOptions : null),
     key: typeof keyFromOptions === "string" && !isUuidLike(keyFromOptions) ? keyFromOptions : options.initial?.key ?? null,
+    schema_version: options.initial?.schema_version ?? 2,
     title: options.initial?.title ?? "",
+    publish_at: options.initial?.publish_at ?? null,
+    pause_at: options.initial?.pause_at ?? null,
+    response_limit: options.initial?.response_limit ?? null,
+    submission_code_required: options.initial?.submission_code_required ?? false,
+    submission_code: options.initial?.submission_code ?? null,
+    public_url: options.initial?.public_url ?? null,
     category: options.initial?.category ?? null,
     pages: options.initial?.pages ?? [defaultPage],
     conditions: options.initial?.conditions ?? [],
     drafts: options.initial?.drafts ?? {
       enabled: true
-    }
+    },
+    api: options.initial?.api ?? {}
   };
-  sanitizeDraftShape(initialDraft);
+  sanitizeDraftShape(initialDraft, locale);
   const draft = ref(initialDraft);
   const publishable = computed(() => {
     const pages = draft.value.pages;
@@ -245,21 +399,30 @@ export function useFormForgeBuilder(options = {}) {
     }
     const input = {
       title: draft.value.title,
+      schema_version: draft.value.schema_version,
+      publish_at: draft.value.publish_at ?? null,
+      pause_at: draft.value.pause_at ?? null,
+      response_limit: draft.value.response_limit ?? null,
+      submission_code_required: draft.value.submission_code_required ?? false,
       category: draft.value.category,
       pages,
       fields,
       conditions: draft.value.conditions,
-      drafts: draft.value.drafts
+      drafts: draft.value.drafts,
+      api: draft.value.api
     };
+    if (draft.value.submission_code_required === true && typeof draft.value.submission_code === "string" && draft.value.submission_code.trim() !== "") {
+      input.submission_code = draft.value.submission_code;
+    }
     if (autoPublish) {
       input.auto_publish = true;
     }
     return input;
   }
   async function save(saveOptions = {}) {
-    const resolvedSaveOptions = typeof saveOptions === "string" ? { idempotencyKey: saveOptions, autoPublish: false } : {
+    const resolvedSaveOptions = typeof saveOptions === "string" ? { idempotencyKey: saveOptions, autoPublish: autoPublishOnSave.value } : {
       idempotencyKey: saveOptions.idempotencyKey,
-      autoPublish: saveOptions.autoPublish === true
+      autoPublish: saveOptions.autoPublish === true || autoPublishOnSave.value === true
     };
     if (draft.value.title.trim() === "") {
       throw new Error("Title is required to save");
@@ -287,6 +450,9 @@ export function useFormForgeBuilder(options = {}) {
         if (nextKey !== null) {
           draft.value.key = nextKey;
         }
+        if (typeof created.public_url === "string") {
+          draft.value.public_url = created.public_url;
+        }
       } else {
         const patchInput = input;
         const patched = await client.patchForm(mutationIdentifier, patchInput, {
@@ -302,6 +468,9 @@ export function useFormForgeBuilder(options = {}) {
         if (nextKey !== null) {
           draft.value.key = nextKey;
         }
+        if (typeof patched.public_url === "string") {
+          draft.value.public_url = patched.public_url;
+        }
       }
       lastSavedAt.value = (/* @__PURE__ */ new Date()).toISOString();
     } catch (caughtError) {
@@ -354,9 +523,11 @@ export function useFormForgeBuilder(options = {}) {
       publishing.value = false;
     }
   }
-  function addPage() {
+  function addPage(type = "text") {
     const pages = draft.value.pages;
-    pages.push(createPage());
+    const page = createPage(type, locale);
+    pages.push(page);
+    return page;
   }
   function removePage(pageKey) {
     const pages = draft.value.pages;
@@ -369,6 +540,39 @@ export function useFormForgeBuilder(options = {}) {
     }
     pages.splice(pageIndex, 1);
   }
+  function movePage(pageKey, direction) {
+    const pages = draft.value.pages;
+    const pageIndex = pages.findIndex((page2) => page2.page_key === pageKey);
+    if (pageIndex < 0) {
+      return;
+    }
+    const nextIndex = pageIndex + direction;
+    if (nextIndex < 0 || nextIndex >= pages.length) {
+      return;
+    }
+    const [page] = pages.splice(pageIndex, 1);
+    pages.splice(nextIndex, 0, page);
+  }
+  function duplicatePage(pageKey) {
+    const pages = draft.value.pages;
+    const pageIndex = pages.findIndex((page2) => page2.page_key === pageKey);
+    if (pageIndex < 0) {
+      return;
+    }
+    const page = pages[pageIndex];
+    const nextPageKey = shortKey("pg");
+    const clonedPage = {
+      ...page,
+      page_key: nextPageKey,
+      meta: cloneJsonObject(page.meta),
+      fields: page.fields.map((field) => {
+        const clonedField = cloneField(field);
+        clonedField.page_key = nextPageKey;
+        return clonedField;
+      })
+    };
+    pages.splice(pageIndex + 1, 0, clonedPage);
+  }
   function mergePageWithPrevious(pageKey) {
     const pages = draft.value.pages;
     if (pages.length <= 1) {
@@ -392,7 +596,21 @@ export function useFormForgeBuilder(options = {}) {
     if (page === void 0) {
       return;
     }
-    page.fields.push(createField(type, pageKey));
+    page.fields.push(createField(type, pageKey, locale));
+  }
+  function insertFieldAfter(pageKey, fieldKey, type) {
+    const pages = draft.value.pages;
+    const page = pages.find((item) => item.page_key === pageKey);
+    if (page === void 0) {
+      return;
+    }
+    const fieldIndex = page.fields.findIndex((item) => item.field_key === fieldKey);
+    const nextField = createField(type, pageKey, locale);
+    if (fieldIndex < 0) {
+      page.fields.push(nextField);
+      return;
+    }
+    page.fields.splice(fieldIndex + 1, 0, nextField);
   }
   function duplicateField(pageKey, fieldKey) {
     const pages = draft.value.pages;
@@ -408,6 +626,38 @@ export function useFormForgeBuilder(options = {}) {
     clonedField.page_key = page.page_key;
     page.fields.push(clonedField);
   }
+  function moveField(pageKey, fieldKey, direction) {
+    const pages = draft.value.pages;
+    const page = pages.find((item) => item.page_key === pageKey);
+    if (page === void 0) {
+      return;
+    }
+    const fieldIndex = page.fields.findIndex((item) => item.field_key === fieldKey);
+    if (fieldIndex < 0) {
+      return;
+    }
+    const nextIndex = fieldIndex + direction;
+    if (nextIndex < 0 || nextIndex >= page.fields.length) {
+      return;
+    }
+    const [field] = page.fields.splice(fieldIndex, 1);
+    page.fields.splice(nextIndex, 0, field);
+  }
+  function moveFieldToPage(pageKey, fieldKey, targetPageKey) {
+    const pages = draft.value.pages;
+    const sourcePage = pages.find((item) => item.page_key === pageKey);
+    const targetPage = pages.find((item) => item.page_key === targetPageKey);
+    if (sourcePage === void 0 || targetPage === void 0) {
+      return;
+    }
+    const fieldIndex = sourcePage.fields.findIndex((item) => item.field_key === fieldKey);
+    if (fieldIndex < 0) {
+      return;
+    }
+    const [field] = sourcePage.fields.splice(fieldIndex, 1);
+    field.page_key = targetPage.page_key;
+    targetPage.fields.push(field);
+  }
   function removeField(pageKey, fieldKey) {
     const pages = draft.value.pages;
     const page = pages.find((item) => item.page_key === pageKey);
@@ -500,13 +750,19 @@ export function useFormForgeBuilder(options = {}) {
     draft,
     autosaveEnabled,
     autosaveDelay,
+    autoPublishOnSave,
     lastSavedAt,
     publishable,
     addPage,
     removePage,
+    movePage,
+    duplicatePage,
     mergePageWithPrevious,
     addField,
+    insertFieldAfter,
     duplicateField,
+    moveField,
+    moveFieldToPage,
     removeField,
     addCondition,
     removeCondition,

package/dist/runtime/composables/useFormForgeForm.js

@@ -1,6 +1,7 @@
 import { ref } from "#imports";
 import { createFormForgeZodSchema } from "../validation/zod.js";
 import { useFormForgeClient } from "./useFormForgeClient.js";
+import { useFormForgeI18n } from "./useFormForgeI18n.js";
 function clonePayload(payload) {
   if (typeof structuredClone === "function") {
     try {
@@ -22,7 +23,7 @@ function createInitialPayload(schema) {
       payload[field.name] = field.default;
       continue;
     }
-    if (field.type === "checkbox" || field.type === "switch") {
+    if (field.type === "checkbox" || field.type === "consent" || field.type === "switch") {
       payload[field.name] = false;
       continue;
     }
@@ -30,10 +31,14 @@ function createInitialPayload(schema) {
       payload[field.name] = [];
       continue;
     }
-    if (field.type === "date_range" || field.type === "datetime_range") {
+    if (field.type === "address") {
       payload[field.name] = {
-        start: null,
-        end: null
+        line1: null,
+        line2: null,
+        city: null,
+        state: null,
+        zip: null,
+        country: null
       };
       continue;
     }
@@ -43,6 +48,9 @@ function createInitialPayload(schema) {
 }
 export function useFormForgeForm(options) {
   const client = options.client ?? useFormForgeClient(options.clientConfig);
+  const { locale } = useFormForgeI18n({
+    locale: () => options.clientConfig?.locale
+  });
   const schema = ref(null);
   const state = ref({});
   const initialState = ref({});
@@ -67,7 +75,9 @@ export function useFormForgeForm(options) {
       schema.value = nextSchema;
       initialState.value = nextState;
       state.value = clonePayload(nextState);
-      zodSchema.value = createFormForgeZodSchema(nextSchema);
+      zodSchema.value = createFormForgeZodSchema(nextSchema, {
+        locale: locale.value
+      });
       initialized.value = true;
       return nextSchema;
     } catch (error) {