Can tab over tiles

src/components/FilterTile.vue

@@ -5,6 +5,7 @@
       <input
         id="filter-tiles"
         v-model="input"
+        ref="filter"
         placeholder="Start typing to filter tiles..."
         v-on:input="userIsTypingSomething"
         @keydown.esc="clearFilterInput" />
@@ -31,11 +32,21 @@ export default {
       this.$emit('user-is-searchin', this.input)
     },
     clearFilterInput () {
-      console.log('Esc key pressed')
       this.input = ''
       this.userIsTypingSomething()
+      document.activeElement.blur()
+    },
+  },
+  mounted: function() {
+      window.addEventListener('keyup', (event) => {
+        const key = event.key
+        if(/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
+          this.input += key
+          this.$refs.filter.focus()
+          this.userIsTypingSomething()
+        }
+      });
     }
-  }
 }
 </script>
 

src/components/Item.vue

@@ -1,15 +1,15 @@
 <template>
     <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <div class="item">
-        <div class="tile-title" :id="`tile-${id}`">
-            <span class="text">{{ title }}</span>
-            <div class="overflow-dots">...</div>
-        </div>
-        <img
-            v-if="icon"
-            :src="`/img/tile-icons/${icon}.png`"
-            class="tile-icon"
-        />
+        <div class="item" tabindex="0">
+            <div class="tile-title" :id="`tile-${id}`">
+                <span class="text">{{ title }}</span>
+                <div class="overflow-dots">...</div>
+            </div>
+            <img
+                v-if="icon"
+                :src="`/img/tile-icons/${icon}.png`"
+                class="tile-icon"
+            />
         </div>
   </el-tooltip>
 </template>
@@ -64,7 +64,8 @@ export default {
     margin: 8px;
     background: #607d8b33;
     text-align: center;
-    padding: 5px;
+    padding: 2px;
+    border: 2px solid transparent;
     border-radius: 10px;
     box-shadow: 1px 1px 2px #373737;
     cursor: pointer;
@@ -72,6 +73,10 @@ export default {
         box-shadow: 1px 2px 4px #373737;
         background: #607d8b4d;
     }
+    &:focus {
+        border: 2px solid #1CA8DD;
+        outline: none;
+    }
 }
 .tile-title {
     white-space: nowrap;

src/views/Home.vue

@@ -24,6 +24,10 @@ import * as linkData from './../data/item-data.json'
 
 export default {
   name: 'home',
+  props: {
+    title: { default: 'Panel', type: String },
+    subtitle: { default: 'All your server management tools in one place', type: String }
+  },
   components: {
     Header,
     FilterTile,
@@ -39,18 +43,19 @@ export default {
     searching (searchTile) {
       this.searchTile = searchTile
     },
+    getDomainFromUrl (url) {
+      var urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d\.-]+)\.(?:[a-z\.]{2,10})(?:[/\w\.-]*)*/;
+      var domainPattern = url.match(urlPattern);
+      return domainPattern? domainPattern[1] : ''
+    },
     filterTiles (allTiles) {
       return allTiles.filter(tile => {
         const searchTerm = this.searchTile.toLowerCase()
         return tile.title.toLowerCase().includes(searchTerm) ||
-          tile.description.toLowerCase().includes(searchTerm) ||
-          tile.url.toLowerCase().includes(searchTerm)
+          tile.provider.toLowerCase().includes(searchTerm) ||
+          this.getDomainFromUrl(tile.url).includes(searchTerm)
       })
     }
-  },
-  props: {
-    title: { default: 'Panel', type: String },
-    subtitle: { default: 'All your server management tools in one place', type: String }
   }
 }
 </script>