harb/web-app/src/composables/useClickOutside.ts

import { onBeforeUnmount, onMounted, type Ref } from 'vue';

export default function useClickOutside(component: Ref<HTMLElement | null>, callback: () => void) {
  if (!component) return;
  const listener = (event: MouseEvent) => {
    if (event.target !== component.value && event.composedPath().includes(component.value as EventTarget)) {
      return;
    }
    if (typeof callback === 'function') {
      callback();
    }
  };
  onMounted(() => {
    window.addEventListener('click', listener);
  });
  onBeforeUnmount(() => {
    window.removeEventListener('click', listener);
  });

  return { listener };
}