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

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

import { parts } from "./field.anatomy.js";
import { unrefElement } from "../../utils/unref-element.js";
import { DEFAULT_ENVIRONMENT, useEnvironmentContext } from "../../providers/environment/use-environment-context.js";
import { computed, onBeforeUnmount, onMounted, reactive, ref, toValue, useId } from "vue";
import { ariaAttr, dataAttr } from "@zag-js/dom-query";
//#region src/components/field/use-field.ts
var useField = (props = {}) => {
	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
	const state = reactive({
		hasErrorText: false,
		hasHelperText: false
	});
	const uid = useId();
	const id = computed(() => toValue(props).id ?? uid);
	const rootRef = ref(null);
	const rootId = computed(() => toValue(props).ids?.control ?? `field::${id.value}`);
	const errorTextId = computed(() => toValue(props).ids?.errorText ?? `field::${id.value}::error-text`);
	const helperTextId = computed(() => toValue(props).ids?.helperText ?? `field::${id.value}::helper-text`);
	const labelId = computed(() => toValue(props).ids?.label ?? `field::${id.value}::label`);
	onMounted(() => {
		const rootNode = 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
		});
		onBeforeUnmount(() => {
			observer.disconnect();
		});
	});
	const getRootProps = () => {
		const values = toValue(props);
		return {
			...parts.root.attrs,
			id: rootId.value,
			role: "group",
			"data-disabled": dataAttr(values.disabled),
			"data-invalid": dataAttr(values.invalid),
			"data-readonly": dataAttr(values.readOnly)
		};
	};
	const targetControlId = computed(() => {
		const target = toValue(props).target;
		return target ? `field::${id.value}::item::${target}` : void 0;
	});
	const getLabelProps = () => {
		const values = toValue(props);
		return {
			...parts.label.attrs,
			id: labelId.value,
			"data-disabled": dataAttr(values.disabled),
			"data-invalid": dataAttr(values.invalid),
			"data-readonly": dataAttr(values.readOnly),
			"data-required": dataAttr(values.required),
			htmlFor: targetControlId.value ?? id.value
		};
	};
	const labelIds = computed(() => {
		const values = 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 = toValue(props);
		return {
			"aria-describedby": labelIds.value.join(" ") || void 0,
			"aria-invalid": ariaAttr(values.invalid),
			"data-invalid": dataAttr(values.invalid),
			"data-required": dataAttr(values.required),
			"data-readonly": dataAttr(values.readOnly),
			id: id.value,
			required: values.required,
			disabled: values.disabled,
			readOnly: values.readOnly
		};
	};
	const getInputProps = () => ({
		...getControlProps(),
		...parts.input.attrs
	});
	const getTextareaProps = () => ({
		...getControlProps(),
		...parts.textarea.attrs
	});
	const getSelectProps = () => ({
		...getControlProps(),
		...parts.select.attrs
	});
	const getHelperTextProps = () => {
		const values = toValue(props);
		return {
			id: helperTextId.value,
			...parts.helperText.attrs,
			"data-disabled": dataAttr(values.disabled)
		};
	};
	const getErrorTextProps = () => ({
		id: errorTextId.value,
		...parts.errorText.attrs,
		"aria-live": "polite"
	});
	const getRequiredIndicatorProps = () => ({
		"aria-hidden": true,
		...parts.requiredIndicator.attrs
	});
	return computed(() => {
		const values = 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
export { useField };