notform 2.1.2 → 2.2.0

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

@@ -44,6 +44,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 +81,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.
@@ -349,7 +366,7 @@ 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] }) & {};
@@ -466,7 +483,7 @@ 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] }) & {};
@@ -535,4 +552,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.2",
+  "version": "2.2.0",
   "private": false,
   "description": "Vue Forms Without the Friction",
   "author": "Favour Emeka <favorodera@gmail.com>",
@@ -49,18 +49,18 @@
     "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",
+    "@favorodera/eslint-config": "^1.0.3",
+    "@types/node": "^26.1.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/ui": "^4.1.9",
+    "@vue/test-utils": "^2.4.11",
     "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"
+    "tsdown": "^0.22.3",
+    "type-fest": "^5.7.0",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.39",
+    "vue-tsc": "^3.3.6"
   },
   "scripts": {
     "build": "tsdown",