@vuehookform/core 0.6.0 → 0.7.0

package/dist/vuehookform.js

@@ -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);
@@ -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);
@@ -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();
@@ -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,9 +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