@inkline/inkline/composables/useClickOutside.js

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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useClickOutside = useClickOutside;
var _vue = require("vue");
var _utils = require("@grozav/utils");
function useClickOutside(props) {
  const binding = event => {
    const fn = (0, _vue.unref)(props.fn);
    if (!props.elementRef.value) {
      return;
    }
    const target = event.target;
    if (!(0, _utils.isVisible)(props.elementRef.value) || !target) {
      return;
    }
    if (props.elementRef.value === target || props.elementRef.value.contains(target)) {
      return;
    }
    fn(event);
  };
  (0, _vue.onMounted)(() => {
    if (typeof window !== "undefined") {
      (0, _utils.on)(window.document, "mousedown", binding);
    }
  });
  (0, _vue.onUnmounted)(() => {
    if (typeof window !== "undefined") {
      (0, _utils.off)(window.document, "mousedown", binding);
    }
  });
}