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

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/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/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
 		}, "field");
-		if (fieldComponents !== null) Object.assign(field, fieldComponents);
-		return field;
 	};
 	const fieldApi = shallowRef(createField());
 	watch([

package/dist/index.d.ts

@@ -5,11 +5,11 @@ import { UseFormHook, useForm } from "./VueForm/useForm.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, 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, 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 };
+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.2",
+  "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.2"
+    "@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"