aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/SearchInput.vue
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
commitb9c5fcf085bed9c6100283133531b36bfbb06cf0 (patch)
tree7baa4d16c9d6c06745727c7c273065a29b8fc1d7 /src/components/SearchInput.vue
parentab7ac44c191e3b7dea696e76b74097e23f73b18c (diff)
downloadhomer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.gz
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.zst
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.zip
Build system integration using vue-cli.
Diffstat (limited to 'src/components/SearchInput.vue')
-rw-r--r--src/components/SearchInput.vue42
1 files changed, 42 insertions, 0 deletions
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
new file mode 100644
index 0000000..22b5eef
--- /dev/null
+++ b/src/components/SearchInput.vue
@@ -0,0 +1,42 @@
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>