@tanstack/vue-form 0.42.1 → 0.43.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 (15) hide show
  1. package/dist/cjs/types.d.cts +2 -2
  2. package/dist/cjs/useField.cjs.map +1 -1
  3. package/dist/cjs/useField.d.cts +21 -22
  4. package/dist/cjs/useForm.cjs.map +1 -1
  5. package/dist/cjs/useForm.d.cts +16 -12
  6. package/dist/esm/types.d.ts +2 -2
  7. package/dist/esm/useField.d.ts +21 -22
  8. package/dist/esm/useField.js +1 -1
  9. package/dist/esm/useField.js.map +1 -1
  10. package/dist/esm/useForm.d.ts +16 -12
  11. package/dist/esm/useForm.js.map +1 -1
  12. package/package.json +6 -6
  13. package/src/types.ts +42 -11
  14. package/src/useField.tsx +391 -94
  15. package/src/useForm.tsx +224 -23
package/src/useForm.tsx CHANGED
@@ -2,40 +2,241 @@ import { FormApi } from '@tanstack/form-core'
2
2
  import { useStore } from '@tanstack/vue-store'
3
3
  import { defineComponent, h, onMounted } from 'vue'
4
4
  import { Field, useField } from './useField'
5
- import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
5
+ import type {
6
+ FormAsyncValidateOrFn,
7
+ FormOptions,
8
+ FormState,
9
+ FormValidateOrFn,
10
+ } from '@tanstack/form-core'
6
11
  import type { NoInfer } from '@tanstack/vue-store'
7
- import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'
12
+ import type {
13
+ ComponentOptionsMixin,
14
+ CreateComponentPublicInstanceWithMixins,
15
+ EmitsOptions,
16
+ EmitsToProps,
17
+ PublicProps,
18
+ Ref,
19
+ SlotsType,
20
+ } from 'vue'
8
21
  import type { FieldComponent, UseField } from './useField'
9
22
 
10
- export interface VueFormApi<
11
- TFormData,
12
- TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
13
- > {
14
- Field: FieldComponent<TFormData, TFormValidator>
15
- useField: UseField<TFormData, TFormValidator>
16
- useStore: <TSelected = NoInfer<FormState<TFormData>>>(
17
- selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
18
- ) => Readonly<Ref<TSelected>>
19
- Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(
23
+ type SubscribeComponent<
24
+ TParentData,
25
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
26
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
27
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
28
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
29
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
30
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
31
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
32
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
33
+ > =
34
+ // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in
35
+ // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing
36
+ new <
37
+ TSelected = NoInfer<
38
+ FormState<
39
+ TParentData,
40
+ TFormOnMount,
41
+ TFormOnChange,
42
+ TFormOnChangeAsync,
43
+ TFormOnBlur,
44
+ TFormOnBlurAsync,
45
+ TFormOnSubmit,
46
+ TFormOnSubmitAsync,
47
+ TFormOnServer
48
+ >
49
+ >,
50
+ >(
20
51
  props: {
21
- selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
52
+ selector?: (
53
+ state: NoInfer<
54
+ FormState<
55
+ TParentData,
56
+ TFormOnMount,
57
+ TFormOnChange,
58
+ TFormOnChangeAsync,
59
+ TFormOnBlur,
60
+ TFormOnBlurAsync,
61
+ TFormOnSubmit,
62
+ TFormOnSubmitAsync,
63
+ TFormOnServer
64
+ >
65
+ >,
66
+ ) => TSelected
67
+ } & EmitsToProps<EmitsOptions> &
68
+ PublicProps,
69
+ ) => CreateComponentPublicInstanceWithMixins<
70
+ {
71
+ selector?: (
72
+ state: NoInfer<
73
+ FormState<
74
+ TParentData,
75
+ TFormOnMount,
76
+ TFormOnChange,
77
+ TFormOnChangeAsync,
78
+ TFormOnBlur,
79
+ TFormOnBlurAsync,
80
+ TFormOnSubmit,
81
+ TFormOnSubmitAsync,
82
+ TFormOnServer
83
+ >
84
+ >,
85
+ ) => TSelected
22
86
  },
23
- context: SetupContext<
24
- EmitsOptions,
25
- SlotsType<{ default: NoInfer<FormState<TFormData>> }>
87
+ {},
88
+ {},
89
+ {},
90
+ {},
91
+ ComponentOptionsMixin,
92
+ ComponentOptionsMixin,
93
+ EmitsOptions,
94
+ PublicProps,
95
+ {},
96
+ false,
97
+ {},
98
+ SlotsType<{
99
+ default: NoInfer<
100
+ FormState<
101
+ TParentData,
102
+ TFormOnMount,
103
+ TFormOnChange,
104
+ TFormOnChangeAsync,
105
+ TFormOnBlur,
106
+ TFormOnBlurAsync,
107
+ TFormOnSubmit,
108
+ TFormOnSubmitAsync,
109
+ TFormOnServer
110
+ >
111
+ >
112
+ }>
113
+ >
114
+
115
+ export interface VueFormApi<
116
+ TParentData,
117
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
118
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
119
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
120
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
121
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
122
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
123
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
124
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
125
+ > {
126
+ Field: FieldComponent<
127
+ TParentData,
128
+ TFormOnMount,
129
+ TFormOnChange,
130
+ TFormOnChangeAsync,
131
+ TFormOnBlur,
132
+ TFormOnBlurAsync,
133
+ TFormOnSubmit,
134
+ TFormOnSubmitAsync,
135
+ TFormOnServer
136
+ >
137
+ useField: UseField<
138
+ TParentData,
139
+ TFormOnMount,
140
+ TFormOnChange,
141
+ TFormOnChangeAsync,
142
+ TFormOnBlur,
143
+ TFormOnBlurAsync,
144
+ TFormOnSubmit,
145
+ TFormOnSubmitAsync,
146
+ TFormOnServer
147
+ >
148
+ useStore: <
149
+ TSelected = NoInfer<
150
+ FormState<
151
+ TParentData,
152
+ TFormOnMount,
153
+ TFormOnChange,
154
+ TFormOnChangeAsync,
155
+ TFormOnBlur,
156
+ TFormOnBlurAsync,
157
+ TFormOnSubmit,
158
+ TFormOnSubmitAsync,
159
+ TFormOnServer
160
+ >
26
161
  >,
27
- ) => any
162
+ >(
163
+ selector?: (
164
+ state: NoInfer<
165
+ FormState<
166
+ TParentData,
167
+ TFormOnMount,
168
+ TFormOnChange,
169
+ TFormOnChangeAsync,
170
+ TFormOnBlur,
171
+ TFormOnBlurAsync,
172
+ TFormOnSubmit,
173
+ TFormOnSubmitAsync,
174
+ TFormOnServer
175
+ >
176
+ >,
177
+ ) => TSelected,
178
+ ) => Readonly<Ref<TSelected>>
179
+ Subscribe: SubscribeComponent<
180
+ TParentData,
181
+ TFormOnMount,
182
+ TFormOnChange,
183
+ TFormOnChangeAsync,
184
+ TFormOnBlur,
185
+ TFormOnBlurAsync,
186
+ TFormOnSubmit,
187
+ TFormOnSubmitAsync,
188
+ TFormOnServer
189
+ >
28
190
  }
29
191
 
30
192
  export function useForm<
31
- TFormData,
32
- TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
33
- >(opts?: FormOptions<TFormData, TFormValidator>) {
193
+ TParentData,
194
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
195
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
196
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
197
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
198
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
199
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
200
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
201
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
202
+ >(
203
+ opts?: FormOptions<
204
+ TParentData,
205
+ TFormOnMount,
206
+ TFormOnChange,
207
+ TFormOnChangeAsync,
208
+ TFormOnBlur,
209
+ TFormOnBlurAsync,
210
+ TFormOnSubmit,
211
+ TFormOnSubmitAsync,
212
+ TFormOnServer
213
+ >,
214
+ ) {
34
215
  const formApi = (() => {
35
- const api = new FormApi<TFormData, TFormValidator>(opts)
216
+ const api = new FormApi<
217
+ TParentData,
218
+ TFormOnMount,
219
+ TFormOnChange,
220
+ TFormOnChangeAsync,
221
+ TFormOnBlur,
222
+ TFormOnBlurAsync,
223
+ TFormOnSubmit,
224
+ TFormOnSubmitAsync,
225
+ TFormOnServer
226
+ >(opts)
36
227
 
37
- const extendedApi: typeof api & VueFormApi<TFormData, TFormValidator> =
38
- api as never
228
+ const extendedApi: typeof api &
229
+ VueFormApi<
230
+ TParentData,
231
+ TFormOnMount,
232
+ TFormOnChange,
233
+ TFormOnChangeAsync,
234
+ TFormOnBlur,
235
+ TFormOnBlurAsync,
236
+ TFormOnSubmit,
237
+ TFormOnSubmitAsync,
238
+ TFormOnServer
239
+ > = api as never
39
240
  extendedApi.Field = defineComponent(
40
241
  (props, context) => {
41
242
  return () =>