@form-observer/vue 0.0.0-experimental-2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 enthusiastic-js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,148 @@
+# Form Observer: Vue Integration
+
+A Vue-specific utility package that provides a more ergonomic developer experience for the complex classes in [`@form-observer/core`](https://www.npmjs.com/package/@form-observer/core). For convenience, this package also exposes all of the utilities in `@form-observer/core`.
+
+What distinguishes `@form-observer/vue` from `@form-observer/core` is the enhanced developer experience that it provides for the `FormValidityObserver`. The core `FormValidityObserver` allows you to validate form fields as users interact with them, and to configure custom error messages for those fields. The `createFormValidityObserver` function provided by `@form-observer/vue` goes a step further by allowing you to configure the constraints for your fields as well.
+
+## Features and Benefits
+
+<!--
+  Note: This section should have the benefits listed in `@form-observer/core`, but the details should be catered to Vue.
+-->
+
+- **Performant**: The `Form Observer` leverages [event delegation](https://gomakethings.com/why-is-javascript-event-delegation-better-than-attaching-events-to-each-element/) to minimize memory usage. Moreover, it avoids any of the overhead that could come from relying on state.
+- **No External Dependencies**: The `Form Observer` packs _a lot_ of power into a _tiny_ bundle to give your users the best experience.
+- **Simple and Familiar API**: The `Form Observer` gives you a clear, easy-to-use API that has a similar feel to the standardized observers, such as the [`Mutation Observer`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) and the [`Intersection Observer`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
+- [**Web Component Support**](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+- **Flexible**: Without requiring any additional setup, the `Form Observer` allows you to work with fields dynamically added to (or removed from) your forms, fields [externally associated](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form) with your forms, and more.
+- **Easily Extendable**: If you have a set of sophisticated form logic that you'd like to reuse, you can [extend](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends) the `Form Observer` to encapsulate all of your functionality. We provide a [local storage](https://github.com/enthusiastic-js/form-observer/tree/main/docs/form-storage-observer) solution and a [form validation](https://github.com/enthusiastic-js/form-observer/blob/main/docs/form-validity-observer/integrations/vue.md) solution out of the box.
+
+## Install
+
+```
+npm install @form-observer/vue
+```
+
+## Quick Start
+
+```vue
+<template>
+  <form id="example" :ref="autoObserve()">
+    <h1>Feedback Form</h1>
+
+    <!-- The browser's default error messages for `#name` will be accessibly displayed inside `#name-error` -->
+    <label for="name">Full Name</label>
+    <input id="name" name="name" type="text" required aria-describedby="name-error" />
+    <div id="name-error"></div>
+
+    <!-- Custom error messages for `#email` will be accessibly displayed inside `#email-error` -->
+    <label for="email">Email</label>
+    <input
+      id="email"
+      v-bind="
+        configure('email', {
+          type: { value: 'email', message: 'Email is invalid' },
+          required: { message: 'You MUST allow us to stalk you!' },
+        })
+      "
+      aria-describedby="email-error"
+    />
+    <div id="email-error"></div>
+
+    <!-- A custom error message will be accessibly displayed for the `pattern` constraint. -->
+    <!-- The browser's default error message will be accessibly displayed for the `required` constraint. -->
+    <label for="donation">Donation</label>
+    <input
+      id="donation"
+      v-bind="configure('donation', { pattern: { value: '\\d+', message: 'Please provide a valid number' } })"
+      inputmode="numeric"
+      required
+      aria-describedby="donation-error"
+    />
+    <div id="donation-error"></div>
+  </form>
+
+  <label for="comments">Comments</label>
+  <textarea id="comments" name="comments" form="example" minlength="30" aria-describedby="comments-error"></textarea>
+  <div id="comments-error"></div>
+
+  <button type="submit" form="example">Submit</button>
+</template>
+
+<script setup>
+import { createFormValidityObserver } from "@form-observer/vue";
+const { autoObserve, configure, validateFields } = createFormValidityObserver("focusout");
+
+function handleSubmit(event) {
+  event.preventDefault();
+  const success = validateFields({ focus: true });
+
+  if (success) {
+    // Submit data to server
+  }
+}
+</script>
+```
+
+For more details on what `createFormValidityObserver` can do (like custom validation, manual error handling, and more), see our [documentation](https://github.com/enthusiastic-js/form-observer/blob/main/docs/form-validity-observer/integrations/vue.md).
+
+## Other Uses
+
+In addition to providing an enhanced version of the `FormValidityObserver`, `@form-observer/vue` exposes all of the utilities found in `@form-observer/core`. You can learn more about these tools from our [core documentation](https://github.com/enthusiastic-js/form-observer/tree/main/docs).
+
+### `FormObserver`
+
+```vue
+<template>
+  <form id="example" ref="form" @submit="handleSubmit">
+    <!-- Internal Fields -->
+  </form>
+</template>
+
+<!-- External Fields -->
+
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { FormObserver } from "@form-observer/vue";
+
+const form = ref(null);
+const observer = new FormObserver("focusout", (event) => event.target.setAttribute("data-visited", String(true)));
+
+onMounted(() => observer.observe(form.value));
+onUnmounted(() => observer.disconnect());
+
+function handleSubmit(event) {
+  event.preventDefault();
+  const visitedFields = Array.from(event.currentTarget.elements).filter((e) => e.hasAttribute("data-visited"));
+  // Do something with visited fields...
+}
+</script>
+```
+
+### `FormStorageObserver`
+
+```vue
+<template>
+  <form id="example" ref="form" @submit="handleSubmit">
+    <!-- Internal Fields -->
+  </form>
+</template>
+
+<!-- External Fields -->
+
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { FormStorageObserver } from "@form-observer/vue";
+
+const form = ref(null);
+const observer = new FormStorageObserver("change");
+
+onMounted(() => observer.observe(form.value));
+onUnmounted(() => observer.disconnect());
+
+function handleSubmit(event) {
+  event.preventDefault();
+  FormStorageObserver.clear(event.currentTarget); // User no longer needs their progress saved after a form submission
+}
+</script>
+```

package/createFormValidityObserver.cjs

@@ -0,0 +1,98 @@
+"use strict";
+
+const FormValidityObserver = require("@form-observer/core/FormValidityObserver");
+
+module.exports = createFormValidityObserver;
+module.exports.default = createFormValidityObserver;
+/**
+ * Creates an enhanced version of the {@link FormValidityObserver} that's more convenient for `Vue` apps
+ *
+ * @template {import("./index.d.cts").OneOrMany<import("./index.d.cts").EventType>} T
+ * @template [M=string]
+ * @param {T} types
+ * @param {import("./index.d.cts").FormValidityObserverOptions<M>} [options]
+ * @returns {import("./types.d.cts").VueFormValidityObserver<M>}
+ */
+function createFormValidityObserver(types, options) {
+  const observer = /** @type {import("./types.d.cts").VueFormValidityObserver<M>} */ (
+    /** @type {unknown} */ (new FormValidityObserver(types, options))
+  );
+
+  /* -------------------- Bindings -------------------- */
+  // Form Observer Methods
+  observer.observe = observer.observe.bind(observer);
+  observer.unobserve = observer.unobserve.bind(observer);
+  observer.disconnect = observer.disconnect.bind(observer);
+
+  // Validation Methods
+  observer.validateFields = observer.validateFields.bind(observer);
+  observer.validateField = observer.validateField.bind(observer);
+  observer.setFieldError = observer.setFieldError.bind(observer);
+  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));
+
+  /* -------------------- Enhancements -------------------- */
+  // Add automatic setup/teardown
+  observer.autoObserve = function autoObserve(novalidate = true) {
+    /** @type {HTMLFormElement | null} */
+    let form;
+
+    /** @param {typeof form} vueRef @returns {void} */
+    return (vueRef) => {
+      if (vueRef) {
+        form = vueRef;
+        observer.observe(form);
+        if (novalidate) form.setAttribute("novalidate", "");
+        return;
+      }
+
+      observer.unobserve(/** @type {HTMLFormElement} */ (form));
+      form = null;
+    };
+  };
+
+  // Enhanced `configure` method
+  observer.configure = function configure(name, errorMessages) {
+    const keys = /** @type {Array<keyof import("./types.d.cts").VueValidationErrors<M>>} */ (Object.keys(errorMessages));
+    const props = /** @type {import("./types.d.cts").VueFieldProps} */ ({ name });
+    const config = /** @type {import("./index.d.cts").ValidationErrors<M>} */ ({});
+
+    // Build `props` object and error `config` object from `errorMessages`
+    for (let i = 0; i < keys.length; i++) {
+      const constraint = keys[i];
+
+      // Type narrowing on each individual property would be redundant and increase bundle size. So we're using `any`.
+      const constraintValue = /** @type {any} */ (errorMessages[constraint]);
+
+      // Constraint Was Omitted
+      if (constraintValue == null) continue;
+      if (constraint === "required" && constraintValue === false) continue;
+
+      /* ----- Custom Validation Properties ----- */
+      if (constraint === "badinput" || constraint === "validate") {
+        config[constraint] = constraintValue;
+        continue;
+      }
+
+      /* ----- Standrd HTML Attributes ----- */
+      // Value Only
+      if (typeof constraintValue !== "object") {
+        if (constraint === "required" && typeof constraintValue !== "boolean") config[constraint] = constraintValue;
+        props[constraint] = constraint === "required" ? true : constraintValue;
+        continue;
+      }
+
+      // Value and Message
+      if (constraint === "required" && constraintValue.value === false) continue;
+      props[constraint] = constraintValue.value;
+      config[constraint] = constraintValue;
+    }
+
+    originalConfigure(name, config);
+    return props;
+  };
+
+  return observer;
+}

package/createFormValidityObserver.d.cts

@@ -0,0 +1,10 @@
+/**
+ * Creates an enhanced version of the {@link FormValidityObserver} that's more convenient for `Vue` apps
+ *
+ * @template {import("./index.d.cts").OneOrMany<import("./index.d.cts").EventType>} T
+ * @template [M=string]
+ * @param {T} types
+ * @param {import("./index.d.cts").FormValidityObserverOptions<M>} [options]
+ * @returns {import("./types.d.cts").VueFormValidityObserver<M>}
+ */
+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>;

package/createFormValidityObserver.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Creates an enhanced version of the {@link FormValidityObserver} that's more convenient for `Vue` apps
+ *
+ * @template {import("./index.d.ts").OneOrMany<import("./index.d.ts").EventType>} T
+ * @template [M=string]
+ * @param {T} types
+ * @param {import("./index.d.ts").FormValidityObserverOptions<M>} [options]
+ * @returns {import("./types.d.ts").VueFormValidityObserver<M>}
+ */
+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>;

package/createFormValidityObserver.js

@@ -0,0 +1,94 @@
+import FormValidityObserver from "@form-observer/core/FormValidityObserver";
+
+/**
+ * Creates an enhanced version of the {@link FormValidityObserver} that's more convenient for `Vue` apps
+ *
+ * @template {import("./index.d.ts").OneOrMany<import("./index.d.ts").EventType>} T
+ * @template [M=string]
+ * @param {T} types
+ * @param {import("./index.d.ts").FormValidityObserverOptions<M>} [options]
+ * @returns {import("./types.d.ts").VueFormValidityObserver<M>}
+ */
+export default function createFormValidityObserver(types, options) {
+  const observer = /** @type {import("./types.d.ts").VueFormValidityObserver<M>} */ (
+    /** @type {unknown} */ (new FormValidityObserver(types, options))
+  );
+
+  /* -------------------- Bindings -------------------- */
+  // Form Observer Methods
+  observer.observe = observer.observe.bind(observer);
+  observer.unobserve = observer.unobserve.bind(observer);
+  observer.disconnect = observer.disconnect.bind(observer);
+
+  // Validation Methods
+  observer.validateFields = observer.validateFields.bind(observer);
+  observer.validateField = observer.validateField.bind(observer);
+  observer.setFieldError = observer.setFieldError.bind(observer);
+  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));
+
+  /* -------------------- Enhancements -------------------- */
+  // Add automatic setup/teardown
+  observer.autoObserve = function autoObserve(novalidate = true) {
+    /** @type {HTMLFormElement | null} */
+    let form;
+
+    /** @param {typeof form} vueRef @returns {void} */
+    return (vueRef) => {
+      if (vueRef) {
+        form = vueRef;
+        observer.observe(form);
+        if (novalidate) form.setAttribute("novalidate", "");
+        return;
+      }
+
+      observer.unobserve(/** @type {HTMLFormElement} */ (form));
+      form = null;
+    };
+  };
+
+  // Enhanced `configure` method
+  observer.configure = function configure(name, errorMessages) {
+    const keys = /** @type {Array<keyof import("./types.d.ts").VueValidationErrors<M>>} */ (Object.keys(errorMessages));
+    const props = /** @type {import("./types.d.ts").VueFieldProps} */ ({ name });
+    const config = /** @type {import("./index.d.ts").ValidationErrors<M>} */ ({});
+
+    // Build `props` object and error `config` object from `errorMessages`
+    for (let i = 0; i < keys.length; i++) {
+      const constraint = keys[i];
+
+      // Type narrowing on each individual property would be redundant and increase bundle size. So we're using `any`.
+      const constraintValue = /** @type {any} */ (errorMessages[constraint]);
+
+      // Constraint Was Omitted
+      if (constraintValue == null) continue;
+      if (constraint === "required" && constraintValue === false) continue;
+
+      /* ----- Custom Validation Properties ----- */
+      if (constraint === "badinput" || constraint === "validate") {
+        config[constraint] = constraintValue;
+        continue;
+      }
+
+      /* ----- Standrd HTML Attributes ----- */
+      // Value Only
+      if (typeof constraintValue !== "object") {
+        if (constraint === "required" && typeof constraintValue !== "boolean") config[constraint] = constraintValue;
+        props[constraint] = constraint === "required" ? true : constraintValue;
+        continue;
+      }
+
+      // Value and Message
+      if (constraint === "required" && constraintValue.value === false) continue;
+      props[constraint] = constraintValue.value;
+      config[constraint] = constraintValue;
+    }
+
+    originalConfigure(name, config);
+    return props;
+  };
+
+  return observer;
+}

package/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+
+Object.assign(module.exports, { ...require("@form-observer/core") });
+module.exports.createFormValidityObserver = require("./createFormValidityObserver.cjs");

package/index.d.cts

@@ -0,0 +1,3 @@
+export * from "@form-observer/core";
+export { default as createFormValidityObserver } from "./createFormValidityObserver.cjs";
+export type * from "./types.d.cts";

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@form-observer/core";
+export { default as createFormValidityObserver } from "./createFormValidityObserver.js";
+export type * from "./types.d.ts";

package/index.js

@@ -0,0 +1,2 @@
+export * from "@form-observer/core";
+export { default as createFormValidityObserver } from "./createFormValidityObserver.js";

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@form-observer/vue",
+  "type": "module",
+  "version": "0.0.0-experimental-2",
+  "description": "Convenience functions for the `@form-observer/core` package, designed for Vue apps",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./index.d.cts",
+        "default": "./index.cjs"
+      },
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./createFormValidityObserver": {
+      "require": {
+        "types": "./createFormValidityObserver.d.cts",
+        "default": "./createFormValidityObserver.cjs"
+      },
+      "types": "./createFormValidityObserver.d.ts",
+      "default": "./createFormValidityObserver.js"
+    },
+    "./types": {
+      "types": "./types.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "@form-observer/core": "*"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^7.0.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "vue": "^3.3.6"
+  },
+  "author": "Isaiah Thomason",
+  "license": "MIT",
+  "keywords": [
+    "form",
+    "observer",
+    "web",
+    "validation",
+    "vue"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/enthusiastic-js/form-observer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/enthusiastic-js/form-observer/issues"
+  },
+  "homepage": "https://github.com/enthusiastic-js/form-observer#readme"
+}

package/types.d.cts

@@ -0,0 +1,68 @@
+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"> {
+  /**
+   * 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.
+   *
+   * @param name The `name` of the form field
+   * @param errorMessages A `key`-`value` pair of validation constraints (key) and their corresponding
+   * configurations (value)
+   *
+   * @example
+   * // If the field is not a valid number, the error will display: "Number is invalid"
+   * <input v-bind="configure('amount', { pattern: { value: '\\d+', message: 'Number is invalid' } })" />
+   *
+   * // If the field is too long, the error will display the browser's `tooLong` error string.
+   * <input v-bind="configure('comment', { maxlength: 10 })" />
+   * <input name="another-comment" maxlength="10" />
+   */
+  configure<E extends ValidatableField>(name: string, errorMessages: VueValidationErrors<M, E>): VueFieldProps;
+
+  /**
+   * 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.
+   *
+   * @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()">
+   *   <input name="first-name" type="textbox" required />
+   * </form>
+   */
+  autoObserve(novalidate?: boolean): (formRef: HTMLFormElement) => void;
+}
+
+export type VueFieldProps = Pick<
+  InputHTMLAttributes,
+  "name" | "required" | "minlength" | "min" | "maxlength" | "max" | "step" | "type" | "pattern"
+>;
+
+/**
+ * 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"> {
+  // 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>;
+}
+
+/** An augmentation of `ErrorDetails` for `Vue`. */
+export type VueErrorDetails<M, V, E extends ValidatableField = ValidatableField> =
+  | V
+  | { render: true; message: ErrorMessage<M, E>; value: V }
+  | { render?: false; message: ErrorMessage<string, E>; value: V };

package/types.d.ts

@@ -0,0 +1,68 @@
+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"> {
+  /**
+   * 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.
+   *
+   * @param name The `name` of the form field
+   * @param errorMessages A `key`-`value` pair of validation constraints (key) and their corresponding
+   * configurations (value)
+   *
+   * @example
+   * // If the field is not a valid number, the error will display: "Number is invalid"
+   * <input v-bind="configure('amount', { pattern: { value: '\\d+', message: 'Number is invalid' } })" />
+   *
+   * // If the field is too long, the error will display the browser's `tooLong` error string.
+   * <input v-bind="configure('comment', { maxlength: 10 })" />
+   * <input name="another-comment" maxlength="10" />
+   */
+  configure<E extends ValidatableField>(name: string, errorMessages: VueValidationErrors<M, E>): VueFieldProps;
+
+  /**
+   * 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.
+   *
+   * @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()">
+   *   <input name="first-name" type="textbox" required />
+   * </form>
+   */
+  autoObserve(novalidate?: boolean): (formRef: HTMLFormElement) => void;
+}
+
+export type VueFieldProps = Pick<
+  InputHTMLAttributes,
+  "name" | "required" | "minlength" | "min" | "maxlength" | "max" | "step" | "type" | "pattern"
+>;
+
+/**
+ * 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"> {
+  // 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>;
+}
+
+/** An augmentation of `ErrorDetails` for `Vue`. */
+export type VueErrorDetails<M, V, E extends ValidatableField = ValidatableField> =
+  | V
+  | { render: true; message: ErrorMessage<M, E>; value: V }
+  | { render?: false; message: ErrorMessage<string, E>; value: V };