48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { Ref } from 'vue';
|
|
import { KeyCode } from '../types';
|
|
import { controlledRef, onKeyStroke, useEventListener } from '@vueuse/core';
|
|
|
|
export default (keyCode?: KeyCode, cb?: (keyPress: boolean) => void): Ref<boolean> => {
|
|
const keyPressed = controlledRef<boolean>(false, {
|
|
onBeforeChange(val, oldVal) {
|
|
if (val === oldVal) return false;
|
|
},
|
|
onChanged() {
|
|
if (cb && typeof cb === 'function') cb(keyPressed.value);
|
|
}
|
|
});
|
|
|
|
onKeyStroke(
|
|
(event) => event.key === keyCode || event.keyCode === keyCode,
|
|
(e) => {
|
|
e.preventDefault();
|
|
keyPressed.value = true;
|
|
},
|
|
{ eventName: 'keypress' }
|
|
);
|
|
onKeyStroke(
|
|
(event) => event.key === keyCode || event.keyCode === keyCode,
|
|
(e) => {
|
|
e.preventDefault();
|
|
keyPressed.value = true;
|
|
},
|
|
{ eventName: 'keydown' }
|
|
);
|
|
onKeyStroke(
|
|
(event) => event.key === keyCode || event.keyCode === keyCode,
|
|
(e) => {
|
|
e.preventDefault();
|
|
keyPressed.value = false;
|
|
},
|
|
{ eventName: 'keyup' }
|
|
);
|
|
|
|
useEventListener(window, 'blur', () => {
|
|
keyPressed.value = false;
|
|
});
|
|
|
|
if (cb && typeof cb === 'function') cb(keyPressed.value);
|
|
|
|
return keyPressed;
|
|
};
|