@tanstack/vue-form 1.32.0 → 1.33.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.
@@ -0,0 +1,532 @@
1
+ import { FormGroupApi } from '@tanstack/form-core'
2
+ import { useStore } from '@tanstack/vue-store'
3
+ import { defineComponent, onMounted, onUnmounted, watch } from 'vue'
4
+ import type {
5
+ DeepKeys,
6
+ DeepValue,
7
+ FormAsyncValidateOrFn,
8
+ FormGroupApiOptions,
9
+ FormGroupAsyncValidateOrFn,
10
+ FormGroupOptions,
11
+ FormGroupValidateOrFn,
12
+ FormValidateOrFn,
13
+ } from '@tanstack/form-core'
14
+ import type {
15
+ ComponentOptionsMixin,
16
+ CreateComponentPublicInstanceWithMixins,
17
+ EmitsOptions,
18
+ EmitsToProps,
19
+ PublicProps,
20
+ SetupContext,
21
+ SlotsType,
22
+ } from 'vue'
23
+
24
+ export type FormGroupComponent<
25
+ TParentData,
26
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
27
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
28
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
29
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
30
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
31
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
32
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
33
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
34
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
35
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
36
+ TParentSubmitMeta,
37
+ // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in
38
+ // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing
39
+ > = new <
40
+ TName extends DeepKeys<TParentData>,
41
+ TData extends DeepValue<TParentData, TName>,
42
+ TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
43
+ TOnChange extends
44
+ | undefined
45
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
46
+ TOnChangeAsync extends
47
+ | undefined
48
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
49
+ TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
50
+ TOnBlurAsync extends
51
+ | undefined
52
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
53
+ TOnSubmit extends
54
+ | undefined
55
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
56
+ TOnSubmitAsync extends
57
+ | undefined
58
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
59
+ TOnDynamic extends
60
+ | undefined
61
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
62
+ TOnDynamicAsync extends
63
+ | undefined
64
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
65
+ TSubmitMeta,
66
+ >(
67
+ props: FormGroupComponentBoundProps<
68
+ TParentData,
69
+ TName,
70
+ TData,
71
+ TOnMount,
72
+ TOnChange,
73
+ TOnChangeAsync,
74
+ TOnBlur,
75
+ TOnBlurAsync,
76
+ TOnSubmit,
77
+ TOnSubmitAsync,
78
+ TOnDynamic,
79
+ TOnDynamicAsync,
80
+ TSubmitMeta,
81
+ TFormOnMount,
82
+ TFormOnChange,
83
+ TFormOnChangeAsync,
84
+ TFormOnBlur,
85
+ TFormOnBlurAsync,
86
+ TFormOnSubmit,
87
+ TFormOnSubmitAsync,
88
+ TFormOnDynamic,
89
+ TFormOnDynamicAsync,
90
+ TFormOnServer,
91
+ TParentSubmitMeta
92
+ > &
93
+ EmitsToProps<EmitsOptions> &
94
+ PublicProps,
95
+ ) => CreateComponentPublicInstanceWithMixins<
96
+ FormGroupComponentBoundProps<
97
+ TParentData,
98
+ TName,
99
+ TData,
100
+ TOnMount,
101
+ TOnChange,
102
+ TOnChangeAsync,
103
+ TOnBlur,
104
+ TOnBlurAsync,
105
+ TOnSubmit,
106
+ TOnSubmitAsync,
107
+ TOnDynamic,
108
+ TOnDynamicAsync,
109
+ TSubmitMeta,
110
+ TFormOnMount,
111
+ TFormOnChange,
112
+ TFormOnChangeAsync,
113
+ TFormOnBlur,
114
+ TFormOnBlurAsync,
115
+ TFormOnSubmit,
116
+ TFormOnSubmitAsync,
117
+ TFormOnDynamic,
118
+ TFormOnDynamicAsync,
119
+ TFormOnServer,
120
+ TParentSubmitMeta
121
+ >,
122
+ {},
123
+ {},
124
+ {},
125
+ {},
126
+ ComponentOptionsMixin,
127
+ ComponentOptionsMixin,
128
+ EmitsOptions,
129
+ PublicProps,
130
+ {},
131
+ false,
132
+ {},
133
+ SlotsType<{
134
+ default: {
135
+ group: FormGroupApi<
136
+ TParentData,
137
+ TName,
138
+ TData,
139
+ TOnMount,
140
+ TOnChange,
141
+ TOnChangeAsync,
142
+ TOnBlur,
143
+ TOnBlurAsync,
144
+ TOnSubmit,
145
+ TOnSubmitAsync,
146
+ TOnDynamic,
147
+ TOnDynamicAsync,
148
+ TSubmitMeta,
149
+ TFormOnMount,
150
+ TFormOnChange,
151
+ TFormOnChangeAsync,
152
+ TFormOnBlur,
153
+ TFormOnBlurAsync,
154
+ TFormOnSubmit,
155
+ TFormOnSubmitAsync,
156
+ TFormOnDynamic,
157
+ TFormOnDynamicAsync,
158
+ TFormOnServer,
159
+ TParentSubmitMeta
160
+ >
161
+ state: FormGroupApi<
162
+ TParentData,
163
+ TName,
164
+ TData,
165
+ TOnMount,
166
+ TOnChange,
167
+ TOnChangeAsync,
168
+ TOnBlur,
169
+ TOnBlurAsync,
170
+ TOnSubmit,
171
+ TOnSubmitAsync,
172
+ TOnDynamic,
173
+ TOnDynamicAsync,
174
+ TSubmitMeta,
175
+ TFormOnMount,
176
+ TFormOnChange,
177
+ TFormOnChangeAsync,
178
+ TFormOnBlur,
179
+ TFormOnBlurAsync,
180
+ TFormOnSubmit,
181
+ TFormOnSubmitAsync,
182
+ TFormOnDynamic,
183
+ TFormOnDynamicAsync,
184
+ TFormOnServer,
185
+ TParentSubmitMeta
186
+ >['state']
187
+ }
188
+ }>
189
+ >
190
+
191
+ export interface VueFormGroupApi<
192
+ TParentData,
193
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
194
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
195
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
196
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
197
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
198
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
199
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
200
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
201
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
202
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
203
+ TParentSubmitMeta,
204
+ > {
205
+ FormGroup: FormGroupComponent<
206
+ TParentData,
207
+ TFormOnMount,
208
+ TFormOnChange,
209
+ TFormOnChangeAsync,
210
+ TFormOnBlur,
211
+ TFormOnBlurAsync,
212
+ TFormOnSubmit,
213
+ TFormOnSubmitAsync,
214
+ TFormOnDynamic,
215
+ TFormOnDynamicAsync,
216
+ TFormOnServer,
217
+ TParentSubmitMeta
218
+ >
219
+ }
220
+
221
+ export function useFormGroup<
222
+ TParentData,
223
+ TName extends DeepKeys<TParentData>,
224
+ TData extends DeepValue<TParentData, TName>,
225
+ TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
226
+ TOnChange extends
227
+ | undefined
228
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
229
+ TOnChangeAsync extends
230
+ | undefined
231
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
232
+ TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
233
+ TOnBlurAsync extends
234
+ | undefined
235
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
236
+ TOnSubmit extends
237
+ | undefined
238
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
239
+ TOnSubmitAsync extends
240
+ | undefined
241
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
242
+ TOnDynamic extends
243
+ | undefined
244
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
245
+ TOnDynamicAsync extends
246
+ | undefined
247
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
248
+ TSubmitMeta,
249
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
250
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
251
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
252
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
253
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
254
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
255
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
256
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
257
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
258
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
259
+ TParentSubmitMeta,
260
+ >(
261
+ opts: FormGroupApiOptions<
262
+ TParentData,
263
+ TName,
264
+ TData,
265
+ TOnMount,
266
+ TOnChange,
267
+ TOnChangeAsync,
268
+ TOnBlur,
269
+ TOnBlurAsync,
270
+ TOnSubmit,
271
+ TOnSubmitAsync,
272
+ TOnDynamic,
273
+ TOnDynamicAsync,
274
+ TSubmitMeta,
275
+ TFormOnMount,
276
+ TFormOnChange,
277
+ TFormOnChangeAsync,
278
+ TFormOnBlur,
279
+ TFormOnBlurAsync,
280
+ TFormOnSubmit,
281
+ TFormOnSubmitAsync,
282
+ TFormOnDynamic,
283
+ TFormOnDynamicAsync,
284
+ TFormOnServer,
285
+ TParentSubmitMeta
286
+ >,
287
+ ) {
288
+ const formGroupApi = (() => {
289
+ const api = new FormGroupApi({
290
+ ...opts,
291
+ })
292
+
293
+ return api
294
+ })()
295
+
296
+ const groupState = useStore(formGroupApi.store, (state) => state)
297
+
298
+ let cleanup!: () => void
299
+ onMounted(() => {
300
+ cleanup = formGroupApi.mount()
301
+ })
302
+
303
+ onUnmounted(() => {
304
+ cleanup()
305
+ })
306
+
307
+ watch(
308
+ () => opts,
309
+ () => {
310
+ // Keep options up to date as they are rendered
311
+ formGroupApi.update({ ...opts } as never)
312
+ },
313
+ )
314
+
315
+ return { api: formGroupApi, state: groupState } as const
316
+ }
317
+
318
+ export type FormGroupComponentProps<
319
+ TParentData,
320
+ TName extends DeepKeys<TParentData>,
321
+ TData extends DeepValue<TParentData, TName>,
322
+ TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
323
+ TOnChange extends
324
+ | undefined
325
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
326
+ TOnChangeAsync extends
327
+ | undefined
328
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
329
+ TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
330
+ TOnBlurAsync extends
331
+ | undefined
332
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
333
+ TOnSubmit extends
334
+ | undefined
335
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
336
+ TOnSubmitAsync extends
337
+ | undefined
338
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
339
+ TOnDynamic extends
340
+ | undefined
341
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
342
+ TOnDynamicAsync extends
343
+ | undefined
344
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
345
+ TSubmitMeta,
346
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
347
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
348
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
349
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
350
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
351
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
352
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
353
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
354
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
355
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
356
+ TParentSubmitMeta,
357
+ > = FormGroupApiOptions<
358
+ TParentData,
359
+ TName,
360
+ TData,
361
+ TOnMount,
362
+ TOnChange,
363
+ TOnChangeAsync,
364
+ TOnBlur,
365
+ TOnBlurAsync,
366
+ TOnSubmit,
367
+ TOnSubmitAsync,
368
+ TOnDynamic,
369
+ TOnDynamicAsync,
370
+ TSubmitMeta,
371
+ TFormOnMount,
372
+ TFormOnChange,
373
+ TFormOnChangeAsync,
374
+ TFormOnBlur,
375
+ TFormOnBlurAsync,
376
+ TFormOnSubmit,
377
+ TFormOnSubmitAsync,
378
+ TFormOnDynamic,
379
+ TFormOnDynamicAsync,
380
+ TFormOnServer,
381
+ TParentSubmitMeta
382
+ >
383
+
384
+ export type FormGroupComponentBoundProps<
385
+ TParentData,
386
+ TName extends DeepKeys<TParentData>,
387
+ TData extends DeepValue<TParentData, TName>,
388
+ TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
389
+ TOnChange extends
390
+ | undefined
391
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
392
+ TOnChangeAsync extends
393
+ | undefined
394
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
395
+ TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
396
+ TOnBlurAsync extends
397
+ | undefined
398
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
399
+ TOnSubmit extends
400
+ | undefined
401
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
402
+ TOnSubmitAsync extends
403
+ | undefined
404
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
405
+ TOnDynamic extends
406
+ | undefined
407
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
408
+ TOnDynamicAsync extends
409
+ | undefined
410
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
411
+ TSubmitMeta,
412
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
413
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
414
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
415
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
416
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
417
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
418
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
419
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
420
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
421
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
422
+ TParentSubmitMeta,
423
+ > = FormGroupOptions<
424
+ TParentData,
425
+ TName,
426
+ TData,
427
+ TOnMount,
428
+ TOnChange,
429
+ TOnChangeAsync,
430
+ TOnBlur,
431
+ TOnBlurAsync,
432
+ TOnSubmit,
433
+ TOnSubmitAsync,
434
+ TOnDynamic,
435
+ TOnDynamicAsync,
436
+ TSubmitMeta,
437
+ TFormOnMount,
438
+ TFormOnChange,
439
+ TFormOnChangeAsync,
440
+ TFormOnBlur,
441
+ TFormOnBlurAsync,
442
+ TFormOnSubmit,
443
+ TFormOnSubmitAsync,
444
+ TFormOnDynamic,
445
+ TFormOnDynamicAsync,
446
+ TFormOnServer,
447
+ TParentSubmitMeta
448
+ >
449
+
450
+ export const FormGroup = defineComponent(
451
+ <
452
+ TParentData,
453
+ TName extends DeepKeys<TParentData>,
454
+ TData extends DeepValue<TParentData, TName>,
455
+ TOnMount extends
456
+ | undefined
457
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
458
+ TOnChange extends
459
+ | undefined
460
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
461
+ TOnChangeAsync extends
462
+ | undefined
463
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
464
+ TOnBlur extends
465
+ | undefined
466
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
467
+ TOnBlurAsync extends
468
+ | undefined
469
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
470
+ TOnSubmit extends
471
+ | undefined
472
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
473
+ TOnSubmitAsync extends
474
+ | undefined
475
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
476
+ TOnDynamic extends
477
+ | undefined
478
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
479
+ TOnDynamicAsync extends
480
+ | undefined
481
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
482
+ TSubmitMeta,
483
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
484
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
485
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
486
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
487
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
488
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
489
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
490
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
491
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
492
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
493
+ TParentSubmitMeta,
494
+ >(
495
+ formGroupOptions: FormGroupApiOptions<
496
+ TParentData,
497
+ TName,
498
+ TData,
499
+ TOnMount,
500
+ TOnChange,
501
+ TOnChangeAsync,
502
+ TOnBlur,
503
+ TOnBlurAsync,
504
+ TOnSubmit,
505
+ TOnSubmitAsync,
506
+ TOnDynamic,
507
+ TOnDynamicAsync,
508
+ TSubmitMeta,
509
+ TFormOnMount,
510
+ TFormOnChange,
511
+ TFormOnChangeAsync,
512
+ TFormOnBlur,
513
+ TFormOnBlurAsync,
514
+ TFormOnSubmit,
515
+ TFormOnSubmitAsync,
516
+ TFormOnDynamic,
517
+ TFormOnDynamicAsync,
518
+ TFormOnServer,
519
+ TParentSubmitMeta
520
+ >,
521
+ context: SetupContext,
522
+ ) => {
523
+ const groupApi = useFormGroup({ ...formGroupOptions, ...context.attrs })
524
+
525
+ return () =>
526
+ context.slots.default!({
527
+ group: groupApi.api,
528
+ state: groupApi.state.value,
529
+ })
530
+ },
531
+ { name: 'FormGroup', inheritAttrs: false },
532
+ )