@tanstack/vue-form 1.33.0 → 1.33.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,6 +5,10 @@ const vueStore = require("@tanstack/vue-store");
5
5
  const useField = require("./useField.cjs");
6
6
  const useForm = require("./useForm.cjs");
7
7
  const useFormGroup = require("./useFormGroup.cjs");
8
+ Object.defineProperty(exports, "useSelector", {
9
+ enumerable: true,
10
+ get: () => vueStore.useSelector
11
+ });
8
12
  Object.defineProperty(exports, "useStore", {
9
13
  enumerable: true,
10
14
  get: () => vueStore.useStore
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,5 +1,5 @@
1
1
  export * from '@tanstack/form-core';
2
- export { useStore } from '@tanstack/vue-store';
2
+ export { useSelector, useStore } from '@tanstack/vue-store';
3
3
  export * from './useField.cjs';
4
4
  export * from './useForm.cjs';
5
5
  export * from './useFormGroup.cjs';
@@ -12,31 +12,31 @@ function useField(opts) {
12
12
  });
13
13
  return api;
14
14
  })();
15
- const reactiveStateValue = vueStore.useStore(
15
+ const reactiveStateValue = vueStore.useSelector(
16
16
  fieldApi.store,
17
17
  opts.mode === "array" ? (state) => state.meta._arrayVersion || 0 : (state) => state.value
18
18
  );
19
- const reactiveMetaIsTouched = vueStore.useStore(
19
+ const reactiveMetaIsTouched = vueStore.useSelector(
20
20
  fieldApi.store,
21
21
  (state) => state.meta.isTouched
22
22
  );
23
- const reactiveMetaIsBlurred = vueStore.useStore(
23
+ const reactiveMetaIsBlurred = vueStore.useSelector(
24
24
  fieldApi.store,
25
25
  (state) => state.meta.isBlurred
26
26
  );
27
- const reactiveMetaIsDirty = vueStore.useStore(
27
+ const reactiveMetaIsDirty = vueStore.useSelector(
28
28
  fieldApi.store,
29
29
  (state) => state.meta.isDirty
30
30
  );
31
- const reactiveMetaErrorMap = vueStore.useStore(
31
+ const reactiveMetaErrorMap = vueStore.useSelector(
32
32
  fieldApi.store,
33
33
  (state) => state.meta.errorMap
34
34
  );
35
- const reactiveMetaErrorSourceMap = vueStore.useStore(
35
+ const reactiveMetaErrorSourceMap = vueStore.useSelector(
36
36
  fieldApi.store,
37
37
  (state) => state.meta.errorSourceMap
38
38
  );
39
- const reactiveMetaIsValidating = vueStore.useStore(
39
+ const reactiveMetaIsValidating = vueStore.useSelector(
40
40
  fieldApi.store,
41
41
  (state) => state.meta.isValidating
42
42
  );
@@ -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 { computed, defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n AnyFieldApi,\n AnyFieldMeta,\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 SetupContext,\n SlotsType,\n} from 'vue'\nimport type { UseFieldOptions, UseFieldOptionsBound } 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n props: FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n return api\n })()\n\n // For array mode, only track length changes to avoid re-renders when child properties change\n // See: https://github.com/TanStack/form/issues/1925\n const reactiveStateValue = useStore(\n fieldApi.store,\n (opts.mode === 'array'\n ? (state) => state.meta._arrayVersion || 0\n : (state) => state.value) as (\n state: typeof fieldApi.state,\n ) => TData | number,\n )\n const reactiveMetaIsTouched = useStore(\n fieldApi.store,\n (state) => state.meta.isTouched,\n )\n const reactiveMetaIsBlurred = useStore(\n fieldApi.store,\n (state) => state.meta.isBlurred,\n )\n const reactiveMetaIsDirty = useStore(\n fieldApi.store,\n (state) => state.meta.isDirty,\n )\n const reactiveMetaErrorMap = useStore(\n fieldApi.store,\n (state) => state.meta.errorMap,\n )\n const reactiveMetaErrorSourceMap = useStore(\n fieldApi.store,\n (state) => state.meta.errorSourceMap,\n )\n const reactiveMetaIsValidating = useStore(\n fieldApi.store,\n (state) => state.meta.isValidating,\n )\n\n const fieldState = computed(() => {\n // For array mode, reactiveStateValue is the length (for reactivity tracking),\n // so we need to read it to register the dependency, then return the actual\n // value from fieldApi.\n const trackedValue = reactiveStateValue.value\n // Read all reactive meta refs eagerly so that fieldState recomputes (and\n // dependent renders re-run) whenever any of them change. Without this, a\n // consumer reading `field.getMeta()` or `field.state.meta` from a render\n // function would not re-render on meta updates, since the meta getter\n // would never have registered those dependencies.\n const isTouched = reactiveMetaIsTouched.value\n const isBlurred = reactiveMetaIsBlurred.value\n const isDirty = reactiveMetaIsDirty.value\n const errorMap = reactiveMetaErrorMap.value\n const errorSourceMap = reactiveMetaErrorSourceMap.value\n const isValidating = reactiveMetaIsValidating.value\n return {\n value:\n opts.mode === 'array' ? fieldApi.state.value : (trackedValue as TData),\n meta: {\n ...fieldApi.state.meta,\n isTouched,\n isBlurred,\n isDirty,\n errorMap,\n errorSourceMap,\n isValidating,\n } satisfies AnyFieldMeta,\n } satisfies AnyFieldApi['state']\n })\n\n const extendedFieldApi = computed(() => {\n const reactiveFieldApi = {\n ...fieldApi,\n get state() {\n return fieldState.value\n },\n }\n\n const extendedApi: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > = reactiveFieldApi as never\n\n return extendedApi\n })\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 {\n api: extendedFieldApi.value,\n get state() {\n return fieldState.value\n },\n } 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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FieldComponentBoundProps<\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n> = UseFieldOptionsBound<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":["FieldApi","useStore","computed","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AA4LO,SAAS,SAiCd,MAyBA;AACA,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAIA,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,WAAO;AAAA,EACT,GAAA;AAIA,QAAM,qBAAqBC,SAAAA;AAAAA,IACzB,SAAS;AAAA,IACR,KAAK,SAAS,UACX,CAAC,UAAU,MAAM,KAAK,iBAAiB,IACvC,CAAC,UAAU,MAAM;AAAA,EAAA;AAIvB,QAAM,wBAAwBA,SAAAA;AAAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,wBAAwBA,SAAAA;AAAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,sBAAsBA,SAAAA;AAAAA,IAC1B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,uBAAuBA,SAAAA;AAAAA,IAC3B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,6BAA6BA,SAAAA;AAAAA,IACjC,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,2BAA2BA,SAAAA;AAAAA,IAC/B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAGxB,QAAM,aAAaC,IAAAA,SAAS,MAAM;AAIhC,UAAM,eAAe,mBAAmB;AAMxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,UAAU,oBAAoB;AACpC,UAAM,WAAW,qBAAqB;AACtC,UAAM,iBAAiB,2BAA2B;AAClD,UAAM,eAAe,yBAAyB;AAC9C,WAAO;AAAA,MACL,OACE,KAAK,SAAS,UAAU,SAAS,MAAM,QAAS;AAAA,MAClD,MAAM;AAAA,QACJ,GAAG,SAAS,MAAM;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AAED,QAAM,mBAAmBA,IAAAA,SAAS,MAAM;AACtC,UAAM,mBAAmB;AAAA,MACvB,GAAG;AAAA,MACH,IAAI,QAAQ;AACV,eAAO,WAAW;AAAA,MACpB;AAAA,IAAA;AAGF,UAAM,cAwBF;AAEJ,WAAO;AAAA,EACT,CAAC;AAED,MAAI;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS,MAAA;AAAA,EACrB,CAAC;AAEDC,MAAAA,YAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAEDC,MAAAA;AAAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,KAAK,iBAAiB;AAAA,IACtB,IAAI,QAAQ;AACV,aAAO,WAAW;AAAA,IACpB;AAAA,EAAA;AAEJ;AAgGO,MAAM,QAAQC,IAAAA;AAAAA,EACnB,CAiCE,cAyBA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAE/D,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS;AAAA,IAAA,CACjB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAA;AACjC;;;"}
1
+ {"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { computed, defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n AnyFieldApi,\n AnyFieldMeta,\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 SetupContext,\n SlotsType,\n} from 'vue'\nimport type { UseFieldOptions, UseFieldOptionsBound } 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n props: FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n return api\n })()\n\n // For array mode, only track length changes to avoid re-renders when child properties change\n // See: https://github.com/TanStack/form/issues/1925\n const reactiveStateValue = useSelector(\n fieldApi.store,\n (opts.mode === 'array'\n ? (state) => state.meta._arrayVersion || 0\n : (state) => state.value) as (\n state: typeof fieldApi.state,\n ) => TData | number,\n )\n const reactiveMetaIsTouched = useSelector(\n fieldApi.store,\n (state) => state.meta.isTouched,\n )\n const reactiveMetaIsBlurred = useSelector(\n fieldApi.store,\n (state) => state.meta.isBlurred,\n )\n const reactiveMetaIsDirty = useSelector(\n fieldApi.store,\n (state) => state.meta.isDirty,\n )\n const reactiveMetaErrorMap = useSelector(\n fieldApi.store,\n (state) => state.meta.errorMap,\n )\n const reactiveMetaErrorSourceMap = useSelector(\n fieldApi.store,\n (state) => state.meta.errorSourceMap,\n )\n const reactiveMetaIsValidating = useSelector(\n fieldApi.store,\n (state) => state.meta.isValidating,\n )\n\n const fieldState = computed(() => {\n // For array mode, reactiveStateValue is the length (for reactivity tracking),\n // so we need to read it to register the dependency, then return the actual\n // value from fieldApi.\n const trackedValue = reactiveStateValue.value\n // Read all reactive meta refs eagerly so that fieldState recomputes (and\n // dependent renders re-run) whenever any of them change. Without this, a\n // consumer reading `field.getMeta()` or `field.state.meta` from a render\n // function would not re-render on meta updates, since the meta getter\n // would never have registered those dependencies.\n const isTouched = reactiveMetaIsTouched.value\n const isBlurred = reactiveMetaIsBlurred.value\n const isDirty = reactiveMetaIsDirty.value\n const errorMap = reactiveMetaErrorMap.value\n const errorSourceMap = reactiveMetaErrorSourceMap.value\n const isValidating = reactiveMetaIsValidating.value\n return {\n value:\n opts.mode === 'array' ? fieldApi.state.value : (trackedValue as TData),\n meta: {\n ...fieldApi.state.meta,\n isTouched,\n isBlurred,\n isDirty,\n errorMap,\n errorSourceMap,\n isValidating,\n } satisfies AnyFieldMeta,\n } satisfies AnyFieldApi['state']\n })\n\n const extendedFieldApi = computed(() => {\n const reactiveFieldApi = {\n ...fieldApi,\n get state() {\n return fieldState.value\n },\n }\n\n const extendedApi: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > = reactiveFieldApi as never\n\n return extendedApi\n })\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 {\n api: extendedFieldApi.value,\n get state() {\n return fieldState.value\n },\n } 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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FieldComponentBoundProps<\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n> = UseFieldOptionsBound<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":["FieldApi","useSelector","computed","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AA4LO,SAAS,SAiCd,MAyBA;AACA,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAIA,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,WAAO;AAAA,EACT,GAAA;AAIA,QAAM,qBAAqBC,SAAAA;AAAAA,IACzB,SAAS;AAAA,IACR,KAAK,SAAS,UACX,CAAC,UAAU,MAAM,KAAK,iBAAiB,IACvC,CAAC,UAAU,MAAM;AAAA,EAAA;AAIvB,QAAM,wBAAwBA,SAAAA;AAAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,wBAAwBA,SAAAA;AAAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,sBAAsBA,SAAAA;AAAAA,IAC1B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,uBAAuBA,SAAAA;AAAAA,IAC3B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,6BAA6BA,SAAAA;AAAAA,IACjC,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,2BAA2BA,SAAAA;AAAAA,IAC/B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAGxB,QAAM,aAAaC,IAAAA,SAAS,MAAM;AAIhC,UAAM,eAAe,mBAAmB;AAMxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,UAAU,oBAAoB;AACpC,UAAM,WAAW,qBAAqB;AACtC,UAAM,iBAAiB,2BAA2B;AAClD,UAAM,eAAe,yBAAyB;AAC9C,WAAO;AAAA,MACL,OACE,KAAK,SAAS,UAAU,SAAS,MAAM,QAAS;AAAA,MAClD,MAAM;AAAA,QACJ,GAAG,SAAS,MAAM;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AAED,QAAM,mBAAmBA,IAAAA,SAAS,MAAM;AACtC,UAAM,mBAAmB;AAAA,MACvB,GAAG;AAAA,MACH,IAAI,QAAQ;AACV,eAAO,WAAW;AAAA,MACpB;AAAA,IAAA;AAGF,UAAM,cAwBF;AAEJ,WAAO;AAAA,EACT,CAAC;AAED,MAAI;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS,MAAA;AAAA,EACrB,CAAC;AAEDC,MAAAA,YAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAEDC,MAAAA;AAAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,KAAK,iBAAiB;AAAA,IACtB,IAAI,QAAQ;AACV,aAAO,WAAW;AAAA,IACpB;AAAA,EAAA;AAEJ;AAgGO,MAAM,QAAQC,IAAAA;AAAAA,EACnB,CAiCE,cAyBA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAE/D,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS;AAAA,IAAA,CACjB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAA;AACjC;;;"}
@@ -21,6 +21,7 @@ export declare function useField<TParentData, TName extends DeepKeys<TParentData
21
21
  errorMap: import('@tanstack/form-core').ValidationErrorMap<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>, unknown>;
22
22
  errorSourceMap: import('@tanstack/form-core').ValidationErrorMapSource;
23
23
  isValidating: boolean;
24
+ _pendingValidationsCount: number;
24
25
  _arrayVersion: number;
25
26
  errors: (import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>>)[];
26
27
  isPristine: boolean;
@@ -35,14 +35,14 @@ function useForm(opts) {
35
35
  inheritAttrs: false
36
36
  }
37
37
  );
38
- extendedApi.useStore = (selector) => {
39
- return vueStore.useStore(api.store, selector);
40
- };
38
+ const subscribeToStore = (selector) => vueStore.useSelector(api.store, selector);
39
+ extendedApi.useSelector = subscribeToStore;
40
+ extendedApi.useStore = subscribeToStore;
41
41
  extendedApi.Subscribe = vue.defineComponent(
42
42
  (props, context) => {
43
43
  const allProps = { ...props, ...context.attrs };
44
44
  const selector = allProps.selector ?? ((state) => state);
45
- const data = vueStore.useStore(api.store, selector);
45
+ const data = vueStore.useSelector(api.store, selector);
46
46
  return () => context.slots.default(data.value);
47
47
  },
48
48
  {
@@ -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 } from './useField'\nimport { FormGroup } from './useFormGroup'\nimport type {\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SlotsType,\n} from 'vue'\nimport type { FieldComponent } from './useField'\nimport type { FormGroupComponent } from './useFormGroup'\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync 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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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: TSelected\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\n >\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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.FormGroup = defineComponent(\n (props, context) => {\n return () =>\n h(\n FormGroup as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIFormGroup',\n inheritAttrs: false,\n },\n ) as never\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","FormGroup","useStore","onMounted"],"mappings":";;;;;;;AA2MO,SAAS,QAcd,MAcA;AACA,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAIA,SAAAA,QAad,IAAI;AAEN,UAAM,cAcA;AACN,gBAAY,QAAQC,IAAAA;AAAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAAA;AAAAA,UACEC,SAAAA;AAAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,gBAAY,YAAYF,IAAAA;AAAAA,MACtB,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAAA;AAAAA,UACEE,aAAAA;AAAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,gBAAY,WAAW,CAAC,aAAa;AACnC,aAAOC,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,gBAAY,YAAYJ,IAAAA;AAAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAA;AACxC,cAAM,WAAW,SAAS,aAAa,CAAC,UAAiB;AACzD,cAAM,OAAOI,SAAAA,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,IAChB;AAGF,WAAO;AAAA,EACT,GAAA;AAEAC,MAAAA,UAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;;"}
1
+ {"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field } from './useField'\nimport { FormGroup } from './useFormGroup'\nimport type {\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SlotsType,\n} from 'vue'\nimport type { FieldComponent } from './useField'\nimport type { FormGroupComponent } from './useFormGroup'\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync 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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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: TSelected\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\n >\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\n >\n useSelector: <\n TSelected = NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer\n >\n >,\n ) => TSelected,\n ) => Readonly<Ref<TSelected>>\n /**\n * @deprecated Use `form.useSelector` instead.\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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.FormGroup = defineComponent(\n (props, context) => {\n return () =>\n h(\n FormGroup as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIFormGroup',\n inheritAttrs: false,\n },\n ) as never\n const subscribeToStore = (selector?: (state: never) => unknown) =>\n useSelector(api.store as never, selector as never) as never\n extendedApi.useSelector = subscribeToStore\n /** @deprecated Use `form.useSelector` instead. */\n extendedApi.useStore = subscribeToStore\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state: never) => state)\n const data = useSelector(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","FormGroup","useSelector","onMounted"],"mappings":";;;;;;;AAiPO,SAAS,QAcd,MAcA;AACA,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAIA,SAAAA,QAad,IAAI;AAEN,UAAM,cAcA;AACN,gBAAY,QAAQC,IAAAA;AAAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAAA;AAAAA,UACEC,SAAAA;AAAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,gBAAY,YAAYF,IAAAA;AAAAA,MACtB,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAAA;AAAAA,UACEE,aAAAA;AAAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,UAAM,mBAAmB,CAAC,aACxBC,SAAAA,YAAY,IAAI,OAAgB,QAAiB;AACnD,gBAAY,cAAc;AAE1B,gBAAY,WAAW;AACvB,gBAAY,YAAYJ,IAAAA;AAAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAA;AACxC,cAAM,WAAW,SAAS,aAAa,CAAC,UAAiB;AACzD,cAAM,OAAOI,SAAAA,YAAY,IAAI,OAAgB,QAAiB;AAC9D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAGF,WAAO;AAAA,EACT,GAAA;AAEAC,MAAAA,UAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;;"}
@@ -12,6 +12,10 @@ type SubscribeComponent<TParentData, TFormOnMount extends undefined | FormValida
12
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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> {
13
13
  Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
14
14
  FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
15
+ useSelector: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => Readonly<Ref<TSelected>>;
16
+ /**
17
+ * @deprecated Use `form.useSelector` instead.
18
+ */
15
19
  useStore: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => Readonly<Ref<TSelected>>;
16
20
  Subscribe: SubscribeComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>;
17
21
  }
@@ -10,7 +10,7 @@ function useFormGroup(opts) {
10
10
  });
11
11
  return api;
12
12
  })();
13
- const groupState = vueStore.useStore(formGroupApi.store, (state) => state);
13
+ const groupState = vueStore.useSelector(formGroupApi.store, (state) => state);
14
14
  let cleanup;
15
15
  vue.onMounted(() => {
16
16
  cleanup = formGroupApi.mount();
@@ -1 +1 @@
1
- {"version":3,"file":"useFormGroup.cjs","sources":["../../src/useFormGroup.tsx"],"sourcesContent":["import { FormGroupApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n DeepKeys,\n DeepValue,\n FormAsyncValidateOrFn,\n FormGroupApiOptions,\n FormGroupAsyncValidateOrFn,\n FormGroupOptions,\n FormGroupValidateOrFn,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n SetupContext,\n SlotsType,\n} from 'vue'\n\nexport type FormGroupComponent<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\n>(\n props: FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: {\n group: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n state: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >['state']\n }\n }>\n>\n\nexport interface VueFormGroupApi<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n}\n\nexport function useFormGroup<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n>(\n opts: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const formGroupApi = (() => {\n const api = new FormGroupApi({\n ...opts,\n })\n\n return api\n })()\n\n const groupState = useStore(formGroupApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = formGroupApi.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 formGroupApi.update({ ...opts } as never)\n },\n )\n\n return { api: formGroupApi, state: groupState } as const\n}\n\nexport type FormGroupComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FormGroupComponentBoundProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport const FormGroup = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n >(\n formGroupOptions: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n context: SetupContext,\n ) => {\n const groupApi = useFormGroup({ ...formGroupOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n group: groupApi.api,\n state: groupApi.state.value,\n })\n },\n { name: 'FormGroup', inheritAttrs: false },\n)\n"],"names":["FormGroupApi","useStore","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AA4NO,SAAS,aAwCd,MA0BA;AACA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,MAAM,IAAIA,sBAAa;AAAA,MAC3B,GAAG;AAAA,IAAA,CACJ;AAED,WAAO;AAAA,EACT,GAAA;AAEA,QAAM,aAAaC,SAAAA,SAAS,aAAa,OAAO,CAAC,UAAU,KAAK;AAEhE,MAAI;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,aAAa,MAAA;AAAA,EACzB,CAAC;AAEDC,MAAAA,YAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAEDC,MAAAA;AAAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,mBAAa,OAAO,EAAE,GAAG,MAAe;AAAA,IAC1C;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,cAAc,OAAO,WAAA;AACrC;AAsIO,MAAM,YAAYC,IAAAA;AAAAA,EACvB,CA4CE,kBA0BA,YACG;AACH,UAAM,WAAW,aAAa,EAAE,GAAG,kBAAkB,GAAG,QAAQ,OAAO;AAEvE,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,aAAa,cAAc,MAAA;AACrC;;;"}
1
+ {"version":3,"file":"useFormGroup.cjs","sources":["../../src/useFormGroup.tsx"],"sourcesContent":["import { FormGroupApi } from '@tanstack/form-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n DeepKeys,\n DeepValue,\n FormAsyncValidateOrFn,\n FormGroupApiOptions,\n FormGroupAsyncValidateOrFn,\n FormGroupOptions,\n FormGroupValidateOrFn,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n SetupContext,\n SlotsType,\n} from 'vue'\n\nexport type FormGroupComponent<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\n>(\n props: FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: {\n group: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n state: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >['state']\n }\n }>\n>\n\nexport interface VueFormGroupApi<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n}\n\nexport function useFormGroup<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n>(\n opts: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const formGroupApi = (() => {\n const api = new FormGroupApi({\n ...opts,\n })\n\n return api\n })()\n\n const groupState = useSelector(formGroupApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = formGroupApi.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 formGroupApi.update({ ...opts } as never)\n },\n )\n\n return { api: formGroupApi, state: groupState } as const\n}\n\nexport type FormGroupComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FormGroupComponentBoundProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport const FormGroup = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n >(\n formGroupOptions: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n context: SetupContext,\n ) => {\n const groupApi = useFormGroup({ ...formGroupOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n group: groupApi.api,\n state: groupApi.state.value,\n })\n },\n { name: 'FormGroup', inheritAttrs: false },\n)\n"],"names":["FormGroupApi","useSelector","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AA4NO,SAAS,aAwCd,MA0BA;AACA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,MAAM,IAAIA,sBAAa;AAAA,MAC3B,GAAG;AAAA,IAAA,CACJ;AAED,WAAO;AAAA,EACT,GAAA;AAEA,QAAM,aAAaC,SAAAA,YAAY,aAAa,OAAO,CAAC,UAAU,KAAK;AAEnE,MAAI;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,aAAa,MAAA;AAAA,EACzB,CAAC;AAEDC,MAAAA,YAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAEDC,MAAAA;AAAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,mBAAa,OAAO,EAAE,GAAG,MAAe;AAAA,IAC1C;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,cAAc,OAAO,WAAA;AACrC;AAsIO,MAAM,YAAYC,IAAAA;AAAAA,EACvB,CA4CE,kBA0BA,YACG;AACH,UAAM,WAAW,aAAa,EAAE,GAAG,kBAAkB,GAAG,QAAQ,OAAO;AAEvE,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,aAAa,cAAc,MAAA;AACrC;;;"}
@@ -1,5 +1,5 @@
1
1
  export * from '@tanstack/form-core';
2
- export { useStore } from '@tanstack/vue-store';
2
+ export { useSelector, useStore } from '@tanstack/vue-store';
3
3
  export * from './useField.js';
4
4
  export * from './useForm.js';
5
5
  export * from './useFormGroup.js';
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export * from "@tanstack/form-core";
2
- import { useStore } from "@tanstack/vue-store";
2
+ import { useSelector, useStore } from "@tanstack/vue-store";
3
3
  import { Field, useField } from "./useField.js";
4
4
  import { useForm } from "./useForm.js";
5
5
  import { FormGroup, useFormGroup } from "./useFormGroup.js";
@@ -9,6 +9,7 @@ export {
9
9
  useField,
10
10
  useForm,
11
11
  useFormGroup,
12
+ useSelector,
12
13
  useStore
13
14
  };
14
15
  //# sourceMappingURL=index.js.map
@@ -21,6 +21,7 @@ export declare function useField<TParentData, TName extends DeepKeys<TParentData
21
21
  errorMap: import('@tanstack/form-core').ValidationErrorMap<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>, unknown>;
22
22
  errorSourceMap: import('@tanstack/form-core').ValidationErrorMapSource;
23
23
  isValidating: boolean;
24
+ _pendingValidationsCount: number;
24
25
  _arrayVersion: number;
25
26
  errors: (import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>>)[];
26
27
  isPristine: boolean;
@@ -1,5 +1,5 @@
1
1
  import { FieldApi } from "@tanstack/form-core";
2
- import { useStore } from "@tanstack/vue-store";
2
+ import { useSelector } from "@tanstack/vue-store";
3
3
  import { computed, onMounted, onUnmounted, watch, defineComponent } from "vue";
4
4
  function useField(opts) {
5
5
  const fieldApi = (() => {
@@ -10,31 +10,31 @@ function useField(opts) {
10
10
  });
11
11
  return api;
12
12
  })();
13
- const reactiveStateValue = useStore(
13
+ const reactiveStateValue = useSelector(
14
14
  fieldApi.store,
15
15
  opts.mode === "array" ? (state) => state.meta._arrayVersion || 0 : (state) => state.value
16
16
  );
17
- const reactiveMetaIsTouched = useStore(
17
+ const reactiveMetaIsTouched = useSelector(
18
18
  fieldApi.store,
19
19
  (state) => state.meta.isTouched
20
20
  );
21
- const reactiveMetaIsBlurred = useStore(
21
+ const reactiveMetaIsBlurred = useSelector(
22
22
  fieldApi.store,
23
23
  (state) => state.meta.isBlurred
24
24
  );
25
- const reactiveMetaIsDirty = useStore(
25
+ const reactiveMetaIsDirty = useSelector(
26
26
  fieldApi.store,
27
27
  (state) => state.meta.isDirty
28
28
  );
29
- const reactiveMetaErrorMap = useStore(
29
+ const reactiveMetaErrorMap = useSelector(
30
30
  fieldApi.store,
31
31
  (state) => state.meta.errorMap
32
32
  );
33
- const reactiveMetaErrorSourceMap = useStore(
33
+ const reactiveMetaErrorSourceMap = useSelector(
34
34
  fieldApi.store,
35
35
  (state) => state.meta.errorSourceMap
36
36
  );
37
- const reactiveMetaIsValidating = useStore(
37
+ const reactiveMetaIsValidating = useSelector(
38
38
  fieldApi.store,
39
39
  (state) => state.meta.isValidating
40
40
  );
@@ -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 { computed, defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n AnyFieldApi,\n AnyFieldMeta,\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 SetupContext,\n SlotsType,\n} from 'vue'\nimport type { UseFieldOptions, UseFieldOptionsBound } 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n props: FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n return api\n })()\n\n // For array mode, only track length changes to avoid re-renders when child properties change\n // See: https://github.com/TanStack/form/issues/1925\n const reactiveStateValue = useStore(\n fieldApi.store,\n (opts.mode === 'array'\n ? (state) => state.meta._arrayVersion || 0\n : (state) => state.value) as (\n state: typeof fieldApi.state,\n ) => TData | number,\n )\n const reactiveMetaIsTouched = useStore(\n fieldApi.store,\n (state) => state.meta.isTouched,\n )\n const reactiveMetaIsBlurred = useStore(\n fieldApi.store,\n (state) => state.meta.isBlurred,\n )\n const reactiveMetaIsDirty = useStore(\n fieldApi.store,\n (state) => state.meta.isDirty,\n )\n const reactiveMetaErrorMap = useStore(\n fieldApi.store,\n (state) => state.meta.errorMap,\n )\n const reactiveMetaErrorSourceMap = useStore(\n fieldApi.store,\n (state) => state.meta.errorSourceMap,\n )\n const reactiveMetaIsValidating = useStore(\n fieldApi.store,\n (state) => state.meta.isValidating,\n )\n\n const fieldState = computed(() => {\n // For array mode, reactiveStateValue is the length (for reactivity tracking),\n // so we need to read it to register the dependency, then return the actual\n // value from fieldApi.\n const trackedValue = reactiveStateValue.value\n // Read all reactive meta refs eagerly so that fieldState recomputes (and\n // dependent renders re-run) whenever any of them change. Without this, a\n // consumer reading `field.getMeta()` or `field.state.meta` from a render\n // function would not re-render on meta updates, since the meta getter\n // would never have registered those dependencies.\n const isTouched = reactiveMetaIsTouched.value\n const isBlurred = reactiveMetaIsBlurred.value\n const isDirty = reactiveMetaIsDirty.value\n const errorMap = reactiveMetaErrorMap.value\n const errorSourceMap = reactiveMetaErrorSourceMap.value\n const isValidating = reactiveMetaIsValidating.value\n return {\n value:\n opts.mode === 'array' ? fieldApi.state.value : (trackedValue as TData),\n meta: {\n ...fieldApi.state.meta,\n isTouched,\n isBlurred,\n isDirty,\n errorMap,\n errorSourceMap,\n isValidating,\n } satisfies AnyFieldMeta,\n } satisfies AnyFieldApi['state']\n })\n\n const extendedFieldApi = computed(() => {\n const reactiveFieldApi = {\n ...fieldApi,\n get state() {\n return fieldState.value\n },\n }\n\n const extendedApi: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > = reactiveFieldApi as never\n\n return extendedApi\n })\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 {\n api: extendedFieldApi.value,\n get state() {\n return fieldState.value\n },\n } 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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FieldComponentBoundProps<\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n> = UseFieldOptionsBound<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AA4LO,SAAS,SAiCd,MAyBA;AACA,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,WAAO;AAAA,EACT,GAAA;AAIA,QAAM,qBAAqB;AAAA,IACzB,SAAS;AAAA,IACR,KAAK,SAAS,UACX,CAAC,UAAU,MAAM,KAAK,iBAAiB,IACvC,CAAC,UAAU,MAAM;AAAA,EAAA;AAIvB,QAAM,wBAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,wBAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,sBAAsB;AAAA,IAC1B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,uBAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,6BAA6B;AAAA,IACjC,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,2BAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAGxB,QAAM,aAAa,SAAS,MAAM;AAIhC,UAAM,eAAe,mBAAmB;AAMxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,UAAU,oBAAoB;AACpC,UAAM,WAAW,qBAAqB;AACtC,UAAM,iBAAiB,2BAA2B;AAClD,UAAM,eAAe,yBAAyB;AAC9C,WAAO;AAAA,MACL,OACE,KAAK,SAAS,UAAU,SAAS,MAAM,QAAS;AAAA,MAClD,MAAM;AAAA,QACJ,GAAG,SAAS,MAAM;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AAED,QAAM,mBAAmB,SAAS,MAAM;AACtC,UAAM,mBAAmB;AAAA,MACvB,GAAG;AAAA,MACH,IAAI,QAAQ;AACV,eAAO,WAAW;AAAA,MACpB;AAAA,IAAA;AAGF,UAAM,cAwBF;AAEJ,WAAO;AAAA,EACT,CAAC;AAED,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAA;AAAA,EACrB,CAAC;AAED,cAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,KAAK,iBAAiB;AAAA,IACtB,IAAI,QAAQ;AACV,aAAO,WAAW;AAAA,IACpB;AAAA,EAAA;AAEJ;AAgGO,MAAM,QAAQ;AAAA,EACnB,CAiCE,cAyBA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAE/D,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS;AAAA,IAAA,CACjB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAA;AACjC;"}
1
+ {"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { computed, defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n AnyFieldApi,\n AnyFieldMeta,\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 SetupContext,\n SlotsType,\n} from 'vue'\nimport type { UseFieldOptions, UseFieldOptionsBound } 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n props: FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n return api\n })()\n\n // For array mode, only track length changes to avoid re-renders when child properties change\n // See: https://github.com/TanStack/form/issues/1925\n const reactiveStateValue = useSelector(\n fieldApi.store,\n (opts.mode === 'array'\n ? (state) => state.meta._arrayVersion || 0\n : (state) => state.value) as (\n state: typeof fieldApi.state,\n ) => TData | number,\n )\n const reactiveMetaIsTouched = useSelector(\n fieldApi.store,\n (state) => state.meta.isTouched,\n )\n const reactiveMetaIsBlurred = useSelector(\n fieldApi.store,\n (state) => state.meta.isBlurred,\n )\n const reactiveMetaIsDirty = useSelector(\n fieldApi.store,\n (state) => state.meta.isDirty,\n )\n const reactiveMetaErrorMap = useSelector(\n fieldApi.store,\n (state) => state.meta.errorMap,\n )\n const reactiveMetaErrorSourceMap = useSelector(\n fieldApi.store,\n (state) => state.meta.errorSourceMap,\n )\n const reactiveMetaIsValidating = useSelector(\n fieldApi.store,\n (state) => state.meta.isValidating,\n )\n\n const fieldState = computed(() => {\n // For array mode, reactiveStateValue is the length (for reactivity tracking),\n // so we need to read it to register the dependency, then return the actual\n // value from fieldApi.\n const trackedValue = reactiveStateValue.value\n // Read all reactive meta refs eagerly so that fieldState recomputes (and\n // dependent renders re-run) whenever any of them change. Without this, a\n // consumer reading `field.getMeta()` or `field.state.meta` from a render\n // function would not re-render on meta updates, since the meta getter\n // would never have registered those dependencies.\n const isTouched = reactiveMetaIsTouched.value\n const isBlurred = reactiveMetaIsBlurred.value\n const isDirty = reactiveMetaIsDirty.value\n const errorMap = reactiveMetaErrorMap.value\n const errorSourceMap = reactiveMetaErrorSourceMap.value\n const isValidating = reactiveMetaIsValidating.value\n return {\n value:\n opts.mode === 'array' ? fieldApi.state.value : (trackedValue as TData),\n meta: {\n ...fieldApi.state.meta,\n isTouched,\n isBlurred,\n isDirty,\n errorMap,\n errorSourceMap,\n isValidating,\n } satisfies AnyFieldMeta,\n } satisfies AnyFieldApi['state']\n })\n\n const extendedFieldApi = computed(() => {\n const reactiveFieldApi = {\n ...fieldApi,\n get state() {\n return fieldState.value\n },\n }\n\n const extendedApi: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > = reactiveFieldApi as never\n\n return extendedApi\n })\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 {\n api: extendedFieldApi.value,\n get state() {\n return fieldState.value\n },\n } 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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FieldComponentBoundProps<\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n> = UseFieldOptionsBound<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\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 TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync 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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\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,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AA4LO,SAAS,SAiCd,MAyBA;AACA,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,WAAO;AAAA,EACT,GAAA;AAIA,QAAM,qBAAqB;AAAA,IACzB,SAAS;AAAA,IACR,KAAK,SAAS,UACX,CAAC,UAAU,MAAM,KAAK,iBAAiB,IACvC,CAAC,UAAU,MAAM;AAAA,EAAA;AAIvB,QAAM,wBAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,wBAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,sBAAsB;AAAA,IAC1B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,uBAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,6BAA6B;AAAA,IACjC,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,2BAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAGxB,QAAM,aAAa,SAAS,MAAM;AAIhC,UAAM,eAAe,mBAAmB;AAMxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,UAAU,oBAAoB;AACpC,UAAM,WAAW,qBAAqB;AACtC,UAAM,iBAAiB,2BAA2B;AAClD,UAAM,eAAe,yBAAyB;AAC9C,WAAO;AAAA,MACL,OACE,KAAK,SAAS,UAAU,SAAS,MAAM,QAAS;AAAA,MAClD,MAAM;AAAA,QACJ,GAAG,SAAS,MAAM;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AAED,QAAM,mBAAmB,SAAS,MAAM;AACtC,UAAM,mBAAmB;AAAA,MACvB,GAAG;AAAA,MACH,IAAI,QAAQ;AACV,eAAO,WAAW;AAAA,MACpB;AAAA,IAAA;AAGF,UAAM,cAwBF;AAEJ,WAAO;AAAA,EACT,CAAC;AAED,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAA;AAAA,EACrB,CAAC;AAED,cAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,KAAK,iBAAiB;AAAA,IACtB,IAAI,QAAQ;AACV,aAAO,WAAW;AAAA,IACpB;AAAA,EAAA;AAEJ;AAgGO,MAAM,QAAQ;AAAA,EACnB,CAiCE,cAyBA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAE/D,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS;AAAA,IAAA,CACjB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAA;AACjC;"}
@@ -12,6 +12,10 @@ type SubscribeComponent<TParentData, TFormOnMount extends undefined | FormValida
12
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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> {
13
13
  Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
14
14
  FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
15
+ useSelector: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => Readonly<Ref<TSelected>>;
16
+ /**
17
+ * @deprecated Use `form.useSelector` instead.
18
+ */
15
19
  useStore: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => Readonly<Ref<TSelected>>;
16
20
  Subscribe: SubscribeComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>;
17
21
  }
@@ -1,5 +1,5 @@
1
1
  import { FormApi } from "@tanstack/form-core";
2
- import { useStore } from "@tanstack/vue-store";
2
+ import { useSelector } from "@tanstack/vue-store";
3
3
  import { defineComponent, h, onMounted } from "vue";
4
4
  import { Field } from "./useField.js";
5
5
  import { FormGroup } from "./useFormGroup.js";
@@ -33,14 +33,14 @@ function useForm(opts) {
33
33
  inheritAttrs: false
34
34
  }
35
35
  );
36
- extendedApi.useStore = (selector) => {
37
- return useStore(api.store, selector);
38
- };
36
+ const subscribeToStore = (selector) => useSelector(api.store, selector);
37
+ extendedApi.useSelector = subscribeToStore;
38
+ extendedApi.useStore = subscribeToStore;
39
39
  extendedApi.Subscribe = defineComponent(
40
40
  (props, context) => {
41
41
  const allProps = { ...props, ...context.attrs };
42
42
  const selector = allProps.selector ?? ((state) => state);
43
- const data = useStore(api.store, selector);
43
+ const data = useSelector(api.store, selector);
44
44
  return () => context.slots.default(data.value);
45
45
  },
46
46
  {
@@ -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 } from './useField'\nimport { FormGroup } from './useFormGroup'\nimport type {\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SlotsType,\n} from 'vue'\nimport type { FieldComponent } from './useField'\nimport type { FormGroupComponent } from './useFormGroup'\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync 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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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: TSelected\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\n >\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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.FormGroup = defineComponent(\n (props, context) => {\n return () =>\n h(\n FormGroup as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIFormGroup',\n inheritAttrs: false,\n },\n ) as never\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":";;;;;AA2MO,SAAS,QAcd,MAcA;AACA,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAad,IAAI;AAEN,UAAM,cAcA;AACN,gBAAY,QAAQ;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,gBAAY,YAAY;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,gBAAY,WAAW,CAAC,aAAa;AACnC,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,gBAAY,YAAY;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAA;AACxC,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,IAChB;AAGF,WAAO;AAAA,EACT,GAAA;AAEA,YAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;"}
1
+ {"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field } from './useField'\nimport { FormGroup } from './useFormGroup'\nimport type {\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n Ref,\n SlotsType,\n} from 'vue'\nimport type { FieldComponent } from './useField'\nimport type { FormGroupComponent } from './useFormGroup'\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync 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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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: TSelected\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\n >\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\n >\n useSelector: <\n TSelected = NoInfer<\n FormState<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer\n >\n >,\n ) => TSelected,\n ) => Readonly<Ref<TSelected>>\n /**\n * @deprecated Use `form.useSelector` instead.\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic,\n TFormOnDynamicAsync,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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 TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TSubmitMeta\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.FormGroup = defineComponent(\n (props, context) => {\n return () =>\n h(\n FormGroup as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIFormGroup',\n inheritAttrs: false,\n },\n ) as never\n const subscribeToStore = (selector?: (state: never) => unknown) =>\n useSelector(api.store as never, selector as never) as never\n extendedApi.useSelector = subscribeToStore\n /** @deprecated Use `form.useSelector` instead. */\n extendedApi.useStore = subscribeToStore\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state: never) => state)\n const data = useSelector(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":";;;;;AAiPO,SAAS,QAcd,MAcA;AACA,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAad,IAAI;AAEN,UAAM,cAcA;AACN,gBAAY,QAAQ;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,gBAAY,YAAY;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAA;AAAA,UACpC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAEF,UAAM,mBAAmB,CAAC,aACxB,YAAY,IAAI,OAAgB,QAAiB;AACnD,gBAAY,cAAc;AAE1B,gBAAY,WAAW;AACvB,gBAAY,YAAY;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAA;AACxC,cAAM,WAAW,SAAS,aAAa,CAAC,UAAiB;AACzD,cAAM,OAAO,YAAY,IAAI,OAAgB,QAAiB;AAC9D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAGF,WAAO;AAAA,EACT,GAAA;AAEA,YAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;"}
@@ -1,5 +1,5 @@
1
1
  import { FormGroupApi } from "@tanstack/form-core";
2
- import { useStore } from "@tanstack/vue-store";
2
+ import { useSelector } from "@tanstack/vue-store";
3
3
  import { defineComponent, onMounted, onUnmounted, watch } from "vue";
4
4
  function useFormGroup(opts) {
5
5
  const formGroupApi = (() => {
@@ -8,7 +8,7 @@ function useFormGroup(opts) {
8
8
  });
9
9
  return api;
10
10
  })();
11
- const groupState = useStore(formGroupApi.store, (state) => state);
11
+ const groupState = useSelector(formGroupApi.store, (state) => state);
12
12
  let cleanup;
13
13
  onMounted(() => {
14
14
  cleanup = formGroupApi.mount();
@@ -1 +1 @@
1
- {"version":3,"file":"useFormGroup.js","sources":["../../src/useFormGroup.tsx"],"sourcesContent":["import { FormGroupApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n DeepKeys,\n DeepValue,\n FormAsyncValidateOrFn,\n FormGroupApiOptions,\n FormGroupAsyncValidateOrFn,\n FormGroupOptions,\n FormGroupValidateOrFn,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n SetupContext,\n SlotsType,\n} from 'vue'\n\nexport type FormGroupComponent<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\n>(\n props: FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: {\n group: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n state: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >['state']\n }\n }>\n>\n\nexport interface VueFormGroupApi<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n}\n\nexport function useFormGroup<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n>(\n opts: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const formGroupApi = (() => {\n const api = new FormGroupApi({\n ...opts,\n })\n\n return api\n })()\n\n const groupState = useStore(formGroupApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = formGroupApi.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 formGroupApi.update({ ...opts } as never)\n },\n )\n\n return { api: formGroupApi, state: groupState } as const\n}\n\nexport type FormGroupComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FormGroupComponentBoundProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport const FormGroup = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n >(\n formGroupOptions: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n context: SetupContext,\n ) => {\n const groupApi = useFormGroup({ ...formGroupOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n group: groupApi.api,\n state: groupApi.state.value,\n })\n },\n { name: 'FormGroup', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AA4NO,SAAS,aAwCd,MA0BA;AACA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,MAAM,IAAI,aAAa;AAAA,MAC3B,GAAG;AAAA,IAAA,CACJ;AAED,WAAO;AAAA,EACT,GAAA;AAEA,QAAM,aAAa,SAAS,aAAa,OAAO,CAAC,UAAU,KAAK;AAEhE,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,aAAa,MAAA;AAAA,EACzB,CAAC;AAED,cAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,mBAAa,OAAO,EAAE,GAAG,MAAe;AAAA,IAC1C;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,cAAc,OAAO,WAAA;AACrC;AAsIO,MAAM,YAAY;AAAA,EACvB,CA4CE,kBA0BA,YACG;AACH,UAAM,WAAW,aAAa,EAAE,GAAG,kBAAkB,GAAG,QAAQ,OAAO;AAEvE,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,aAAa,cAAc,MAAA;AACrC;"}
1
+ {"version":3,"file":"useFormGroup.js","sources":["../../src/useFormGroup.tsx"],"sourcesContent":["import { FormGroupApi } from '@tanstack/form-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n DeepKeys,\n DeepValue,\n FormAsyncValidateOrFn,\n FormGroupApiOptions,\n FormGroupAsyncValidateOrFn,\n FormGroupOptions,\n FormGroupValidateOrFn,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n SetupContext,\n SlotsType,\n} from 'vue'\n\nexport type FormGroupComponent<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\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 | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\n>(\n props: FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FormGroupComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: {\n group: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n state: FormGroupApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >['state']\n }\n }>\n>\n\nexport interface VueFormGroupApi<\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n FormGroup: FormGroupComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n}\n\nexport function useFormGroup<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n>(\n opts: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const formGroupApi = (() => {\n const api = new FormGroupApi({\n ...opts,\n })\n\n return api\n })()\n\n const groupState = useSelector(formGroupApi.store, (state) => state)\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = formGroupApi.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 formGroupApi.update({ ...opts } as never)\n },\n )\n\n return { api: formGroupApi, state: groupState } as const\n}\n\nexport type FormGroupComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FormGroupComponentBoundProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = FormGroupOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport const FormGroup = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChange extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends\n | undefined\n | FormGroupValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,\n TSubmitMeta,\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 TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n >(\n formGroupOptions: FormGroupApiOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TSubmitMeta,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n context: SetupContext,\n ) => {\n const groupApi = useFormGroup({ ...formGroupOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n group: groupApi.api,\n state: groupApi.state.value,\n })\n },\n { name: 'FormGroup', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AA4NO,SAAS,aAwCd,MA0BA;AACA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,MAAM,IAAI,aAAa;AAAA,MAC3B,GAAG;AAAA,IAAA,CACJ;AAED,WAAO;AAAA,EACT,GAAA;AAEA,QAAM,aAAa,YAAY,aAAa,OAAO,CAAC,UAAU,KAAK;AAEnE,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,aAAa,MAAA;AAAA,EACzB,CAAC;AAED,cAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,mBAAa,OAAO,EAAE,GAAG,MAAe;AAAA,IAC1C;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,cAAc,OAAO,WAAA;AACrC;AAsIO,MAAM,YAAY;AAAA,EACvB,CA4CE,kBA0BA,YACG;AACH,UAAM,WAAW,aAAa,EAAE,GAAG,kBAAkB,GAAG,QAAQ,OAAO;AAEvE,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,aAAa,cAAc,MAAA;AACrC;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/vue-form",
3
- "version": "1.33.0",
3
+ "version": "1.33.2",
4
4
  "description": "Powerful, type-safe forms for Vue.",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -38,7 +38,7 @@
38
38
  ],
39
39
  "dependencies": {
40
40
  "@tanstack/vue-store": "^0.11.0",
41
- "@tanstack/form-core": "1.33.0"
41
+ "@tanstack/form-core": "1.33.2"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@vitejs/plugin-vue": "^5.2.4",
package/src/index.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export * from '@tanstack/form-core'
2
- export { useStore } from '@tanstack/vue-store'
2
+ export { useSelector, useStore } from '@tanstack/vue-store'
3
3
  export * from './useField'
4
4
  export * from './useForm'
5
5
  export * from './useFormGroup'
package/src/useField.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FieldApi } from '@tanstack/form-core'
2
- import { useStore } from '@tanstack/vue-store'
2
+ import { useSelector } from '@tanstack/vue-store'
3
3
  import { computed, defineComponent, onMounted, onUnmounted, watch } from 'vue'
4
4
  import type {
5
5
  AnyFieldApi,
@@ -257,7 +257,7 @@ export function useField<
257
257
 
258
258
  // For array mode, only track length changes to avoid re-renders when child properties change
259
259
  // See: https://github.com/TanStack/form/issues/1925
260
- const reactiveStateValue = useStore(
260
+ const reactiveStateValue = useSelector(
261
261
  fieldApi.store,
262
262
  (opts.mode === 'array'
263
263
  ? (state) => state.meta._arrayVersion || 0
@@ -265,27 +265,27 @@ export function useField<
265
265
  state: typeof fieldApi.state,
266
266
  ) => TData | number,
267
267
  )
268
- const reactiveMetaIsTouched = useStore(
268
+ const reactiveMetaIsTouched = useSelector(
269
269
  fieldApi.store,
270
270
  (state) => state.meta.isTouched,
271
271
  )
272
- const reactiveMetaIsBlurred = useStore(
272
+ const reactiveMetaIsBlurred = useSelector(
273
273
  fieldApi.store,
274
274
  (state) => state.meta.isBlurred,
275
275
  )
276
- const reactiveMetaIsDirty = useStore(
276
+ const reactiveMetaIsDirty = useSelector(
277
277
  fieldApi.store,
278
278
  (state) => state.meta.isDirty,
279
279
  )
280
- const reactiveMetaErrorMap = useStore(
280
+ const reactiveMetaErrorMap = useSelector(
281
281
  fieldApi.store,
282
282
  (state) => state.meta.errorMap,
283
283
  )
284
- const reactiveMetaErrorSourceMap = useStore(
284
+ const reactiveMetaErrorSourceMap = useSelector(
285
285
  fieldApi.store,
286
286
  (state) => state.meta.errorSourceMap,
287
287
  )
288
- const reactiveMetaIsValidating = useStore(
288
+ const reactiveMetaIsValidating = useSelector(
289
289
  fieldApi.store,
290
290
  (state) => state.meta.isValidating,
291
291
  )
package/src/useForm.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FormApi } from '@tanstack/form-core'
2
- import { useStore } from '@tanstack/vue-store'
2
+ import { useSelector } from '@tanstack/vue-store'
3
3
  import { defineComponent, h, onMounted } from 'vue'
4
4
  import { Field } from './useField'
5
5
  import { FormGroup } from './useFormGroup'
@@ -151,6 +151,44 @@ export interface VueFormApi<
151
151
  TFormOnServer,
152
152
  TSubmitMeta
153
153
  >
154
+ useSelector: <
155
+ TSelected = NoInfer<
156
+ FormState<
157
+ TParentData,
158
+ TFormOnMount,
159
+ TFormOnChange,
160
+ TFormOnChangeAsync,
161
+ TFormOnBlur,
162
+ TFormOnBlurAsync,
163
+ TFormOnSubmit,
164
+ TFormOnSubmitAsync,
165
+ TFormOnDynamic,
166
+ TFormOnDynamicAsync,
167
+ TFormOnServer
168
+ >
169
+ >,
170
+ >(
171
+ selector?: (
172
+ state: NoInfer<
173
+ FormState<
174
+ TParentData,
175
+ TFormOnMount,
176
+ TFormOnChange,
177
+ TFormOnChangeAsync,
178
+ TFormOnBlur,
179
+ TFormOnBlurAsync,
180
+ TFormOnSubmit,
181
+ TFormOnSubmitAsync,
182
+ TFormOnDynamic,
183
+ TFormOnDynamicAsync,
184
+ TFormOnServer
185
+ >
186
+ >,
187
+ ) => TSelected,
188
+ ) => Readonly<Ref<TSelected>>
189
+ /**
190
+ * @deprecated Use `form.useSelector` instead.
191
+ */
154
192
  useStore: <
155
193
  TSelected = NoInfer<
156
194
  FormState<
@@ -289,14 +327,16 @@ export function useForm<
289
327
  inheritAttrs: false,
290
328
  },
291
329
  ) as never
292
- extendedApi.useStore = (selector) => {
293
- return useStore(api.store as never, selector as never) as never
294
- }
330
+ const subscribeToStore = (selector?: (state: never) => unknown) =>
331
+ useSelector(api.store as never, selector as never) as never
332
+ extendedApi.useSelector = subscribeToStore
333
+ /** @deprecated Use `form.useSelector` instead. */
334
+ extendedApi.useStore = subscribeToStore
295
335
  extendedApi.Subscribe = defineComponent(
296
336
  (props, context) => {
297
337
  const allProps = { ...props, ...context.attrs }
298
338
  const selector = allProps.selector ?? ((state: never) => state)
299
- const data = useStore(api.store as never, selector as never)
339
+ const data = useSelector(api.store as never, selector as never)
300
340
  return () => context.slots.default!(data.value)
301
341
  },
302
342
  {
@@ -1,5 +1,5 @@
1
1
  import { FormGroupApi } from '@tanstack/form-core'
2
- import { useStore } from '@tanstack/vue-store'
2
+ import { useSelector } from '@tanstack/vue-store'
3
3
  import { defineComponent, onMounted, onUnmounted, watch } from 'vue'
4
4
  import type {
5
5
  DeepKeys,
@@ -293,7 +293,7 @@ export function useFormGroup<
293
293
  return api
294
294
  })()
295
295
 
296
- const groupState = useStore(formGroupApi.store, (state) => state)
296
+ const groupState = useSelector(formGroupApi.store, (state) => state)
297
297
 
298
298
  let cleanup!: () => void
299
299
  onMounted(() => {