bbell / src / composables / useClickOutside.ts

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

export function useClickOutside(options: {
	isOpen: Ref<boolean>
	containerRef: Ref<HTMLElement | null>
	triggerRef?: Ref<HTMLElement | null>
	isMobile?: Ref<boolean>
	onClose: () => void
}) {
	const { isOpen, containerRef, triggerRef, isMobile, onClose } = options

	const handleClickOutside = (e: MouseEvent) => {
		if (!isOpen.value) return
		if (isMobile?.value) return
		const target = e.target as Node
		if (!containerRef.value?.contains(target) && !triggerRef?.value?.contains(target)) {
			onClose()
		}
	}

	onMounted(() => {
		document.addEventListener('mousedown', handleClickOutside)
	})
	onUnmounted(() => {
		document.removeEventListener('mousedown', handleClickOutside)
	})
}