@tanstack/vue-form 2.0.0-alpha.1 → 2.0.0-alpha.3

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/FieldGroup/withFields.public.d.ts

@@ -1,48 +1,26 @@
 import { VueComponentInstance } from "../vueTypes.lib.js";
 import { VueTanStackFormComponents } from "../VueForm/Components.public.js";
 import { FieldGroupApi } from "./FieldGroupApi.public.js";
-import { DeepKeys, DeepKeysWhereValueIncludes, DeepValue, FormApi } from "@tanstack/form-core";
+import { FieldGroupFieldBindings, FieldGroupFieldBindingsProps, FieldGroupFieldData, FieldGroupFields, FieldGroupFieldsPropName, FieldGroupHelper, FormApi } from "@tanstack/form-core";
 import { Component, PublicProps } from "vue";
 //#region src/FieldGroup/withFields.public.d.ts
-declare const fieldGroupFieldSlotValueSymbol: unique symbol;
 declare const fieldGroupFieldsSymbol: unique symbol;
-type FieldGroupFieldSlotMode = 'strict' | 'loose';
-interface FieldGroupFieldSlot<out TValue, out TMode extends FieldGroupFieldSlotMode = FieldGroupFieldSlotMode> {
-  readonly mode: TMode;
-  readonly [fieldGroupFieldSlotValueSymbol]: TValue;
-}
-type AnyFieldGroupFieldSlot = FieldGroupFieldSlot<any>;
-type StrictFieldGroupFieldSlot<TValue> = FieldGroupFieldSlot<TValue, 'strict'>;
-type LooseFieldGroupFieldSlot<TValue> = FieldGroupFieldSlot<TValue, 'loose'>;
-type FieldGroupFieldSlotValue<TSlot> = TSlot extends FieldGroupFieldSlot<infer TValue> ? TValue : never;
-type FieldGroupFieldSlotModeOf<TSlot> = TSlot extends FieldGroupFieldSlot<any, infer TMode> ? TMode : never;
-type IsSame<TTypeA, TTypeB> = [TTypeA] extends [TTypeB] ? [TTypeB] extends [TTypeA] ? true : false : false;
-type FieldGroupFieldSlotAllows<TSlot, TValue> = TSlot extends FieldGroupFieldSlot<infer TAcceptedValue, infer TMode> ? TMode extends 'strict' ? IsSame<TValue, TAcceptedValue> : [TValue] extends [TAcceptedValue] ? true : false : false;
-type FieldGroupFieldNameForSlot<TFieldData, TSlot extends AnyFieldGroupFieldSlot> = { [TFieldName in DeepKeys<TFieldData>]: FieldGroupFieldSlotAllows<TSlot, DeepValue<TFieldData, TFieldName>> extends true ? TFieldName : never; }[DeepKeys<TFieldData>];
-type FieldGroupFields = Record<string, AnyFieldGroupFieldSlot>;
-type FieldGroupFieldNames<TFieldData, TFields extends FieldGroupFields> = { [TFieldName in keyof TFields]: FieldGroupFieldNameForSlot<TFieldData, TFields[TFieldName]>; };
-type FieldGroupFieldData<TFields extends FieldGroupFields> = { [TFieldName in keyof TFields]: TFields[TFieldName] extends FieldGroupFieldSlot<infer TValue, any> ? TValue : never; };
 type FieldGroupFieldsOf<TFieldGroup> = TFieldGroup extends {
-  readonly [fieldGroupFieldsSymbol]: infer TFields;
+  readonly [fieldGroupFieldsSymbol]: infer TFields extends FieldGroupFields;
 } ? TFields : never;
 type VueFieldGroup<TFields extends FieldGroupFields, TFieldComponents extends Record<string, Component> = Record<never, never>> = FieldGroupApi<FieldGroupFieldData<TFields>, TFieldComponents> & {
   readonly [fieldGroupFieldsSymbol]: TFields;
 };
 type FieldGroupFieldComponentsOf<TFieldGroup> = TFieldGroup extends VueFieldGroup<any, infer TFieldComponents> ? TFieldComponents : never;
 type FieldGroupForm<TFieldComponents extends Record<string, Component> = Record<never, never>, TFormData = any> = FormApi<TFormData, any> & VueTanStackFormComponents<TFormData, any, TFieldComponents>;
-type FieldGroupFieldBindingForSlot<TFormData, TSlot extends AnyFieldGroupFieldSlot> = TSlot extends FieldGroupFieldSlot<infer TValue, infer TMode> ? TMode extends 'strict' ? FieldGroupFieldNameForSlot<TFormData, TSlot> : DeepKeysWhereValueIncludes<TFormData, TValue> : never;
-type FieldGroupFieldBindings<TFields extends FieldGroupFields, TFormData = any> = { [TFieldName in keyof TFields]: FieldGroupFieldBindingForSlot<TFormData, TFields[TFieldName]>; };
 type FieldGroupFieldBindingsOf<TFieldGroup, TFormData> = FieldGroupFieldsOf<TFieldGroup> extends FieldGroupFields ? FieldGroupFieldBindings<FieldGroupFieldsOf<TFieldGroup>, TFormData> : never;
-type FieldGroupFieldsPropName<TProps, TFieldGroup extends VueFieldGroup<any, any>> = { [TPropName in keyof TProps]-?: IsSame<TProps[TPropName], TFieldGroup> extends true ? TPropName : never; }[keyof TProps];
+type FieldsPropsDefinition<TFieldGroup extends VueFieldGroup<any, any>, TFormData, TFieldsPropName extends PropertyKey> = { [TPropName in TFieldsPropName]: FieldGroupFieldBindingsOf<TFieldGroup, TFormData>; };
+type FieldGroupFieldBindingsInstanceProp<TFieldGroup extends VueFieldGroup<any, any>, TFormData, TFieldsPropName extends PropertyKey> = FieldsPropsDefinition<TFieldGroup, TFormData, TFieldsPropName> | FieldGroupFieldBindingsProps<FieldGroupFieldsOf<TFieldGroup>, TFormData, TFieldsPropName>;
 type FieldGroupWithFieldsFn<TFieldGroup extends VueFieldGroup<any, any>> = <TProps extends object, const TFieldsPropName extends PropertyKey>(component: Component & (new (props: TProps & PublicProps) => any), fieldsPropName: TFieldsPropName & FieldGroupFieldsPropName<TProps, TFieldGroup>) => new <TFormData>(props: Omit<TProps, TFieldsPropName | 'form'> & {
   form: FieldGroupForm<FieldGroupFieldComponentsOf<TFieldGroup>, TFormData>;
-} & { [TPropName in TFieldsPropName]: FieldGroupFieldBindingsOf<TFieldGroup, TFormData>; } & PublicProps) => VueComponentInstance<Omit<TProps, TFieldsPropName | 'form'> & {
+} & FieldGroupFieldBindingsProps<FieldGroupFieldsOf<TFieldGroup>, TFormData, TFieldsPropName> & PublicProps) => VueComponentInstance<Omit<TProps, TFieldsPropName | 'form'> & {
   form: FieldGroupForm<FieldGroupFieldComponentsOf<TFieldGroup>, TFormData>;
-} & { [TPropName in TFieldsPropName]: FieldGroupFieldBindingsOf<TFieldGroup, TFormData>; } & Record<string, any>, {}>;
-interface FieldGroupHelper {
-  strict: <TValue>() => StrictFieldGroupFieldSlot<TValue>;
-  loose: <TValue>() => LooseFieldGroupFieldSlot<TValue>;
-}
+} & FieldGroupFieldBindingsInstanceProp<TFieldGroup, TFormData, TFieldsPropName> & Record<string, any>, {}>;
 interface FieldGroupDefinition<TFields extends FieldGroupFields, TFieldComponents extends Record<string, Component>> {
   /** The virtual field-group API injected into the bound component. */
   fields: VueFieldGroup<TFields, TFieldComponents>;
@@ -54,4 +32,4 @@ type DefineFieldGroupFn<TFieldComponents extends Record<string, Component>> = <c
 /** Defines a reusable group of virtual fields. */
 declare const defineFieldGroup: DefineFieldGroupFn<Record<never, never>>;
 //#endregion
-export { 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 };
+export { DefineFieldGroupFn, FieldGroupDefinition, FieldGroupFieldBindingsOf, FieldGroupFieldComponentsOf, FieldGroupFieldsOf, FieldGroupForm, FieldGroupWithFieldsFn, VueFieldGroup, defineFieldGroup };

package/dist/VueForm/Components.lib.js

@@ -1,5 +1,6 @@
 import { Subscribe } from "../Subscribe.public.js";
 import { createArrayFieldSubscription, createValueFieldSubscription } from "./fieldSubscriptions.lib.js";
+import { createFieldView } from "./fieldView.lib.js";
 import { useField } from "./useField.lib.js";
 import { shallow, useSelector } from "@tanstack/vue-store";
 import { InternalFormGroupApi } from "@tanstack/form-core/internals";
@@ -20,12 +21,14 @@ function createFieldComponent(form, fieldComponents, array, fieldContext) {
 			...context.attrs,
 			form
 		});
-		const fieldApi = useField(options, fieldComponents);
-		const selection = array ? createArrayFieldSubscription(fieldApi) : createValueFieldSubscription(fieldApi);
-		if (fieldContext) provide(fieldContext, fieldApi.value);
+		const fieldApi = useField(options);
+		const { selection, meta } = array ? createArrayFieldSubscription(fieldApi) : createValueFieldSubscription(fieldApi);
+		const field = createFieldView(fieldApi, selection, meta);
+		if (fieldComponents !== null) Object.assign(field, fieldComponents);
+		if (fieldContext) provide(fieldContext, field);
 		return () => {
 			selection.value;
-			return context.slots.default?.({ field: fieldApi.value });
+			return context.slots.default?.({ field });
 		};
 	}, {
 		name: array ? "TanStackForm.ArrayField" : "TanStackForm.Field",

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/fieldSubscriptions.lib.js

@@ -4,9 +4,12 @@ import { shallowRef, toRaw, watch } from "vue";
 //#region src/VueForm/fieldSubscriptions.lib.ts
 function createFieldSelection(fieldApi, selector) {
 	const selected = shallowRef(selector(fieldApi.value));
+	const meta = shallowRef(fieldApi.value.meta);
 	watch(fieldApi, (field, _previous, onCleanup) => {
+		meta.value = field.meta;
 		selected.value = selector(field);
 		const subscription = field.atom.subscribe(() => {
+			meta.value = field.meta;
 			const next = selector(field);
 			if (!shallow(toRaw(selected.value), next)) selected.value = next;
 		});
@@ -15,7 +18,10 @@ function createFieldSelection(fieldApi, selector) {
 		immediate: true,
 		flush: "sync"
 	});
-	return selected;
+	return {
+		selection: selected,
+		meta
+	};
 }
 function createValueFieldSubscription(fieldApi) {
 	return createFieldSelection(fieldApi, (field) => ({

package/dist/VueForm/fieldView.lib.js

@@ -0,0 +1,43 @@
+//#region src/VueForm/fieldView.lib.ts
+/**
+* The public field shared by slots and injected components. State getters
+* track the existing subscription in the component that reads them, while
+* handlers follow the current core field after a reset or name change.
+*/
+function createFieldView(fieldApi, selection, meta) {
+	return {
+		get form() {
+			return fieldApi.value.form;
+		},
+		get name() {
+			return fieldApi.value.name;
+		},
+		get atom() {
+			return fieldApi.value.atom;
+		},
+		get value() {
+			selection.value;
+			return fieldApi.value.value;
+		},
+		get meta() {
+			return meta.value;
+		},
+		get errors() {
+			return meta.value.errors;
+		},
+		handleChange: (value, options) => fieldApi.value.handleChange(value, options),
+		handleBlur: () => fieldApi.value.handleBlur(),
+		reset: () => fieldApi.value.reset(),
+		swapValues: (indexA, indexB) => fieldApi.value.swapValues(indexA, indexB),
+		moveValue: (fromIndex, toIndex, options) => fieldApi.value.moveValue(fromIndex, toIndex, options),
+		pushValue: (value, options) => fieldApi.value.pushValue(value, options),
+		insertValue: (index, value, options) => fieldApi.value.insertValue(index, value, options),
+		clearValues: (options) => fieldApi.value.clearValues(options),
+		replaceValue: (index, value, options) => fieldApi.value.replaceValue(index, value, options),
+		removeValue: (index, options) => fieldApi.value.removeValue(index, options),
+		filterValues: (predicate, options) => fieldApi.value.filterValues(predicate, options)
+	};
+}
+
+//#endregion
+export { createFieldView };

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

@@ -1,6 +1,5 @@
 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>;
@@ -27,6 +26,6 @@ type VueFormTypeErrorTypes<TFormValidators extends FormValidators<any>, TSubmitR
  *
  * @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 | 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;
+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

@@ -2,17 +2,15 @@ import { useSelector } from "@tanstack/vue-store";
 import { onMounted, onUnmounted, shallowRef, watch, watchEffect } from "vue";
 
 //#region src/VueForm/useField.lib.ts
-function useField(options, fieldComponents) {
+function useField(options) {
 	const initialOptions = options();
 	const resetVersion = useSelector(initialOptions.form._atoms.resetVersion);
 	const createField = () => {
 		const current = options();
-		const field = current.form._getOrCreateFieldApi({
+		return current.form._getOrCreateFieldApi({
 			...current,
 			name: current.name
-		});
-		if (fieldComponents !== null) Object.assign(field, fieldComponents);
-		return field;
+		}, "field");
 	};
 	const fieldApi = shallowRef(createField());
 	watch([
@@ -23,7 +21,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 { DefineFieldGroupFn, FieldGroupDefinition, FieldGroupFieldBindingsOf, FieldGroupFieldComponentsOf, FieldGroupFieldsOf, FieldGroupForm, FieldGroupWithFieldsFn, 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, AnyVueFormApi, AnyVueFormComponentMap, AppFormComponent, AppFormHookResult, CreateFormHookOptions, DefaultVueFormComponentMap, DefineFieldGroupFn, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupDefinition, FieldGroupFieldBindingsOf, FieldGroupFieldComponent, FieldGroupFieldComponentsOf, FieldGroupFieldsOf, FieldGroupForm, FieldGroupFormState, FieldGroupSubscribeComponent, FieldGroupSubscribeProps, FieldGroupWithFieldsFn, FormHookHelpers, 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.1",
+  "version": "2.0.0-alpha.3",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -25,15 +25,15 @@
     "dist"
   ],
   "dependencies": {
-    "@tanstack/vue-store": "^0.11.1",
-    "@tanstack/form-core": "2.0.0-alpha.1"
+    "@tanstack/form-core": "2.0.0-alpha.3",
+    "@tanstack/vue-store": "^0.11.1"
   },
   "devDependencies": {
-    "@testing-library/vue": "^8.1.0",
-    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitejs/plugin-vue": "^6.0.9",
     "unplugin-vue": "^7.2.0",
-    "vue": "^3.6.0-rc.2",
-    "vue-tsc": "^3.3.9"
+    "vitest-browser-vue": "^3.1.0",
+    "vue": "^3.6.0-rc.9",
+    "vue-tsc": "^3.3.11"
   },
   "peerDependencies": {
     "vue": "^3.6.0-rc.2"

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 };