reka-ui/dist/shared/useSize.js

Vue port for Radix UI Primitives.

import { computed, onMounted, ref } from "vue";
import { unrefElement } from "@vueuse/core";

//#region src/shared/useSize.ts
function useSize(element) {
	const size = ref();
	const width = computed(() => size.value?.width ?? 0);
	const height = computed(() => size.value?.height ?? 0);
	onMounted(() => {
		const el = unrefElement(element);
		if (el) {
			size.value = {
				width: el.offsetWidth,
				height: el.offsetHeight
			};
			const resizeObserver = new ResizeObserver((entries) => {
				if (!Array.isArray(entries)) return;
				if (!entries.length) return;
				const entry = entries[0];
				let width$1;
				let height$1;
				if ("borderBoxSize" in entry) {
					const borderSizeEntry = entry.borderBoxSize;
					const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
					width$1 = borderSize.inlineSize;
					height$1 = borderSize.blockSize;
				} else {
					width$1 = el.offsetWidth;
					height$1 = el.offsetHeight;
				}
				size.value = {
					width: width$1,
					height: height$1
				};
			});
			resizeObserver.observe(el, { box: "border-box" });
			return () => resizeObserver.unobserve(el);
		} else size.value = void 0;
	});
	return {
		width,
		height
	};
}

//#endregion
export { useSize };
//# sourceMappingURL=useSize.js.map