@ark-ui/vue/dist/components/field/use-field.cjs

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const domQuery = require('@zag-js/dom-query');
const vue = require('vue');
const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
const unrefElement = require('../../utils/unref-element.cjs');
const field_anatomy = require('./field.anatomy.cjs');

const useField = (props = {}) => {
  const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT);
  const state = vue.reactive({
    hasErrorText: false,
    hasHelperText: false
  });
  const uid = vue.useId();
  const id = vue.computed(() => vue.toValue(props).id ?? uid);
  const rootRef = vue.ref(null);
  const rootId = vue.computed(() => vue.toValue(props).ids?.control ?? `field::${id.value}`);
  const errorTextId = vue.computed(() => vue.toValue(props).ids?.errorText ?? `field::${id.value}::error-text`);
  const helperTextId = vue.computed(() => vue.toValue(props).ids?.helperText ?? `field::${id.value}::helper-text`);
  const labelId = vue.computed(() => vue.toValue(props).ids?.label ?? `field::${id.value}::label`);
  vue.onMounted(() => {
    const rootNode = unrefElement.unrefElement(rootRef);
    if (!rootNode) return;
    const checkTextElements = () => {
      const docOrShadowRoot = env.value.getRootNode();
      state.hasErrorText = !!docOrShadowRoot.getElementById(errorTextId.value);
      state.hasHelperText = !!docOrShadowRoot.getElementById(helperTextId.value);
    };
    checkTextElements();
    const win = env.value.getWindow();
    const observer = new win.MutationObserver(checkTextElements);
    observer.observe(rootNode, { childList: true, subtree: true });
    vue.onBeforeUnmount(() => {
      observer.disconnect();
    });
  });
  const getRootProps = () => {
    const values = vue.toValue(props);
    return {
      ...field_anatomy.parts.root.attrs,
      id: rootId.value,
      role: "group",
      "data-disabled": domQuery.dataAttr(values.disabled),
      "data-invalid": domQuery.dataAttr(values.invalid),
      "data-readonly": domQuery.dataAttr(values.readOnly)
    };
  };
  const getLabelProps = () => {
    const values = vue.toValue(props);
    return {
      ...field_anatomy.parts.label.attrs,
      id: labelId.value,
      "data-disabled": domQuery.dataAttr(values.disabled),
      "data-invalid": domQuery.dataAttr(values.invalid),
      "data-readonly": domQuery.dataAttr(values.readOnly),
      "data-required": domQuery.dataAttr(values.required),
      htmlFor: id.value
    };
  };
  const labelIds = vue.computed(() => {
    const values = vue.toValue(props);
    const ids = [];
    if (state.hasErrorText && values.invalid) ids.push(errorTextId.value);
    if (state.hasHelperText) ids.push(helperTextId.value);
    return ids;
  });
  const getControlProps = () => {
    const values = vue.toValue(props);
    return {
      "aria-describedby": labelIds.value.join(" ") || void 0,
      "aria-invalid": domQuery.ariaAttr(values.invalid),
      "data-invalid": domQuery.dataAttr(values.invalid),
      "data-required": domQuery.dataAttr(values.required),
      "data-readonly": domQuery.dataAttr(values.readOnly),
      id: id.value,
      required: values.required,
      disabled: values.disabled,
      readOnly: values.readOnly
    };
  };
  const getInputProps = () => ({
    ...getControlProps(),
    ...field_anatomy.parts.input.attrs
  });
  const getTextareaProps = () => ({
    ...getControlProps(),
    ...field_anatomy.parts.textarea.attrs
  });
  const getSelectProps = () => ({
    ...getControlProps(),
    ...field_anatomy.parts.select.attrs
  });
  const getHelperTextProps = () => {
    const values = vue.toValue(props);
    return {
      id: helperTextId.value,
      ...field_anatomy.parts.helperText.attrs,
      "data-disabled": domQuery.dataAttr(values.disabled)
    };
  };
  const getErrorTextProps = () => ({
    id: errorTextId.value,
    ...field_anatomy.parts.errorText.attrs,
    "aria-live": "polite"
  });
  const getRequiredIndicatorProps = () => ({
    "aria-hidden": true,
    ...field_anatomy.parts.requiredIndicator.attrs
  });
  return vue.computed(() => {
    const values = vue.toValue(props);
    return {
      ariaDescribedby: labelIds.value.join(" ") || void 0,
      ids: {
        control: id.value,
        label: labelId.value,
        errorText: errorTextId.value,
        helperText: helperTextId.value
      },
      refs: {
        rootRef
      },
      disabled: values.disabled,
      invalid: values.invalid,
      readOnly: values.readOnly,
      required: values.required,
      getLabelProps,
      getRootProps,
      getInputProps,
      getTextareaProps,
      getSelectProps,
      getHelperTextProps,
      getErrorTextProps,
      getRequiredIndicatorProps
    };
  });
};

exports.useField = useField;