@vuehookform/core 0.5.0 → 0.7.0

package/dist/vuehookform.js

@@ -539,14 +539,15 @@ function clearFieldTouched(touchedFields, fieldName) {
 }
 function clearFieldErrors(errors, fieldName) {
 	const currentErrors = errors.value;
-	const keys = Object.keys(currentErrors);
-	if (keys.length === 0) return;
+	if (Object.keys(currentErrors).length === 0) return;
+	const nestedError = get(currentErrors, fieldName);
 	const prefix = `${fieldName}.`;
-	const keysToDelete = [];
-	for (const key of keys) if (key === fieldName || key.startsWith(prefix)) keysToDelete.push(key);
-	if (keysToDelete.length === 0) return;
+	const flatKeysToDelete = [];
+	for (const key of Object.keys(currentErrors)) if (key === fieldName || key.startsWith(prefix)) flatKeysToDelete.push(key);
+	if (nestedError === void 0 && flatKeysToDelete.length === 0) return;
 	const newErrors = { ...currentErrors };
-	for (const key of keysToDelete) delete newErrors[key];
+	for (const key of flatKeysToDelete) delete newErrors[key];
+	if (nestedError !== void 0) unset(newErrors, fieldName);
 	errors.value = newErrors;
 }
 function updateFieldDirtyState(dirtyFields, defaultValues, defaultValueHashes, fieldName, currentValue) {
@@ -590,7 +591,6 @@ 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) {
 		const existing = types[err.type];
@@ -816,7 +816,7 @@ function shouldValidateOnBlur(mode, hasSubmitted, reValidateMode) {
 	return mode === "onBlur" || mode === "onTouched" || hasSubmitted && (reValidateMode === "onBlur" || reValidateMode === "onTouched");
 }
 var validationRequestCounter = 0;
-function createFieldRegistration(ctx, validate) {
+function createFieldRegistration(ctx, validate, onChangeHelpers) {
 	function register(name, registerOptions) {
 		if (__DEV__) {
 			const syntaxError = validatePathSyntax(name);
@@ -843,13 +843,13 @@ function createFieldRegistration(ctx, validate) {
 				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
-				};
-				else {
+				if (error) {
+					const newErrors = { ...ctx.errors.value };
+					set(newErrors, fieldName, error);
+					ctx.errors.value = newErrors;
+				} else {
 					const newErrors = { ...ctx.errors.value };
-					delete newErrors[fieldName];
+					unset(newErrors, fieldName);
 					ctx.errors.value = newErrors;
 				}
 			};
@@ -862,6 +862,11 @@ function createFieldRegistration(ctx, validate) {
 				set(ctx.formData, name, value);
 				updateFieldDirtyState(ctx.dirtyFields, ctx.defaultValues, ctx.defaultValueHashes, name, value);
 				const fieldOpts = ctx.fieldOptions.get(name);
+				if (fieldOpts?.onChange && onChangeHelpers?.setValue) try {
+					fieldOpts.onChange(value, { setValue: onChangeHelpers.setValue });
+				} catch (err) {
+					if (__DEV__) console.error(`[vue-hook-form] Error in onChange callback for field '${name}':`, err);
+				}
 				if (shouldValidateOnChange(ctx.options.mode ?? "onSubmit", ctx.touchedFields.value[name] === true, ctx.submitCount.value > 0, ctx.options.reValidateMode)) {
 					const validationDebounceMs = ctx.options.validationDebounce || 0;
 					if (validationDebounceMs > 0) {
@@ -1421,7 +1426,8 @@ function useForm(options) {
 		ctx.cleanup();
 	});
 	const { validate, clearAllPendingErrors } = createValidation(ctx);
-	const { register, unregister } = createFieldRegistration(ctx, validate);
+	const onChangeHelpers = { setValue: null };
+	const { register, unregister } = createFieldRegistration(ctx, validate, onChangeHelpers);
 	function setFocus(name, focusOptions) {
 		if (__DEV__) {
 			const syntaxError = validatePathSyntax(name);
@@ -1512,6 +1518,12 @@ function useForm(options) {
 		},
 		get disabled() {
 			return ctx.isDisabled.value;
+		},
+		get isPristine() {
+			return !isDirtyComputed.value;
+		},
+		get canSubmit() {
+			return isValidComputed.value && !ctx.isSubmitting.value && !ctx.isLoading.value && !ctx.isDisabled.value;
 		}
 	});
 	const formState = computed(() => formStateInternal);
@@ -1527,7 +1539,7 @@ function useForm(options) {
 			try {
 				syncWithDebounce();
 				if (await validate()) {
-					await onValid(ctx.formData);
+					await onValid(deepClone(ctx.formData));
 					ctx.isSubmitSuccessful.value = true;
 				} else {
 					onInvalid?.(formState.value.errors);
@@ -1561,6 +1573,7 @@ function useForm(options) {
 		}
 		if (setValueOptions?.shouldValidate) validate(name);
 	}
+	onChangeHelpers.setValue = setValue;
 	function reset(values, resetOptions) {
 		const opts = resetOptions || {};
 		ctx.validationCache.clear();
@@ -1609,7 +1622,6 @@ function useForm(options) {
 			}
 		}
 		const opts = resetFieldOptions || {};
-		ctx.resetGeneration.value++;
 		ctx.validationCache.delete(`${name}:partial`);
 		ctx.validationCache.delete(`${name}:full`);
 		const errorTimer = ctx.errorDelayTimers.get(name);
@@ -1618,6 +1630,11 @@ function useForm(options) {
 			ctx.errorDelayTimers.delete(name);
 		}
 		ctx.pendingErrors.delete(name);
+		const schemaTimer = ctx.schemaValidationTimers.get(name);
+		if (schemaTimer) {
+			clearTimeout(schemaTimer);
+			ctx.schemaValidationTimers.delete(name);
+		}
 		let defaultValue = opts.defaultValue;
 		if (defaultValue === void 0) defaultValue = get(ctx.defaultValues, name);
 		else {
@@ -1730,13 +1747,13 @@ function useForm(options) {
 			}
 		}
 		syncWithDebounce();
-		if (nameOrNames === void 0) return { ...ctx.formData };
+		if (nameOrNames === void 0) return deepClone(ctx.formData);
 		if (Array.isArray(nameOrNames)) {
 			const result = {};
-			for (const fieldName of nameOrNames) result[fieldName] = get(ctx.formData, fieldName);
+			for (const fieldName of nameOrNames) result[fieldName] = deepClone(get(ctx.formData, fieldName));
 			return result;
 		}
-		return get(ctx.formData, nameOrNames);
+		return deepClone(get(ctx.formData, nameOrNames));
 	}
 	function getFieldState(name) {
 		if (__DEV__) {
@@ -1770,11 +1787,7 @@ function useForm(options) {
 		}
 		if (options$1?.markAsSubmitted) ctx.submitCount.value++;
 		if (name === void 0) return await validate();
-		if (Array.isArray(name)) {
-			let allValid = true;
-			for (const fieldName of name) if (!await validate(fieldName)) allValid = false;
-			return allValid;
-		}
+		if (Array.isArray(name)) return (await Promise.all(name.map((fieldName) => validate(fieldName)))).every((isValid) => isValid);
 		return await validate(name);
 	}
 	const setFocusWrapper = (name) => setFocus(name);
@@ -1826,25 +1839,28 @@ function useFormContext() {
 function useWatch(options = {}) {
 	const { control, name, defaultValue } = options;
 	const form = control ?? useFormContext();
-	return computed(() => {
-		if (name === void 0) return form.getValues();
-		if (Array.isArray(name)) {
-			const result = {};
-			for (const fieldName of name) result[fieldName] = get(form.getValues(), fieldName) ?? defaultValue;
+	if (name === void 0) return form.watch();
+	if (Array.isArray(name)) {
+		const watched$1 = form.watch(name);
+		if (defaultValue === void 0) return watched$1;
+		return computed(() => {
+			const result = { ...watched$1.value };
+			for (const fieldName of name) if (result[fieldName] === void 0) result[fieldName] = defaultValue;
 			return result;
-		}
-		return get(form.getValues(), name) ?? defaultValue;
-	});
+		});
+	}
+	const watched = form.watch(name);
+	if (defaultValue === void 0) return watched;
+	return computed(() => watched.value ?? defaultValue);
 }
 function useController(options) {
 	const { name, control, defaultValue } = options;
 	const form = control ?? useFormContext();
 	const elementRef = ref(null);
 	if (defaultValue !== void 0 && form.getValues(name) === void 0) form.setValue(name, defaultValue);
+	const watchedValue = form.watch(name);
 	const value = computed({
-		get: () => {
-			return form.getValues(name) ?? defaultValue;
-		},
+		get: () => watchedValue.value ?? defaultValue,
 		set: (newValue) => {
 			form.setValue(name, newValue);
 		}
@@ -1903,7 +1919,22 @@ function useFormState(options = {}) {
 		return { [name]: fullState[name] };
 	});
 }
+function useFieldError(options) {
+	const form = options.control ?? useFormContext();
+	return computed(() => {
+		const error = get(form.formState.value.errors, options.name);
+		if (!error) return void 0;
+		if (typeof error === "string") return error;
+		if (Array.isArray(error)) {
+			if (__DEV__) console.warn(`[vue-hook-form] useFieldError('${options.name}') resolved to an array of per-item errors.\nuseFieldError only returns scalar error messages. Use formState.value.errors['${options.name}'] directly for item-level errors.`);
+			return;
+		}
+		if (typeof error === "object" && "message" in error) return error.message;
+	});
+}
 function isFieldError(error) {
 	return typeof error === "object" && error !== null && "type" in error && "message" in error && typeof error.type === "string" && typeof error.message === "string";
 }
-export { FormContextKey, clearPathCache, get, isFieldError, provideForm, set, unset, useController, useForm, useFormContext, useFormState, useWatch };
+export { FormContextKey, clearPathCache, get, isFieldError, provideForm, set, unset, useController, useFieldError, useForm, useFormContext, useFormState, useWatch };
+
+//# sourceMappingURL=vuehookform.js.map