@ark-ui/vue/dist/components/fieldset/use-fieldset.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 fieldset_anatomy = require('./fieldset.anatomy.cjs');

const useFieldset = (props = {}) => {
  const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT);
  const state = vue.reactive({
    hasErrorText: false,
    hasHelperText: false
  });
  const rootRef = vue.ref(null);
  const uuid = vue.useId();
  const ids = vue.computed(() => {
    const fieldsetProps = vue.toValue(props);
    const id = fieldsetProps.id ?? uuid;
    return {
      labelId: `fieldset::${id}::label`,
      errorTextId: `fieldset::${id}::error-text`,
      helperTextId: `fieldset::${id}::helper-text`
    };
  });
  vue.onMounted(() => {
    const rootNode = rootRef.value;
    if (!rootNode) return;
    const checkTextElements = () => {
      const { errorTextId, helperTextId } = ids.value;
      const docOrShadowRoot = env.value.getRootNode();
      state.hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
      state.hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
    };
    checkTextElements();
    const win = env.value.getWindow();
    const observer = new win.MutationObserver(checkTextElements);
    observer.observe(rootNode, { childList: true, subtree: true });
    vue.onBeforeUnmount(() => {
      observer.disconnect();
    });
  });
  return vue.computed(() => {
    const { disabled, invalid } = vue.toValue(props);
    const { labelId, errorTextId, helperTextId } = ids.value;
    const labelIds = [];
    if (state.hasErrorText && invalid) labelIds.push(errorTextId);
    if (state.hasHelperText) labelIds.push(helperTextId);
    const getRootProps = () => ({
      ...fieldset_anatomy.parts.root.attrs,
      disabled,
      "data-disabled": domQuery.dataAttr(!!disabled),
      "data-invalid": domQuery.dataAttr(invalid),
      "aria-labelledby": labelId,
      "aria-describedby": labelIds.join(" ")
    });
    const getLegendProps = () => ({
      id: labelId,
      ...fieldset_anatomy.parts.legend.attrs,
      "data-disabled": domQuery.dataAttr(!!disabled),
      "data-invalid": domQuery.dataAttr(invalid)
    });
    const getHelperTextProps = () => ({
      id: helperTextId,
      ...fieldset_anatomy.parts.helperText.attrs
    });
    const getErrorTextProps = () => ({
      id: errorTextId,
      ...fieldset_anatomy.parts.errorText.attrs,
      "aria-live": "polite"
    });
    return {
      refs: {
        rootRef
      },
      disabled,
      invalid,
      getRootProps,
      getLegendProps,
      getHelperTextProps,
      getErrorTextProps
    };
  });
};

exports.useFieldset = useFieldset;