@tanstack/vue-form 1.33.3 → 2.0.0-alpha.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.
Files changed (93) hide show
  1. package/README.md +15 -1
  2. package/dist/AppForm/Components.lib.js +16 -0
  3. package/dist/AppForm/VueAppFormApi.public.d.ts +14 -0
  4. package/dist/AppForm/appFormOptions.public.d.ts +14 -0
  5. package/dist/AppForm/componentMap.public.d.ts +10 -0
  6. package/dist/AppForm/contexts.lib.js +18 -0
  7. package/dist/AppForm/createFormHook.public.d.ts +6 -0
  8. package/dist/AppForm/createFormHook.public.js +24 -0
  9. package/dist/AppForm/createFormHookTypes.public.d.ts +15 -0
  10. package/dist/AppForm/fieldComponentHelpers.lib.js +22 -0
  11. package/dist/AppForm/getFormHookHelpers.public.d.ts +37 -0
  12. package/dist/AppForm/getFormHookHelpers.public.js +18 -0
  13. package/dist/AppForm/initializeAppForm.lib.js +10 -0
  14. package/dist/FieldGroup/FieldGroupApi.public.d.ts +30 -0
  15. package/dist/FieldGroup/withFields.lib.js +62 -0
  16. package/dist/FieldGroup/withFields.public.d.ts +57 -0
  17. package/dist/FieldGroup/withFields.public.js +8 -0
  18. package/dist/Subscribe.public.d.ts +15 -0
  19. package/dist/Subscribe.public.js +22 -0
  20. package/dist/VueForm/Components.lib.js +94 -0
  21. package/dist/VueForm/Components.public.d.ts +71 -0
  22. package/dist/VueForm/VueFormApi.lib.js +26 -0
  23. package/dist/VueForm/fieldSubscriptions.lib.js +34 -0
  24. package/dist/VueForm/formApiTypes.public.d.ts +10 -0
  25. package/dist/VueForm/formType.public.d.ts +9 -0
  26. package/dist/VueForm/useField.lib.js +44 -0
  27. package/dist/VueForm/useForm.public.d.ts +8 -0
  28. package/dist/VueForm/useForm.public.js +10 -0
  29. package/dist/index.d.ts +16 -0
  30. package/dist/index.js +11 -0
  31. package/dist/vueTypes.lib.d.ts +6 -0
  32. package/package.json +13 -29
  33. package/src/AppForm/Components.lib.ts +31 -0
  34. package/src/AppForm/VueAppFormApi.public.ts +17 -0
  35. package/src/AppForm/appFormOptions.public.ts +55 -0
  36. package/src/AppForm/componentMap.public.ts +19 -0
  37. package/src/AppForm/contexts.lib.ts +31 -0
  38. package/src/AppForm/createFormHook.public.ts +32 -0
  39. package/src/AppForm/createFormHookTypes.public.ts +28 -0
  40. package/src/AppForm/fieldComponentHelpers.lib.ts +21 -0
  41. package/src/AppForm/getFormHookHelpers.public.ts +109 -0
  42. package/src/AppForm/initializeAppForm.lib.ts +18 -0
  43. package/src/FieldGroup/FieldGroupApi.public.ts +148 -0
  44. package/src/FieldGroup/withFields.lib.ts +103 -0
  45. package/src/FieldGroup/withFields.public.ts +191 -0
  46. package/src/Subscribe.public.ts +46 -0
  47. package/src/VueForm/Components.lib.ts +182 -0
  48. package/src/VueForm/Components.public.ts +451 -0
  49. package/src/VueForm/VueFormApi.lib.ts +35 -0
  50. package/src/VueForm/fieldSubscriptions.lib.ts +47 -0
  51. package/src/VueForm/formApiTypes.public.ts +32 -0
  52. package/src/VueForm/formType.public.ts +46 -0
  53. package/src/VueForm/useField.lib.ts +64 -0
  54. package/src/VueForm/useForm.public.ts +30 -0
  55. package/src/index.ts +15 -4
  56. package/src/vueTypes.lib.ts +31 -0
  57. package/dist/cjs/index.cjs +0 -27
  58. package/dist/cjs/index.cjs.map +0 -1
  59. package/dist/cjs/index.d.cts +0 -5
  60. package/dist/cjs/types.d.cts +0 -9
  61. package/dist/cjs/useField.cjs +0 -106
  62. package/dist/cjs/useField.cjs.map +0 -1
  63. package/dist/cjs/useField.d.cts +0 -54
  64. package/dist/cjs/useForm.cjs +0 -62
  65. package/dist/cjs/useForm.cjs.map +0 -1
  66. package/dist/cjs/useForm.d.cts +0 -23
  67. package/dist/cjs/useFormGroup.cjs +0 -41
  68. package/dist/cjs/useFormGroup.cjs.map +0 -1
  69. package/dist/cjs/useFormGroup.d.cts +0 -37
  70. package/dist/cjs/useFormId.cjs +0 -31
  71. package/dist/cjs/useFormId.cjs.map +0 -1
  72. package/dist/cjs/useFormId.d.cts +0 -7
  73. package/dist/esm/index.d.ts +0 -5
  74. package/dist/esm/index.js +0 -15
  75. package/dist/esm/index.js.map +0 -1
  76. package/dist/esm/types.d.ts +0 -9
  77. package/dist/esm/useField.d.ts +0 -54
  78. package/dist/esm/useField.js +0 -106
  79. package/dist/esm/useField.js.map +0 -1
  80. package/dist/esm/useForm.d.ts +0 -23
  81. package/dist/esm/useForm.js +0 -62
  82. package/dist/esm/useForm.js.map +0 -1
  83. package/dist/esm/useFormGroup.d.ts +0 -37
  84. package/dist/esm/useFormGroup.js +0 -41
  85. package/dist/esm/useFormGroup.js.map +0 -1
  86. package/dist/esm/useFormId.d.ts +0 -7
  87. package/dist/esm/useFormId.js +0 -14
  88. package/dist/esm/useFormId.js.map +0 -1
  89. package/src/types.ts +0 -114
  90. package/src/useField.tsx +0 -550
  91. package/src/useForm.tsx +0 -360
  92. package/src/useFormGroup.tsx +0 -532
  93. package/src/useFormId.ts +0 -24
package/src/useForm.tsx DELETED
@@ -1,360 +0,0 @@
1
- import { FormApi } from '@tanstack/form-core'
2
- import { useSelector } from '@tanstack/vue-store'
3
- import { defineComponent, h, onMounted } from 'vue'
4
- import { Field } from './useField'
5
- import { FormGroup } from './useFormGroup'
6
- import { useFormId } from './useFormId'
7
- import type {
8
- FormAsyncValidateOrFn,
9
- FormOptions,
10
- FormState,
11
- FormValidateOrFn,
12
- } from '@tanstack/form-core'
13
- import type {
14
- ComponentOptionsMixin,
15
- CreateComponentPublicInstanceWithMixins,
16
- EmitsOptions,
17
- EmitsToProps,
18
- PublicProps,
19
- Ref,
20
- SlotsType,
21
- } from 'vue'
22
- import type { FieldComponent } from './useField'
23
- import type { FormGroupComponent } from './useFormGroup'
24
-
25
- type SubscribeComponent<
26
- TParentData,
27
- TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
28
- TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
29
- TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
30
- TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
31
- TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
32
- TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
33
- TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
34
- TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
35
- TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
36
- TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
37
- > =
38
- // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in
39
- // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing
40
- new <
41
- TSelected = NoInfer<
42
- FormState<
43
- TParentData,
44
- TFormOnMount,
45
- TFormOnChange,
46
- TFormOnChangeAsync,
47
- TFormOnBlur,
48
- TFormOnBlurAsync,
49
- TFormOnSubmit,
50
- TFormOnSubmitAsync,
51
- TFormOnDynamic,
52
- TFormOnDynamicAsync,
53
- TFormOnServer
54
- >
55
- >,
56
- >(
57
- props: {
58
- selector?: (
59
- state: NoInfer<
60
- FormState<
61
- TParentData,
62
- TFormOnMount,
63
- TFormOnChange,
64
- TFormOnChangeAsync,
65
- TFormOnBlur,
66
- TFormOnBlurAsync,
67
- TFormOnSubmit,
68
- TFormOnSubmitAsync,
69
- TFormOnDynamic,
70
- TFormOnDynamicAsync,
71
- TFormOnServer
72
- >
73
- >,
74
- ) => TSelected
75
- } & EmitsToProps<EmitsOptions> &
76
- PublicProps,
77
- ) => CreateComponentPublicInstanceWithMixins<
78
- {
79
- selector?: (
80
- state: NoInfer<
81
- FormState<
82
- TParentData,
83
- TFormOnMount,
84
- TFormOnChange,
85
- TFormOnChangeAsync,
86
- TFormOnBlur,
87
- TFormOnBlurAsync,
88
- TFormOnSubmit,
89
- TFormOnSubmitAsync,
90
- TFormOnDynamic,
91
- TFormOnDynamicAsync,
92
- TFormOnServer
93
- >
94
- >,
95
- ) => TSelected
96
- },
97
- {},
98
- {},
99
- {},
100
- {},
101
- ComponentOptionsMixin,
102
- ComponentOptionsMixin,
103
- EmitsOptions,
104
- PublicProps,
105
- {},
106
- false,
107
- {},
108
- SlotsType<{
109
- default: TSelected
110
- }>
111
- >
112
-
113
- export interface VueFormApi<
114
- TParentData,
115
- TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
116
- TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
117
- TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
118
- TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
119
- TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
120
- TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
121
- TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
122
- TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
123
- TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
124
- TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
125
- TSubmitMeta,
126
- > {
127
- Field: FieldComponent<
128
- TParentData,
129
- TFormOnMount,
130
- TFormOnChange,
131
- TFormOnChangeAsync,
132
- TFormOnBlur,
133
- TFormOnBlurAsync,
134
- TFormOnSubmit,
135
- TFormOnSubmitAsync,
136
- TFormOnDynamic,
137
- TFormOnDynamicAsync,
138
- TFormOnServer,
139
- TSubmitMeta
140
- >
141
- FormGroup: FormGroupComponent<
142
- TParentData,
143
- TFormOnMount,
144
- TFormOnChange,
145
- TFormOnChangeAsync,
146
- TFormOnBlur,
147
- TFormOnBlurAsync,
148
- TFormOnSubmit,
149
- TFormOnSubmitAsync,
150
- TFormOnDynamic,
151
- TFormOnDynamicAsync,
152
- TFormOnServer,
153
- TSubmitMeta
154
- >
155
- useSelector: <
156
- TSelected = NoInfer<
157
- FormState<
158
- TParentData,
159
- TFormOnMount,
160
- TFormOnChange,
161
- TFormOnChangeAsync,
162
- TFormOnBlur,
163
- TFormOnBlurAsync,
164
- TFormOnSubmit,
165
- TFormOnSubmitAsync,
166
- TFormOnDynamic,
167
- TFormOnDynamicAsync,
168
- TFormOnServer
169
- >
170
- >,
171
- >(
172
- selector?: (
173
- state: NoInfer<
174
- FormState<
175
- TParentData,
176
- TFormOnMount,
177
- TFormOnChange,
178
- TFormOnChangeAsync,
179
- TFormOnBlur,
180
- TFormOnBlurAsync,
181
- TFormOnSubmit,
182
- TFormOnSubmitAsync,
183
- TFormOnDynamic,
184
- TFormOnDynamicAsync,
185
- TFormOnServer
186
- >
187
- >,
188
- ) => TSelected,
189
- ) => Readonly<Ref<TSelected>>
190
- /**
191
- * @deprecated Use `form.useSelector` instead.
192
- */
193
- useStore: <
194
- TSelected = NoInfer<
195
- FormState<
196
- TParentData,
197
- TFormOnMount,
198
- TFormOnChange,
199
- TFormOnChangeAsync,
200
- TFormOnBlur,
201
- TFormOnBlurAsync,
202
- TFormOnSubmit,
203
- TFormOnSubmitAsync,
204
- TFormOnDynamic,
205
- TFormOnDynamicAsync,
206
- TFormOnServer
207
- >
208
- >,
209
- >(
210
- selector?: (
211
- state: NoInfer<
212
- FormState<
213
- TParentData,
214
- TFormOnMount,
215
- TFormOnChange,
216
- TFormOnChangeAsync,
217
- TFormOnBlur,
218
- TFormOnBlurAsync,
219
- TFormOnSubmit,
220
- TFormOnSubmitAsync,
221
- TFormOnDynamic,
222
- TFormOnDynamicAsync,
223
- TFormOnServer
224
- >
225
- >,
226
- ) => TSelected,
227
- ) => Readonly<Ref<TSelected>>
228
- Subscribe: SubscribeComponent<
229
- TParentData,
230
- TFormOnMount,
231
- TFormOnChange,
232
- TFormOnChangeAsync,
233
- TFormOnBlur,
234
- TFormOnBlurAsync,
235
- TFormOnSubmit,
236
- TFormOnSubmitAsync,
237
- TFormOnDynamic,
238
- TFormOnDynamicAsync,
239
- TFormOnServer
240
- >
241
- }
242
-
243
- export function useForm<
244
- TParentData,
245
- TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
246
- TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
247
- TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
248
- TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
249
- TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
250
- TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
251
- TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
252
- TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
253
- TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
254
- TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
255
- TSubmitMeta,
256
- >(
257
- opts?: FormOptions<
258
- TParentData,
259
- TFormOnMount,
260
- TFormOnChange,
261
- TFormOnChangeAsync,
262
- TFormOnBlur,
263
- TFormOnBlurAsync,
264
- TFormOnSubmit,
265
- TFormOnSubmitAsync,
266
- TFormOnDynamic,
267
- TFormOnDynamicAsync,
268
- TFormOnServer,
269
- TSubmitMeta
270
- >,
271
- ) {
272
- const fallbackFormId = useFormId()
273
-
274
- const formApi = (() => {
275
- const api = new FormApi<
276
- TParentData,
277
- TFormOnMount,
278
- TFormOnChange,
279
- TFormOnChangeAsync,
280
- TFormOnBlur,
281
- TFormOnBlurAsync,
282
- TFormOnSubmit,
283
- TFormOnSubmitAsync,
284
- TFormOnDynamic,
285
- TFormOnDynamicAsync,
286
- TFormOnServer,
287
- TSubmitMeta
288
- >({ ...opts, formId: opts?.formId ?? fallbackFormId })
289
-
290
- const extendedApi: typeof api &
291
- VueFormApi<
292
- TParentData,
293
- TFormOnMount,
294
- TFormOnChange,
295
- TFormOnChangeAsync,
296
- TFormOnBlur,
297
- TFormOnBlurAsync,
298
- TFormOnSubmit,
299
- TFormOnSubmitAsync,
300
- TFormOnDynamic,
301
- TFormOnDynamicAsync,
302
- TFormOnServer,
303
- TSubmitMeta
304
- > = api as never
305
- extendedApi.Field = defineComponent(
306
- (props, context) => {
307
- return () =>
308
- h(
309
- Field as never,
310
- { ...props, ...context.attrs, form: api },
311
- context.slots,
312
- )
313
- },
314
- {
315
- name: 'APIField',
316
- inheritAttrs: false,
317
- },
318
- ) as never
319
- extendedApi.FormGroup = defineComponent(
320
- (props, context) => {
321
- return () =>
322
- h(
323
- FormGroup as never,
324
- { ...props, ...context.attrs, form: api },
325
- context.slots,
326
- )
327
- },
328
- {
329
- name: 'APIFormGroup',
330
- inheritAttrs: false,
331
- },
332
- ) as never
333
- const subscribeToStore = (selector?: (state: never) => unknown) =>
334
- useSelector(api.store as never, selector as never) as never
335
- extendedApi.useSelector = subscribeToStore
336
- /** @deprecated Use `form.useSelector` instead. */
337
- extendedApi.useStore = subscribeToStore
338
- extendedApi.Subscribe = defineComponent(
339
- (props, context) => {
340
- const allProps = { ...props, ...context.attrs }
341
- const selector = allProps.selector ?? ((state: never) => state)
342
- const data = useSelector(api.store as never, selector as never)
343
- return () => context.slots.default!(data.value)
344
- },
345
- {
346
- name: 'Subscribe',
347
- inheritAttrs: false,
348
- },
349
- ) as never
350
-
351
- return extendedApi
352
- })()
353
-
354
- onMounted(formApi.mount)
355
-
356
- // formApi.useStore((state) => state.isSubmitting)
357
- formApi.update(opts)
358
-
359
- return formApi
360
- }