notform 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/index.js

@@ -1,36 +1,268 @@
-import { computed, createElementBlock, defineComponent, guardReactiveProps, inject, normalizeProps, openBlock, provide, reactive, renderSlot, 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, deleteProperty, getProperty, hasProperty, parsePath, setProperty } from "dot-prop";
+//#region src/utils/form-utils.ts
+/**
+* Normalizes a validation path segment into a standard property key.
+* @param segment The path segment to normalize.
+* @returns The normalized key.
+*/
+function normalizeSegment(segment) {
+	if (typeof segment === "object" && segment !== null && "key" in segment) return segment.key;
+	return segment;
+}
+/**
+* Checks if a validation issue path matches a target field path.
+* @param issuePath The path array from the validation issue.
+* @param targetPath The normalized path to compare against.
+* @returns True if the paths are equivalent.
+*/
+function isIssuePathEqual(issuePath, targetPath) {
+	if (!issuePath) return false;
+	if (issuePath.length !== targetPath.length) return false;
+	return issuePath.every((segment, index) => {
+		const normalizedSegment = normalizeSegment(segment);
+		const targetSegment = targetPath[index];
+		if (typeof normalizedSegment === "number" || typeof targetSegment === "number") return Number(normalizedSegment) === Number(targetSegment);
+		return normalizedSegment === targetSegment;
+	});
+}
+//#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 = {
+		onBlur: config.validateOn?.onBlur ?? true,
+		onChange: config.validateOn?.onChange ?? true,
+		onInput: config.validateOn?.onInput ?? true,
+		onMount: config.validateOn?.onMount ?? false,
+		onFocus: config.validateOn?.onFocus ?? false
+	};
+	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.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 setValue = (path, value) => {
+		setProperty(values, path, value);
+		if (dequal(value, getProperty(initialValues, path))) unDirtyField(path);
+		else dirtyField(path);
+	};
+	const touchField = (path) => {
+		touchedFields.add(path);
+	};
+	const dirtyField = (path) => {
+		dirtyFields.add(path);
+	};
+	const setError = (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.splice(0, errors.length, ...newIssues);
+	};
+	const clearErrors = () => {
+		errors.splice(0, errors.length);
+	};
+	const getFieldErrors = (path) => {
+		const pathSegments = parsePath(path);
+		return errors.filter((error) => isIssuePathEqual(error.path, pathSegments));
+	};
+	const validate = async () => {
+		isValidating.value = true;
+		try {
+			const result = await runSchema();
+			if (result?.issues) {
+				setErrors([...result.issues]);
+				return { issues: result.issues };
+			}
+			clearErrors();
+			return { value: result.value };
+		} finally {
+			isValidating.value = false;
+		}
+	};
+	const validateField = async (path) => {
+		isValidating.value = true;
+		try {
+			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, pathSegments));
+				if (fieldIssues.length > 0) {
+					errors.push(...fieldIssues);
+					return { issues: fieldIssues };
+				}
+				return { value: getProperty(values, path) };
+			}
+			return { value: getProperty(result.value, path) };
+		} finally {
+			isValidating.value = false;
+		}
+	};
+	const submit = async (event) => {
+		isSubmitting.value = true;
+		try {
+			touchAllFields();
+			dirtyAllFields();
+			const result = await validate();
+			if (result?.issues) {
+				event.preventDefault();
+				return;
+			}
+			if (config.onSubmit) {
+				event.preventDefault();
+				await config.onSubmit(result.value);
+			}
+		} catch {
+			event.preventDefault();
+		} finally {
+			isSubmitting.value = false;
+		}
+	};
+	const reset = (newValues, newErrors) => {
+		if (newValues) initialValues = klona(newValues);
+		if (newErrors) initialErrors = klona(newErrors);
+		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();
+	};
+	return markRaw({
+		initialValues,
+		initialErrors,
+		validateOn,
+		validationMode,
+		values,
+		setValue,
+		touchedFields,
+		touchField,
+		isTouched,
+		dirtyFields,
+		dirtyField,
+		isDirty,
+		errors,
+		errorsMap,
+		setError,
+		setErrors,
+		clearErrors,
+		getFieldErrors,
+		isValidating,
+		validate,
+		validateField,
+		isValid,
+		isSubmitting,
+		submit,
+		reset
+	});
+}
+//#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 :form=\"...\"> 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);
 		};
@@ -47,25 +279,90 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 			required: true
 		},
 		form: {
+			type: null,
+			required: false
+		},
+		validateOn: {
 			type: Object,
 			required: false
 		}
 	},
 	setup(__props) {
 		const props = __props;
-		const formInstance = useNotFormInstance(props.form);
-		const path = computed(() => props.path);
-		const errors = formInstance.getFieldErrors(path.value);
-		const validate = () => formInstance.validateField(path.value);
-		const fieldInstance = reactive({
-			path: path.value,
-			errors,
-			validate
+		const form = useNotFormInstance(props.form);
+		const validateOn = computed(() => ({
+			...form.validateOn,
+			...props.validateOn
+		}));
+		const isValidating = ref(false);
+		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 form.validateField(props.path);
+			} finally {
+				isValidating.value = false;
+			}
+		};
+		const onBlur = () => {
+			form.touchField(props.path);
+			if (validateOn.value.onBlur) validate();
+		};
+		const onInput = () => {
+			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 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)));
 		};
 	}
 });
 //#endregion
-export { not_field_default as NotField, not_form_default as NotForm };
+export { not_field_default as NotField, not_form_default as NotForm, useNotForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notform",
-  "version": "2.0.0-alpha.2",
+  "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",