]> git.immae.eu Git - github/bastienwirtz/homer.git/blame - src/components/SearchInput.vue
Fix Github action trigger syntax
[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"
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>
16export 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>