]> git.immae.eu Git - github/bastienwirtz/homer.git/blame - src/components/SearchInput.vue
Fix #173: invisible tag border.
[github/bastienwirtz/homer.git] / src / components / SearchInput.vue
CommitLineData
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"
31bd77c8 8 @input="search($event.target.value)"
ed8b17e0
BW
9 @keyup.enter.exact="$emit('search-open')"
10 @keyup.alt.enter="$emit('search-open', '_blank')"
b9c5fcf0
BW
11 />
12 </div>
13</template>
14
15<script>
16export default {
17 name: "SearchInput",
18 props: ["value"],
19 mounted() {
20 this._keyListener = function (event) {
21 if (event.key === "/") {
22 event.preventDefault();
31bd77c8 23 this.focus();
b9c5fcf0
BW
24 }
25 if (event.key === "Escape") {
31bd77c8 26 this.cancel();
b9c5fcf0
BW
27 }
28 };
29 document.addEventListener("keydown", this._keyListener.bind(this));
31bd77c8
BW
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 focus: function () {
41 this.$emit("search-focus");
42 this.$nextTick(() => {
43 this.$refs.search.focus();
44 });
45 },
46 setSearchURL: function (value) {
47 const url = new URL(window.location);
48 if (value === "") {
49 url.searchParams.delete("search");
50 } else {
51 url.searchParams.set("search", value);
52 }
53 window.history.replaceState("search", null, url);
54 },
55 cancel: function () {
56 this.setSearchURL("");
57 this.$refs.search.value = "";
58 this.$refs.search.blur();
59 this.$emit("search-cancel");
60 },
61 search: function (value) {
62 this.setSearchURL(value);
63 this.$emit("input", value.toLowerCase());
64 },
b9c5fcf0
BW
65 },
66 beforeDestroy() {
67 document.removeEventListener("keydown", this._keyListener);
68 },
69};
70</script>
71
72<style lang="scss" scoped></style>