@vuehookform/core 0.1.2 → 0.2.7

package/dist/vuehookform.cjs

@@ -21,9 +21,14 @@ function set(obj, path, value) {
 	if (keys.some((k) => UNSAFE_KEYS.includes(k))) return;
 	const lastKey = keys.pop();
 	let current = obj;
-	for (const key of keys) {
-		if (!(key in current) || typeof current[key] !== "object") {
-			const nextKey = keys[keys.indexOf(key) + 1];
+	for (let i = 0; i < keys.length; i++) {
+		const key = keys[i];
+		const existing = current[key];
+		if (existing !== void 0 && existing !== null && typeof existing !== "object") try {
+			if (globalThis.process?.env?.NODE_ENV !== "production") console.warn(`[vue-hook-form] set(): Overwriting primitive value at path "${keys.slice(0, i + 1).join(".")}" with an object. Previous value: ${JSON.stringify(existing)}`);
+		} catch {}
+		if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+			const nextKey = keys[i + 1];
 			current[key] = nextKey && /^\d+$/.test(nextKey) ? [] : {};
 		}
 		current = current[key];
@@ -37,13 +42,16 @@ function unset(obj, path) {
 	let current = obj;
 	for (const key of keys) {
 		if (!(key in current)) return;
-		current = current[key];
+		const next = current[key];
+		if (next === null || typeof next !== "object") return;
+		current = next;
 	}
 	delete current[lastKey];
 }
 var idCounter = 0;
 function generateId() {
-	return `field_${Date.now()}_${idCounter++}`;
+	const random = Math.random().toString(36).substring(2, 11);
+	return `field_${Date.now()}_${idCounter++}_${random}`;
 }
 function createFormContext(options) {
 	const formData = (0, vue.reactive)({});
@@ -58,27 +66,81 @@ function createFormContext(options) {
 			isLoading.value = false;
 		}).catch((error) => {
 			console.error("Failed to load async default values:", error);
+			defaultValuesError.value = error;
 			isLoading.value = false;
+			options.onDefaultValuesError?.(error);
 		});
 	} else if (options.defaultValues) {
 		Object.assign(defaultValues, options.defaultValues);
 		Object.assign(formData, defaultValues);
 	}
+	const errors = (0, vue.shallowRef)({});
+	const touchedFields = (0, vue.shallowRef)({});
+	const dirtyFields = (0, vue.shallowRef)({});
+	const isSubmitting = (0, vue.ref)(false);
+	const submitCount = (0, vue.ref)(0);
+	const defaultValuesError = (0, vue.ref)(null);
+	const isSubmitSuccessful = (0, vue.ref)(false);
+	const validatingFields = (0, vue.shallowRef)({});
+	const externalErrors = (0, vue.shallowRef)({});
+	const errorDelayTimers = /* @__PURE__ */ new Map();
+	const pendingErrors = /* @__PURE__ */ new Map();
+	const fieldRefs = /* @__PURE__ */ new Map();
+	const fieldOptions = /* @__PURE__ */ new Map();
+	const fieldArrays = /* @__PURE__ */ new Map();
+	const fieldHandlers = /* @__PURE__ */ new Map();
+	const debounceTimers = /* @__PURE__ */ new Map();
+	const validationRequestIds = /* @__PURE__ */ new Map();
+	const resetGeneration = (0, vue.ref)(0);
+	if (options.values !== void 0) {
+		const initialValues = (0, vue.toValue)(options.values);
+		if (initialValues && !isAsyncDefaults) {
+			for (const [key, value] of Object.entries(initialValues)) if (value !== void 0) set(formData, key, value);
+		}
+		(0, vue.watch)(() => (0, vue.toValue)(options.values), (newValues) => {
+			if (newValues) {
+				for (const [key, value] of Object.entries(newValues)) if (value !== void 0) {
+					set(formData, key, value);
+					const fieldRef = fieldRefs.get(key);
+					const opts = fieldOptions.get(key);
+					if (fieldRef?.value && !opts?.controlled) {
+						const el = fieldRef.value;
+						if (el.type === "checkbox") el.checked = value;
+						else el.value = value;
+					}
+				}
+			}
+		}, { deep: true });
+	}
+	if (options.errors !== void 0) {
+		const initialErrors = (0, vue.toValue)(options.errors);
+		if (initialErrors) externalErrors.value = initialErrors;
+		(0, vue.watch)(() => (0, vue.toValue)(options.errors), (newErrors) => {
+			externalErrors.value = newErrors || {};
+		}, { deep: true });
+	}
 	return {
 		formData,
 		defaultValues,
-		errors: (0, vue.shallowRef)({}),
-		touchedFields: (0, vue.shallowRef)({}),
-		dirtyFields: (0, vue.shallowRef)({}),
-		isSubmitting: (0, vue.ref)(false),
+		errors,
+		touchedFields,
+		dirtyFields,
+		isSubmitting,
 		isLoading,
-		submitCount: (0, vue.ref)(0),
-		fieldRefs: /* @__PURE__ */ new Map(),
-		fieldOptions: /* @__PURE__ */ new Map(),
-		fieldArrays: /* @__PURE__ */ new Map(),
-		fieldHandlers: /* @__PURE__ */ new Map(),
-		debounceTimers: /* @__PURE__ */ new Map(),
-		validationRequestIds: /* @__PURE__ */ new Map(),
+		submitCount,
+		defaultValuesError,
+		isSubmitSuccessful,
+		validatingFields,
+		externalErrors,
+		errorDelayTimers,
+		pendingErrors,
+		fieldRefs,
+		fieldOptions,
+		fieldArrays,
+		fieldHandlers,
+		debounceTimers,
+		validationRequestIds,
+		resetGeneration,
 		options
 	};
 }
@@ -87,6 +149,17 @@ function clearFieldErrors(errors, fieldPath) {
 	for (const key of Object.keys(newErrors)) if (key === fieldPath || key.startsWith(`${fieldPath}.`)) delete newErrors[key];
 	return newErrors;
 }
+function setValidating(ctx, fieldPath, isValidating) {
+	if (isValidating) ctx.validatingFields.value = {
+		...ctx.validatingFields.value,
+		[fieldPath]: true
+	};
+	else {
+		const newValidating = { ...ctx.validatingFields.value };
+		delete newValidating[fieldPath];
+		ctx.validatingFields.value = newValidating;
+	}
+}
 function groupErrorsByPath(issues) {
 	const grouped = /* @__PURE__ */ new Map();
 	for (const issue of issues) {
@@ -100,9 +173,10 @@ function groupErrorsByPath(issues) {
 	}
 	return grouped;
 }
-function createFieldError(errors) {
+function createFieldError(errors, criteriaMode = "firstError") {
 	const firstError = errors[0];
 	if (!firstError) return "";
+	if (criteriaMode === "firstError") return firstError.message;
 	if (errors.length === 1) return firstError.message;
 	const types = {};
 	for (const err of errors) {
@@ -117,37 +191,89 @@ function createFieldError(errors) {
 	};
 }
 function createValidation(ctx) {
-	async function validate(fieldPath) {
-		const result = await ctx.options.schema.safeParseAsync(ctx.formData);
-		if (result.success) {
-			if (fieldPath) ctx.errors.value = clearFieldErrors(ctx.errors.value, fieldPath);
-			else ctx.errors.value = {};
-			return true;
+	function scheduleError(fieldPath, error) {
+		const delayMs = ctx.options.delayError || 0;
+		if (delayMs <= 0) {
+			const newErrors = { ...ctx.errors.value };
+			set(newErrors, fieldPath, error);
+			ctx.errors.value = newErrors;
+			return;
 		}
-		const zodErrors = result.error.issues;
-		if (fieldPath) {
-			const fieldErrors = zodErrors.filter((issue) => {
-				const path = issue.path.join(".");
-				return path === fieldPath || path.startsWith(`${fieldPath}.`);
-			});
-			if (fieldErrors.length === 0) {
-				ctx.errors.value = clearFieldErrors(ctx.errors.value, fieldPath);
+		const existingTimer = ctx.errorDelayTimers.get(fieldPath);
+		if (existingTimer) clearTimeout(existingTimer);
+		ctx.pendingErrors.set(fieldPath, error);
+		const timer = setTimeout(() => {
+			ctx.errorDelayTimers.delete(fieldPath);
+			const pendingError = ctx.pendingErrors.get(fieldPath);
+			if (pendingError !== void 0) {
+				ctx.pendingErrors.delete(fieldPath);
+				const newErrors = { ...ctx.errors.value };
+				set(newErrors, fieldPath, pendingError);
+				ctx.errors.value = newErrors;
+			}
+		}, delayMs);
+		ctx.errorDelayTimers.set(fieldPath, timer);
+	}
+	function cancelError(fieldPath) {
+		const timer = ctx.errorDelayTimers.get(fieldPath);
+		if (timer) {
+			clearTimeout(timer);
+			ctx.errorDelayTimers.delete(fieldPath);
+		}
+		ctx.pendingErrors.delete(fieldPath);
+		return clearFieldErrors(ctx.errors.value, fieldPath);
+	}
+	function clearAllPendingErrors() {
+		for (const timer of ctx.errorDelayTimers.values()) clearTimeout(timer);
+		ctx.errorDelayTimers.clear();
+		ctx.pendingErrors.clear();
+	}
+	async function validate(fieldPath) {
+		const generationAtStart = ctx.resetGeneration.value;
+		const criteriaMode = ctx.options.criteriaMode || "firstError";
+		const validatingKey = fieldPath || "_form";
+		setValidating(ctx, validatingKey, true);
+		try {
+			const result = await ctx.options.schema.safeParseAsync(ctx.formData);
+			if (ctx.resetGeneration.value !== generationAtStart) return true;
+			if (result.success) {
+				if (fieldPath) ctx.errors.value = cancelError(fieldPath);
+				else {
+					clearAllPendingErrors();
+					ctx.errors.value = {};
+				}
 				return true;
 			}
-			const newErrors$1 = clearFieldErrors(ctx.errors.value, fieldPath);
-			const grouped$1 = groupErrorsByPath(fieldErrors);
-			for (const [path, errors] of grouped$1) set(newErrors$1, path, createFieldError(errors));
-			ctx.errors.value = newErrors$1;
+			const zodErrors = result.error.issues;
+			if (fieldPath) {
+				const fieldErrors = zodErrors.filter((issue) => {
+					const path = issue.path.join(".");
+					return path === fieldPath || path.startsWith(`${fieldPath}.`);
+				});
+				if (fieldErrors.length === 0) {
+					ctx.errors.value = cancelError(fieldPath);
+					return true;
+				}
+				ctx.errors.value = cancelError(fieldPath);
+				const grouped$1 = groupErrorsByPath(fieldErrors);
+				for (const [path, errors] of grouped$1) scheduleError(path, createFieldError(errors, criteriaMode));
+				return false;
+			}
+			clearAllPendingErrors();
+			ctx.errors.value = {};
+			const grouped = groupErrorsByPath(zodErrors);
+			for (const [path, errors] of grouped) scheduleError(path, createFieldError(errors, criteriaMode));
 			return false;
+		} finally {
+			setValidating(ctx, validatingKey, false);
 		}
-		const newErrors = {};
-		const grouped = groupErrorsByPath(zodErrors);
-		for (const [path, errors] of grouped) set(newErrors, path, createFieldError(errors));
-		ctx.errors.value = newErrors;
-		return false;
 	}
-	return { validate };
+	return {
+		validate,
+		clearAllPendingErrors
+	};
 }
+var validationRequestCounter = 0;
 function createFieldRegistration(ctx, validate) {
 	function register(name, registerOptions) {
 		let fieldRef = ctx.fieldRefs.get(name);
@@ -162,11 +288,12 @@ function createFieldRegistration(ctx, validate) {
 		if (registerOptions) ctx.fieldOptions.set(name, registerOptions);
 		let handlers = ctx.fieldHandlers.get(name);
 		if (!handlers) {
-			const runCustomValidation = async (fieldName, value, requestId) => {
+			const runCustomValidation = async (fieldName, value, requestId, resetGenAtStart) => {
 				const fieldOpts = ctx.fieldOptions.get(fieldName);
 				if (!fieldOpts?.validate || fieldOpts.disabled) return;
 				const error = await fieldOpts.validate(value);
 				if (requestId !== ctx.validationRequestIds.get(fieldName)) return;
+				if (ctx.resetGeneration.value !== resetGenAtStart) return;
 				if (error) ctx.errors.value = {
 					...ctx.errors.value,
 					[fieldName]: error
@@ -185,21 +312,26 @@ function createFieldRegistration(ctx, validate) {
 					...ctx.dirtyFields.value,
 					[name]: true
 				};
-				if (ctx.options.mode === "onChange" || ctx.options.mode === "onTouched" && ctx.touchedFields.value[name] || ctx.touchedFields.value[name] && ctx.options.reValidateMode === "onChange") await validate(name);
+				if (ctx.options.mode === "onChange" || ctx.options.mode === "onTouched" && ctx.touchedFields.value[name] || ctx.touchedFields.value[name] && ctx.options.reValidateMode === "onChange") {
+					await validate(name);
+					const fieldOpts$1 = ctx.fieldOptions.get(name);
+					if (fieldOpts$1?.deps && fieldOpts$1.deps.length > 0) for (const depField of fieldOpts$1.deps) validate(depField);
+				}
 				const fieldOpts = ctx.fieldOptions.get(name);
 				if (fieldOpts?.validate && !fieldOpts.disabled) {
-					const requestId = Date.now() + Math.random();
+					const requestId = ++validationRequestCounter;
 					ctx.validationRequestIds.set(name, requestId);
+					const resetGenAtStart = ctx.resetGeneration.value;
 					const debounceMs = fieldOpts.validateDebounce || 0;
 					if (debounceMs > 0) {
 						const existingTimer = ctx.debounceTimers.get(name);
 						if (existingTimer) clearTimeout(existingTimer);
 						const timer = setTimeout(() => {
 							ctx.debounceTimers.delete(name);
-							runCustomValidation(name, value, requestId);
+							runCustomValidation(name, value, requestId, resetGenAtStart);
 						}, debounceMs);
 						ctx.debounceTimers.set(name, timer);
-					} else await runCustomValidation(name, value, requestId);
+					} else await runCustomValidation(name, value, requestId, resetGenAtStart);
 				}
 			};
 			const onBlur = async (_e) => {
@@ -207,12 +339,18 @@ function createFieldRegistration(ctx, validate) {
 					...ctx.touchedFields.value,
 					[name]: true
 				};
-				if (ctx.options.mode === "onBlur" || ctx.options.mode === "onTouched" || ctx.submitCount.value > 0 && ctx.options.reValidateMode === "onBlur") await validate(name);
+				if (ctx.options.mode === "onBlur" || ctx.options.mode === "onTouched" || ctx.submitCount.value > 0 && ctx.options.reValidateMode === "onBlur") {
+					await validate(name);
+					const fieldOpts = ctx.fieldOptions.get(name);
+					if (fieldOpts?.deps && fieldOpts.deps.length > 0) for (const depField of fieldOpts.deps) validate(depField);
+				}
 			};
 			const refCallback = (el) => {
 				const currentFieldRef = ctx.fieldRefs.get(name);
 				if (!currentFieldRef) return;
 				const previousEl = currentFieldRef.value;
+				if (previousEl === el) return;
+				if (previousEl && el) return;
 				currentFieldRef.value = el;
 				const opts = ctx.fieldOptions.get(name);
 				if (el && !opts?.controlled && el instanceof HTMLInputElement) {
@@ -221,6 +359,12 @@ function createFieldRegistration(ctx, validate) {
 					else el.value = value;
 				}
 				if (previousEl && !el) {
+					const timer = ctx.debounceTimers.get(name);
+					if (timer) {
+						clearTimeout(timer);
+						ctx.debounceTimers.delete(name);
+					}
+					ctx.validationRequestIds.delete(name);
 					if (opts?.shouldUnregister ?? ctx.options.shouldUnregister ?? false) {
 						unset(ctx.formData, name);
 						const newErrors = { ...ctx.errors.value };
@@ -235,12 +379,6 @@ function createFieldRegistration(ctx, validate) {
 						ctx.fieldRefs.delete(name);
 						ctx.fieldOptions.delete(name);
 						ctx.fieldHandlers.delete(name);
-						const timer = ctx.debounceTimers.get(name);
-						if (timer) {
-							clearTimeout(timer);
-							ctx.debounceTimers.delete(name);
-						}
-						ctx.validationRequestIds.delete(name);
 					}
 				}
 			};
@@ -268,7 +406,24 @@ function createFieldRegistration(ctx, validate) {
 			}) }
 		};
 	}
-	function unregister(name) {
+	function unregister(name, options) {
+		const opts = options || {};
+		if (!opts.keepValue) unset(ctx.formData, name);
+		if (!opts.keepError) {
+			const newErrors = { ...ctx.errors.value };
+			delete newErrors[name];
+			ctx.errors.value = newErrors;
+		}
+		if (!opts.keepTouched) {
+			const newTouched = { ...ctx.touchedFields.value };
+			delete newTouched[name];
+			ctx.touchedFields.value = newTouched;
+		}
+		if (!opts.keepDirty) {
+			const newDirty = { ...ctx.dirtyFields.value };
+			delete newDirty[name];
+			ctx.dirtyFields.value = newDirty;
+		}
 		ctx.fieldRefs.delete(name);
 		ctx.fieldOptions.delete(name);
 		ctx.fieldHandlers.delete(name);
@@ -284,42 +439,89 @@ function createFieldRegistration(ctx, validate) {
 		unregister
 	};
 }
-function createFieldArrayManager(ctx, validate) {
-	function fields(name) {
+function createFieldArrayManager(ctx, validate, setFocus) {
+	function fields(name, options) {
 		let fieldArray = ctx.fieldArrays.get(name);
 		if (!fieldArray) {
 			const existingValues = get(ctx.formData, name) || [];
 			fieldArray = {
 				items: (0, vue.ref)([]),
-				values: existingValues
+				values: existingValues,
+				indexCache: /* @__PURE__ */ new Map(),
+				rules: options?.rules
 			};
 			ctx.fieldArrays.set(name, fieldArray);
 			if (!get(ctx.formData, name)) set(ctx.formData, name, []);
-		}
+		} else if (options?.rules) fieldArray.rules = options.rules;
 		const fa = fieldArray;
+		const indexCache = fa.indexCache;
+		const rebuildIndexCache = () => {
+			indexCache.clear();
+			fa.items.value.forEach((item, idx) => {
+				indexCache.set(item.key, idx);
+			});
+		};
 		const createItem = (key) => ({
 			key,
 			get index() {
-				return fa.items.value.findIndex((item) => item.key === key);
+				return indexCache.get(key) ?? -1;
 			},
 			remove() {
-				const currentIndex = fa.items.value.findIndex((item) => item.key === key);
+				const currentIndex = indexCache.get(key) ?? -1;
 				if (currentIndex !== -1) removeAt(currentIndex);
 			}
 		});
-		if (fa.items.value.length === 0 && fa.values.length > 0) fa.items.value = fa.values.map(() => createItem(generateId()));
-		const append = (value) => {
-			const newValues = [...get(ctx.formData, name) || [], value];
+		if (fa.items.value.length === 0 && fa.values.length > 0) {
+			fa.items.value = fa.values.map(() => createItem(generateId()));
+			rebuildIndexCache();
+		}
+		const handleFocus = async (baseIndex, addedCount, focusOptions) => {
+			if (!focusOptions?.shouldFocus) return;
+			await (0, vue.nextTick)();
+			const focusItemOffset = focusOptions?.focusIndex ?? 0;
+			let fieldPath = `${name}.${baseIndex + Math.min(focusItemOffset, addedCount - 1)}`;
+			if (focusOptions?.focusName) fieldPath = `${fieldPath}.${focusOptions.focusName}`;
+			setFocus(fieldPath);
+		};
+		const normalizeToArray = (value) => {
+			return Array.isArray(value) ? value : [value];
+		};
+		const append = (value, focusOptions) => {
+			const values = normalizeToArray(value);
+			if (values.length === 0) return;
+			const currentValues = get(ctx.formData, name) || [];
+			const insertIndex = currentValues.length;
+			const rules = fa.rules;
+			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return;
+			const newValues = [...currentValues, ...values];
 			set(ctx.formData, name, newValues);
-			fa.items.value = [...fa.items.value, createItem(generateId())];
+			const newItems = values.map(() => createItem(generateId()));
+			fa.items.value = [...fa.items.value, ...newItems];
+			rebuildIndexCache();
 			ctx.dirtyFields.value = {
 				...ctx.dirtyFields.value,
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
+			handleFocus(insertIndex, values.length, focusOptions);
 		};
-		const prepend = (value) => {
-			insert(0, value);
+		const prepend = (value, focusOptions) => {
+			const values = normalizeToArray(value);
+			if (values.length === 0) return;
+			const currentValues = get(ctx.formData, name) || [];
+			const rules = fa.rules;
+			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return;
+			const newValues = [...values, ...currentValues];
+			set(ctx.formData, name, newValues);
+			const newItems = values.map(() => createItem(generateId()));
+			fa.items.value = [...newItems, ...fa.items.value];
+			rebuildIndexCache();
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+			handleFocus(0, values.length, focusOptions);
 		};
 		const update = (index, value) => {
 			const currentValues = get(ctx.formData, name) || [];
@@ -334,38 +536,52 @@ function createFieldArrayManager(ctx, validate) {
 			if (ctx.options.mode === "onChange") validate(name);
 		};
 		const removeAt = (index) => {
-			const newValues = (get(ctx.formData, name) || []).filter((_, i) => i !== index);
+			const currentValues = get(ctx.formData, name) || [];
+			if (index < 0 || index >= currentValues.length) return;
+			const rules = fa.rules;
+			if (rules?.minLength && currentValues.length - 1 < rules.minLength.value) return;
+			const newValues = currentValues.filter((_, i) => i !== index);
 			set(ctx.formData, name, newValues);
 			const keyToRemove = fa.items.value[index]?.key;
 			fa.items.value = fa.items.value.filter((item) => item.key !== keyToRemove);
+			rebuildIndexCache();
 			ctx.dirtyFields.value = {
 				...ctx.dirtyFields.value,
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
 		};
-		const insert = (index, value) => {
+		const insert = (index, value, focusOptions) => {
+			const values = normalizeToArray(value);
+			if (values.length === 0) return;
 			const currentValues = get(ctx.formData, name) || [];
+			const rules = fa.rules;
+			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return;
+			const clampedIndex = Math.max(0, Math.min(index, currentValues.length));
 			const newValues = [
-				...currentValues.slice(0, index),
-				value,
-				...currentValues.slice(index)
+				...currentValues.slice(0, clampedIndex),
+				...values,
+				...currentValues.slice(clampedIndex)
 			];
 			set(ctx.formData, name, newValues);
-			const newItem = createItem(generateId());
+			const newItems = values.map(() => createItem(generateId()));
 			fa.items.value = [
-				...fa.items.value.slice(0, index),
-				newItem,
-				...fa.items.value.slice(index)
+				...fa.items.value.slice(0, clampedIndex),
+				...newItems,
+				...fa.items.value.slice(clampedIndex)
 			];
+			rebuildIndexCache();
 			ctx.dirtyFields.value = {
 				...ctx.dirtyFields.value,
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
+			handleFocus(clampedIndex, values.length, focusOptions);
 		};
 		const swap = (indexA, indexB) => {
-			const newValues = [...get(ctx.formData, name) || []];
+			const currentValues = get(ctx.formData, name) || [];
+			if (indexA < 0 || indexB < 0 || indexA >= currentValues.length || indexB >= currentValues.length) return;
+			const newValues = [...currentValues];
 			[newValues[indexA], newValues[indexB]] = [newValues[indexB], newValues[indexA]];
 			set(ctx.formData, name, newValues);
 			const newItems = [...fa.items.value];
@@ -375,6 +591,7 @@ function createFieldArrayManager(ctx, validate) {
 				newItems[indexA] = itemB;
 				newItems[indexB] = itemA;
 				fa.items.value = newItems;
+				rebuildIndexCache();
 			}
 			ctx.dirtyFields.value = {
 				...ctx.dirtyFields.value,
@@ -383,17 +600,22 @@ function createFieldArrayManager(ctx, validate) {
 			if (ctx.options.mode === "onChange") validate(name);
 		};
 		const move = (from, to) => {
-			const newValues = [...get(ctx.formData, name) || []];
+			const currentValues = get(ctx.formData, name) || [];
+			if (from < 0 || from >= currentValues.length || to < 0) return;
+			const newValues = [...currentValues];
 			const [removed] = newValues.splice(from, 1);
 			if (removed !== void 0) {
-				newValues.splice(to, 0, removed);
+				const clampedTo = Math.min(to, newValues.length);
+				newValues.splice(clampedTo, 0, removed);
 				set(ctx.formData, name, newValues);
 			}
 			const newItems = [...fa.items.value];
 			const [removedItem] = newItems.splice(from, 1);
 			if (removedItem) {
-				newItems.splice(to, 0, removedItem);
+				const clampedTo = Math.min(to, newItems.length);
+				newItems.splice(clampedTo, 0, removedItem);
 				fa.items.value = newItems;
+				rebuildIndexCache();
 			}
 			ctx.dirtyFields.value = {
 				...ctx.dirtyFields.value,
@@ -401,6 +623,17 @@ function createFieldArrayManager(ctx, validate) {
 			};
 			if (ctx.options.mode === "onChange") validate(name);
 		};
+		const replace = (newValues) => {
+			if (!Array.isArray(newValues)) return;
+			set(ctx.formData, name, newValues);
+			fa.items.value = newValues.map(() => createItem(generateId()));
+			rebuildIndexCache();
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+		};
 		return {
 			value: fa.items.value,
 			append,
@@ -409,31 +642,56 @@ function createFieldArrayManager(ctx, validate) {
 			insert,
 			swap,
 			move,
-			update
+			update,
+			replace
 		};
 	}
 	return { fields };
 }
 function useForm(options) {
 	const ctx = createFormContext(options);
-	const { validate } = createValidation(ctx);
+	const { validate, clearAllPendingErrors } = createValidation(ctx);
 	const { register, unregister } = createFieldRegistration(ctx, validate);
-	const { fields } = createFieldArrayManager(ctx, validate);
-	const formState = (0, vue.computed)(() => ({
-		errors: ctx.errors.value,
-		isDirty: Object.keys(ctx.dirtyFields.value).some((k) => ctx.dirtyFields.value[k]),
-		dirtyFields: ctx.dirtyFields.value,
-		isValid: (ctx.submitCount.value > 0 || Object.keys(ctx.touchedFields.value).length > 0) && Object.keys(ctx.errors.value).length === 0,
-		isSubmitting: ctx.isSubmitting.value,
-		isLoading: ctx.isLoading.value,
-		touchedFields: ctx.touchedFields.value,
-		submitCount: ctx.submitCount.value
-	}));
+	function setFocus(name, focusOptions) {
+		const fieldRef = ctx.fieldRefs.get(name);
+		if (!fieldRef?.value) return;
+		const el = fieldRef.value;
+		if (typeof el.focus === "function") {
+			el.focus();
+			if (focusOptions?.shouldSelect && el instanceof HTMLInputElement && typeof el.select === "function") el.select();
+		}
+	}
+	const setFocusWrapper = (name) => setFocus(name);
+	const { fields } = createFieldArrayManager(ctx, validate, setFocusWrapper);
+	const formState = (0, vue.computed)(() => {
+		const mergedErrors = {
+			...ctx.errors.value,
+			...ctx.externalErrors.value
+		};
+		return {
+			errors: mergedErrors,
+			isDirty: Object.keys(ctx.dirtyFields.value).some((k) => ctx.dirtyFields.value[k]),
+			dirtyFields: ctx.dirtyFields.value,
+			isValid: (ctx.submitCount.value > 0 || Object.keys(ctx.touchedFields.value).length > 0) && Object.keys(mergedErrors).length === 0,
+			isSubmitting: ctx.isSubmitting.value,
+			isLoading: ctx.isLoading.value,
+			isReady: !ctx.isLoading.value,
+			isValidating: Object.keys(ctx.validatingFields.value).some((k) => ctx.validatingFields.value[k]),
+			validatingFields: ctx.validatingFields.value,
+			touchedFields: ctx.touchedFields.value,
+			submitCount: ctx.submitCount.value,
+			defaultValuesError: ctx.defaultValuesError.value,
+			isSubmitted: ctx.submitCount.value > 0,
+			isSubmitSuccessful: ctx.isSubmitSuccessful.value
+		};
+	});
 	function handleSubmit(onValid, onInvalid) {
 		return async (e) => {
 			e.preventDefault();
+			if (ctx.isSubmitting.value) return;
 			ctx.isSubmitting.value = true;
 			ctx.submitCount.value++;
+			ctx.isSubmitSuccessful.value = false;
 			try {
 				for (const [name, fieldRef] of ctx.fieldRefs.entries()) {
 					const el = fieldRef.value;
@@ -444,41 +702,60 @@ function useForm(options) {
 						}
 					}
 				}
-				if (await validate()) await onValid(ctx.formData);
-				else onInvalid?.(ctx.errors.value);
+				if (await validate()) {
+					await onValid(ctx.formData);
+					ctx.isSubmitSuccessful.value = true;
+				} else {
+					onInvalid?.(formState.value.errors);
+					if (options.shouldFocusError !== false) {
+						const firstErrorField = Object.keys(formState.value.errors)[0];
+						if (firstErrorField) setFocus(firstErrorField);
+					}
+				}
 			} finally {
 				ctx.isSubmitting.value = false;
 			}
 		};
 	}
-	function setValue(name, value) {
+	function setValue(name, value, setValueOptions) {
 		set(ctx.formData, name, value);
-		ctx.dirtyFields.value = {
+		if (setValueOptions?.shouldDirty !== false) ctx.dirtyFields.value = {
 			...ctx.dirtyFields.value,
 			[name]: true
 		};
-		const fieldRef = ctx.fieldRefs.get(name);
-		if (fieldRef?.value) {
-			const el = fieldRef.value;
-			if (el.type === "checkbox") el.checked = value;
-			else el.value = value;
+		if (setValueOptions?.shouldTouch) ctx.touchedFields.value = {
+			...ctx.touchedFields.value,
+			[name]: true
+		};
+		if (!ctx.fieldOptions.get(name)?.controlled) {
+			const fieldRef = ctx.fieldRefs.get(name);
+			if (fieldRef?.value) {
+				const el = fieldRef.value;
+				if (el.type === "checkbox") el.checked = value;
+				else el.value = value;
+			}
 		}
-		if (options.mode === "onChange" || ctx.touchedFields.value[name]) validate(name);
+		if (setValueOptions?.shouldValidate) validate(name);
 	}
 	function getValue(name) {
 		return get(ctx.formData, name);
 	}
 	function reset(values, resetOptions) {
 		const opts = resetOptions || {};
+		ctx.resetGeneration.value++;
+		clearAllPendingErrors();
+		ctx.validatingFields.value = {};
 		if (!opts.keepDefaultValues && values) Object.assign(ctx.defaultValues, values);
 		Object.keys(ctx.formData).forEach((key) => delete ctx.formData[key]);
-		const newValues = values || ctx.defaultValues;
+		const sourceValues = values || ctx.defaultValues;
+		const newValues = JSON.parse(JSON.stringify(sourceValues));
 		Object.assign(ctx.formData, newValues);
 		if (!opts.keepErrors) ctx.errors.value = {};
 		if (!opts.keepTouched) ctx.touchedFields.value = {};
 		if (!opts.keepDirty) ctx.dirtyFields.value = {};
 		if (!opts.keepSubmitCount) ctx.submitCount.value = 0;
 		if (!opts.keepIsSubmitting) ctx.isSubmitting.value = false;
+		if (!opts.keepIsSubmitSuccessful) ctx.isSubmitSuccessful.value = false;
 		ctx.fieldArrays.clear();
 		for (const [name, fieldRef] of ctx.fieldRefs.entries()) {
 			const el = fieldRef.value;
@@ -489,13 +766,54 @@ function useForm(options) {
 			}
 		}
 	}
-	function watch(name) {
+	function resetField(name, resetFieldOptions) {
+		const opts = resetFieldOptions || {};
+		ctx.resetGeneration.value++;
+		const errorTimer = ctx.errorDelayTimers.get(name);
+		if (errorTimer) {
+			clearTimeout(errorTimer);
+			ctx.errorDelayTimers.delete(name);
+		}
+		ctx.pendingErrors.delete(name);
+		let defaultValue = opts.defaultValue;
+		if (defaultValue === void 0) defaultValue = get(ctx.defaultValues, name);
+		else set(ctx.defaultValues, name, defaultValue);
+		const clonedValue = defaultValue !== void 0 ? JSON.parse(JSON.stringify(defaultValue)) : void 0;
+		set(ctx.formData, name, clonedValue);
+		if (!opts.keepError) {
+			const newErrors = { ...ctx.errors.value };
+			for (const key of Object.keys(newErrors)) if (key === name || key.startsWith(`${name}.`)) delete newErrors[key];
+			ctx.errors.value = newErrors;
+		}
+		if (!opts.keepDirty) {
+			const newDirty = { ...ctx.dirtyFields.value };
+			delete newDirty[name];
+			ctx.dirtyFields.value = newDirty;
+		}
+		if (!opts.keepTouched) {
+			const newTouched = { ...ctx.touchedFields.value };
+			delete newTouched[name];
+			ctx.touchedFields.value = newTouched;
+		}
+		if (!ctx.fieldOptions.get(name)?.controlled) {
+			const fieldRef = ctx.fieldRefs.get(name);
+			if (fieldRef?.value) {
+				const el = fieldRef.value;
+				if (clonedValue !== void 0) if (el.type === "checkbox") el.checked = clonedValue;
+				else el.value = clonedValue;
+				else if (el.type === "checkbox") el.checked = false;
+				else el.value = "";
+			}
+		}
+	}
+	function watch$1(name) {
 		return (0, vue.computed)(() => {
 			if (!name) return ctx.formData;
-			if (Array.isArray(name)) return name.reduce((acc, n) => {
-				acc[n] = get(ctx.formData, n);
-				return acc;
-			}, {});
+			if (Array.isArray(name)) {
+				const result = {};
+				for (const n of name) result[n] = get(ctx.formData, n);
+				return result;
+			}
 			return get(ctx.formData, name);
 		});
 	}
@@ -553,15 +871,6 @@ function useForm(options) {
 		}
 		return await validate(name);
 	}
-	function setFocus(name, focusOptions) {
-		const fieldRef = ctx.fieldRefs.get(name);
-		if (!fieldRef?.value) return;
-		const el = fieldRef.value;
-		if (typeof el.focus === "function") {
-			el.focus();
-			if (focusOptions?.shouldSelect && el instanceof HTMLInputElement && typeof el.select === "function") el.select();
-		}
-	}
 	return {
 		register,
 		unregister,
@@ -571,7 +880,8 @@ function useForm(options) {
 		setValue,
 		getValue,
 		reset,
-		watch,
+		resetField,
+		watch: watch$1,
 		validate,
 		clearErrors,
 		setError,
@@ -653,7 +963,11 @@ function useFormState(options = {}) {
 		return { [name]: fullState[name] };
 	});
 }
+function isFieldError(error) {
+	return typeof error === "object" && error !== null && "type" in error && "message" in error && typeof error.type === "string" && typeof error.message === "string";
+}
 exports.FormContextKey = FormContextKey;
+exports.isFieldError = isFieldError;
 exports.provideForm = provideForm;
 exports.useController = useController;
 exports.useForm = useForm;