@ark-ui/vue/dist/utils/use-scope-id.js

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

import { getCurrentInstance } from "vue";
import { hasProp, isString } from "@zag-js/utils";
//#region src/utils/use-scope-id.ts
function hasVnodeScopeId(vnode) {
	if (vnode === null || typeof vnode !== "object") return false;
	const vnodeObj = vnode;
	return hasProp(vnodeObj, "scopeId") && isString(vnodeObj.scopeId);
}
function hasTypeScopeId(type) {
	if (type === null || typeof type !== "object") return false;
	const typeObj = type;
	return hasProp(typeObj, "__scopeId") && isString(typeObj.__scopeId);
}
/**
* Get scope ID from a component instance.
*/
function getScopeIdFromInstance(instance) {
	if (hasVnodeScopeId(instance.vnode)) return instance.vnode.scopeId;
	if (hasTypeScopeId(instance.type)) return instance.type.__scopeId;
}
/**
* Access scope ID for scoped styles from parent component.
* We need to traverse up the component tree to find a parent with scoped styles.
*/
function useScopeId() {
	const instance = getCurrentInstance();
	if (!instance) return;
	let scopeId = getScopeIdFromInstance(instance);
	if (!scopeId && instance.parent) {
		let parent = instance.parent;
		while (parent && !scopeId) {
			scopeId = getScopeIdFromInstance(parent);
			parent = parent.parent;
		}
	}
	return scopeId;
}
//#endregion
export { useScopeId };