52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { Ref } from 'vue'
|
|
import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
|
|
import useWindow from './useWindow'
|
|
import { KeyCode } from '~/types'
|
|
import { isInputDOMNode } from '~/utils'
|
|
|
|
export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
|
|
const window = useWindow()
|
|
const isPressed = controlledRef<boolean>(false, {
|
|
onBeforeChange(val, oldVal) {
|
|
if (val === oldVal) return false
|
|
},
|
|
onChanged() {
|
|
if (onChange && typeof onChange === 'function') onChange(isPressed.value)
|
|
},
|
|
})
|
|
|
|
onKeyPressed(
|
|
(e) => !isInputDOMNode(e) && (e.key === keyCode || e.keyCode === keyCode),
|
|
(e) => {
|
|
e.preventDefault()
|
|
isPressed.value = true
|
|
},
|
|
)
|
|
|
|
onKeyDown(
|
|
(e) => !isInputDOMNode(e) && (e.key === keyCode || e.keyCode === keyCode),
|
|
(e) => {
|
|
e.preventDefault()
|
|
isPressed.value = true
|
|
},
|
|
)
|
|
|
|
onKeyUp(
|
|
(e) => !isInputDOMNode(e) && (e.key === keyCode || e.keyCode === keyCode),
|
|
(e) => {
|
|
e.preventDefault()
|
|
isPressed.value = false
|
|
},
|
|
)
|
|
|
|
if (typeof window.addEventListener !== 'undefined') {
|
|
useEventListener(window, 'blur', () => {
|
|
isPressed.value = false
|
|
})
|
|
}
|
|
|
|
if (onChange && typeof onChange === 'function') onChange(isPressed.value)
|
|
|
|
return isPressed
|
|
}
|