forked from vueuse/vueuse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
183 lines (163 loc) · 4.7 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
import type { ComputedRef } from 'vue-demi'
import { computed, reactive, ref, unref } from 'vue-demi'
import type { MaybeRef } from '@vueuse/shared'
import { noop } from '@vueuse/shared'
import { useEventListener } from '../useEventListener'
import { defaultWindow } from '../_configurable'
import { DefaultMagicKeysAliasMap } from './aliasMap'
export interface UseMagicKeysOptions<Reactive extends Boolean> {
/**
* Returns a reactive object instead of an object of refs
*
* @default false
*/
reactive?: Reactive
/**
* Target for listening events
*
* @default window
*/
target?: MaybeRef<EventTarget>
/**
* Alias map for keys, all the keys should be lowercase
* { target: keycode }
*
* @example { ctrl: "control" }
* @default <predefined-map>
*/
aliasMap?: Record<string, string>
/**
* Register passive listener
*
* @default true
*/
passive?: boolean
/**
* Custom event handler for keydown/keyup event.
* Useful when you want to apply custom logic.
*
* When using `e.preventDefault()`, you will need to pass `passive: false` to useMagicKeys().
*/
onEventFired?: (e: KeyboardEvent) => void | boolean
}
export interface MagicKeysInternal {
/**
* A Set of currently pressed keys,
* Stores raw keyCodes.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
*/
current: Set<string>
}
export type MagicKeys<Reactive extends Boolean> =
Readonly<
Omit<Reactive extends true
? Record<string, boolean>
: Record<string, ComputedRef<boolean>>,
keyof MagicKeysInternal>
& MagicKeysInternal
>
/**
* Reactive keys pressed state, with magical keys combination support.
*
* @see https://vueuse.org/useMagicKeys
*/
export function useMagicKeys(options?: UseMagicKeysOptions<false>): MagicKeys<false>
export function useMagicKeys(options: UseMagicKeysOptions<true>): MagicKeys<true>
export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
const {
reactive: useReactive = false,
target = defaultWindow,
aliasMap = DefaultMagicKeysAliasMap,
passive = true,
onEventFired = noop,
} = options
const current = reactive(new Set<string>())
const obj = { toJSON() { return {} }, current }
const refs: Record<string, any> = useReactive ? reactive(obj) : obj
const metaDeps = new Set<string>()
function setRefs(key: string, value: boolean) {
if (key in refs) {
if (useReactive)
refs[key] = value
else
refs[key].value = value
}
}
function reset() {
for (const key of Object.keys(refs)) {
if (useReactive)
refs[key] = false
else
refs[key].value = false
}
}
function updateRefs(e: KeyboardEvent, value: boolean) {
const key = e.key?.toLowerCase()
const code = e.code?.toLowerCase()
const values = [code, key].filter(Boolean)
// current set
if (code) {
if (value)
current.add(e.code)
else
current.delete(e.code)
}
for (const key of values)
setRefs(key, value)
// #1312
// In macOS, keys won't trigger "keyup" event when Meta key is released
// We track it's combination and relese manually
if (key === 'meta' && !value) {
// Meta key released
metaDeps.forEach((key) => {
current.delete(key)
setRefs(key, false)
})
metaDeps.clear()
}
else if (typeof e.getModifierState === 'function' && e.getModifierState('Meta') && value) {
[...current, ...values].forEach(key => metaDeps.add(key))
}
}
if (target) {
useEventListener(target, 'keydown', (e: KeyboardEvent) => {
updateRefs(e, true)
return onEventFired(e)
}, { passive })
useEventListener(target, 'keyup', (e: KeyboardEvent) => {
updateRefs(e, false)
return onEventFired(e)
}, { passive })
// #1350
useEventListener('blur', reset, { passive: true })
useEventListener('focus', reset, { passive: true })
}
const proxy = new Proxy(
refs,
{
get(target, prop, rec) {
if (typeof prop !== 'string')
return Reflect.get(target, prop, rec)
prop = prop.toLowerCase()
// alias
if (prop in aliasMap)
prop = aliasMap[prop]
// create new tracking
if (!(prop in refs)) {
if (/[+_-]/.test(prop)) {
const keys = prop.split(/[+_-]/g).map(i => i.trim())
refs[prop] = computed(() => keys.every(key => unref(proxy[key])))
}
else {
refs[prop] = ref(false)
}
}
const r = Reflect.get(target, prop, rec)
return useReactive ? unref(r) : r
},
},
)
return proxy as any
}
export { DefaultMagicKeysAliasMap } from './aliasMap'