]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <div class="search-bar"> | |
3 | <label for="search" class="search-label"></label> | |
4 | <input | |
5 | type="text" | |
6 | ref="search" | |
7 | :value="value" | |
8 | @input="$emit('input', $event.target.value.toLowerCase())" | |
9 | @keyup.enter.exact="$emit('search:open')" | |
10 | @keyup.alt.enter="$emit('search:open', '_blank')" | |
11 | /> | |
12 | </div> | |
13 | </template> | |
14 | ||
15 | <script> | |
16 | export default { | |
17 | name: "SearchInput", | |
18 | props: ["value"], | |
19 | mounted() { | |
20 | this._keyListener = function (event) { | |
21 | if (event.key === "/") { | |
22 | event.preventDefault(); | |
23 | this.$emit("search:focus"); | |
24 | this.$nextTick(() => { | |
25 | this.$refs.search.focus(); | |
26 | }); | |
27 | } | |
28 | if (event.key === "Escape") { | |
29 | this.$refs.search.value = ""; | |
30 | this.$refs.search.blur(); | |
31 | this.$emit("search:cancel"); | |
32 | } | |
33 | }; | |
34 | document.addEventListener("keydown", this._keyListener.bind(this)); | |
35 | }, | |
36 | beforeDestroy() { | |
37 | document.removeEventListener("keydown", this._keyListener); | |
38 | }, | |
39 | }; | |
40 | </script> | |
41 | ||
42 | <style lang="scss" scoped></style> |