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

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

const require_field_anatomy = require("./field.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/field/use-field.ts
var useField = (props = {}) => {
	const env = require_use_environment_context.useEnvironmentContext(require_use_environment_context.DEFAULT_ENVIRONMENT);
	const state = (0, vue.reactive)({
		hasErrorText: false,
		hasHelperText: false
	});
	const uid = (0, vue.useId)();
	const id = (0, vue.computed)(() => (0, vue.toValue)(props).id ?? uid);
	const rootRef = (0, vue.ref)(null);
	const rootId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.control ?? `field::${id.value}`);
	const errorTextId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.errorText ?? `field::${id.value}::error-text`);
	const helperTextId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.helperText ?? `field::${id.value}::helper-text`);
	const labelId = (0, vue.computed)(() => (0, vue.toValue)(props).ids?.label ?? `field::${id.value}::label`);
	(0, vue.onMounted)(() => {
		const rootNode = require_unref_element.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 observer = new (env.value.getWindow()).MutationObserver(checkTextElements);
		observer.observe(rootNode, {
			childList: true,
			subtree: true
		});
		(0, vue.onBeforeUnmount)(() => {
			observer.disconnect();
		});
	});
	const getRootProps = () => {
		const values = (0, vue.toValue)(props);
		return {
			...require_field_anatomy.parts.root.attrs,
			id: rootId.value,
			role: "group",
			"data-disabled": (0, _zag_js_dom_query.dataAttr)(values.disabled),
			"data-invalid": (0, _zag_js_dom_query.dataAttr)(values.invalid),
			"data-readonly": (0, _zag_js_dom_query.dataAttr)(values.readOnly)
		};
	};
	const targetControlId = (0, vue.computed)(() => {
		const target = (0, vue.toValue)(props).target;
		return target ? `field::${id.value}::item::${target}` : void 0;
	});
	const getLabelProps = () => {
		const values = (0, vue.toValue)(props);
		return {
			...require_field_anatomy.parts.label.attrs,
			id: labelId.value,
			"data-disabled": (0, _zag_js_dom_query.dataAttr)(values.disabled),
			"data-invalid": (0, _zag_js_dom_query.dataAttr)(values.invalid),
			"data-readonly": (0, _zag_js_dom_query.dataAttr)(values.readOnly),
			"data-required": (0, _zag_js_dom_query.dataAttr)(values.required),
			htmlFor: targetControlId.value ?? id.value
		};
	};
	const labelIds = (0, vue.computed)(() => {
		const values = (0, 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 = (0, vue.toValue)(props);
		return {
			"aria-describedby": labelIds.value.join(" ") || void 0,
			"aria-invalid": (0, _zag_js_dom_query.ariaAttr)(values.invalid),
			"data-invalid": (0, _zag_js_dom_query.dataAttr)(values.invalid),
			"data-required": (0, _zag_js_dom_query.dataAttr)(values.required),
			"data-readonly": (0, _zag_js_dom_query.dataAttr)(values.readOnly),
			id: id.value,
			required: values.required,
			disabled: values.disabled,
			readOnly: values.readOnly
		};
	};
	const getInputProps = () => ({
		...getControlProps(),
		...require_field_anatomy.parts.input.attrs
	});
	const getTextareaProps = () => ({
		...getControlProps(),
		...require_field_anatomy.parts.textarea.attrs
	});
	const getSelectProps = () => ({
		...getControlProps(),
		...require_field_anatomy.parts.select.attrs
	});
	const getHelperTextProps = () => {
		const values = (0, vue.toValue)(props);
		return {
			id: helperTextId.value,
			...require_field_anatomy.parts.helperText.attrs,
			"data-disabled": (0, _zag_js_dom_query.dataAttr)(values.disabled)
		};
	};
	const getErrorTextProps = () => ({
		id: errorTextId.value,
		...require_field_anatomy.parts.errorText.attrs,
		"aria-live": "polite"
	});
	const getRequiredIndicatorProps = () => ({
		"aria-hidden": true,
		...require_field_anatomy.parts.requiredIndicator.attrs
	});
	return (0, vue.computed)(() => {
		const values = (0, 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
		};
	});
};
//#endregion
exports.useField = useField;