text: /* Reusable click-outside directive for dropdown menus and sliders
  Listens for click event on whole document and checks if element is not part of it
  https://tahazsh.com/detect-outside-click-in-vue
  */
  
  let handleOutsideClick;
  
  const ClickOutside = {
    bind(el, binding, vnode) {
      handleOutsideClick = e => {
        e.stopPropagation();
        const { handler, exclude } = binding.value;
        let clickedOnExcludedEl = false;
        exclude.forEach(refName => {
          if (!clickedOnExcludedEl) {
            // Get the element using the reference name
            const excludedEl = vnode.context.$refs[refName];
            // See if this excluded element
            // is the same element the user just clicked on
            clickedOnExcludedEl = excludedEl.contains(e.target);
          }
        });
        // We check to see if the clicked element is not
        // the dialog element and not excluded
        if (!el.contains(e.target) && !clickedOnExcludedEl) {
          // If the clicked element is outside the dialog
          // and not the button, then call the outside-click handler
          // from the same component this directive is used in
          vnode.context[handler]();
        }
      };
      document.addEventListener("click", handleOutsideClick);
      document.addEventListener("touchstart", handleOutsideClick);
    },
    unbind() {
      // If the element that has v-click-outside is removed, then
      // unbind click/touchstart listeners from the whole page
      document.removeEventListener("click", handleOutsideClick);
      document.removeEventListener("touchstart", handleOutsideClick);
    },
  };
  
  export default ClickOutside;
  