@inkline/inkline/composables/useClickOutside.mjs

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

import { onMounted, onUnmounted, unref } from "vue";
import { isVisible, off, on } from "@grozav/utils";
export function useClickOutside(props) {
  const binding = (event) => {
    const fn = unref(props.fn);
    if (!props.elementRef.value) {
      return;
    }
    const target = event.target;
    if (!isVisible(props.elementRef.value) || !target) {
      return;
    }
    if (props.elementRef.value === target || props.elementRef.value.contains(target)) {
      return;
    }
    fn(event);
  };
  onMounted(() => {
    if (typeof window !== "undefined") {
      on(window.document, "mousedown", binding);
    }
  });
  onUnmounted(() => {
    if (typeof window !== "undefined") {
      off(window.document, "mousedown", binding);
    }
  });
}