@vuehookform/core 0.1.2 → 0.2.7
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 +15 -13
- package/dist/core/formContext.d.ts +10 -1
- package/dist/core/useFieldArray.d.ts +3 -3
- package/dist/core/useFieldRegistration.d.ts +2 -2
- package/dist/core/useValidation.d.ts +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/types.d.ts +301 -33
- package/dist/vuehookform.cjs +432 -118
- package/dist/vuehookform.js +433 -120
- package/package.json +14 -2
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A TypeScript-first form library for Vue 3, inspired by React Hook Form.
|
|
4
4
|
|
|
5
|
+
[](https://www.npmjs.com/package/@vuehookform/core) [](https://github.com/vuehookform/core/actions/workflows/ci.yml) [](https://opensource.org/licenses/MIT) [](https://www.typescriptlang.org/) [](https://github.com/vuehookform/core)
|
|
6
|
+
|
|
5
7
|
## Features
|
|
6
8
|
|
|
7
9
|
- **TypeScript First** - Perfect type inference with zero manual typing
|
|
@@ -87,7 +89,7 @@ const addresses = fields('addresses')
|
|
|
87
89
|
```typescript
|
|
88
90
|
useForm({
|
|
89
91
|
schema,
|
|
90
|
-
mode: 'onSubmit',
|
|
92
|
+
mode: 'onSubmit', // Only validate on submit (default)
|
|
91
93
|
// mode: 'onBlur', // Validate when field loses focus
|
|
92
94
|
// mode: 'onChange', // Validate on every keystroke
|
|
93
95
|
// mode: 'onTouched', // Validate after field is touched
|
|
@@ -100,19 +102,19 @@ useForm({
|
|
|
100
102
|
|
|
101
103
|
```typescript
|
|
102
104
|
const {
|
|
103
|
-
register,
|
|
104
|
-
handleSubmit,
|
|
105
|
-
formState,
|
|
106
|
-
fields,
|
|
107
|
-
setValue,
|
|
108
|
-
getValue,
|
|
109
|
-
reset,
|
|
110
|
-
watch,
|
|
111
|
-
validate,
|
|
105
|
+
register, // Register input field
|
|
106
|
+
handleSubmit, // Create submit handler with validation
|
|
107
|
+
formState, // Reactive form state (errors, isSubmitting, etc.)
|
|
108
|
+
fields, // Manage dynamic field arrays
|
|
109
|
+
setValue, // Programmatically set field value
|
|
110
|
+
getValue, // Get current field value
|
|
111
|
+
reset, // Reset form to default values
|
|
112
|
+
watch, // Watch field value changes
|
|
113
|
+
validate, // Manually trigger validation
|
|
112
114
|
} = useForm({
|
|
113
|
-
schema,
|
|
114
|
-
defaultValues: {},
|
|
115
|
-
mode: 'onSubmit',
|
|
115
|
+
schema, // Zod schema for validation
|
|
116
|
+
defaultValues: {}, // Initial form values
|
|
117
|
+
mode: 'onSubmit', // When to validate
|
|
116
118
|
})
|
|
117
119
|
```
|
|
118
120
|
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { Ref, ShallowRef } from 'vue';
|
|
2
2
|
import { ZodType } from 'zod';
|
|
3
|
-
import { UseFormOptions, FieldErrors, InferSchema, RegisterOptions, FieldArrayItem } from '../types';
|
|
3
|
+
import { UseFormOptions, FieldErrors, FieldErrorValue, InferSchema, RegisterOptions, FieldArrayItem, FieldArrayRules } from '../types';
|
|
4
4
|
/**
|
|
5
5
|
* Internal state for field array management
|
|
6
6
|
*/
|
|
7
7
|
export interface FieldArrayState {
|
|
8
8
|
items: Ref<FieldArrayItem[]>;
|
|
9
9
|
values: unknown[];
|
|
10
|
+
indexCache: Map<string, number>;
|
|
11
|
+
rules?: FieldArrayRules;
|
|
10
12
|
}
|
|
11
13
|
/**
|
|
12
14
|
* Cached event handlers for a field to prevent recreation on every render
|
|
@@ -29,12 +31,19 @@ export interface FormContext<FormValues> {
|
|
|
29
31
|
isSubmitting: Ref<boolean>;
|
|
30
32
|
isLoading: Ref<boolean>;
|
|
31
33
|
submitCount: Ref<number>;
|
|
34
|
+
defaultValuesError: Ref<unknown>;
|
|
35
|
+
isSubmitSuccessful: Ref<boolean>;
|
|
36
|
+
validatingFields: ShallowRef<Record<string, boolean>>;
|
|
37
|
+
externalErrors: ShallowRef<FieldErrors<FormValues>>;
|
|
38
|
+
errorDelayTimers: Map<string, ReturnType<typeof setTimeout>>;
|
|
39
|
+
pendingErrors: Map<string, FieldErrorValue>;
|
|
32
40
|
fieldRefs: Map<string, Ref<HTMLInputElement | null>>;
|
|
33
41
|
fieldOptions: Map<string, RegisterOptions>;
|
|
34
42
|
fieldArrays: Map<string, FieldArrayState>;
|
|
35
43
|
fieldHandlers: Map<string, FieldHandlers>;
|
|
36
44
|
debounceTimers: Map<string, ReturnType<typeof setTimeout>>;
|
|
37
45
|
validationRequestIds: Map<string, number>;
|
|
46
|
+
resetGeneration: Ref<number>;
|
|
38
47
|
options: UseFormOptions<ZodType>;
|
|
39
48
|
}
|
|
40
49
|
/**
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FormContext } from './formContext';
|
|
2
|
-
import { FieldArray, Path } from '../types';
|
|
2
|
+
import { FieldArray, FieldArrayOptions, Path } from '../types';
|
|
3
3
|
/**
|
|
4
4
|
* Create field array management functions
|
|
5
5
|
*/
|
|
6
|
-
export declare function createFieldArrayManager<FormValues>(ctx: FormContext<FormValues>, validate: (fieldPath?: string) => Promise<boolean
|
|
7
|
-
fields: <TPath extends Path<FormValues>>(name: TPath) => FieldArray;
|
|
6
|
+
export declare function createFieldArrayManager<FormValues>(ctx: FormContext<FormValues>, validate: (fieldPath?: string) => Promise<boolean>, setFocus: (name: string) => void): {
|
|
7
|
+
fields: <TPath extends Path<FormValues>>(name: TPath, options?: FieldArrayOptions) => FieldArray;
|
|
8
8
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { FormContext } from './formContext';
|
|
2
|
-
import { RegisterOptions, RegisterReturn, Path } from '../types';
|
|
2
|
+
import { RegisterOptions, RegisterReturn, UnregisterOptions, Path } from '../types';
|
|
3
3
|
/**
|
|
4
4
|
* Create field registration functions
|
|
5
5
|
*/
|
|
6
6
|
export declare function createFieldRegistration<FormValues>(ctx: FormContext<FormValues>, validate: (fieldPath?: string) => Promise<boolean>): {
|
|
7
7
|
register: <TPath extends Path<FormValues>>(name: TPath, registerOptions?: RegisterOptions) => RegisterReturn;
|
|
8
|
-
unregister: <TPath extends Path<FormValues>>(name: TPath) => void;
|
|
8
|
+
unregister: <TPath extends Path<FormValues>>(name: TPath, options?: UnregisterOptions) => void;
|
|
9
9
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -19,4 +19,5 @@ export { provideForm, useFormContext, FormContextKey } from './context';
|
|
|
19
19
|
export { useWatch, type UseWatchOptions } from './useWatch';
|
|
20
20
|
export { useController, type UseControllerOptions, type UseControllerReturn, type ControllerFieldProps } from './useController';
|
|
21
21
|
export { useFormState, type UseFormStateOptions, type FormStateKey } from './useFormState';
|
|
22
|
-
export
|
|
22
|
+
export { isFieldError } from './types';
|
|
23
|
+
export type { UseFormOptions, UseFormReturn, RegisterOptions, RegisterReturn, FormState, FieldState, FieldErrors, FieldError, FieldErrorValue, ErrorOption, FieldArray, FieldArrayItem, InferSchema, FormValues, FormPath, Path, PathValue, ArrayElement, ArrayPath, ValidationMode, SetFocusOptions, ResetOptions, ResetFieldOptions, AsyncDefaultValues, } from './types';
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComputedRef, Ref } from 'vue';
|
|
1
|
+
import { ComponentPublicInstance, ComputedRef, MaybeRef, Ref } from 'vue';
|
|
2
2
|
import { ZodType, z } from 'zod';
|
|
3
3
|
/**
|
|
4
4
|
* Validation mode determines when validation occurs
|
|
@@ -9,17 +9,72 @@ export type ValidationMode = 'onSubmit' | 'onBlur' | 'onChange' | 'onTouched';
|
|
|
9
9
|
*/
|
|
10
10
|
export type InferSchema<T extends ZodType> = z.infer<T>;
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
12
|
+
* Alias for InferSchema - extracts form value type from schema.
|
|
13
|
+
* Use this when you need the actual form data type.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* const schema = z.object({ email: z.string(), age: z.number() })
|
|
17
|
+
* type MyFormValues = FormValues<typeof schema>
|
|
18
|
+
* // Result: { email: string; age: number }
|
|
19
|
+
*/
|
|
20
|
+
export type FormValues<TSchema extends ZodType> = InferSchema<TSchema>;
|
|
21
|
+
/**
|
|
22
|
+
* Extract the element type from an array type.
|
|
23
|
+
* Returns `never` if T is not an array.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* type Item = ArrayElement<string[]> // string
|
|
27
|
+
* type Never = ArrayElement<string> // never
|
|
28
|
+
*/
|
|
29
|
+
export type ArrayElement<T> = T extends Array<infer U> ? U : never;
|
|
30
|
+
/**
|
|
31
|
+
* Generate all possible dot-notation paths for a nested object type.
|
|
32
|
+
* Provides IDE autocomplete for valid field names.
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* type Form = { user: { name: string; age: number }; tags: string[] }
|
|
36
|
+
* type FormPaths = Path<Form>
|
|
37
|
+
* // Result: 'user' | 'user.name' | 'user.age' | 'tags'
|
|
38
|
+
*
|
|
39
|
+
* @example Using with register
|
|
40
|
+
* register('user.name') // ✅ Valid - autocomplete suggests this
|
|
41
|
+
* register('user.invalid') // ❌ TypeScript error
|
|
14
42
|
*/
|
|
15
43
|
export type Path<T> = T extends object ? {
|
|
16
44
|
[K in keyof T & (string | number)]: K extends string | number ? `${K}` | `${K}.${Path<T[K]>}` : never;
|
|
17
45
|
}[keyof T & (string | number)] : never;
|
|
18
46
|
/**
|
|
19
|
-
*
|
|
20
|
-
*
|
|
47
|
+
* Type alias for valid field paths in a form.
|
|
48
|
+
* Provides autocomplete for all dot-notation paths.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* type MyPaths = FormPath<typeof schema>
|
|
52
|
+
* // Use with functions that accept field paths
|
|
21
53
|
*/
|
|
22
|
-
export type
|
|
54
|
+
export type FormPath<TSchema extends ZodType> = Path<FormValues<TSchema>>;
|
|
55
|
+
/**
|
|
56
|
+
* Get array field paths (fields that are arrays).
|
|
57
|
+
* Useful for the fields() method which only works with array fields.
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* type Form = { name: string; addresses: Address[] }
|
|
61
|
+
* type ArrayFields = ArrayPath<Form> // 'addresses'
|
|
62
|
+
*/
|
|
63
|
+
export type ArrayPath<T> = {
|
|
64
|
+
[K in Path<T>]: PathValue<T, K> extends Array<unknown> ? K : never;
|
|
65
|
+
}[Path<T>];
|
|
66
|
+
/**
|
|
67
|
+
* Extract the value type at a given dot-notation path.
|
|
68
|
+
* Used internally to ensure setValue/getValue have correct types.
|
|
69
|
+
* Supports numeric string indices for array access (e.g., 'items.0.name').
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* type Form = { user: { name: string }; items: { id: number }[] }
|
|
73
|
+
* type NameType = PathValue<Form, 'user.name'> // string
|
|
74
|
+
* type ItemType = PathValue<Form, 'items.0'> // { id: number }
|
|
75
|
+
* type ItemId = PathValue<Form, 'items.0.id'> // number
|
|
76
|
+
*/
|
|
77
|
+
export type PathValue<T, P extends string> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? PathValue<T[K], Rest> : T extends Array<infer U> ? K extends `${number}` ? PathValue<U, Rest> : never : never : P extends keyof T ? T[P] : T extends Array<infer U> ? P extends `${number}` ? U : never : never;
|
|
23
78
|
/**
|
|
24
79
|
* Single field error with type and message
|
|
25
80
|
*/
|
|
@@ -32,7 +87,21 @@ export interface FieldError {
|
|
|
32
87
|
types?: Record<string, string | string[]>;
|
|
33
88
|
}
|
|
34
89
|
/**
|
|
35
|
-
* Field error value -
|
|
90
|
+
* Field error value - supports both simple strings and structured errors.
|
|
91
|
+
*
|
|
92
|
+
* - When `criteriaMode: 'firstError'` (default): Errors are typically strings
|
|
93
|
+
* - When `criteriaMode: 'all'`: Errors are FieldError objects with `types` populated
|
|
94
|
+
*
|
|
95
|
+
* Use the `isFieldError()` type guard to safely handle both cases:
|
|
96
|
+
* @example
|
|
97
|
+
* const error = formState.value.errors.email
|
|
98
|
+
* if (isFieldError(error)) {
|
|
99
|
+
* // Structured error with type, message, and optional types
|
|
100
|
+
* console.log(error.type, error.message)
|
|
101
|
+
* } else if (typeof error === 'string') {
|
|
102
|
+
* // Simple string error
|
|
103
|
+
* console.log(error)
|
|
104
|
+
* }
|
|
36
105
|
*/
|
|
37
106
|
export type FieldErrorValue = string | FieldError;
|
|
38
107
|
/**
|
|
@@ -58,12 +127,24 @@ export interface FormState<T> {
|
|
|
58
127
|
isSubmitting: boolean;
|
|
59
128
|
/** Whether async default values are loading */
|
|
60
129
|
isLoading: boolean;
|
|
130
|
+
/** Whether form is ready (initialization complete, not loading) */
|
|
131
|
+
isReady: boolean;
|
|
132
|
+
/** Whether any field is currently being validated */
|
|
133
|
+
isValidating: boolean;
|
|
134
|
+
/** Record of fields currently being validated */
|
|
135
|
+
validatingFields: Record<string, boolean>;
|
|
61
136
|
/** Record of touched field paths */
|
|
62
137
|
touchedFields: Record<string, boolean>;
|
|
63
138
|
/** Record of dirty field paths */
|
|
64
139
|
dirtyFields: Record<string, boolean>;
|
|
65
140
|
/** Number of times form has been submitted */
|
|
66
141
|
submitCount: number;
|
|
142
|
+
/** Error that occurred while loading async default values */
|
|
143
|
+
defaultValuesError: unknown;
|
|
144
|
+
/** Whether form has been submitted at least once */
|
|
145
|
+
isSubmitted: boolean;
|
|
146
|
+
/** Whether the last submission was successful */
|
|
147
|
+
isSubmitSuccessful: boolean;
|
|
67
148
|
}
|
|
68
149
|
/**
|
|
69
150
|
* State of an individual field
|
|
@@ -94,6 +175,48 @@ export interface SetFocusOptions {
|
|
|
94
175
|
/** Whether to select the text in the input */
|
|
95
176
|
shouldSelect?: boolean;
|
|
96
177
|
}
|
|
178
|
+
/**
|
|
179
|
+
* Options for setValue()
|
|
180
|
+
*/
|
|
181
|
+
export interface SetValueOptions {
|
|
182
|
+
/** Trigger validation after setting value (default: false) */
|
|
183
|
+
shouldValidate?: boolean;
|
|
184
|
+
/** Mark field as dirty (default: true) */
|
|
185
|
+
shouldDirty?: boolean;
|
|
186
|
+
/** Mark field as touched (default: false) */
|
|
187
|
+
shouldTouch?: boolean;
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Options for resetField()
|
|
191
|
+
* @template TValue - The type of the field value (inferred from field path)
|
|
192
|
+
*/
|
|
193
|
+
export interface ResetFieldOptions<TValue = unknown> {
|
|
194
|
+
/** Keep validation errors after reset */
|
|
195
|
+
keepError?: boolean;
|
|
196
|
+
/** Keep dirty state after reset */
|
|
197
|
+
keepDirty?: boolean;
|
|
198
|
+
/** Keep touched state after reset */
|
|
199
|
+
keepTouched?: boolean;
|
|
200
|
+
/** New default value (updates stored default) - typed to match field */
|
|
201
|
+
defaultValue?: TValue;
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* Options for unregister()
|
|
205
|
+
*/
|
|
206
|
+
export interface UnregisterOptions {
|
|
207
|
+
/** Keep the field value in form data */
|
|
208
|
+
keepValue?: boolean;
|
|
209
|
+
/** Keep validation errors */
|
|
210
|
+
keepError?: boolean;
|
|
211
|
+
/** Keep dirty state */
|
|
212
|
+
keepDirty?: boolean;
|
|
213
|
+
/** Keep touched state */
|
|
214
|
+
keepTouched?: boolean;
|
|
215
|
+
/** Keep the default value */
|
|
216
|
+
keepDefaultValue?: boolean;
|
|
217
|
+
/** Don't re-evaluate isValid */
|
|
218
|
+
keepIsValid?: boolean;
|
|
219
|
+
}
|
|
97
220
|
/**
|
|
98
221
|
* Options for reset()
|
|
99
222
|
*/
|
|
@@ -110,36 +233,69 @@ export interface ResetOptions {
|
|
|
110
233
|
keepDefaultValues?: boolean;
|
|
111
234
|
/** Keep isSubmitting state after reset */
|
|
112
235
|
keepIsSubmitting?: boolean;
|
|
236
|
+
/** Keep isSubmitSuccessful state after reset */
|
|
237
|
+
keepIsSubmitSuccessful?: boolean;
|
|
113
238
|
}
|
|
114
239
|
/**
|
|
115
240
|
* Options for registering a field
|
|
241
|
+
* @template TValue - The type of the field value (inferred from field path)
|
|
116
242
|
*/
|
|
117
|
-
export interface RegisterOptions {
|
|
243
|
+
export interface RegisterOptions<TValue = unknown> {
|
|
118
244
|
/** Use controlled mode (v-model) instead of uncontrolled (ref) */
|
|
119
245
|
controlled?: boolean;
|
|
120
246
|
/** Disable validation for this field */
|
|
121
247
|
disabled?: boolean;
|
|
122
|
-
/**
|
|
123
|
-
|
|
248
|
+
/**
|
|
249
|
+
* Custom validation function - receives the typed field value.
|
|
250
|
+
* Return an error message string to indicate validation failure,
|
|
251
|
+
* or undefined to indicate success.
|
|
252
|
+
*
|
|
253
|
+
* @example
|
|
254
|
+
* register('email', {
|
|
255
|
+
* validate: (value) => {
|
|
256
|
+
* // value is typed as string (inferred from schema)
|
|
257
|
+
* if (!value.includes('@')) return 'Must be a valid email'
|
|
258
|
+
* }
|
|
259
|
+
* })
|
|
260
|
+
*/
|
|
261
|
+
validate?: (value: TValue) => string | undefined | Promise<string | undefined>;
|
|
124
262
|
/** Debounce time in ms for async validation (default: 0 = no debounce) */
|
|
125
263
|
validateDebounce?: number;
|
|
126
264
|
/** Remove field data when unmounted (overrides global shouldUnregister option) */
|
|
127
265
|
shouldUnregister?: boolean;
|
|
266
|
+
/** Dependent fields to re-validate when this field changes */
|
|
267
|
+
deps?: string[];
|
|
128
268
|
}
|
|
129
269
|
/**
|
|
130
|
-
* Return value from register() for binding to inputs
|
|
270
|
+
* Return value from register() for binding to inputs.
|
|
271
|
+
* Use object spread to bind all properties to your input element.
|
|
272
|
+
*
|
|
273
|
+
* @template TValue - The type of the field value (inferred from field path)
|
|
274
|
+
*
|
|
275
|
+
* @example
|
|
276
|
+
* // Uncontrolled (default) - uses ref for DOM access
|
|
277
|
+
* <input v-bind="register('email')" />
|
|
278
|
+
*
|
|
279
|
+
* @example
|
|
280
|
+
* // Controlled - uses v-model via value ref
|
|
281
|
+
* const { value, ...rest } = register('email', { controlled: true })
|
|
282
|
+
* <input v-model="value" v-bind="rest" />
|
|
131
283
|
*/
|
|
132
|
-
export interface RegisterReturn {
|
|
284
|
+
export interface RegisterReturn<TValue = unknown> {
|
|
133
285
|
/** Field name for form data */
|
|
134
286
|
name: string;
|
|
135
|
-
/**
|
|
136
|
-
|
|
287
|
+
/**
|
|
288
|
+
* Ref callback for uncontrolled inputs.
|
|
289
|
+
* Compatible with Vue's template ref system (v-bind spreads this onto elements).
|
|
290
|
+
* Internally handles HTMLInputElement, HTMLSelectElement, and HTMLTextAreaElement.
|
|
291
|
+
*/
|
|
292
|
+
ref: (el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | Element | ComponentPublicInstance | null, refs?: Record<string, unknown>) => void;
|
|
137
293
|
/** Input handler (fires on every keystroke) */
|
|
138
294
|
onInput: (e: Event) => void;
|
|
139
295
|
/** Blur handler */
|
|
140
296
|
onBlur: (e: Event) => void;
|
|
141
297
|
/** Current value (for controlled mode) - only present when controlled: true */
|
|
142
|
-
value?: Ref<
|
|
298
|
+
value?: Ref<TValue>;
|
|
143
299
|
}
|
|
144
300
|
/**
|
|
145
301
|
* Field metadata for dynamic arrays
|
|
@@ -153,30 +309,79 @@ export interface FieldArrayItem {
|
|
|
153
309
|
remove: () => void;
|
|
154
310
|
}
|
|
155
311
|
/**
|
|
156
|
-
*
|
|
312
|
+
* Focus options for field array operations
|
|
157
313
|
*/
|
|
158
|
-
export interface
|
|
314
|
+
export interface FieldArrayFocusOptions {
|
|
315
|
+
/** Whether to focus after operation (default: true for append/prepend/insert) */
|
|
316
|
+
shouldFocus?: boolean;
|
|
317
|
+
/** Which item index to focus relative to added items (default: 0 = first added) */
|
|
318
|
+
focusIndex?: number;
|
|
319
|
+
/** Field name within the item to focus (e.g., 'name' for items.X.name) */
|
|
320
|
+
focusName?: string;
|
|
321
|
+
}
|
|
322
|
+
/**
|
|
323
|
+
* Rules for validating field arrays
|
|
324
|
+
*/
|
|
325
|
+
export interface FieldArrayRules<T = unknown> {
|
|
326
|
+
/** Minimum number of items required */
|
|
327
|
+
minLength?: {
|
|
328
|
+
value: number;
|
|
329
|
+
message: string;
|
|
330
|
+
};
|
|
331
|
+
/** Maximum number of items allowed */
|
|
332
|
+
maxLength?: {
|
|
333
|
+
value: number;
|
|
334
|
+
message: string;
|
|
335
|
+
};
|
|
336
|
+
/** Custom validation function - return error message or true if valid */
|
|
337
|
+
validate?: (items: T[]) => string | true | Promise<string | true>;
|
|
338
|
+
}
|
|
339
|
+
/**
|
|
340
|
+
* Options for configuring field arrays
|
|
341
|
+
*/
|
|
342
|
+
export interface FieldArrayOptions<T = unknown> {
|
|
343
|
+
/** Validation rules for the array itself */
|
|
344
|
+
rules?: FieldArrayRules<T>;
|
|
345
|
+
}
|
|
346
|
+
/**
|
|
347
|
+
* API for managing dynamic field arrays.
|
|
348
|
+
* All methods that accept values are typed to match the array item type.
|
|
349
|
+
*
|
|
350
|
+
* @template TItem - The type of items in the array (inferred from field path)
|
|
351
|
+
*
|
|
352
|
+
* @example
|
|
353
|
+
* interface Address { street: string; city: string }
|
|
354
|
+
* const addresses = fields('addresses') // FieldArray<Address>
|
|
355
|
+
* addresses.append({ street: '123 Main', city: 'NYC' }) // Typed!
|
|
356
|
+
*/
|
|
357
|
+
export interface FieldArray<TItem = unknown> {
|
|
159
358
|
/** Current field items with metadata */
|
|
160
359
|
value: FieldArrayItem[];
|
|
161
|
-
/** Append item to end of array */
|
|
162
|
-
append: (value:
|
|
163
|
-
/** Prepend item to beginning of array */
|
|
164
|
-
prepend: (value:
|
|
360
|
+
/** Append item(s) to end of array */
|
|
361
|
+
append: (value: TItem | TItem[], options?: FieldArrayFocusOptions) => void;
|
|
362
|
+
/** Prepend item(s) to beginning of array */
|
|
363
|
+
prepend: (value: TItem | TItem[], options?: FieldArrayFocusOptions) => void;
|
|
165
364
|
/** Remove item at index */
|
|
166
365
|
remove: (index: number) => void;
|
|
167
|
-
/** Insert item at index */
|
|
168
|
-
insert: (index: number, value:
|
|
366
|
+
/** Insert item(s) at index */
|
|
367
|
+
insert: (index: number, value: TItem | TItem[], options?: FieldArrayFocusOptions) => void;
|
|
169
368
|
/** Swap two items */
|
|
170
369
|
swap: (indexA: number, indexB: number) => void;
|
|
171
370
|
/** Move item from one index to another */
|
|
172
371
|
move: (from: number, to: number) => void;
|
|
173
372
|
/** Update item at index (preserves key/identity) */
|
|
174
|
-
update: (index: number, value:
|
|
373
|
+
update: (index: number, value: TItem) => void;
|
|
374
|
+
/** Replace all items with new values */
|
|
375
|
+
replace: (values: TItem[]) => void;
|
|
175
376
|
}
|
|
176
377
|
/**
|
|
177
378
|
* Async default values function type
|
|
178
379
|
*/
|
|
179
380
|
export type AsyncDefaultValues<T> = () => Promise<Partial<T>>;
|
|
381
|
+
/**
|
|
382
|
+
* Criteria mode for error collection
|
|
383
|
+
*/
|
|
384
|
+
export type CriteriaMode = 'firstError' | 'all';
|
|
180
385
|
/**
|
|
181
386
|
* Options for useForm composable
|
|
182
387
|
*/
|
|
@@ -191,23 +396,52 @@ export interface UseFormOptions<TSchema extends ZodType> {
|
|
|
191
396
|
reValidateMode?: ValidationMode;
|
|
192
397
|
/** Remove field data when unmounted (default: false) */
|
|
193
398
|
shouldUnregister?: boolean;
|
|
399
|
+
/** Callback when async default values fail to load */
|
|
400
|
+
onDefaultValuesError?: (error: unknown) => void;
|
|
401
|
+
/** Focus first field with error on submit (default: true) */
|
|
402
|
+
shouldFocusError?: boolean;
|
|
403
|
+
/** How to collect validation errors: 'firstError' or 'all' (default: 'firstError') */
|
|
404
|
+
criteriaMode?: CriteriaMode;
|
|
405
|
+
/** Delay before displaying validation errors in milliseconds (default: 0 = no delay) */
|
|
406
|
+
delayError?: number;
|
|
407
|
+
/**
|
|
408
|
+
* External values to sync to form. Changes update formData without marking dirty.
|
|
409
|
+
* Useful for server-fetched data or parent component state.
|
|
410
|
+
*/
|
|
411
|
+
values?: MaybeRef<Partial<InferSchema<TSchema>>>;
|
|
412
|
+
/**
|
|
413
|
+
* External/server errors to merge with validation errors.
|
|
414
|
+
* Useful for server-side validation errors.
|
|
415
|
+
*/
|
|
416
|
+
errors?: MaybeRef<Partial<FieldErrors<InferSchema<TSchema>>>>;
|
|
194
417
|
}
|
|
195
418
|
/**
|
|
196
|
-
* Return value from useForm composable
|
|
419
|
+
* Return value from useForm composable.
|
|
420
|
+
* Provides full type safety with autocomplete for field paths and typed values.
|
|
421
|
+
*
|
|
422
|
+
* @template TSchema - The Zod schema type for form validation
|
|
197
423
|
*/
|
|
198
424
|
export interface UseFormReturn<TSchema extends ZodType> {
|
|
199
425
|
/**
|
|
200
|
-
* Register an input field
|
|
426
|
+
* Register an input field for form management.
|
|
427
|
+
* Returns props to spread onto your input element.
|
|
428
|
+
*
|
|
201
429
|
* @param name - Field path (e.g., 'email' or 'user.address.street')
|
|
202
|
-
* @param options - Registration options
|
|
430
|
+
* @param options - Registration options (validation, controlled mode, etc.)
|
|
431
|
+
* @returns Props to bind to the input element
|
|
432
|
+
*
|
|
433
|
+
* @example
|
|
434
|
+
* <input v-bind="register('email')" />
|
|
435
|
+
* <input v-bind="register('age', { validate: (v) => v >= 0 || 'Must be positive' })" />
|
|
203
436
|
*/
|
|
204
|
-
register: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, options?: RegisterOptions) => RegisterReturn
|
|
437
|
+
register: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, options?: RegisterOptions<PathValue<InferSchema<TSchema>, TPath>>) => RegisterReturn<PathValue<InferSchema<TSchema>, TPath>>;
|
|
205
438
|
/**
|
|
206
439
|
* Unregister a field to clean up refs and options
|
|
207
440
|
* Call this when a field is unmounted to prevent memory leaks
|
|
208
441
|
* @param name - Field path to unregister
|
|
442
|
+
* @param options - Options for what state to preserve
|
|
209
443
|
*/
|
|
210
|
-
unregister: <TPath extends Path<InferSchema<TSchema>>>(name: TPath) => void;
|
|
444
|
+
unregister: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, options?: UnregisterOptions) => void;
|
|
211
445
|
/**
|
|
212
446
|
* Handle form submission
|
|
213
447
|
* @param onValid - Callback called with valid data
|
|
@@ -217,19 +451,29 @@ export interface UseFormReturn<TSchema extends ZodType> {
|
|
|
217
451
|
/** Reactive form state */
|
|
218
452
|
formState: ComputedRef<FormState<InferSchema<TSchema>>>;
|
|
219
453
|
/**
|
|
220
|
-
* Manage dynamic field arrays
|
|
454
|
+
* Manage dynamic field arrays.
|
|
455
|
+
* Returns a typed API for adding, removing, and reordering array items.
|
|
456
|
+
*
|
|
221
457
|
* @param name - Array field path
|
|
458
|
+
* @param options - Optional configuration including validation rules
|
|
459
|
+
* @returns Typed FieldArray API
|
|
460
|
+
*
|
|
461
|
+
* @example
|
|
462
|
+
* const addresses = fields('addresses')
|
|
463
|
+
* addresses.append({ street: '', city: '' }) // Typed to Address
|
|
222
464
|
*/
|
|
223
|
-
fields: <TPath extends Path<InferSchema<TSchema>>>(name: TPath) => FieldArray
|
|
465
|
+
fields: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, options?: FieldArrayOptions<ArrayElement<PathValue<InferSchema<TSchema>, TPath>>>) => FieldArray<ArrayElement<PathValue<InferSchema<TSchema>, TPath>>>;
|
|
224
466
|
/**
|
|
225
467
|
* Set field value programmatically
|
|
226
468
|
* @param name - Field path
|
|
227
|
-
* @param value - New value
|
|
469
|
+
* @param value - New value (typed to match field)
|
|
470
|
+
* @param options - Options for validation/dirty/touched behavior
|
|
228
471
|
*/
|
|
229
|
-
setValue: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, value: PathValue<InferSchema<TSchema>, TPath
|
|
472
|
+
setValue: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, value: PathValue<InferSchema<TSchema>, TPath>, options?: SetValueOptions) => void;
|
|
230
473
|
/**
|
|
231
474
|
* Get field value
|
|
232
475
|
* @param name - Field path
|
|
476
|
+
* @returns The field value (typed) or undefined if not set
|
|
233
477
|
*/
|
|
234
478
|
getValue: <TPath extends Path<InferSchema<TSchema>>>(name: TPath) => PathValue<InferSchema<TSchema>, TPath> | undefined;
|
|
235
479
|
/**
|
|
@@ -238,6 +482,12 @@ export interface UseFormReturn<TSchema extends ZodType> {
|
|
|
238
482
|
* @param options - Optional reset options
|
|
239
483
|
*/
|
|
240
484
|
reset: (values?: Partial<InferSchema<TSchema>>, options?: ResetOptions) => void;
|
|
485
|
+
/**
|
|
486
|
+
* Reset an individual field to its default value
|
|
487
|
+
* @param name - Field path
|
|
488
|
+
* @param options - Options for what state to preserve (with typed defaultValue)
|
|
489
|
+
*/
|
|
490
|
+
resetField: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, options?: ResetFieldOptions<PathValue<InferSchema<TSchema>, TPath>>) => void;
|
|
241
491
|
/**
|
|
242
492
|
* Watch field value(s) reactively
|
|
243
493
|
* @param name - Field path or array of paths (optional - watches all if not provided)
|
|
@@ -287,3 +537,21 @@ export interface UseFormReturn<TSchema extends ZodType> {
|
|
|
287
537
|
*/
|
|
288
538
|
setFocus: <TPath extends Path<InferSchema<TSchema>>>(name: TPath, options?: SetFocusOptions) => void;
|
|
289
539
|
}
|
|
540
|
+
/**
|
|
541
|
+
* Type guard to check if an error value is a structured FieldError object.
|
|
542
|
+
* Use this to safely narrow FieldErrorValue when handling errors.
|
|
543
|
+
*
|
|
544
|
+
* @param error - The error value to check (can be string, FieldError, or undefined)
|
|
545
|
+
* @returns True if the error is a FieldError object with type and message
|
|
546
|
+
*
|
|
547
|
+
* @example
|
|
548
|
+
* const error = formState.value.errors.email
|
|
549
|
+
* if (isFieldError(error)) {
|
|
550
|
+
* // error is FieldError - has .type, .message, and optional .types
|
|
551
|
+
* console.log(`${error.type}: ${error.message}`)
|
|
552
|
+
* } else if (typeof error === 'string') {
|
|
553
|
+
* // error is a simple string message
|
|
554
|
+
* console.log(error)
|
|
555
|
+
* }
|
|
556
|
+
*/
|
|
557
|
+
export declare function isFieldError(error: FieldErrorValue | undefined | null): error is FieldError;
|