@form-observer/vue 0.9.1 → 1.0.0

package/createFormValidityObserver.cjs

@@ -38,15 +38,15 @@ function createFormValidityObserver(type, options) {
   /* -------------------- Enhancements -------------------- */
   // Add automatic setup/teardown
   observer.autoObserve = function autoObserve(novalidate = true) {
-    /** @type {HTMLFormElement | null} */
+    /** @type {Element | import("vue").ComponentPublicInstance | null} */
     let form;
 
     /** @param {typeof form} vueRef @returns {void} */
     return (vueRef) => {
       if (vueRef) {
         form = vueRef;
-        observer.observe(form);
-        if (novalidate) form.setAttribute("novalidate", "");
+        observer.observe(/** @type {HTMLFormElement} */ (form));
+        if (novalidate) /** @type {HTMLFormElement} */ (form).setAttribute("novalidate", "");
         return;
       }
 
@@ -55,6 +55,16 @@ function createFormValidityObserver(type, options) {
     };
   };
 
+  observer.vAutoObserve = {
+    mounted(form, binding) {
+      observer.observe(form);
+      if (binding.value !== false) form.setAttribute("novalidate", "");
+    },
+    beforeUnmount(form) {
+      observer.unobserve(form);
+    },
+  };
+
   // Enhanced `configure` method
   observer.configure = function configure(name, errorMessages) {
     const keys = /** @type {Array<keyof import("./types.d.cts").VueValidationErrors<M, any, R>>} */ (

package/createFormValidityObserver.d.cts

@@ -9,4 +9,4 @@
  * @param {import("./index.d.cts").FormValidityObserverOptions<M, E, R>} [options]
  * @returns {import("./types.d.cts").VueFormValidityObserver<M, R>}
  */
-export default function createFormValidityObserver<T extends keyof DocumentEventMap | null, M = string, E extends import("@form-observer/core/types").ValidatableField = import("@form-observer/core/types").ValidatableField, R extends boolean = false>(type: T, options?: import("@form-observer/core/FormValidityObserver").FormValidityObserverOptions<M, E, R> | undefined): import("./types.d.cts").VueFormValidityObserver<M, R>;
+export default function createFormValidityObserver<T extends import("./index.d.cts").EventType | null, M = string, E extends import("./index.d.cts").ValidatableField = import("@form-observer/core/types").ValidatableField, R extends boolean = false>(type: T, options?: import("./index.d.cts").FormValidityObserverOptions<M, E, R>): import("./types.d.cts").VueFormValidityObserver<M, R>;

package/createFormValidityObserver.d.ts

@@ -9,4 +9,4 @@
  * @param {import("./index.d.ts").FormValidityObserverOptions<M, E, R>} [options]
  * @returns {import("./types.d.ts").VueFormValidityObserver<M, R>}
  */
-export default function createFormValidityObserver<T extends keyof DocumentEventMap | null, M = string, E extends import("@form-observer/core/types").ValidatableField = import("@form-observer/core/types").ValidatableField, R extends boolean = false>(type: T, options?: import("@form-observer/core/FormValidityObserver").FormValidityObserverOptions<M, E, R> | undefined): import("./types.d.ts").VueFormValidityObserver<M, R>;
+export default function createFormValidityObserver<T extends import("./index.d.ts").EventType | null, M = string, E extends import("./index.d.ts").ValidatableField = import("@form-observer/core/types").ValidatableField, R extends boolean = false>(type: T, options?: import("./index.d.ts").FormValidityObserverOptions<M, E, R>): import("./types.d.ts").VueFormValidityObserver<M, R>;

package/createFormValidityObserver.js

@@ -34,15 +34,15 @@ export default function createFormValidityObserver(type, options) {
   /* -------------------- Enhancements -------------------- */
   // Add automatic setup/teardown
   observer.autoObserve = function autoObserve(novalidate = true) {
-    /** @type {HTMLFormElement | null} */
+    /** @type {Element | import("vue").ComponentPublicInstance | null} */
     let form;
 
     /** @param {typeof form} vueRef @returns {void} */
     return (vueRef) => {
       if (vueRef) {
         form = vueRef;
-        observer.observe(form);
-        if (novalidate) form.setAttribute("novalidate", "");
+        observer.observe(/** @type {HTMLFormElement} */ (form));
+        if (novalidate) /** @type {HTMLFormElement} */ (form).setAttribute("novalidate", "");
         return;
       }
 
@@ -51,6 +51,16 @@ export default function createFormValidityObserver(type, options) {
     };
   };
 
+  observer.vAutoObserve = {
+    mounted(form, binding) {
+      observer.observe(form);
+      if (binding.value !== false) form.setAttribute("novalidate", "");
+    },
+    beforeUnmount(form) {
+      observer.unobserve(form);
+    },
+  };
+
   // Enhanced `configure` method
   observer.configure = function configure(name, errorMessages) {
     const keys = /** @type {Array<keyof import("./types.d.ts").VueValidationErrors<M, any, R>>} */ (

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@form-observer/vue",
   "type": "module",
-  "version": "0.9.1",
+  "version": "1.0.0",
   "sideEffects": false,
   "description": "Convenience functions for the `@form-observer/core` package, designed for Vue apps",
   "exports": {
@@ -29,11 +29,11 @@
     }
   },
   "peerDependencies": {
-    "@form-observer/core": "^0.9.1"
+    "@form-observer/core": "^1.0.0"
   },
   "devDependencies": {
-    "@testing-library/vue": "^8.0.3",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^6.0.3",
     "vue": "^3.3.6"
   },
   "author": "Isaiah Thomason",

package/types.d.cts

@@ -1,8 +1,10 @@
 import type { ErrorMessage, ValidationErrors, ValidatableField, FormValidityObserver } from "@form-observer/core";
-import type { InputHTMLAttributes } from "vue";
+import type { Directive, ComponentPublicInstance, InputHTMLAttributes } from "vue";
 
-export interface VueFormValidityObserver<M = string, R extends boolean = false>
-  extends Omit<FormValidityObserver<M, R>, "configure"> {
+export interface VueFormValidityObserver<M = string, R extends boolean = false> extends Omit<
+  FormValidityObserver<M, R>,
+  "configure"
+> {
   /**
    * An enhanced version of {@link FormValidityObserver.configure} for `Vue`. In addition to configuring a field's
    * error messages, it generates the props that should be applied to the field based on the provided arguments.
@@ -27,18 +29,39 @@ export interface VueFormValidityObserver<M = string, R extends boolean = false>
   /**
    * Creates a Vue function `ref` used to automatically setup and cleanup a form's observer.
    *
-   * **Note**: If you use this `ref`, you should **not** call `observe`, `unobserve`, or `disconnect` directly.
+   * **Note**: If you use this `ref`, you should **not** call `observe`, `unobserve` or `disconnect` directly,
+   * nor should you use {@link vAutoObserve `v-auto-observe`}
    *
    * @param novalidate Indicates that the
    * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate novalidate} attribute should
    * be applied to the `form` element when JavaScript is enabled. Defaults to `true`.
    *
    * @example
-   * <form :ref="autoObserve()">
+   * <form v-auto-observe>
    *   <input name="first-name" type="textbox" required />
    * </form>
+   *
+   * // Or
+   * <form v-auto-observe="true">
+   *   <input name="email" type="email" required />
+   * </form>
+   */
+  autoObserve(novalidate?: boolean): (formRef: Element | ComponentPublicInstance | null) => void;
+
+  /**
+   * A custom Vue [`directive`](https://vuejs.org/guide/reusability/custom-directives) used to automatically
+   * setup and cleanup a form's observer.
+   *
+   * Accepts a `boolean` value which determines if the
+   * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate novalidate} attribute
+   * should be applied to the `form` element when JavaScript is enabled. (Defaults to `true`.)
+   *
+   * **Note**: If you use this `directive`, you should **not** call `observe`, `unobserve` or `disconnect` directly,
+   * nor should you use {@link autoObserve `autoObserve`}.
+   *
+   * @example
    */
-  autoObserve(novalidate?: boolean): (formRef: HTMLFormElement | null) => void;
+  vAutoObserve: Directive<HTMLFormElement, boolean>;
 }
 
 export type VueFieldProps = Pick<
@@ -50,8 +73,11 @@ export type VueFieldProps = Pick<
  * An augmetation of {@link ValidationErrors} for `Vue`. Represents the constraints that should be applied
  * to a form field, and the error messages that should be displayed when those constraints are broken.
  */
-export interface VueValidationErrors<M, E extends ValidatableField = ValidatableField, R extends boolean = false>
-  extends Pick<ValidationErrors<M, E, R>, "badinput" | "validate"> {
+export interface VueValidationErrors<
+  M,
+  E extends ValidatableField = ValidatableField,
+  R extends boolean = false,
+> extends Pick<ValidationErrors<M, E, R>, "badinput" | "validate"> {
   // Standard HTML Attributes
   required?: VueErrorDetails<M, InputHTMLAttributes["required"], E, R> | ErrorMessage<R extends true ? M : string, E>;
   minlength?: VueErrorDetails<M, InputHTMLAttributes["minlength"], E, R>;

package/types.d.ts

@@ -1,8 +1,10 @@
 import type { ErrorMessage, ValidationErrors, ValidatableField, FormValidityObserver } from "@form-observer/core";
-import type { InputHTMLAttributes } from "vue";
+import type { Directive, ComponentPublicInstance, InputHTMLAttributes } from "vue";
 
-export interface VueFormValidityObserver<M = string, R extends boolean = false>
-  extends Omit<FormValidityObserver<M, R>, "configure"> {
+export interface VueFormValidityObserver<M = string, R extends boolean = false> extends Omit<
+  FormValidityObserver<M, R>,
+  "configure"
+> {
   /**
    * An enhanced version of {@link FormValidityObserver.configure} for `Vue`. In addition to configuring a field's
    * error messages, it generates the props that should be applied to the field based on the provided arguments.
@@ -27,18 +29,39 @@ export interface VueFormValidityObserver<M = string, R extends boolean = false>
   /**
    * Creates a Vue function `ref` used to automatically setup and cleanup a form's observer.
    *
-   * **Note**: If you use this `ref`, you should **not** call `observe`, `unobserve`, or `disconnect` directly.
+   * **Note**: If you use this `ref`, you should **not** call `observe`, `unobserve` or `disconnect` directly,
+   * nor should you use {@link vAutoObserve `v-auto-observe`}
    *
    * @param novalidate Indicates that the
    * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate novalidate} attribute should
    * be applied to the `form` element when JavaScript is enabled. Defaults to `true`.
    *
    * @example
-   * <form :ref="autoObserve()">
+   * <form v-auto-observe>
    *   <input name="first-name" type="textbox" required />
    * </form>
+   *
+   * // Or
+   * <form v-auto-observe="true">
+   *   <input name="email" type="email" required />
+   * </form>
+   */
+  autoObserve(novalidate?: boolean): (formRef: Element | ComponentPublicInstance | null) => void;
+
+  /**
+   * A custom Vue [`directive`](https://vuejs.org/guide/reusability/custom-directives) used to automatically
+   * setup and cleanup a form's observer.
+   *
+   * Accepts a `boolean` value which determines if the
+   * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate novalidate} attribute
+   * should be applied to the `form` element when JavaScript is enabled. (Defaults to `true`.)
+   *
+   * **Note**: If you use this `directive`, you should **not** call `observe`, `unobserve` or `disconnect` directly,
+   * nor should you use {@link autoObserve `autoObserve`}.
+   *
+   * @example
    */
-  autoObserve(novalidate?: boolean): (formRef: HTMLFormElement | null) => void;
+  vAutoObserve: Directive<HTMLFormElement, boolean>;
 }
 
 export type VueFieldProps = Pick<
@@ -50,8 +73,11 @@ export type VueFieldProps = Pick<
  * An augmetation of {@link ValidationErrors} for `Vue`. Represents the constraints that should be applied
  * to a form field, and the error messages that should be displayed when those constraints are broken.
  */
-export interface VueValidationErrors<M, E extends ValidatableField = ValidatableField, R extends boolean = false>
-  extends Pick<ValidationErrors<M, E, R>, "badinput" | "validate"> {
+export interface VueValidationErrors<
+  M,
+  E extends ValidatableField = ValidatableField,
+  R extends boolean = false,
+> extends Pick<ValidationErrors<M, E, R>, "badinput" | "validate"> {
   // Standard HTML Attributes
   required?: VueErrorDetails<M, InputHTMLAttributes["required"], E, R> | ErrorMessage<R extends true ? M : string, E>;
   minlength?: VueErrorDetails<M, InputHTMLAttributes["minlength"], E, R>;