1 line
7.5 KiB
Plaintext
1 line
7.5 KiB
Plaintext
|
{"version":3,"file":"index.mjs","names":["attachedRoot","defaultConditional","checkEvent","e","el","binding","checkIsActive","root","ShadowRoot","host","target","elements","value","include","push","some","contains","isActive","closeConditional","directive","handler","_clickOutside","lastMousedownWasOutside","setTimeout","handleShadow","callback","document","ClickOutside","mounted","onClick","onMousedown","app","addEventListener","instance","$","uid","unmounted","removeEventListener"],"sources":["../../../src/directives/click-outside/index.ts"],"sourcesContent":["// Utilities\nimport { attachedRoot } from '@/util'\n\n// Types\nimport type { DirectiveBinding } from 'vue'\n\ninterface ClickOutsideBindingArgs {\n handler: (e: MouseEvent) => void\n closeConditional?: (e: Event) => boolean\n include?: () => HTMLElement[]\n}\n\ninterface ClickOutsideDirectiveBinding extends DirectiveBinding {\n value: ((e: MouseEvent) => void) | ClickOutsideBindingArgs\n}\n\nfunction defaultConditional () {\n return true\n}\n\nfunction checkEvent (e: MouseEvent, el: HTMLElement, binding: ClickOutsideDirectiveBinding): boolean {\n // The include element callbacks below can be expensive\n // so we should avoid calling them when we're not active.\n // Explicitly check for false to allow fallback compatibility\n // with non-toggleable components\n if (!e || checkIsActive(e, binding) === false) return false\n\n // If we're clicking inside the shadowroot, then the app root doesn't get the same\n // level of introspection as to _what_ we're clicking. We want to check to see if\n // our target is the shadowroot parent container, and if it is, ignore.\n const root = attachedRoot(el)\n if (\n typeof ShadowRoot !== 'undefined' &&\n root instanceof ShadowRoot &&\n root.host === e.target\n ) return false\n\n // Check if additional elements were passed to be included in check\n // (click must be outside all included elements, if any)\n const elements = ((typeof binding.value === 'object' && binding.value.include) || (() => []))()\n // Add the root element for the component this directive was defined on\n elements.push(el)\n\n // Check if it's a click outside our elements, and then if our callback returns true.\n // Non-toggleable components should take action in their callback and return falsy.\n // Toggleable can return true if it wants to deactivate.\n // Note that, because we're in the capture phase, this callback will occur before\n // the bubbling click event on any outside elements.\n return !elements.some(el => el?.contains(e.target as Node))\n}\n\nfunction checkIsActive (e: MouseEvent, binding: ClickOutsideDirectiveBinding): boolean | void {\n const isActive = (typeof binding.value === 'object' && binding.value.closeConditional) || defaultConditional\n\n return isActive(e)\n}\n\nfunction directive (e: MouseEvent, el: HTMLElement, binding: ClickOutsideDirectiveBinding) {\n const handler = typeof binding.value === 'function' ? binding.value : binding.value.handler\n\n el._clickOutside!.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {\n checkIsActive(e, binding) && handler && handler(e)\n }, 0)\n}\n\nfunction handleShadow (el: HTMLElement, callback: Function): void {\n const root = attachedRoot(el)\n\n callback(document)\n\n if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {\n callback(root)\n }\n}\n\nexport const ClickOutside = {\n // [data-app] may not be found\n // if using bind, inserted makes\n // sure that the root element is\n // available, iOS does not support\n // clicks on body\n mounted (el: HTMLElement, binding: ClickOutsideDirectiveBinding) {\n const onClick = (e: Event) => directive(e as MouseEvent, el, binding)\n const onMousedown = (e: Event) => {\n el._clickOutside!.lastMousedownWasOutside = checkEvent(e as MouseEvent, el, binding)\n }\n\n handleShadow(el, (app: HTMLElement) => {\n app.addEventListener('click', onClick, true)\n app.addEventListener('mousedown', onMousedown, true)\n })\n\n if (!el._cli
|