@nullpixel/ui/dist/runtime/composables/useFormField.js

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.

import { inject, computed } from "vue";
import { useDebounceFn } from "@vueuse/core";
export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
export const formFieldInjectionKey = Symbol("nuxt-ui.form-field");
export const inputIdInjectionKey = Symbol("nuxt-ui.input-id");
export const formInputsInjectionKey = Symbol("nuxt-ui.form-inputs");
export const formLoadingInjectionKey = Symbol("nuxt-ui.form-loading");
export function useFormField(props, opts) {
  const formOptions = inject(formOptionsInjectionKey, void 0);
  const formBus = inject(formBusInjectionKey, void 0);
  const formField = inject(formFieldInjectionKey, void 0);
  const formInputs = inject(formInputsInjectionKey, void 0);
  const inputId = inject(inputIdInjectionKey, void 0);
  if (formField && inputId) {
    if (opts?.bind === false) {
      inputId.value = void 0;
    } else if (props?.id) {
      inputId.value = props?.id;
    }
    if (formInputs && formField.value.name && inputId.value) {
      formInputs.value[formField.value.name] = { id: inputId.value, pattern: formField.value.errorPattern };
    }
  }
  function emitFormEvent(type, name, eager) {
    if (formBus && formField && name) {
      formBus.emit({ type, name, eager });
    }
  }
  function emitFormBlur() {
    emitFormEvent("blur", formField?.value.name);
  }
  function emitFormFocus() {
    emitFormEvent("focus", formField?.value.name);
  }
  function emitFormChange() {
    emitFormEvent("change", formField?.value.name);
  }
  const emitFormInput = useDebounceFn(
    () => {
      emitFormEvent("input", formField?.value.name, !opts?.deferInputValidation || formField?.value.eagerValidation);
    },
    formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
  );
  return {
    id: computed(() => props?.id ?? inputId?.value),
    name: computed(() => props?.name ?? formField?.value.name),
    size: computed(() => props?.size ?? formField?.value.size),
    color: computed(() => formField?.value.error ? "error" : props?.color),
    highlight: computed(() => formField?.value.error ? true : props?.highlight),
    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
    emitFormBlur,
    emitFormInput,
    emitFormChange,
    emitFormFocus,
    ariaAttrs: computed(() => {
      if (!formField?.value) return;
      const descriptiveAttrs = ["error", "hint", "description"].filter((type) => formField?.value?.[type]).map((type) => `${formField?.value.ariaId}-${type}`) || [];
      return {
        "aria-describedby": descriptiveAttrs.join(" "),
        "aria-invalid": !!formField?.value.error
      };
    })
  };
}