notform 2.2.2 → 2.2.3

package/README.md

@@ -1,16 +1,14 @@
 <div align="center">
-<h1>notform</h1>
-<p><strong>Vue Forms Without the Friction</strong></p>
+<h1><code>notform</code></h1>
+<p><strong>Headless Form Management, Seamlessly Integrated with Nuxt</strong></p>
 <p>
-<a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/v/notform.svg?style=plastic&label=NPM%20Version&color=blue" alt="NPM Version"></a>
+<a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/v/notform.svg?style=plastic&label=NPM%20Version" alt="NPM Version"></a>
 <a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/dt/notform.svg?style=plastic&label=NPM%20Downloads&color=blue" alt="NPM Downloads"></a>
 <a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/unpacked-size/notform?style=plastic&label=NPM%20Unpacked%20Size&color=blue" alt="NPM Unpacked Size"></a>
 </p>
 </div>
 
-<br>
-
-`notform` is the core package of the NotForm ecosystem. It provides type-safe form validation and state management for Vue 3 applications with minimal boilerplate. Built with TypeScript from the ground up, it offers a composable API that integrates perfectly with Vue 3's Composition API.
+`notform` is the core package of the NotForm ecosystem. It provides headless form validation and state management for Vue 3 applications. Built with TypeScript from the ground up, it offers a composable API that integrates perfectly with Vue 3's Composition API and works with any Standard Schema-compatible validator.
 
 ## Installation
 
@@ -20,16 +18,19 @@ pnpm add notform
 
 ## How It Works
 
-NotForm follows a **composable-first** approach. Forms are managed through the `useNotForm` composable which handles validation, state, and submission logic in a type-safe manner.
+NotForm follows a **headless, composable-first** approach. Forms are managed through the `useNotForm` composable which handles validation, state, and submission logic in a type-safe manner.
 
 Each form consists of:
 
-- **A schema** — Defined using any validation library that supports [Standard Schema](https://standard-schema.dev/) (Zod, Yup, etc.)
+- **A schema** — Defined using any validation library that supports [Standard Schema](https://standardschema.dev) (Zod, Valibot, ArkType, etc.)
 - **Form state** — Managed reactively with full TypeScript support
 - **Validation** — Automatic validation based on your schema with error messages
 - **Submission handling** — Built-in submission lifecycle with loading states
+- **Your UI** — NotForm renders nothing—you bring your own components
+
+## Basic Usage
 
-### Basic Usage
+Import the components and composable you need:
 
 ```vue
 <script setup lang="ts">
@@ -52,7 +53,7 @@ const form = useNotForm({
 <template>
   <NotForm
     :form
-    @submit="form.submit"
+    @submit.prevent="form.submit"
     @reset="form.reset()"
   >
     <NotField
@@ -100,23 +101,104 @@ const form = useNotForm({
 </template>
 ```
 
-### Validation Libraries
+## Array Fields
+
+NotForm includes built-in support for dynamic array fields with add, remove, and reorder operations:
+
+```vue
+<script setup lang="ts">
+import { NotArrayField, NotField, NotForm, NotMessage, useNotForm } from 'notform'
+import { z } from 'zod'
+
+const tagSchema = z.string().min(1, 'Tag cannot be empty')
+
+const schema = z.object({
+  tags: z.array(tagSchema).min(1, 'At least one tag is required'),
+})
+
+const form = useNotForm({
+  schema,
+})
+</script>
+
+<template>
+  <NotForm
+    :form
+    @submit.prevent="form.submit"
+  >
+    <NotArrayField
+      v-slot="{ items, append, remove }"
+      path="tags"
+      :item-schema="tagSchema"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="item.key"
+      >
+        <NotField
+          v-slot="{ events }"
+          :path="item.path"
+        >
+          <input
+            v-bind="events"
+            :id="item.path"
+            v-model="form.values.tags[index]"
+            type="text"
+          >
+        </NotField>
+
+        <button
+          type="button"
+          @click="remove(index)"
+        >
+          Remove
+        </button>
+      </div>
+
+      <button
+        type="button"
+        @click="append('')"
+      >
+        Add Tag
+      </button>
+
+      <NotMessage path="tags" />
+    </NotArrayField>
+  </NotForm>
+</template>
+```
+
+## Validation Libraries
 
 NotForm works with any validation library that implements the Standard Schema interface:
 
 - **Zod** — TypeScript-first schema validation
-- **Yup** — JavaScript schema builder
 - **Valibot** — Modular and type-safe schema validation
+- **ArkType** — High-performance runtime type checking
 - And any other Standard Schema-compatible library
 
+## Components and Composables
+
+### Composables
+
+- `useNotForm` — Main composable for creating form instances
+
+### Components
+
+- `NotForm` — Form wrapper component that provides form context
+- `NotField` — Field component for individual form inputs
+- `NotMessage` — Error message display component
+- `NotArrayField` — Array field component for dynamic form arrays
+
 ## Features
 
+- **Headless** — Renders nothing. You bring the UI, NotForm brings the logic.
+- **Schema-agnostic** — Works with any Standard Schema validator (Zod, Valibot, ArkType, etc.)
 - **Type-safe** — Full TypeScript support with inferred types from your schema
-- **Composable** — Use with Vue 3 Composition API for flexible form management
+- **Composable** — Built for Vue 3 Composition API with a clean, intuitive API
 - **Lightweight** — Tiny footprint with tree-shaking support
-- **Flexible** — Works with any Standard Schema-compatible validation library
 - **Array fields** — Built-in support for dynamic array fields with add/remove operations
-- **Minimal boilerplate** — Get started quickly with simple, intuitive APIs
+- **Flexible** — Use with any UI library—native HTML, Nuxt UI, Shadcn, or your own components
 
 ## Documentation
 
@@ -126,4 +208,3 @@ For detailed guides, API reference, and examples, visit:
 ## License
 
 [MIT](../../LICENSE) &copy; [Favour Emeka](https://github.com/favorodera)
-

package/dist/index.d.ts

@@ -215,7 +215,7 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    * </template>
    * ```
    */
-  submit: (event: Event) => Promise<void>;
+  submit: (event: SubmitEvent) => Promise<void>;
   /**
    * Resets the form to its initial state, or to new values and errors if provided.
    *

package/dist/index.js

@@ -185,12 +185,12 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		const form = useNotFormInstance(props.form);
 		const isValidating = ref(false);
 		/** Counter to ensure absolute uniqueness for generated keys. */
-		let keyCounter = 0;
+		const keyCounter = ref(0);
 		/** Stable keys per item that survive reorders, removals, and inserts. */
 		const itemKeys = ref((() => {
 			const initial = getProperty(form.values, props.path);
 			const length = Array.isArray(initial) ? initial.length : 0;
-			return Array.from({ length }, () => `${props.path}-${keyCounter++}`);
+			return Array.from({ length }, () => `${props.path}-${keyCounter.value++}`);
 		})());
 		const validateOn = computed(() => ({
 			onChange: props.validateOn?.onChange ?? form.validateOn.onChange,
@@ -220,7 +220,7 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		* @returns A unique key string
 		*/
 		function generateKey() {
-			return `${props.path}-${keyCounter++}`;
+			return `${props.path}-${keyCounter.value++}`;
 		}
 		/** Re-aligns itemKeys with current array length (used mostly after external resets) */
 		function syncKeys() {
@@ -259,7 +259,9 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		*/
 		function append(value) {
 			itemKeys.value.push(generateKey());
-			mutate((current) => current.push(value));
+			mutate((current) => {
+				current.push(value);
+			});
 		}
 		/**
 		* Prepends an item to the array
@@ -268,7 +270,9 @@ var not_array_field_default = /* @__PURE__ */ defineComponent({
 		function prepend(value) {
 			itemKeys.value.unshift(generateKey());
 			remapArrayFieldState(form, props.path, (previousIndex) => previousIndex + 1);
-			mutate((current) => current.unshift(value));
+			mutate((current) => {
+				current.unshift(value);
+			});
 		}
 		/**
 		* Removes an item from the array
@@ -400,7 +404,7 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 		const form = useNotFormInstance(props.form);
 		const isValidating = ref(false);
 		/** Timer handle for the current pending debounced validation. */
-		let debounceTimer;
+		const debounceTimer = ref();
 		/** Merges per-field overrides with the form-wide validation config */
 		const validateOn = computed(() => ({
 			...form.validateOn,
@@ -413,10 +417,9 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 		const isDirty = computed(() => form.dirtyFields.has(props.path));
 		/** Cancels pending debounced validation on blur/unmount to prevent rogue execution. */
 		function clearDebounce() {
-			if (debounceTimer !== void 0) {
-				clearTimeout(debounceTimer);
-				debounceTimer = void 0;
-			}
+			if (debounceTimer.value === void 0) return;
+			clearTimeout(debounceTimer.value);
+			debounceTimer.value = void 0;
 		}
 		/** Compares current value against baseline to sync dirty state tracking. */
 		function updateDirty() {
@@ -430,7 +433,7 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 				return;
 			}
 			clearDebounce();
-			debounceTimer = setTimeout(validate, props.debounce);
+			debounceTimer.value = setTimeout(validate, props.debounce);
 		}
 		/**
 		* Validates the field and returns the validation result.
@@ -575,9 +578,10 @@ function useNotForm(config) {
 	const isTouched = computed(() => touchedFields.size > 0);
 	const errorsMap = computed(() => {
 		const result = {};
-		for (const issue of errors) if (issue.path) {
+		for (const issue of errors) {
+			if (!issue.path) continue;
 			const path = issue.path.map((element) => normalizeSegment(element)).join(".");
-			if (path && !result[path]) result[path] = issue.message;
+			if (path && !Object.hasOwn(result, path)) result[path] = issue.message;
 		}
 		return result;
 	});
@@ -672,7 +676,7 @@ function useNotForm(config) {
 	}
 	/** Clears all error issues from the errors array. */
 	function clearErrors() {
-		errors.splice(0);
+		errors.length = 0;
 	}
 	/**
 	* Retrieves all error issues associated with a specific field path.
@@ -732,21 +736,14 @@ function useNotForm(config) {
 	* @param event The submit event.
 	*/
 	async function submit(event) {
+		event.preventDefault();
 		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();
+			if (result?.issues) return;
+			if (config.onSubmit) await config.onSubmit(result.value);
 		} finally {
 			isSubmitting.value = false;
 		}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "notform",
   "type": "module",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": false,
   "description": "Vue Forms Without the Friction",
   "author": "Favour Emeka <favorodera@gmail.com>",
@@ -49,18 +49,18 @@
     "klona": "^2.0.6"
   },
   "devDependencies": {
-    "@favorodera/eslint-config": "^1.0.4",
+    "@favorodera/eslint-config": "^1.1.2",
     "@types/node": "^26.2.0",
     "@vitejs/plugin-vue": "^6.0.8",
-    "@vitest/ui": "^4.1.10",
+    "@vitest/ui": "^4.1.11",
     "@vue/test-utils": "^2.4.11",
-    "happy-dom": "^20.11.2",
+    "happy-dom": "^20.11.6",
     "tsdown": "^0.22.14",
     "type-fest": "^5.7.0",
-    "vite": "^8.2.1",
-    "vitest": "^4.1.10",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11",
     "vue": "^3.0.0",
-    "vue-tsc": "^3.3.9"
+    "vue-tsc": "^3.3.11"
   },
   "scripts": {
     "build": "tsdown",