-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.ts
56 lines (49 loc) · 1.36 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
import { ref } from 'vue-demi'
import { useEventListener } from '../useEventListener'
import type { ConfigurableDocumentOrShadowRoot, ConfigurableWindow } from '../_configurable'
import { defaultWindow } from '../_configurable'
export interface UseActiveElementOptions extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot {
/**
* Search active element deeply inside shadow dom
*
* @default true
*/
deep?: boolean
}
/**
* Reactive `document.activeElement`
*
* @see https://vueuse.org/useActiveElement
* @param options
*/
export function useActiveElement<T extends HTMLElement>(
options: UseActiveElementOptions = {},
) {
const {
window = defaultWindow,
deep = true,
} = options
const document = options.document ?? window?.document
const getDeepActiveElement = () => {
let element = document?.activeElement
if (deep) {
while (element?.shadowRoot)
element = element?.shadowRoot?.activeElement
}
return element
}
const activeElement = ref<T | null | undefined>()
const trigger = () => {
activeElement.value = getDeepActiveElement() as T | null | undefined
}
if (window) {
useEventListener(window, 'blur', (event) => {
if (event.relatedTarget !== null)
return
trigger()
}, true)
useEventListener(window, 'focus', trigger, true)
}
trigger()
return activeElement
}