@formisch/preact 0.9.6 → 0.11.0
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.
- package/README.md +6 -1
- package/dist/index.d.ts +229 -61
- package/dist/index.js +228 -97
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@ Formisch is also available for [Qwik][formisch-qwik], [React][formisch-react], [
|
|
|
9
9
|
- Small bundle size starting at 2.5 kB
|
|
10
10
|
- Schema-based validation with Valibot
|
|
11
11
|
- Type safety with autocompletion in editor
|
|
12
|
+
- Open source and fully tested with 100 % coverage
|
|
12
13
|
- It's fast – DOM updates are fine-grained
|
|
13
14
|
- Minimal, readable and well thought out API
|
|
14
15
|
- Supports all native HTML form fields
|
|
@@ -59,7 +60,11 @@ In addition, Formisch offers several functions (we call them "methods") that can
|
|
|
59
60
|
|
|
60
61
|
## Comparison
|
|
61
62
|
|
|
62
|
-
What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built
|
|
63
|
+
What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow.
|
|
64
|
+
|
|
65
|
+
## Vision
|
|
66
|
+
|
|
67
|
+
My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework.
|
|
63
68
|
|
|
64
69
|
## Partners
|
|
65
70
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as v from "valibot";
|
|
2
2
|
import { ReadonlySignal, Signal } from "@preact/signals";
|
|
3
|
-
import { JSX } from "preact";
|
|
3
|
+
import { FocusEventHandler, FormHTMLAttributes, GenericEventHandler, InputEventHandler, JSX } from "preact";
|
|
4
4
|
|
|
5
5
|
//#region ../../packages/core/dist/index.preact.d.ts
|
|
6
6
|
|
|
@@ -9,9 +9,33 @@ import { JSX } from "preact";
|
|
|
9
9
|
* Schema type.
|
|
10
10
|
*/
|
|
11
11
|
type Schema = v.GenericSchema | v.GenericSchemaAsync;
|
|
12
|
+
/**
|
|
13
|
+
* Object schema type.
|
|
14
|
+
*/
|
|
15
|
+
type ObjectSchema = v.LooseObjectSchema<v.ObjectEntries, v.ErrorMessage<v.LooseObjectIssue> | undefined> | v.ObjectSchema<v.ObjectEntries, v.ErrorMessage<v.ObjectIssue> | undefined> | v.StrictObjectSchema<v.ObjectEntries, v.ErrorMessage<v.StrictObjectIssue> | undefined> | v.VariantSchema<string, v.VariantOptions<string>, v.ErrorMessage<v.VariantIssue> | undefined>;
|
|
16
|
+
/**
|
|
17
|
+
* Object schema async type.
|
|
18
|
+
*/
|
|
19
|
+
type ObjectSchemaAsync = v.LooseObjectSchemaAsync<v.ObjectEntriesAsync, v.ErrorMessage<v.LooseObjectIssue> | undefined> | v.ObjectSchemaAsync<v.ObjectEntriesAsync, v.ErrorMessage<v.ObjectIssue> | undefined> | v.StrictObjectSchemaAsync<v.ObjectEntriesAsync, v.ErrorMessage<v.StrictObjectIssue> | undefined> | v.VariantSchemaAsync<string, v.VariantOptionsAsync<string>, v.ErrorMessage<v.VariantIssue> | undefined>;
|
|
20
|
+
/**
|
|
21
|
+
* Object root schema type.
|
|
22
|
+
*/
|
|
23
|
+
type ObjectRootSchema = ObjectSchema | v.IntersectSchema<ObjectSchema[], v.ErrorMessage<v.IntersectIssue> | undefined> | v.UnionSchema<ObjectSchema[], v.ErrorMessage<v.UnionIssue<v.BaseIssue<unknown>>> | undefined>;
|
|
24
|
+
/**
|
|
25
|
+
* Object root schema async type.
|
|
26
|
+
*/
|
|
27
|
+
type ObjectRootSchemaAsync = ObjectSchemaAsync | v.IntersectSchemaAsync<(ObjectSchema | ObjectSchemaAsync)[], v.ErrorMessage<v.IntersectIssue> | undefined> | v.UnionSchemaAsync<(ObjectSchema | ObjectSchemaAsync)[], v.ErrorMessage<v.UnionIssue<v.BaseIssue<unknown>>> | undefined>;
|
|
28
|
+
/**
|
|
29
|
+
* Form schema type.
|
|
30
|
+
*
|
|
31
|
+
* Hint: Forms must have an object root, so only object schemas (sync or async),
|
|
32
|
+
* combinators (intersect, union, variant) whose options resolve to objects, and
|
|
33
|
+
* `lazy` schemas wrapping any of these are allowed at the top level. Use
|
|
34
|
+
* {@link Schema} for nested field schemas.
|
|
35
|
+
*/
|
|
36
|
+
type FormSchema = ObjectRootSchema | ObjectRootSchemaAsync | v.LazySchema<ObjectRootSchema> | v.LazySchemaAsync<ObjectRootSchema | ObjectRootSchemaAsync>;
|
|
12
37
|
//#endregion
|
|
13
38
|
//#region src/types/signal/signal.d.ts
|
|
14
|
-
|
|
15
39
|
/**
|
|
16
40
|
* Batch interface.
|
|
17
41
|
*/
|
|
@@ -40,6 +64,13 @@ interface InternalBaseStore {
|
|
|
40
64
|
schema: Schema;
|
|
41
65
|
/**
|
|
42
66
|
* The initial elements of the field.
|
|
67
|
+
*
|
|
68
|
+
* Hint: This may look unused, but do not remove it. `copyItemState` and
|
|
69
|
+
* `swapItemState` move the `elements` reference between field stores when
|
|
70
|
+
* array items are inserted, moved, removed or swapped, and `reset` restores
|
|
71
|
+
* each field's original element via `elements = initialElements`. Without it,
|
|
72
|
+
* focus and file reset target the wrong element after a reorder followed by a
|
|
73
|
+
* reset.
|
|
43
74
|
*/
|
|
44
75
|
initialElements: FieldElement[];
|
|
45
76
|
/**
|
|
@@ -217,7 +248,7 @@ type ValidationMode = "initial" | "touch" | "input" | "change" | "blur" | "submi
|
|
|
217
248
|
/**
|
|
218
249
|
* Form config interface.
|
|
219
250
|
*/
|
|
220
|
-
interface FormConfig<TSchema extends
|
|
251
|
+
interface FormConfig<TSchema extends FormSchema = FormSchema> {
|
|
221
252
|
/**
|
|
222
253
|
* The schema of the form.
|
|
223
254
|
*/
|
|
@@ -238,7 +269,7 @@ interface FormConfig<TSchema extends Schema = Schema> {
|
|
|
238
269
|
/**
|
|
239
270
|
* Internal form store interface.
|
|
240
271
|
*/
|
|
241
|
-
interface InternalFormStore<TSchema extends
|
|
272
|
+
interface InternalFormStore<TSchema extends FormSchema = FormSchema> extends InternalObjectStore {
|
|
242
273
|
/**
|
|
243
274
|
* The element of the form.
|
|
244
275
|
*/
|
|
@@ -275,7 +306,7 @@ interface InternalFormStore<TSchema extends Schema = Schema> extends InternalObj
|
|
|
275
306
|
/**
|
|
276
307
|
* Base form store interface.
|
|
277
308
|
*/
|
|
278
|
-
interface BaseFormStore<TSchema extends
|
|
309
|
+
interface BaseFormStore<TSchema extends FormSchema = FormSchema> {
|
|
279
310
|
/**
|
|
280
311
|
* The internal form store.
|
|
281
312
|
*
|
|
@@ -286,11 +317,11 @@ interface BaseFormStore<TSchema extends Schema = Schema> {
|
|
|
286
317
|
/**
|
|
287
318
|
* Submit handler type.
|
|
288
319
|
*/
|
|
289
|
-
type SubmitHandler<TSchema extends
|
|
320
|
+
type SubmitHandler<TSchema extends FormSchema> = (output: v.InferOutput<TSchema>) => MaybePromise<unknown>;
|
|
290
321
|
/**
|
|
291
322
|
* Submit event handler type.
|
|
292
323
|
*/
|
|
293
|
-
type SubmitEventHandler<TSchema extends
|
|
324
|
+
type SubmitEventHandler<TSchema extends FormSchema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<unknown>;
|
|
294
325
|
//#endregion
|
|
295
326
|
//#region src/types/path/path.d.ts
|
|
296
327
|
/**
|
|
@@ -361,7 +392,10 @@ type ExactRequired<TValue> = TValue extends Record<PropertyKey, unknown> ? IsExa
|
|
|
361
392
|
*/
|
|
362
393
|
type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey, ...infer TRest extends Path] ? TKey extends ExactKeysOf<ExactRequired<TValue>> ? PathValue<PropertiesOf<ExactRequired<TValue>>[TKey], TRest> : unknown : TValue;
|
|
363
394
|
/**
|
|
364
|
-
* Checks whether a value is
|
|
395
|
+
* Checks whether a value is a dynamic array or contains one anywhere in its
|
|
396
|
+
* shape. A fixed-length tuple is not itself a dynamic array, but it counts when
|
|
397
|
+
* it contains one, so paths can still navigate through tuples to reach nested
|
|
398
|
+
* arrays.
|
|
365
399
|
*
|
|
366
400
|
* Hint: The inner conditionals (`TValue extends readonly unknown[]` and
|
|
367
401
|
* `TValue extends Record<PropertyKey, unknown>`) distribute over union members,
|
|
@@ -372,7 +406,7 @@ type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey,
|
|
|
372
406
|
* `true extends ...`, which is `true` whenever at least one union member
|
|
373
407
|
* contributed `true`.
|
|
374
408
|
*/
|
|
375
|
-
type IsOrHasArray<TValue> = true extends (IsAny<TValue> extends true ? false : TValue extends readonly unknown[] ? true : TValue extends Record<PropertyKey, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> }[keyof TValue] : false) ? true : false;
|
|
409
|
+
type IsOrHasArray<TValue> = true extends (IsAny<TValue> extends true ? false : TValue extends readonly unknown[] ? number extends TValue["length"] ? true : IsOrHasArray<TValue[number]> : TValue extends Record<PropertyKey, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> }[keyof TValue] : false) ? true : false;
|
|
376
410
|
/**
|
|
377
411
|
* Extracts the exact keys of a tuple, array or object that contain arrays.
|
|
378
412
|
*/
|
|
@@ -387,12 +421,34 @@ type PropertiesOfArrayPath<TValue> = { [TKey in ExactKeysOfArrayPath<TValue>]: T
|
|
|
387
421
|
/**
|
|
388
422
|
* Lazily evaluates only the first valid array path segment based on the given value.
|
|
389
423
|
*/
|
|
390
|
-
type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? TValidPath : readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends ExactKeysOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<Required<PropertiesOfArrayPath<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<ExactKeysOfArrayPath<TValue>> extends false ? readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : never;
|
|
424
|
+
type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? number extends TValue["length"] ? TValidPath : IsNever<ExactKeysOfArrayPath<TValue>> extends false ? readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : never : readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends ExactKeysOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<Required<PropertiesOfArrayPath<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<ExactKeysOfArrayPath<TValue>> extends false ? readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : never;
|
|
391
425
|
/**
|
|
392
426
|
* Returns the path if valid, otherwise the first possible valid array path
|
|
393
427
|
* based on the given value.
|
|
394
428
|
*/
|
|
395
429
|
type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArrayPath<Required<TValue>, TPath> ? TPath : LazyArrayPath<Required<TValue>, TPath>;
|
|
430
|
+
/**
|
|
431
|
+
* Recursive helper for `DirtyPath` that prepends `TKey` to each deeper path,
|
|
432
|
+
* or falls through to `never` when the child is not an object.
|
|
433
|
+
*/
|
|
434
|
+
type DeepDirtyPath<TChild, TKey$1 extends PathKey, TDepth extends 0[]> = TChild extends Record<PropertyKey, unknown> ? readonly [TKey$1, ...DirtyPath<TChild, [...TDepth, 0]>] : never;
|
|
435
|
+
/**
|
|
436
|
+
* Returns the union of all `RequiredPath`s that `getDirtyPaths` can emit
|
|
437
|
+
* for a given input type. Object fields contribute their own path and the
|
|
438
|
+
* paths of their descendants; arrays and tuples are atomic and contribute
|
|
439
|
+
* only their own path, because dirty arrays are returned as complete units.
|
|
440
|
+
*
|
|
441
|
+
* Narrowing is exact for the first 5 levels of nesting; deeper paths fall
|
|
442
|
+
* back to `RequiredPath` to keep the result a complete superset of any
|
|
443
|
+
* path the runtime can address.
|
|
444
|
+
*
|
|
445
|
+
* Hint: Arrays and tuples are atomic because they don't structurally
|
|
446
|
+
* extend `Record<PropertyKey, unknown>` and so fall through to `never`
|
|
447
|
+
* via `DeepDirtyPath` — no explicit array check is needed. `TDepth` is
|
|
448
|
+
* a tuple-length counter capped at 5 to bound TypeScript instantiation
|
|
449
|
+
* cost.
|
|
450
|
+
*/
|
|
451
|
+
type DirtyPath<TValue, TDepth extends 0[] = []> = TDepth["length"] extends 5 ? RequiredPath : TValue extends Record<PropertyKey, unknown> ? { [TKey in ExactKeysOf<TValue>]: readonly [TKey] | DeepDirtyPath<NonNullable<PropertiesOf<TValue>[TKey]>, TKey, TDepth> }[ExactKeysOf<TValue>] : never;
|
|
396
452
|
//#endregion
|
|
397
453
|
//#region src/array/copyItemState/copyItemState.d.ts
|
|
398
454
|
/**
|
|
@@ -411,21 +467,21 @@ type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArra
|
|
|
411
467
|
/**
|
|
412
468
|
* Focus field config interface.
|
|
413
469
|
*/
|
|
414
|
-
interface FocusFieldConfig<TSchema extends
|
|
470
|
+
interface FocusFieldConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> {
|
|
415
471
|
/**
|
|
416
472
|
* The path to the field to focus.
|
|
417
473
|
*/
|
|
418
474
|
readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
|
|
419
475
|
}
|
|
420
476
|
/**
|
|
421
|
-
* Focuses the first input element of a field. This is useful for
|
|
477
|
+
* Focuses the first focusable input element of a field. This is useful for
|
|
422
478
|
* programmatically setting focus to a specific field, such as after
|
|
423
479
|
* validation errors or user interactions.
|
|
424
480
|
*
|
|
425
481
|
* @param form The form store containing the field.
|
|
426
482
|
* @param config The focus field configuration.
|
|
427
483
|
*/
|
|
428
|
-
declare function focus<TSchema extends
|
|
484
|
+
declare function focus<TSchema extends FormSchema, TFieldPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: FocusFieldConfig<TSchema, TFieldPath>): void;
|
|
429
485
|
//#endregion
|
|
430
486
|
//#region src/getAllErrors/getAllErrors.d.ts
|
|
431
487
|
/**
|
|
@@ -439,6 +495,93 @@ declare function focus<TSchema extends Schema, TFieldPath extends RequiredPath>(
|
|
|
439
495
|
*/
|
|
440
496
|
declare function getAllErrors(form: BaseFormStore): [string, ...string[]] | null;
|
|
441
497
|
//#endregion
|
|
498
|
+
//#region src/getDirtyInput/getDirtyInput.d.ts
|
|
499
|
+
/**
|
|
500
|
+
* Get form dirty input config interface.
|
|
501
|
+
*/
|
|
502
|
+
interface GetFormDirtyInputConfig {
|
|
503
|
+
/**
|
|
504
|
+
* The path to a field. Leave undefined to get the dirty input of the entire
|
|
505
|
+
* form.
|
|
506
|
+
*/
|
|
507
|
+
readonly path?: undefined;
|
|
508
|
+
}
|
|
509
|
+
/**
|
|
510
|
+
* Get field dirty input config interface.
|
|
511
|
+
*/
|
|
512
|
+
interface GetFieldDirtyInputConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> {
|
|
513
|
+
/**
|
|
514
|
+
* The path to the field to retrieve the dirty input from.
|
|
515
|
+
*/
|
|
516
|
+
readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
|
|
517
|
+
}
|
|
518
|
+
/**
|
|
519
|
+
* Retrieves only the dirty input values of a specific field or the entire
|
|
520
|
+
* form. Arrays are treated as atomic and returned in full if any item is
|
|
521
|
+
* dirty, while object keys without a dirty descendant are omitted. Returns
|
|
522
|
+
* `undefined` if no field in the inspected subtree is dirty.
|
|
523
|
+
*
|
|
524
|
+
* @param form The form store to retrieve dirty input from.
|
|
525
|
+
*
|
|
526
|
+
* @returns The dirty input of the form or specified field, or `undefined`.
|
|
527
|
+
*/
|
|
528
|
+
declare function getDirtyInput<TSchema extends FormSchema>(form: BaseFormStore<TSchema>): DeepPartial<v.InferInput<TSchema>> | undefined;
|
|
529
|
+
/**
|
|
530
|
+
* Retrieves only the dirty input values of a specific field or the entire
|
|
531
|
+
* form. Arrays are treated as atomic and returned in full if any item is
|
|
532
|
+
* dirty, while object keys without a dirty descendant are omitted. Returns
|
|
533
|
+
* `undefined` if no field in the inspected subtree is dirty.
|
|
534
|
+
*
|
|
535
|
+
* @param form The form store to retrieve dirty input from.
|
|
536
|
+
* @param config The get dirty input configuration.
|
|
537
|
+
*
|
|
538
|
+
* @returns The dirty input of the form or specified field, or `undefined`.
|
|
539
|
+
*/
|
|
540
|
+
declare function getDirtyInput<TSchema extends FormSchema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldDirtyInputConfig<TSchema, TFieldPath> : GetFormDirtyInputConfig): DeepPartial<TFieldPath extends RequiredPath ? PathValue<v.InferInput<TSchema>, TFieldPath> : v.InferInput<TSchema>> | undefined;
|
|
541
|
+
//#endregion
|
|
542
|
+
//#region src/getDirtyPaths/getDirtyPaths.d.ts
|
|
543
|
+
/**
|
|
544
|
+
* Get form dirty paths config interface.
|
|
545
|
+
*/
|
|
546
|
+
interface GetFormDirtyPathsConfig {
|
|
547
|
+
/**
|
|
548
|
+
* The path to a field. Leave undefined to inspect the entire form.
|
|
549
|
+
*/
|
|
550
|
+
readonly path?: undefined;
|
|
551
|
+
}
|
|
552
|
+
/**
|
|
553
|
+
* Get field dirty paths config interface.
|
|
554
|
+
*/
|
|
555
|
+
interface GetFieldDirtyPathsConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> {
|
|
556
|
+
/**
|
|
557
|
+
* The path to the field to inspect.
|
|
558
|
+
*/
|
|
559
|
+
readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
|
|
560
|
+
}
|
|
561
|
+
/**
|
|
562
|
+
* Returns a list of paths to the dirty fields of a specific field or the
|
|
563
|
+
* entire form. Arrays are treated as atomic and contribute only their own
|
|
564
|
+
* path if any item is dirty, while object branches are recursed into. Returns
|
|
565
|
+
* an empty list if no field in the inspected subtree is dirty.
|
|
566
|
+
*
|
|
567
|
+
* @param form The form store to inspect.
|
|
568
|
+
*
|
|
569
|
+
* @returns The list of paths to the dirty fields.
|
|
570
|
+
*/
|
|
571
|
+
declare function getDirtyPaths<TSchema extends FormSchema>(form: BaseFormStore<TSchema>): DirtyPath<v.InferInput<TSchema>>[];
|
|
572
|
+
/**
|
|
573
|
+
* Returns a list of paths to the dirty fields of a specific field or the
|
|
574
|
+
* entire form. Arrays are treated as atomic and contribute only their own
|
|
575
|
+
* path if any item is dirty, while object branches are recursed into. Returns
|
|
576
|
+
* an empty list if no field in the inspected subtree is dirty.
|
|
577
|
+
*
|
|
578
|
+
* @param form The form store to inspect.
|
|
579
|
+
* @param config The get dirty paths configuration.
|
|
580
|
+
*
|
|
581
|
+
* @returns The list of paths to the dirty fields.
|
|
582
|
+
*/
|
|
583
|
+
declare function getDirtyPaths<TSchema extends FormSchema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldDirtyPathsConfig<TSchema, TFieldPath> : GetFormDirtyPathsConfig): DirtyPath<v.InferInput<TSchema>>[];
|
|
584
|
+
//#endregion
|
|
442
585
|
//#region src/getErrors/getErrors.d.ts
|
|
443
586
|
/**
|
|
444
587
|
* Get form errors config interface.
|
|
@@ -452,7 +595,7 @@ interface GetFormErrorsConfig {
|
|
|
452
595
|
/**
|
|
453
596
|
* Get field errors config interface.
|
|
454
597
|
*/
|
|
455
|
-
interface GetFieldErrorsConfig<TSchema extends
|
|
598
|
+
interface GetFieldErrorsConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> {
|
|
456
599
|
/**
|
|
457
600
|
* The path to the field to retrieve errors from.
|
|
458
601
|
*/
|
|
@@ -467,7 +610,7 @@ interface GetFieldErrorsConfig<TSchema extends Schema, TFieldPath extends Requir
|
|
|
467
610
|
*
|
|
468
611
|
* @returns A non-empty array of error messages, or null if no errors exist.
|
|
469
612
|
*/
|
|
470
|
-
declare function getErrors<TSchema extends
|
|
613
|
+
declare function getErrors<TSchema extends FormSchema>(form: BaseFormStore<TSchema>): [string, ...string[]] | null;
|
|
471
614
|
/**
|
|
472
615
|
* Retrieves error messages from the form. When called without a config,
|
|
473
616
|
* returns form-level errors. When called with a path, returns errors for
|
|
@@ -478,7 +621,7 @@ declare function getErrors<TSchema extends Schema>(form: BaseFormStore<TSchema>)
|
|
|
478
621
|
*
|
|
479
622
|
* @returns A non-empty array of error messages, or null if no errors exist.
|
|
480
623
|
*/
|
|
481
|
-
declare function getErrors<TSchema extends
|
|
624
|
+
declare function getErrors<TSchema extends FormSchema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldErrorsConfig<TSchema, TFieldPath> : GetFormErrorsConfig): [string, ...string[]] | null;
|
|
482
625
|
//#endregion
|
|
483
626
|
//#region src/getInput/getInput.d.ts
|
|
484
627
|
/**
|
|
@@ -493,7 +636,7 @@ interface GetFormInputConfig {
|
|
|
493
636
|
/**
|
|
494
637
|
* Get field input config interface.
|
|
495
638
|
*/
|
|
496
|
-
interface GetFieldInputConfig<TSchema extends
|
|
639
|
+
interface GetFieldInputConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> {
|
|
497
640
|
/**
|
|
498
641
|
* The path to the field to retrieve input from.
|
|
499
642
|
*/
|
|
@@ -507,7 +650,7 @@ interface GetFieldInputConfig<TSchema extends Schema, TFieldPath extends Require
|
|
|
507
650
|
*
|
|
508
651
|
* @returns The partial input values of the form or the specified field.
|
|
509
652
|
*/
|
|
510
|
-
declare function getInput<TSchema extends
|
|
653
|
+
declare function getInput<TSchema extends FormSchema>(form: BaseFormStore<TSchema>): PartialValues<v.InferInput<TSchema>>;
|
|
511
654
|
/**
|
|
512
655
|
* Retrieves the current input value of a specific field or the entire form.
|
|
513
656
|
* Returns a partial object as not all fields may have been set.
|
|
@@ -517,7 +660,7 @@ declare function getInput<TSchema extends Schema>(form: BaseFormStore<TSchema>):
|
|
|
517
660
|
*
|
|
518
661
|
* @returns The partial input values of the form or the specified field.
|
|
519
662
|
*/
|
|
520
|
-
declare function getInput<TSchema extends
|
|
663
|
+
declare function getInput<TSchema extends FormSchema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldInputConfig<TSchema, TFieldPath> : GetFormInputConfig): PartialValues<TFieldPath extends RequiredPath ? PathValue<v.InferInput<TSchema>, TFieldPath> : v.InferInput<TSchema>>;
|
|
521
664
|
//#endregion
|
|
522
665
|
//#region src/handleSubmit/handleSubmit.d.ts
|
|
523
666
|
/**
|
|
@@ -530,7 +673,7 @@ declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPat
|
|
|
530
673
|
*
|
|
531
674
|
* @returns A submit event handler function to attach to the form element.
|
|
532
675
|
*/
|
|
533
|
-
declare function handleSubmit<TSchema extends
|
|
676
|
+
declare function handleSubmit<TSchema extends FormSchema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): () => Promise<void>;
|
|
534
677
|
/**
|
|
535
678
|
* Creates a submit event handler for the form that prevents default browser
|
|
536
679
|
* submission, validates the form input, and calls the provided handler if
|
|
@@ -541,13 +684,13 @@ declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchem
|
|
|
541
684
|
*
|
|
542
685
|
* @returns A submit event handler function to attach to the form element.
|
|
543
686
|
*/
|
|
544
|
-
declare function handleSubmit<TSchema extends
|
|
687
|
+
declare function handleSubmit<TSchema extends FormSchema>(form: BaseFormStore<TSchema>, handler: SubmitEventHandler<TSchema>): (event: SubmitEvent) => Promise<void>;
|
|
545
688
|
//#endregion
|
|
546
689
|
//#region src/insert/insert.d.ts
|
|
547
690
|
/**
|
|
548
691
|
* Insert array field config interface.
|
|
549
692
|
*/
|
|
550
|
-
interface InsertConfig<TSchema extends
|
|
693
|
+
interface InsertConfig<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath> {
|
|
551
694
|
/**
|
|
552
695
|
* The path to the field array to insert into.
|
|
553
696
|
*/
|
|
@@ -568,13 +711,13 @@ interface InsertConfig<TSchema extends Schema, TFieldArrayPath extends RequiredP
|
|
|
568
711
|
* @param form The form store containing the field array.
|
|
569
712
|
* @param config The insert configuration specifying the path, index, and initial value.
|
|
570
713
|
*/
|
|
571
|
-
declare function insert<TSchema extends
|
|
714
|
+
declare function insert<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: InsertConfig<TSchema, TFieldArrayPath>): void;
|
|
572
715
|
//#endregion
|
|
573
716
|
//#region src/move/move.d.ts
|
|
574
717
|
/**
|
|
575
718
|
* Move array field config interface.
|
|
576
719
|
*/
|
|
577
|
-
interface MoveConfig<TSchema extends
|
|
720
|
+
interface MoveConfig<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath> {
|
|
578
721
|
/**
|
|
579
722
|
* The path to the field array to move an item within.
|
|
580
723
|
*/
|
|
@@ -595,13 +738,38 @@ interface MoveConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPat
|
|
|
595
738
|
* @param form The form store containing the field array.
|
|
596
739
|
* @param config The move configuration specifying the path and source/destination indices.
|
|
597
740
|
*/
|
|
598
|
-
declare function move<TSchema extends
|
|
741
|
+
declare function move<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: MoveConfig<TSchema, TFieldArrayPath>): void;
|
|
742
|
+
//#endregion
|
|
743
|
+
//#region src/pickDirty/pickDirty.d.ts
|
|
744
|
+
/**
|
|
745
|
+
* Pick dirty config interface.
|
|
746
|
+
*/
|
|
747
|
+
interface PickDirtyConfig<TValue extends object> {
|
|
748
|
+
/**
|
|
749
|
+
* The value to filter down to its dirty parts. Must be structurally
|
|
750
|
+
* compatible with the form's schema.
|
|
751
|
+
*/
|
|
752
|
+
readonly from: TValue;
|
|
753
|
+
}
|
|
754
|
+
/**
|
|
755
|
+
* Picks only the dirty parts of the given value, using the form's dirty fields
|
|
756
|
+
* as a structural mask. Arrays are treated as atomic and object keys without a
|
|
757
|
+
* dirty descendant are omitted. Returns `undefined` if no field is dirty.
|
|
758
|
+
* Useful for filtering a validated output down to its changed parts before
|
|
759
|
+
* submitting.
|
|
760
|
+
*
|
|
761
|
+
* @param form The form store providing the dirty mask.
|
|
762
|
+
* @param config The pick dirty configuration.
|
|
763
|
+
*
|
|
764
|
+
* @returns The dirty parts of the value, or `undefined`.
|
|
765
|
+
*/
|
|
766
|
+
declare function pickDirty<TSchema extends FormSchema, TValue extends object>(form: BaseFormStore<TSchema>, config: PickDirtyConfig<TValue>): DeepPartial<TValue> | undefined;
|
|
599
767
|
//#endregion
|
|
600
768
|
//#region src/remove/remove.d.ts
|
|
601
769
|
/**
|
|
602
770
|
* Remove array field config interface.
|
|
603
771
|
*/
|
|
604
|
-
interface RemoveConfig<TSchema extends
|
|
772
|
+
interface RemoveConfig<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath> {
|
|
605
773
|
/**
|
|
606
774
|
* The path to the field array to remove an item from.
|
|
607
775
|
*/
|
|
@@ -618,13 +786,13 @@ interface RemoveConfig<TSchema extends Schema, TFieldArrayPath extends RequiredP
|
|
|
618
786
|
* @param form The form store containing the field array.
|
|
619
787
|
* @param config The remove configuration specifying the path and index.
|
|
620
788
|
*/
|
|
621
|
-
declare function remove<TSchema extends
|
|
789
|
+
declare function remove<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: RemoveConfig<TSchema, TFieldArrayPath>): void;
|
|
622
790
|
//#endregion
|
|
623
791
|
//#region src/replace/replace.d.ts
|
|
624
792
|
/**
|
|
625
793
|
* Replace array field config interface.
|
|
626
794
|
*/
|
|
627
|
-
interface ReplaceConfig<TSchema extends
|
|
795
|
+
interface ReplaceConfig<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath> {
|
|
628
796
|
/**
|
|
629
797
|
* The path to the field array to replace an item within.
|
|
630
798
|
*/
|
|
@@ -644,7 +812,7 @@ interface ReplaceConfig<TSchema extends Schema, TFieldArrayPath extends Required
|
|
|
644
812
|
* @param form The form store containing the field array.
|
|
645
813
|
* @param config The replace configuration specifying the path, index, and initial input.
|
|
646
814
|
*/
|
|
647
|
-
declare function replace<TSchema extends
|
|
815
|
+
declare function replace<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: ReplaceConfig<TSchema, TFieldArrayPath>): void;
|
|
648
816
|
//#endregion
|
|
649
817
|
//#region src/reset/reset.d.ts
|
|
650
818
|
/**
|
|
@@ -667,7 +835,7 @@ interface ResetBaseConfig {
|
|
|
667
835
|
/**
|
|
668
836
|
* Reset form config interface.
|
|
669
837
|
*/
|
|
670
|
-
interface ResetFormConfig<TSchema extends
|
|
838
|
+
interface ResetFormConfig<TSchema extends FormSchema> extends ResetBaseConfig {
|
|
671
839
|
/**
|
|
672
840
|
* The path to a field. Leave undefined to reset the entire form.
|
|
673
841
|
*/
|
|
@@ -685,7 +853,7 @@ interface ResetFormConfig<TSchema extends Schema> extends ResetBaseConfig {
|
|
|
685
853
|
/**
|
|
686
854
|
* Reset field config interface.
|
|
687
855
|
*/
|
|
688
|
-
interface ResetFieldConfig<TSchema extends
|
|
856
|
+
interface ResetFieldConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> extends ResetBaseConfig {
|
|
689
857
|
/**
|
|
690
858
|
* The path to the field to reset.
|
|
691
859
|
*/
|
|
@@ -712,7 +880,7 @@ declare function reset(form: BaseFormStore): void;
|
|
|
712
880
|
* @param form The form store to reset.
|
|
713
881
|
* @param config The reset configuration specifying what to reset and what to keep.
|
|
714
882
|
*/
|
|
715
|
-
declare function reset<TSchema extends
|
|
883
|
+
declare function reset<TSchema extends FormSchema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? ResetFieldConfig<TSchema, TFieldPath> : ResetFormConfig<TSchema>): void;
|
|
716
884
|
//#endregion
|
|
717
885
|
//#region src/setErrors/setErrors.d.ts
|
|
718
886
|
/**
|
|
@@ -731,7 +899,7 @@ interface SetFormErrorsConfig {
|
|
|
731
899
|
/**
|
|
732
900
|
* Set field errors config interface.
|
|
733
901
|
*/
|
|
734
|
-
interface SetFieldErrorsConfig<TSchema extends
|
|
902
|
+
interface SetFieldErrorsConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> {
|
|
735
903
|
/**
|
|
736
904
|
* The path to the field to set errors on.
|
|
737
905
|
*/
|
|
@@ -749,13 +917,13 @@ interface SetFieldErrorsConfig<TSchema extends Schema, TFieldPath extends Requir
|
|
|
749
917
|
* @param form The form store to set errors on.
|
|
750
918
|
* @param config The set errors configuration specifying the path and error messages.
|
|
751
919
|
*/
|
|
752
|
-
declare function setErrors<TSchema extends
|
|
920
|
+
declare function setErrors<TSchema extends FormSchema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? SetFieldErrorsConfig<TSchema, TFieldPath> : SetFormErrorsConfig): void;
|
|
753
921
|
//#endregion
|
|
754
922
|
//#region src/setInput/setInput.d.ts
|
|
755
923
|
/**
|
|
756
924
|
* Set form input config interface.
|
|
757
925
|
*/
|
|
758
|
-
interface SetFormInputConfig<TSchema extends
|
|
926
|
+
interface SetFormInputConfig<TSchema extends FormSchema> {
|
|
759
927
|
/**
|
|
760
928
|
* The path to a field. Leave undefined to set the entire form input.
|
|
761
929
|
*/
|
|
@@ -768,7 +936,7 @@ interface SetFormInputConfig<TSchema extends Schema> {
|
|
|
768
936
|
/**
|
|
769
937
|
* Set field input config interface.
|
|
770
938
|
*/
|
|
771
|
-
interface SetFieldInputConfig<TSchema extends
|
|
939
|
+
interface SetFieldInputConfig<TSchema extends FormSchema, TFieldPath extends RequiredPath> {
|
|
772
940
|
/**
|
|
773
941
|
* The path to the field to set input on.
|
|
774
942
|
*/
|
|
@@ -786,7 +954,7 @@ interface SetFieldInputConfig<TSchema extends Schema, TFieldPath extends Require
|
|
|
786
954
|
* @param form The form store to set input on.
|
|
787
955
|
* @param config The set form input configuration specifying the new input values.
|
|
788
956
|
*/
|
|
789
|
-
declare function setInput<TSchema extends
|
|
957
|
+
declare function setInput<TSchema extends FormSchema>(form: BaseFormStore<TSchema>, config: SetFormInputConfig<TSchema>): void;
|
|
790
958
|
/**
|
|
791
959
|
* Sets the input value of a specific field or the entire form. This updates
|
|
792
960
|
* the field value(s) and triggers validation if required by the form's
|
|
@@ -795,7 +963,7 @@ declare function setInput<TSchema extends Schema>(form: BaseFormStore<TSchema>,
|
|
|
795
963
|
* @param form The form store to set input on.
|
|
796
964
|
* @param config The set input configuration specifying the path and new value.
|
|
797
965
|
*/
|
|
798
|
-
declare function setInput<TSchema extends
|
|
966
|
+
declare function setInput<TSchema extends FormSchema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? SetFieldInputConfig<TSchema, TFieldPath> : SetFormInputConfig<TSchema>): void;
|
|
799
967
|
//#endregion
|
|
800
968
|
//#region src/submit/submit.d.ts
|
|
801
969
|
/**
|
|
@@ -810,7 +978,7 @@ declare function submit(form: BaseFormStore): void;
|
|
|
810
978
|
/**
|
|
811
979
|
* Swap array field config interface.
|
|
812
980
|
*/
|
|
813
|
-
interface SwapConfig<TSchema extends
|
|
981
|
+
interface SwapConfig<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath> {
|
|
814
982
|
/**
|
|
815
983
|
* The path to the field array to swap items within.
|
|
816
984
|
*/
|
|
@@ -830,7 +998,7 @@ interface SwapConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPat
|
|
|
830
998
|
* @param form The form store containing the field array.
|
|
831
999
|
* @param config The swap configuration specifying the path and indices to swap.
|
|
832
1000
|
*/
|
|
833
|
-
declare function swap<TSchema extends
|
|
1001
|
+
declare function swap<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: SwapConfig<TSchema, TFieldArrayPath>): void;
|
|
834
1002
|
//#endregion
|
|
835
1003
|
//#region src/validate/validate.d.ts
|
|
836
1004
|
/**
|
|
@@ -852,7 +1020,7 @@ interface ValidateFormConfig {
|
|
|
852
1020
|
*
|
|
853
1021
|
* @returns A promise resolving to the validation result.
|
|
854
1022
|
*/
|
|
855
|
-
declare function validate<TSchema extends
|
|
1023
|
+
declare function validate<TSchema extends FormSchema>(form: BaseFormStore<TSchema>, config?: ValidateFormConfig): Promise<v.SafeParseResult<TSchema>>;
|
|
856
1024
|
//#endregion
|
|
857
1025
|
//#endregion
|
|
858
1026
|
//#region src/types/field.d.ts
|
|
@@ -871,28 +1039,28 @@ interface FieldElementProps {
|
|
|
871
1039
|
/**
|
|
872
1040
|
* The ref callback to register the field element.
|
|
873
1041
|
*/
|
|
874
|
-
readonly ref: (element: FieldElement) => void;
|
|
1042
|
+
readonly ref: (element: FieldElement | null) => void;
|
|
875
1043
|
/**
|
|
876
1044
|
* The focus event handler of the field element.
|
|
877
1045
|
*/
|
|
878
|
-
readonly onFocus:
|
|
1046
|
+
readonly onFocus: FocusEventHandler<FieldElement>;
|
|
879
1047
|
/**
|
|
880
1048
|
* The input event handler of the field element.
|
|
881
1049
|
*/
|
|
882
|
-
readonly onInput:
|
|
1050
|
+
readonly onInput: InputEventHandler<FieldElement>;
|
|
883
1051
|
/**
|
|
884
1052
|
* The change event handler of the field element.
|
|
885
1053
|
*/
|
|
886
|
-
readonly onChange:
|
|
1054
|
+
readonly onChange: GenericEventHandler<FieldElement>;
|
|
887
1055
|
/**
|
|
888
1056
|
* The blur event handler of the field element.
|
|
889
1057
|
*/
|
|
890
|
-
readonly onBlur:
|
|
1058
|
+
readonly onBlur: FocusEventHandler<FieldElement>;
|
|
891
1059
|
}
|
|
892
1060
|
/**
|
|
893
1061
|
* Field store interface.
|
|
894
1062
|
*/
|
|
895
|
-
interface FieldStore<TSchema extends
|
|
1063
|
+
interface FieldStore<TSchema extends FormSchema = FormSchema, TFieldPath extends RequiredPath = RequiredPath> {
|
|
896
1064
|
/**
|
|
897
1065
|
* The path to the field within the form.
|
|
898
1066
|
*/
|
|
@@ -929,7 +1097,7 @@ interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends Require
|
|
|
929
1097
|
/**
|
|
930
1098
|
* Field array store interface.
|
|
931
1099
|
*/
|
|
932
|
-
interface FieldArrayStore<TSchema extends
|
|
1100
|
+
interface FieldArrayStore<TSchema extends FormSchema = FormSchema, TFieldArrayPath extends RequiredPath = RequiredPath> {
|
|
933
1101
|
/**
|
|
934
1102
|
* The path to the array field within the form.
|
|
935
1103
|
*/
|
|
@@ -960,7 +1128,7 @@ interface FieldArrayStore<TSchema extends Schema = Schema, TFieldArrayPath exten
|
|
|
960
1128
|
/**
|
|
961
1129
|
* Form store interface.
|
|
962
1130
|
*/
|
|
963
|
-
interface FormStore<TSchema extends
|
|
1131
|
+
interface FormStore<TSchema extends FormSchema = FormSchema> extends BaseFormStore<TSchema> {
|
|
964
1132
|
/**
|
|
965
1133
|
* Whether the form is currently submitting.
|
|
966
1134
|
*/
|
|
@@ -998,7 +1166,7 @@ interface FormStore<TSchema extends Schema = Schema> extends BaseFormStore<TSche
|
|
|
998
1166
|
/**
|
|
999
1167
|
* Field component props interface.
|
|
1000
1168
|
*/
|
|
1001
|
-
interface FieldProps<TSchema extends
|
|
1169
|
+
interface FieldProps<TSchema extends FormSchema = FormSchema, TFieldPath extends RequiredPath = RequiredPath> {
|
|
1002
1170
|
/**
|
|
1003
1171
|
* The form store to which the field belongs.
|
|
1004
1172
|
*/
|
|
@@ -1021,7 +1189,7 @@ interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends Require
|
|
|
1021
1189
|
*
|
|
1022
1190
|
* @returns The UI of the field to be rendered.
|
|
1023
1191
|
*/
|
|
1024
|
-
declare function Field<TSchema extends
|
|
1192
|
+
declare function Field<TSchema extends FormSchema, TFieldPath extends RequiredPath>({
|
|
1025
1193
|
of,
|
|
1026
1194
|
path,
|
|
1027
1195
|
children
|
|
@@ -1031,7 +1199,7 @@ declare function Field<TSchema extends Schema, TFieldPath extends RequiredPath>(
|
|
|
1031
1199
|
/**
|
|
1032
1200
|
* FieldArray component props interface.
|
|
1033
1201
|
*/
|
|
1034
|
-
interface FieldArrayProps<TSchema extends
|
|
1202
|
+
interface FieldArrayProps<TSchema extends FormSchema = FormSchema, TFieldArrayPath extends RequiredPath = RequiredPath> {
|
|
1035
1203
|
/**
|
|
1036
1204
|
* The form store to which the field array belongs.
|
|
1037
1205
|
*/
|
|
@@ -1055,7 +1223,7 @@ interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath exten
|
|
|
1055
1223
|
*
|
|
1056
1224
|
* @returns The UI of the field array to be rendered.
|
|
1057
1225
|
*/
|
|
1058
|
-
declare function FieldArray<TSchema extends
|
|
1226
|
+
declare function FieldArray<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath>({
|
|
1059
1227
|
of,
|
|
1060
1228
|
path,
|
|
1061
1229
|
children
|
|
@@ -1065,7 +1233,7 @@ declare function FieldArray<TSchema extends Schema, TFieldArrayPath extends Requ
|
|
|
1065
1233
|
/**
|
|
1066
1234
|
* Form component props type.
|
|
1067
1235
|
*/
|
|
1068
|
-
type FormProps<TSchema extends
|
|
1236
|
+
type FormProps<TSchema extends FormSchema = FormSchema> = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "novalidate" | "noValidate"> & {
|
|
1069
1237
|
/**
|
|
1070
1238
|
* The form store instance.
|
|
1071
1239
|
*/
|
|
@@ -1083,13 +1251,13 @@ type FormProps<TSchema extends Schema = Schema> = Omit<JSX.FormHTMLAttributes<HT
|
|
|
1083
1251
|
*
|
|
1084
1252
|
* @returns The a native form element.
|
|
1085
1253
|
*/
|
|
1086
|
-
declare function Form<TSchema extends
|
|
1254
|
+
declare function Form<TSchema extends FormSchema>(props: FormProps<TSchema>): JSX.Element;
|
|
1087
1255
|
//#endregion
|
|
1088
1256
|
//#region src/hooks/useField/useField.d.ts
|
|
1089
1257
|
/**
|
|
1090
1258
|
* Use field config interface.
|
|
1091
1259
|
*/
|
|
1092
|
-
interface UseFieldConfig<TSchema extends
|
|
1260
|
+
interface UseFieldConfig<TSchema extends FormSchema = FormSchema, TFieldPath extends RequiredPath = RequiredPath> {
|
|
1093
1261
|
/**
|
|
1094
1262
|
* The path to the field within the form schema.
|
|
1095
1263
|
*/
|
|
@@ -1103,13 +1271,13 @@ interface UseFieldConfig<TSchema extends Schema = Schema, TFieldPath extends Req
|
|
|
1103
1271
|
*
|
|
1104
1272
|
* @returns The field store with reactive properties and element props.
|
|
1105
1273
|
*/
|
|
1106
|
-
declare function useField<TSchema extends
|
|
1274
|
+
declare function useField<TSchema extends FormSchema, TFieldPath extends RequiredPath>(form: FormStore<TSchema>, config: UseFieldConfig<TSchema, TFieldPath>): FieldStore<TSchema, TFieldPath>;
|
|
1107
1275
|
//#endregion
|
|
1108
1276
|
//#region src/hooks/useFieldArray/useFieldArray.d.ts
|
|
1109
1277
|
/**
|
|
1110
1278
|
* Use field array config interface.
|
|
1111
1279
|
*/
|
|
1112
|
-
interface UseFieldArrayConfig<TSchema extends
|
|
1280
|
+
interface UseFieldArrayConfig<TSchema extends FormSchema = FormSchema, TFieldArrayPath extends RequiredPath = RequiredPath> {
|
|
1113
1281
|
/**
|
|
1114
1282
|
* The path to the array field within the form schema.
|
|
1115
1283
|
*/
|
|
@@ -1123,7 +1291,7 @@ interface UseFieldArrayConfig<TSchema extends Schema = Schema, TFieldArrayPath e
|
|
|
1123
1291
|
*
|
|
1124
1292
|
* @returns The field array store with reactive properties for array management.
|
|
1125
1293
|
*/
|
|
1126
|
-
declare function useFieldArray<TSchema extends
|
|
1294
|
+
declare function useFieldArray<TSchema extends FormSchema, TFieldArrayPath extends RequiredPath>(form: FormStore<TSchema>, config: UseFieldArrayConfig<TSchema, TFieldArrayPath>): FieldArrayStore<TSchema, TFieldArrayPath>;
|
|
1127
1295
|
//#endregion
|
|
1128
1296
|
//#region src/hooks/useForm/useForm.d.ts
|
|
1129
1297
|
/**
|
|
@@ -1134,6 +1302,6 @@ declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends R
|
|
|
1134
1302
|
*
|
|
1135
1303
|
* @returns The form store with reactive properties.
|
|
1136
1304
|
*/
|
|
1137
|
-
declare function useForm<TSchema extends
|
|
1305
|
+
declare function useForm<TSchema extends FormSchema>(config: FormConfig<TSchema>): FormStore<TSchema>;
|
|
1138
1306
|
//#endregion
|
|
1139
|
-
export { type DeepPartial, Field, FieldArray, FieldArrayProps, FieldArrayStore, type FieldElement, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, type FormConfig, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, type PartialValues, type PathValue, RemoveConfig, ReplaceConfig, type RequiredPath, ResetFieldConfig, ResetFormConfig, type Schema, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitEventHandler, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, type ValidArrayPath, type ValidPath, ValidateFormConfig, type ValidationMode, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };
|
|
1307
|
+
export { type DeepPartial, Field, FieldArray, FieldArrayProps, FieldArrayStore, type FieldElement, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, type FormConfig, FormProps, type FormSchema, FormStore, GetFieldDirtyInputConfig, GetFieldDirtyPathsConfig, GetFieldErrorsConfig, GetFieldInputConfig, GetFormDirtyInputConfig, GetFormDirtyPathsConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, type PartialValues, type PathValue, PickDirtyConfig, RemoveConfig, ReplaceConfig, type RequiredPath, ResetFieldConfig, ResetFormConfig, type Schema, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitEventHandler, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, type ValidArrayPath, type ValidPath, ValidateFormConfig, type ValidationMode, focus, getAllErrors, getDirtyInput, getDirtyPaths, getErrors, getInput, handleSubmit, insert, move, pickDirty, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };
|
package/dist/index.js
CHANGED
|
@@ -142,31 +142,45 @@ function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
|
|
|
142
142
|
* form reset functionality.
|
|
143
143
|
*
|
|
144
144
|
* @param internalFieldStore The field store to reset.
|
|
145
|
-
* @param
|
|
145
|
+
* @param input The new input value (can be any type including array or object).
|
|
146
|
+
* @param keepStart Whether to keep `startInput` and `startItems` as the dirty
|
|
147
|
+
* baseline instead of resetting them to the new input. Used when a field store
|
|
148
|
+
* is reused for an in-place edit so its dirty state is detected correctly.
|
|
146
149
|
*/
|
|
147
|
-
function resetItemState(internalFieldStore,
|
|
150
|
+
function resetItemState(internalFieldStore, input, keepStart = false) {
|
|
148
151
|
batch(() => {
|
|
149
|
-
|
|
152
|
+
const elements = [];
|
|
153
|
+
if (internalFieldStore.elements === internalFieldStore.initialElements) internalFieldStore.initialElements = elements;
|
|
154
|
+
internalFieldStore.elements = elements;
|
|
150
155
|
internalFieldStore.errors.value = null;
|
|
151
156
|
internalFieldStore.isTouched.value = false;
|
|
152
157
|
internalFieldStore.isDirty.value = false;
|
|
153
158
|
if (internalFieldStore.kind === "array" || internalFieldStore.kind === "object") {
|
|
154
|
-
const objectInput =
|
|
155
|
-
internalFieldStore.startInput.value = objectInput;
|
|
159
|
+
const objectInput = input == null ? input : true;
|
|
160
|
+
if (!keepStart) internalFieldStore.startInput.value = objectInput;
|
|
156
161
|
internalFieldStore.input.value = objectInput;
|
|
157
|
-
if (internalFieldStore.kind === "array") if (
|
|
158
|
-
const
|
|
159
|
-
|
|
162
|
+
if (internalFieldStore.kind === "array") if (input) {
|
|
163
|
+
const length = internalFieldStore.schema.type === "array" ? input.length : internalFieldStore.children.length;
|
|
164
|
+
const newItems = Array.from({ length }, createId);
|
|
165
|
+
if (!keepStart) internalFieldStore.startItems.value = newItems;
|
|
160
166
|
internalFieldStore.items.value = newItems;
|
|
161
|
-
|
|
167
|
+
let path;
|
|
168
|
+
for (let index = 0; index < length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], input[index], keepStart);
|
|
169
|
+
else {
|
|
170
|
+
path ??= JSON.parse(internalFieldStore.name);
|
|
171
|
+
internalFieldStore.children[index] = {};
|
|
172
|
+
path.push(index);
|
|
173
|
+
initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, input[index], path);
|
|
174
|
+
path.pop();
|
|
175
|
+
}
|
|
162
176
|
} else {
|
|
163
|
-
internalFieldStore.startItems.value = [];
|
|
177
|
+
if (!keepStart) internalFieldStore.startItems.value = [];
|
|
164
178
|
internalFieldStore.items.value = [];
|
|
165
179
|
}
|
|
166
|
-
else for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key],
|
|
180
|
+
else for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], input?.[key], keepStart);
|
|
167
181
|
} else {
|
|
168
|
-
internalFieldStore.startInput.value =
|
|
169
|
-
internalFieldStore.input.value =
|
|
182
|
+
if (!keepStart) internalFieldStore.startInput.value = input;
|
|
183
|
+
internalFieldStore.input.value = input;
|
|
170
184
|
}
|
|
171
185
|
});
|
|
172
186
|
}
|
|
@@ -233,6 +247,85 @@ function swapItemState(firstInternalFieldStore, secondInternalFieldStore) {
|
|
|
233
247
|
});
|
|
234
248
|
}
|
|
235
249
|
/**
|
|
250
|
+
* Focuses the first focusable element of a field store. The elements are tried
|
|
251
|
+
* in order and the first one that actually receives focus wins, so detached,
|
|
252
|
+
* disabled or hidden elements are skipped. The browser decides focusability,
|
|
253
|
+
* which is read back via the element's root `activeElement` so elements in a
|
|
254
|
+
* shadow root or another document are handled correctly.
|
|
255
|
+
*
|
|
256
|
+
* Hint: A `display: none` or `hidden` element is correctly skipped in real
|
|
257
|
+
* browsers, but jsdom has no layout and focuses it anyway, so that case cannot
|
|
258
|
+
* be covered by unit tests.
|
|
259
|
+
*
|
|
260
|
+
* @param internalFieldStore The field store to focus.
|
|
261
|
+
*
|
|
262
|
+
* @returns Whether an element was focused.
|
|
263
|
+
*/
|
|
264
|
+
function focusFieldElement(internalFieldStore) {
|
|
265
|
+
for (const element of internalFieldStore.elements) {
|
|
266
|
+
element.focus();
|
|
267
|
+
if (element.getRootNode().activeElement === element) return true;
|
|
268
|
+
}
|
|
269
|
+
return false;
|
|
270
|
+
}
|
|
271
|
+
/**
|
|
272
|
+
* Returns whether the specified boolean property is true for the field store
|
|
273
|
+
* or any of its nested children. Recursively checks arrays and objects.
|
|
274
|
+
*
|
|
275
|
+
* @param internalFieldStore The field store to check.
|
|
276
|
+
* @param type The boolean property type to check.
|
|
277
|
+
*
|
|
278
|
+
* @returns Whether the property is true.
|
|
279
|
+
*/
|
|
280
|
+
/* @__NO_SIDE_EFFECTS__ */
|
|
281
|
+
function getFieldBool(internalFieldStore, type) {
|
|
282
|
+
if (internalFieldStore[type].value) return true;
|
|
283
|
+
if (internalFieldStore.kind === "array") {
|
|
284
|
+
for (let index = 0; index < internalFieldStore.items.value.length; index++) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[index], type)) return true;
|
|
285
|
+
return false;
|
|
286
|
+
}
|
|
287
|
+
if (internalFieldStore.kind == "object") {
|
|
288
|
+
for (const key in internalFieldStore.children) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[key], type)) return true;
|
|
289
|
+
return false;
|
|
290
|
+
}
|
|
291
|
+
return false;
|
|
292
|
+
}
|
|
293
|
+
/**
|
|
294
|
+
* Returns only the dirty input of the field store. Arrays are treated as
|
|
295
|
+
* atomic and returned in full if any item is dirty, while object keys without
|
|
296
|
+
* a dirty descendant are omitted. Returns `undefined` if no descendant is
|
|
297
|
+
* dirty.
|
|
298
|
+
*
|
|
299
|
+
* @param internalFieldStore The field store to get dirty input from.
|
|
300
|
+
* @param dirtyOnly Whether to only include dirty fields. Defaults to `true`.
|
|
301
|
+
*
|
|
302
|
+
* @returns The dirty input, or `undefined` if no descendant is dirty.
|
|
303
|
+
*/
|
|
304
|
+
/* @__NO_SIDE_EFFECTS__ */
|
|
305
|
+
function getDirtyFieldInput(internalFieldStore, dirtyOnly = true) {
|
|
306
|
+
if (dirtyOnly && !/* @__PURE__ */ getFieldBool(internalFieldStore, "isDirty")) return;
|
|
307
|
+
if (internalFieldStore.kind === "array") {
|
|
308
|
+
if (internalFieldStore.input.value) {
|
|
309
|
+
const value = [];
|
|
310
|
+
for (let index = 0; index < internalFieldStore.items.value.length; index++) value[index] = /* @__PURE__ */ getDirtyFieldInput(internalFieldStore.children[index], false);
|
|
311
|
+
return value;
|
|
312
|
+
}
|
|
313
|
+
return internalFieldStore.input.value;
|
|
314
|
+
}
|
|
315
|
+
if (internalFieldStore.kind === "object") {
|
|
316
|
+
if (internalFieldStore.input.value) {
|
|
317
|
+
const value = {};
|
|
318
|
+
for (const key in internalFieldStore.children) {
|
|
319
|
+
const child = internalFieldStore.children[key];
|
|
320
|
+
if (!dirtyOnly || /* @__PURE__ */ getFieldBool(child, "isDirty")) value[key] = /* @__PURE__ */ getDirtyFieldInput(child, dirtyOnly);
|
|
321
|
+
}
|
|
322
|
+
return value;
|
|
323
|
+
}
|
|
324
|
+
return internalFieldStore.input.value;
|
|
325
|
+
}
|
|
326
|
+
return internalFieldStore.input.value;
|
|
327
|
+
}
|
|
328
|
+
/**
|
|
236
329
|
* Returns the current input of the field store. For arrays and objects,
|
|
237
330
|
* recursively collects input from all children. Returns `null` or `undefined`
|
|
238
331
|
* for nullish array/object inputs, or the primitive value for value fields.
|
|
@@ -289,28 +382,6 @@ function getElementInput(element, internalFieldStore) {
|
|
|
289
382
|
return element.value;
|
|
290
383
|
}
|
|
291
384
|
/**
|
|
292
|
-
* Returns whether the specified boolean property is true for the field store
|
|
293
|
-
* or any of its nested children. Recursively checks arrays and objects.
|
|
294
|
-
*
|
|
295
|
-
* @param internalFieldStore The field store to check.
|
|
296
|
-
* @param type The boolean property type to check.
|
|
297
|
-
*
|
|
298
|
-
* @returns Whether the property is true.
|
|
299
|
-
*/
|
|
300
|
-
/* @__NO_SIDE_EFFECTS__ */
|
|
301
|
-
function getFieldBool(internalFieldStore, type) {
|
|
302
|
-
if (internalFieldStore[type].value) return true;
|
|
303
|
-
if (internalFieldStore.kind === "array") {
|
|
304
|
-
for (let index = 0; index < internalFieldStore.items.value.length; index++) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[index], type)) return true;
|
|
305
|
-
return false;
|
|
306
|
-
}
|
|
307
|
-
if (internalFieldStore.kind == "object") {
|
|
308
|
-
for (const key in internalFieldStore.children) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[key], type)) return true;
|
|
309
|
-
return false;
|
|
310
|
-
}
|
|
311
|
-
return false;
|
|
312
|
-
}
|
|
313
|
-
/**
|
|
314
385
|
* Returns the field store at the specified path by traversing the form store's
|
|
315
386
|
* children hierarchy.
|
|
316
387
|
*
|
|
@@ -335,11 +406,9 @@ function getFieldStore(internalFormStore, path) {
|
|
|
335
406
|
*/
|
|
336
407
|
function setFieldBool(internalFieldStore, type, bool) {
|
|
337
408
|
batch(() => {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
} else if (internalFieldStore.kind == "object") for (const key in internalFieldStore.children) setFieldBool(internalFieldStore.children[key], type, bool);
|
|
342
|
-
else internalFieldStore[type].value = bool;
|
|
409
|
+
internalFieldStore[type].value = bool;
|
|
410
|
+
if (internalFieldStore.kind === "array") for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) setFieldBool(internalFieldStore.children[index], type, bool);
|
|
411
|
+
else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldBool(internalFieldStore.children[key], type, bool);
|
|
343
412
|
});
|
|
344
413
|
}
|
|
345
414
|
/**
|
|
@@ -354,20 +423,20 @@ function setNestedInput(internalFieldStore, input) {
|
|
|
354
423
|
if (internalFieldStore.kind === "array") {
|
|
355
424
|
const arrayInput = input ?? [];
|
|
356
425
|
const items = internalFieldStore.items.value;
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
426
|
+
const length = internalFieldStore.schema.type === "array" ? arrayInput.length : internalFieldStore.children.length;
|
|
427
|
+
if (length < items.length) internalFieldStore.items.value = items.slice(0, length);
|
|
428
|
+
else if (length > items.length) {
|
|
429
|
+
const path = JSON.parse(internalFieldStore.name);
|
|
430
|
+
for (let index = items.length; index < length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], arrayInput[index], true);
|
|
431
|
+
else {
|
|
432
|
+
internalFieldStore.children[index] = {};
|
|
433
|
+
path.push(index);
|
|
434
|
+
initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
|
|
435
|
+
path.pop();
|
|
367
436
|
}
|
|
368
|
-
internalFieldStore.items.value = [...items, ...
|
|
437
|
+
internalFieldStore.items.value = [...items, ...Array.from({ length: length - items.length }, createId)];
|
|
369
438
|
}
|
|
370
|
-
for (let index = 0; index <
|
|
439
|
+
for (let index = 0; index < length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
|
|
371
440
|
internalFieldStore.input.value = input == null ? input : true;
|
|
372
441
|
internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== internalFieldStore.items.value.length;
|
|
373
442
|
} else if (internalFieldStore.kind === "object") {
|
|
@@ -411,21 +480,22 @@ function setFieldInput(internalFormStore, path, input) {
|
|
|
411
480
|
function setInitialFieldInput(internalFieldStore, initialInput) {
|
|
412
481
|
batch(() => {
|
|
413
482
|
if (internalFieldStore.kind === "array") {
|
|
414
|
-
internalFieldStore.
|
|
483
|
+
internalFieldStore.initialInput.value = initialInput == null ? initialInput : true;
|
|
415
484
|
const initialArrayInput = initialInput ?? [];
|
|
416
|
-
|
|
485
|
+
const length = internalFieldStore.schema.type === "array" ? initialArrayInput.length : internalFieldStore.children.length;
|
|
486
|
+
if (length > internalFieldStore.children.length) {
|
|
417
487
|
const path = JSON.parse(internalFieldStore.name);
|
|
418
|
-
for (let index = internalFieldStore.children.length; index <
|
|
488
|
+
for (let index = internalFieldStore.children.length; index < length; index++) {
|
|
419
489
|
internalFieldStore.children[index] = {};
|
|
420
490
|
path.push(index);
|
|
421
491
|
initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
|
|
422
492
|
path.pop();
|
|
423
493
|
}
|
|
424
494
|
}
|
|
425
|
-
internalFieldStore.initialItems.value =
|
|
495
|
+
internalFieldStore.initialItems.value = Array.from({ length }, createId);
|
|
426
496
|
for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialArrayInput[index]);
|
|
427
497
|
} else if (internalFieldStore.kind === "object") {
|
|
428
|
-
internalFieldStore.
|
|
498
|
+
internalFieldStore.initialInput.value = initialInput == null ? initialInput : true;
|
|
429
499
|
for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
|
|
430
500
|
} else internalFieldStore.initialInput.value = initialInput;
|
|
431
501
|
});
|
|
@@ -477,44 +547,49 @@ function createFormStore(config, parse) {
|
|
|
477
547
|
async function validateFormInput(internalFormStore, config) {
|
|
478
548
|
internalFormStore.validators++;
|
|
479
549
|
internalFormStore.isValidating.value = true;
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
const path
|
|
487
|
-
|
|
488
|
-
const
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
const name = JSON.stringify(path);
|
|
495
|
-
const fieldErrors = nestedErrors[name];
|
|
496
|
-
if (fieldErrors) fieldErrors.push(issue.message);
|
|
497
|
-
else nestedErrors[name] = [issue.message];
|
|
498
|
-
} else if (rootErrors) rootErrors.push(issue.message);
|
|
499
|
-
else rootErrors = [issue.message];
|
|
500
|
-
}
|
|
501
|
-
let shouldFocus = config?.shouldFocus ?? false;
|
|
502
|
-
batch(() => {
|
|
503
|
-
walkFieldStore(internalFormStore, (internalFieldStore) => {
|
|
504
|
-
if (internalFieldStore.name === "[]") internalFieldStore.errors.value = rootErrors ?? null;
|
|
505
|
-
else {
|
|
506
|
-
const fieldErrors = nestedErrors?.[internalFieldStore.name] ?? null;
|
|
507
|
-
internalFieldStore.errors.value = fieldErrors;
|
|
508
|
-
if (shouldFocus && fieldErrors) {
|
|
509
|
-
internalFieldStore.elements[0]?.focus();
|
|
510
|
-
shouldFocus = false;
|
|
550
|
+
try {
|
|
551
|
+
const result = await internalFormStore.parse(untrack(() => /* @__PURE__ */ getFieldInput(internalFormStore)));
|
|
552
|
+
let rootErrors;
|
|
553
|
+
let nestedErrors;
|
|
554
|
+
if (result.issues) {
|
|
555
|
+
nestedErrors = {};
|
|
556
|
+
for (const issue of result.issues) if (issue.path) {
|
|
557
|
+
const path = [];
|
|
558
|
+
for (const pathItem of issue.path) {
|
|
559
|
+
const key = pathItem.key;
|
|
560
|
+
const keyType = typeof key;
|
|
561
|
+
const itemType = pathItem.type;
|
|
562
|
+
if (keyType !== "string" && keyType !== "number" || itemType === "map" || itemType === "set") break;
|
|
563
|
+
path.push(key);
|
|
511
564
|
}
|
|
512
|
-
|
|
565
|
+
const name = JSON.stringify(path);
|
|
566
|
+
const fieldErrors = nestedErrors[name];
|
|
567
|
+
if (fieldErrors) fieldErrors.push(issue.message);
|
|
568
|
+
else nestedErrors[name] = [issue.message];
|
|
569
|
+
} else if (rootErrors) rootErrors.push(issue.message);
|
|
570
|
+
else rootErrors = [issue.message];
|
|
571
|
+
}
|
|
572
|
+
let shouldFocus = config?.shouldFocus ?? false;
|
|
573
|
+
batch(() => {
|
|
574
|
+
walkFieldStore(internalFormStore, (internalFieldStore) => {
|
|
575
|
+
if (internalFieldStore.name === "[]") internalFieldStore.errors.value = rootErrors ?? null;
|
|
576
|
+
else {
|
|
577
|
+
const fieldErrors = nestedErrors?.[internalFieldStore.name] ?? null;
|
|
578
|
+
internalFieldStore.errors.value = fieldErrors;
|
|
579
|
+
if (shouldFocus && fieldErrors && focusFieldElement(internalFieldStore)) shouldFocus = false;
|
|
580
|
+
}
|
|
581
|
+
});
|
|
582
|
+
internalFormStore.validators--;
|
|
583
|
+
internalFormStore.isValidating.value = internalFormStore.validators > 0;
|
|
513
584
|
});
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
585
|
+
return result;
|
|
586
|
+
} catch (error) {
|
|
587
|
+
batch(() => {
|
|
588
|
+
internalFormStore.validators--;
|
|
589
|
+
internalFormStore.isValidating.value = internalFormStore.validators > 0;
|
|
590
|
+
});
|
|
591
|
+
throw error;
|
|
592
|
+
}
|
|
518
593
|
}
|
|
519
594
|
/**
|
|
520
595
|
* Validates the form input if required based on the validation mode and form
|
|
@@ -536,7 +611,7 @@ const INTERNAL = "~internal";
|
|
|
536
611
|
//#endregion
|
|
537
612
|
//#region ../../packages/methods/dist/index.preact.js
|
|
538
613
|
/**
|
|
539
|
-
* Focuses the first input element of a field. This is useful for
|
|
614
|
+
* Focuses the first focusable input element of a field. This is useful for
|
|
540
615
|
* programmatically setting focus to a specific field, such as after
|
|
541
616
|
* validation errors or user interactions.
|
|
542
617
|
*
|
|
@@ -544,7 +619,7 @@ const INTERNAL = "~internal";
|
|
|
544
619
|
* @param config The focus field configuration.
|
|
545
620
|
*/
|
|
546
621
|
function focus(form, config) {
|
|
547
|
-
getFieldStore(form[INTERNAL], config.path)
|
|
622
|
+
focusFieldElement(getFieldStore(form[INTERNAL], config.path));
|
|
548
623
|
}
|
|
549
624
|
/**
|
|
550
625
|
* Retrieves all error messages from all fields in the form by walking through
|
|
@@ -567,6 +642,17 @@ function getAllErrors(form) {
|
|
|
567
642
|
return allErrors;
|
|
568
643
|
}
|
|
569
644
|
/* @__NO_SIDE_EFFECTS__ */
|
|
645
|
+
function getDirtyInput(form, config) {
|
|
646
|
+
return getDirtyFieldInput(config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]);
|
|
647
|
+
}
|
|
648
|
+
/* @__NO_SIDE_EFFECTS__ */
|
|
649
|
+
function getDirtyPaths(form, config) {
|
|
650
|
+
config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL];
|
|
651
|
+
const paths = [];
|
|
652
|
+
config?.path && [...config.path];
|
|
653
|
+
return paths;
|
|
654
|
+
}
|
|
655
|
+
/* @__NO_SIDE_EFFECTS__ */
|
|
570
656
|
function getErrors(form, config) {
|
|
571
657
|
return (config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]).errors.value;
|
|
572
658
|
}
|
|
@@ -660,6 +746,48 @@ function move(form, config) {
|
|
|
660
746
|
});
|
|
661
747
|
}
|
|
662
748
|
/**
|
|
749
|
+
* Picks only the dirty parts of the given value, using the form's dirty fields
|
|
750
|
+
* as a structural mask. Arrays are treated as atomic and object keys without a
|
|
751
|
+
* dirty descendant are omitted. Returns `undefined` if no field is dirty.
|
|
752
|
+
* Useful for filtering a validated output down to its changed parts before
|
|
753
|
+
* submitting.
|
|
754
|
+
*
|
|
755
|
+
* @param form The form store providing the dirty mask.
|
|
756
|
+
* @param config The pick dirty configuration.
|
|
757
|
+
*
|
|
758
|
+
* @returns The dirty parts of the value, or `undefined`.
|
|
759
|
+
*/
|
|
760
|
+
/* @__NO_SIDE_EFFECTS__ */
|
|
761
|
+
function pickDirty(form, config) {
|
|
762
|
+
if (!getFieldBool(form[INTERNAL], "isDirty")) return;
|
|
763
|
+
const result = /* @__PURE__ */ pickFieldValue(form[INTERNAL], config.from);
|
|
764
|
+
return Object.keys(result).length ? result : void 0;
|
|
765
|
+
}
|
|
766
|
+
/**
|
|
767
|
+
* Recursively picks the dirty parts of a value using the field store as a
|
|
768
|
+
* structural mask, reading from the supplied value rather than the form's own
|
|
769
|
+
* input. Objects with non-nullish input recurse into their dirty children that
|
|
770
|
+
* are present in the value, while arrays, primitives, nullish-cleared fields
|
|
771
|
+
* and shape-diverging values are returned as-is.
|
|
772
|
+
*
|
|
773
|
+
* @param internalFieldStore The field store used as the dirty mask.
|
|
774
|
+
* @param value The value to pick the dirty parts from.
|
|
775
|
+
*
|
|
776
|
+
* @returns The dirty parts of the value.
|
|
777
|
+
*/
|
|
778
|
+
/* @__NO_SIDE_EFFECTS__ */
|
|
779
|
+
function pickFieldValue(internalFieldStore, value) {
|
|
780
|
+
if (internalFieldStore.kind === "object" && internalFieldStore.input.value && value && typeof value === "object" && !Array.isArray(value)) {
|
|
781
|
+
const result = {};
|
|
782
|
+
for (const key in internalFieldStore.children) {
|
|
783
|
+
const child = internalFieldStore.children[key];
|
|
784
|
+
if (getFieldBool(child, "isDirty") && key in value) result[key] = /* @__PURE__ */ pickFieldValue(child, value[key]);
|
|
785
|
+
}
|
|
786
|
+
return result;
|
|
787
|
+
}
|
|
788
|
+
return value;
|
|
789
|
+
}
|
|
790
|
+
/**
|
|
663
791
|
* Removes an item from a field array at the specified index. All items after
|
|
664
792
|
* the removed item are shifted down by one index.
|
|
665
793
|
*
|
|
@@ -825,7 +953,10 @@ function useField(form, config) {
|
|
|
825
953
|
const internalFieldStore = useComputed(() => getFieldStore(internalFormStore, pathSignal.value));
|
|
826
954
|
useSignalEffect(() => {
|
|
827
955
|
return () => {
|
|
828
|
-
|
|
956
|
+
const internalFieldStoreValue = internalFieldStore.value;
|
|
957
|
+
const elements = internalFieldStoreValue.elements.filter((element) => element.isConnected);
|
|
958
|
+
if (internalFieldStoreValue.elements === internalFieldStoreValue.initialElements) internalFieldStoreValue.initialElements = elements;
|
|
959
|
+
internalFieldStoreValue.elements = elements;
|
|
829
960
|
};
|
|
830
961
|
});
|
|
831
962
|
return useMemo(() => ({
|
|
@@ -952,4 +1083,4 @@ function Form({ of, onSubmit, ...other }) {
|
|
|
952
1083
|
}
|
|
953
1084
|
|
|
954
1085
|
//#endregion
|
|
955
|
-
export { Field, FieldArray, Form, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };
|
|
1086
|
+
export { Field, FieldArray, Form, focus, getAllErrors, getDirtyInput, getDirtyPaths, getErrors, getInput, handleSubmit, insert, move, pickDirty, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formisch/preact",
|
|
3
3
|
"description": "The lightweight, schema-first, and fully type-safe form library for Preact",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.11.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Fabian Hiller",
|
|
7
7
|
"homepage": "https://formisch.dev",
|
|
@@ -44,26 +44,27 @@
|
|
|
44
44
|
"@formisch/core": "workspace:*",
|
|
45
45
|
"@formisch/eslint-config": "workspace:*",
|
|
46
46
|
"@formisch/methods": "workspace:*",
|
|
47
|
-
"@preact/preset-vite": "^2.
|
|
48
|
-
"@preact/signals": "^2.
|
|
47
|
+
"@preact/preset-vite": "^2.10.5",
|
|
48
|
+
"@preact/signals": "^2.9.0",
|
|
49
49
|
"@testing-library/jest-dom": "^6.6.0",
|
|
50
50
|
"@testing-library/preact": "^3.2.4",
|
|
51
|
-
"@
|
|
51
|
+
"@types/node": "24.0.13",
|
|
52
|
+
"@vitest/coverage-v8": "^4.1.7",
|
|
52
53
|
"eslint": "^9.31.0",
|
|
53
54
|
"eslint-config-preact": "^2.0.0",
|
|
54
55
|
"jsdom": "^26.1.0",
|
|
55
|
-
"preact": "^10.
|
|
56
|
+
"preact": "^10.29.2",
|
|
56
57
|
"tsdown": "^0.16.8",
|
|
57
58
|
"typescript": "^5.8.3",
|
|
58
|
-
"valibot": "^1.
|
|
59
|
+
"valibot": "^1.4.1",
|
|
59
60
|
"vite": "^6.0.4",
|
|
60
|
-
"vitest": "^
|
|
61
|
+
"vitest": "^4.1.7"
|
|
61
62
|
},
|
|
62
63
|
"peerDependencies": {
|
|
63
64
|
"@preact/signals": "^2.0.0",
|
|
64
65
|
"preact": "^10.0.0",
|
|
65
66
|
"typescript": ">=5",
|
|
66
|
-
"valibot": "^1.
|
|
67
|
+
"valibot": "^1.4.1"
|
|
67
68
|
},
|
|
68
69
|
"peerDependenciesMeta": {
|
|
69
70
|
"typescript": {
|