@formisch/vue 0.2.0 → 0.3.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Fabian Hiller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -2,7 +2,7 @@
 
 Formisch is a schema-based, headless form library for Vue. It manages form state and validation. It is type-safe, fast by default and its bundle size is small due to its modular design. Try it out in our [playground](https://stackblitz.com/edit/formisch-playground-vue)!
 
-Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik], and [SolidJS][formisch-solid]. Svelte will follow soon.
+Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik], [SolidJS][formisch-solid] and [Svelte][formisch-svelte].
 
 ## Highlights
 
@@ -72,4 +72,4 @@ This project is available free of charge and licensed under the [MIT license](ht
 [formisch-preact]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/preact
 [formisch-qwik]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/qwik
 [formisch-solid]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/solid
-[formisch-vue]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/vue
+[formisch-svelte]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/svelte

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as v from "valibot";
-import * as vue5 from "vue";
+import * as vue11 from "vue";
 import { ComponentPublicInstance, MaybeRefOrGetter, ShallowRef as Signal } from "vue";
 
 //#region ../../packages/core/dist/index.vue.d.ts
@@ -18,29 +18,34 @@ interface InternalBaseStore {
   kind: "array" | "object" | "value";
   name: string;
   schema: Schema;
+  initialElements: FieldElement[];
   elements: FieldElement[];
   errors: Signal<[string, ...string[]] | null>;
+  isTouched: Signal<boolean>;
+  isDirty: Signal<boolean>;
 }
 interface InternalArrayStore extends InternalBaseStore {
   kind: "array";
   children: InternalFieldStore[];
+  initialInput: Signal<true | null | undefined>;
+  startInput: Signal<true | null | undefined>;
+  input: Signal<true | null | undefined>;
   initialItems: Signal<string[]>;
   startItems: Signal<string[]>;
   items: Signal<string[]>;
-  isTouched: Signal<boolean>;
-  isDirty: Signal<boolean>;
 }
 interface InternalObjectStore extends InternalBaseStore {
   kind: "object";
   children: Record<string, InternalFieldStore>;
+  initialInput: Signal<true | null | undefined>;
+  startInput: Signal<true | null | undefined>;
+  input: Signal<true | null | undefined>;
 }
 interface InternalValueStore extends InternalBaseStore {
   kind: "value";
   initialInput: Signal<unknown>;
   startInput: Signal<unknown>;
   input: Signal<unknown>;
-  isTouched: Signal<boolean>;
-  isDirty: Signal<boolean>;
 }
 type InternalFieldStore = InternalArrayStore | InternalObjectStore | InternalValueStore;
 //#endregion
@@ -289,8 +294,8 @@ declare function validate<TSchema extends Schema>(form: BaseFormStore<TSchema>,
 //#endregion
 //#region src/types/field.d.ts
 /**
-* Value type of the field element props.
-*/
+ * Value type of the field element props.
+ */
 interface FieldElementProps {
   readonly name: string;
   readonly autofocus: boolean;
@@ -300,8 +305,8 @@ interface FieldElementProps {
   readonly onBlur: (event: FocusEvent) => void;
 }
 /**
-* Value type of the field store.
-*/
+ * Value type of the field store.
+ */
 interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
   get input(): PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>;
@@ -313,8 +318,8 @@ interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends Require
   readonly props: FieldElementProps;
 }
 /**
-* Value type of the field array store.
-*/
+ * Value type of the field array store.
+ */
 interface FieldArrayStore<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
   readonly items: string[];
@@ -344,14 +349,14 @@ interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends Require
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
 }
 declare const _default: <TSchema extends Schema, TFieldPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal$2<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldProps<TSchema, TFieldPath> & Partial<{}>> & vue5.PublicProps;
-  expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
+  props: __VLS_PrettifyLocal$2<Pick<Partial<{}> & Omit<{} & vue11.VNodeProps & vue11.AllowedComponentProps & vue11.ComponentCustomProps, never>, never> & FieldProps<TSchema, TFieldPath> & {}> & vue11.PublicProps;
+  expose(exposed: vue11.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
     default(props: FieldStore<TSchema, TFieldPath>): any;
   };
   emit: {};
-}>) => vue5.VNode & {
+}>) => vue11.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 type __VLS_PrettifyLocal$2<T> = { [K in keyof T as K]: T[K] } & {};
@@ -365,32 +370,32 @@ interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath exten
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
 }
 declare const _default$1: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal$1<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldArrayProps<TSchema, TFieldArrayPath> & Partial<{}>> & vue5.PublicProps;
-  expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
+  props: __VLS_PrettifyLocal$1<Pick<Partial<{}> & Omit<{} & vue11.VNodeProps & vue11.AllowedComponentProps & vue11.ComponentCustomProps, never>, never> & FieldArrayProps<TSchema, TFieldArrayPath> & {}> & vue11.PublicProps;
+  expose(exposed: vue11.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
     default(props: FieldArrayStore<TSchema, TFieldArrayPath>): any;
   };
   emit: {};
-}>) => vue5.VNode & {
+}>) => vue11.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 type __VLS_PrettifyLocal$1<T> = { [K in keyof T as K]: T[K] } & {};
 //#endregion
 //#region src/components/Form/Form.vue.d.ts
-type FormProps<TSchema extends Schema = Schema> = {
+interface FormProps<TSchema extends Schema = Schema> {
   of: FormStore<TSchema>;
   onSubmit: SubmitHandler<TSchema>;
-};
+}
 declare const _default$2: <TSchema extends Schema = Schema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FormProps<TSchema> & Partial<{}>> & vue5.PublicProps;
-  expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
+  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue11.VNodeProps & vue11.AllowedComponentProps & vue11.ComponentCustomProps, never>, never> & FormProps<TSchema> & {}> & vue11.PublicProps;
+  expose(exposed: vue11.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
     default?: (props: {}) => any;
   };
   emit: {};
-}>) => vue5.VNode & {
+}>) => vue11.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 type __VLS_PrettifyLocal<T> = { [K in keyof T as K]: T[K] } & {};

package/dist/index.js

@@ -16,16 +16,21 @@ function untrack(fn) {
 * TODO: Add comment
 * TODO: Should this stay in /primitives or move to /utils?
 */
-function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
+function initializeFieldStore(internalFieldStore, schema, initialInput, path, nullish = false) {
 	if (framework === "qwik" && schema.type === "lazy" || schema.type === "object_with_rest" || schema.type === "record" || schema.type === "tuple_with_rest" || schema.type === "promise") throw new Error(`"${schema.type}" schema is not supported`);
 	else if (schema.type === "lazy") initializeFieldStore(internalFieldStore, schema.getter(void 0), initialInput, path);
-	else if (schema.type === "exact_optional" || schema.type === "non_nullable" || schema.type === "non_nullish" || schema.type === "non_optional" || schema.type === "nullable" || schema.type === "nullish" || schema.type === "optional" || schema.type === "undefinedable") initializeFieldStore(internalFieldStore, schema.wrapped, initialInput ?? v.getDefault(schema), path);
+	else if (schema.type === "exact_optional" || schema.type === "nullable" || schema.type === "nullish" || schema.type === "optional" || schema.type === "undefinedable") initializeFieldStore(internalFieldStore, schema.wrapped, initialInput ?? v.getDefault(schema), path, true);
+	else if (schema.type === "non_nullable" || schema.type === "non_nullish" || schema.type === "non_optional") initializeFieldStore(internalFieldStore, schema.wrapped, initialInput, path);
 	else if (schema.type === "intersect" || schema.type === "union" || schema.type === "variant") for (const schemaOption of schema.options) initializeFieldStore(internalFieldStore, schemaOption, initialInput, path);
 	else {
 		internalFieldStore.schema = schema;
 		internalFieldStore.name = JSON.stringify(path);
-		internalFieldStore.elements = [];
+		const initialElements = [];
+		internalFieldStore.initialElements = initialElements;
+		internalFieldStore.elements = initialElements;
 		internalFieldStore.errors = createSignal(null);
+		internalFieldStore.isTouched = createSignal(false);
+		internalFieldStore.isDirty = createSignal(false);
 		if (schema.type === "array" || schema.type === "loose_tuple" || schema.type === "strict_tuple" || schema.type === "tuple") {
 			if (internalFieldStore.kind && internalFieldStore.kind !== "array") throw new Error(`Store initialized as "${internalFieldStore.kind}" cannot be reinitialized as "array"`);
 			internalFieldStore.kind = "array";
@@ -41,15 +46,17 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 				} else for (let index = 0; index < schema.items; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
-					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput && initialInput[index], path);
+					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput?.[index], path);
 					path.pop();
 				}
+				const arrayInput = nullish && initialInput == null ? initialInput : true;
+				internalFieldStore.initialInput = createSignal(arrayInput);
+				internalFieldStore.startInput = createSignal(arrayInput);
+				internalFieldStore.input = createSignal(arrayInput);
 				const initialItems = internalFieldStore.children.map(createId);
 				internalFieldStore.initialItems = createSignal(initialItems);
 				internalFieldStore.startItems = createSignal(initialItems);
 				internalFieldStore.items = createSignal(initialItems);
-				internalFieldStore.isTouched = createSignal(false);
-				internalFieldStore.isDirty = createSignal(false);
 			}
 		} else if (schema.type === "loose_object" || schema.type === "object" || schema.type === "strict_object") {
 			if (internalFieldStore.kind && internalFieldStore.kind !== "object") throw new Error(`Store initialized as "${internalFieldStore.kind}" cannot be reinitialized as "object"`);
@@ -59,9 +66,13 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 				for (const key in schema.entries) {
 					internalFieldStore.children[key] = {};
 					path.push(key);
-					initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput && initialInput[key], path);
+					initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput?.[key], path);
 					path.pop();
 				}
+				const objectInput = nullish && initialInput == null ? initialInput : true;
+				internalFieldStore.initialInput = createSignal(objectInput);
+				internalFieldStore.startInput = createSignal(objectInput);
+				internalFieldStore.input = createSignal(objectInput);
 			}
 		} else {
 			internalFieldStore.kind = "value";
@@ -69,8 +80,6 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 				internalFieldStore.initialInput = createSignal(initialInput);
 				internalFieldStore.startInput = createSignal(initialInput);
 				internalFieldStore.input = createSignal(initialInput);
-				internalFieldStore.isTouched = createSignal(false);
-				internalFieldStore.isDirty = createSignal(false);
 			}
 		}
 	}
@@ -87,10 +96,14 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
 	batch(() => {
 		untrack(() => {
+			toInternalFieldStore.elements = fromInternalFieldStore.elements;
+			toInternalFieldStore.errors.value = fromInternalFieldStore.errors.value;
+			toInternalFieldStore.startInput.value = fromInternalFieldStore.startInput.value;
+			toInternalFieldStore.input.value = fromInternalFieldStore.input.value;
+			toInternalFieldStore.isTouched.value = fromInternalFieldStore.isTouched.value;
+			toInternalFieldStore.isDirty.value = fromInternalFieldStore.isDirty.value;
 			if (fromInternalFieldStore.kind === "array" && toInternalFieldStore.kind === "array") {
 				const fromItems = fromInternalFieldStore.items.value;
-				toInternalFieldStore.isTouched.value = fromInternalFieldStore.isTouched.value;
-				toInternalFieldStore.isDirty.value = fromInternalFieldStore.isDirty.value;
 				toInternalFieldStore.startItems.value = fromInternalFieldStore.startItems.value;
 				toInternalFieldStore.items.value = fromItems;
 				let path;
@@ -105,12 +118,6 @@ function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
 					copyItemState(fromInternalFieldStore.children[index], toInternalFieldStore.children[index]);
 				}
 			} else if (fromInternalFieldStore.kind === "object" && toInternalFieldStore.kind === "object") for (const key in fromInternalFieldStore.children) copyItemState(fromInternalFieldStore.children[key], toInternalFieldStore.children[key]);
-			else if (fromInternalFieldStore.kind === "value" && toInternalFieldStore.kind === "value") {
-				toInternalFieldStore.isTouched.value = fromInternalFieldStore.isTouched.value;
-				toInternalFieldStore.isDirty.value = fromInternalFieldStore.isDirty.value;
-				toInternalFieldStore.startInput.value = fromInternalFieldStore.startInput.value;
-				toInternalFieldStore.input.value = fromInternalFieldStore.input.value;
-			}
 		});
 	});
 }
@@ -125,11 +132,15 @@ function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
 */
 function resetItemState(internalFieldStore, initialInput) {
 	batch(() => {
+		internalFieldStore.elements = [];
 		internalFieldStore.errors.value = null;
-		if (internalFieldStore.kind === "array") {
-			internalFieldStore.isTouched.value = false;
-			internalFieldStore.isDirty.value = false;
-			if (initialInput) {
+		internalFieldStore.isTouched.value = false;
+		internalFieldStore.isDirty.value = false;
+		if (internalFieldStore.kind === "array" || internalFieldStore.kind === "object") {
+			const objectInput = initialInput == null ? initialInput : true;
+			internalFieldStore.startInput.value = objectInput;
+			internalFieldStore.input.value = objectInput;
+			if (internalFieldStore.kind === "array") if (initialInput) {
 				const newItems = initialInput.map(createId);
 				internalFieldStore.startItems.value = newItems;
 				internalFieldStore.items.value = newItems;
@@ -138,10 +149,8 @@ function resetItemState(internalFieldStore, initialInput) {
 				internalFieldStore.startItems.value = [];
 				internalFieldStore.items.value = [];
 			}
-		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], initialInput?.[key]);
-		else {
-			internalFieldStore.isTouched.value = false;
-			internalFieldStore.isDirty.value = false;
+			else for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], initialInput?.[key]);
+		} else {
 			internalFieldStore.startInput.value = initialInput;
 			internalFieldStore.input.value = initialInput;
 		}
@@ -158,15 +167,27 @@ function resetItemState(internalFieldStore, initialInput) {
 function swapItemState(firstInternalFieldStore, secondInternalFieldStore) {
 	batch(() => {
 		untrack(() => {
+			const tempElements = firstInternalFieldStore.elements;
+			firstInternalFieldStore.elements = secondInternalFieldStore.elements;
+			secondInternalFieldStore.elements = tempElements;
+			const tempErrors = firstInternalFieldStore.errors.value;
+			firstInternalFieldStore.errors.value = secondInternalFieldStore.errors.value;
+			secondInternalFieldStore.errors.value = tempErrors;
+			const tempStartInput = firstInternalFieldStore.startInput.value;
+			firstInternalFieldStore.startInput.value = secondInternalFieldStore.startInput.value;
+			secondInternalFieldStore.startInput.value = tempStartInput;
+			const tempInput = firstInternalFieldStore.input.value;
+			firstInternalFieldStore.input.value = secondInternalFieldStore.input.value;
+			secondInternalFieldStore.input.value = tempInput;
+			const tempIsTouched = firstInternalFieldStore.isTouched.value;
+			firstInternalFieldStore.isTouched.value = secondInternalFieldStore.isTouched.value;
+			secondInternalFieldStore.isTouched.value = tempIsTouched;
+			const tempIsDirty = firstInternalFieldStore.isDirty.value;
+			firstInternalFieldStore.isDirty.value = secondInternalFieldStore.isDirty.value;
+			secondInternalFieldStore.isDirty.value = tempIsDirty;
 			if (firstInternalFieldStore.kind === "array" && secondInternalFieldStore.kind === "array") {
 				const firstItems = firstInternalFieldStore.items.value;
 				const secondItems = secondInternalFieldStore.items.value;
-				const tempIsTouched = firstInternalFieldStore.isTouched.value;
-				firstInternalFieldStore.isTouched.value = secondInternalFieldStore.isTouched.value;
-				secondInternalFieldStore.isTouched.value = tempIsTouched;
-				const tempIsDirty = firstInternalFieldStore.isDirty.value;
-				firstInternalFieldStore.isDirty.value = secondInternalFieldStore.isDirty.value;
-				secondInternalFieldStore.isDirty.value = tempIsDirty;
 				const tempStartItems = firstInternalFieldStore.startItems.value;
 				firstInternalFieldStore.startItems.value = secondInternalFieldStore.startItems.value;
 				secondInternalFieldStore.startItems.value = tempStartItems;
@@ -193,48 +214,39 @@ function swapItemState(firstInternalFieldStore, secondInternalFieldStore) {
 					swapItemState(firstInternalFieldStore.children[index], secondInternalFieldStore.children[index]);
 				}
 			} else if (firstInternalFieldStore.kind === "object" && secondInternalFieldStore.kind === "object") for (const key in firstInternalFieldStore.children) swapItemState(firstInternalFieldStore.children[key], secondInternalFieldStore.children[key]);
-			else if (firstInternalFieldStore.kind === "value" && secondInternalFieldStore.kind === "value") {
-				const tempIsTouched = firstInternalFieldStore.isTouched.value;
-				firstInternalFieldStore.isTouched.value = secondInternalFieldStore.isTouched.value;
-				secondInternalFieldStore.isTouched.value = tempIsTouched;
-				const tempIsDirty = firstInternalFieldStore.isDirty.value;
-				firstInternalFieldStore.isDirty.value = secondInternalFieldStore.isDirty.value;
-				secondInternalFieldStore.isDirty.value = tempIsDirty;
-				const tempStartInput = firstInternalFieldStore.startInput.value;
-				firstInternalFieldStore.startInput.value = secondInternalFieldStore.startInput.value;
-				secondInternalFieldStore.startInput.value = tempStartInput;
-				const tempInput = firstInternalFieldStore.input.value;
-				firstInternalFieldStore.input.value = secondInternalFieldStore.input.value;
-				secondInternalFieldStore.input.value = tempInput;
-			}
 		});
 	});
 }
 function getFieldInput(internalFieldStore) {
 	if (internalFieldStore.kind === "array") {
-		const value = [];
-		for (let index = 0; index < internalFieldStore.items.value.length; index++) value[index] = getFieldInput(internalFieldStore.children[index]);
-		return value;
+		if (internalFieldStore.input.value) {
+			const value = [];
+			for (let index = 0; index < internalFieldStore.items.value.length; index++) value[index] = getFieldInput(internalFieldStore.children[index]);
+			return value;
+		}
+		return internalFieldStore.input.value;
 	}
 	if (internalFieldStore.kind === "object") {
-		const value = {};
-		for (const key in internalFieldStore.children) value[key] = getFieldInput(internalFieldStore.children[key]);
-		return value;
+		if (internalFieldStore.input.value) {
+			const value = {};
+			for (const key in internalFieldStore.children) value[key] = getFieldInput(internalFieldStore.children[key]);
+			return value;
+		}
+		return internalFieldStore.input.value;
 	}
 	return internalFieldStore.input.value;
 }
 function getFieldBool(internalFieldStore, type) {
+	if (internalFieldStore[type].value) return true;
 	if (internalFieldStore.kind === "array") {
-		if (internalFieldStore[type].value) return true;
 		for (let index = 0; index < internalFieldStore.items.value.length; index++) if (getFieldBool(internalFieldStore.children[index], type)) return true;
 		return false;
 	}
 	if (internalFieldStore.kind == "object") {
-		if (type === "errors" && internalFieldStore[type].value) return true;
 		for (const key in internalFieldStore.children) if (getFieldBool(internalFieldStore.children[key], type)) return true;
 		return false;
 	}
-	return !!internalFieldStore[type].value;
+	return false;
 }
 function getFieldStore(internalFormStore, path) {
 	let internalFieldStore = internalFormStore;
@@ -250,50 +262,69 @@ function setFieldBool(internalFieldStore, type, bool) {
 		else internalFieldStore[type].value = bool;
 	});
 }
-function setFieldInput(internalFieldStore, input) {
-	batch(() => {
-		if (internalFieldStore.kind === "array") {
-			const items = untrack(() => internalFieldStore.items.value);
-			if (input.length < items.length) internalFieldStore.items.value = items.slice(0, input.length);
-			else if (input.length > items.length) {
-				if (input.length > internalFieldStore.children.length) {
-					const path = JSON.parse(internalFieldStore.name);
-					for (let index = internalFieldStore.children.length; index < input.length; index++) {
-						internalFieldStore.children[index] = {};
-						path.push(index);
-						initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, input[index], path);
-						path.pop();
-					}
+function setNestedInput(internalFieldStore, input) {
+	internalFieldStore.isTouched.value = true;
+	if (internalFieldStore.kind === "array") {
+		const arrayInput = input ?? [];
+		const items = internalFieldStore.items.value;
+		if (arrayInput.length < items.length) internalFieldStore.items.value = items.slice(0, arrayInput.length);
+		else if (arrayInput.length > items.length) {
+			if (arrayInput.length > internalFieldStore.children.length) {
+				const path = JSON.parse(internalFieldStore.name);
+				for (let index = internalFieldStore.children.length; index < arrayInput.length; index++) {
+					internalFieldStore.children[index] = {};
+					path.push(index);
+					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
+					path.pop();
 				}
-				internalFieldStore.items.value = [...items, ...input.slice(items.length).map(createId)];
 			}
-			for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index], input[index]);
-			internalFieldStore.isDirty.value = untrack(() => internalFieldStore.startItems.value).length !== items.length;
-		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input[key]);
-		else {
-			internalFieldStore.input.value = input;
-			internalFieldStore.isTouched.value = true;
-			const startInput = untrack(() => internalFieldStore.startInput.value);
-			internalFieldStore.isDirty.value = startInput !== input && (startInput !== void 0 || input !== "" && !Number.isNaN(input));
+			internalFieldStore.items.value = [...items, ...arrayInput.slice(items.length).map(createId)];
 		}
+		for (let index = 0; index < items.length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
+		internalFieldStore.input.value = input == null ? input : true;
+		internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== items.length;
+	} else if (internalFieldStore.kind === "object") {
+		for (const key in internalFieldStore.children) setNestedInput(internalFieldStore.children[key], input?.[key]);
+		internalFieldStore.input.value = input == null ? input : true;
+		internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value;
+	} else {
+		internalFieldStore.input.value = input;
+		const startInput = internalFieldStore.startInput.value;
+		internalFieldStore.isDirty.value = startInput !== input && (startInput !== void 0 || input !== "" && !Number.isNaN(input));
+	}
+}
+function setFieldInput(internalFormStore, path, input) {
+	batch(() => {
+		untrack(() => {
+			let internalFieldStore = internalFormStore;
+			for (let index = 0; index < path.length; index++) {
+				internalFieldStore = internalFieldStore.children[path[index]];
+				if (index < path.length - 1) internalFieldStore.input.value = true;
+				else setNestedInput(internalFieldStore, input);
+			}
+		});
 	});
 }
 function setInitialFieldInput(internalFieldStore, initialInput) {
 	batch(() => {
 		if (internalFieldStore.kind === "array") {
-			if (initialInput.length > internalFieldStore.children.length) {
+			internalFieldStore.input.value = initialInput == null ? initialInput : true;
+			const initialArrayInput = initialInput ?? [];
+			if (initialArrayInput.length > internalFieldStore.children.length) {
 				const path = JSON.parse(internalFieldStore.name);
-				for (let index = internalFieldStore.children.length; index < initialInput.length; index++) {
+				for (let index = internalFieldStore.children.length; index < initialArrayInput.length; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
-					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialInput[index], path);
+					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
 					path.pop();
 				}
 			}
-			internalFieldStore.initialItems.value = initialInput.map(createId);
-			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialInput?.[index]);
-		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
-		else internalFieldStore.initialInput.value = initialInput;
+			internalFieldStore.initialItems.value = initialArrayInput.map(createId);
+			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialArrayInput[index]);
+		} else if (internalFieldStore.kind === "object") {
+			internalFieldStore.input.value = initialInput == null ? initialInput : true;
+			for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
+		} else internalFieldStore.initialInput.value = initialInput;
 	});
 }
 function walkFieldStore(internalFieldStore, callback) {
@@ -354,8 +385,8 @@ async function validateFormInput(internalFormStore, config) {
 	});
 	return result;
 }
-function validateIfRequired(internalFormStore, internalFieldStore, validationModes) {
-	if (validationModes === (internalFormStore.validate === "initial" || (internalFormStore.validate === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidate : internalFormStore.validate)) validateFormInput(internalFormStore);
+function validateIfRequired(internalFormStore, internalFieldStore, validationMode) {
+	if (validationMode === (internalFormStore.validate === "initial" || (internalFormStore.validate === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidate : internalFormStore.validate)) validateFormInput(internalFormStore);
 }
 const INTERNAL = "~internal";
 
@@ -397,7 +428,12 @@ function handleSubmit(form, handler) {
 }
 function insert(form, config) {
 	const internalFormStore = form[INTERNAL];
-	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	let internalFieldStore = internalFormStore;
+	for (let index = 0; index < config.path.length; index++) {
+		internalFieldStore = internalFieldStore.children[config.path[index]];
+		if (index < config.path.length - 1) internalFieldStore.input.value = true;
+	}
+	const internalArrayStore = internalFieldStore;
 	const items = untrack(() => internalArrayStore.items.value);
 	const insertIndex = config.at === void 0 ? items.length : config.at;
 	if (insertIndex >= 0 && insertIndex <= items.length) batch(() => {
@@ -411,6 +447,7 @@ function insert(form, config) {
 			path.push(insertIndex);
 			initializeFieldStore(internalArrayStore.children[insertIndex], internalArrayStore.schema.item, config.initialInput, path);
 		} else resetItemState(internalArrayStore.children[insertIndex], config.initialInput);
+		internalArrayStore.input.value = true;
 		internalArrayStore.isTouched.value = true;
 		internalArrayStore.isDirty.value = true;
 		validateIfRequired(internalFormStore, internalArrayStore, "input");
@@ -470,17 +507,20 @@ function reset(form, config) {
 			const internalFieldStore = config?.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
 			if (config?.initialInput) setInitialFieldInput(internalFieldStore, config.initialInput);
 			walkFieldStore(internalFieldStore, (internalFieldStore$1) => {
+				internalFieldStore$1.elements = internalFieldStore$1.initialElements;
 				if (!config?.keepErrors) internalFieldStore$1.errors.value = null;
+				if (!config?.keepTouched) internalFieldStore$1.isTouched.value = false;
+				internalFieldStore$1.startInput.value = internalFieldStore$1.initialInput.value;
+				if (!config?.keepInput) internalFieldStore$1.input.value = internalFieldStore$1.initialInput.value;
 				if (internalFieldStore$1.kind === "array") {
 					internalFieldStore$1.startItems.value = internalFieldStore$1.initialItems.value;
 					if (!config?.keepInput || internalFieldStore$1.startItems.value.length === internalFieldStore$1.items.value.length) internalFieldStore$1.items.value = internalFieldStore$1.initialItems.value;
-					if (!config?.keepTouched) internalFieldStore$1.isTouched.value = false;
-					internalFieldStore$1.isDirty.value = internalFieldStore$1.startItems.value !== internalFieldStore$1.items.value;
-				} else if (internalFieldStore$1.kind === "value") {
-					internalFieldStore$1.startInput.value = internalFieldStore$1.initialInput.value;
-					if (!config?.keepInput) internalFieldStore$1.input.value = internalFieldStore$1.initialInput.value;
-					if (!config?.keepTouched) internalFieldStore$1.isTouched.value = false;
-					internalFieldStore$1.isDirty.value = internalFieldStore$1.startInput.value !== internalFieldStore$1.input.value;
+					internalFieldStore$1.isDirty.value = internalFieldStore$1.startInput.value !== internalFieldStore$1.input.value || internalFieldStore$1.startItems.value !== internalFieldStore$1.items.value;
+				} else if (internalFieldStore$1.kind === "object") internalFieldStore$1.isDirty.value = internalFieldStore$1.startInput.value !== internalFieldStore$1.input.value;
+				else {
+					const startInput = internalFieldStore$1.startInput.value;
+					const input = internalFieldStore$1.input.value;
+					internalFieldStore$1.isDirty.value = startInput !== input && (startInput !== void 0 || input !== "" && !Number.isNaN(input));
 					for (const element of internalFieldStore$1.elements) if (element.type === "file") element.value = "";
 				}
 			});
@@ -497,9 +537,8 @@ function setErrors(form, config) {
 function setInput(form, config) {
 	batch(() => {
 		const internalFormStore = form[INTERNAL];
-		const internalFieldStore = config.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
-		setFieldInput(internalFieldStore, config.input);
-		validateIfRequired(internalFormStore, internalFieldStore, "input");
+		setFieldInput(internalFormStore, config.path ?? [], config.input);
+		validateIfRequired(internalFormStore, config.path ? getFieldStore(internalFormStore, config.path) : internalFormStore, "input");
 	});
 }
 function submit(form) {
@@ -528,7 +567,9 @@ function validate(form, config) {
 //#endregion
 //#region src/composables/useField/useField.ts
 function useField(form, config) {
-	const internalFieldStore = computed(() => getFieldStore(toValue(form)[INTERNAL], toValue(config).path));
+	const path = computed(() => toValue(config).path);
+	const internalFormStore = computed(() => toValue(form)[INTERNAL]);
+	const internalFieldStore = computed(() => getFieldStore(internalFormStore.value, path.value));
 	onUnmounted(() => {
 		internalFieldStore.value.elements = internalFieldStore.value.elements.filter((element) => element.isConnected);
 	});
@@ -538,14 +579,14 @@ function useField(form, config) {
 	const isValid = computed(() => !getFieldBool(internalFieldStore.value, "errors"));
 	return {
 		get path() {
-			return toValue(config).path;
+			return path.value;
 		},
 		get input() {
 			return input.value;
 		},
 		set input(value) {
-			setFieldInput(internalFieldStore.value, value);
-			validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "input");
+			setFieldInput(internalFormStore.value, path.value, value);
+			validateIfRequired(internalFormStore.value, internalFieldStore.value, "input");
 		},
 		get errors() {
 			return internalFieldStore.value.errors.value;
@@ -569,13 +610,13 @@ function useField(form, config) {
 			},
 			onFocus() {
 				setFieldBool(internalFieldStore.value, "isTouched", true);
-				validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "touch");
+				validateIfRequired(internalFormStore.value, internalFieldStore.value, "touch");
 			},
 			onChange() {
-				validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "change");
+				validateIfRequired(internalFormStore.value, internalFieldStore.value, "change");
 			},
 			onBlur() {
-				validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "blur");
+				validateIfRequired(internalFormStore.value, internalFieldStore.value, "blur");
 			}
 		}
 	};
@@ -613,7 +654,7 @@ function useFieldArray(form, config) {
 //#endregion
 //#region src/composables/useForm/useForm.ts
 function useForm(config) {
-	const internalFormStore = createFormStore(config, async (input) => v.safeParseAsync(config.schema, input));
+	const internalFormStore = createFormStore(config, (input) => v.safeParseAsync(config.schema, input));
 	onBeforeMount(async () => {
 		if (config.validate === "initial") await validateFormInput(internalFormStore);
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/vue",
   "description": "The modular and type-safe form library for Vue",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -32,17 +32,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsdown",
-    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
-    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
-    "format": "prettier --write ./src",
-    "format.check": "prettier --check ./src",
-    "vite": "vite"
-  },
   "devDependencies": {
-    "@formisch/core": "workspace:*",
-    "@formisch/methods": "workspace:*",
     "@types/node": "^24.1.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "eslint": "^9.32.0",
@@ -52,7 +42,9 @@
     "unplugin-vue": "^7.0.0",
     "valibot": "^1.1.0",
     "vue": "^3.5.18",
-    "vue-tsc": "^3.0.4"
+    "vue-tsc": "^3.0.4",
+    "@formisch/core": "0.4.0",
+    "@formisch/methods": "0.3.0"
   },
   "peerDependencies": {
     "typescript": ">=5",
@@ -63,5 +55,13 @@
     "typescript": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
+    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
+    "format": "prettier --write ./src",
+    "format.check": "prettier --check ./src",
+    "vite": "vite"
   }
-}
+}