@tanstack/vue-form 0.42.0 → 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/dist/cjs/types.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
2
- export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
1
+ import { DeepKeys, DeepValue, FieldApiOptions, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
2
+ export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
3
3
  mode?: 'value' | 'array';
4
4
  };
package/dist/cjs/useField.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\nexport interface VueFieldApi<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> {\n Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => {\n api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n VueFieldApi<TParentData, TFormValidator>\n state: Readonly<\n Ref<\n FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n >\n >\n}\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api & VueFieldApi<TParentData, TFormValidator> =\n api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })()\n\n const fieldState = useStore(fieldApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = fieldApi.mount()\n })\n\n onUnmounted(() => {\n cleanup()\n })\n\n watch(\n () => opts,\n () => {\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: opts.form } as never)\n },\n )\n\n return { api: fieldApi, state: fieldState } as const\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n fieldOptions: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n >,\n context: SetupContext<\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >\n state: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n }\n }>\n >,\n) => any\n\nexport const Field = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n >(\n fieldOptions: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n context: SetupContext,\n ) => {\n const fieldApi = useField({ ...fieldOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n field: fieldApi.api,\n state: fieldApi.state.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":["FieldApi","useStore","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AAgDO,SAAS,SAWd,MAOA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAIA,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,GACN;AAEH,QAAM,aAAaC,SAAAA,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAAA,CAC1B;AAEDC,MAAAA,YAAY,MAAM;AACR,YAAA;AAAA,EAAA,CACT;AAEDC,MAAA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IAAA;AAAA,EAEzD;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AA2DO,MAAM,QAAQC,IAAA;AAAA,EACnB,CAWE,cAOA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAExD,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;;;"}
1
+ {"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n DeepKeys,\n DeepValue,\n FieldAsyncValidateOrFn,\n FieldValidateOrFn,\n FormAsyncValidateOrFn,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SetupContext,\n SlotsType,\n} from 'vue'\nimport type { UseFieldOptions } from './types'\n\nexport type FieldComponent<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in\n // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing\n> = new <\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n props: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n 'form'\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n 'form'\n >,\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n state: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >['state']\n }\n }>\n>\n\nexport interface VueFieldApi<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n}\n\nexport type UseField<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> = <\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n opts: Omit<\n UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n 'form'\n >,\n) => {\n api: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n > &\n VueFieldApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n state: Readonly<\n Ref<\n FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >['state']\n >\n >\n}\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api &\n VueFieldApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n > = api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })()\n\n const fieldState = useStore(fieldApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = fieldApi.mount()\n })\n\n onUnmounted(() => {\n cleanup()\n })\n\n watch(\n () => opts,\n () => {\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: opts.form } as never)\n },\n )\n\n return { api: fieldApi, state: fieldState } as const\n}\n\nexport type FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> = UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n>\n\nexport const Field = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n >(\n fieldOptions: UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n context: SetupContext,\n ) => {\n const fieldApi = useField({ ...fieldOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n field: fieldApi.api,\n state: fieldApi.state.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":["FieldApi","useStore","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AAkSO,SAAS,SA0Bd,MAoBA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAIA,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAWA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,GACN;AAEH,QAAM,aAAaC,SAAAA,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAAA,CAC1B;AAEDC,MAAAA,YAAY,MAAM;AACR,YAAA;AAAA,EAAA,CACT;AAEDC,MAAA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IAAA;AAAA,EAEzD;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAgDO,MAAM,QAAQC,IAAA;AAAA,EACnB,CA0BE,cAoBA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAExD,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;;;"}
package/dist/cjs/useField.d.cts CHANGED
@@ -1,48 +1,47 @@
1
- import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
2
- import { Ref, SetupContext, SlotsType } from 'vue';
1
+ import { FieldApi, DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
2
+ import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, EmitsToProps, PublicProps, Ref, SlotsType } from 'vue';
3
3
  import { UseFieldOptions } from './types.cjs';
4
- export interface VueFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
5
- Field: FieldComponent<TParentData, TFormValidator>;
4
+ export type FieldComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = new <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(props: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>, 'form'> & EmitsToProps<EmitsOptions> & PublicProps) => CreateComponentPublicInstanceWithMixins<Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>, 'form'>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<{
5
+ default: {
6
+ field: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
7
+ state: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>['state'];
8
+ };
9
+ }>>;
10
+ export interface VueFieldApi<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> {
11
+ Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
6
12
  }
7
- export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => {
8
- api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
9
- state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
13
+ export type UseField<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(opts: Omit<UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>, 'form'>) => {
14
+ api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & VueFieldApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
15
+ state: Readonly<Ref<FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>['state']>>;
10
16
  };
11
- export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): {
12
- readonly api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
13
- readonly state: Readonly<Ref<import('@tanstack/form-core').FieldState<TData>, import('@tanstack/form-core').FieldState<TData>>>;
17
+ export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>>(opts: UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>): {
18
+ readonly api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & VueFieldApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
19
+ readonly state: Readonly<Ref<import('@tanstack/form-core').FieldState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>, import('@tanstack/form-core').FieldState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>>>;
14
20
  };
15
- type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
16
- export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>, context: SetupContext<{}, SlotsType<{
17
- default: {
18
- field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
19
- state: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state'];
20
- };
21
- }>>) => any;
22
- export declare const Field: new <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(props: (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
21
+ export type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
22
+ export declare const Field: new <TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>>(props: (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
23
23
  mode?: "value" | "array";
24
24
  } & ({
25
25
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
26
26
  } | {
27
27
  [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
28
- })) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => import('vue').CreateComponentPublicInstanceWithMixins<import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
28
+ })) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => CreateComponentPublicInstanceWithMixins<import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
29
29
  mode?: "value" | "array";
30
30
  } & ({
31
31
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
32
32
  } | {
33
33
  [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
34
- }), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, import('vue').EmitsOptions, import('vue').PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
34
+ }), {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
35
35
  P: {};
36
36
  B: {};
37
37
  D: {};
38
38
  C: {};
39
39
  M: {};
40
40
  Defaults: {};
41
- }, {} & (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
41
+ }, {} & (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
42
42
  mode?: "value" | "array";
43
43
  } & ({
44
44
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
45
45
  } | {
46
46
  [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
47
47
  })), {}, {}, {}, {}, {}>;
48
- export {};
package/dist/cjs/useForm.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\nexport interface VueFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => Readonly<Ref<TSelected>>\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n },\n context: SetupContext<\n EmitsOptions,\n SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n >,\n ) => any\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const formApi = (() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: typeof api & VueFormApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = defineComponent(\n (props, context) => {\n return () =>\n h(\n Field as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIField',\n inheritAttrs: false,\n },\n ) as never\n extendedApi.useField = (props) => {\n const field = useField({ ...props, form: api })\n return field\n }\n extendedApi.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state: never) => state)\n const data = useStore(api.store as never, selector as never)\n return () => context.slots.default!(data.value)\n },\n {\n name: 'Subscribe',\n inheritAttrs: false,\n },\n ) as never\n\n return extendedApi\n })()\n\n onMounted(formApi.mount)\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi\n}\n"],"names":["FormApi","defineComponent","h","Field","useField","useStore","onMounted"],"mappings":";;;;;;AA6BO,SAAS,QAGd,MAA+C;AAC/C,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAIA,SAAA,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACF,gBAAY,QAAQC,IAAA;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAA;AAAA,UACEC,SAAA;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QACV;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AACY,gBAAA,WAAW,CAAC,UAAU;AAChC,YAAM,QAAQC,SAAAA,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACvC,aAAA;AAAA,IACT;AACY,gBAAA,WAAW,CAAC,aAAa;AAC5B,aAAAC,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,gBAAY,YAAYJ,IAAA;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAiB;AACzD,cAAM,OAAOI,SAAA,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AAEO,WAAA;AAAA,EAAA,GACN;AAEHC,MAAA,UAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;;"}
1
+ {"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type {\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SlotsType,\n} from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ntype SubscribeComponent<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> =\n // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in\n // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing\n new <\n TSelected = NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n >(\n props: {\n selector?: (\n state: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n ) => TSelected\n } & EmitsToProps<EmitsOptions> &\n PublicProps,\n ) => CreateComponentPublicInstanceWithMixins<\n {\n selector?: (\n state: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n ) => TSelected\n },\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >\n }>\n >\n\nexport interface VueFormApi<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n useField: UseField<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n useStore: <\n TSelected = NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n >(\n selector?: (\n state: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n ) => TSelected,\n ) => Readonly<Ref<TSelected>>\n Subscribe: SubscribeComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n}\n\nexport function useForm<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n>(\n opts?: FormOptions<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n) {\n const formApi = (() => {\n const api = new FormApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >(opts)\n\n const extendedApi: typeof api &\n VueFormApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n > = api as never\n extendedApi.Field = defineComponent(\n (props, context) => {\n return () =>\n h(\n Field as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIField',\n inheritAttrs: false,\n },\n ) as never\n extendedApi.useField = (props) => {\n const field = useField({ ...props, form: api })\n return field\n }\n extendedApi.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state: never) => state)\n const data = useStore(api.store as never, selector as never)\n return () => context.slots.default!(data.value)\n },\n {\n name: 'Subscribe',\n inheritAttrs: false,\n },\n ) as never\n\n return extendedApi\n })()\n\n onMounted(formApi.mount)\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi\n}\n"],"names":["FormApi","defineComponent","h","Field","useField","useStore","onMounted"],"mappings":";;;;;;AA+LO,SAAS,QAWd,MAWA;AACA,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAIA,SAAA,QAUd,IAAI;AAEN,UAAM,cAWA;AACN,gBAAY,QAAQC,IAAA;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAA;AAAA,UACEC,SAAA;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QACV;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AACY,gBAAA,WAAW,CAAC,UAAU;AAChC,YAAM,QAAQC,SAAAA,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACvC,aAAA;AAAA,IACT;AACY,gBAAA,WAAW,CAAC,aAAa;AAC5B,aAAAC,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,gBAAY,YAAYJ,IAAA;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAiB;AACzD,cAAM,OAAOI,SAAA,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AAEO,WAAA;AAAA,EAAA,GACN;AAEHC,MAAA,UAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;;"}
package/dist/cjs/useForm.d.cts CHANGED
@@ -1,15 +1,19 @@
1
- import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
1
+ import { FormApi, FormAsyncValidateOrFn, FormOptions, FormState, FormValidateOrFn } from '@tanstack/form-core';
2
2
  import { NoInfer } from '@tanstack/vue-store';
3
- import { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
3
+ import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, EmitsToProps, PublicProps, Ref, SlotsType } from 'vue';
4
4
  import { FieldComponent, UseField } from './useField.cjs';
5
- export interface VueFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
6
- Field: FieldComponent<TFormData, TFormValidator>;
7
- useField: UseField<TFormData, TFormValidator>;
8
- useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<TSelected>>;
9
- Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
10
- selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
11
- }, context: SetupContext<EmitsOptions, SlotsType<{
12
- default: NoInfer<FormState<TFormData>>;
13
- }>>) => any;
5
+ type SubscribeComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = new <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>>(props: {
6
+ selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>) => TSelected;
7
+ } & EmitsToProps<EmitsOptions> & PublicProps) => CreateComponentPublicInstanceWithMixins<{
8
+ selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>) => TSelected;
9
+ }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<{
10
+ default: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>;
11
+ }>>;
12
+ export interface VueFormApi<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> {
13
+ Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
14
+ useField: UseField<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
15
+ useStore: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>) => TSelected) => Readonly<Ref<TSelected>>;
16
+ Subscribe: SubscribeComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
14
17
  }
15
- export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & VueFormApi<TFormData, TFormValidator>;
18
+ export declare function useForm<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>>(opts?: FormOptions<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>): FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & VueFormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
19
+ export {};
package/dist/esm/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
2
- export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
1
+ import { DeepKeys, DeepValue, FieldApiOptions, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
2
+ export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
3
3
  mode?: 'value' | 'array';
4
4
  };
package/dist/esm/useField.d.ts CHANGED
@@ -1,48 +1,47 @@
1
- import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
2
- import { Ref, SetupContext, SlotsType } from 'vue';
1
+ import { FieldApi, DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
2
+ import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, EmitsToProps, PublicProps, Ref, SlotsType } from 'vue';
3
3
  import { UseFieldOptions } from './types.js';
4
- export interface VueFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
5
- Field: FieldComponent<TParentData, TFormValidator>;
4
+ export type FieldComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = new <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(props: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>, 'form'> & EmitsToProps<EmitsOptions> & PublicProps) => CreateComponentPublicInstanceWithMixins<Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>, 'form'>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<{
5
+ default: {
6
+ field: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
7
+ state: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>['state'];
8
+ };
9
+ }>>;
10
+ export interface VueFieldApi<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> {
11
+ Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
6
12
  }
7
- export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => {
8
- api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
9
- state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
13
+ export type UseField<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(opts: Omit<UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>, 'form'>) => {
14
+ api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & VueFieldApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
15
+ state: Readonly<Ref<FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>['state']>>;
10
16
  };
11
- export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): {
12
- readonly api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
13
- readonly state: Readonly<Ref<import('@tanstack/form-core').FieldState<TData>, import('@tanstack/form-core').FieldState<TData>>>;
17
+ export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>>(opts: UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>): {
18
+ readonly api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & VueFieldApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
19
+ readonly state: Readonly<Ref<import('@tanstack/form-core').FieldState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>, import('@tanstack/form-core').FieldState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>>>;
14
20
  };
15
- type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
16
- export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>, context: SetupContext<{}, SlotsType<{
17
- default: {
18
- field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
19
- state: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state'];
20
- };
21
- }>>) => any;
22
- export declare const Field: new <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(props: (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
21
+ export type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
22
+ export declare const Field: new <TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>>(props: (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
23
23
  mode?: "value" | "array";
24
24
  } & ({
25
25
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
26
26
  } | {
27
27
  [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
28
- })) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => import('vue').CreateComponentPublicInstanceWithMixins<import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
28
+ })) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => CreateComponentPublicInstanceWithMixins<import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
29
29
  mode?: "value" | "array";
30
30
  } & ({
31
31
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
32
32
  } | {
33
33
  [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
34
- }), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, import('vue').EmitsOptions, import('vue').PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
34
+ }), {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
35
35
  P: {};
36
36
  B: {};
37
37
  D: {};
38
38
  C: {};
39
39
  M: {};
40
40
  Defaults: {};
41
- }, {} & (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
41
+ }, {} & (import('@tanstack/form-core').FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & {
42
42
  mode?: "value" | "array";
43
43
  } & ({
44
44
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
45
45
  } | {
46
46
  [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
47
47
  })), {}, {}, {}, {}, {}>;
48
- export {};
package/dist/esm/useField.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FieldApi } from "@tanstack/form-core";
2
2
  import { useStore } from "@tanstack/vue-store";
3
- import { onMounted, onUnmounted, watch, defineComponent } from "vue";
3
+ import { defineComponent, onMounted, onUnmounted, watch } from "vue";
4
4
  function useField(opts) {
5
5
  const fieldApi = (() => {
6
6
  const api = new FieldApi({
package/dist/esm/useField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\nexport interface VueFieldApi<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> {\n Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => {\n api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n VueFieldApi<TParentData, TFormValidator>\n state: Readonly<\n Ref<\n FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n >\n >\n}\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api & VueFieldApi<TParentData, TFormValidator> =\n api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })()\n\n const fieldState = useStore(fieldApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = fieldApi.mount()\n })\n\n onUnmounted(() => {\n cleanup()\n })\n\n watch(\n () => opts,\n () => {\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: opts.form } as never)\n },\n )\n\n return { api: fieldApi, state: fieldState } as const\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n fieldOptions: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n >,\n context: SetupContext<\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >\n state: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n }\n }>\n >,\n) => any\n\nexport const Field = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n >(\n fieldOptions: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n context: SetupContext,\n ) => {\n const fieldApi = useField({ ...fieldOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n field: fieldApi.api,\n state: fieldApi.state.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AAgDO,SAAS,SAWd,MAOA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,GACN;AAEH,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAAA,CAC1B;AAED,cAAY,MAAM;AACR,YAAA;AAAA,EAAA,CACT;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IAAA;AAAA,EAEzD;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AA2DO,MAAM,QAAQ;AAAA,EACnB,CAWE,cAOA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAExD,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;"}
1
+ {"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n DeepKeys,\n DeepValue,\n FieldAsyncValidateOrFn,\n FieldValidateOrFn,\n FormAsyncValidateOrFn,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SetupContext,\n SlotsType,\n} from 'vue'\nimport type { UseFieldOptions } from './types'\n\nexport type FieldComponent<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in\n // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing\n> = new <\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n props: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n 'form'\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n 'form'\n >,\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n state: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >['state']\n }\n }>\n>\n\nexport interface VueFieldApi<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n}\n\nexport type UseField<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> = <\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n opts: Omit<\n UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n 'form'\n >,\n) => {\n api: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n > &\n VueFieldApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n state: Readonly<\n Ref<\n FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >['state']\n >\n >\n}\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api &\n VueFieldApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n > = api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })()\n\n const fieldState = useStore(fieldApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = fieldApi.mount()\n })\n\n onUnmounted(() => {\n cleanup()\n })\n\n watch(\n () => opts,\n () => {\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: opts.form } as never)\n },\n )\n\n return { api: fieldApi, state: fieldState } as const\n}\n\nexport type FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> = UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n>\n\nexport const Field = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n >(\n fieldOptions: UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n context: SetupContext,\n ) => {\n const fieldApi = useField({ ...fieldOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n field: fieldApi.api,\n state: fieldApi.state.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AAkSO,SAAS,SA0Bd,MAoBA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAWA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,GACN;AAEH,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAAA,CAC1B;AAED,cAAY,MAAM;AACR,YAAA;AAAA,EAAA,CACT;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IAAA;AAAA,EAEzD;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAgDO,MAAM,QAAQ;AAAA,EACnB,CA0BE,cAoBA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAExD,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;"}
package/dist/esm/useForm.d.ts CHANGED
@@ -1,15 +1,19 @@
1
- import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
1
+ import { FormApi, FormAsyncValidateOrFn, FormOptions, FormState, FormValidateOrFn } from '@tanstack/form-core';
2
2
  import { NoInfer } from '@tanstack/vue-store';
3
- import { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
3
+ import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, EmitsToProps, PublicProps, Ref, SlotsType } from 'vue';
4
4
  import { FieldComponent, UseField } from './useField.js';
5
- export interface VueFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
6
- Field: FieldComponent<TFormData, TFormValidator>;
7
- useField: UseField<TFormData, TFormValidator>;
8
- useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<TSelected>>;
9
- Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
10
- selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
11
- }, context: SetupContext<EmitsOptions, SlotsType<{
12
- default: NoInfer<FormState<TFormData>>;
13
- }>>) => any;
5
+ type SubscribeComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> = new <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>>(props: {
6
+ selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>) => TSelected;
7
+ } & EmitsToProps<EmitsOptions> & PublicProps) => CreateComponentPublicInstanceWithMixins<{
8
+ selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>) => TSelected;
9
+ }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<{
10
+ default: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>;
11
+ }>>;
12
+ export interface VueFormApi<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>> {
13
+ Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
14
+ useField: UseField<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
15
+ useStore: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>>) => TSelected) => Readonly<Ref<TSelected>>;
16
+ Subscribe: SubscribeComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
14
17
  }
15
- export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & VueFormApi<TFormData, TFormValidator>;
18
+ export declare function useForm<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>>(opts?: FormOptions<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>): FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer> & VueFormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer>;
19
+ export {};
package/dist/esm/useForm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\nexport interface VueFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => Readonly<Ref<TSelected>>\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n },\n context: SetupContext<\n EmitsOptions,\n SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n >,\n ) => any\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const formApi = (() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: typeof api & VueFormApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = defineComponent(\n (props, context) => {\n return () =>\n h(\n Field as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIField',\n inheritAttrs: false,\n },\n ) as never\n extendedApi.useField = (props) => {\n const field = useField({ ...props, form: api })\n return field\n }\n extendedApi.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state: never) => state)\n const data = useStore(api.store as never, selector as never)\n return () => context.slots.default!(data.value)\n },\n {\n name: 'Subscribe',\n inheritAttrs: false,\n },\n ) as never\n\n return extendedApi\n })()\n\n onMounted(formApi.mount)\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi\n}\n"],"names":[],"mappings":";;;;AA6BO,SAAS,QAGd,MAA+C;AAC/C,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACF,gBAAY,QAAQ;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QACV;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AACY,gBAAA,WAAW,CAAC,UAAU;AAChC,YAAM,QAAQ,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACvC,aAAA;AAAA,IACT;AACY,gBAAA,WAAW,CAAC,aAAa;AAC5B,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,gBAAY,YAAY;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAiB;AACzD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AAEO,WAAA;AAAA,EAAA,GACN;AAEH,YAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;"}
1
+ {"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type {\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SlotsType,\n} from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ntype SubscribeComponent<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> =\n // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in\n // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing\n new <\n TSelected = NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n >(\n props: {\n selector?: (\n state: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n ) => TSelected\n } & EmitsToProps<EmitsOptions> &\n PublicProps,\n ) => CreateComponentPublicInstanceWithMixins<\n {\n selector?: (\n state: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n ) => TSelected\n },\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >\n }>\n >\n\nexport interface VueFormApi<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n useField: UseField<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n useStore: <\n TSelected = NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n >(\n selector?: (\n state: NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n >,\n ) => TSelected,\n ) => Readonly<Ref<TSelected>>\n Subscribe: SubscribeComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >\n}\n\nexport function useForm<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n>(\n opts?: FormOptions<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >,\n) {\n const formApi = (() => {\n const api = new FormApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n >(opts)\n\n const extendedApi: typeof api &\n VueFormApi<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnServer\n > = api as never\n extendedApi.Field = defineComponent(\n (props, context) => {\n return () =>\n h(\n Field as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIField',\n inheritAttrs: false,\n },\n ) as never\n extendedApi.useField = (props) => {\n const field = useField({ ...props, form: api })\n return field\n }\n extendedApi.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state: never) => state)\n const data = useStore(api.store as never, selector as never)\n return () => context.slots.default!(data.value)\n },\n {\n name: 'Subscribe',\n inheritAttrs: false,\n },\n ) as never\n\n return extendedApi\n })()\n\n onMounted(formApi.mount)\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi\n}\n"],"names":[],"mappings":";;;;AA+LO,SAAS,QAWd,MAWA;AACA,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAI,QAUd,IAAI;AAEN,UAAM,cAWA;AACN,gBAAY,QAAQ;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QACV;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AACY,gBAAA,WAAW,CAAC,UAAU;AAChC,YAAM,QAAQ,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACvC,aAAA;AAAA,IACT;AACY,gBAAA,WAAW,CAAC,aAAa;AAC5B,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,gBAAY,YAAY;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAiB;AACzD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAElB;AAEO,WAAA;AAAA,EAAA,GACN;AAEH,YAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/vue-form",
3
- "version": "0.42.0",
3
+ "version": "0.43.0",
4
4
  "description": "Powerful, type-safe forms for Vue.",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -37,16 +37,16 @@
37
37
  "src"
38
38
  ],
39
39
  "dependencies": {
40
- "@tanstack/vue-store": "^0.7.0",
41
- "@tanstack/form-core": "0.42.0"
40
+ "@tanstack/form-core": "^0.42.1",
41
+ "@tanstack/vue-store": "^0.7.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@vitejs/plugin-vue": "^5.2.1",
45
- "vite": "^5.4.11",
46
- "vue": "^3.5.12"
45
+ "vite": "^6.1.1",
46
+ "vue": "^3.5.13"
47
47
  },
48
48
  "peerDependencies": {
49
- "vue": "^3.3.0"
49
+ "vue": "^3.4.0"
50
50
  },
51
51
  "scripts": {}
52
52
  }