From b9c5fcf085bed9c6100283133531b36bfbb06cf0 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 25 May 2020 15:07:03 -0700
Subject: Build system integration using vue-cli.

---
 src/components/SearchInput.vue | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/SearchInput.vue

(limited to 'src/components/SearchInput.vue')

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 @@
+<template>
+  <div class="search-bar">
+    <label for="search" class="search-label"></label>
+    <input
+      type="text"
+      ref="search"
+      :value="value"
+      @input="$emit('input', $event.target.value.toLowerCase())"
+      @keyup.enter.exact="$emit('search:open')"
+      @keyup.alt.enter="$emit('search:open', '_blank')"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SearchInput",
+  props: ["value"],
+  mounted() {
+    this._keyListener = function (event) {
+      if (event.key === "/") {
+        event.preventDefault();
+        this.$emit("search:focus");
+        this.$nextTick(() => {
+          this.$refs.search.focus();
+        });
+      }
+      if (event.key === "Escape") {
+        this.$refs.search.value = "";
+        this.$refs.search.blur();
+        this.$emit("search:cancel");
+      }
+    };
+    document.addEventListener("keydown", this._keyListener.bind(this));
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener);
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
-- 
cgit v1.2.3