@vuehookform/core 0.2.11 → 0.3.0

package/dist/vuehookform.cjs

@@ -53,6 +53,77 @@ function generateId() {
 	const random = Math.random().toString(36).substring(2, 11);
 	return `field_${Date.now()}_${idCounter++}_${random}`;
 }
+const __DEV__ = false;
+var warnedMessages = /* @__PURE__ */ new Set();
+function warnOnce(message, key) {}
+function warn(message) {}
+function validatePathSyntax(path) {
+	return null;
+}
+function traverseSchemaPath(schema, path) {
+	const segments = path.split(".");
+	let currentSchema = schema;
+	for (let i = 0; i < segments.length; i++) {
+		const segment = segments[i];
+		if (!segment) continue;
+		currentSchema = unwrapSchema(currentSchema);
+		if (isZodObject(currentSchema)) {
+			const shape = currentSchema.shape;
+			if (segment in shape) {
+				const nextSchema = shape[segment];
+				if (nextSchema) {
+					currentSchema = nextSchema;
+					continue;
+				}
+			}
+			return {
+				error: `Field "${segments.slice(0, i + 1).join(".")}" does not exist in schema`,
+				availableFields: Object.keys(shape),
+				segmentIndex: i
+			};
+		}
+		if (isZodArray(currentSchema) && /^\d+$/.test(segment)) {
+			currentSchema = currentSchema.element;
+			continue;
+		}
+		return {
+			error: `Cannot navigate path "${path}" at segment "${segment}"`,
+			segmentIndex: i
+		};
+	}
+	return { schema: currentSchema };
+}
+function validatePathAgainstSchema(schema, path) {
+	return { valid: true };
+}
+function isArrayFieldInSchema(schema, path) {
+	return null;
+}
+function warnInvalidPath(fnName, path, reason) {}
+function warnPathNotInSchema(fnName, path, availableFields) {}
+function warnFieldsOnNonArray(path) {}
+function warnArrayOperationRejected(operation, path, reason, details) {}
+function warnArrayIndexOutOfBounds(operation, path, index, length) {}
+function getDefProp(schema, prop) {
+	return schema.def[prop];
+}
+function getTypeName(schema) {
+	return getDefProp(schema, "typeName");
+}
+function isZodObject(schema) {
+	return getTypeName(schema) === "ZodObject";
+}
+function isZodArray(schema) {
+	return getTypeName(schema) === "ZodArray";
+}
+function unwrapSchema(schema) {
+	const typeName = getTypeName(schema);
+	const innerType = getDefProp(schema, "innerType");
+	const schemaType = getDefProp(schema, "schema");
+	if ((typeName === "ZodOptional" || typeName === "ZodNullable" || typeName === "ZodDefault") && innerType) return unwrapSchema(innerType);
+	if (typeName === "ZodEffects" && schemaType) return unwrapSchema(schemaType);
+	return schema;
+}
 function createFormContext(options) {
 	const formData = (0, vue.reactive)({});
 	const defaultValues = (0, vue.reactive)({});
@@ -92,6 +163,13 @@ function createFormContext(options) {
 	const debounceTimers = /* @__PURE__ */ new Map();
 	const validationRequestIds = /* @__PURE__ */ new Map();
 	const resetGeneration = (0, vue.ref)(0);
+	const isDisabled = (0, vue.ref)(false);
+	if (options.disabled !== void 0) {
+		isDisabled.value = (0, vue.toValue)(options.disabled) ?? false;
+		(0, vue.watch)(() => (0, vue.toValue)(options.disabled), (newDisabled) => {
+			isDisabled.value = newDisabled ?? false;
+		});
+	}
 	if (options.values !== void 0) {
 		const initialValues = (0, vue.toValue)(options.values);
 		if (initialValues && !isAsyncDefaults) {
@@ -141,6 +219,7 @@ function createFormContext(options) {
 		debounceTimers,
 		validationRequestIds,
 		resetGeneration,
+		isDisabled,
 		options
 	};
 }
@@ -191,12 +270,23 @@ function createFieldError(errors, criteriaMode = "firstError") {
 	};
 }
 function createValidation(ctx) {
+	function applyNativeValidation(fieldPath, errorMessage) {
+		if (!ctx.options.shouldUseNativeValidation) return;
+		const el = ctx.fieldRefs.get(fieldPath)?.value;
+		if (el && "setCustomValidity" in el) el.setCustomValidity(errorMessage || "");
+	}
+	function clearAllNativeValidation() {
+		if (!ctx.options.shouldUseNativeValidation) return;
+		for (const [path] of ctx.fieldRefs) applyNativeValidation(path, null);
+	}
 	function scheduleError(fieldPath, error) {
 		const delayMs = ctx.options.delayError || 0;
+		const errorMessage = typeof error === "string" ? error : error.message;
 		if (delayMs <= 0) {
 			const newErrors = { ...ctx.errors.value };
 			set(newErrors, fieldPath, error);
 			ctx.errors.value = newErrors;
+			applyNativeValidation(fieldPath, errorMessage);
 			return;
 		}
 		const existingTimer = ctx.errorDelayTimers.get(fieldPath);
@@ -210,6 +300,7 @@ function createValidation(ctx) {
 				const newErrors = { ...ctx.errors.value };
 				set(newErrors, fieldPath, pendingError);
 				ctx.errors.value = newErrors;
+				applyNativeValidation(fieldPath, errorMessage);
 			}
 		}, delayMs);
 		ctx.errorDelayTimers.set(fieldPath, timer);
@@ -221,6 +312,7 @@ function createValidation(ctx) {
 			ctx.errorDelayTimers.delete(fieldPath);
 		}
 		ctx.pendingErrors.delete(fieldPath);
+		applyNativeValidation(fieldPath, null);
 		return clearFieldErrors$1(ctx.errors.value, fieldPath);
 	}
 	function clearAllPendingErrors() {
@@ -241,6 +333,7 @@ function createValidation(ctx) {
 				else {
 					clearAllPendingErrors();
 					ctx.errors.value = {};
+					clearAllNativeValidation();
 				}
 				return true;
 			}
@@ -394,6 +487,7 @@ function createFieldRegistration(ctx, validate) {
 			ref: handlers.refCallback,
 			onInput: handlers.onInput,
 			onBlur: handlers.onBlur,
+			...ctx.isDisabled.value && { disabled: true },
 			...registerOptions?.controlled && { value: (0, vue.computed)({
 				get: () => get(ctx.formData, name),
 				set: (val) => {
@@ -488,11 +582,11 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 		};
 		const append = (value, focusOptions) => {
 			const values = normalizeToArray(value);
-			if (values.length === 0) return;
+			if (values.length === 0) return true;
 			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;
+			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return false;
 			const newValues = [...currentValues, ...values];
 			set(ctx.formData, name, newValues);
 			const newItems = values.map(() => createItem(generateId()));
@@ -504,13 +598,14 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 			};
 			if (ctx.options.mode === "onChange") validate(name);
 			handleFocus(insertIndex, values.length, focusOptions);
+			return true;
 		};
 		const prepend = (value, focusOptions) => {
 			const values = normalizeToArray(value);
-			if (values.length === 0) return;
+			if (values.length === 0) return true;
 			const currentValues = get(ctx.formData, name) || [];
 			const rules = fa.rules;
-			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return;
+			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return false;
 			const newValues = [...values, ...currentValues];
 			set(ctx.formData, name, newValues);
 			const newItems = values.map(() => createItem(generateId()));
@@ -522,10 +617,11 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 			};
 			if (ctx.options.mode === "onChange") validate(name);
 			handleFocus(0, values.length, focusOptions);
+			return true;
 		};
 		const update = (index, value) => {
 			const currentValues = get(ctx.formData, name) || [];
-			if (index < 0 || index >= currentValues.length) return;
+			if (index < 0 || index >= currentValues.length) return false;
 			const newValues = [...currentValues];
 			newValues[index] = value;
 			set(ctx.formData, name, newValues);
@@ -534,12 +630,13 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
+			return true;
 		};
 		const removeAt = (index) => {
 			const currentValues = get(ctx.formData, name) || [];
-			if (index < 0 || index >= currentValues.length) return;
+			if (index < 0 || index >= currentValues.length) return false;
 			const rules = fa.rules;
-			if (rules?.minLength && currentValues.length - 1 < rules.minLength.value) return;
+			if (rules?.minLength && currentValues.length - 1 < rules.minLength.value) return false;
 			const newValues = currentValues.filter((_, i) => i !== index);
 			set(ctx.formData, name, newValues);
 			const keyToRemove = fa.items.value[index]?.key;
@@ -550,13 +647,14 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
+			return true;
 		};
 		const insert = (index, value, focusOptions) => {
 			const values = normalizeToArray(value);
-			if (values.length === 0) return;
+			if (values.length === 0) return true;
 			const currentValues = get(ctx.formData, name) || [];
 			const rules = fa.rules;
-			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return;
+			if (rules?.maxLength && currentValues.length + values.length > rules.maxLength.value) return false;
 			const clampedIndex = Math.max(0, Math.min(index, currentValues.length));
 			const newValues = [
 				...currentValues.slice(0, clampedIndex),
@@ -577,10 +675,11 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 			};
 			if (ctx.options.mode === "onChange") validate(name);
 			handleFocus(clampedIndex, values.length, focusOptions);
+			return true;
 		};
 		const swap = (indexA, indexB) => {
 			const currentValues = get(ctx.formData, name) || [];
-			if (indexA < 0 || indexB < 0 || indexA >= currentValues.length || indexB >= currentValues.length) return;
+			if (indexA < 0 || indexB < 0 || indexA >= currentValues.length || indexB >= currentValues.length) return false;
 			const newValues = [...currentValues];
 			[newValues[indexA], newValues[indexB]] = [newValues[indexB], newValues[indexA]];
 			set(ctx.formData, name, newValues);
@@ -598,10 +697,11 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
+			return true;
 		};
 		const move = (from, to) => {
 			const currentValues = get(ctx.formData, name) || [];
-			if (from < 0 || from >= currentValues.length || to < 0) return;
+			if (from < 0 || from >= currentValues.length || to < 0) return false;
 			const newValues = [...currentValues];
 			const [removed] = newValues.splice(from, 1);
 			if (removed !== void 0) {
@@ -622,9 +722,10 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
+			return true;
 		};
 		const replace = (newValues) => {
-			if (!Array.isArray(newValues)) return;
+			if (!Array.isArray(newValues)) return false;
 			set(ctx.formData, name, newValues);
 			fa.items.value = newValues.map(() => createItem(generateId()));
 			rebuildIndexCache();
@@ -633,12 +734,48 @@ function createFieldArrayManager(ctx, validate, setFocus) {
 				[name]: true
 			};
 			if (ctx.options.mode === "onChange") validate(name);
+			return true;
+		};
+		const removeAll = () => {
+			const rules = fa.rules;
+			if (rules?.minLength && rules.minLength.value > 0) return false;
+			set(ctx.formData, name, []);
+			fa.items.value = [];
+			rebuildIndexCache();
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+			return true;
+		};
+		const removeMany = (indices) => {
+			const currentValues = get(ctx.formData, name) || [];
+			const validIndices = indices.filter((i) => i >= 0 && i < currentValues.length);
+			if (validIndices.length === 0) return true;
+			const rules = fa.rules;
+			const remainingCount = currentValues.length - validIndices.length;
+			if (rules?.minLength && remainingCount < rules.minLength.value) return false;
+			const sortedIndices = [...new Set(validIndices)].sort((a, b) => b - a);
+			const indicesToRemove = new Set(sortedIndices);
+			const newValues = currentValues.filter((_, i) => !indicesToRemove.has(i));
+			set(ctx.formData, name, newValues);
+			fa.items.value = fa.items.value.filter((_, i) => !indicesToRemove.has(i));
+			rebuildIndexCache();
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+			return true;
 		};
 		return {
 			value: fa.items.value,
 			append,
 			prepend,
 			remove: removeAt,
+			removeAll,
+			removeMany,
 			insert,
 			swap,
 			move,
@@ -702,11 +839,14 @@ function useForm(options) {
 	}
 	const setFocusWrapper = (name) => setFocus(name);
 	const { fields } = createFieldArrayManager(ctx, validate, setFocusWrapper);
-	const formState = (0, vue.computed)(() => {
-		const mergedErrors = {
+	function getMergedErrors() {
+		return {
 			...ctx.errors.value,
 			...ctx.externalErrors.value
 		};
+	}
+	const formState = (0, vue.computed)(() => {
+		const mergedErrors = getMergedErrors();
 		return {
 			errors: mergedErrors,
 			isDirty: Object.keys(ctx.dirtyFields.value).some((k) => ctx.dirtyFields.value[k]),
@@ -721,12 +861,14 @@ function useForm(options) {
 			submitCount: ctx.submitCount.value,
 			defaultValuesError: ctx.defaultValuesError.value,
 			isSubmitted: ctx.submitCount.value > 0,
-			isSubmitSuccessful: ctx.isSubmitSuccessful.value
+			isSubmitSuccessful: ctx.isSubmitSuccessful.value,
+			disabled: ctx.isDisabled.value
 		};
 	});
 	function handleSubmit(onValid, onInvalid) {
 		return async (e) => {
 			e.preventDefault();
+			if (ctx.isDisabled.value) return;
 			if (ctx.isSubmitting.value) return;
 			ctx.isSubmitting.value = true;
 			ctx.submitCount.value++;
@@ -758,9 +900,6 @@ function useForm(options) {
 		}
 		if (setValueOptions?.shouldValidate) validate(name);
 	}
-	function getValue(name) {
-		return get(ctx.formData, name);
-	}
 	function reset(values, resetOptions) {
 		const opts = resetOptions || {};
 		ctx.resetGeneration.value++;
@@ -836,6 +975,28 @@ function useForm(options) {
 		} : error.message);
 		ctx.errors.value = newErrors;
 	}
+	function setErrors(errors, options$1) {
+		const newErrors = options$1?.shouldReplace ? {} : { ...ctx.errors.value };
+		for (const [name, error] of Object.entries(errors)) {
+			if (error === void 0) continue;
+			set(newErrors, name, typeof error === "string" ? error : error.type ? {
+				type: error.type,
+				message: error.message
+			} : error.message);
+		}
+		ctx.errors.value = newErrors;
+	}
+	function hasErrors(fieldPath) {
+		const mergedErrors = getMergedErrors();
+		if (fieldPath === void 0) return Object.keys(mergedErrors).length > 0;
+		const error = get(mergedErrors, fieldPath);
+		return error !== void 0 && error !== null;
+	}
+	function getErrors(fieldPath) {
+		const mergedErrors = getMergedErrors();
+		if (fieldPath === void 0) return mergedErrors;
+		return get(mergedErrors, fieldPath);
+	}
 	function getValues(nameOrNames) {
 		syncUncontrolledInputs(ctx.fieldRefs, ctx.fieldOptions, ctx.formData);
 		if (nameOrNames === void 0) return { ...ctx.formData };
@@ -871,13 +1032,15 @@ function useForm(options) {
 		formState,
 		fields,
 		setValue,
-		getValue,
 		reset,
 		resetField,
 		watch: watch$1,
 		validate,
 		clearErrors,
 		setError,
+		setErrors,
+		hasErrors,
+		getErrors,
 		getValues,
 		getFieldState,
 		trigger,
@@ -910,10 +1073,10 @@ function useController(options) {
 	const { name, control, defaultValue } = options;
 	const form = control ?? useFormContext();
 	const elementRef = (0, vue.ref)(null);
-	if (defaultValue !== void 0 && form.getValue(name) === void 0) form.setValue(name, defaultValue);
+	if (defaultValue !== void 0 && form.getValues(name) === void 0) form.setValue(name, defaultValue);
 	const value = (0, vue.computed)({
 		get: () => {
-			return form.getValue(name) ?? defaultValue;
+			return form.getValues(name) ?? defaultValue;
 		},
 		set: (newValue) => {
 			form.setValue(name, newValue);