notform 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/index.js

@@ -1,7 +1,7 @@
-import { computed, createElementBlock, defineComponent, guardReactiveProps, inject, nextTick, normalizeProps, onMounted, openBlock, provide, reactive, ref, renderSlot, toValue, unref, useAttrs } from "vue";
+import { computed, createElementBlock, defineComponent, guardReactiveProps, inject, markRaw, nextTick, normalizeProps, onMounted, openBlock, provide, reactive, ref, renderSlot, toValue, unref, useAttrs } from "vue";
 import { klona } from "klona/full";
 import { dequal } from "dequal";
-import { deepKeys, getProperty, parsePath, setProperty } from "dot-prop";
+import { deepKeys, deleteProperty, getProperty, hasProperty, parsePath, setProperty } from "dot-prop";
 //#region src/utils/form-utils.ts
 /**
 * Normalizes a validation path segment into a standard property key.
@@ -31,6 +31,32 @@ function isIssuePathEqual(issuePath, targetPath) {
 //#endregion
 //#region src/composables/use-not-form.ts
 function useNotForm(config) {
+	/** Runs the schema against the current values and returns the raw result. */
+	const runSchema = () => {
+		return toValue(config.schema)["~standard"].validate(values);
+	};
+	/**
+	* Marks all current leaf paths as touched.
+	* Called internally on submit so all field errors surface at once.
+	*/
+	const touchAllFields = () => {
+		deepKeys(values).forEach((path) => touchedFields.add(path));
+	};
+	/**
+	* Marks all current leaf paths as dirty.
+	* Called internally on submit so required-field errors are not suppressed.
+	*/
+	const dirtyAllFields = () => {
+		deepKeys(values).forEach((path) => dirtyFields.add(path));
+	};
+	/** Removes a path from the dirty set without exposing the operation publicly. */
+	const unDirtyField = (path) => {
+		dirtyFields.delete(path);
+	};
+	/**
+	* Mutable so `reset()` can replace the reference when new values are provided.
+	* Always deep-cloned to prevent external mutation from affecting the baseline.
+	*/
 	let initialValues = klona(config.initialValues ?? {});
 	let initialErrors = klona(config.initialErrors ?? []);
 	const validateOn = {
@@ -40,74 +66,72 @@ function useNotForm(config) {
 		onMount: config.validateOn?.onMount ?? false,
 		onFocus: config.validateOn?.onFocus ?? false
 	};
-	const values = ref(klona(initialValues));
-	const errors = ref([...initialErrors]);
-	const touchedFields = ref(/* @__PURE__ */ new Set());
-	const dirtyFields = ref(/* @__PURE__ */ new Set());
+	const validationMode = {
+		eager: config.validationMode?.eager ?? true,
+		lazy: config.validationMode?.lazy ?? false
+	};
+	/**
+	* Deeply reactive object — access directly as `form.values.email`.
+	* Using `reactive()` instead of `ref()` keeps behaviour consistent
+	* across components, composables, and Pinia stores (which auto-unwrap refs).
+	*/
+	const values = reactive(klona(initialValues));
+	/**
+	* Reactive array mutated in-place to preserve reactivity.
+	* Using `reactive()` instead of `ref()` prevents Pinia from unwrapping
+	* the array and losing its reactive proxy.
+	*/
+	const errors = reactive([...initialErrors]);
 	const isSubmitting = ref(false);
 	const isValidating = ref(false);
+	/**
+	* Reactive Sets using `reactive()` for the same Pinia-compatibility reason
+	* as `errors` above — `ref(new Set())` would be unwrapped to a plain Set.
+	*/
+	const touchedFields = reactive(/* @__PURE__ */ new Set());
+	const dirtyFields = reactive(/* @__PURE__ */ new Set());
+	const isValid = computed(() => errors.length === 0);
+	const isDirty = computed(() => dirtyFields.size > 0);
+	const isTouched = computed(() => touchedFields.size > 0);
 	const errorsMap = computed(() => {
-		return errors.value.reduce((accumulator, issue) => {
-			const path = issue.path?.join(".");
-			if (path && !accumulator[path]) accumulator[path] = issue.message;
-			return accumulator;
+		return errors.reduce((errorsByPath, issue) => {
+			if (!issue.path) return errorsByPath;
+			const path = issue.path.map(normalizeSegment).join(".");
+			if (path && !errorsByPath[path]) errorsByPath[path] = issue.message;
+			return errorsByPath;
 		}, {});
 	});
-	const isDirty = computed(() => dirtyFields.value.size > 0);
-	const isTouched = computed(() => touchedFields.value.size > 0);
-	const isValid = computed(() => errors.value.length === 0);
-	const touchField = (path) => {
-		touchedFields.value.add(path);
-	};
-	const unTouchField = (path) => {
-		touchedFields.value.delete(path);
-	};
-	const touchAllFields = () => {
-		deepKeys(values.value).forEach((path) => touchedFields.value.add(path));
-	};
-	const unTouchAllFields = () => {
-		touchedFields.value.clear();
-	};
-	const dirtyField = (path) => {
-		dirtyFields.value.add(path);
-	};
-	const unDirtyField = (path) => {
-		dirtyFields.value.delete(path);
-	};
-	const dirtyAllFields = () => {
-		deepKeys(values.value).forEach((path) => dirtyFields.value.add(path));
-	};
-	const unDirtyAllFields = () => {
-		dirtyFields.value.clear();
-	};
 	const setValue = (path, value) => {
-		setProperty(values.value, path, value);
-		touchField(path);
+		setProperty(values, path, value);
 		if (dequal(value, getProperty(initialValues, path))) unDirtyField(path);
 		else dirtyField(path);
-		if (validateOn.onChange) validateField(path);
 	};
-	const setValues = (newValues) => {
-		for (const [path, value] of Object.entries(newValues)) setValue(path, value);
+	const touchField = (path) => {
+		touchedFields.add(path);
+	};
+	const dirtyField = (path) => {
+		dirtyFields.add(path);
 	};
 	const setError = (newIssue) => {
-		const newPath = newIssue.path?.join(".");
-		errors.value = [...errors.value.filter((error) => error.path?.join(".") !== newPath), newIssue];
+		const newPath = newIssue.path?.map(normalizeSegment).join(".");
+		const existingIndex = errors.findIndex((error) => error.path?.map(normalizeSegment).join(".") === newPath);
+		if (existingIndex !== -1) errors.splice(existingIndex, 1, newIssue);
+		else errors.push(newIssue);
 	};
 	const setErrors = (newIssues) => {
-		errors.value = [...newIssues];
+		errors.splice(0, errors.length, ...newIssues);
 	};
 	const clearErrors = () => {
-		errors.value = [];
+		errors.splice(0, errors.length);
 	};
 	const getFieldErrors = (path) => {
-		const pathArray = parsePath(path);
-		return errors.value.filter((error) => isIssuePathEqual(error.path, pathArray));
+		const pathSegments = parsePath(path);
+		return errors.filter((error) => isIssuePathEqual(error.path, pathSegments));
 	};
 	const validate = async () => {
 		isValidating.value = true;
 		try {
-			const result = await toValue(config.schema)["~standard"].validate(values.value);
+			const result = await runSchema();
 			if (result?.issues) {
 				setErrors([...result.issues]);
 				return { issues: result.issues };
@@ -121,16 +145,20 @@ function useNotForm(config) {
 	const validateField = async (path) => {
 		isValidating.value = true;
 		try {
-			const result = await toValue(config.schema)["~standard"].validate(values.value);
-			const pathArray = parsePath(path);
-			errors.value = errors.value.filter((error) => !isIssuePathEqual(error.path, pathArray));
+			const result = await runSchema();
+			const pathSegments = parsePath(path);
+			const staleIndices = errors.reduce((indices, error, index) => {
+				if (isIssuePathEqual(error.path, pathSegments)) indices.push(index);
+				return indices;
+			}, []);
+			for (let index = staleIndices.length - 1; index >= 0; index--) errors.splice(staleIndices[index], 1);
 			if (result?.issues) {
-				const fieldIssues = result.issues.filter((issue) => isIssuePathEqual(issue.path, pathArray));
+				const fieldIssues = result.issues.filter((issue) => isIssuePathEqual(issue.path, pathSegments));
 				if (fieldIssues.length > 0) {
-					errors.value = [...errors.value, ...fieldIssues];
+					errors.push(...fieldIssues);
 					return { issues: fieldIssues };
 				}
-				return { value: getProperty(values.value, path) };
+				return { value: getProperty(values, path) };
 			}
 			return { value: getProperty(result.value, path) };
 		} finally {
@@ -160,29 +188,29 @@ function useNotForm(config) {
 	const reset = (newValues, newErrors) => {
 		if (newValues) initialValues = klona(newValues);
 		if (newErrors) initialErrors = klona(newErrors);
-		values.value = klona(initialValues);
-		errors.value = klona(initialErrors);
-		touchedFields.value.clear();
-		dirtyFields.value.clear();
+		const freshValues = klona(initialValues);
+		deepKeys(values).forEach((path) => {
+			if (!hasProperty(freshValues, path)) deleteProperty(values, path);
+		});
+		deepKeys(freshValues).forEach((path) => {
+			setProperty(values, path, getProperty(freshValues, path));
+		});
+		errors.splice(0, errors.length, ...klona(initialErrors));
+		touchedFields.clear();
+		dirtyFields.clear();
 	};
-	const resolvedInstance = {
+	return markRaw({
 		initialValues,
 		initialErrors,
 		validateOn,
+		validationMode,
 		values,
 		setValue,
-		setValues,
 		touchedFields,
 		touchField,
-		unTouchField,
-		touchAllFields,
-		unTouchAllFields,
 		isTouched,
 		dirtyFields,
 		dirtyField,
-		unDirtyField,
-		dirtyAllFields,
-		unDirtyAllFields,
 		isDirty,
 		errors,
 		errorsMap,
@@ -197,43 +225,44 @@ function useNotForm(config) {
 		isSubmitting,
 		submit,
 		reset
-	};
-	resolvedInstance.instance = resolvedInstance;
-	return resolvedInstance;
+	});
 }
 //#endregion
 //#region src/utils/instance-utils.ts
-/** Injection key for the current active form instance */
+/** The injection key for the NotForm instance. */
 const NOT_FORM_INSTANCE_KEY = Symbol("notform:instance");
 /**
-* Provides a form instance to all descendant components.
-* @param instance The form instance to provide.
+* Provides the NotForm instance to the component tree.
+* @param instance The NotForm instance to provide.
 */
 function provideNotFormInstance(instance) {
 	provide(NOT_FORM_INSTANCE_KEY, instance);
 }
 /**
-* Resolves the active form instance from context or an explicit prop override.
-* @param explicitInstance Optional instance passed directly via :form prop — takes priority over injected context.
-* @throws If no instance is found from either source.
+* Retrieves the NotForm instance from the component tree.
+* @param explicitInstance Optional explicit instance to use.
+* @returns The NotForm instance.
 */
 function useNotFormInstance(explicitInstance) {
-	const injected = inject(NOT_FORM_INSTANCE_KEY);
+	const injected = inject(NOT_FORM_INSTANCE_KEY, void 0);
 	const instance = explicitInstance ?? injected;
-	if (!instance) throw new Error("[NotForm] No form instance found. Add a <NotForm :instance=\"...\"> ancestor or pass :form directly.");
+	if (!instance) throw new Error(`
+      [NotForm] No form instance found. 
+      Wrap with <NotForm :form="..."> or pass :form directly to the field.
+    `);
 	return instance;
 }
 //#endregion
 //#region src/components/not-form.vue
 var not_form_default = /* @__PURE__ */ defineComponent({
 	__name: "not-form",
-	props: { instance: {
-		type: Object,
+	props: { form: {
+		type: null,
 		required: true
 	} },
 	setup(__props) {
 		const attributes = useAttrs();
-		provideNotFormInstance(__props.instance);
+		provideNotFormInstance(__props.form);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("form", normalizeProps(guardReactiveProps(unref(attributes))), [renderSlot(_ctx.$slots, "default")], 16);
 		};
@@ -246,11 +275,11 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 	__name: "not-field",
 	props: {
 		path: {
-			type: null,
+			type: String,
 			required: true
 		},
 		form: {
-			type: Object,
+			type: null,
 			required: false
 		},
 		validateOn: {
@@ -260,67 +289,78 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const formInstance = useNotFormInstance(props.form);
+		const form = useNotFormInstance(props.form);
+		const validateOn = computed(() => ({
+			...form.validateOn,
+			...props.validateOn
+		}));
 		const isValidating = ref(false);
-		const path = computed(() => props.path);
-		const value = computed(() => getProperty(formInstance.values.value, props.path));
-		const errors = computed(() => formInstance.getFieldErrors(path.value));
-		const touch = () => formInstance.touchField(path.value);
-		const unTouch = () => formInstance.unTouchField(path.value);
-		const dirty = () => formInstance.dirtyField(path.value);
-		const unDirty = () => formInstance.unDirtyField(path.value);
+		const value = computed(() => getProperty(form.values, props.path));
+		const errors = computed(() => form.getFieldErrors(props.path));
+		const isValid = computed(() => errors.value.length === 0);
+		const isTouched = computed(() => form.touchedFields.has(props.path));
+		const isDirty = computed(() => form.dirtyFields.has(props.path));
+		/**
+		* Syncs dirty state on input or change.
+		* Reads the already-updated value (v-model writes before the event fires)
+		* and compares it against the field's initial value.
+		*/
+		const updateDirty = () => {
+			if (dequal(value.value, getProperty(form.initialValues, props.path))) form.dirtyFields.delete(props.path);
+			else form.dirtyField(props.path);
+		};
 		const validate = async () => {
 			isValidating.value = true;
 			try {
-				return await formInstance.validateField(path.value);
+				return await form.validateField(props.path);
 			} finally {
 				isValidating.value = false;
 			}
 		};
-		const validateOn = computed(() => ({
-			...formInstance.validateOn,
-			...props.validateOn
-		}));
 		const onBlur = () => {
-			touch();
+			form.touchField(props.path);
 			if (validateOn.value.onBlur) validate();
 		};
-		const onChange = () => {
-			if (validateOn.value.onChange) validate();
-		};
 		const onInput = () => {
-			if (validateOn.value.onInput) validate();
+			updateDirty();
+			if (!validateOn.value.onInput) return;
+			if (form.validationMode.eager && errors.value.length > 0) validate();
+		};
+		const onChange = () => {
+			updateDirty();
+			if (!validateOn.value.onChange) return;
+			if (form.validationMode.eager && errors.value.length > 0) validate();
 		};
 		const onFocus = () => {
 			if (validateOn.value.onFocus) validate();
 		};
-		const fieldInstance = reactive({
-			path,
-			value,
-			isValidating,
-			validate,
-			errors,
-			touch,
-			unTouch,
-			dirty,
-			unDirty,
-			events: computed(() => ({
-				onBlur,
-				onInput,
-				onChange,
-				onFocus
-			})),
+		const events = computed(() => ({
 			onBlur,
 			onInput,
 			onChange,
 			onFocus
-		});
+		}));
 		onMounted(async () => {
 			await nextTick();
 			if (validateOn.value.onMount) validate();
 		});
+		const slotProps = computed(() => ({
+			path: props.path,
+			value: value.value,
+			errors: errors.value,
+			isValid: isValid.value,
+			isTouched: isTouched.value,
+			isDirty: isDirty.value,
+			isValidating: isValidating.value,
+			validate,
+			events: events.value,
+			onBlur,
+			onInput,
+			onChange,
+			onFocus
+		}));
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(fieldInstance)));
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notform",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "type": "module",
   "private": false,
   "description": "Vue Forms Without the Friction",
@@ -32,6 +32,7 @@
   "devDependencies": {
     "@types/node": "^25.5.0",
     "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/ui": "^4.1.4",
     "@vue/test-utils": "^2.4.6",
     "happy-dom": "^20.8.9",
     "tsdown": "^0.21.7",
@@ -58,10 +59,6 @@
   "engines": {
     "node": ">=24.13.0"
   },
-  "inlinedDependencies": {
-    "tagged-tag": "1.0.0",
-    "type-fest": "5.5.0"
-  },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",