@tanstack/vue-form 1.32.0 → 1.33.0

package/dist/esm/useForm.js

@@ -2,6 +2,7 @@ import { FormApi } from "@tanstack/form-core";
 import { useStore } from "@tanstack/vue-store";
 import { defineComponent, h, onMounted } from "vue";
 import { Field } from "./useField.js";
+import { FormGroup } from "./useFormGroup.js";
 function useForm(opts) {
   const formApi = (() => {
     const api = new FormApi(opts);
@@ -19,6 +20,19 @@ function useForm(opts) {
         inheritAttrs: false
       }
     );
+    extendedApi.FormGroup = defineComponent(
+      (props, context) => {
+        return () => h(
+          FormGroup,
+          { ...props, ...context.attrs, form: api },
+          context.slots
+        );
+      },
+      {
+        name: "APIFormGroup",
+        inheritAttrs: false
+      }
+    );
     extendedApi.useStore = (selector) => {
       return useStore(api.store, selector);
     };

package/dist/esm/useForm.js.map

@@ -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 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'\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  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.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":";;;;AA2LO,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,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;"}
+{"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;"}

package/dist/esm/useFormGroup.d.ts

@@ -0,0 +1,37 @@
+import { FormGroupApi, DeepKeys, DeepValue, FormAsyncValidateOrFn, FormGroupApiOptions, FormGroupAsyncValidateOrFn, FormGroupOptions, FormGroupValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
+import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, EmitsToProps, PublicProps, SlotsType } from 'vue';
+export type FormGroupComponent<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>, TParentSubmitMeta> = new <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta>(props: FormGroupComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & EmitsToProps<EmitsOptions> & PublicProps) => CreateComponentPublicInstanceWithMixins<FormGroupComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<{
+    default: {
+        group: FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+        state: FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['state'];
+    };
+}>>;
+export interface VueFormGroupApi<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>, TParentSubmitMeta> {
+    FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+}
+export declare function useFormGroup<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, 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>, TParentSubmitMeta>(opts: FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>): {
+    readonly api: FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+    readonly state: Readonly<import('vue').Ref<import('@tanstack/form-core').FormGroupStoreState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>, import('@tanstack/form-core').FormGroupStoreState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>>>;
+};
+export type FormGroupComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, 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>, TParentSubmitMeta> = FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+export type FormGroupComponentBoundProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, 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>, TParentSubmitMeta> = FormGroupOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+export declare const FormGroup: new <TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, 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>, TParentSubmitMeta>(props: (FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+})) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => CreateComponentPublicInstanceWithMixins<FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, (FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}) | (FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, {}>;

package/dist/esm/useFormGroup.js

@@ -0,0 +1,41 @@
+import { FormGroupApi } from "@tanstack/form-core";
+import { useStore } from "@tanstack/vue-store";
+import { defineComponent, onMounted, onUnmounted, watch } from "vue";
+function useFormGroup(opts) {
+  const formGroupApi = (() => {
+    const api = new FormGroupApi({
+      ...opts
+    });
+    return api;
+  })();
+  const groupState = useStore(formGroupApi.store, (state) => state);
+  let cleanup;
+  onMounted(() => {
+    cleanup = formGroupApi.mount();
+  });
+  onUnmounted(() => {
+    cleanup();
+  });
+  watch(
+    () => opts,
+    () => {
+      formGroupApi.update({ ...opts });
+    }
+  );
+  return { api: formGroupApi, state: groupState };
+}
+const FormGroup = defineComponent(
+  (formGroupOptions, context) => {
+    const groupApi = useFormGroup({ ...formGroupOptions, ...context.attrs });
+    return () => context.slots.default({
+      group: groupApi.api,
+      state: groupApi.state.value
+    });
+  },
+  { name: "FormGroup", inheritAttrs: false }
+);
+export {
+  FormGroup,
+  useFormGroup
+};
+//# sourceMappingURL=useFormGroup.js.map

package/dist/esm/useFormGroup.js.map

@@ -0,0 +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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/vue-store": "^0.9.1",
-    "@tanstack/form-core": "1.32.0"
+    "@tanstack/vue-store": "^0.11.0",
+    "@tanstack/form-core": "1.33.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
@@ -56,7 +56,8 @@
     "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
-    "test:types:ts58": "tsc",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
+    "test:types:ts59": "tsc",
     "fixme:test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",

package/src/index.ts

@@ -2,3 +2,4 @@ export * from '@tanstack/form-core'
 export { useStore } from '@tanstack/vue-store'
 export * from './useField'
 export * from './useForm'
+export * from './useFormGroup'

package/src/useField.tsx

@@ -375,7 +375,12 @@ export function useField<
     },
   )
 
-  return { api: extendedFieldApi.value, state: fieldState.value } as const
+  return {
+    api: extendedFieldApi.value,
+    get state() {
+      return fieldState.value
+    },
+  } as const
 }
 
 export type FieldComponentProps<

package/src/useForm.tsx

@@ -2,6 +2,7 @@ import { FormApi } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
 import { defineComponent, h, onMounted } from 'vue'
 import { Field } from './useField'
+import { FormGroup } from './useFormGroup'
 import type {
   FormAsyncValidateOrFn,
   FormOptions,
@@ -18,6 +19,7 @@ import type {
   SlotsType,
 } from 'vue'
 import type { FieldComponent } from './useField'
+import type { FormGroupComponent } from './useFormGroup'
 
 type SubscribeComponent<
   TParentData,
@@ -135,6 +137,20 @@ export interface VueFormApi<
     TFormOnServer,
     TSubmitMeta
   >
+  FormGroup: FormGroupComponent<
+    TParentData,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnDynamic,
+    TFormOnDynamicAsync,
+    TFormOnServer,
+    TSubmitMeta
+  >
   useStore: <
     TSelected = NoInfer<
       FormState<
@@ -259,6 +275,20 @@ export function useForm<
         inheritAttrs: false,
       },
     ) as never
+    extendedApi.FormGroup = defineComponent(
+      (props, context) => {
+        return () =>
+          h(
+            FormGroup as never,
+            { ...props, ...context.attrs, form: api },
+            context.slots,
+          )
+      },
+      {
+        name: 'APIFormGroup',
+        inheritAttrs: false,
+      },
+    ) as never
     extendedApi.useStore = (selector) => {
       return useStore(api.store as never, selector as never) as never
     }