29 lines
807 B
TypeScript
29 lines
807 B
TypeScript
import { ref } from 'vue'
|
|
import { useClickOutside } from '@/composables/useClickOutside'
|
|
import { useEscapeKey } from '@/composables/useEscapeKey'
|
|
|
|
// Bundles the isOpen/containerRef/toggle wiring shared by every dropdown menu
|
|
// (list card, list item row, list detail header) so it isn't hand-rolled per
|
|
// component on top of useClickOutside/useEscapeKey.
|
|
export function useDismissableMenu() {
|
|
const isOpen = ref(false)
|
|
const containerRef = ref<HTMLElement | null>(null)
|
|
|
|
function close() {
|
|
isOpen.value = false
|
|
}
|
|
|
|
function toggle(event: Event) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
|
|
useClickOutside(containerRef, close)
|
|
useEscapeKey(() => {
|
|
if (isOpen.value) close()
|
|
})
|
|
|
|
return { isOpen, containerRef, toggle, close }
|
|
}
|