type ClickOutsideBinding = {
  value: (event: MouseEvent, el: HTMLElement) => void
}

export default {
  beforeMount(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }, binding: ClickOutsideBinding) {
    el.clickOutsideEvent = (event: MouseEvent) => {
      if (!(el === event.target || el.contains(event.target as Node))) {
        binding.value(event, el)
      }
    }
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unmounted(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }) {
    document.body.removeEventListener('click', el.clickOutsideEvent as (e: MouseEvent) => void)
  },
}