maz-ui/dist/directives/vClickOutside.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{nextTick}from"vue";import{isServer}from"@maz-ui/utils/helpers/isServer";var eventHandlers=new WeakMap;function getEventType(){return isServer()?`click`:document.ontouchstart===null?`touchstart`:`click`}function isOptionsObject(value){return typeof value==`object`&&!!value&&`callback`in value}function getOptionsFromBinding(binding){let value=binding.value;return isOptionsObject(value)?{ignore:[],capture:!1,once:!1,stopPropagation:!1,...value}:{callback:value,ignore:[],capture:!1,once:!1,stopPropagation:!1}}function shouldIgnoreElement(target,ignoreSelectors){return isServer()?!1:ignoreSelectors.some(selector=>{try{if(target.matches&&target.matches(selector)||target.closest&&target.closest(selector)!==null)return!0;let excludedElement=document.querySelector(selector);if(excludedElement){let elementId=excludedElement.getAttribute(`id`);if(elementId&&target instanceof HTMLElement&&target.getAttribute(`id`)===elementId||excludedElement.contains(target))return!0}return!1}catch{return!1}})}async function onMounted$1(el,binding){if(!isServer())try{onUnmounted$1(el);let vm=binding.instance;let{callback,ignore=[],capture=!1,once=!1,stopPropagation=!1}=getOptionsFromBinding(binding);let isCallbackFunction=typeof callback==`function`;if(!isCallbackFunction)throw Error(`[maz-ui](vClickOutside) the callback should be a function`);await nextTick();let eventHandler=event=>{stopPropagation&&event.stopPropagation();let target=event.target;if(!target||!el)return;let isOutside=!el.contains(target);let shouldIgnore=ignore.length>0&&shouldIgnoreElement(target,ignore);if(isOutside&&!shouldIgnore&&callback&&isCallbackFunction)return callback.call(vm,event)};eventHandlers.set(el,eventHandler);let eventType=getEventType();document.addEventListener(eventType,eventHandler,{passive:!0,capture,once})}catch(error){console.error(`[maz-ui](vClickOutside)`,error)}}function onUnmounted$1(el){if(!isServer())try{let eventHandler=eventHandlers.get(el);if(eventHandler){let eventType=getEventType();document.removeEventListener(eventType,eventHandler,!1),eventHandlers.delete(el)}}catch(error){console.error(`[maz-ui](vClickOutside)`,error)}}function onUpdated(el,binding){try{if(binding.value===binding.oldValue)return;onMounted$1(el,binding)}catch(error){console.error(`[maz-ui](vClickOutside)`,error)}}var directive={mounted:onMounted$1,updated:onUpdated,unmounted:onUnmounted$1};var plugin={install:app=>{app.directive(`click-outside`,directive)}};export{directive as vClickOutside,plugin as vClickOutsideInstall};