@stubber/form-fields 2.2.1 → 2.2.3

package/dist/form-fields/fileserver.js

@@ -16,7 +16,7 @@ export const uploadFiles = async (files, dependencies, file_creation_options) =>
     const headers = {};
     const merged_file_creation_options = merge_with_delete(cloneDeep(dependencies?.file_creation_options) ?? {}, file_creation_options ?? {});
     if (!isEmpty(merged_file_creation_options)) {
-        headers["file-creation-options"] = JSON.stringify(merged_file_creation_options);
+        headers["stubber-file-creation-options"] = JSON.stringify(merged_file_creation_options);
     }
     //send request
     let resJSON;

package/dist/form-fields/sub/array-builder-field.svelte

@@ -18,6 +18,7 @@ import FieldExprToggle from "../FieldExprToggle.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
 import { build_field } from "../utils";
+import { validate_field } from "../validations/validate_field";
 export let fieldStore;
 const new_entry_field = $fieldStore?.params?.new_entry_field || {
   fieldtype: "text"
@@ -79,12 +80,25 @@ const move_value_down = (index) => {
   }
 };
 let open = true;
+$: validate_sub_fields($fieldStore);
+let section_has_errors = false;
+const validate_sub_fields = async (field) => {
+  section_has_errors = false;
+  if (field.sub_fields && field.sub_fields.length > 0) {
+    for (const sub_field of field.sub_fields || []) {
+      const { key, errors } = await validate_field(field.formStore, sub_field);
+      if (errors.length > 0) {
+        section_has_errors = true;
+      }
+    }
+  }
+};
 </script>
 
 <Collapsible.Root bind:open class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
-      <Label>{$fieldStore.label}</Label>
+      <Label class={section_has_errors ? "font-bold text-red-500" : ""}>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <div class="flex items-center">

package/dist/form-fields/sub/section-field.svelte

@@ -7,14 +7,28 @@ import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
 import { Label } from "@stubber/ui/label";
 import FieldExprToggle from "../FieldExprToggle.svelte";
+import { validate_field } from "../validations/validate_field";
 export let fieldStore;
 let open = true;
+$: validate_sub_fields($fieldStore);
+let section_has_errors = false;
+const validate_sub_fields = async (field) => {
+  section_has_errors = false;
+  if (field.sub_fields && field.sub_fields.length > 0) {
+    for (const sub_field of field.sub_fields || []) {
+      const { key, errors } = await validate_field(field.formStore, sub_field);
+      if (errors.length > 0) {
+        section_has_errors = true;
+      }
+    }
+  }
+};
 </script>
 
 <Collapsible.Root bind:open class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
-      <Label>{$fieldStore.label}</Label>
+      <Label class={section_has_errors ? "font-bold text-red-500" : ""}>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <div class="flex items-center">

package/dist/form-fields/sub/select-field.svelte

@@ -112,8 +112,10 @@ onMount(() => {
       variant="outline"
       role="combobox"
       aria-expanded={open}
-      class="flex h-10 w-full justify-between rounded-md border border-input bg-white bg-opacity-[15] px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-10 w-full justify-between rounded-md border border-input bg-white bg-opacity-[15] px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50"
       style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
+      aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+      aria-describedby="message-{$fieldStore.id}"
     >
       {dropdownLabel}
       <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />

package/dist/form-fields/validations/validate_field.js

@@ -29,18 +29,9 @@ export const validate_field = async (formStore, fieldStore) => {
             });
         }
     }
-    // validate sub_fields if they exist (arraybuilder and section fields)
-    if (field.sub_fields && field.sub_fields.length > 0) {
-        for (const sub_field of field.sub_fields || []) {
-            const { key, errors } = await validate_field(formStore, sub_field);
-            if (errors.length > 0) {
-                results.push({ message: `${field.fieldtype} has errors in child fields`, type: "error" });
-            }
-        }
-    }
     const validations = field.validations || [];
     const value = field.value;
-    // console.log(`Validating field: ${field.__key}`, value, validations);
+    // console.log(`Validating field: ${field.key}`, value, validations);
     for (const validation of validations) {
         if (validation.validationtype === "required") {
             required_validation(results, value, validation);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",