notform 2.1.3 → 2.2.1

package/README.md

@@ -3,7 +3,7 @@
 <p><strong>Vue Forms Without the Friction</strong></p>
 <p>
 <a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/v/notform.svg?style=plastic&label=NPM%20Version&color=blue" alt="NPM Version"></a>
-<a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/dw/notform.svg?style=plastic&label=NPM%20Downloads&color=blue" alt="NPM Downloads"></a>
+<a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/dt/notform.svg?style=plastic&label=NPM%20Downloads&color=blue" alt="NPM Downloads"></a>
 <a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/unpacked-size/notform?style=plastic&label=NPM%20Unpacked%20Size&color=blue" alt="NPM Unpacked Size"></a>
 </p>
 </div>
@@ -37,13 +37,13 @@ import { NotField, NotForm, NotMessage, useNotForm } from 'notform'
 import { z } from 'zod'
 
 const schema = z.object({
-  email: z.string().email('Invalid email'),
+  email: z.email('Invalid email'),
   name: z.string().min(1, 'Name is required'),
 })
 
 const form = useNotForm({
-  onSubmit: (values) => {
-    console.log('Form submitted:', values)
+  onSubmit(values) {
+    console.log('Form:', values)
   },
   schema,
 })
@@ -51,30 +51,51 @@ const form = useNotForm({
 
 <template>
   <NotForm
-    :form="form"
+    :form
     @submit="form.submit"
+    @reset="form.reset()"
   >
-    <NotField path="name">
-      <input
-        v-model="form.values.name"
-        type="text"
-      >
-
-      <NotMessage path="name" />
+    <NotField
+      v-slot="{events,path}"
+      path="name"
+    >
+      <label :for="path">
+        Name
+        <input
+          v-bind="events"
+          :id="path"
+          v-model="form.values.name"
+          type="text"
+        >
+      </label>
+
+      <NotMessage :path="path" />
     </NotField>
 
-    <NotField path="email">
-      <input
-        v-model="form.values.email"
-        type="email"
-      >
-
-      <NotMessage path="email" />
+    <NotField
+      v-slot="{events,path}"
+      path="email"
+    >
+      <label :for="path">
+        Email
+        <input
+          v-bind="events"
+          :id="path"
+          v-model="form.values.email"
+          type="email"
+        >
+      </label>
+
+      <NotMessage :path="path" />
     </NotField>
 
     <button type="submit">
       Submit
     </button>
+
+    <button type="reset">
+      Reset Form
+    </button>
   </NotForm>
 </template>
 ```

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { Component, ComputedRef, MaybeRefOrGetter, Raw, Ref } from "vue";
 import { StandardSchemaV1 } from "@standard-schema/spec";
 import { Get, PartialDeep, Paths as Paths$1 } from "type-fest";
-
 //#region src/types/shared.d.ts
 /**
  * The validation mode determines when validation occurs.
@@ -44,6 +43,23 @@ type ObjectSchema = StandardSchemaV1 & {
     };
   };
 };
+/**
+ * Represents a segment of a validation path.
+ * It can be either a string (for object properties) or a number (for array indices).
+ */
+type Segment = PropertyKey | StandardSchemaV1.PathSegment;
+/**
+ * Maps the index an array item occupied before a mutation to the index it
+ * occupies after that mutation, or to `undefined` when the mutation removed the
+ * item entirely.
+ *
+ * Each array mutation in `NotArrayField` (`prepend`, `remove`, `insert`,
+ * `swap`, `move`) builds one of these to describe exactly how it reshuffles
+ * indices, then passes it to `remapArrayFieldState`.
+ * @param previousIndex The index the item occupied before the mutation.
+ * @returns The index the item occupies after the mutation, or `undefined` if the item was removed.
+ */
+type ArrayItemIndexMap = (previousIndex: number) => number | undefined;
 //#endregion
 //#region src/types/use-not-form.d.ts
 /**
@@ -64,9 +80,9 @@ interface UseNotFormConfig<TSchema extends ObjectSchema> {
   validateOn?: Partial<Record<ValidationTrigger, boolean>>;
   /**
    * The validation mode of the form.
-   * @default { eager: true }
+   * @default 'eager'
    */
-  validationMode?: Partial<Record<ValidationMode, boolean>>;
+  validationMode?: ValidationMode;
   /**
    * Callback triggered when form validation passes and the form is submitted.
    * @param values The validated output data from the schema.
@@ -80,9 +96,13 @@ interface UseNotFormConfig<TSchema extends ObjectSchema> {
  * @template TSchema The form schema.
  */
 type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
-  /** The values the form was initialised or last reset with. */readonly initialValues: UseNotFormConfig<TSchema>['initialValues']; /** The errors the form was initialised or last reset with. */
-  readonly initialErrors: UseNotFormConfig<TSchema>['initialErrors']; /** The resolved validation triggers for this form. */
-  readonly validateOn: Required<NonNullable<UseNotFormConfig<TSchema>['validateOn']>>; /** The resolved validation mode for this form. */
+  /** The values the form was initialised or last reset with. */
+  readonly initialValues: UseNotFormConfig<TSchema>['initialValues'];
+  /** The errors the form was initialised or last reset with. */
+  readonly initialErrors: UseNotFormConfig<TSchema>['initialErrors'];
+  /** The resolved validation triggers for this form. */
+  readonly validateOn: Required<NonNullable<UseNotFormConfig<TSchema>['validateOn']>>;
+  /** The resolved validation mode for this form. */
   readonly validationMode: Required<NonNullable<UseNotFormConfig<TSchema>['validationMode']>>;
   /**
    * Deeply reactive object of field values.
@@ -117,20 +137,24 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    * The set of field paths the user has interacted with.
    * Populated for all paths when the form is submitted.
    */
-  touchedFields: Set<Paths<StandardSchemaV1.InferInput<TSchema>>>; /** Whether any field has been touched. */
+  touchedFields: Set<Paths<StandardSchemaV1.InferInput<TSchema>>>;
+  /** Whether any field has been touched. */
   isTouched: ComputedRef<boolean>;
   /**
    * Marks a field as touched.
    * Called automatically by the field's `onBlur` handler.
    */
-  touchField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => void; /** The set of field paths whose current value differs from the initial value. */
-  dirtyFields: Set<Paths<StandardSchemaV1.InferInput<TSchema>>>; /** Whether any field value differs from its initial value. */
+  touchField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => void;
+  /** The set of field paths whose current value differs from the initial value. */
+  dirtyFields: Set<Paths<StandardSchemaV1.InferInput<TSchema>>>;
+  /** Whether any field value differs from its initial value. */
   isDirty: ComputedRef<boolean>;
   /**
    * Marks a field as dirty.
    * Called automatically when a field value changes.
    */
-  dirtyField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => void; /** The raw validation issues produced by the last validation run. */
+  dirtyField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => void;
+  /** The raw validation issues produced by the last validation run. */
   errors: Array<StandardSchemaV1.Issue>;
   /**
    * A flat map of field path to its first error message.
@@ -148,8 +172,10 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    * Replaces an existing error for the same path, or appends it if none exists.
    * Useful for setting server-side errors after submission.
    */
-  setError: (error: StandardSchemaV1.Issue) => void; /** Replaces all current errors with the provided issues. */
-  setErrors: (errors: Array<StandardSchemaV1.Issue>) => void; /** Removes all active validation errors. */
+  setError: (error: StandardSchemaV1.Issue) => void;
+  /** Replaces all current errors with the provided issues. */
+  setErrors: (errors: Array<StandardSchemaV1.Issue>) => void;
+  /** Removes all active validation errors. */
   clearErrors: () => void;
   /**
    * Returns all validation issues for a specific field path.
@@ -158,7 +184,8 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    * form.getFieldErrors('address.city')
    * ```
    */
-  getFieldErrors: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => Array<StandardSchemaV1.Issue>; /** Whether a validation run is currently in progress. */
+  getFieldErrors: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => Array<StandardSchemaV1.Issue>;
+  /** Whether a validation run is currently in progress. */
   isValidating: Ref<boolean>;
   /**
    * Validates the entire form against the schema.
@@ -169,8 +196,10 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    * Validates a single field against the schema.
    * Only replaces errors for that field — all other fields are left untouched.
    */
-  validateField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => Promise<StandardSchemaV1.Result<StandardSchemaV1.InferOutput<TSchema>>>; /** Whether the form currently has no validation errors. */
-  isValid: ComputedRef<boolean>; /** Whether the form is currently running its submit handler. */
+  validateField: (path: Paths<StandardSchemaV1.InferInput<TSchema>>) => Promise<StandardSchemaV1.Result<StandardSchemaV1.InferOutput<TSchema>>>;
+  /** Whether the form currently has no validation errors. */
+  isValid: ComputedRef<boolean>;
+  /** Whether the form is currently running its submit handler. */
   isSubmitting: Ref<boolean>;
   /**
    * Validates the form and runs `onSubmit` if it passes.
@@ -277,9 +306,13 @@ interface NotArrayFieldItem {
 interface NotArrayFieldSlots<TSchema extends ObjectSchema, TItem = any> {
   /** The default slot receives the full array state and manipulation methods. */
   default: (props: {
-    /** The dot-separated path to this array field. */path: string; /** The array items with stable keys and paths for use with `v-for`. */
-    items: Array<NotArrayFieldItem>; /** All validation issues for this array field from the last validation run. */
-    errors: Array<StandardSchemaV1.Issue>; /** Whether this array field currently has no validation errors. */
+    /** The dot-separated path to this array field. */
+    path: string;
+    /** The array items with stable keys and paths for use with `v-for`. */
+    items: Array<NotArrayFieldItem>;
+    /** All validation issues for this array field from the last validation run. */
+    errors: Array<StandardSchemaV1.Issue>;
+    /** Whether this array field currently has no validation errors. */
     isValid: boolean;
     /**
      * Whether any item in this array has been touched.
@@ -290,7 +323,8 @@ interface NotArrayFieldSlots<TSchema extends ObjectSchema, TItem = any> {
      * Whether any item in this array differs from its initial value.
      * Derived from the form's `dirtyFields` set.
      */
-    isDirty: boolean; /** Whether validation is currently running for this array field. */
+    isDirty: boolean;
+    /** Whether validation is currently running for this array field. */
     isValidating: boolean;
     /**
      * Manually triggers validation for this array field.
@@ -349,10 +383,10 @@ declare const __VLS_export$3: <TSchema extends ObjectSchema, TItemSchema extends
   slots: NotArrayFieldSlots<TSchema, TItem>;
   emit: {};
 }>) => import("vue").VNode & {
-  __ctx?: Awaited<typeof __VLS_setup>;
+  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export$3;
-type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/types/not-field.d.ts
 /** Props for the `NotField` component. */
@@ -416,17 +450,23 @@ interface NotFieldProps {
 interface NotFieldSlots<TSchema extends ObjectSchema> {
   /** The default slot receives the full field state and event handlers. */
   default?: (props: {
-    /** The dot-separated path to this field. */path: string;
+    /** The dot-separated path to this field. */
+    path: string;
     /**
      * The current value of this field — read-only snapshot for display purposes.
      * Do not mutate directly or use with `v-model`.
      * For two-way binding use `v-model="form.values.fieldName"` instead.
      */
-    value: any; /** All validation issues for this field from the last validation run. */
-    errors: Array<StandardSchemaV1.Issue>; /** Whether this field currently has no validation errors. */
-    isValid: boolean; /** Whether the user has interacted with this field, or the form has been submitted. */
-    isTouched: boolean; /** Whether this field's current value differs from its initial value. */
-    isDirty: boolean; /** Whether an async validator is currently running for this field. */
+    value: any;
+    /** All validation issues for this field from the last validation run. */
+    errors: Array<StandardSchemaV1.Issue>;
+    /** Whether this field currently has no validation errors. */
+    isValid: boolean;
+    /** Whether the user has interacted with this field, or the form has been submitted. */
+    isTouched: boolean;
+    /** Whether this field's current value differs from its initial value. */
+    isDirty: boolean;
+    /** Whether an async validator is currently running for this field. */
     isValidating: boolean;
     /**
      * Manually triggers validation for this field.
@@ -448,9 +488,13 @@ interface NotFieldSlots<TSchema extends ObjectSchema> {
      * ```
      */
     events: {
-      /** Triggered when the field loses focus. */onBlur: () => void; /** Triggered on every keystroke or value change. */
-      onInput: () => void; /** Triggered when the field value is committed. */
-      onChange: () => void; /** Triggered when the field gains focus. */
+      /** Triggered when the field loses focus. */
+      onBlur: () => void;
+      /** Triggered on every keystroke or value change. */
+      onInput: () => void;
+      /** Triggered when the field value is committed. */
+      onChange: () => void;
+      /** Triggered when the field gains focus. */
       onFocus: () => void;
     };
   }) => any;
@@ -466,10 +510,10 @@ declare const __VLS_export$2: <TSchema extends ObjectSchema>(__VLS_props: NonNul
   slots: NotFieldSlots<TSchema>;
   emit: {};
 }>) => import("vue").VNode & {
-  __ctx?: Awaited<typeof __VLS_setup>;
+  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default$1: typeof __VLS_export$2;
-type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/components/not-form.vue.d.ts
 type __VLS_Slots$1 = NotFormSlots;
@@ -509,7 +553,8 @@ interface NotMessageProps {
 interface NotMessageSlots {
   /** The default slot receives the error message context for custom rendering */
   default?: (props: {
-    /** The first active validation error message for the specified field */message?: string;
+    /** The first active validation error message for the specified field */
+    message?: string;
   }) => any;
 }
 //#endregion
@@ -535,4 +580,4 @@ type __VLS_WithSlots<T, S> = T & {
  */
 declare function useNotForm<TSchema extends ObjectSchema>(config: UseNotFormConfig<TSchema>): NotFormInstance<TSchema>;
 //#endregion
-export { type DeepPartial, _default as NotArrayField, type NotArrayFieldItem, type NotArrayFieldProps, type NotArrayFieldSlots, _default$1 as NotField, type NotFieldProps, type NotFieldSlots, _default$2 as NotForm, type NotFormInstance, type NotFormProps, type NotFormSlots, _default$3 as NotMessage, type NotMessageProps, type NotMessageSlots, type ObjectSchema, type Paths, type UseNotFormConfig, type ValidationMode, type ValidationTrigger, useNotForm };
+export { type ArrayItemIndexMap, type DeepPartial, _default as NotArrayField, type NotArrayFieldItem, type NotArrayFieldProps, type NotArrayFieldSlots, _default$1 as NotField, type NotFieldProps, type NotFieldSlots, _default$2 as NotForm, type NotFormInstance, type NotFormProps, type NotFormSlots, _default$3 as NotMessage, type NotMessageProps, type NotMessageSlots, type ObjectSchema, type Paths, type Segment, type UseNotFormConfig, type ValidationMode, type ValidationTrigger, useNotForm };

package/dist/index.js

@@ -2,7 +2,137 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createTe
 import { dequal } from "dequal";
 import { deepKeys, deleteProperty, getProperty, hasProperty, parsePath, setProperty } from "dot-prop";
 import { klona } from "klona/full";
-//#region src/utils/instance-utils.ts
+//#region src/utils/form.ts
+/**
+* Normalizes a validation path segment into a standard property key.
+* @param segment The path segment to normalize.
+* @returns The normalized key.
+*/
+function normalizeSegment(segment) {
+	if (typeof segment === "object" && segment !== null && "key" in segment) return segment.key;
+	return segment;
+}
+/**
+* Compares two individual path segments for equality
+* @param firstSegment The first segment to compare.
+* @param secondSegment The second segment to compare.
+* @returns True if the two segments refer to the same object key or array index.
+*/
+function arePathSegmentsEqual(firstSegment, secondSegment) {
+	if (typeof firstSegment === "number" || typeof secondSegment === "number") return Number(firstSegment) === Number(secondSegment);
+	return firstSegment === secondSegment;
+}
+/**
+* Checks if a validation issue path matches a target field path.
+* @param issuePath The path array from the validation issue.
+* @param targetPath The normalized path to compare against.
+* @returns True if the paths are equivalent.
+*/
+function isIssuePathEqual(issuePath, targetPath) {
+	if (!issuePath) return false;
+	if (issuePath.length !== targetPath.length) return false;
+	return issuePath.every((segment, segmentIndex) => {
+		const normalizedSegment = normalizeSegment(segment);
+		const targetSegment = targetPath[segmentIndex];
+		return arePathSegmentsEqual(normalizedSegment, targetSegment);
+	});
+}
+//#endregion
+//#region src/utils/array-field.ts
+/**
+* Finds where a path sits inside an array field, if at all.
+* @param pathSegments The full path segments to test, e.g. the parsed segments of `"tags.1.label"`.
+* @param arrayFieldPathSegments The parsed path segments of the array field itself, e.g. the segments of `"tags"`.
+* @returns The item's index and any trailing segments, or undefined if the path isn't inside this array.
+*/
+function getArrayItemLocation(pathSegments, arrayFieldPathSegments) {
+	if (pathSegments.length <= arrayFieldPathSegments.length) return;
+	for (const [segmentIndex, arrayFieldPathSegment] of arrayFieldPathSegments.entries()) if (!arePathSegmentsEqual(pathSegments[segmentIndex], arrayFieldPathSegment)) return;
+	const itemIndex = Number(pathSegments[arrayFieldPathSegments.length]);
+	if (Number.isNaN(itemIndex)) return;
+	return {
+		itemIndex,
+		remainingSegments: pathSegments.slice(arrayFieldPathSegments.length + 1)
+	};
+}
+/**
+* Rebuilds a dot-separated path from an array field's path, an item index, and any trailing segments.
+* @param arrayFieldPath The array field's dot-separated path, e.g. `"tags"`.
+* @param itemIndex The item's index within the array.
+* @param remainingSegments Segments after the index, e.g. `['label']` for a nested field.
+* @returns The reconstructed path, e.g. `"tags.0.label"`.
+*/
+function buildArrayItemPath(arrayFieldPath, itemIndex, remainingSegments) {
+	return [
+		arrayFieldPath,
+		itemIndex,
+		...remainingSegments
+	].join(".");
+}
+/**
+* Relocates or drops `form.errors` entries that belong to an item that moved or was removed.
+* Errors on the array field itself (no index segment) are left untouched.
+* @param form The form instance whose errors should be remapped.
+* @param arrayFieldPathSegments The parsed path segments of the array field.
+* @param arrayItemIndexMap Maps each previous item index to its new index, or undefined if removed.
+*/
+function remapArrayFieldErrors(form, arrayFieldPathSegments, arrayItemIndexMap) {
+	for (let errorIndex = form.errors.length - 1; errorIndex >= 0; errorIndex--) {
+		const issue = form.errors[errorIndex];
+		if (issue.path) {
+			const itemLocation = getArrayItemLocation(issue.path.map((segment) => normalizeSegment(segment)), arrayFieldPathSegments);
+			if (itemLocation) {
+				const newItemIndex = arrayItemIndexMap(itemLocation.itemIndex);
+				if (typeof newItemIndex === "number") form.errors[errorIndex] = {
+					...issue,
+					path: [
+						...arrayFieldPathSegments,
+						newItemIndex,
+						...itemLocation.remainingSegments
+					]
+				};
+				else form.errors.splice(errorIndex, 1);
+			}
+		}
+	}
+}
+/**
+* Relocates or drops entries in a `touchedFields`/`dirtyFields` set that belong to an item that moved or was removed.
+* @param fieldPathSet The reactive set of field paths to remap.
+* @param arrayFieldPath The dot-separated path of the array field.
+* @param arrayFieldPathSegments The parsed path segments of the array field.
+* @param arrayItemIndexMap Maps each previous item index to its new index, or undefined if removed.
+*/
+function remapArrayFieldPathSet(fieldPathSet, arrayFieldPath, arrayFieldPathSegments, arrayItemIndexMap) {
+	const pathsToRemove = [];
+	const pathsToAdd = [];
+	for (const fieldPath of fieldPathSet) {
+		const itemLocation = getArrayItemLocation(parsePath(fieldPath), arrayFieldPathSegments);
+		if (itemLocation) {
+			pathsToRemove.push(fieldPath);
+			const newItemIndex = arrayItemIndexMap(itemLocation.itemIndex);
+			if (typeof newItemIndex === "number") pathsToAdd.push(buildArrayItemPath(arrayFieldPath, newItemIndex, itemLocation.remainingSegments));
+		}
+	}
+	for (const fieldPath of pathsToRemove) fieldPathSet.delete(fieldPath);
+	for (const fieldPath of pathsToAdd) fieldPathSet.add(fieldPath);
+}
+/**
+* Keeps an array field's errors, touched paths, and dirty paths attached to the item they
+* describe, rather than the array slot that item happened to occupy. Call before applying
+* the mutation to `form.values`.
+* @param form The form instance whose error, touched, and dirty state should be remapped.
+* @param arrayFieldPath The dot-separated path of the array field being mutated, e.g. `"tags"`.
+* @param arrayItemIndexMap Maps each previous item index to its new index, or undefined if removed.
+*/
+function remapArrayFieldState(form, arrayFieldPath, arrayItemIndexMap) {
+	const arrayFieldPathSegments = parsePath(arrayFieldPath);
+	remapArrayFieldErrors(form, arrayFieldPathSegments, arrayItemIndexMap);
+	remapArrayFieldPathSet(form.touchedFields, arrayFieldPath, arrayFieldPathSegments, arrayItemIndexMap);
+	remapArrayFieldPathSet(form.dirtyFields, arrayFieldPath, arrayFieldPathSegments, arrayItemIndexMap);
+}
+//#endregion
+//#region src/utils/instance.ts
 /** The injection key for the NotForm instance. */
 const NOT_FORM_INSTANCE_KEY = Symbol("notform:instance");
 /**
@@ -137,6 +267,7 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		*/
 		function prepend(value) {
 			itemKeys.value.unshift(generateKey());
+			remapArrayFieldState(form, props.path, (previousIndex) => previousIndex + 1);
 			mutate((current) => current.unshift(value));
 		}
 		/**
@@ -145,6 +276,10 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		*/
 		function remove(index) {
 			itemKeys.value.splice(index, 1);
+			remapArrayFieldState(form, props.path, (previousIndex) => {
+				if (previousIndex === index) return;
+				return previousIndex > index ? previousIndex - 1 : previousIndex;
+			});
 			mutate((current) => current.splice(index, 1));
 		}
 		/**
@@ -154,6 +289,10 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		*/
 		function insert(index, value) {
 			itemKeys.value.splice(index, 0, generateKey());
+			remapArrayFieldState(form, props.path, (previousIndex) => {
+				if (previousIndex >= index) return previousIndex + 1;
+				return previousIndex;
+			});
 			mutate((current) => current.splice(index, 0, value));
 		}
 		/**
@@ -172,13 +311,18 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		* @param indexB The second index
 		*/
 		function swap(indexA, indexB) {
-			const tempKey = itemKeys.value[indexA];
+			const temporaryKey = itemKeys.value[indexA];
 			itemKeys.value[indexA] = itemKeys.value[indexB];
-			itemKeys.value[indexB] = tempKey;
+			itemKeys.value[indexB] = temporaryKey;
+			remapArrayFieldState(form, props.path, (previousIndex) => {
+				if (previousIndex === indexA) return indexB;
+				if (previousIndex === indexB) return indexA;
+				return previousIndex;
+			});
 			mutate((current) => {
-				const temp = current[indexA];
+				const temporaryValue = current[indexA];
 				current[indexA] = current[indexB];
-				current[indexB] = temp;
+				current[indexB] = temporaryValue;
 			});
 		}
 		/**
@@ -187,11 +331,20 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		* @param to The destination index
 		*/
 		function move(from, to) {
-			const [key] = itemKeys.value.splice(from, 1);
-			itemKeys.value.splice(to, 0, key);
+			const [movedItemKey] = itemKeys.value.splice(from, 1);
+			itemKeys.value.splice(to, 0, movedItemKey);
+			remapArrayFieldState(form, props.path, (previousIndex) => {
+				if (previousIndex === from) return to;
+				if (from < to) {
+					if (previousIndex > from && previousIndex <= to) return previousIndex - 1;
+					return previousIndex;
+				}
+				if (previousIndex >= to && previousIndex < from) return previousIndex + 1;
+				return previousIndex;
+			});
 			mutate((current) => {
-				const [item] = current.splice(from, 1);
-				current.splice(to, 0, item);
+				const [movedItem] = current.splice(from, 1);
+				current.splice(to, 0, movedItem);
 			});
 		}
 		onMounted(async () => {
@@ -301,13 +454,13 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 		function onInput() {
 			updateDirty();
 			if (!validateOn.value.onInput) return;
-			if (form.validationMode.eager && !isValid.value) scheduleValidation();
+			if (form.validationMode === "eager" && !isValid.value) scheduleValidation();
 		}
 		/** Handles the change event for the field. */
 		function onChange() {
 			updateDirty();
 			if (!validateOn.value.onChange) return;
-			if (form.validationMode.eager && !isValid.value) scheduleValidation();
+			if (form.validationMode === "eager" && !isValid.value) scheduleValidation();
 		}
 		/** Handles the focus event for the field. */
 		function onFocus() {
@@ -388,33 +541,6 @@ var not_message_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/utils/form-utils.ts
-/**
-* Normalizes a validation path segment into a standard property key.
-* @param segment The path segment to normalize.
-* @returns The normalized key.
-*/
-function normalizeSegment(segment) {
-	if (typeof segment === "object" && segment !== null && "key" in segment) return segment.key;
-	return segment;
-}
-/**
-* Checks if a validation issue path matches a target field path.
-* @param issuePath The path array from the validation issue.
-* @param targetPath The normalized path to compare against.
-* @returns True if the paths are equivalent.
-*/
-function isIssuePathEqual(issuePath, targetPath) {
-	if (!issuePath) return false;
-	if (issuePath.length !== targetPath.length) return false;
-	return issuePath.every((segment, index) => {
-		const normalizedSegment = normalizeSegment(segment);
-		const targetSegment = targetPath[index];
-		if (typeof normalizedSegment === "number" || typeof targetSegment === "number") return Number(normalizedSegment) === Number(targetSegment);
-		return normalizedSegment === targetSegment;
-	});
-}
-//#endregion
 //#region src/composables/use-not-form.ts
 /**
 * Creates a reactive NotFormInstance for managing form state and validation.
@@ -432,10 +558,7 @@ function useNotForm(config) {
 		onInput: config.validateOn?.onInput ?? true,
 		onMount: config.validateOn?.onMount ?? false
 	};
-	const validationMode = {
-		eager: config.validationMode?.eager ?? true,
-		lazy: config.validationMode?.lazy ?? false
-	};
+	const validationMode = config.validationMode || "eager";
 	const values = reactive(klona(initialValues));
 	const errors = reactive([...initialErrors]);
 	const touchedFields = reactive(/* @__PURE__ */ new Set());
@@ -590,7 +713,7 @@ function useNotForm(config) {
 			const pathSegments = parsePath(path);
 			const staleIndices = [];
 			for (const [index, error] of errors.entries()) if (isIssuePathEqual(error.path, pathSegments)) staleIndices.push(index);
-			for (let i = staleIndices.length - 1; i >= 0; i--) errors.splice(staleIndices[i], 1);
+			for (let index = staleIndices.length - 1; index >= 0; index--) errors.splice(staleIndices[index], 1);
 			if (result?.issues) {
 				const fieldIssues = result.issues.filter((issue) => isIssuePathEqual(issue.path, pathSegments));
 				if (fieldIssues.length > 0) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "notform",
   "type": "module",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "private": false,
   "description": "Vue Forms Without the Friction",
   "author": "Favour Emeka <favorodera@gmail.com>",
@@ -45,22 +45,22 @@
   "dependencies": {
     "@standard-schema/spec": "^1.1.0",
     "dequal": "^2.0.3",
-    "dot-prop": "^10.1.0",
+    "dot-prop": "^10.2.0",
     "klona": "^2.0.6"
   },
   "devDependencies": {
-    "@favorodera/eslint-config": "^0.1.4",
-    "@types/node": "^25.6.0",
-    "@vitejs/plugin-vue": "^6.0.6",
-    "@vitest/ui": "^4.1.4",
-    "@vue/test-utils": "^2.4.6",
-    "happy-dom": "^20.10.6",
-    "tsdown": "^0.22.2",
-    "type-fest": "^5.5.0",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8",
-    "vue": "^3.5.34",
-    "vue-tsc": "^3.3.5"
+    "@favorodera/eslint-config": "^1.0.4",
+    "@types/node": "^26.1.2",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitest/ui": "^4.1.10",
+    "@vue/test-utils": "^2.4.11",
+    "happy-dom": "^20.11.1",
+    "tsdown": "^0.22.14",
+    "type-fest": "^5.7.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10",
+    "vue": "^3.0.0",
+    "vue-tsc": "^3.3.9"
   },
   "scripts": {
     "build": "tsdown",