@stackoverfloweth/vue-compositions/dist/types/src/useKeyDown/useKeyDown.js

A collection of reusable vue compositions.

import { computed, reactive, unref } from 'vue';
import { asArray } from '../utilities/arrays';
import { tryOnScopeDispose } from '../utilities/tryOnScopeDispose';
function useKeyDownFactory() {
    const downKeys = reactive(new Set());
    const callbacks = new Set();
    function keyDownCallback(event) {
        downKeys.add(event.key);
        callbacks.forEach(callback => callback(event));
    }
    function keyUpCallback(event) {
        downKeys.delete(event.key);
    }
    document.addEventListener('keydown', keyDownCallback);
    document.addEventListener('keyup', keyUpCallback);
    return (...[key, callback]) => {
        const keys = computed(() => asArray(unref(key)));
        const down = computed(() => keys.value.some(key => downKeys.has(key)));
        const filteredCallback = (event) => {
            if (keys.value.includes(event.key)) {
                callback?.(event);
            }
        };
        const connect = () => {
            callbacks.add(filteredCallback);
        };
        const disconnect = () => {
            callbacks.delete(filteredCallback);
        };
        connect();
        tryOnScopeDispose(disconnect);
        return {
            down,
            connect,
            disconnect,
        };
    };
}
export const useKeyDown = useKeyDownFactory();
//# sourceMappingURL=useKeyDown.js.map