notform 2.1.1 → 2.1.2
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 +22 -7
- package/dist/index.d.ts +268 -255
- package/dist/index.js +578 -523
- package/package.json +27 -25
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ComputedRef, MaybeRefOrGetter, Raw, Ref, useAttrs } from "vue";
|
|
1
|
+
import { Component, ComputedRef, MaybeRefOrGetter, Raw, Ref } from "vue";
|
|
3
2
|
import { StandardSchemaV1 } from "@standard-schema/spec";
|
|
4
3
|
import { Get, PartialDeep, Paths as Paths$1 } from "type-fest";
|
|
5
4
|
|
|
@@ -18,14 +17,14 @@ type ValidationMode = 'eager' | 'lazy';
|
|
|
18
17
|
* - onMount: Trigger validation when the field is mounted.
|
|
19
18
|
* - onFocus: Trigger validation when the field gains focus.
|
|
20
19
|
*/
|
|
21
|
-
type ValidationTrigger = 'onBlur' | 'onChange' | '
|
|
20
|
+
type ValidationTrigger = 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onMount';
|
|
22
21
|
/**
|
|
23
22
|
* Constructs a type where all properties of the input type are optional recursively.
|
|
24
23
|
* @template TData The base data structure to transform.
|
|
25
24
|
*/
|
|
26
25
|
type DeepPartial<TData> = PartialDeep<TData, {
|
|
27
|
-
recurseIntoArrays: true;
|
|
28
26
|
allowUndefinedInNonTupleArrays: true;
|
|
27
|
+
recurseIntoArrays: true;
|
|
29
28
|
}>;
|
|
30
29
|
/**
|
|
31
30
|
* Constructs a type representing all possible dot-separated paths within an object.
|
|
@@ -49,12 +48,15 @@ type ObjectSchema = StandardSchemaV1 & {
|
|
|
49
48
|
//#region src/types/use-not-form.d.ts
|
|
50
49
|
/**
|
|
51
50
|
* Configuration options for initializing a new form instance.
|
|
52
|
-
* @template TSchema The
|
|
51
|
+
* @template TSchema The form schema.
|
|
53
52
|
*/
|
|
54
|
-
|
|
55
|
-
/** The validation schema used to parse and validate form data */
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
interface UseNotFormConfig<TSchema extends ObjectSchema> {
|
|
54
|
+
/** The validation schema used to parse and validate form data */
|
|
55
|
+
schema: MaybeRefOrGetter<TSchema>;
|
|
56
|
+
/** The initial values of the form */
|
|
57
|
+
initialValues?: DeepPartial<StandardSchemaV1.InferInput<TSchema>>;
|
|
58
|
+
/** The initial errors of the form */
|
|
59
|
+
initialErrors?: Array<StandardSchemaV1.Issue>;
|
|
58
60
|
/**
|
|
59
61
|
* The validation triggers of the form.
|
|
60
62
|
* @default { onBlur: true, onChange: true, onInput: true }
|
|
@@ -69,13 +71,13 @@ type UseNotFormConfig<TSchema extends ObjectSchema> = {
|
|
|
69
71
|
* Callback triggered when form validation passes and the form is submitted.
|
|
70
72
|
* @param values The validated output data from the schema.
|
|
71
73
|
*/
|
|
72
|
-
onSubmit?: (values: StandardSchemaV1.InferOutput<TSchema>) => void |
|
|
73
|
-
}
|
|
74
|
+
onSubmit?: (values: StandardSchemaV1.InferOutput<TSchema>) => Promise<void> | void;
|
|
75
|
+
}
|
|
74
76
|
//#endregion
|
|
75
77
|
//#region src/types/not-form.d.ts
|
|
76
78
|
/**
|
|
77
79
|
* The complete state and API of a form instance returned by `useNotForm`.
|
|
78
|
-
* @template TSchema The
|
|
80
|
+
* @template TSchema The form schema.
|
|
79
81
|
*/
|
|
80
82
|
type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
81
83
|
/** The values the form was initialised or last reset with. */readonly initialValues: UseNotFormConfig<TSchema>['initialValues']; /** The errors the form was initialised or last reset with. */
|
|
@@ -84,13 +86,13 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
|
84
86
|
readonly validationMode: Required<NonNullable<UseNotFormConfig<TSchema>['validationMode']>>;
|
|
85
87
|
/**
|
|
86
88
|
* Deeply reactive object of field values.
|
|
87
|
-
*
|
|
88
|
-
* Access directly — no `.value` needed:
|
|
89
|
+
* @example
|
|
90
|
+
* - Access directly — no `.value` needed:
|
|
89
91
|
* ```ts
|
|
90
92
|
* form.values.email
|
|
91
93
|
* ```
|
|
92
94
|
*
|
|
93
|
-
* Use with `v-model` for two-way binding:
|
|
95
|
+
* - Use with `v-model` for two-way binding:
|
|
94
96
|
* ```vue
|
|
95
97
|
* <template>
|
|
96
98
|
* <input v-model="form.values.email" />
|
|
@@ -103,7 +105,7 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
|
103
105
|
*
|
|
104
106
|
* Useful for deeply nested paths or custom inputs that do not use `v-model`.
|
|
105
107
|
* Does **not** trigger validation — the field's event handlers are responsible for that.
|
|
106
|
-
*
|
|
108
|
+
* @example
|
|
107
109
|
* ```ts
|
|
108
110
|
* form.setValue('address.city', 'Lagos')
|
|
109
111
|
* ```
|
|
@@ -119,21 +121,22 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
|
119
121
|
isTouched: ComputedRef<boolean>;
|
|
120
122
|
/**
|
|
121
123
|
* Marks a field as touched.
|
|
122
|
-
*
|
|
124
|
+
* Called automatically by the field's `onBlur` handler.
|
|
123
125
|
*/
|
|
124
126
|
touchField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => void; /** The set of field paths whose current value differs from the initial value. */
|
|
125
127
|
dirtyFields: Set<Paths<StandardSchemaV1.InferInput<TSchema>>>; /** Whether any field value differs from its initial value. */
|
|
126
128
|
isDirty: ComputedRef<boolean>;
|
|
127
129
|
/**
|
|
128
130
|
* Marks a field as dirty.
|
|
129
|
-
*
|
|
131
|
+
* Called automatically when a field value changes.
|
|
130
132
|
*/
|
|
131
133
|
dirtyField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => void; /** The raw validation issues produced by the last validation run. */
|
|
132
|
-
errors: StandardSchemaV1.Issue
|
|
134
|
+
errors: Array<StandardSchemaV1.Issue>;
|
|
133
135
|
/**
|
|
134
136
|
* A flat map of field path to its first error message.
|
|
135
137
|
*
|
|
136
|
-
* Convenient for direct template access without calling `getFieldErrors
|
|
138
|
+
* Convenient for direct template access without calling `getFieldErrors`
|
|
139
|
+
* @example
|
|
137
140
|
* ```vue
|
|
138
141
|
* <template>
|
|
139
142
|
* <p>{{ form.errorsMap['address.city'] }}</p>
|
|
@@ -146,16 +149,16 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
|
146
149
|
* Useful for setting server-side errors after submission.
|
|
147
150
|
*/
|
|
148
151
|
setError: (error: StandardSchemaV1.Issue) => void; /** Replaces all current errors with the provided issues. */
|
|
149
|
-
setErrors: (errors: StandardSchemaV1.Issue
|
|
152
|
+
setErrors: (errors: Array<StandardSchemaV1.Issue>) => void; /** Removes all active validation errors. */
|
|
150
153
|
clearErrors: () => void;
|
|
151
154
|
/**
|
|
152
155
|
* Returns all validation issues for a specific field path.
|
|
153
|
-
*
|
|
156
|
+
* @example
|
|
154
157
|
* ```ts
|
|
155
158
|
* form.getFieldErrors('address.city')
|
|
156
159
|
* ```
|
|
157
160
|
*/
|
|
158
|
-
getFieldErrors: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => StandardSchemaV1.Issue
|
|
161
|
+
getFieldErrors: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => Array<StandardSchemaV1.Issue>; /** Whether a validation run is currently in progress. */
|
|
159
162
|
isValidating: Ref<boolean>;
|
|
160
163
|
/**
|
|
161
164
|
* Validates the entire form against the schema.
|
|
@@ -175,10 +178,10 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
|
175
178
|
* Marks all fields as touched and dirty before validating so all errors surface.
|
|
176
179
|
* If validation fails, submission is aborted.
|
|
177
180
|
* Bind to the native form's `@submit` event:
|
|
178
|
-
*
|
|
181
|
+
* @example
|
|
179
182
|
* ```vue
|
|
180
183
|
* <template>
|
|
181
|
-
* <form
|
|
184
|
+
* <form v-on:submit="form.submit">
|
|
182
185
|
* </form>
|
|
183
186
|
* </template>
|
|
184
187
|
* ```
|
|
@@ -189,7 +192,7 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
|
189
192
|
*
|
|
190
193
|
* Clears all touched and dirty tracking. If `values` or `errors` are passed,
|
|
191
194
|
* they replace the stored baseline so subsequent resets return to the new state.
|
|
192
|
-
*
|
|
195
|
+
* @example
|
|
193
196
|
* ```ts
|
|
194
197
|
* // Reset to original initial values
|
|
195
198
|
* form.reset()
|
|
@@ -198,40 +201,169 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
|
|
|
198
201
|
* form.reset({ name: 'Jane' })
|
|
199
202
|
* ```
|
|
200
203
|
*/
|
|
201
|
-
reset: (values?: DeepPartial<StandardSchemaV1.InferInput<TSchema>>, errors?: StandardSchemaV1.Issue
|
|
204
|
+
reset: (values?: DeepPartial<StandardSchemaV1.InferInput<TSchema>>, errors?: Array<StandardSchemaV1.Issue>) => void;
|
|
202
205
|
}>;
|
|
203
206
|
/** Props for the `NotForm` component. */
|
|
204
|
-
|
|
205
|
-
/** The form instance to provide to all descendant `NotField` components. */
|
|
206
|
-
|
|
207
|
+
interface NotFormProps {
|
|
208
|
+
/** The form instance to provide to all descendant `NotField` components. */
|
|
209
|
+
form: NotFormInstance<any>;
|
|
210
|
+
}
|
|
207
211
|
/** Slots for the `NotForm` component. */
|
|
208
|
-
|
|
209
|
-
/** The default slot receives the full form instance */
|
|
210
|
-
|
|
212
|
+
interface NotFormSlots {
|
|
213
|
+
/** The default slot receives the full form instance */
|
|
214
|
+
default?: () => any;
|
|
215
|
+
}
|
|
211
216
|
//#endregion
|
|
212
|
-
//#region src/
|
|
213
|
-
|
|
217
|
+
//#region src/types/not-array-field.d.ts
|
|
218
|
+
/**
|
|
219
|
+
* Props for the `NotArrayField` component.
|
|
220
|
+
* @template TItemSchema The schema for a single array item.
|
|
221
|
+
*/
|
|
222
|
+
interface NotArrayFieldProps<TItemSchema extends StandardSchemaV1 = StandardSchemaV1> {
|
|
223
|
+
/** Dot-separated path to the array within the form values. */
|
|
224
|
+
path: string;
|
|
225
|
+
/**
|
|
226
|
+
* Schema for a single array item — used purely for type inference.
|
|
227
|
+
* Enables typed `append`, `prepend`, `insert`, and `update` methods in the slot.
|
|
228
|
+
* @example
|
|
229
|
+
* ```vue
|
|
230
|
+
* <template>
|
|
231
|
+
* <NotArrayField path="tags" :item-schema="z.string()">
|
|
232
|
+
* <!-- append now expects a string -->
|
|
233
|
+
* </NotArrayField>
|
|
234
|
+
* </template>
|
|
235
|
+
* ```
|
|
236
|
+
*/
|
|
237
|
+
itemSchema?: TItemSchema;
|
|
238
|
+
/**
|
|
239
|
+
* Explicit form instance override.
|
|
240
|
+
* Takes priority over the instance provided by a `NotForm` ancestor.
|
|
241
|
+
* Required when using `NotArrayField` outside of a `NotForm`.
|
|
242
|
+
*/
|
|
243
|
+
form?: NotFormInstance<any>;
|
|
244
|
+
/**
|
|
245
|
+
* Per-field validation trigger overrides applied to the array as a whole.
|
|
246
|
+
* Merged over the form-wide `validateOn` — only the keys you specify are overridden.
|
|
247
|
+
*/
|
|
248
|
+
validateOn?: Partial<Record<Extract<ValidationTrigger, 'onChange' | 'onMount'>, boolean>>;
|
|
249
|
+
}
|
|
250
|
+
/**
|
|
251
|
+
* Represents a single item in the array field.
|
|
252
|
+
* Use `key` for `v-for` tracking and `path` to pass to a nested `NotField`.
|
|
253
|
+
* @example
|
|
254
|
+
* ```vue
|
|
255
|
+
* <template>
|
|
256
|
+
* <NotArrayField path="tags" v-slot="{ items }">
|
|
257
|
+
* <NotField v-for="item in items" :key="item.key" :path="item.path" v-slot="{ events }">
|
|
258
|
+
* <input v-model="form.values.tags[item.index]" v-bind="events" />
|
|
259
|
+
* </NotField>
|
|
260
|
+
* </NotArrayField>
|
|
261
|
+
* </template>
|
|
262
|
+
* ```
|
|
263
|
+
*/
|
|
264
|
+
interface NotArrayFieldItem {
|
|
265
|
+
/** Stable key for `v-for` — does not change when items are reordered. */
|
|
266
|
+
key: string;
|
|
267
|
+
/** Current index of this item in the array. */
|
|
268
|
+
index: number;
|
|
269
|
+
/** Full dot-separated path to this item — pass directly to `NotField`. */
|
|
270
|
+
path: string;
|
|
271
|
+
}
|
|
272
|
+
/**
|
|
273
|
+
* Slots for the `NotArrayField` component.
|
|
274
|
+
* @template TSchema The form schema.
|
|
275
|
+
* @template TItem An array field item.
|
|
276
|
+
*/
|
|
277
|
+
interface NotArrayFieldSlots<TSchema extends ObjectSchema, TItem = any> {
|
|
278
|
+
/** The default slot receives the full array state and manipulation methods. */
|
|
279
|
+
default: (props: {
|
|
280
|
+
/** The dot-separated path to this array field. */path: string; /** The array items with stable keys and paths for use with `v-for`. */
|
|
281
|
+
items: Array<NotArrayFieldItem>; /** All validation issues for this array field from the last validation run. */
|
|
282
|
+
errors: Array<StandardSchemaV1.Issue>; /** Whether this array field currently has no validation errors. */
|
|
283
|
+
isValid: boolean;
|
|
284
|
+
/**
|
|
285
|
+
* Whether any item in this array has been touched.
|
|
286
|
+
* Derived from the form's `touchedFields` set.
|
|
287
|
+
*/
|
|
288
|
+
isTouched: boolean;
|
|
289
|
+
/**
|
|
290
|
+
* Whether any item in this array differs from its initial value.
|
|
291
|
+
* Derived from the form's `dirtyFields` set.
|
|
292
|
+
*/
|
|
293
|
+
isDirty: boolean; /** Whether validation is currently running for this array field. */
|
|
294
|
+
isValidating: boolean;
|
|
295
|
+
/**
|
|
296
|
+
* Manually triggers validation for this array field.
|
|
297
|
+
* Useful when mutations are performed programmatically outside of the normal flow.
|
|
298
|
+
*/
|
|
299
|
+
validate: () => ReturnType<NotFormInstance<TSchema>['validateField']>;
|
|
300
|
+
/**
|
|
301
|
+
* Appends a new item to the end of the array.
|
|
302
|
+
* @param value The value to append.
|
|
303
|
+
*/
|
|
304
|
+
append: (value: TItem) => void;
|
|
305
|
+
/**
|
|
306
|
+
* Prepends a new item to the beginning of the array.
|
|
307
|
+
* @param value The value to prepend.
|
|
308
|
+
*/
|
|
309
|
+
prepend: (value: TItem) => void;
|
|
310
|
+
/**
|
|
311
|
+
* Removes the item at the given index.
|
|
312
|
+
* @param index The index of the item to remove.
|
|
313
|
+
*/
|
|
314
|
+
remove: (index: number) => void;
|
|
315
|
+
/**
|
|
316
|
+
* Inserts a new item at the given index, shifting subsequent items forward.
|
|
317
|
+
* @param index The index to insert the item at.
|
|
318
|
+
* @param value The value to insert.
|
|
319
|
+
*/
|
|
320
|
+
insert: (index: number, value: TItem) => void;
|
|
321
|
+
/**
|
|
322
|
+
* Replaces the value at the given index.
|
|
323
|
+
* @param index The index of the item to replace.
|
|
324
|
+
* @param value The value to replace with.
|
|
325
|
+
*/
|
|
326
|
+
update: (index: number, value: TItem) => void;
|
|
327
|
+
/**
|
|
328
|
+
* Swaps the positions of two items in the array.
|
|
329
|
+
* @param indexA The index of the first item.
|
|
330
|
+
* @param indexB The index of the second item.
|
|
331
|
+
*/
|
|
332
|
+
swap: (indexA: number, indexB: number) => void;
|
|
333
|
+
/**
|
|
334
|
+
* Moves an item from one index to another, shifting items between them.
|
|
335
|
+
* @param from The current index of the item.
|
|
336
|
+
* @param to The target index.
|
|
337
|
+
*/
|
|
338
|
+
move: (from: number, to: number) => void;
|
|
339
|
+
}) => any;
|
|
340
|
+
}
|
|
214
341
|
//#endregion
|
|
215
|
-
//#region src/components/not-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
};
|
|
342
|
+
//#region src/components/not-array-field.vue.d.ts
|
|
343
|
+
declare const __VLS_export$3: <TSchema extends ObjectSchema, TItemSchema extends StandardSchemaV1 = StandardSchemaV1, TItem = StandardSchemaV1.InferInput<TItemSchema>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
344
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal$1<NotArrayFieldProps<TItemSchema>> & (typeof globalThis extends {
|
|
345
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
346
|
+
} ? P : {});
|
|
347
|
+
expose: (exposed: {}) => void;
|
|
348
|
+
attrs: any;
|
|
349
|
+
slots: NotArrayFieldSlots<TSchema, TItem>;
|
|
350
|
+
emit: {};
|
|
351
|
+
}>) => import("vue").VNode & {
|
|
352
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
224
353
|
};
|
|
354
|
+
declare const _default: typeof __VLS_export$3;
|
|
355
|
+
type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
|
|
225
356
|
//#endregion
|
|
226
357
|
//#region src/types/not-field.d.ts
|
|
227
358
|
/** Props for the `NotField` component. */
|
|
228
|
-
|
|
229
|
-
/** Dot-separated path to this field within the form values. */
|
|
359
|
+
interface NotFieldProps {
|
|
360
|
+
/** Dot-separated path to this field within the form values. */
|
|
361
|
+
path: string;
|
|
230
362
|
/**
|
|
231
363
|
* Explicit form instance override.
|
|
232
364
|
* Takes priority over the instance provided by a `NotForm` ancestor.
|
|
233
365
|
* Required when using `NotField` outside of a `NotForm` (singleton fields).
|
|
234
|
-
*
|
|
366
|
+
* @example
|
|
235
367
|
* ```vue
|
|
236
368
|
* <template>
|
|
237
369
|
* <NotField :form="form" path="email" v-slot="{ events }">
|
|
@@ -244,7 +376,7 @@ type NotFieldProps = {
|
|
|
244
376
|
/**
|
|
245
377
|
* Per-field validation trigger overrides.
|
|
246
378
|
* Merged over the form-wide `validateOn` — only the keys you specify are overridden.
|
|
247
|
-
*
|
|
379
|
+
* @example
|
|
248
380
|
* ```vue
|
|
249
381
|
* <template>
|
|
250
382
|
* <!-- form validates on blur only, but this field also validates on every input -->
|
|
@@ -263,7 +395,7 @@ type NotFieldProps = {
|
|
|
263
395
|
*
|
|
264
396
|
* Blur- and submit-triggered validation always runs immediately, regardless
|
|
265
397
|
* of this setting, so the field never feels unresponsive when the user leaves.
|
|
266
|
-
*
|
|
398
|
+
* @example
|
|
267
399
|
* ```vue
|
|
268
400
|
* <template>
|
|
269
401
|
* <!-- validate 400ms after the user stops typing -->
|
|
@@ -276,83 +408,95 @@ type NotFieldProps = {
|
|
|
276
408
|
* Omit or set to `0` to disable debouncing (default behaviour).
|
|
277
409
|
*/
|
|
278
410
|
debounce?: number;
|
|
279
|
-
}
|
|
280
|
-
/**
|
|
281
|
-
* Everything available inside the `NotField` default slot.
|
|
282
|
-
* @template TSchema The validation schema type derived from `ObjectSchema`.
|
|
283
|
-
*/
|
|
284
|
-
type NotFieldSlotProps<TSchema extends ObjectSchema> = {
|
|
285
|
-
/** The dot-separated path to this field. */path: string;
|
|
286
|
-
/**
|
|
287
|
-
* The current value of this field — read-only snapshot for display purposes.
|
|
288
|
-
* Do not mutate directly or use with `v-model`.
|
|
289
|
-
* For two-way binding use `v-model="form.values.fieldName"` instead.
|
|
290
|
-
*/
|
|
291
|
-
value: any; /** All validation issues for this field from the last validation run. */
|
|
292
|
-
errors: StandardSchemaV1.Issue[]; /** Whether this field currently has no validation errors. */
|
|
293
|
-
isValid: boolean; /** Whether the user has interacted with this field, or the form has been submitted. */
|
|
294
|
-
isTouched: boolean; /** Whether this field's current value differs from its initial value. */
|
|
295
|
-
isDirty: boolean; /** Whether an async validator is currently running for this field. */
|
|
296
|
-
isValidating: boolean;
|
|
297
|
-
/**
|
|
298
|
-
* Manually triggers validation for this field.
|
|
299
|
-
* Useful for custom inputs that manage their own interaction events.
|
|
300
|
-
*/
|
|
301
|
-
validate: () => ReturnType<NotFormInstance<TSchema>['validateField']>;
|
|
302
|
-
/**
|
|
303
|
-
* Native DOM event handlers exposed by a field.
|
|
304
|
-
* Spread onto a native input or bind individually to custom components.
|
|
305
|
-
*
|
|
306
|
-
* ```vue
|
|
307
|
-
* <template>
|
|
308
|
-
* <!-- spread -->
|
|
309
|
-
* <input v-bind="events" />
|
|
310
|
-
*
|
|
311
|
-
* <!-- individual -->
|
|
312
|
-
* <CustomCombobox @focusout="events.onBlur" @pick="events.onChange" />
|
|
313
|
-
* </template>
|
|
314
|
-
* ```
|
|
315
|
-
*/
|
|
316
|
-
events: {
|
|
317
|
-
/** Triggered when the field loses focus. */onBlur: () => void; /** Triggered on every keystroke or value change. */
|
|
318
|
-
onInput: () => void; /** Triggered when the field value is committed. */
|
|
319
|
-
onChange: () => void; /** Triggered when the field gains focus. */
|
|
320
|
-
onFocus: () => void;
|
|
321
|
-
};
|
|
322
|
-
};
|
|
411
|
+
}
|
|
323
412
|
/**
|
|
324
413
|
* Slots for the `NotField` component.
|
|
325
|
-
* @template TSchema The
|
|
414
|
+
* @template TSchema The form schema.
|
|
326
415
|
*/
|
|
327
|
-
|
|
328
|
-
/** The default slot receives the full field state and event handlers. */
|
|
329
|
-
|
|
416
|
+
interface NotFieldSlots<TSchema extends ObjectSchema> {
|
|
417
|
+
/** The default slot receives the full field state and event handlers. */
|
|
418
|
+
default?: (props: {
|
|
419
|
+
/** The dot-separated path to this field. */path: string;
|
|
420
|
+
/**
|
|
421
|
+
* The current value of this field — read-only snapshot for display purposes.
|
|
422
|
+
* Do not mutate directly or use with `v-model`.
|
|
423
|
+
* For two-way binding use `v-model="form.values.fieldName"` instead.
|
|
424
|
+
*/
|
|
425
|
+
value: any; /** All validation issues for this field from the last validation run. */
|
|
426
|
+
errors: Array<StandardSchemaV1.Issue>; /** Whether this field currently has no validation errors. */
|
|
427
|
+
isValid: boolean; /** Whether the user has interacted with this field, or the form has been submitted. */
|
|
428
|
+
isTouched: boolean; /** Whether this field's current value differs from its initial value. */
|
|
429
|
+
isDirty: boolean; /** Whether an async validator is currently running for this field. */
|
|
430
|
+
isValidating: boolean;
|
|
431
|
+
/**
|
|
432
|
+
* Manually triggers validation for this field.
|
|
433
|
+
* Useful for custom inputs that manage their own interaction events.
|
|
434
|
+
*/
|
|
435
|
+
validate: () => ReturnType<NotFormInstance<TSchema>['validateField']>;
|
|
436
|
+
/**
|
|
437
|
+
* Native DOM event handlers exposed by a field.
|
|
438
|
+
* Spread onto a native input or bind individually to custom components.
|
|
439
|
+
* @example
|
|
440
|
+
* ```vue
|
|
441
|
+
* <template>
|
|
442
|
+
* <!-- spread -->
|
|
443
|
+
* <input v-bind="events" />
|
|
444
|
+
*
|
|
445
|
+
* <!-- individual -->
|
|
446
|
+
* <CustomCombobox v-on:focusout="events.onBlur" v-on:pick="events.onChange" />
|
|
447
|
+
* </template>
|
|
448
|
+
* ```
|
|
449
|
+
*/
|
|
450
|
+
events: {
|
|
451
|
+
/** Triggered when the field loses focus. */onBlur: () => void; /** Triggered on every keystroke or value change. */
|
|
452
|
+
onInput: () => void; /** Triggered when the field value is committed. */
|
|
453
|
+
onChange: () => void; /** Triggered when the field gains focus. */
|
|
454
|
+
onFocus: () => void;
|
|
455
|
+
};
|
|
456
|
+
}) => any;
|
|
457
|
+
}
|
|
330
458
|
//#endregion
|
|
331
459
|
//#region src/components/not-field.vue.d.ts
|
|
332
|
-
declare const __VLS_export$2: <TSchema extends ObjectSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal
|
|
333
|
-
props:
|
|
460
|
+
declare const __VLS_export$2: <TSchema extends ObjectSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
461
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<NotFieldProps> & (typeof globalThis extends {
|
|
334
462
|
__VLS_PROPS_FALLBACK: infer P;
|
|
335
463
|
} ? P : {});
|
|
336
464
|
expose: (exposed: {}) => void;
|
|
337
465
|
attrs: any;
|
|
338
466
|
slots: NotFieldSlots<TSchema>;
|
|
339
467
|
emit: {};
|
|
340
|
-
}>) =>
|
|
468
|
+
}>) => import("vue").VNode & {
|
|
341
469
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
342
470
|
};
|
|
343
471
|
declare const _default$1: typeof __VLS_export$2;
|
|
344
|
-
type __VLS_PrettifyLocal
|
|
472
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
|
|
473
|
+
//#endregion
|
|
474
|
+
//#region src/components/not-form.vue.d.ts
|
|
475
|
+
type __VLS_Slots$1 = NotFormSlots;
|
|
476
|
+
declare const __VLS_base$1: import("vue").DefineComponent<NotFormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotFormProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
477
|
+
declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
|
|
478
|
+
declare const _default$2: typeof __VLS_export$1;
|
|
479
|
+
type __VLS_WithSlots$1<T, S> = T & {
|
|
480
|
+
new (): {
|
|
481
|
+
$slots: S;
|
|
482
|
+
};
|
|
483
|
+
};
|
|
345
484
|
//#endregion
|
|
346
485
|
//#region src/types/not-message.d.ts
|
|
347
486
|
/** Props for the `NotMessage` component. */
|
|
348
|
-
|
|
349
|
-
/**
|
|
350
|
-
|
|
487
|
+
interface NotMessageProps {
|
|
488
|
+
/**
|
|
489
|
+
* HTML Tag or component to render as
|
|
490
|
+
* @default span
|
|
491
|
+
*/
|
|
492
|
+
as?: Component | string;
|
|
493
|
+
/** The name/path of the field whose error message should be displayed */
|
|
494
|
+
path: string;
|
|
351
495
|
/**
|
|
352
496
|
* Explicit form instance override.
|
|
353
497
|
* Takes priority over the instance provided by a `NotForm` ancestor.
|
|
354
498
|
* Required when using `NotMessage` outside of a `NotForm` (singleton fields).
|
|
355
|
-
*
|
|
499
|
+
* @example
|
|
356
500
|
* ```vue
|
|
357
501
|
* <template>
|
|
358
502
|
* <NotMessage :form="form" path="email" />
|
|
@@ -360,166 +504,35 @@ type NotMessageProps = {
|
|
|
360
504
|
* ```
|
|
361
505
|
*/
|
|
362
506
|
form?: NotFormInstance<any>;
|
|
363
|
-
}
|
|
364
|
-
/** Everything available inside the `NotMessage` default slot. */
|
|
365
|
-
type NotMessageSlotProps = {
|
|
366
|
-
/** The first active validation error message for the specified field */message?: string; /** Attributes passed to the `NotMessage` component */
|
|
367
|
-
attributes?: ReturnType<typeof useAttrs>;
|
|
368
|
-
};
|
|
507
|
+
}
|
|
369
508
|
/** Slots for the `NotMessage` component. */
|
|
370
|
-
|
|
371
|
-
/** The default slot receives the error message context for custom rendering */
|
|
372
|
-
|
|
509
|
+
interface NotMessageSlots {
|
|
510
|
+
/** The default slot receives the error message context for custom rendering */
|
|
511
|
+
default?: (props: {
|
|
512
|
+
/** The first active validation error message for the specified field */message?: string;
|
|
513
|
+
}) => any;
|
|
514
|
+
}
|
|
373
515
|
//#endregion
|
|
374
516
|
//#region src/components/not-message.vue.d.ts
|
|
375
517
|
type __VLS_Slots = NotMessageSlots;
|
|
376
|
-
declare const __VLS_base:
|
|
377
|
-
as: string;
|
|
378
|
-
}, {}, {}, {}, string,
|
|
379
|
-
declare const __VLS_export
|
|
380
|
-
declare const _default$3: typeof __VLS_export
|
|
518
|
+
declare const __VLS_base: import("vue").DefineComponent<NotMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotMessageProps> & Readonly<{}>, {
|
|
519
|
+
as: import("vue").Component | string;
|
|
520
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
521
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
522
|
+
declare const _default$3: typeof __VLS_export;
|
|
381
523
|
type __VLS_WithSlots<T, S> = T & {
|
|
382
524
|
new (): {
|
|
383
525
|
$slots: S;
|
|
384
526
|
};
|
|
385
527
|
};
|
|
386
528
|
//#endregion
|
|
387
|
-
//#region src/
|
|
388
|
-
/** Props for the `NotArrayField` component. */
|
|
389
|
-
type NotArrayFieldProps<TItemSchema extends StandardSchemaV1 = StandardSchemaV1> = {
|
|
390
|
-
/** Dot-separated path to the array within the form values. */path: string;
|
|
391
|
-
/**
|
|
392
|
-
* Schema for a single array item — used purely for type inference.
|
|
393
|
-
* Enables typed `append`, `prepend`, `insert`, and `update` methods in the slot.
|
|
394
|
-
*
|
|
395
|
-
* ```vue
|
|
396
|
-
* <template>
|
|
397
|
-
* <NotArrayField path="tags" :item-schema="z.string()">
|
|
398
|
-
* <!-- append now expects a string -->
|
|
399
|
-
* </NotArrayField>
|
|
400
|
-
* </template>
|
|
401
|
-
* ```
|
|
402
|
-
*/
|
|
403
|
-
itemSchema?: TItemSchema;
|
|
404
|
-
/**
|
|
405
|
-
* Explicit form instance override.
|
|
406
|
-
* Takes priority over the instance provided by a `NotForm` ancestor.
|
|
407
|
-
* Required when using `NotArrayField` outside of a `NotForm`.
|
|
408
|
-
*/
|
|
409
|
-
form?: NotFormInstance<any>;
|
|
410
|
-
/**
|
|
411
|
-
* Per-field validation trigger overrides applied to the array as a whole.
|
|
412
|
-
* Merged over the form-wide `validateOn` — only the keys you specify are overridden.
|
|
413
|
-
*/
|
|
414
|
-
validateOn?: Partial<Record<Extract<ValidationTrigger, 'onMount' | 'onChange'>, boolean>>;
|
|
415
|
-
};
|
|
416
|
-
/**
|
|
417
|
-
* Represents a single item in the array field.
|
|
418
|
-
* Use `key` for `v-for` tracking and `path` to pass to a nested `NotField`.
|
|
419
|
-
*
|
|
420
|
-
* ```vue
|
|
421
|
-
* <template>
|
|
422
|
-
* <NotArrayField path="tags" v-slot="{ items }">
|
|
423
|
-
* <NotField v-for="item in items" :key="item.key" :path="item.path" v-slot="{ events }">
|
|
424
|
-
* <input v-model="form.values.tags[item.index]" v-bind="events" />
|
|
425
|
-
* </NotField>
|
|
426
|
-
* </NotArrayField>
|
|
427
|
-
* </template>
|
|
428
|
-
* ```
|
|
429
|
-
*/
|
|
430
|
-
type NotArrayFieldItem = {
|
|
431
|
-
/** Stable key for `v-for` — does not change when items are reordered. */key: string; /** Current index of this item in the array. */
|
|
432
|
-
index: number; /** Full dot-separated path to this item — pass directly to `NotField`. */
|
|
433
|
-
path: string;
|
|
434
|
-
};
|
|
435
|
-
/**
|
|
436
|
-
* Everything available inside the `NotArrayField` default slot.
|
|
437
|
-
* @template TSchema The form schema type.
|
|
438
|
-
* @template TItem The inferred type of a single array item.
|
|
439
|
-
*/
|
|
440
|
-
type NotArrayFieldSlotProps<TSchema extends ObjectSchema, TItem = any> = {
|
|
441
|
-
/** The dot-separated path to this array field. */path: string; /** The array items with stable keys and paths for use with `v-for`. */
|
|
442
|
-
items: NotArrayFieldItem[]; /** All validation issues for this array field from the last validation run. */
|
|
443
|
-
errors: StandardSchemaV1.Issue[]; /** Whether this array field currently has no validation errors. */
|
|
444
|
-
isValid: boolean;
|
|
445
|
-
/**
|
|
446
|
-
* Whether any item in this array has been touched.
|
|
447
|
-
* Derived from the form's `touchedFields` set.
|
|
448
|
-
*/
|
|
449
|
-
isTouched: boolean;
|
|
450
|
-
/**
|
|
451
|
-
* Whether any item in this array differs from its initial value.
|
|
452
|
-
* Derived from the form's `dirtyFields` set.
|
|
453
|
-
*/
|
|
454
|
-
isDirty: boolean; /** Whether validation is currently running for this array field. */
|
|
455
|
-
isValidating: boolean;
|
|
456
|
-
/**
|
|
457
|
-
* Manually triggers validation for this array field.
|
|
458
|
-
* Useful when mutations are performed programmatically outside of the normal flow.
|
|
459
|
-
*/
|
|
460
|
-
validate: () => ReturnType<NotFormInstance<TSchema>['validateField']>;
|
|
461
|
-
/**
|
|
462
|
-
* Appends a new item to the end of the array.
|
|
463
|
-
* @param value The value to append.
|
|
464
|
-
*/
|
|
465
|
-
append: (value: TItem) => void;
|
|
466
|
-
/**
|
|
467
|
-
* Prepends a new item to the beginning of the array.
|
|
468
|
-
* @param value The value to prepend.
|
|
469
|
-
*/
|
|
470
|
-
prepend: (value: TItem) => void;
|
|
471
|
-
/**
|
|
472
|
-
* Removes the item at the given index.
|
|
473
|
-
* @param index The index of the item to remove.
|
|
474
|
-
*/
|
|
475
|
-
remove: (index: number) => void;
|
|
476
|
-
/**
|
|
477
|
-
* Inserts a new item at the given index, shifting subsequent items forward.
|
|
478
|
-
* @param index The index to insert the item at.
|
|
479
|
-
* @param value The value to insert.
|
|
480
|
-
*/
|
|
481
|
-
insert: (index: number, value: TItem) => void;
|
|
482
|
-
/**
|
|
483
|
-
* Replaces the value at the given index.
|
|
484
|
-
* @param index The index of the item to replace.
|
|
485
|
-
* @param value The value to replace with.
|
|
486
|
-
*/
|
|
487
|
-
update: (index: number, value: TItem) => void;
|
|
488
|
-
/**
|
|
489
|
-
* Swaps the positions of two items in the array.
|
|
490
|
-
* @param indexA The index of the first item.
|
|
491
|
-
* @param indexB The index of the second item.
|
|
492
|
-
*/
|
|
493
|
-
swap: (indexA: number, indexB: number) => void;
|
|
494
|
-
/**
|
|
495
|
-
* Moves an item from one index to another, shifting items between them.
|
|
496
|
-
* @param from The current index of the item.
|
|
497
|
-
* @param to The target index.
|
|
498
|
-
*/
|
|
499
|
-
move: (from: number, to: number) => void;
|
|
500
|
-
};
|
|
529
|
+
//#region src/composables/use-not-form.d.ts
|
|
501
530
|
/**
|
|
502
|
-
*
|
|
503
|
-
* @template TSchema The
|
|
504
|
-
* @
|
|
531
|
+
* Creates a reactive NotFormInstance for managing form state and validation.
|
|
532
|
+
* @template TSchema The standard schema type.
|
|
533
|
+
* @param config Configuration object.
|
|
534
|
+
* @returns A reactive NotFormInstance.
|
|
505
535
|
*/
|
|
506
|
-
|
|
507
|
-
/** The default slot receives the full array state and manipulation methods. */default: (props: NotArrayFieldSlotProps<TSchema, TItem>) => [];
|
|
508
|
-
};
|
|
509
|
-
//#endregion
|
|
510
|
-
//#region src/components/not-array-field.vue.d.ts
|
|
511
|
-
declare const __VLS_export: <TSchema extends ObjectSchema, TItemSchema extends StandardSchemaV1 = StandardSchemaV1, TItem = StandardSchemaV1.InferInput<TItemSchema>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
512
|
-
props: _$vue.PublicProps & __VLS_PrettifyLocal<NotArrayFieldProps<TItemSchema>> & (typeof globalThis extends {
|
|
513
|
-
__VLS_PROPS_FALLBACK: infer P;
|
|
514
|
-
} ? P : {});
|
|
515
|
-
expose: (exposed: {}) => void;
|
|
516
|
-
attrs: any;
|
|
517
|
-
slots: NotArrayFieldSlots<TSchema, TItem>;
|
|
518
|
-
emit: {};
|
|
519
|
-
}>) => _$vue.VNode & {
|
|
520
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
521
|
-
};
|
|
522
|
-
declare const _default: typeof __VLS_export;
|
|
523
|
-
type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
|
|
536
|
+
declare function useNotForm<TSchema extends ObjectSchema>(config: UseNotFormConfig<TSchema>): NotFormInstance<TSchema>;
|
|
524
537
|
//#endregion
|
|
525
|
-
export { DeepPartial, _default as NotArrayField, NotArrayFieldItem, NotArrayFieldProps,
|
|
538
|
+
export { type DeepPartial, _default as NotArrayField, type NotArrayFieldItem, type NotArrayFieldProps, type NotArrayFieldSlots, _default$1 as NotField, type NotFieldProps, type NotFieldSlots, _default$2 as NotForm, type NotFormInstance, type NotFormProps, type NotFormSlots, _default$3 as NotMessage, type NotMessageProps, type NotMessageSlots, type ObjectSchema, type Paths, type UseNotFormConfig, type ValidationMode, type ValidationTrigger, useNotForm };
|