@stackoverfloweth/vue-compositions
Version:
A collection of reusable vue compositions.
46 lines • 1.21 kB
JavaScript
import { onScopeDispose, toValue } from 'vue';
import { useGlobalEventListener } from '../useGlobalEventListener';
const callbacks = new Map();
function handleClick(event) {
for (const { element, callback } of callbacks.values()) {
const elementValue = toValue(element);
if (!elementValue.contains(event.target)) {
callback();
}
}
}
const { add, remove } = useGlobalEventListener('click', handleClick, { capture: true });
function tryTeardownEventListener() {
if (callbacks.size > 0) {
return;
}
remove();
}
function tryAddEventListener() {
if (callbacks.size > 0) {
return;
}
add();
}
export function useClickOutside(element, callback) {
const id = Symbol('useClickOutside');
callbacks.set(id, { element, callback });
tryAddEventListener();
function off() {
callbacks.delete(id);
tryTeardownEventListener();
}
function on() {
callbacks.set(id, { element, callback });
tryAddEventListener();
}
onScopeDispose(() => {
off();
tryTeardownEventListener();
});
return {
off,
on,
};
}
//# sourceMappingURL=useClickOutside.js.map