]>
Commit | Line | Data |
---|---|---|
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="search($event.target.value)" | |
9 | @keyup.enter.exact="open()" | |
10 | @keyup.alt.enter="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.focus(); | |
24 | } | |
25 | if (event.key === "Escape") { | |
26 | this.cancel(); | |
27 | } | |
28 | }; | |
29 | document.addEventListener("keydown", this._keyListener.bind(this)); | |
30 | ||
31 | // fill seach from get parameter. | |
32 | const search = new URLSearchParams(window.location.search).get("search"); | |
33 | if (search) { | |
34 | this.$refs.search.value = search; | |
35 | this.search(search); | |
36 | this.focus(); | |
37 | } | |
38 | }, | |
39 | methods: { | |
40 | open: function (target = null) { | |
41 | if (!this.$refs.search.value) { | |
42 | return; | |
43 | } | |
44 | this.$emit("search-open", target); | |
45 | }, | |
46 | focus: function () { | |
47 | this.$emit("search-focus"); | |
48 | this.$nextTick(() => { | |
49 | this.$refs.search.focus(); | |
50 | }); | |
51 | }, | |
52 | setSearchURL: function (value) { | |
53 | const url = new URL(window.location); | |
54 | if (value === "") { | |
55 | url.searchParams.delete("search"); | |
56 | } else { | |
57 | url.searchParams.set("search", value); | |
58 | } | |
59 | window.history.replaceState("search", null, url); | |
60 | }, | |
61 | cancel: function () { | |
62 | this.setSearchURL(""); | |
63 | this.$refs.search.value = ""; | |
64 | this.$refs.search.blur(); | |
65 | this.$emit("search-cancel"); | |
66 | }, | |
67 | search: function (value) { | |
68 | this.setSearchURL(value); | |
69 | this.$emit("input", value.toLowerCase()); | |
70 | }, | |
71 | }, | |
72 | beforeDestroy() { | |
73 | document.removeEventListener("keydown", this._keyListener); | |
74 | }, | |
75 | }; | |
76 | </script> | |
77 | ||
78 | <style lang="scss" scoped></style> |