Merge pull request #41 from x0k/structure-change

Implement array and object fields revalidation

Author: x0k

.changeset/quick-coins-think.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Implement array and object fields revalidation

.changeset/twenty-mirrors-clap.md

@@ -0,0 +1,5 @@
+---
+"playground": minor
+---
+
+Allow to customize validation events and modifiers

apps/docs/src/content/docs/api-reference/fields-validation-mode.mdx

@@ -0,0 +1,26 @@
+---
+title: Fields validation mode
+sidebar:
+  order: 11
+---
+
+```typescript
+type FieldsValidationMode = number;
+
+/** Validation is triggered on input event */
+export const ON_INPUT = 1;
+/** Validation is triggered on change event */
+export const ON_CHANGE = ON_INPUT << 1;
+/** Validation is triggered on blur event */
+export const ON_BLUR = ON_CHANGE << 1;
+/** Validation is triggered on add/remove item in array */
+export const ON_ARRAY_CHANGE = ON_BLUR << 1;
+/** Validation is triggered on add/remove/rename property in object */
+export const ON_OBJECT_CHANGE = ON_ARRAY_CHANGE << 1;
+
+/** Validation is not triggered before first change event */
+export const AFTER_CHANGED = ON_OBJECT_CHANGE << 1;
+/** Validation is not triggered before first blur event */
+export const AFTER_TOUCHED = AFTER_CHANGED << 1;
+/** Validation is not triggered before first form submission */
+export const AFTER_SUBMITTED = AFTER_TOUCHED << 1;

apps/docs/src/content/docs/api-reference/handlers.mdx

@@ -49,7 +49,7 @@ interface FormProps<T> {
   /**
    * Field validation error handler
    */
-  onFieldValidationFailure?: (
+  onFieldsValidationFailure?: (
     state: FailedMutation<unknown>,
     config: Config,
     value: SchemaValue | undefined

apps/docs/src/content/docs/api-reference/inputs-validation-mode.mdx

@@ -36,7 +36,7 @@
     validator: createAsyncValidator({ ajv }),
     handleValidationProcessError,
     schema: schema,
-    inputsValidationMode: ON_INPUT,
+    fieldsValidationMode: ON_INPUT,
     onSubmit: console.log,
   });
 
@@ -48,7 +48,7 @@
   };
 </script>
 
-form validation: {statusNames[form.validation.status]}, inputs validation: {statusNames[form.fieldValidation.status]}
+form validation: {statusNames[form.validation.status]}, fields validation: {statusNames[form.fieldsValidation.status]}
 <SimpleForm
   {form}
   novalidate

apps/docs/src/content/docs/guides/_async-validation.svelte

@@ -0,0 +1,9 @@
+---
+import { ShadowHost } from "@/components/shadow";
+
+import Form from "./_fields-validation.svelte";
+---
+
+<ShadowHost client:only="svelte">
+  <Form client:only="svelte" />
+</ShadowHost>

apps/docs/src/content/docs/guides/_fields-validation.astro

@@ -7,7 +7,7 @@
 
   const form = useCustomForm({
     schema: objectSchema,
-    inputsValidationMode: ON_INPUT | ON_CHANGE | AFTER_SUBMITTED,
+    fieldsValidationMode: ON_INPUT | ON_CHANGE | AFTER_SUBMITTED,
     onSubmit: console.log,
   });
 </script>

…nt/docs/guides/_inputs-validation.svelte …nt/docs/guides/_fields-validation.svelteapps/docs/src/content/docs/guides/_inputs-validation.svelte renamed to apps/docs/src/content/docs/guides/_fields-validation.svelte apps/docs/src/content/docs/guides/_inputs-validation.svelte renamed to apps/docs/src/content/docs/guides/_fields-validation.svelte

@@ -6,13 +6,13 @@ sidebar:
 
 import { Code, Card, LinkCard } from '@astrojs/starlight/components';
 
-import { DEFAULT_FIELD_VALIDATION_DEBOUNCE_MS } from '@sjsf/form';
+import { DEFAULT_FIELDS_VALIDATION_DEBOUNCE_MS } from '@sjsf/form';
 
 import LiveValidation from './_live-validation.astro'
 import liveValidationCode from './_live-validation.svelte?raw'
 
-import InputsValidation from './_inputs-validation.astro'
-import inputsValidationCode from './_inputs-validation.svelte?raw'
+import FieldsValidation from './_fields-validation.astro'
+import fieldsValidationCode from './_fields-validation.svelte?raw'
 
 import AsyncValidation from './_async-validation.astro'
 import asyncValidationCode from './_async-validation.svelte?raw'
@@ -44,27 +44,28 @@ By utilizing Svelte 5 reactivity, we can easily implement live validation.
 While it is possible, this approach has low efficiency, because usually
 revalidation of the whole form when changing one field does not make sense.
 
-## Inputs validation
+## Fields validation
 
-Instead of full form revalidation, we propose to perform revalidation of only the input field and full validation of the form when submitting.
+Instead of full form revalidation, we propose to perform revalidation of only the changing field and
+full validation of the form when submitting.
 
 :::note
 
-By default, inputs validation is performed with a debounce of {DEFAULT_FIELD_VALIDATION_DEBOUNCE_MS}ms.
+By default, fields validation is performed with a debounce of {DEFAULT_FIELDS_VALIDATION_DEBOUNCE_MS}ms.
 
-This can be changed by passing the `validationDebounceMs` option.
+This can be changed by passing the `fieldsValidationDebounceMs` option.
 
 :::
 
-<Code code={inputsValidationCode} lang="svelte" />
+<Code code={fieldsValidationCode} lang="svelte" />
 
 <Card>
-  <InputsValidation />
+  <FieldsValidation />
 </Card>
 
 The form in this example will only revalidate input fields on the `input` and `change` events after the first submission of the form.
 
-<LinkCard title="Inputs validation mode API reference" href="../../api-reference/inputs-validation-mode/" />
+<LinkCard title="Fields validation mode API reference" href="../../api-reference/fields-validation-mode/" />
 
 ## Async validation
 
@@ -75,7 +76,7 @@ The form supports asynchronous validation, please see your validator page for mo
 By default, a new form validation process can only be started after the previous one is completed;
 a new input validation process aborts the previous one.
 
-You can change this behavior by passing the `validationCombinator` and `fieldValidationCombinator` options.
+You can change this behavior by passing the `validationCombinator` and `fieldsValidationCombinator` options.
 
 :::