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

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

const require_fieldset_anatomy = require("./fieldset.anatomy.cjs");
const require_unref_element = require("../../utils/unref-element.cjs");
const require_use_environment_context = require("../../providers/environment/use-environment-context.cjs");
let vue = require("vue");
let _zag_js_dom_query = require("@zag-js/dom-query");
//#region src/components/fieldset/use-fieldset.ts
var useFieldset = (props = {}) => {
	const env = require_use_environment_context.useEnvironmentContext(require_use_environment_context.DEFAULT_ENVIRONMENT);
	const state = (0, vue.reactive)({
		hasErrorText: false,
		hasHelperText: false
	});
	const rootRef = (0, vue.ref)(null);
	const uuid = (0, vue.useId)();
	const ids = (0, vue.computed)(() => {
		const id = (0, vue.toValue)(props).id ?? uuid;
		return {
			legendId: `fieldset::${id}::legend`,
			errorTextId: `fieldset::${id}::error-text`,
			helperTextId: `fieldset::${id}::helper-text`
		};
	});
	(0, vue.onMounted)(() => {
		const rootNode = require_unref_element.unrefElement(rootRef);
		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 observer = new (env.value.getWindow()).MutationObserver(checkTextElements);
		observer.observe(rootNode, {
			childList: true,
			subtree: true
		});
		(0, vue.onBeforeUnmount)(() => {
			observer.disconnect();
		});
	});
	return (0, vue.computed)(() => {
		const { disabled, invalid } = (0, vue.toValue)(props);
		const { legendId, errorTextId, helperTextId } = ids.value;
		const describedByIds = [];
		if (state.hasErrorText && invalid) describedByIds.push(errorTextId);
		if (state.hasHelperText) describedByIds.push(helperTextId);
		const describedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
		const getRootProps = () => ({
			...require_fieldset_anatomy.parts.root.attrs,
			disabled,
			"data-disabled": (0, _zag_js_dom_query.dataAttr)(!!disabled),
			"data-invalid": (0, _zag_js_dom_query.dataAttr)(invalid),
			"aria-labelledby": legendId,
			"aria-describedby": describedBy
		});
		const getLegendProps = () => ({
			id: legendId,
			...require_fieldset_anatomy.parts.legend.attrs,
			"data-disabled": (0, _zag_js_dom_query.dataAttr)(!!disabled),
			"data-invalid": (0, _zag_js_dom_query.dataAttr)(invalid)
		});
		const getHelperTextProps = () => ({
			id: helperTextId,
			...require_fieldset_anatomy.parts.helperText.attrs
		});
		const getErrorTextProps = () => ({
			id: errorTextId,
			...require_fieldset_anatomy.parts.errorText.attrs,
			"aria-live": "polite"
		});
		return {
			refs: { rootRef },
			ids: {
				legend: legendId,
				errorText: errorTextId,
				helperText: helperTextId
			},
			disabled,
			invalid,
			getRootProps,
			getLegendProps,
			getHelperTextProps,
			getErrorTextProps
		};
	});
};
//#endregion
exports.useFieldset = useFieldset;