-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.ts
60 lines (52 loc) · 1.72 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
import type { Ref } from 'vue-demi'
import { computed, ref, watch } from 'vue-demi'
import type { MaybeElementRef } from '../unrefElement'
import { unrefElement } from '../unrefElement'
import type { ConfigurableWindow } from '../_configurable'
import { useEventListener } from '../useEventListener'
export interface UseFocusOptions extends ConfigurableWindow {
/**
* Initial value. If set true, then focus will be set on the target
*
* @default false
*/
initialValue?: boolean
}
export interface UseFocusReturn {
/**
* If read as true, then the element has focus. If read as false, then the element does not have focus
* If set to true, then the element will be focused. If set to false, the element will be blurred.
*/
focused: Ref<boolean>
}
/**
* Track or set the focus state of a DOM element.
*
* @see https://vueuse.org/useFocus
* @param target The target element for the focus and blur events.
* @param options
*/
export function useFocus(target: MaybeElementRef, options: UseFocusOptions = {}): UseFocusReturn {
const { initialValue = false } = options
const innerFocused = ref(false)
const targetElement = computed(() => unrefElement(target))
useEventListener(targetElement, 'focus', () => innerFocused.value = true)
useEventListener(targetElement, 'blur', () => innerFocused.value = false)
const focused = computed({
get: () => innerFocused.value,
set(value: boolean) {
if (!value && innerFocused.value)
targetElement.value?.blur()
else if (value && !innerFocused.value)
targetElement.value?.focus()
},
})
watch(
targetElement,
() => {
focused.value = initialValue
},
{ immediate: true, flush: 'post' },
)
return { focused }
}