@vuehookform/core 0.1.0

package/dist/vuehookform.js

@@ -0,0 +1,637 @@
+import { computed, inject, provide, reactive, ref, shallowRef } from "vue";
+function get(obj, path) {
+	if (!path) return obj;
+	const keys = path.split(".");
+	let result = obj;
+	for (const key of keys) {
+		if (result === null || result === void 0) return;
+		result = result[key];
+	}
+	return result;
+}
+function set(obj, path, value) {
+	if (!path) return;
+	const keys = path.split(".");
+	const UNSAFE_KEYS = [
+		"__proto__",
+		"constructor",
+		"prototype"
+	];
+	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];
+			current[key] = nextKey && /^\d+$/.test(nextKey) ? [] : {};
+		}
+		current = current[key];
+	}
+	current[lastKey] = value;
+}
+function unset(obj, path) {
+	if (!path) return;
+	const keys = path.split(".");
+	const lastKey = keys.pop();
+	let current = obj;
+	for (const key of keys) {
+		if (!(key in current)) return;
+		current = current[key];
+	}
+	delete current[lastKey];
+}
+var idCounter = 0;
+function generateId() {
+	return `field_${Date.now()}_${idCounter++}`;
+}
+function createFormContext(options) {
+	const formData = reactive({});
+	const defaultValues = reactive({});
+	const isAsyncDefaults = typeof options.defaultValues === "function";
+	const isLoading = ref(isAsyncDefaults);
+	if (isAsyncDefaults) {
+		const asyncFn = options.defaultValues;
+		asyncFn().then((values) => {
+			Object.assign(defaultValues, values);
+			Object.assign(formData, values);
+			isLoading.value = false;
+		}).catch((error) => {
+			console.error("Failed to load async default values:", error);
+			isLoading.value = false;
+		});
+	} else if (options.defaultValues) {
+		Object.assign(defaultValues, options.defaultValues);
+		Object.assign(formData, defaultValues);
+	}
+	return {
+		formData,
+		defaultValues,
+		errors: shallowRef({}),
+		touchedFields: ref({}),
+		dirtyFields: ref({}),
+		isSubmitting: ref(false),
+		isLoading,
+		submitCount: ref(0),
+		fieldRefs: /* @__PURE__ */ new Map(),
+		fieldOptions: /* @__PURE__ */ new Map(),
+		fieldArrays: /* @__PURE__ */ new Map(),
+		debounceTimers: /* @__PURE__ */ new Map(),
+		validationRequestIds: /* @__PURE__ */ new Map(),
+		options
+	};
+}
+function clearFieldErrors(errors, fieldPath) {
+	const newErrors = { ...errors };
+	for (const key of Object.keys(newErrors)) if (key === fieldPath || key.startsWith(`${fieldPath}.`)) delete newErrors[key];
+	return newErrors;
+}
+function groupErrorsByPath(issues) {
+	const grouped = /* @__PURE__ */ new Map();
+	for (const issue of issues) {
+		const path = issue.path.join(".");
+		const existing = grouped.get(path) || [];
+		existing.push({
+			type: issue.code,
+			message: issue.message
+		});
+		grouped.set(path, existing);
+	}
+	return grouped;
+}
+function createFieldError(errors) {
+	if (errors.length === 1) return errors[0].message;
+	const types = {};
+	for (const err of errors) {
+		const existing = types[err.type];
+		if (existing) types[err.type] = Array.isArray(existing) ? [...existing, err.message] : [existing, err.message];
+		else types[err.type] = err.message;
+	}
+	return {
+		type: errors[0].type,
+		message: errors[0].message,
+		types
+	};
+}
+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;
+		}
+		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);
+				return true;
+			}
+			let 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;
+			return 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 };
+}
+function createFieldRegistration(ctx, validate) {
+	function register(name, registerOptions) {
+		const fieldRef = ref(null);
+		ctx.fieldRefs.set(name, fieldRef);
+		if (registerOptions) ctx.fieldOptions.set(name, registerOptions);
+		if (get(ctx.formData, name) === void 0) {
+			const defaultValue = get(ctx.defaultValues, name);
+			if (defaultValue !== void 0) set(ctx.formData, name, defaultValue);
+		}
+		const runCustomValidation = async (fieldName, value, requestId) => {
+			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 (error) ctx.errors.value = {
+				...ctx.errors.value,
+				[fieldName]: error
+			};
+			else {
+				const newErrors = { ...ctx.errors.value };
+				delete newErrors[fieldName];
+				ctx.errors.value = newErrors;
+			}
+		};
+		const onInput = async (e) => {
+			const target = e.target;
+			const value = target.type === "checkbox" ? target.checked : target.value;
+			set(ctx.formData, name, value);
+			ctx.dirtyFields.value = {
+				...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);
+			const fieldOpts = ctx.fieldOptions.get(name);
+			if (fieldOpts?.validate && !fieldOpts.disabled) {
+				const requestId = Date.now() + Math.random();
+				ctx.validationRequestIds.set(name, requestId);
+				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);
+					}, debounceMs);
+					ctx.debounceTimers.set(name, timer);
+				} else await runCustomValidation(name, value, requestId);
+			}
+		};
+		const onBlur = async (_e) => {
+			ctx.touchedFields.value = {
+				...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);
+		};
+		const refCallback = (el) => {
+			const previousEl = fieldRef.value;
+			fieldRef.value = el;
+			if (el && !registerOptions?.controlled && el instanceof HTMLInputElement) {
+				const value = get(ctx.formData, name);
+				if (value !== void 0) if (el.type === "checkbox") el.checked = value;
+				else el.value = value;
+			}
+			if (previousEl && !el) {
+				if (registerOptions?.shouldUnregister ?? ctx.options.shouldUnregister ?? false) {
+					unset(ctx.formData, name);
+					const newErrors = { ...ctx.errors.value };
+					delete newErrors[name];
+					ctx.errors.value = newErrors;
+					const newTouched = { ...ctx.touchedFields.value };
+					delete newTouched[name];
+					ctx.touchedFields.value = newTouched;
+					const newDirty = { ...ctx.dirtyFields.value };
+					delete newDirty[name];
+					ctx.dirtyFields.value = newDirty;
+					ctx.fieldRefs.delete(name);
+					ctx.fieldOptions.delete(name);
+					const timer = ctx.debounceTimers.get(name);
+					if (timer) {
+						clearTimeout(timer);
+						ctx.debounceTimers.delete(name);
+					}
+					ctx.validationRequestIds.delete(name);
+				}
+			}
+		};
+		return {
+			name,
+			ref: refCallback,
+			onInput,
+			onBlur,
+			...registerOptions?.controlled && { value: computed({
+				get: () => get(ctx.formData, name),
+				set: (val) => {
+					set(ctx.formData, name, val);
+					ctx.dirtyFields.value = {
+						...ctx.dirtyFields.value,
+						[name]: true
+					};
+				}
+			}) }
+		};
+	}
+	function unregister(name) {
+		ctx.fieldRefs.delete(name);
+		ctx.fieldOptions.delete(name);
+		const timer = ctx.debounceTimers.get(name);
+		if (timer) {
+			clearTimeout(timer);
+			ctx.debounceTimers.delete(name);
+		}
+		ctx.validationRequestIds.delete(name);
+	}
+	return {
+		register,
+		unregister
+	};
+}
+function createFieldArrayManager(ctx, validate) {
+	function fields(name) {
+		let fieldArray = ctx.fieldArrays.get(name);
+		if (!fieldArray) {
+			const existingValues = get(ctx.formData, name) || [];
+			fieldArray = {
+				items: ref([]),
+				values: existingValues
+			};
+			ctx.fieldArrays.set(name, fieldArray);
+			if (!get(ctx.formData, name)) set(ctx.formData, name, []);
+		}
+		const fa = fieldArray;
+		const createItem = (key) => ({
+			key,
+			get index() {
+				return fa.items.value.findIndex((item) => item.key === key);
+			},
+			remove() {
+				const currentIndex = fa.items.value.findIndex((item) => item.key === key);
+				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];
+			set(ctx.formData, name, newValues);
+			fa.items.value = [...fa.items.value, createItem(generateId())];
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+		};
+		const prepend = (value) => {
+			insert(0, value);
+		};
+		const update = (index, value) => {
+			const currentValues = get(ctx.formData, name) || [];
+			if (index < 0 || index >= currentValues.length) return;
+			const newValues = [...currentValues];
+			newValues[index] = value;
+			set(ctx.formData, name, newValues);
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+		};
+		const removeAt = (index) => {
+			const newValues = (get(ctx.formData, name) || []).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);
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+		};
+		const insert = (index, value) => {
+			const currentValues = get(ctx.formData, name) || [];
+			const newValues = [
+				...currentValues.slice(0, index),
+				value,
+				...currentValues.slice(index)
+			];
+			set(ctx.formData, name, newValues);
+			const newItem = createItem(generateId());
+			fa.items.value = [
+				...fa.items.value.slice(0, index),
+				newItem,
+				...fa.items.value.slice(index)
+			];
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+		};
+		const swap = (indexA, indexB) => {
+			const newValues = [...get(ctx.formData, name) || []];
+			[newValues[indexA], newValues[indexB]] = [newValues[indexB], newValues[indexA]];
+			set(ctx.formData, name, newValues);
+			const newItems = [...fa.items.value];
+			const itemA = newItems[indexA];
+			const itemB = newItems[indexB];
+			if (itemA && itemB) {
+				newItems[indexA] = itemB;
+				newItems[indexB] = itemA;
+				fa.items.value = newItems;
+			}
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+		};
+		const move = (from, to) => {
+			const newValues = [...get(ctx.formData, name) || []];
+			const [removed] = newValues.splice(from, 1);
+			if (removed !== void 0) {
+				newValues.splice(to, 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);
+				fa.items.value = newItems;
+			}
+			ctx.dirtyFields.value = {
+				...ctx.dirtyFields.value,
+				[name]: true
+			};
+			if (ctx.options.mode === "onChange") validate(name);
+		};
+		return {
+			value: fa.items.value,
+			append,
+			prepend,
+			remove: removeAt,
+			insert,
+			swap,
+			move,
+			update
+		};
+	}
+	return { fields };
+}
+function useForm(options) {
+	const ctx = createFormContext(options);
+	const { validate } = createValidation(ctx);
+	const { register, unregister } = createFieldRegistration(ctx, validate);
+	const { fields } = createFieldArrayManager(ctx, validate);
+	const formState = 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 handleSubmit(onValid, onInvalid) {
+		return async (e) => {
+			e.preventDefault();
+			ctx.isSubmitting.value = true;
+			ctx.submitCount.value++;
+			try {
+				for (const [name, fieldRef] of ctx.fieldRefs.entries()) {
+					const el = fieldRef.value;
+					if (el) {
+						if (!ctx.fieldOptions.get(name)?.controlled) {
+							const value = el.type === "checkbox" ? el.checked : el.value;
+							set(ctx.formData, name, value);
+						}
+					}
+				}
+				if (await validate()) await onValid(ctx.formData);
+				else onInvalid?.(ctx.errors.value);
+			} finally {
+				ctx.isSubmitting.value = false;
+			}
+		};
+	}
+	function setValue(name, value) {
+		set(ctx.formData, name, value);
+		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 (options.mode === "onChange" || ctx.touchedFields.value[name]) validate(name);
+	}
+	function getValue(name) {
+		return get(ctx.formData, name);
+	}
+	function reset(values, resetOptions) {
+		const opts = resetOptions || {};
+		if (!opts.keepDefaultValues && values) Object.assign(ctx.defaultValues, values);
+		Object.keys(ctx.formData).forEach((key) => delete ctx.formData[key]);
+		const newValues = values || ctx.defaultValues;
+		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;
+		ctx.fieldArrays.clear();
+		for (const [name, fieldRef] of ctx.fieldRefs.entries()) {
+			const el = fieldRef.value;
+			if (el) {
+				const value = get(newValues, name);
+				if (value !== void 0) if (el.type === "checkbox") el.checked = value;
+				else el.value = value;
+			}
+		}
+	}
+	function watch(name) {
+		return computed(() => {
+			if (!name) return ctx.formData;
+			if (Array.isArray(name)) return name.reduce((acc, n) => {
+				acc[n] = get(ctx.formData, n);
+				return acc;
+			}, {});
+			return get(ctx.formData, name);
+		});
+	}
+	function clearErrors(name) {
+		if (name === void 0) {
+			ctx.errors.value = {};
+			return;
+		}
+		const fieldsToClean = Array.isArray(name) ? name : [name];
+		const newErrors = { ...ctx.errors.value };
+		for (const field of fieldsToClean) for (const key of Object.keys(newErrors)) if (key === field || key.startsWith(`${field}.`)) delete newErrors[key];
+		ctx.errors.value = newErrors;
+	}
+	function setError(name, error) {
+		const newErrors = { ...ctx.errors.value };
+		set(newErrors, name, error.type ? {
+			type: error.type,
+			message: error.message
+		} : error.message);
+		ctx.errors.value = newErrors;
+	}
+	function getValues(nameOrNames) {
+		for (const [name, fieldRef] of ctx.fieldRefs.entries()) {
+			const el = fieldRef.value;
+			if (el) {
+				if (!ctx.fieldOptions.get(name)?.controlled) {
+					const value = el.type === "checkbox" ? el.checked : el.value;
+					set(ctx.formData, name, value);
+				}
+			}
+		}
+		if (nameOrNames === void 0) return { ...ctx.formData };
+		if (Array.isArray(nameOrNames)) {
+			const result = {};
+			for (const fieldName of nameOrNames) result[fieldName] = get(ctx.formData, fieldName);
+			return result;
+		}
+		return get(ctx.formData, nameOrNames);
+	}
+	function getFieldState(name) {
+		const error = get(ctx.errors.value, name);
+		return {
+			isDirty: ctx.dirtyFields.value[name] === true,
+			isTouched: ctx.touchedFields.value[name] === true,
+			invalid: error !== void 0 && error !== null,
+			error
+		};
+	}
+	async function trigger(name) {
+		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;
+		}
+		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,
+		handleSubmit,
+		formState,
+		fields,
+		setValue,
+		getValue,
+		reset,
+		watch,
+		validate,
+		clearErrors,
+		setError,
+		getValues,
+		getFieldState,
+		trigger,
+		setFocus
+	};
+}
+const FormContextKey = Symbol("FormContext");
+function provideForm(methods) {
+	provide(FormContextKey, methods);
+}
+function useFormContext() {
+	const context = inject(FormContextKey);
+	if (!context) throw new Error("useFormContext must be used within a component tree where provideForm() has been called. Make sure to call provideForm(useForm({ schema })) in a parent component.");
+	return context;
+}
+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;
+			return result;
+		}
+		return get(form.getValues(), name) ?? defaultValue;
+	});
+}
+function useController(options) {
+	const { name, control, defaultValue } = options;
+	const form = control ?? useFormContext();
+	const elementRef = ref(null);
+	if (defaultValue !== void 0 && form.getValue(name) === void 0) form.setValue(name, defaultValue);
+	const value = computed({
+		get: () => {
+			return form.getValue(name) ?? defaultValue;
+		},
+		set: (newValue) => {
+			form.setValue(name, newValue);
+		}
+	});
+	const onChange = (newValue) => {
+		form.setValue(name, newValue);
+	};
+	const onBlur = () => {
+		form.trigger(name);
+	};
+	const refCallback = (el) => {
+		elementRef.value = el;
+	};
+	const fieldState = computed(() => {
+		return form.getFieldState(name);
+	});
+	return {
+		field: {
+			value,
+			name,
+			onChange,
+			onBlur,
+			ref: refCallback
+		},
+		fieldState
+	};
+}
+function useFormState(options = {}) {
+	const { control, name } = options;
+	const form = control ?? useFormContext();
+	return computed(() => {
+		const fullState = form.formState.value;
+		if (name === void 0) return { ...fullState };
+		if (Array.isArray(name)) {
+			const result = {};
+			for (const key of name) result[key] = fullState[key];
+			return result;
+		}
+		return { [name]: fullState[name] };
+	});
+}
+export { FormContextKey, provideForm, useController, useForm, useFormContext, useFormState, useWatch };
+
+//# sourceMappingURL=vuehookform.js.map