@form-observer/vue 0.7.0 → 0.8.0

package/createFormValidityObserver.cjs

@@ -9,12 +9,14 @@ module.exports.default = createFormValidityObserver;
  *
  * @template {import("./index.d.cts").OneOrMany<import("./index.d.cts").EventType>} T
  * @template [M=string]
+ * @template {import("./index.d.cts").ValidatableField} [E=import("./index.d.cts").ValidatableField]
+ * @template {boolean} [R=false]
  * @param {T} types
- * @param {import("./index.d.cts").FormValidityObserverOptions<M>} [options]
- * @returns {import("./types.d.cts").VueFormValidityObserver<M>}
+ * @param {import("./index.d.cts").FormValidityObserverOptions<M, E, R>} [options]
+ * @returns {import("./types.d.cts").VueFormValidityObserver<M, R>}
  */
 function createFormValidityObserver(types, options) {
-  const observer = /** @type {import("./types.d.cts").VueFormValidityObserver<M>} */ (
+  const observer = /** @type {import("./types.d.cts").VueFormValidityObserver<M, R>} */ (
     /** @type {unknown} */ (new FormValidityObserver(types, options))
   );
 
@@ -31,7 +33,7 @@ function createFormValidityObserver(types, options) {
   observer.clearFieldError = observer.clearFieldError.bind(observer);
 
   /** **Private** reference to the original {@link FormValidityObserver.configure} method */
-  const originalConfigure = /** @type {FormValidityObserver<M>["configure"]} */ (observer.configure.bind(observer));
+  const originalConfigure = /** @type {FormValidityObserver<M, R>["configure"]} */ (observer.configure.bind(observer));
 
   /* -------------------- Enhancements -------------------- */
   // Add automatic setup/teardown
@@ -55,9 +57,11 @@ function createFormValidityObserver(types, options) {
 
   // Enhanced `configure` method
   observer.configure = function configure(name, errorMessages) {
-    const keys = /** @type {Array<keyof import("./types.d.cts").VueValidationErrors<M>>} */ (Object.keys(errorMessages));
+    const keys = /** @type {Array<keyof import("./types.d.cts").VueValidationErrors<M, any, R>>} */ (
+      Object.keys(errorMessages)
+    );
     const props = /** @type {import("./types.d.cts").VueFieldProps} */ ({ name });
-    const config = /** @type {import("./index.d.cts").ValidationErrors<M>} */ ({});
+    const config = /** @type {import("./index.d.cts").ValidationErrors<M, any, R>} */ ({});
 
     // Build `props` object and error `config` object from `errorMessages`
     for (let i = 0; i < keys.length; i++) {
@@ -78,7 +82,7 @@ function createFormValidityObserver(types, options) {
 
       /* ----- Standrd HTML Attributes ----- */
       // Value Only
-      if (typeof constraintValue !== "object") {
+      if (typeof constraintValue !== "object" || !("message" in constraintValue)) {
         if (constraint === "required" && typeof constraintValue !== "boolean") config[constraint] = constraintValue;
         props[constraint] = constraint === "required" ? true : constraintValue;
         continue;

package/createFormValidityObserver.d.cts

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

package/createFormValidityObserver.d.ts

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

package/createFormValidityObserver.js

@@ -5,12 +5,14 @@ import FormValidityObserver from "@form-observer/core/FormValidityObserver";
  *
  * @template {import("./index.d.ts").OneOrMany<import("./index.d.ts").EventType>} T
  * @template [M=string]
+ * @template {import("./index.d.ts").ValidatableField} [E=import("./index.d.ts").ValidatableField]
+ * @template {boolean} [R=false]
  * @param {T} types
- * @param {import("./index.d.ts").FormValidityObserverOptions<M>} [options]
- * @returns {import("./types.d.ts").VueFormValidityObserver<M>}
+ * @param {import("./index.d.ts").FormValidityObserverOptions<M, E, R>} [options]
+ * @returns {import("./types.d.ts").VueFormValidityObserver<M, R>}
  */
 export default function createFormValidityObserver(types, options) {
-  const observer = /** @type {import("./types.d.ts").VueFormValidityObserver<M>} */ (
+  const observer = /** @type {import("./types.d.ts").VueFormValidityObserver<M, R>} */ (
     /** @type {unknown} */ (new FormValidityObserver(types, options))
   );
 
@@ -27,7 +29,7 @@ export default function createFormValidityObserver(types, options) {
   observer.clearFieldError = observer.clearFieldError.bind(observer);
 
   /** **Private** reference to the original {@link FormValidityObserver.configure} method */
-  const originalConfigure = /** @type {FormValidityObserver<M>["configure"]} */ (observer.configure.bind(observer));
+  const originalConfigure = /** @type {FormValidityObserver<M, R>["configure"]} */ (observer.configure.bind(observer));
 
   /* -------------------- Enhancements -------------------- */
   // Add automatic setup/teardown
@@ -51,9 +53,11 @@ export default function createFormValidityObserver(types, options) {
 
   // Enhanced `configure` method
   observer.configure = function configure(name, errorMessages) {
-    const keys = /** @type {Array<keyof import("./types.d.ts").VueValidationErrors<M>>} */ (Object.keys(errorMessages));
+    const keys = /** @type {Array<keyof import("./types.d.ts").VueValidationErrors<M, any, R>>} */ (
+      Object.keys(errorMessages)
+    );
     const props = /** @type {import("./types.d.ts").VueFieldProps} */ ({ name });
-    const config = /** @type {import("./index.d.ts").ValidationErrors<M>} */ ({});
+    const config = /** @type {import("./index.d.ts").ValidationErrors<M, any, R>} */ ({});
 
     // Build `props` object and error `config` object from `errorMessages`
     for (let i = 0; i < keys.length; i++) {
@@ -74,7 +78,7 @@ export default function createFormValidityObserver(types, options) {
 
       /* ----- Standrd HTML Attributes ----- */
       // Value Only
-      if (typeof constraintValue !== "object") {
+      if (typeof constraintValue !== "object" || !("message" in constraintValue)) {
         if (constraint === "required" && typeof constraintValue !== "boolean") config[constraint] = constraintValue;
         props[constraint] = constraint === "required" ? true : constraintValue;
         continue;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@form-observer/vue",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.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.7.0"
+    "@form-observer/core": "^0.8.0"
   },
   "devDependencies": {
-    "@testing-library/vue": "^8.0.1",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@testing-library/vue": "^8.0.3",
+    "@vitejs/plugin-vue": "^5.0.4",
     "vue": "^3.3.6"
   },
   "author": "Isaiah Thomason",

package/types.d.cts

@@ -1,12 +1,14 @@
 import type { ErrorMessage, ValidationErrors, ValidatableField, FormValidityObserver } from "@form-observer/core";
 import type { InputHTMLAttributes } from "vue";
 
-export interface VueFormValidityObserver<M = string> extends Omit<FormValidityObserver<M>, "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.
    *
-   * Note: If the field is _only_ using the browser's default error messages, it does _not_ need to be `configure`d.
+   * Note: If the field is _only_ using the configured `defaultErrors` and/or the browser's default error messages,
+   * it _does not_ need to be `configure`d.
    *
    * @param name The `name` of the form field
    * @param errorMessages A `key`-`value` pair of validation constraints (key) and their corresponding
@@ -20,7 +22,7 @@ export interface VueFormValidityObserver<M = string> extends Omit<FormValidityOb
    * <input v-bind="configure('comment', { maxlength: 10 })" />
    * <input name="another-comment" maxlength="10" />
    */
-  configure<E extends ValidatableField>(name: string, errorMessages: VueValidationErrors<M, E>): VueFieldProps;
+  configure<E extends ValidatableField>(name: string, errorMessages: VueValidationErrors<M, E, R>): VueFieldProps;
 
   /**
    * Creates a Vue function `ref` used to automatically setup and cleanup a form's observer.
@@ -48,21 +50,26 @@ 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>
-  extends Pick<ValidationErrors<M, E>, "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> | ErrorMessage<string, E>;
-  minlength?: VueErrorDetails<M, InputHTMLAttributes["minlength"], E>;
-  min?: VueErrorDetails<M, InputHTMLAttributes["min"], E>;
-  maxlength?: VueErrorDetails<M, InputHTMLAttributes["maxlength"], E>;
-  max?: VueErrorDetails<M, InputHTMLAttributes["max"], E>;
-  step?: VueErrorDetails<M, InputHTMLAttributes["step"], E>;
-  type?: VueErrorDetails<M, InputHTMLAttributes["type"], E>;
-  pattern?: VueErrorDetails<M, InputHTMLAttributes["pattern"], E>;
+  required?: VueErrorDetails<M, InputHTMLAttributes["required"], E, R> | ErrorMessage<R extends true ? M : string, E>;
+  minlength?: VueErrorDetails<M, InputHTMLAttributes["minlength"], E, R>;
+  min?: VueErrorDetails<M, InputHTMLAttributes["min"], E, R>;
+  maxlength?: VueErrorDetails<M, InputHTMLAttributes["maxlength"], E, R>;
+  max?: VueErrorDetails<M, InputHTMLAttributes["max"], E, R>;
+  step?: VueErrorDetails<M, InputHTMLAttributes["step"], E, R>;
+  type?: VueErrorDetails<M, InputHTMLAttributes["type"], E, R>;
+  pattern?: VueErrorDetails<M, InputHTMLAttributes["pattern"], E, R>;
 }
 
 /** An augmentation of `ErrorDetails` for `Vue`. */
-export type VueErrorDetails<M, V, E extends ValidatableField = ValidatableField> =
+export type VueErrorDetails<M, V, E extends ValidatableField = ValidatableField, R extends boolean = false> =
   | V
-  | { render: true; message: ErrorMessage<M, E>; value: V }
-  | { render?: false; message: ErrorMessage<string, E>; value: V };
+  | (R extends true
+      ?
+          | { render?: true; message: ErrorMessage<M, E>; value: V }
+          | { render: false; message: ErrorMessage<string, E>; value: V }
+      :
+          | { render: true; message: ErrorMessage<M, E>; value: V }
+          | { render?: false; message: ErrorMessage<string, E>; value: V });

package/types.d.ts

@@ -1,12 +1,14 @@
 import type { ErrorMessage, ValidationErrors, ValidatableField, FormValidityObserver } from "@form-observer/core";
 import type { InputHTMLAttributes } from "vue";
 
-export interface VueFormValidityObserver<M = string> extends Omit<FormValidityObserver<M>, "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.
    *
-   * Note: If the field is _only_ using the browser's default error messages, it does _not_ need to be `configure`d.
+   * Note: If the field is _only_ using the configured `defaultErrors` and/or the browser's default error messages,
+   * it _does not_ need to be `configure`d.
    *
    * @param name The `name` of the form field
    * @param errorMessages A `key`-`value` pair of validation constraints (key) and their corresponding
@@ -20,7 +22,7 @@ export interface VueFormValidityObserver<M = string> extends Omit<FormValidityOb
    * <input v-bind="configure('comment', { maxlength: 10 })" />
    * <input name="another-comment" maxlength="10" />
    */
-  configure<E extends ValidatableField>(name: string, errorMessages: VueValidationErrors<M, E>): VueFieldProps;
+  configure<E extends ValidatableField>(name: string, errorMessages: VueValidationErrors<M, E, R>): VueFieldProps;
 
   /**
    * Creates a Vue function `ref` used to automatically setup and cleanup a form's observer.
@@ -48,21 +50,26 @@ 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>
-  extends Pick<ValidationErrors<M, E>, "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> | ErrorMessage<string, E>;
-  minlength?: VueErrorDetails<M, InputHTMLAttributes["minlength"], E>;
-  min?: VueErrorDetails<M, InputHTMLAttributes["min"], E>;
-  maxlength?: VueErrorDetails<M, InputHTMLAttributes["maxlength"], E>;
-  max?: VueErrorDetails<M, InputHTMLAttributes["max"], E>;
-  step?: VueErrorDetails<M, InputHTMLAttributes["step"], E>;
-  type?: VueErrorDetails<M, InputHTMLAttributes["type"], E>;
-  pattern?: VueErrorDetails<M, InputHTMLAttributes["pattern"], E>;
+  required?: VueErrorDetails<M, InputHTMLAttributes["required"], E, R> | ErrorMessage<R extends true ? M : string, E>;
+  minlength?: VueErrorDetails<M, InputHTMLAttributes["minlength"], E, R>;
+  min?: VueErrorDetails<M, InputHTMLAttributes["min"], E, R>;
+  maxlength?: VueErrorDetails<M, InputHTMLAttributes["maxlength"], E, R>;
+  max?: VueErrorDetails<M, InputHTMLAttributes["max"], E, R>;
+  step?: VueErrorDetails<M, InputHTMLAttributes["step"], E, R>;
+  type?: VueErrorDetails<M, InputHTMLAttributes["type"], E, R>;
+  pattern?: VueErrorDetails<M, InputHTMLAttributes["pattern"], E, R>;
 }
 
 /** An augmentation of `ErrorDetails` for `Vue`. */
-export type VueErrorDetails<M, V, E extends ValidatableField = ValidatableField> =
+export type VueErrorDetails<M, V, E extends ValidatableField = ValidatableField, R extends boolean = false> =
   | V
-  | { render: true; message: ErrorMessage<M, E>; value: V }
-  | { render?: false; message: ErrorMessage<string, E>; value: V };
+  | (R extends true
+      ?
+          | { render?: true; message: ErrorMessage<M, E>; value: V }
+          | { render: false; message: ErrorMessage<string, E>; value: V }
+      :
+          | { render: true; message: ErrorMessage<M, E>; value: V }
+          | { render?: false; message: ErrorMessage<string, E>; value: V });