notform 2.0.0-alpha.4 → 2.0.0-alpha.5

package/README.md

@@ -1,29 +1,16 @@
-# vue-components-starter
+# notform
 
-A starter for creating a Vue component library.
+[![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)
 
-## Development
+**The core engine for "Vue Forms Without the Friction."**
 
-- Install dependencies:
+`notform` is the backbone of the NotForm ecosystem, providing the core composables and state management logic for building robust forms in Vue 3.
 
-```bash
-npm install
-```
+## Documentation
 
-- Run the playground:
+For detailed guides, API reference, and examples, visit:
+**[notform-docs.vercel.app](https://notform-docs.vercel.app/)**
 
-```bash
-npm run playground
-```
-
-- Run the unit tests:
-
-```bash
-npm run test
-```
-
-- Build the library:
-
-```bash
-npm run build
-```

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _$vue from "vue";
-import { ComputedRef, MaybeRefOrGetter, Raw, Ref } from "vue";
+import { ComputedRef, MaybeRefOrGetter, Raw, Ref, useAttrs } from "vue";
 import { StandardSchemaV1 } from "@standard-schema/spec";
 import { Get, PartialDeep, Paths as Paths$1 } from "type-fest";
 
@@ -217,11 +217,11 @@ type NotFormSlots = {
 declare function useNotForm<TSchema extends ObjectSchema>(config: UseNotFormConfig<TSchema>): NotFormInstance<TSchema>;
 //#endregion
 //#region src/components/not-form.vue.d.ts
-type __VLS_Slots = NotFormSlots;
-declare const __VLS_base: _$vue.DefineComponent<NotFormProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<NotFormProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$1: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default$1: typeof __VLS_export$1;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_Slots$1 = NotFormSlots;
+declare const __VLS_base$1: _$vue.DefineComponent<NotFormProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<NotFormProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$2: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default$1: typeof __VLS_export$2;
+type __VLS_WithSlots$1<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -316,7 +316,7 @@ type NotFieldSlots<TSchema extends ObjectSchema> = {
 };
 //#endregion
 //#region src/components/not-field.vue.d.ts
-declare const __VLS_export: <TSchema extends ObjectSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export$1: <TSchema extends ObjectSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<NotFieldProps> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
@@ -327,7 +327,46 @@ declare const __VLS_export: <TSchema extends ObjectSchema>(__VLS_props: NonNulla
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
+declare const _default: typeof __VLS_export$1;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
-export { ArraySchema, DeepPartial, _default as NotField, NotFieldEvents, NotFieldProps, NotFieldSlotProps, NotFieldSlots, _default$1 as NotForm, NotFormInstance, NotFormProps, NotFormSlots, ObjectSchema, Paths, UseNotFormConfig, ValidationMode, ValidationTrigger, useNotForm };
+//#region src/types/not-message.d.ts
+/** Props for the `NotMessage` component. */
+type NotMessageProps = {
+  /** The name/path of the field whose error message should be displayed */path: string; /** HTML Tag `NotMessage` should render as - default is `span`. */
+  as?: string;
+  /**
+   * Explicit form instance override.
+   * Takes priority over the instance provided by a `NotForm` ancestor.
+   * Required when using `NotMessage` outside of a `NotForm` (singleton fields).
+   *
+   * ```vue
+   * <NotMessage :form="form" path="email" />
+   * ```
+   */
+  form?: NotFormInstance<any>;
+};
+/** Everything available inside the `NotMessage` default slot. */
+type NotMessageSlotProps = {
+  /** The first active validation error message for the specified field */message?: string; /** Attributes passed to the `NotMessage` component */
+  attributes?: ReturnType<typeof useAttrs>;
+};
+/** Slots for the `NotMessage` component. */
+type NotMessageSlots = {
+  /** The default slot receives the error message context for custom rendering */default: (props: NotMessageSlotProps) => [];
+};
+//#endregion
+//#region src/components/not-message.vue.d.ts
+type __VLS_Slots = NotMessageSlots;
+declare const __VLS_base: _$vue.DefineComponent<NotMessageProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<NotMessageProps> & Readonly<{}>, {
+  as: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$2: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { ArraySchema, DeepPartial, _default as NotField, NotFieldEvents, NotFieldProps, NotFieldSlotProps, NotFieldSlots, _default$1 as NotForm, NotFormInstance, NotFormProps, NotFormSlots, _default$2 as NotMessage, NotMessageProps, NotMessageSlotProps, NotMessageSlots, ObjectSchema, Paths, UseNotFormConfig, ValidationMode, ValidationTrigger, useNotForm };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed, createElementBlock, defineComponent, guardReactiveProps, inject, markRaw, nextTick, normalizeProps, onMounted, openBlock, provide, reactive, ref, renderSlot, toValue, unref, useAttrs } from "vue";
+import { computed, createBlock, createElementBlock, createTextVNode, defineComponent, guardReactiveProps, inject, markRaw, nextTick, normalizeProps, onMounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useAttrs, vShow, withCtx, withDirectives } from "vue";
 import { klona } from "klona/full";
 import { dequal } from "dequal";
 import { deepKeys, deleteProperty, getProperty, hasProperty, parsePath, setProperty } from "dot-prop";
@@ -365,4 +365,41 @@ var not_field_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { not_field_default as NotField, not_form_default as NotForm, useNotForm };
+//#region src/components/not-message.vue
+var not_message_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "not-message",
+	props: {
+		path: {
+			type: String,
+			required: true
+		},
+		as: {
+			type: String,
+			required: false,
+			default: "span"
+		},
+		form: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const attributes = useAttrs();
+		const props = __props;
+		const form = useNotFormInstance(props.form);
+		const message = computed(() => form.errorsMap.value[props.path]);
+		const slotProps = computed(() => ({
+			message: message.value,
+			attributes
+		}));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), () => [withDirectives((openBlock(), createBlock(resolveDynamicComponent(props.as), normalizeProps(guardReactiveProps(unref(attributes))), {
+				default: withCtx(() => [createTextVNode(toDisplayString(message.value), 1)]),
+				_: 1
+			}, 16)), [[vShow, message.value]])]);
+		};
+	}
+});
+//#endregion
+export { not_field_default as NotField, not_form_default as NotForm, not_message_default as NotMessage, useNotForm };

package/package.json

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