notform 2.1.0 → 2.1.2

package/dist/index.js

@@ -1,263 +1,13 @@
-import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, guardReactiveProps, inject, markRaw, mergeProps, nextTick, normalizeProps, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useAttrs, watch, withCtx } from "vue";
-import { klona } from "klona/full";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, inject, markRaw, mergeProps, nextTick, normalizeProps, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, toValue, watch, withCtx } from "vue";
 import { dequal } from "dequal";
 import { deepKeys, deleteProperty, getProperty, hasProperty, parsePath, setProperty } from "dot-prop";
-//#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
-function useNotForm(config) {
-	/** Runs the schema against the current values and returns the raw result. */
-	const runSchema = () => {
-		return toValue(config.schema)["~standard"].validate(values);
-	};
-	/**
-	* Marks all current leaf paths as touched.
-	* Called internally on submit so all field errors surface at once.
-	*/
-	const touchAllFields = () => {
-		deepKeys(values).forEach((path) => touchedFields.add(path));
-	};
-	/**
-	* Marks all current leaf paths as dirty.
-	* Called internally on submit so required-field errors are not suppressed.
-	*/
-	const dirtyAllFields = () => {
-		deepKeys(values).forEach((path) => dirtyFields.add(path));
-	};
-	/** Removes a path from the dirty set without exposing the operation publicly. */
-	const unDirtyField = (path) => {
-		dirtyFields.delete(path);
-	};
-	/**
-	* Mutable so `reset()` can replace the reference when new values are provided.
-	* Always deep-cloned to prevent external mutation from affecting the baseline.
-	*
-	* These are intentionally `let` — `reset()` replaces them, and the instance
-	* exposes them via getters so consumers always read the current snapshot.
-	* The `readonly` modifier on the type prevents external assignment while still
-	* allowing the getter to return the latest value after a reset.
-	*/
-	let initialValues = klona(config.initialValues ?? {});
-	let initialErrors = klona(config.initialErrors ?? []);
-	const validateOn = {
-		onBlur: config.validateOn?.onBlur ?? true,
-		onChange: config.validateOn?.onChange ?? true,
-		onInput: config.validateOn?.onInput ?? true,
-		onMount: config.validateOn?.onMount ?? false,
-		onFocus: config.validateOn?.onFocus ?? false
-	};
-	const validationMode = {
-		eager: config.validationMode?.eager ?? true,
-		lazy: config.validationMode?.lazy ?? false
-	};
-	/**
-	* Deeply reactive object — access directly as `form.values.email`.
-	* Using `reactive()` instead of `ref()` keeps behaviour consistent
-	* across components, composables, and Pinia stores (which auto-unwrap refs).
-	*/
-	const values = reactive(klona(initialValues));
-	/**
-	* Reactive array mutated in-place to preserve reactivity.
-	* Using `reactive()` instead of `ref()` prevents Pinia from unwrapping
-	* the array and losing its reactive proxy.
-	*/
-	const errors = reactive([...initialErrors]);
-	const isSubmitting = ref(false);
-	const isValidating = ref(false);
-	/**
-	* Counter-based validation tracking.
-	*
-	* A boolean flag flips to `false` as soon as the first concurrent
-	* validation resolves, even if others are still running.
-	* A counter fixes this: `isValidating` stays `true` until every
-	* in-flight call has settled.
-	*/
-	let validatingCount = 0;
-	/** Increments the validation counter and sets `isValidating` to true. */
-	const beginValidating = () => {
-		validatingCount++;
-		isValidating.value = true;
-	};
-	/** Decrements the validation counter and sets `isValidating` to false if the counter reaches zero. */
-	const endValidating = () => {
-		validatingCount--;
-		if (validatingCount === 0) isValidating.value = false;
-	};
-	/**
-	* Reactive Sets using `reactive()` for the same Pinia-compatibility reason
-	* as `errors` above — `ref(new Set())` would be unwrapped to a plain Set.
-	*/
-	const touchedFields = reactive(/* @__PURE__ */ new Set());
-	const dirtyFields = reactive(/* @__PURE__ */ new Set());
-	const isValid = computed(() => errors.length === 0);
-	const isDirty = computed(() => dirtyFields.size > 0);
-	const isTouched = computed(() => touchedFields.size > 0);
-	const errorsMap = computed(() => {
-		return errors.reduce((errorsByPath, issue) => {
-			if (!issue.path) return errorsByPath;
-			const path = issue.path.map(normalizeSegment).join(".");
-			if (path && !errorsByPath[path]) errorsByPath[path] = issue.message;
-			return errorsByPath;
-		}, {});
-	});
-	const setValue = (path, value) => {
-		setProperty(values, path, value);
-		if (dequal(value, getProperty(initialValues, path))) unDirtyField(path);
-		else dirtyField(path);
-	};
-	const touchField = (path) => {
-		touchedFields.add(path);
-	};
-	const dirtyField = (path) => {
-		dirtyFields.add(path);
-	};
-	const setError = (newIssue) => {
-		const newPath = newIssue.path?.map(normalizeSegment).join(".");
-		const existingIndex = errors.findIndex((error) => error.path?.map(normalizeSegment).join(".") === newPath);
-		if (existingIndex !== -1) errors.splice(existingIndex, 1, newIssue);
-		else errors.push(newIssue);
-	};
-	const setErrors = (newIssues) => {
-		errors.splice(0, errors.length, ...newIssues);
-	};
-	const clearErrors = () => {
-		errors.splice(0, errors.length);
-	};
-	const getFieldErrors = (path) => {
-		const pathSegments = parsePath(path);
-		return errors.filter((error) => isIssuePathEqual(error.path, pathSegments));
-	};
-	const validate = async () => {
-		beginValidating();
-		try {
-			const result = await runSchema();
-			if (result?.issues) {
-				setErrors([...result.issues]);
-				return { issues: result.issues };
-			}
-			clearErrors();
-			return { value: result.value };
-		} finally {
-			endValidating();
-		}
-	};
-	const validateField = async (path) => {
-		beginValidating();
-		try {
-			const result = await runSchema();
-			const pathSegments = parsePath(path);
-			const staleIndices = errors.reduce((indices, error, index) => {
-				if (isIssuePathEqual(error.path, pathSegments)) indices.push(index);
-				return indices;
-			}, []);
-			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) {
-					errors.push(...fieldIssues);
-					return { issues: fieldIssues };
-				}
-				return { value: getProperty(values, path) };
-			}
-			return { value: getProperty(result.value, path) };
-		} finally {
-			endValidating();
-		}
-	};
-	const submit = async (event) => {
-		isSubmitting.value = true;
-		try {
-			touchAllFields();
-			dirtyAllFields();
-			const result = await validate();
-			if (result?.issues) {
-				event.preventDefault();
-				return;
-			}
-			if (config.onSubmit) {
-				event.preventDefault();
-				await config.onSubmit(result.value);
-			}
-		} catch {
-			event.preventDefault();
-		} finally {
-			isSubmitting.value = false;
-		}
-	};
-	const reset = (newValues, newErrors) => {
-		if (newValues) initialValues = klona(newValues);
-		if (newErrors) initialErrors = klona(newErrors);
-		const freshValues = klona(initialValues);
-		const current = values;
-		for (const key of Object.keys(current)) if (!hasProperty(freshValues, key)) deleteProperty(values, key);
-		for (const key of Object.keys(freshValues)) setProperty(values, key, getProperty(freshValues, key));
-		errors.splice(0, errors.length, ...klona(initialErrors));
-		touchedFields.clear();
-		dirtyFields.clear();
-	};
-	return markRaw({
-		get initialValues() {
-			return initialValues;
-		},
-		get initialErrors() {
-			return initialErrors;
-		},
-		validateOn,
-		validationMode,
-		values,
-		setValue,
-		touchedFields,
-		touchField,
-		isTouched,
-		dirtyFields,
-		dirtyField,
-		isDirty,
-		errors,
-		errorsMap,
-		setError,
-		setErrors,
-		clearErrors,
-		getFieldErrors,
-		isValidating,
-		validate,
-		validateField,
-		isValid,
-		isSubmitting,
-		submit,
-		reset
-	});
-}
-//#endregion
+import { klona } from "klona/full";
 //#region src/utils/instance-utils.ts
 /** The injection key for the NotForm instance. */
 const NOT_FORM_INSTANCE_KEY = Symbol("notform:instance");
 /**
 * Provides the NotForm instance to the component tree.
+* @template TSchema The validation object schema.
 * @param instance The NotForm instance to provide.
 */
 function provideNotFormInstance(instance) {
@@ -265,6 +15,7 @@ function provideNotFormInstance(instance) {
 }
 /**
 * Retrieves the NotForm instance from the component tree.
+* @template TSchema The form schema.
 * @param explicitInstance Optional explicit instance to use.
 * @returns The NotForm instance.
 */
@@ -278,31 +29,18 @@ function useNotFormInstance(explicitInstance) {
 	return instance;
 }
 //#endregion
-//#region src/components/not-form.vue
-var not_form_default = /* @__PURE__ */ defineComponent({
-	__name: "not-form",
-	props: { form: {
-		type: null,
-		required: true
-	} },
-	setup(__props) {
-		const attributes = useAttrs();
-		provideNotFormInstance(__props.form);
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("form", normalizeProps(guardReactiveProps(unref(attributes))), [renderSlot(_ctx.$slots, "default")], 16);
-		};
-	}
-});
-//#endregion
-//#region src/components/not-field.vue
-var not_field_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "not-field",
+//#region src/components/not-array-field.vue
+var not_array_field_default = /* @__PURE__ */ defineComponent({
+	__name: "not-array-field",
 	props: {
 		path: {
 			type: String,
 			required: true
 		},
+		itemSchema: {
+			type: null,
+			required: false
+		},
 		form: {
 			type: null,
 			required: false
@@ -310,167 +48,187 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 		validateOn: {
 			type: Object,
 			required: false
-		},
-		debounce: {
-			type: Number,
-			required: false
 		}
 	},
 	setup(__props) {
 		const props = __props;
 		const form = useNotFormInstance(props.form);
+		const isValidating = ref(false);
+		/** Counter to ensure absolute uniqueness for generated keys. */
+		let keyCounter = 0;
+		/** Stable keys per item that survive reorders, removals, and inserts. */
+		const itemKeys = ref((() => {
+			const initial = getProperty(form.values, props.path);
+			const length = Array.isArray(initial) ? initial.length : 0;
+			return Array.from({ length }, () => `${props.path}-${keyCounter++}`);
+		})());
 		const validateOn = computed(() => ({
-			...form.validateOn,
-			...props.validateOn
+			onChange: props.validateOn?.onChange ?? form.validateOn.onChange,
+			onMount: props.validateOn?.onMount ?? form.validateOn.onMount
 		}));
-		const isValidating = ref(false);
-		/** Timer handle for the current pending debounced validation, if any. */
-		let debounceTimer;
-		/**
-		* Cancels any pending debounced validation without running it.
-		* Called on blur (so blur's own immediate validation takes over) and on unmount
-		* (to prevent a timer from firing after the component is gone).
-		*/
-		const clearDebounce = () => {
-			if (debounceTimer !== void 0) {
-				clearTimeout(debounceTimer);
-				debounceTimer = void 0;
-			}
-		};
-		/**
-		* Schedules a validation run, respecting the field's `debounce` prop.
-		*
-		* - If `debounce` is `0` or omitted, validation runs synchronously.
-		* - Otherwise, any pending timer is cancelled and a new one is started.
-		*   Only the final call within the window actually validates — useful for
-		*   async checks (availability lookups, server-side rules) where firing on
-		*   every keystroke would be wasteful.
-		*/
-		const scheduleValidation = () => {
-			if (!props.debounce) {
-				validate();
-				return;
-			}
-			clearDebounce();
-			debounceTimer = setTimeout(validate, props.debounce);
-		};
-		const value = computed(() => getProperty(form.values, props.path));
+		const array = computed(() => {
+			const value = getProperty(form.values, props.path);
+			return Array.isArray(value) ? value : [];
+		});
+		const items = computed(() => {
+			return array.value.map((_, index) => ({
+				index,
+				key: itemKeys.value[index] ?? `${props.path}-fallback-${index}`,
+				path: `${props.path}.${index}`
+			}));
+		});
 		const errors = computed(() => form.getFieldErrors(props.path));
 		const isValid = computed(() => errors.value.length === 0);
-		const isTouched = computed(() => form.touchedFields.has(props.path));
-		const isDirty = computed(() => form.dirtyFields.has(props.path));
+		const isTouched = computed(() => {
+			return form.touchedFields.has(props.path) || [...form.touchedFields].some((path) => path.startsWith(`${props.path}.`));
+		});
+		const isDirty = computed(() => {
+			return form.dirtyFields.has(props.path) || [...form.dirtyFields].some((path) => path.startsWith(`${props.path}.`));
+		});
 		/**
-		* Syncs dirty state on input or change.
-		* Reads the already-updated value (v-model writes before the event fires)
-		* and compares it against the field's initial value.
+		* Generates a unique key string using the field path and counter.
+		* @returns A unique key string
 		*/
-		const updateDirty = () => {
-			if (dequal(value.value, getProperty(form.initialValues, props.path))) form.dirtyFields.delete(props.path);
-			else form.dirtyField(props.path);
-		};
-		const validate = async () => {
-			isValidating.value = true;
-			try {
-				return await form.validateField(props.path);
-			} finally {
+		function generateKey() {
+			return `${props.path}-${keyCounter++}`;
+		}
+		/** Re-aligns itemKeys with current array length (used mostly after external resets) */
+		function syncKeys() {
+			const arrayLength = array.value.length;
+			if (itemKeys.value.length > arrayLength) itemKeys.value.length = arrayLength;
+			else while (itemKeys.value.length < arrayLength) itemKeys.value.push(generateKey());
+		}
+		/**
+		* Applies an array update, syncs form dirty/touched state, and triggers validation.
+		* @param updater Function that modifies the array
+		*/
+		function mutate(updater) {
+			const current = [...array.value];
+			updater(current);
+			setProperty(form.values, props.path, current);
+			form.touchField(props.path);
+			if (dequal(current, getProperty(form.initialValues, props.path))) form.dirtyFields.delete(props.path);
+			else form.dirtyField(props.path);
+			if (validateOn.value.onChange) validate();
+		}
+		/**
+		* Validates the array field
+		* @returns Promise that resolves to the validation result
+		*/
+		async function validate() {
+			isValidating.value = true;
+			try {
+				return await form.validateField(props.path);
+			} finally {
 				isValidating.value = false;
 			}
-		};
-		const onBlur = () => {
-			clearDebounce();
-			form.touchField(props.path);
-			if (validateOn.value.onBlur) validate();
-		};
-		const onInput = () => {
-			updateDirty();
-			if (!validateOn.value.onInput) return;
-			if (form.validationMode.eager && !isValid.value) scheduleValidation();
-		};
-		const onChange = () => {
-			updateDirty();
-			if (!validateOn.value.onChange) return;
-			if (form.validationMode.eager && !isValid.value) scheduleValidation();
-		};
-		const onFocus = () => {
-			if (validateOn.value.onFocus) scheduleValidation();
-		};
+		}
+		/**
+		* Appends an item to the array
+		* @param value The value to append
+		*/
+		function append(value) {
+			itemKeys.value.push(generateKey());
+			mutate((current) => current.push(value));
+		}
+		/**
+		* Prepends an item to the array
+		* @param value The value to prepend
+		*/
+		function prepend(value) {
+			itemKeys.value.unshift(generateKey());
+			mutate((current) => current.unshift(value));
+		}
+		/**
+		* Removes an item from the array
+		* @param index The index of the item to remove
+		*/
+		function remove(index) {
+			itemKeys.value.splice(index, 1);
+			mutate((current) => current.splice(index, 1));
+		}
+		/**
+		* Inserts an item at a specific index
+		* @param index The index to insert at
+		* @param value The value to insert
+		*/
+		function insert(index, value) {
+			itemKeys.value.splice(index, 0, generateKey());
+			mutate((current) => current.splice(index, 0, value));
+		}
+		/**
+		* Updates an item at a specific index
+		* @param index The index to update
+		* @param value The new value
+		*/
+		function update(index, value) {
+			mutate((current) => {
+				current[index] = value;
+			});
+		}
+		/**
+		* Swaps two items in the array
+		* @param indexA The first index
+		* @param indexB The second index
+		*/
+		function swap(indexA, indexB) {
+			const tempKey = itemKeys.value[indexA];
+			itemKeys.value[indexA] = itemKeys.value[indexB];
+			itemKeys.value[indexB] = tempKey;
+			mutate((current) => {
+				const temp = current[indexA];
+				current[indexA] = current[indexB];
+				current[indexB] = temp;
+			});
+		}
+		/**
+		* Moves an item from one index to another
+		* @param from The source index
+		* @param to The destination index
+		*/
+		function move(from, to) {
+			const [key] = itemKeys.value.splice(from, 1);
+			itemKeys.value.splice(to, 0, key);
+			mutate((current) => {
+				const [item] = current.splice(from, 1);
+				current.splice(to, 0, item);
+			});
+		}
 		onMounted(async () => {
 			await nextTick();
 			if (validateOn.value.onMount) validate();
 		});
-		onUnmounted(clearDebounce);
-		const slotProps = computed(() => ({
-			path: props.path,
-			value: value.value,
-			errors: errors.value,
-			isValid: isValid.value,
-			isTouched: isTouched.value,
-			isDirty: isDirty.value,
-			isValidating: isValidating.value,
-			validate,
-			events: {
-				onBlur,
-				onInput,
-				onChange,
-				onFocus
-			}
-		}));
+		watch(() => array.value.length, syncKeys);
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
+			return renderSlot(_ctx.$slots, "default", {
+				append,
+				errors: errors.value,
+				insert,
+				isDirty: isDirty.value,
+				isTouched: isTouched.value,
+				isValid: isValid.value,
+				isValidating: isValidating.value,
+				items: items.value,
+				move,
+				path: __props.path,
+				prepend,
+				remove,
+				swap,
+				update,
+				validate
+			});
 		};
 	}
 });
 //#endregion
-//#region src/components/not-message.vue
-var not_message_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "not-message",
+//#region src/components/not-field.vue
+var not_field_default = /* @__PURE__ */ defineComponent({
+	__name: "not-field",
 	props: {
 		path: {
 			type: String,
 			required: true
 		},
-		as: {
-			type: String,
-			required: false,
-			default: "span"
-		},
-		form: {
-			type: null,
-			required: false
-		}
-	},
-	setup(__props) {
-		const attributes = useAttrs();
-		const props = __props;
-		const form = useNotFormInstance(props.form);
-		const message = computed(() => form.errorsMap.value[props.path]);
-		const slotProps = computed(() => ({
-			message: message.value,
-			attributes
-		}));
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), () => [message.value ? (openBlock(), createBlock(resolveDynamicComponent(props.as), normalizeProps(mergeProps({ key: 0 }, unref(attributes))), {
-				default: withCtx(() => [createTextVNode(toDisplayString(message.value), 1)]),
-				_: 1
-			}, 16)) : createCommentVNode("v-if", true)]);
-		};
-	}
-});
-//#endregion
-//#region src/components/not-array-field.vue
-var not_array_field_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "not-array-field",
-	props: {
-		path: {
-			type: String,
-			required: true
-		},
-		itemSchema: {
-			type: null,
-			required: false
-		},
 		form: {
 			type: null,
 			required: false
@@ -478,147 +236,444 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		validateOn: {
 			type: Object,
 			required: false
+		},
+		debounce: {
+			type: Number,
+			required: false
 		}
 	},
 	setup(__props) {
 		const props = __props;
 		const form = useNotFormInstance(props.form);
+		const isValidating = ref(false);
+		/** Timer handle for the current pending debounced validation. */
+		let debounceTimer;
+		/** Merges per-field overrides with the form-wide validation config */
 		const validateOn = computed(() => ({
-			onMount: props.validateOn?.onMount ?? form.validateOn.onMount,
-			onChange: props.validateOn?.onChange ?? form.validateOn.onChange
+			...form.validateOn,
+			...props.validateOn
 		}));
-		const isValidating = ref(false);
-		/**
-		* Stable keys per item — survive reorders, removals, and inserts.
-		* Seeded from the length of the initial array so existing items have keys from the start.
-		*/
-		const itemKeys = ref((() => {
-			const initial = getProperty(form.values, props.path);
-			const length = Array.isArray(initial) ? initial.length : 0;
-			return Array.from({ length }, (_, index) => `${props.path}-${index}-${Date.now()}`);
-		})());
-		let keyCounter = itemKeys.value.length;
-		const generateKey = () => `${props.path}-${keyCounter++}-${Date.now()}`;
-		const array = computed(() => {
-			const value = getProperty(form.values, props.path);
-			return Array.isArray(value) ? value : [];
-		});
-		const items = computed(() => array.value.map((_, index) => ({
-			key: itemKeys.value[index] ?? `${props.path}-fallback-${index}`,
-			index,
-			path: `${props.path}.${index}`
-		})));
+		const value = computed(() => getProperty(form.values, props.path));
 		const errors = computed(() => form.getFieldErrors(props.path));
 		const isValid = computed(() => errors.value.length === 0);
+		const isTouched = computed(() => form.touchedFields.has(props.path));
+		const isDirty = computed(() => form.dirtyFields.has(props.path));
+		/** Cancels pending debounced validation on blur/unmount to prevent rogue execution. */
+		function clearDebounce() {
+			if (debounceTimer !== void 0) {
+				clearTimeout(debounceTimer);
+				debounceTimer = void 0;
+			}
+		}
+		/** Compares current value against baseline to sync dirty state tracking. */
+		function updateDirty() {
+			if (dequal(value.value, getProperty(form.initialValues, props.path))) form.dirtyFields.delete(props.path);
+			else form.dirtyField(props.path);
+		}
+		/** Replaces pending validations with a new timer, or runs synchronously if no debounce. */
+		function scheduleValidation() {
+			if (!props.debounce) {
+				validate();
+				return;
+			}
+			clearDebounce();
+			debounceTimer = setTimeout(validate, props.debounce);
+		}
 		/**
-		* Derived from the form's touchedFields set.
-		* True if the array path itself or any of its item paths have been touched.
-		*/
-		const isTouched = computed(() => form.touchedFields.has(props.path) || [...form.touchedFields].some((path) => path.startsWith(`${props.path}.`)));
-		/**
-		* Derived from the form's dirtyFields set.
-		* True if the array path itself or any of its item paths are dirty.
+		* Validates the field and returns the validation result.
+		* @returns A promise that resolves to the validation result.
 		*/
-		const isDirty = computed(() => form.dirtyFields.has(props.path) || [...form.dirtyFields].some((path) => path.startsWith(`${props.path}.`)));
-		const validate = async () => {
+		async function validate() {
 			isValidating.value = true;
 			try {
 				return await form.validateField(props.path);
 			} finally {
 				isValidating.value = false;
 			}
-		};
-		/** Re-aligns itemKeys with the current array length. */
-		const syncKeys = () => {
-			const arrayLength = array.value.length;
-			if (itemKeys.value.length > arrayLength) itemKeys.value.length = arrayLength;
-			else while (itemKeys.value.length < arrayLength) itemKeys.value.push(generateKey());
-		};
-		/**
-		* Applies an update to a copy of the current array, writes it back to the form values,
-		* and marks the array path as touched. Dirty state is derived from the form's Sets
-		* automatically via the computed above so no explicit dirty call is needed here.
-		*/
-		const mutate = (updater) => {
-			const current = [...array.value];
-			updater(current);
-			setProperty(form.values, props.path, current);
+		}
+		/** Handles the blur event for the field. */
+		function onBlur() {
+			clearDebounce();
 			form.touchField(props.path);
-			if (dequal(current, getProperty(form.initialValues, props.path))) form.dirtyFields.delete(props.path);
-			else form.dirtyField(props.path);
-			if (validateOn.value.onChange) validate();
-		};
-		const append = (value) => {
-			itemKeys.value.push(generateKey());
-			mutate((current) => current.push(value));
-		};
-		const prepend = (value) => {
-			itemKeys.value.unshift(generateKey());
-			mutate((current) => current.unshift(value));
-		};
-		const remove = (index) => {
-			mutate((current) => current.splice(index, 1));
-			itemKeys.value.splice(index, 1);
-		};
-		const insert = (index, value) => {
-			itemKeys.value.splice(index, 0, generateKey());
-			mutate((current) => current.splice(index, 0, value));
-		};
-		const update = (index, value) => {
-			mutate((current) => {
-				current[index] = value;
-			});
-		};
-		const swap = (indexA, indexB) => {
-			mutate((current) => {
-				[current[indexA], current[indexB]] = [current[indexB], current[indexA]];
-			});
-			[itemKeys.value[indexA], itemKeys.value[indexB]] = [itemKeys.value[indexB], itemKeys.value[indexA]];
-		};
-		const move = (from, to) => {
-			mutate((current) => {
-				const [item] = current.splice(from, 1);
-				current.splice(to, 0, item);
-			});
-			const [key] = itemKeys.value.splice(from, 1);
-			itemKeys.value.splice(to, 0, key);
-		};
+			if (validateOn.value.onBlur) validate();
+		}
+		/** Handles the input event for the field. */
+		function onInput() {
+			updateDirty();
+			if (!validateOn.value.onInput) return;
+			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();
+		}
+		/** Handles the focus event for the field. */
+		function onFocus() {
+			if (validateOn.value.onFocus) scheduleValidation();
+		}
 		onMounted(async () => {
 			await nextTick();
 			if (validateOn.value.onMount) validate();
 		});
-		/**
-		* Syncs `itemKeys` when the array length changes outside of this component's
-		* own mutation methods — most commonly after `form.reset()`.
-		*
-		* Watching `length` rather than the full array avoids unnecessary syncs on
-		* `update()` and `swap()`, which mutate values but never add or remove items.
-		* When our own mutations run, they manage keys explicitly before writing to
-		* the array, so by the time this watcher fires the lengths already match and
-		* `syncKeys` is a cheap no-op.
-		*/
-		watch(() => array.value.length, syncKeys);
-		const slotProps = computed(() => ({
-			path: props.path,
-			items: items.value,
-			errors: errors.value,
-			isValid: isValid.value,
-			isTouched: isTouched.value,
-			isDirty: isDirty.value,
-			isValidating: isValidating.value,
-			validate,
-			append,
-			prepend,
-			remove,
-			insert,
-			update,
-			swap,
-			move
-		}));
+		onUnmounted(() => {
+			clearDebounce();
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", {
+				errors: errors.value,
+				isValid: isValid.value,
+				isTouched: isTouched.value,
+				isDirty: isDirty.value,
+				isValidating: isValidating.value,
+				validate,
+				events: {
+					onBlur,
+					onChange,
+					onFocus,
+					onInput
+				},
+				path: __props.path,
+				value: value.value
+			});
+		};
+	}
+});
+//#endregion
+//#region src/components/not-form.vue
+var not_form_default = /* @__PURE__ */ defineComponent({
+	__name: "not-form",
+	props: { form: {
+		type: null,
+		required: true
+	} },
+	setup(__props) {
+		provideNotFormInstance(__props.form);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", null, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+//#region src/components/not-message.vue
+var not_message_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "not-message",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		form: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const form = useNotFormInstance(props.form);
+		const message = computed(() => form.errorsMap.value[props.path]);
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
+			return message.value ? (openBlock(), createBlock(resolveDynamicComponent(__props.as), normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { message: message.value }, () => [createTextVNode(toDisplayString(message.value), 1)])]),
+				_: 3
+			}, 16)) : createCommentVNode("v-if", true);
 		};
 	}
 });
 //#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.
+* @template TSchema The standard schema type.
+* @param config Configuration object.
+* @returns A reactive NotFormInstance.
+*/
+function useNotForm(config) {
+	let initialValues = klona(config.initialValues ?? {});
+	let initialErrors = klona(config.initialErrors ?? []);
+	const validateOn = {
+		onBlur: config.validateOn?.onBlur ?? true,
+		onChange: config.validateOn?.onChange ?? true,
+		onFocus: config.validateOn?.onFocus ?? false,
+		onInput: config.validateOn?.onInput ?? true,
+		onMount: config.validateOn?.onMount ?? false
+	};
+	const validationMode = {
+		eager: config.validationMode?.eager ?? true,
+		lazy: config.validationMode?.lazy ?? false
+	};
+	const values = reactive(klona(initialValues));
+	const errors = reactive([...initialErrors]);
+	const touchedFields = reactive(/* @__PURE__ */ new Set());
+	const dirtyFields = reactive(/* @__PURE__ */ new Set());
+	const isSubmitting = ref(false);
+	const isValidating = ref(false);
+	/**
+	* Tracks concurrent validations to keep `isValidating` true until all finish.
+	* @internal
+	*/
+	let validatingCount = 0;
+	const isValid = computed(() => errors.length === 0);
+	const isDirty = computed(() => dirtyFields.size > 0);
+	const isTouched = computed(() => touchedFields.size > 0);
+	const errorsMap = computed(() => {
+		const result = {};
+		for (const issue of errors) if (issue.path) {
+			const path = issue.path.map((element) => normalizeSegment(element)).join(".");
+			if (path && !result[path]) result[path] = issue.message;
+		}
+		return result;
+	});
+	/**
+	* Increments validation counter and activates `isValidating`.
+	* @internal
+	*/
+	function beginValidating() {
+		validatingCount++;
+		isValidating.value = true;
+	}
+	/**
+	* Decrements validation counter and deactivates `isValidating` when zero.
+	* @internal
+	*/
+	function endValidating() {
+		validatingCount--;
+		if (validatingCount === 0) isValidating.value = false;
+	}
+	/**
+	* Resolves and executes the standard schema validation.
+	* @internal
+	* @returns The validation result containing either `value` or `issues`.
+	*/
+	function runSchema() {
+		return toValue(config.schema)["~standard"].validate(values);
+	}
+	/**
+	* Iterates through deeply nested keys to mark all as touched.
+	* @internal
+	*/
+	function touchAllFields() {
+		for (const path of deepKeys(values)) touchedFields.add(path);
+	}
+	/**
+	* Removes a specific field path from the dirty tracking set.
+	* @internal
+	* @param path The field path to mark as clean.
+	*/
+	function unDirtyField(path) {
+		dirtyFields.delete(path);
+	}
+	/**
+	* Iterates through deeply nested keys to mark all as dirty.
+	* @internal
+	*/
+	function dirtyAllFields() {
+		for (const path of deepKeys(values)) dirtyFields.add(path);
+	}
+	/**
+	* Marks a specific field path as touched.
+	* @param path The field path to mark as touched.
+	*/
+	function touchField(path) {
+		touchedFields.add(path);
+	}
+	/**
+	* Marks a specific field path as dirty.
+	* @param path The field path to mark as dirty.
+	*/
+	function dirtyField(path) {
+		dirtyFields.add(path);
+	}
+	/**
+	* Sets a value at the specified path and updates dirty tracking based on comparison with initial values.
+	* @param path The field path to set the value at.
+	* @param value The value to set.
+	*/
+	function setValue(path, value) {
+		setProperty(values, path, value);
+		if (dequal(value, getProperty(initialValues, path))) unDirtyField(path);
+		else dirtyField(path);
+	}
+	/**
+	* Sets or updates an error issue in the errors array, replacing any existing issue for the same path.
+	* @param newIssue The issue to set.
+	*/
+	function setError(newIssue) {
+		const newPath = newIssue.path?.map((element) => normalizeSegment(element)).join(".");
+		const existingIndex = errors.findIndex((error) => {
+			return error.path?.map((element) => normalizeSegment(element)).join(".") === newPath;
+		});
+		if (existingIndex === -1) errors.push(newIssue);
+		else errors[existingIndex] = newIssue;
+	}
+	/**
+	* Sets multiple error issues in the errors array, replacing any existing issues.
+	* @param newIssues The array of issues to set.
+	*/
+	function setErrors(newIssues) {
+		errors.splice(0, errors.length, ...newIssues);
+	}
+	/** Clears all error issues from the errors array. */
+	function clearErrors() {
+		errors.splice(0);
+	}
+	/**
+	* Retrieves all error issues associated with a specific field path.
+	* @param path The field path to retrieve errors for.
+	* @returns An array of error issues associated with the field path.
+	*/
+	function getFieldErrors(path) {
+		const pathSegments = parsePath(path);
+		return errors.filter((error) => isIssuePathEqual(error.path, pathSegments));
+	}
+	/**
+	* Validates the entire form against the schema, updating errors and returning the result.
+	* @returns An object containing either `value` or `issues` based on validation outcome.
+	*/
+	async function validate() {
+		beginValidating();
+		try {
+			const result = await runSchema();
+			if (result?.issues) {
+				setErrors([...result.issues]);
+				return { issues: result.issues };
+			}
+			clearErrors();
+			return { value: result.value };
+		} finally {
+			endValidating();
+		}
+	}
+	/**
+	* Validates a specific field against the schema, updating errors and returning the result.
+	* @param path The field path to validate.
+	* @returns An object containing either `value` or `issues` based on validation outcome.
+	*/
+	async function validateField(path) {
+		beginValidating();
+		try {
+			const result = await runSchema();
+			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);
+			if (result?.issues) {
+				const fieldIssues = result.issues.filter((issue) => isIssuePathEqual(issue.path, pathSegments));
+				if (fieldIssues.length > 0) {
+					errors.push(...fieldIssues);
+					return { issues: fieldIssues };
+				}
+				return { value: getProperty(values, path) };
+			}
+			return { value: getProperty(result.value, path) };
+		} finally {
+			endValidating();
+		}
+	}
+	/**
+	* Submits the form, validating it and executing the submit handler if provided.
+	* @param event The submit event.
+	*/
+	async function submit(event) {
+		isSubmitting.value = true;
+		try {
+			touchAllFields();
+			dirtyAllFields();
+			const result = await validate();
+			if (result?.issues) {
+				event.preventDefault();
+				return;
+			}
+			if (config.onSubmit) {
+				event.preventDefault();
+				await config.onSubmit(result.value);
+			}
+		} catch {
+			event.preventDefault();
+		} finally {
+			isSubmitting.value = false;
+		}
+	}
+	/**
+	* Resets the form to its initial state.
+	* @param newValues The new values to reset the form with.
+	* @param newErrors The new errors to reset the form with.
+	*/
+	function reset(newValues, newErrors) {
+		if (newValues) initialValues = klona(newValues);
+		if (newErrors) initialErrors = klona(newErrors);
+		const freshValues = klona(initialValues);
+		for (const key of Object.keys(values)) if (!hasProperty(freshValues, key)) deleteProperty(values, key);
+		for (const key of Object.keys(freshValues)) setProperty(values, key, getProperty(freshValues, key));
+		errors.splice(0, errors.length, ...klona(initialErrors));
+		touchedFields.clear();
+		dirtyFields.clear();
+	}
+	return markRaw({
+		get initialErrors() {
+			return initialErrors;
+		},
+		get initialValues() {
+			return initialValues;
+		},
+		validateOn,
+		validationMode,
+		setValue,
+		values,
+		isTouched,
+		touchedFields,
+		touchField,
+		dirtyField,
+		dirtyFields,
+		isDirty,
+		clearErrors,
+		errors,
+		errorsMap,
+		getFieldErrors,
+		setError,
+		setErrors,
+		isValid,
+		isValidating,
+		validate,
+		validateField,
+		isSubmitting,
+		submit,
+		reset
+	});
+}
+//#endregion
 export { not_array_field_default as NotArrayField, not_field_default as NotField, not_form_default as NotForm, not_message_default as NotMessage, useNotForm };