@evanschleret/formforgeclient 1.1.0 → 1.1.3

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.1.0",
+  "version": "1.1.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -137,12 +137,55 @@ function getResolvedZodSchema() {
   }
   return internalForm.zodSchema.value;
 }
+function resolveSchemaFieldNames(schema) {
+  const names = /* @__PURE__ */ new Set();
+  if (Array.isArray(schema.fields)) {
+    for (const field of schema.fields) {
+      if (typeof field.name === "string" && field.name !== "") {
+        names.add(field.name);
+      }
+    }
+  }
+  if (Array.isArray(schema.pages)) {
+    for (const page of schema.pages) {
+      if (!Array.isArray(page.fields)) {
+        continue;
+      }
+      for (const field of page.fields) {
+        if (typeof field.name === "string" && field.name !== "") {
+          names.add(field.name);
+        }
+      }
+    }
+  }
+  return names;
+}
+function sanitizePayloadWithSchema(value, schema) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return {};
+  }
+  const allowedFieldNames = resolveSchemaFieldNames(schema);
+  const sanitizedPayload = {};
+  for (const [key, entryValue] of Object.entries(value)) {
+    if (!allowedFieldNames.has(key)) {
+      continue;
+    }
+    sanitizedPayload[key] = entryValue;
+  }
+  return sanitizedPayload;
+}
 const formState = computed({
   get: () => {
     const value = usesExternalModel.value ? unwrapModelValueProp(props.modelValue) : internalForm.state.value;
     if (typeof value !== "object" || value === null || Array.isArray(value)) {
       return {};
     }
+    if (usesExternalModel.value) {
+      const schema = getResolvedSchema();
+      if (schema !== null) {
+        return sanitizePayloadWithSchema(value, schema);
+      }
+    }
     return value;
   },
   set: (value) => {
@@ -153,6 +196,23 @@ const formState = computed({
     internalForm.replaceState(value);
   }
 });
+watch(
+  () => [usesExternalModel.value, getResolvedSchema(), unwrapModelValueProp(props.modelValue)],
+  ([externalModel, schema, modelValue]) => {
+    if (!externalModel || schema === null) {
+      return;
+    }
+    const sanitizedValue = sanitizePayloadWithSchema(modelValue, schema);
+    if (areValuesEqual(modelValue, sanitizedValue)) {
+      return;
+    }
+    emit("update:modelValue", sanitizedValue);
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+);
 const displayPages = computed(() => {
   const schema = getResolvedSchema();
   if (schema === null) {
@@ -861,6 +921,20 @@ function getFieldMetaUi(field) {
     component: componentUi
   };
 }
+function mergeUiClass(defaultClass, value) {
+  if (typeof value !== "string" || value.trim() === "") {
+    return defaultClass;
+  }
+  return `${defaultClass} ${value}`;
+}
+function getResolvedFormFieldUi(field) {
+  const metaUi = getFieldMetaUi(field).formField;
+  return {
+    ...metaUi,
+    label: mergeUiClass("text-default", metaUi?.label),
+    help: mergeUiClass("text-muted", metaUi?.help)
+  };
+}
 function getFieldValue(field) {
   return formState.value[field.name];
 }
@@ -1098,7 +1172,7 @@ async function onSubmit() {
         >
           <h3
             v-if="page.title !== ''"
-            class="text-base font-semibold"
+            class="text-base font-semibold text-default"
           >
             {{ page.title }}
           </h3>
@@ -1119,7 +1193,7 @@ async function onSubmit() {
             :label="field.label"
             :help="field.help_text"
             :required="isFieldRequired(field)"
-            :ui="getFieldMetaUi(field).formField"
+            :ui="getResolvedFormFieldUi(field)"
             @focusout="() => onFieldBlur(field.name)"
           >
             <UInput

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

@@ -468,7 +468,7 @@ watch(
   <div class="w-full">
     <p
       v-if="loading"
-      class="text-sm text-neutral-500"
+      class="text-sm text-default"
     >
       {{ t("response.loading") }}
     </p>
@@ -482,7 +482,7 @@ watch(
 
     <p
       v-else-if="responsePages.length === 0"
-      class="text-sm text-neutral-500"
+      class="text-sm text-default"
     >
       {{ t("response.empty") }}
     </p>
@@ -504,12 +504,12 @@ watch(
         class="space-y-4"
       >
         <div class="space-y-1">
-          <h3 class="text-base font-semibold text-neutral-900">
+          <h3 class="text-base font-semibold text-default">
             {{ page.title || t("response.page.fallback", { index: pageIndex + 1 }) }}
           </h3>
           <p
             v-if="typeof page.description === 'string' && page.description.trim() !== ''"
-            class="text-sm text-neutral-500"
+            class="text-sm text-default"
           >
             {{ page.description }}
           </p>
@@ -525,13 +525,13 @@ watch(
               v-if="isLineLayout"
               class="grid grid-cols-1 gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-6"
             >
-              <p class="whitespace-pre-wrap text-sm font-medium text-neutral-900">
+              <p class="whitespace-pre-wrap text-sm font-medium text-default">
                 {{ item.question }}
               </p>
 
               <div
                 v-if="item.answer.kind === 'text'"
-                class="whitespace-pre-wrap text-sm text-neutral-700"
+                class="whitespace-pre-wrap text-sm text-default"
               >
                 {{ item.answer.value }}
               </div>
@@ -561,16 +561,16 @@ watch(
                   <UIcon
                     v-else
                     name="i-lucide-file"
-                    class="h-5 w-5 shrink-0 text-neutral-500"
+                    class="h-5 w-5 shrink-0 text-default"
                   />
 
                   <div class="min-w-0 flex-1">
-                    <p class="truncate text-sm text-neutral-700">
+                    <p class="truncate text-sm text-default">
                       {{ file.name }}
                     </p>
                     <p
                       v-if="file.mimeType"
-                      class="text-xs text-neutral-500"
+                      class="text-xs text-default"
                     >
                       {{ file.mimeType }}
                     </p>
@@ -622,13 +622,13 @@ watch(
               v-else
               class="space-y-1"
             >
-              <p class="whitespace-pre-wrap text-sm font-medium text-neutral-900">
+              <p class="whitespace-pre-wrap text-sm font-medium text-default">
                 {{ item.question }}
               </p>
 
               <p
                 v-if="item.answer.kind === 'text'"
-                class="whitespace-pre-wrap text-sm text-neutral-700"
+                class="whitespace-pre-wrap text-sm text-default"
               >
                 {{ item.answer.value }}
               </p>
@@ -658,16 +658,16 @@ watch(
                   <UIcon
                     v-else
                     name="i-lucide-file"
-                    class="h-5 w-5 shrink-0 text-neutral-500"
+                    class="h-5 w-5 shrink-0 text-default"
                   />
 
                   <div class="min-w-0 flex-1">
-                    <p class="truncate text-sm text-neutral-700">
+                    <p class="truncate text-sm text-default">
                       {{ file.name }}
                     </p>
                     <p
                       v-if="file.mimeType"
-                      class="text-xs text-neutral-500"
+                      class="text-xs text-default"
                     >
                       {{ file.mimeType }}
                     </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evanschleret/formforgeclient",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "Nuxt module and runtime client for FormForge",
   "license": "MIT",
   "type": "module",