notform 2.0.0-beta.2 → 2.1.0-alpha.0

package/README.md

@@ -1,13 +1,12 @@
 # notform
 
-[![npm version](https://img.shields.io/npm/v/notform.svg?style=flat-square)](https://www.npmjs.com/package/notform)
-[![npm downloads](https://img.shields.io/npm/dm/notform.svg?style=flat-square)](https://www.npmjs.com/package/notform)
-[![license](https://img.shields.io/github/license/favorodera/notform.svg?style=flat-square)](https://github.com/favorodera/notform/blob/main/LICENSE)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/notform.svg?style=flat-square)](https://bundlephobia.com/package/notform)
+[![npm version](https://img.shields.io/npm/v/notform.svg?style=plastic)](https://npmx.dev/package/notform)
+[![npm downloads](https://img.shields.io/npm/dm/notform.svg?style=plastic)](https://npmx.dev/package/notform)
+[![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/notform?style=plastic)](https://npmx.dev/package/notform)
 
-**The core engine for "Vue Forms Without the Friction."**
+**The core engine for NotForm**
 
-`notform` is the backbone of the NotForm ecosystem, providing the core composables and state management logic for building robust forms in Vue 3.
+`notform` is the backbone of the NotForm ecosystem, providing the core composables, components and state management logic for building robust forms in Vue 3.
 
 ## Documentation
 

package/dist/index.d.ts

@@ -92,7 +92,9 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    *
    * Use with `v-model` for two-way binding:
    * ```vue
-   * <input v-model="form.values.email" />
+   * <template>
+   *   <input v-model="form.values.email" />
+   * </template>
    * ```
    */
   values: StandardSchemaV1.InferInput<TSchema>;
@@ -133,7 +135,9 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    *
    * Convenient for direct template access without calling `getFieldErrors`:
    * ```vue
-   * <p>{{ form.errorsMap['address.city'] }}</p>
+   * <template>
+   *   <p>{{ form.errorsMap['address.city'] }}</p>
+   * </template>
    * ```
    */
   errorsMap: ComputedRef<Partial<Record<Paths<StandardSchemaV1.InferInput<TSchema>>, string>>>;
@@ -173,7 +177,10 @@ type NotFormInstance<TSchema extends ObjectSchema> = Raw<{
    * Bind to the native form's `@submit` event:
    *
    * ```vue
-   * <form @submit="form.submit">
+   * <template>
+   *   <form @submit="form.submit">
+   *   </form>
+   * </template>
    * ```
    */
   submit: (event: Event) => Promise<void>;
@@ -217,24 +224,6 @@ type __VLS_WithSlots$1<T, S> = T & {
 };
 //#endregion
 //#region src/types/not-field.d.ts
-/**
- * Native DOM event handlers exposed by a field.
- * Spread onto a native input or bind individually to custom components.
- *
- * ```vue
- * <!-- spread -->
- * <input v-bind="events" />
- *
- * <!-- individual -->
- * <CustomCombobox @focusout="onBlur" @pick="onChange" />
- * ```
- */
-type NotFieldEvents = {
-  /** Triggered when the field loses focus. */onBlur: () => void; /** Triggered on every keystroke or value change. */
-  onInput: () => void; /** Triggered when the field value is committed. */
-  onChange: () => void; /** Triggered when the field gains focus. */
-  onFocus: () => void;
-};
 /** Props for the `NotField` component. */
 type NotFieldProps = {
   /** Dot-separated path to this field within the form values. */path: string;
@@ -244,9 +233,11 @@ type NotFieldProps = {
    * Required when using `NotField` outside of a `NotForm` (singleton fields).
    *
    * ```vue
-   * <NotField :form="form" path="email" v-slot="{ events }">
-   *   <input v-bind="events" />
-   * </NotField>
+   * <template>
+   *   <NotField :form="form" path="email" v-slot="{ events }">
+   *     <input v-bind="events" />
+   *   </NotField>
+   * </template>
    * ```
    */
   form?: NotFormInstance<any>;
@@ -255,8 +246,10 @@ type NotFieldProps = {
    * Merged over the form-wide `validateOn` — only the keys you specify are overridden.
    *
    * ```vue
-   * <!-- form validates on blur only, but this field also validates on every input -->
-   * <NotField :validateOn="{ onInput: true }" path="username" />
+   * <template>
+   *   <!-- form validates on blur only, but this field also validates on every input -->
+   *   <NotField :validateOn="{ onInput: true }" path="username" />
+   * </template>
    * ```
    */
   validateOn?: Partial<Record<ValidationTrigger, boolean>>;
@@ -272,10 +265,12 @@ type NotFieldProps = {
    * of this setting, so the field never feels unresponsive when the user leaves.
    *
    * ```vue
-   * <!-- validate 400ms after the user stops typing -->
-   * <NotField path="username" :debounce="400" v-slot="{ events }">
-   *   <input v-model="form.values.username" v-bind="events" />
-   * </NotField>
+   * <template>
+   *   <!-- validate 400ms after the user stops typing -->
+   *   <NotField path="username" :debounce="400" v-slot="{ events }">
+   *     <input v-model="form.values.username" v-bind="events" />
+   *   </NotField>
+   * </template>
    * ```
    *
    * Omit or set to `0` to disable debouncing (default behaviour).
@@ -305,17 +300,25 @@ type NotFieldSlotProps<TSchema extends ObjectSchema> = {
    */
   validate: () => ReturnType<NotFormInstance<TSchema>['validateField']>;
   /**
-   * All event handlers combined — spread directly onto native inputs.
+   * Native DOM event handlers exposed by a field.
+   * Spread onto a native input or bind individually to custom components.
    *
    * ```vue
-   * <input v-bind="events" />
+   * <template>
+   *   <!-- spread -->
+   *   <input v-bind="events" />
+   *
+   *   <!-- individual -->
+   *   <CustomCombobox @focusout="events.onBlur" @pick="events.onChange" />
+   * </template>
    * ```
    */
-  events: NotFieldEvents; /** Triggered when the field loses focus. */
-  onBlur: NotFieldEvents['onBlur']; /** Triggered on every keystroke or value change. */
-  onInput: NotFieldEvents['onInput']; /** Triggered when the field value is committed. */
-  onChange: NotFieldEvents['onChange']; /** Triggered when the field gains focus. */
-  onFocus: NotFieldEvents['onFocus'];
+  events: {
+    /** Triggered when the field loses focus. */onBlur: () => void; /** Triggered on every keystroke or value change. */
+    onInput: () => void; /** Triggered when the field value is committed. */
+    onChange: () => void; /** Triggered when the field gains focus. */
+    onFocus: () => void;
+  };
 };
 /**
  * Slots for the `NotField` component.
@@ -351,7 +354,9 @@ type NotMessageProps = {
    * Required when using `NotMessage` outside of a `NotForm` (singleton fields).
    *
    * ```vue
-   * <NotMessage :form="form" path="email" />
+   * <template>
+   *   <NotMessage :form="form" path="email" />
+   * </template>
    * ```
    */
   form?: NotFormInstance<any>;
@@ -388,9 +393,11 @@ type NotArrayFieldProps<TItemSchema extends StandardSchemaV1 = StandardSchemaV1>
    * Enables typed `append`, `prepend`, `insert`, and `update` methods in the slot.
    *
    * ```vue
-   * <NotArrayField path="tags" :item-schema="z.string()">
-   *   <!-- append now expects a string -->
-   * </NotArrayField>
+   * <template>
+   *   <NotArrayField path="tags" :item-schema="z.string()">
+   *     <!-- append now expects a string -->
+   *   </NotArrayField>
+   * </template>
    * ```
    */
   itemSchema?: TItemSchema;
@@ -411,11 +418,13 @@ type NotArrayFieldProps<TItemSchema extends StandardSchemaV1 = StandardSchemaV1>
  * Use `key` for `v-for` tracking and `path` to pass to a nested `NotField`.
  *
  * ```vue
- * <NotArrayField path="tags" v-slot="{ items }">
- *   <NotField v-for="item in items" :key="item.key" :path="item.path" v-slot="{ events }">
- *     <input v-model="form.values.tags[item.index]" v-bind="events" />
- *   </NotField>
- * </NotArrayField>
+ * <template>
+ *   <NotArrayField path="tags" v-slot="{ items }">
+ *     <NotField v-for="item in items" :key="item.key" :path="item.path" v-slot="{ events }">
+ *       <input v-model="form.values.tags[item.index]" v-bind="events" />
+ *     </NotField>
+ *   </NotArrayField>
+ * </template>
  * ```
  */
 type NotArrayFieldItem = {
@@ -513,4 +522,4 @@ declare const __VLS_export: <TSchema extends ObjectSchema, TItemSchema extends S
 declare const _default: typeof __VLS_export;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
-export { DeepPartial, _default as NotArrayField, NotArrayFieldItem, NotArrayFieldProps, NotArrayFieldSlotProps, NotArrayFieldSlots, _default$1 as NotField, NotFieldEvents, NotFieldProps, NotFieldSlotProps, NotFieldSlots, _default$2 as NotForm, NotFormInstance, NotFormProps, NotFormSlots, _default$3 as NotMessage, NotMessageProps, NotMessageSlotProps, NotMessageSlots, ObjectSchema, Paths, UseNotFormConfig, ValidationMode, ValidationTrigger, useNotForm };
+export { DeepPartial, _default as NotArrayField, NotArrayFieldItem, NotArrayFieldProps, NotArrayFieldSlotProps, NotArrayFieldSlots, _default$1 as NotField, NotFieldProps, NotFieldSlotProps, NotFieldSlots, _default$2 as NotForm, NotFormInstance, NotFormProps, NotFormSlots, _default$3 as NotMessage, NotMessageProps, NotMessageSlotProps, NotMessageSlots, ObjectSchema, Paths, UseNotFormConfig, ValidationMode, ValidationTrigger, useNotForm };

package/dist/index.js

@@ -394,12 +394,6 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 		const onFocus = () => {
 			if (validateOn.value.onFocus) scheduleValidation();
 		};
-		const events = computed(() => ({
-			onBlur,
-			onInput,
-			onChange,
-			onFocus
-		}));
 		onMounted(async () => {
 			await nextTick();
 			if (validateOn.value.onMount) validate();
@@ -414,11 +408,12 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 			isDirty: isDirty.value,
 			isValidating: isValidating.value,
 			validate,
-			events: events.value,
-			onBlur,
-			onInput,
-			onChange,
-			onFocus
+			events: {
+				onBlur,
+				onInput,
+				onChange,
+				onFocus
+			}
 		}));
 		return (_ctx, _cache) => {
 			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notform",
-  "version": "2.0.0-beta.2",
+  "version": "2.1.0-alpha.0",
   "type": "module",
   "private": false,
   "description": "Vue Forms Without the Friction",