@tanstack/vue-form 2.0.0-alpha.0 → 2.0.0-alpha.2

package/dist/AppForm/createFormHook.public.d.ts

@@ -1,6 +1,9 @@
-import { AnyVueFormComponentMap } from "./componentMap.public.js";
-import { AppFormHookResult } from "./createFormHookTypes.public.js";
+import { AppFormHookResult, CreateFormHookOptions } from "./createFormHookTypes.public.js";
+import { Component } from "vue";
 //#region src/AppForm/createFormHook.public.d.ts
-declare function createFormHook<const TComponents extends AnyVueFormComponentMap>(createOptions: TComponents): AppFormHookResult<TComponents>;
+declare function createFormHook<const TFormComponents extends Record<string, Component>, const TFieldComponents extends Record<string, Component>>(createOptions: CreateFormHookOptions<TFormComponents, TFieldComponents>): AppFormHookResult<{
+  formComponents: TFormComponents;
+  fieldComponents: TFieldComponents;
+}>;
 //#endregion
 export { createFormHook };

package/dist/AppForm/createFormHook.public.js

@@ -2,11 +2,9 @@ import { useInternalForm } from "../VueForm/VueFormApi.lib.js";
 import { defineFieldGroup } from "../FieldGroup/withFields.public.js";
 import { useFormContext } from "./contexts.lib.js";
 import { createAppFormInitializer } from "./initializeAppForm.lib.js";
+import { formOptions } from "@tanstack/form-core";
 
 //#region src/AppForm/createFormHook.public.ts
-const appFormOptions = ((opts) => opts);
-appFormOptions.strictSchema = (opts) => opts;
-appFormOptions.looseSchema = (opts) => opts;
 function createFormHook(createOptions) {
 	const initializeAppForm = createAppFormInitializer(createOptions);
 	function useExtendedForm(options) {
@@ -14,7 +12,7 @@ function createFormHook(createOptions) {
 	}
 	return {
 		useFormContext,
-		appFormOptions,
+		appFormOptions: formOptions,
 		defineAppFieldGroup: defineFieldGroup,
 		useAppForm: useExtendedForm
 	};

package/dist/AppForm/createFormHookTypes.public.d.ts

@@ -1,15 +1,91 @@
-import { AnyVueFormComponentMap } from "./componentMap.public.js";
-import { AppFormOptionsApi } from "./appFormOptions.public.js";
+import { AnyVueFormComponentMap, VueFormComponentMap } from "./componentMap.public.js";
 import { DefineFieldGroupFn } from "../FieldGroup/withFields.public.js";
 import { VueAppFormApi } from "./VueAppFormApi.public.js";
-import { FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
+import { DefaultFieldOptions, DefaultFormGroupOptions, DefaultFormOptions, FormOptions, FormOptionsApi, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
+import { Component } from "vue";
 //#region src/AppForm/createFormHookTypes.public.d.ts
-type UseAppFormHook<TComponents extends AnyVueFormComponentMap> = <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => VueAppFormApi<TFormData, ToFormErrorTypes<TFormValidators, TSubmitReturn>, TComponents>;
+/**
+ * Configures the components and reusable defaults returned by
+ * `createFormHook`.
+ *
+ * Form core resolves each default object before the corresponding usage-site
+ * options. Non-listener properties passed at the usage site take precedence,
+ * including when explicitly set to `undefined`. Listener arrays follow the
+ * configured `listenersMerge` strategy.
+ *
+ * @example
+ * ```ts
+ * const { useAppForm } = createFormHook({
+ *   formComponents: {},
+ *   fieldComponents: {
+ *     TextField,
+ *   },
+ *   defaultFormOptions: {
+ *     errorVisibility: ({ fieldState }) => fieldState.meta.isBlurred,
+ *   },
+ *   defaultFieldOptions: {
+ *     errorBoundary: true,
+ *   },
+ * })
+ * ```
+ *
+ * @typeParam TFormComponents - Library-managed. Do not specify explicitly.
+ * @typeParam TFieldComponents - Library-managed. Do not specify explicitly.
+ */
+interface CreateFormHookOptions<TFormComponents extends Record<string, Component>, TFieldComponents extends Record<string, Component>> extends VueFormComponentMap<TFormComponents, TFieldComponents> {
+  /**
+   * Defaults for every form created by `useAppForm`.
+   *
+   * Non-listener options passed to `useAppForm` override these defaults,
+   * including when explicitly set to `undefined`. Listener arrays follow
+   * `listenersMerge`.
+   *
+   * @example
+   * ```ts
+   * defaultFormOptions: {
+   *   errorVisibility: ({ state }) => state.submissionAttempts > 0,
+   * },
+   * ```
+   */
+  defaultFormOptions?: DefaultFormOptions;
+  /**
+   * Defaults for every field and array-field component owned by the form.
+   *
+   * Non-listener options passed to the component override these defaults,
+   * including when explicitly set to `undefined`. Listener arrays follow
+   * `listenersMerge`. This includes `group.Field` and `group.ArrayField`.
+   *
+   * @example
+   * ```ts
+   * defaultFieldOptions: {
+   *   errorVisibility: ({ fieldState }) => fieldState.meta.isBlurred,
+   * },
+   * ```
+   */
+  defaultFieldOptions?: DefaultFieldOptions;
+  /**
+   * Defaults for every `form.FormGroup` component.
+   *
+   * Options passed to the component override these defaults, including when
+   * an option is explicitly `undefined`.
+   *
+   * @example
+   * ```ts
+   * defaultFormGroupOptions: {
+   *   onSubmitInvalid: ({ groupApi }) => {
+   *     console.error('Invalid group', groupApi.name)
+   *   },
+   * },
+   * ```
+   */
+  defaultFormGroupOptions?: DefaultFormGroupOptions;
+}
+type UseAppFormHook<TComponents extends AnyVueFormComponentMap> = <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn, unknown>) => VueAppFormApi<TFormData, ToFormErrorTypes<TFormValidators, TSubmitReturn>, TComponents>;
 interface AppFormHookResult<TComponents extends AnyVueFormComponentMap> {
-  appFormOptions: AppFormOptionsApi<TComponents>;
+  appFormOptions: FormOptionsApi<TComponents>;
   defineAppFieldGroup: DefineFieldGroupFn<TComponents['fieldComponents']>;
   useAppForm: UseAppFormHook<TComponents>;
   useFormContext: () => VueAppFormApi<any, any, TComponents>;
 }
 //#endregion
-export { AppFormHookResult, UseAppFormHook };
+export { AppFormHookResult, CreateFormHookOptions, UseAppFormHook };

package/dist/AppForm/initializeAppForm.lib.js

@@ -3,7 +3,12 @@ import { InternalFormApi } from "@tanstack/form-core/internals";
 
 //#region src/AppForm/initializeAppForm.lib.ts
 function createAppFormInitializer(createOptions) {
-	return (options) => attachVueAppFormComponents(new InternalFormApi(options), createOptions.formComponents, createOptions.fieldComponents);
+	const defaultOptions = createOptions.defaultFormOptions || createOptions.defaultFieldOptions || createOptions.defaultFormGroupOptions ? {
+		form: createOptions.defaultFormOptions,
+		field: createOptions.defaultFieldOptions,
+		formGroup: createOptions.defaultFormGroupOptions
+	} : void 0;
+	return (options) => attachVueAppFormComponents(new InternalFormApi(options, defaultOptions), createOptions.formComponents, createOptions.fieldComponents);
 }
 
 //#endregion

package/dist/FieldGroup/FieldGroupApi.public.d.ts

@@ -15,7 +15,7 @@ type FieldGroupArrayFieldComponent<in out TFieldData, in out TFieldComponents ex
   };
 }>;
 type FieldGroupSubscribeProps<TSelected> = VueFormSubscribeProps<unknown, FormErrorTypes, TSelected>;
-type FieldGroupSubscribeComponent = new <TSelected>(props: FieldGroupSubscribeProps<TSelected> & PublicProps) => VueComponentInstance<FieldGroupSubscribeProps<TSelected>, {
+type FieldGroupSubscribeComponent = new <const TSelected>(props: FieldGroupSubscribeProps<TSelected> & PublicProps) => VueComponentInstance<FieldGroupSubscribeProps<TSelected>, {
   default: NoInfer<TSelected>;
 }>;
 interface FieldGroupApi<in out TFieldData, in out TFieldComponents extends Record<string, Component> = Record<never, never>> extends FormApiFieldMethods<TFieldData>, FormApiArrayMethods<TFieldData> {

package/dist/VueForm/Components.public.d.ts

@@ -18,7 +18,7 @@ interface VueSubscribeProps<in out TSourceData, in out TSelected> {
   when?: (selected: NoInfer<TSelected>) => boolean;
 }
 type VueFormSubscribeProps<TFormData, TFormErrorTypes extends FormErrorTypes, TSelected> = VueSubscribeProps<FormState<TFormData, TFormErrorTypes>, TSelected>;
-type VueFormSubscribeComponent<in out TFormData, in out TFormErrorTypes extends FormErrorTypes> = new <TSelected>(props: VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected> & PublicProps) => VueComponentInstance<VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected>, {
+type VueFormSubscribeComponent<in out TFormData, in out TFormErrorTypes extends FormErrorTypes> = new <const TSelected>(props: VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected> & PublicProps) => VueComponentInstance<VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected>, {
   default: NoInfer<TSelected>;
 }>;
 interface VueFormFieldProps<in out TFieldData, in out TFieldName, in out TFieldValue, in out TFieldValidators extends FieldValidators<TFieldData, TFieldName, TFieldValue>, in out TGroupFieldError, in out TFormData, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> extends FieldApiOptions<TFieldData, TFieldName, TFieldValue, TFieldValidators, TGroupFieldError, TFormData, TFormErrorTypes> {
@@ -35,7 +35,7 @@ type VueFormArrayFieldComponent<in out TFormData, in out TFormErrorTypes extends
   };
 }>;
 type VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes extends FormErrorTypes, TSelected> = VueSubscribeProps<FormGroupState<TGroupValue, TGroupErrorTypes>, TSelected>;
-type VueFormGroupSubscribeComponent<in out TGroupValue, in out TGroupErrorTypes extends FormErrorTypes> = new <TSelected>(props: VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected> & PublicProps) => VueComponentInstance<VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected>, {
+type VueFormGroupSubscribeComponent<in out TGroupValue, in out TGroupErrorTypes extends FormErrorTypes> = new <const TSelected>(props: VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected> & PublicProps) => VueComponentInstance<VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected>, {
   default: NoInfer<TSelected>;
 }>;
 type VueFormGroupFieldComponent<in out TFormData, in out TGroupValue, in out TGroupErrorTypes extends FormErrorTypes, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> = new <TFieldName extends DeepKeys<TGroupValue>, const TFieldValidators extends FieldValidators<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>>>(props: VueFormFieldProps<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>, TFieldValidators, TGroupErrorTypes['fieldError'], TFormData, TFormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormFieldProps<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>, TFieldValidators, TGroupErrorTypes['fieldError'], TFormData, TFormErrorTypes, TFieldComponents>, {

package/dist/VueForm/formApiTypes.public.d.ts

@@ -5,6 +5,32 @@ import { Component } from "vue";
 //#region src/VueForm/formApiTypes.public.d.ts
 type ExtendedFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TFieldComponents extends Record<string, Component>> = FormApi<TFormData, TFormErrorTypes> & VueTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents>;
 type VueFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TComponents extends AnyVueFormComponentMap = DefaultVueFormComponentMap> = unknown extends TComponents['formComponents'] ? ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> : ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> & TComponents['formComponents'];
+/**
+ * A Vue form API whose form data and error types are erased.
+ *
+ * Use it for reusable Vue components that only need core form operations and
+ * the `Field`, `ArrayField`, `Subscribe`, or `FormGroup` components common to
+ * every Vue form. Field paths and values are not checked against a particular
+ * form shape; use `VueFormType` when a component depends on one known form.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * defineProps<{ form: AnyVueFormApi }>()
+ * </script>
+ *
+ * <template>
+ *   <form.Subscribe
+ *     :selector="(state) => state.isSubmitting"
+ *     v-slot="isSubmitting"
+ *   >
+ *     <button type="submit" :disabled="isSubmitting">
+ *       {{ isSubmitting ? 'Saving...' : 'Save' }}
+ *     </button>
+ *   </form.Subscribe>
+ * </template>
+ * ```
+ */
 type AnyVueFormApi = AnyFormApi & VueTanStackFormComponents<any, any, any>;
 //#endregion
 export { AnyVueFormApi, VueFormApi, type VueFormComponentMap };

package/dist/VueForm/formType.public.d.ts

@@ -1,9 +1,31 @@
 import { AnyVueFormComponentMap, DefaultVueFormComponentMap } from "../AppForm/componentMap.public.js";
 import { VueFormApi } from "./formApiTypes.public.js";
-import { AppFormOptions } from "../AppForm/appFormOptions.public.js";
 import { AnyFormOptions, FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
 //#region src/VueForm/formType.public.d.ts
 type VueFormTypeErrorTypes<TFormValidators extends FormValidators<any>, TSubmitReturn> = unknown extends TSubmitReturn ? any : ToFormErrorTypes<TFormValidators, TSubmitReturn>;
-type VueFormType<TOptions extends AnyFormOptions | AppFormOptions<any, any, any, AnyVueFormComponentMap>> = TOptions extends AppFormOptions<infer TFormData, infer TFormValidators, infer TSubmitReturn, infer TComponents> ? VueFormApi<TFormData, VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>, TComponents> : TOptions extends FormOptions<infer TFormData, infer TFormValidators, infer TSubmitReturn> ? VueFormApi<TFormData, VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>, DefaultVueFormComponentMap> : never;
+/**
+ * Derives the Vue form API type represented by a reusable options object.
+ *
+ * Use it to type props for components that belong to one known form shape. It
+ * preserves the inferred form data and any components registered through
+ * `appFormOptions`. Options such as `onSubmit` can be defined either in the
+ * shared options or when the form is created in the component.
+ *
+ * @example
+ * ```ts
+ * const profileOptions = formOptions({
+ *   defaultValues: { name: '' },
+ * })
+ *
+ * type ProfileForm = VueFormType<typeof profileOptions>
+ *
+ * const props = defineProps<{
+ *   form: ProfileForm
+ * }>()
+ * ```
+ *
+ * @typeParam TOptions - The reusable form or app-form options from which the API derives its form data, error, and registered-component types.
+ */
+type VueFormType<TOptions extends AnyFormOptions> = TOptions extends FormOptions<infer TFormData, infer TFormValidators, infer TSubmitReturn, infer TComponents> ? VueFormApi<TFormData, VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>, TComponents extends AnyVueFormComponentMap ? TComponents : DefaultVueFormComponentMap> : never;
 //#endregion
 export { VueFormType };

package/dist/VueForm/useField.lib.js

@@ -10,7 +10,7 @@ function useField(options, fieldComponents) {
 		const field = current.form._getOrCreateFieldApi({
 			...current,
 			name: current.name
-		});
+		}, "field");
 		if (fieldComponents !== null) Object.assign(field, fieldComponents);
 		return field;
 	};
@@ -23,7 +23,7 @@ function useField(options, fieldComponents) {
 		fieldApi.value = createField();
 	}, { flush: "sync" });
 	watchEffect(() => {
-		fieldApi.value._update(options());
+		fieldApi.value._update(options(), "field");
 	});
 	let mounted = false;
 	let unregister;

package/dist/VueForm/useForm.public.d.ts

@@ -2,7 +2,29 @@ import { AnyVueFormComponentMap, DefaultVueFormComponentMap } from "../AppForm/c
 import { VueFormApi } from "./formApiTypes.public.js";
 import { FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
 //#region src/VueForm/useForm.public.d.ts
-type UseFormHook<in out TComponents extends AnyVueFormComponentMap> = <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => VueFormApi<TFormData, ToFormErrorTypes<TFormValidators, TSubmitReturn>, TComponents>;
+type UseFormHook<in out TComponents extends AnyVueFormComponentMap> = <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn, unknown>) => VueFormApi<TFormData, ToFormErrorTypes<TFormValidators, TSubmitReturn>, TComponents>;
+/**
+ * Creates a Vue form whose instance and lifecycle are owned by the current
+ * component.
+ *
+ * `defaultValues` establish the initial state and inferred form value type. To
+ * update the existing form after creation, pass a reactive options object;
+ * tracked changes are applied without replacing the form instance.
+ *
+ * Call this during the component's setup phase. The form mounts with the
+ * component and is cleaned up when the component unmounts.
+ *
+ * @example
+ * ```ts
+ * const form = useForm({
+ *   defaultValues: { name: '' },
+ *   onSubmit: ({ value }) => saveProfile(value),
+ * })
+ * ```
+ *
+ * @returns The Vue form API with typed field, subscription, and form-group
+ * components attached.
+ */
 declare const useForm: UseFormHook<DefaultVueFormComponentMap>;
 //#endregion
 export { UseFormHook, useForm };

package/dist/VueForm/useForm.public.js

@@ -4,6 +4,28 @@ import { initializeForm, useInternalForm } from "./VueFormApi.lib.js";
 function useFormHook(options) {
 	return useInternalForm(options, initializeForm);
 }
+/**
+* Creates a Vue form whose instance and lifecycle are owned by the current
+* component.
+*
+* `defaultValues` establish the initial state and inferred form value type. To
+* update the existing form after creation, pass a reactive options object;
+* tracked changes are applied without replacing the form instance.
+*
+* Call this during the component's setup phase. The form mounts with the
+* component and is cleaned up when the component unmounts.
+*
+* @example
+* ```ts
+* const form = useForm({
+*   defaultValues: { name: '' },
+*   onSubmit: ({ value }) => saveProfile(value),
+* })
+* ```
+*
+* @returns The Vue form API with typed field, subscription, and form-group
+* components attached.
+*/
 const useForm = useFormHook;
 
 //#endregion

package/dist/index.d.ts

@@ -2,15 +2,14 @@ import { AnyVueFormComponentMap, DefaultVueFormComponentMap, VueFormComponentMap
 import { VueFieldApi, VueFormArrayFieldComponent, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueTanStackFormComponents } from "./VueForm/Components.public.js";
 import { AnyVueFormApi, VueFormApi } from "./VueForm/formApiTypes.public.js";
 import { UseFormHook, useForm } from "./VueForm/useForm.public.js";
-import { AppFormOptions, AppFormOptionsApi } from "./AppForm/appFormOptions.public.js";
 import { VueFormType } from "./VueForm/formType.public.js";
 import { Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource } from "./Subscribe.public.js";
 import { AnyFieldGroupApi, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupFieldComponent, FieldGroupFormState, FieldGroupSubscribeComponent, FieldGroupSubscribeProps } from "./FieldGroup/FieldGroupApi.public.js";
 import { AnyFieldGroupFieldSlot, DefineFieldGroupFn, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupHelper, FieldGroupWithFieldsFn, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, VueFieldGroup, defineFieldGroup } from "./FieldGroup/withFields.public.js";
 import { AppFormComponent, VueAppFormApi } from "./AppForm/VueAppFormApi.public.js";
-import { AppFormHookResult, UseAppFormHook } from "./AppForm/createFormHookTypes.public.js";
+import { AppFormHookResult, CreateFormHookOptions, UseAppFormHook } from "./AppForm/createFormHookTypes.public.js";
 import { createFormHook } from "./AppForm/createFormHook.public.js";
 import { FormHookHelpers, getFormHookHelpers } from "./AppForm/getFormHookHelpers.public.js";
 export * from "@tanstack/form-core";
 export * from "@tanstack/vue-store";
-export { AnyFieldGroupApi, AnyFieldGroupFieldSlot, AnyVueFormApi, AnyVueFormComponentMap, AppFormComponent, AppFormHookResult, AppFormOptions, AppFormOptionsApi, DefaultVueFormComponentMap, DefineFieldGroupFn, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponent, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupFormState, FieldGroupHelper, FieldGroupSubscribeComponent, FieldGroupSubscribeProps, FieldGroupWithFieldsFn, FormHookHelpers, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource, UseAppFormHook, UseFormHook, VueAppFormApi, VueFieldApi, VueFieldGroup, VueFormApi, VueFormArrayFieldComponent, VueFormComponentMap, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueFormType, VueTanStackFormComponents, createFormHook, defineFieldGroup, getFormHookHelpers, useForm };
+export { AnyFieldGroupApi, AnyFieldGroupFieldSlot, AnyVueFormApi, AnyVueFormComponentMap, AppFormComponent, AppFormHookResult, CreateFormHookOptions, DefaultVueFormComponentMap, DefineFieldGroupFn, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponent, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupFormState, FieldGroupHelper, FieldGroupSubscribeComponent, FieldGroupSubscribeProps, FieldGroupWithFieldsFn, FormHookHelpers, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource, UseAppFormHook, UseFormHook, VueAppFormApi, VueFieldApi, VueFieldGroup, VueFormApi, VueFormArrayFieldComponent, VueFormComponentMap, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueFormType, VueTanStackFormComponents, createFormHook, defineFieldGroup, getFormHookHelpers, useForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.2",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -22,12 +22,11 @@
   },
   "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "@tanstack/vue-store": "^0.11.1",
-    "@tanstack/form-core": "2.0.0-alpha.0"
+    "@tanstack/form-core": "2.0.0-alpha.2"
   },
   "devDependencies": {
     "@testing-library/vue": "^8.1.0",

package/dist/AppForm/appFormOptions.public.d.ts

@@ -1,14 +0,0 @@
-import { AnyVueFormComponentMap } from "./componentMap.public.js";
-import { FormOptions, FormValidatorData, FormValidators, InferUnion, NullableSchemaData } from "@tanstack/form-core";
-//#region src/AppForm/appFormOptions.public.d.ts
-declare const componentsSymbol: unique symbol;
-interface AppFormOptions<TFormData, TFormValidators extends FormValidators<TFormData>, TSubmitReturn, TComponents extends AnyVueFormComponentMap> extends FormOptions<TFormData, TFormValidators, TSubmitReturn> {
-  [componentsSymbol]: TComponents;
-}
-interface AppFormOptionsApi<TComponents extends AnyVueFormComponentMap> {
-  <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>): AppFormOptions<TFormData, TFormValidators, TSubmitReturn, TComponents>;
-  strictSchema: <const TFormValidators extends FormValidators<any>, TFormData extends FormValidatorData<TFormValidators>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => AppFormOptions<FormValidatorData<TFormValidators>, TFormValidators, TSubmitReturn, TComponents>;
-  looseSchema: <const TFormValidators extends FormValidators<any>, const TFormData extends NullableSchemaData<TFormValidators>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => AppFormOptions<InferUnion<TFormData, FormValidatorData<TFormValidators>>, TFormValidators, TSubmitReturn, TComponents>;
-}
-//#endregion
-export { AppFormOptions, AppFormOptionsApi };

package/src/AppForm/Components.lib.ts

@@ -1,31 +0,0 @@
-import { defineComponent, provide } from 'vue'
-import { attachVueFormComponents } from '../VueForm/Components.lib'
-import { FieldContext, FormContext } from './contexts.lib'
-import type { Component } from 'vue'
-import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-import type { VueAppFormApi } from './VueAppFormApi.public'
-
-type AnyVueAppFormApi = VueAppFormApi<any, any, AnyVueFormComponentMap>
-
-export function attachVueAppFormComponents(
-  form: AnyInternalFormApi,
-  formComponents: Record<string, Component>,
-  fieldComponents: Record<string, Component>,
-): AnyVueAppFormApi {
-  const resultForm = attachVueFormComponents(
-    form,
-    fieldComponents,
-    FieldContext,
-  ) as never as AnyVueAppFormApi
-
-  resultForm.AppForm = defineComponent(
-    (_props, { slots }) => {
-      provide(FormContext, resultForm as never)
-      return () => slots.default?.()
-    },
-    { name: 'TanStackForm.AppForm' },
-  ) as never
-
-  return Object.assign(resultForm, formComponents)
-}

package/src/AppForm/VueAppFormApi.public.ts

@@ -1,17 +0,0 @@
-import type { FormErrorTypes } from '@tanstack/form-core'
-import type { PublicProps } from 'vue'
-import type { VueComponentInstance } from '../vueTypes.lib'
-import type { VueFormApi } from '../VueForm/formApiTypes.public'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-
-export type AppFormComponent = new (
-  props: PublicProps,
-) => VueComponentInstance<{}, { default: {} }>
-
-export type VueAppFormApi<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TComponents extends AnyVueFormComponentMap,
-> = VueFormApi<TFormData, TFormErrorTypes, TComponents> & {
-  AppForm: AppFormComponent
-}

package/src/AppForm/appFormOptions.public.ts

@@ -1,55 +0,0 @@
-import type {
-  FormOptions,
-  FormValidatorData,
-  FormValidators,
-  InferUnion,
-  NullableSchemaData,
-} from '@tanstack/form-core'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-
-declare const componentsSymbol: unique symbol
-
-export interface AppFormOptions<
-  TFormData,
-  TFormValidators extends FormValidators<TFormData>,
-  TSubmitReturn,
-  TComponents extends AnyVueFormComponentMap,
-> extends FormOptions<TFormData, TFormValidators, TSubmitReturn> {
-  [componentsSymbol]: TComponents
-}
-
-export interface AppFormOptionsApi<TComponents extends AnyVueFormComponentMap> {
-  <
-    TFormData,
-    const TFormValidators extends FormValidators<TFormData>,
-    TSubmitReturn,
-  >(
-    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-  ): AppFormOptions<TFormData, TFormValidators, TSubmitReturn, TComponents>
-
-  strictSchema: <
-    const TFormValidators extends FormValidators<any>,
-    TFormData extends FormValidatorData<TFormValidators>,
-    TSubmitReturn,
-  >(
-    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-  ) => AppFormOptions<
-    FormValidatorData<TFormValidators>,
-    TFormValidators,
-    TSubmitReturn,
-    TComponents
-  >
-
-  looseSchema: <
-    const TFormValidators extends FormValidators<any>,
-    const TFormData extends NullableSchemaData<TFormValidators>,
-    TSubmitReturn,
-  >(
-    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-  ) => AppFormOptions<
-    InferUnion<TFormData, FormValidatorData<TFormValidators>>,
-    TFormValidators,
-    TSubmitReturn,
-    TComponents
-  >
-}

package/src/AppForm/componentMap.public.ts

@@ -1,19 +0,0 @@
-import type { Component } from 'vue'
-
-export interface VueFormComponentMap<
-  TFormComponents extends Record<string, Component>,
-  TFieldComponents extends Record<string, Component>,
-> {
-  formComponents: TFormComponents
-  fieldComponents: TFieldComponents
-}
-
-export type AnyVueFormComponentMap = VueFormComponentMap<
-  Record<string, Component>,
-  Record<string, Component>
->
-
-export type DefaultVueFormComponentMap = VueFormComponentMap<
-  Record<never, never>,
-  Record<never, never>
->

package/src/AppForm/contexts.lib.ts

@@ -1,31 +0,0 @@
-import { inject } from 'vue'
-import type { InjectionKey } from 'vue'
-import type { AnyInternalFieldApi } from '@tanstack/form-core/internals'
-import type { InternalVueFormApi } from '../VueForm/VueFormApi.lib'
-
-export const FormContext = Symbol(
-  'TanStackForm.FormContext',
-) as InjectionKey<InternalVueFormApi>
-export const FieldContext = Symbol(
-  'TanStackForm.FieldContext',
-) as InjectionKey<AnyInternalFieldApi>
-
-export function useFieldContext(): AnyInternalFieldApi {
-  const field = inject(FieldContext)
-  if (field === undefined) {
-    throw new Error(
-      'TanStack Form: Field components must be used within a `form.Field` component.',
-    )
-  }
-  return field
-}
-
-export function useFormContext(): InternalVueFormApi {
-  const form = inject(FormContext)
-  if (form === undefined) {
-    throw new Error(
-      'TanStack Form: Form components must be used within a `form.AppForm` component.',
-    )
-  }
-  return form
-}

package/src/AppForm/createFormHook.public.ts

@@ -1,32 +0,0 @@
-import { useInternalForm } from '../VueForm/VueFormApi.lib'
-import { defineFieldGroup } from '../FieldGroup/withFields.public'
-import { createAppFormInitializer } from './initializeAppForm.lib'
-import { useFormContext } from './contexts.lib'
-import type { AppFormOptionsApi } from './appFormOptions.public'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-import type {
-  AppFormHookResult,
-  UseAppFormHook,
-} from './createFormHookTypes.public'
-import type { FormOptions } from '@tanstack/form-core'
-
-const appFormOptions = ((opts: unknown) => opts) as AppFormOptionsApi<any>
-appFormOptions.strictSchema = (opts) => opts as never
-appFormOptions.looseSchema = (opts) => opts as never
-
-export function createFormHook<
-  const TComponents extends AnyVueFormComponentMap,
->(createOptions: TComponents): AppFormHookResult<TComponents> {
-  const initializeAppForm = createAppFormInitializer(createOptions)
-
-  function useExtendedForm(options: FormOptions<any, any, any>) {
-    return useInternalForm(options, initializeAppForm)
-  }
-
-  return {
-    useFormContext: useFormContext as never,
-    appFormOptions,
-    defineAppFieldGroup: defineFieldGroup,
-    useAppForm: useExtendedForm as never as UseAppFormHook<TComponents>,
-  }
-}

package/src/AppForm/createFormHookTypes.public.ts

@@ -1,28 +0,0 @@
-import type { AppFormOptionsApi } from './appFormOptions.public'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-import type { VueAppFormApi } from './VueAppFormApi.public'
-import type { DefineFieldGroupFn } from '../FieldGroup/withFields.public'
-import type {
-  FormOptions,
-  FormValidators,
-  ToFormErrorTypes,
-} from '@tanstack/form-core'
-
-export type UseAppFormHook<TComponents extends AnyVueFormComponentMap> = <
-  TFormData,
-  const TFormValidators extends FormValidators<TFormData>,
-  TSubmitReturn,
->(
-  options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-) => VueAppFormApi<
-  TFormData,
-  ToFormErrorTypes<TFormValidators, TSubmitReturn>,
-  TComponents
->
-
-export interface AppFormHookResult<TComponents extends AnyVueFormComponentMap> {
-  appFormOptions: AppFormOptionsApi<TComponents>
-  defineAppFieldGroup: DefineFieldGroupFn<TComponents['fieldComponents']>
-  useAppForm: UseAppFormHook<TComponents>
-  useFormContext: () => VueAppFormApi<any, any, TComponents>
-}

package/src/AppForm/fieldComponentHelpers.lib.ts

@@ -1,21 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { useFieldContext } from './contexts.lib'
-import type { Component } from 'vue'
-
-export function wrapField(
-  component: Component,
-  fieldPropKey: string,
-): Component {
-  return defineComponent(
-    (_props, context) => {
-      const field = useFieldContext()
-      return () =>
-        h(component, { ...context.attrs, [fieldPropKey]: field }, context.slots)
-    },
-    { name: 'TanStackForm.FieldComponent', inheritAttrs: false },
-  )
-}
-
-export function brandComponentFactory(): (component: Component) => Component {
-  return (component) => component
-}