notform 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -5,9 +5,9 @@ import { PartialDeep, Paths as Paths$1 } from "type-fest";
 
 //#region src/types/shared.d.ts
 /**
- * Defines the strategy for when validation checks are executed.
- * - 'lazy': Validation occurs only on blur or form submission.
- * - 'eager': Validation occurs immediately on every value change.
+ * Validation execution strategy.
+ * - `lazy`: Validates on blur or submission.
+ * - `eager`: Validates on blur, then on every change if an error exists.
  */
 type ValidationMode = 'lazy' | 'eager';
 /**
@@ -262,6 +262,8 @@ type NotFieldSlots = {
 type NotMessageProps = {
   /** The name/path of the field whose error message should be displayed */
   name: string;
+  /** HTML Tag `NotMessage` should render as - default is `span`. */
+  as?: string;
 };
 /**
  * State provided to the NotMessage component's scope.
@@ -275,7 +277,9 @@ type NotMessageContext = {
  */
 type NotMessageSlots = {
   /** The default slot receives the error message context for custom rendering */
-  default: (props: NotMessageContext) => VNodeChild;
+  default: (props: NotMessageContext & {
+    attributes?: ReturnType<typeof useAttrs>;
+  }) => VNodeChild;
 };
 //#endregion
 //#region src/components/not-form.vue.d.ts

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed, createBlock, createElementVNode, defineComponent, guardReactiveProps, inject, mergeProps, nextTick, normalizeProps, onMounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useAttrs, useId, vShow, withCtx, withDirectives } from "vue";
+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";
 
 //#region src/utils/not-form-context.ts
@@ -124,19 +124,24 @@ var not_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			methods: {
 				onBlur: function() {
 					touchField(props.name);
-					if (mode === "eager" || validateOn.includes("blur")) validate();
+					if (!validateOn.includes("blur")) return;
+					validate();
 				},
 				onChange: function() {
 					dirtyField(props.name);
-					if (mode === "eager" || validateOn.includes("change")) validate();
+					if (!validateOn.includes("change")) return;
+					if (mode === "lazy") return;
+					if (mode === "eager" && getFieldErrors(props.name).length > 0) validate();
 				},
 				onInput: function() {
 					dirtyField(props.name);
-					if (mode === "eager" || validateOn.includes("input")) validate();
+					if (!validateOn.includes("input")) return;
+					if (mode === "lazy") return;
+					if (mode === "eager" && getFieldErrors(props.name).length > 0) validate();
 				},
 				onFocus: function() {
-					dirtyField(props.name);
-					if (mode === "eager" || validateOn.includes("focus")) validate();
+					if (!validateOn.includes("focus")) return;
+					validate();
 				}
 			}
 		});
@@ -162,15 +167,23 @@ var not_field_default = not_field_vue_vue_type_script_setup_true_lang_default;
 */
 var not_message_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "not-message",
-	props: { name: {
-		type: String,
-		required: true
-	} },
+	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);
@@ -178,8 +191,15 @@ var not_message_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		* 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(context)), () => [withDirectives(createElementVNode("span", null, toDisplayString(context.message), 513), [[vShow, context.message]])]);
+			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]])]);
 		};
 	}
 });

package/package.json

@@ -5,7 +5,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Vue Forms Without the Friction",
   "author": "Favour Emeka <favorodera@gmail.com>",
   "license": "MIT",