Non-💩 and dirt simple click-outside directive for Vue 3

click-outside.ts

import type { Directive } from "vue";

type ClickOutsideHandler = ($event: MouseEvent | TouchEvent) => void;
type ClickOutsideHandlerMap = Map<HTMLElement, ClickOutsideHandler> & {
  initialized?: boolean;
};

const clickOutsideHandlersSymbol: symbol = Symbol.for("v-click-outside-handlers");

// @ts-ignore
if (typeof window === "object") {
  // @ts-ignore
  window[clickOutsideHandlersSymbol] =
    // @ts-ignore
    window[clickOutsideHandlersSymbol] ?? new Map<HTMLElement, ClickOutsideHandler>();

  // @ts-ignore
  const globalClickOutsideHandlersMap: ClickOutsideHandlerMap = window[clickOutsideHandlersSymbol];

  if (!globalClickOutsideHandlersMap.initialized) {
    window.document.addEventListener(
      "click",
      ($event) => {
        globalClickOutsideHandlersMap.forEach((handler) => {
          handler($event);
        });
      },
      { capture: true, passive: true },
    );

    window.document.addEventListener(
      "touchstart",
      ($event) => {
        globalClickOutsideHandlersMap.forEach((handler) => {
          handler($event);
        });
      },
      { capture: true, passive: true },
    );

    globalClickOutsideHandlersMap.initialized = true;
  }
}

const registerClickOutsideHandler = ($el: HTMLElement, { value: handler }: { value: Function }) => {
  const globalClickOutsideHandlersMap: ClickOutsideHandlerMap =
    // @ts-ignore
    window[clickOutsideHandlersSymbol];

  globalClickOutsideHandlersMap.set($el, ($event: MouseEvent | TouchEvent) => {
    // @ts-ignore
    if ($event.target !== $el && !$el.contains($event.target)) {
      handler();
    }
  });
};

const cleanupClickOutsideHandler = ($el: HTMLElement) => {
  const globalClickOutsideHandlersMap: ClickOutsideHandlerMap =
    // @ts-ignore
    window[clickOutsideHandlersSymbol];

  globalClickOutsideHandlersMap.delete($el);
};

const directive: Directive = {
  mounted: registerClickOutsideHandler,
  updated: registerClickOutsideHandler,
  beforeUnmount: cleanupClickOutsideHandler,
};

export default directive;