@stubber/form-fields 2.2.2 → 2.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,6 +18,7 @@ import FieldExprToggle from "../FieldExprToggle.svelte";
|
|
|
18
18
|
import FieldMessage from "../FieldMessage.svelte";
|
|
19
19
|
import FormField from "../form-field.svelte";
|
|
20
20
|
import { build_field } from "../utils";
|
|
21
|
+
import { validate_field } from "../validations/validate_field";
|
|
21
22
|
export let fieldStore;
|
|
22
23
|
const new_entry_field = $fieldStore?.params?.new_entry_field || {
|
|
23
24
|
fieldtype: "text"
|
|
@@ -79,12 +80,25 @@ const move_value_down = (index) => {
|
|
|
79
80
|
}
|
|
80
81
|
};
|
|
81
82
|
let open = true;
|
|
83
|
+
$: validate_sub_fields($fieldStore);
|
|
84
|
+
let section_has_errors = false;
|
|
85
|
+
const validate_sub_fields = async (field) => {
|
|
86
|
+
section_has_errors = false;
|
|
87
|
+
if (field.sub_fields && field.sub_fields.length > 0) {
|
|
88
|
+
for (const sub_field of field.sub_fields || []) {
|
|
89
|
+
const { key, errors } = await validate_field(field.formStore, sub_field);
|
|
90
|
+
if (errors.length > 0) {
|
|
91
|
+
section_has_errors = true;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
};
|
|
82
96
|
</script>
|
|
83
97
|
|
|
84
98
|
<Collapsible.Root bind:open class="w-full">
|
|
85
99
|
<Collapsible.Trigger asChild let:builder>
|
|
86
100
|
<Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
|
|
87
|
-
<Label>{$fieldStore.label}</Label>
|
|
101
|
+
<Label class={section_has_errors ? "font-bold text-red-500" : ""}>{$fieldStore.label}</Label>
|
|
88
102
|
<FieldMessage {fieldStore} />
|
|
89
103
|
|
|
90
104
|
<div class="flex items-center">
|
|
@@ -7,14 +7,28 @@ import FieldMessage from "../FieldMessage.svelte";
|
|
|
7
7
|
import FormField from "../form-field.svelte";
|
|
8
8
|
import { Label } from "@stubber/ui/label";
|
|
9
9
|
import FieldExprToggle from "../FieldExprToggle.svelte";
|
|
10
|
+
import { validate_field } from "../validations/validate_field";
|
|
10
11
|
export let fieldStore;
|
|
11
12
|
let open = true;
|
|
13
|
+
$: validate_sub_fields($fieldStore);
|
|
14
|
+
let section_has_errors = false;
|
|
15
|
+
const validate_sub_fields = async (field) => {
|
|
16
|
+
section_has_errors = false;
|
|
17
|
+
if (field.sub_fields && field.sub_fields.length > 0) {
|
|
18
|
+
for (const sub_field of field.sub_fields || []) {
|
|
19
|
+
const { key, errors } = await validate_field(field.formStore, sub_field);
|
|
20
|
+
if (errors.length > 0) {
|
|
21
|
+
section_has_errors = true;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
};
|
|
12
26
|
</script>
|
|
13
27
|
|
|
14
28
|
<Collapsible.Root bind:open class="w-full">
|
|
15
29
|
<Collapsible.Trigger asChild let:builder>
|
|
16
30
|
<Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
|
|
17
|
-
<Label>{$fieldStore.label}</Label>
|
|
31
|
+
<Label class={section_has_errors ? "font-bold text-red-500" : ""}>{$fieldStore.label}</Label>
|
|
18
32
|
<FieldMessage {fieldStore} />
|
|
19
33
|
|
|
20
34
|
<div class="flex items-center">
|
|
@@ -112,8 +112,10 @@ onMount(() => {
|
|
|
112
112
|
variant="outline"
|
|
113
113
|
role="combobox"
|
|
114
114
|
aria-expanded={open}
|
|
115
|
-
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"
|
|
115
|
+
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"
|
|
116
116
|
style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
|
|
117
|
+
aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
|
|
118
|
+
aria-describedby="message-{$fieldStore.id}"
|
|
117
119
|
>
|
|
118
120
|
{dropdownLabel}
|
|
119
121
|
<i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
@@ -29,18 +29,9 @@ export const validate_field = async (formStore, fieldStore) => {
|
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
// validate sub_fields if they exist (arraybuilder and section fields)
|
|
33
|
-
if (field.sub_fields && field.sub_fields.length > 0) {
|
|
34
|
-
for (const sub_field of field.sub_fields || []) {
|
|
35
|
-
const { key, errors } = await validate_field(formStore, sub_field);
|
|
36
|
-
if (errors.length > 0) {
|
|
37
|
-
results.push({ message: `${field.fieldtype} has errors in child fields`, type: "error" });
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
32
|
const validations = field.validations || [];
|
|
42
33
|
const value = field.value;
|
|
43
|
-
// console.log(`Validating field: ${field.
|
|
34
|
+
// console.log(`Validating field: ${field.key}`, value, validations);
|
|
44
35
|
for (const validation of validations) {
|
|
45
36
|
if (validation.validationtype === "required") {
|
|
46
37
|
required_validation(results, value, validation);
|