notform 1.0.7 → 2.0.0-alpha.0

package/dist/index.js

@@ -1,569 +0,0 @@
-import { computed, createBlock, createTextVNode, defineComponent, guardReactiveProps, inject, mergeProps, nextTick, normalizeProps, onMounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useAttrs, useId, vShow, withCtx, withDirectives } from "vue";
-import { getProperty, parsePath, setProperty } from "dot-prop";
-import { isEqual } from "es-toolkit/predicate";
-
-//#region src/utils/not-form-context.ts
-/** Internal registry mapping form IDs to their injection keys */
-const notFormContextKeys = /* @__PURE__ */ new Map();
-/** Injection key for the unique identifier of the current active form */
-const CURRENT_NOT_FORM_ID_KEY = Symbol("notform:id");
-/**
-* Retrieves an existing injection key or creates a new one for a form ID.
-* @template TSchema The validation schema type derived from ObjectSchema.
-* @param id The unique string identifier for the form.
-* @returns A strictly typed InjectionKey for the form context.
-*/
-function getNotFormContextKey(id) {
-	if (!notFormContextKeys.has(id)) {
-		const key = Symbol(`notform:${id}:context`);
-		notFormContextKeys.set(id, key);
-	}
-	return notFormContextKeys.get(id);
-}
-/**
-* Locates and returns the active form context associated with a given ID.
-* @template TSchema The validation schema type derived from ObjectSchema.
-* @param id The unique identifier of the form to access.
-* @returns The resolved form context object.
-* @throws Error if the context cannot be found in the current component tree.
-*/
-function withContext(id) {
-	const context = inject(getNotFormContextKey(id));
-	if (!context) throw new Error(`No form context found for form with id "${id}"`);
-	return context;
-}
-
-//#endregion
-//#region src/components/not-form.vue?vue&type=script&setup=true&lang.ts
-/**
-* Provides form context and a structural wrapper for form fields.
-* @template TSchema The validation schema type derived from ObjectSchema.
-*/
-var not_form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "not-form",
-	props: {
-		id: {
-			type: String,
-			required: true
-		},
-		asChild: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		as: {
-			type: String,
-			required: false,
-			default: "form"
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		/**
-		* Slots provided by the Form component.
-		*/
-		const attributes = useAttrs();
-		const form = withContext(props.id);
-		const mergedAttrs = computed(() => ({
-			...attributes,
-			id: form.id
-		}));
-		provide(CURRENT_NOT_FORM_ID_KEY, form.id);
-		return (_ctx, _cache) => {
-			return props.asChild ? renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 0 }, {
-				...unref(form),
-				attributes: mergedAttrs.value
-			}))) : (openBlock(), createBlock(resolveDynamicComponent(props.as), normalizeProps(mergeProps({ key: 1 }, mergedAttrs.value)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(form))))]),
-				_: 3
-			}, 16));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/not-form.vue
-var not_form_default = not_form_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/not-field.vue?vue&type=script&setup=true&lang.ts
-/**
-* Component for individual form fields.
-* Manages field-level state, validation triggers, and events.
-*/
-var not_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "not-field",
-	props: { name: {
-		type: String,
-		required: true
-	} },
-	setup(__props) {
-		const props = __props;
-		/**
-		* Slots provided by the NotField component.
-		*/
-		const formID = inject(CURRENT_NOT_FORM_ID_KEY);
-		if (!formID) throw new Error("NotField must be used inside a NotForm component");
-		const { mode, validateOn, touchedFields, dirtyFields, validateField, getFieldErrors, touchField, dirtyField } = withContext(formID);
-		/**
-		* Triggers validation for this specific field.
-		* @returns Promise resolving to the validation result.
-		*/
-		async function validate() {
-			return await validateField(props.name);
-		}
-		/**
-		* The consolidated reactive state exposed to the component's template.
-		*/
-		const context = reactive({
-			name: computed(() => props.name),
-			errors: computed(() => getFieldErrors(props.name).map((error) => error.message)),
-			isTouched: computed(() => touchedFields.value.has(props.name)),
-			isDirty: computed(() => dirtyFields.value.has(props.name)),
-			isValid: computed(() => getFieldErrors(props.name).length === 0),
-			validate,
-			methods: {
-				onBlur: function() {
-					touchField(props.name);
-					if (!validateOn.includes("blur")) return;
-					validate();
-				},
-				onChange: function() {
-					dirtyField(props.name);
-					if (!validateOn.includes("change")) return;
-					if (mode === "lazy") return;
-					if (mode === "eager" && getFieldErrors(props.name).length > 0) validate();
-				},
-				onInput: function() {
-					dirtyField(props.name);
-					if (!validateOn.includes("input")) return;
-					if (mode === "lazy") return;
-					if (mode === "eager" && getFieldErrors(props.name).length > 0) validate();
-				},
-				onFocus: function() {
-					if (!validateOn.includes("focus")) return;
-					validate();
-				}
-			}
-		});
-		onMounted(async () => {
-			await nextTick();
-			if (validateOn.includes("mount")) await validate();
-		});
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context)));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/not-field.vue
-var not_field_default = not_field_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/not-message.vue?vue&type=script&setup=true&lang.ts
-/**
-* Displays validation error messages for a specific form field.
-* @template TSchema The validation schema type derived from ObjectSchema.
-*/
-var not_message_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "not-message",
-	props: {
-		name: {
-			type: String,
-			required: true
-		},
-		as: {
-			type: String,
-			required: false,
-			default: "span"
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		/**
-		* Slots provided by the Message component.
-		*/
-		const attributes = useAttrs();
-		const formID = inject(CURRENT_NOT_FORM_ID_KEY);
-		if (!formID) throw new Error("Message must be used inside a NotForm component");
-		const { getFieldErrors } = withContext(formID);
-		/**
-		* The reactive state provided to the component's slot.
-		*/
-		const context = reactive({ message: computed(() => getFieldErrors(props.name).map((error) => error.message)[0]) });
-		const mergedAttrs = computed(() => ({
-			...context,
-			attributes
-		}));
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(mergedAttrs.value)), () => [withDirectives((openBlock(), createBlock(resolveDynamicComponent(props.as), normalizeProps(guardReactiveProps(unref(attributes))), {
-				default: withCtx(() => [createTextVNode(toDisplayString(context.message), 1)]),
-				_: 1
-			}, 16)), [[vShow, context.message]])]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/not-message.vue
-var not_message_default = not_message_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/not-array-field.vue?vue&type=script&setup=true&lang.ts
-/**
-* Component for managing array-based form fields.
-* Provides methods for adding, removing, and updating array items.
-* @template TArraySchema Schema for the array field.
-* @template TObjectSchema Parent form object schema.
-*/
-var not_array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "not-array-field",
-	props: {
-		name: {
-			type: String,
-			required: true
-		},
-		schema: {
-			type: null,
-			required: true
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		/**
-		* Slots provided by the NotArrayField component.
-		*/
-		const formID = inject(CURRENT_NOT_FORM_ID_KEY);
-		if (!formID) throw new Error("NotArrayField must be used inside a NotForm component");
-		const { state, validateField, getFieldErrors } = withContext(formID);
-		/**
-		* Reactive bridge between the form state and the specific array field.
-		*/
-		const arrayState = computed({
-			get() {
-				const fieldValue = getProperty(state.value, props.name);
-				return Array.isArray(fieldValue) ? fieldValue : [];
-			},
-			set(value) {
-				setProperty(state.value, props.name, value);
-				validateField(props.name);
-			}
-		});
-		/**
-		* Computes individual field contexts for each item in the array.
-		*/
-		const fields = computed(() => {
-			return arrayState.value.map((value, index) => {
-				return {
-					key: index,
-					index,
-					value,
-					first: index === 0,
-					last: index === arrayState.value.length - 1
-				};
-			});
-		});
-		/**
-		* Adds a new item to the end of the array.
-		* @param data The initial data for the new item.
-		*/
-		function append(data) {
-			arrayState.value = [...arrayState.value, data];
-		}
-		/**
-		* Adds a new item to the beginning of the array.
-		* @param data The initial data for the new item.
-		*/
-		function prepend(data) {
-			arrayState.value = [data, ...arrayState.value];
-		}
-		/**
-		* Removes the item at the specified index.
-		* @param index The index of the item to remove.
-		*/
-		function remove(index) {
-			const newArray = [...arrayState.value];
-			newArray.splice(index, 1);
-			arrayState.value = newArray;
-		}
-		/**
-		* Inserts a new item at a specific index.
-		* @param index The insertion index.
-		* @param data The initial data for the new item.
-		*/
-		function insert(index, data) {
-			const newArray = [...arrayState.value];
-			newArray.splice(index, 0, data);
-			arrayState.value = newArray;
-		}
-		/**
-		* Replaces the data at a specific index.
-		* @param index The target index.
-		* @param data The new data to apply.
-		*/
-		function update(index, data) {
-			const newArray = [...arrayState.value];
-			newArray[index] = data;
-			arrayState.value = newArray;
-		}
-		/**
-		* Reactive context object exposed to the NotArrayField slot.
-		*/
-		const context = reactive({
-			name: computed(() => props.name),
-			errors: computed(() => getFieldErrors(props.name).map((error) => error.message)),
-			fields,
-			append,
-			prepend,
-			remove,
-			insert,
-			update
-		});
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context)));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/not-array-field.vue
-var not_array_field_default = not_array_field_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/utils/helpers.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, i) => {
-		const normalizedSegment = normalizeSegment(segment);
-		const targetSegment = targetPath[i];
-		if (typeof normalizedSegment === "number" || typeof targetSegment === "number") return Number(normalizedSegment) === Number(targetSegment);
-		return normalizedSegment === targetSegment;
-	});
-}
-/**
-* Recursively retrieves all reachable paths of an object as dot-separated strings.
-* @param object The object to traverse.
-* @param prefix An optional prefix to prepended to each generated path.
-* @returns An array of string paths representing the object's structure.
-*/
-function getObjectPaths(object, prefix = "") {
-	let paths = [];
-	if (typeof object !== "object" || object === null) return paths;
-	for (const key in object) if (Object.prototype.hasOwnProperty.call(object, key)) {
-		const value = object[key];
-		const isArray = Array.isArray(object);
-		const isInt = /^\d+$/.test(key);
-		let currentKey = key;
-		if (isArray && isInt) currentKey = `[${key}]`;
-		const path = prefix ? prefix.endsWith("]") || currentKey.startsWith("[") ? `${prefix}${currentKey}` : `${prefix}.${currentKey}` : currentKey;
-		paths.push(path);
-		if (typeof value === "object" && value !== null) paths = paths.concat(getObjectPaths(value, path));
-	}
-	return paths;
-}
-
-//#endregion
-//#region src/composables/use-not-form.ts
-/**
-* Initializes a form instance with validation logic, reactive state, and lifecycle methods.
-* @template TSchema The validation schema type derived from ObjectSchema.
-* @param options Configuration object for the form behavior and initial state.
-* @returns The gathered form context object.
-*/
-function useNotForm(options) {
-	const { id = useId(), schema: _schema, initialErrors: _initialErrors = [], initialState: _initialState = {}, mode = "eager", validateOn = [
-		"blur",
-		"input",
-		"change"
-	], onValidate, onReset, onError, onSubmit } = options;
-	/** Active validation schema reference */
-	const schema = computed(() => toValue(_schema));
-	/** Baseline reactive state at creation */
-	const initialState = structuredClone(_initialState);
-	/** Baseline validation issues at creation */
-	const initialErrors = structuredClone(_initialErrors);
-	/** Internal state set by last custom reset */
-	const onResetState = ref(null);
-	/** Internal errors set by last custom reset */
-	const onResetErrors = ref(null);
-	/** The unified reactive context for the form instance */
-	const context = {
-		id,
-		schema,
-		initialState,
-		initialErrors,
-		mode,
-		validateOn,
-		state: ref(structuredClone(initialState)),
-		errors: ref([...initialErrors]),
-		isValidating: ref(false),
-		isSubmitting: ref(false),
-		touchedFields: ref(/* @__PURE__ */ new Set()),
-		dirtyFields: ref(/* @__PURE__ */ new Set()),
-		isValid: computed(() => context.errors.value.length === 0),
-		isTouched: computed(() => context.touchedFields.value.size > 0),
-		isDirty: computed(() => context.dirtyFields.value.size > 0),
-		async validate() {
-			context.isValidating.value = true;
-			try {
-				const result = await context.schema.value["~standard"].validate(context.state.value);
-				if (result.issues) {
-					context.errors.value = [...result.issues];
-					onError?.([...result.issues]);
-					return { issues: result.issues };
-				}
-				if (onValidate) {
-					const customResult = await onValidate(result.value);
-					if (customResult === false) {
-						const formLevelError = {
-							message: "Validation failed",
-							path: []
-						};
-						context.errors.value = [formLevelError];
-						onError?.([formLevelError]);
-						return { issues: [formLevelError] };
-					}
-					if (Array.isArray(customResult) && customResult.length > 0) {
-						context.errors.value = customResult;
-						onError?.(customResult);
-						return { issues: customResult };
-					}
-				}
-				context.errors.value = [];
-				return { value: result.value };
-			} finally {
-				context.isValidating.value = false;
-			}
-		},
-		async validateField(path) {
-			context.isValidating.value = true;
-			try {
-				const result = await context.schema.value["~standard"].validate(context.state.value);
-				const pathArray = parsePath(path);
-				context.errors.value = context.errors.value.filter((error) => !isIssuePathEqual(error.path, pathArray));
-				if (result.issues) {
-					const errorsForPath = result.issues.filter((error) => isIssuePathEqual(error.path, pathArray));
-					if (errorsForPath.length > 0) {
-						context.errors.value = [...context.errors.value, ...errorsForPath];
-						return { issues: errorsForPath };
-					}
-					return { value: getProperty(context.state.value, path) };
-				}
-				return { value: getProperty(result.value, path) };
-			} finally {
-				context.isValidating.value = false;
-			}
-		},
-		reset(_state, _errors, _validate = false) {
-			if (_state) {
-				onResetState.value = structuredClone(_state);
-				context.state.value = structuredClone(_state);
-			} else {
-				onResetState.value = null;
-				context.state.value = structuredClone(initialState);
-			}
-			if (_errors) {
-				onResetErrors.value = structuredClone(_errors);
-				context.errors.value = [..._errors];
-			} else {
-				onResetErrors.value = null;
-				context.errors.value = [...initialErrors];
-			}
-			context.touchedFields.value.clear();
-			context.dirtyFields.value.clear();
-			onReset?.();
-			if (_validate) context.validate();
-		},
-		setState(_state, _validate = true) {
-			context.state.value = {
-				...context.state.value,
-				..._state
-			};
-			getObjectPaths(_state).forEach((path) => {
-				context.touchedFields.value.add(path);
-				if (!isEqual(getProperty(context.state.value, path), getProperty(onResetState.value ?? initialState, path))) context.dirtyFields.value.add(path);
-				else context.dirtyFields.value.delete(path);
-				if (_validate) context.validateField(path);
-			});
-		},
-		setErrors(_errors) {
-			context.errors.value = [...context.errors.value, ..._errors];
-		},
-		clearErrors() {
-			context.errors.value = [];
-		},
-		getFieldErrors(field) {
-			const pathArray = parsePath(field);
-			return context.errors.value.filter((error) => isIssuePathEqual(error.path, pathArray));
-		},
-		touchField(field) {
-			context.touchedFields.value.add(field);
-		},
-		touchAllFields() {
-			const paths = getObjectPaths(context.state.value);
-			context.touchedFields.value = new Set(paths);
-		},
-		dirtyField(field) {
-			if (!isEqual(getProperty(context.state.value, field), getProperty(onResetState.value ?? initialState, field))) context.dirtyFields.value.add(field);
-			else context.dirtyFields.value.delete(field);
-		},
-		dirtyAllFields() {
-			const paths = getObjectPaths(context.state.value);
-			const newDirty = /* @__PURE__ */ new Set();
-			paths.forEach((path) => {
-				if (!isEqual(getProperty(context.state.value, path), getProperty(onResetState.value ?? initialState, path))) newDirty.add(path);
-			});
-			context.dirtyFields.value = newDirty;
-		},
-		async submit(event) {
-			context.isSubmitting.value = true;
-			try {
-				context.touchAllFields();
-				context.dirtyAllFields();
-				const result = await context.validate();
-				if (result.issues) {
-					event.preventDefault();
-					const errors = [...result.issues];
-					context.errors.value = errors;
-					onError?.(errors);
-					return;
-				}
-				if (onSubmit) {
-					event.preventDefault();
-					await onSubmit(result.value);
-				}
-			} catch {
-				event.preventDefault();
-				onError?.([{
-					message: "An unexpected error occurred during submission",
-					path: []
-				}]);
-			} finally {
-				context.isSubmitting.value = false;
-			}
-		}
-	};
-	provide(getNotFormContextKey(id), context);
-	return context;
-}
-var use_not_form_default = useNotForm;
-
-//#endregion
-export { not_array_field_default as NotArrayField, not_field_default as NotField, not_form_default as NotForm, not_message_default as NotMessage, use_not_form_default as useNotForm };

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "notform",
-  "version": "1.0.7",
+  "version": "2.0.0-alpha.0",
   "type": "module",
   "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
   "description": "Vue Forms Without the Friction",
   "author": "Favour Emeka <favorodera@gmail.com>",
   "license": "MIT",
@@ -17,14 +14,8 @@
   "bugs": {
     "url": "https://github.com/favorodera/notform/issues"
   },
-  "module": "./dist/index.js",
-  "main": "./dist/index.js",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
@@ -32,35 +23,28 @@
     "dist"
   ],
   "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
   "devDependencies": {
-    "@stylistic/eslint-plugin": "^5.7.0",
-    "@types/node": "^25.0.10",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/browser-playwright": "^4.0.16",
-    "@vitest/eslint-plugin": "^1.6.6",
-    "@vitest/ui": "^4.0.17",
-    "@vue/eslint-config-typescript": "^14.6.0",
-    "eslint": "^9.39.2",
-    "eslint-plugin-vue": "^10.7.0",
-    "playwright": "^1.57.0",
-    "tsdown": "^0.18.1",
-    "type-fest": "^5.4.1",
-    "typescript": "^5.9.3",
-    "unplugin-vue": "^7.1.0",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16",
-    "vitest-browser-vue": "^2.0.1",
-    "vue": "^3.5.25",
-    "vue-tsc": "^3.2.2"
+    "@types/node": "^25.5.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.8.9",
+    "tsdown": "^0.21.7",
+    "type-fest": "^5.5.0",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2",
+    "vue": "^3.5.31",
+    "vue-tsc": "^3.2.6"
   },
   "dependencies": {
     "@standard-schema/spec": "^1.1.0",
-    "dot-prop": "^10.1.0",
     "es-toolkit": "^1.45.1"
   },
-  "engines": {
-    "node": ">=24.0.0"
-  },
   "keywords": [
     "notform",
     "vue",
@@ -69,13 +53,18 @@
     "validator",
     "vue form validator"
   ],
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "inlinedDependencies": {
+    "type-fest": "5.5.0"
+  },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
     "test": "vitest",
     "test:watch": "vitest watch --ui",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --fix",
-    "cleanup": "rm -rf dist node_modules .turbo package-lock.json"
+    "lint": "eslint . --fix"
   }
 }