bbell / src / composables / useReposition.ts

import { ref, onMounted, onUnmounted, type Ref } from 'vue'

export function useReposition(options: {
	triggerRef: Ref<HTMLElement | null>
	containerRef: Ref<HTMLElement | null>
	isOpen: Ref<boolean>
	isMobile: Ref<boolean>
	width: Ref<string>
	align: Ref<'left' | 'right'>
}) {
	const popoverPos = ref({ top: 0, left: 0 })

	const calculatePosition = () => {
		const trigger = options.triggerRef.value
		if (!trigger) return
		const rect = trigger.getBoundingClientRect()
		const gap = 8
		const parsedW = parseInt(options.width.value || '200')
		popoverPos.value = {
			top: rect.bottom + gap,
			left: options.align.value === 'right' ? rect.right - parsedW : rect.left,
		}
	}

	const handleReposition = () => {
		if (options.isOpen.value && !options.isMobile.value) calculatePosition()
	}

	onMounted(() => {
		window.addEventListener('resize', handleReposition)
		window.addEventListener('scroll', handleReposition, true)
	})

	onUnmounted(() => {
		window.removeEventListener('resize', handleReposition)
		window.removeEventListener('scroll', handleReposition, true)
	})

	return { popoverPos, calculatePosition }
}