resources/vue/composables/useDetectOutsideClick.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import {onBeforeUnmount, onMounted} from "vue";

export default function useDetectOutsideClick(component, callback) {
    if (!component) return;
    function listener(event) {
        if (event.target !== component.value && event.composedPath().includes(component.value)) {
            return;
        }
        if (typeof callback === 'function') {
            callback();
        }
    }

    onMounted(() => { window.addEventListener('click', listener) });
    onBeforeUnmount(() => { window.removeEventListener('click', listener) });

    return {listener};
}