-
-
Notifications
You must be signed in to change notification settings - Fork 672
/
SearchBox.ts
53 lines (45 loc) · 1.41 KB
/
SearchBox.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
import { useEventListener } from "@vueuse/core";
import { defineComponent, h, inject } from "vue";
import { useLocaleConfig } from "vuepress-shared/client";
import { SearchIcon } from "./icons.js";
import { searchModalSymbol } from "../composables/setup.js";
import { searchProLocales } from "../define.js";
import { isFocusingTextControl, isKeyMatched } from "../utils/index.js";
import type { VNode } from "vue";
import "../styles/search-box.scss";
export default defineComponent({
name: "SearchBox",
setup() {
const locale = useLocaleConfig(searchProLocales);
const isActive = inject(searchModalSymbol)!;
const onKeydown = (event: KeyboardEvent): void => {
if (
// not active
!isActive.value &&
// key matches
isKeyMatched(event) &&
// event does not come from the search box itself or
// user isn't focusing (and thus perhaps typing in) a text control
!isFocusingTextControl(event.target as EventTarget)
) {
event.preventDefault();
isActive.value = true;
}
};
useEventListener("keydown", onKeydown);
return (): (VNode | null)[] => [
h(
"button",
{
class: "search-pro-button",
role: "search",
"aria-label": locale.value.search,
onClick: () => {
isActive.value = true;
},
},
h(SearchIcon)
),
];
},
});