Merge pull request #16 from fabd/feature/merge-pr11-new-cursor-and-se…

…archbar-by-zapobyte

Feature/merge pr11 new cursor and searchbar by zapobyte

src/App.vue

@@ -5,7 +5,7 @@
     <div class="mr-16">
       <runes />
     </div>
-    <div class="flex-1">
+    <div class="overflow-auto flex-1">
       <runewords-table />
     </div>
   </main>

src/assets/styles/main.scss

@@ -35,6 +35,11 @@ body {
   @apply font-sans;
 }
 
+div {
+  /* stylelint-disable-next-line declaration-no-important */
+  cursor: url("@/assets/images/mouse.png") 2 2, pointer !important;
+}
+
 h1,
 h2,
 h3,
@@ -153,6 +158,32 @@ object {
   }
 }
 
+// --------------------------------------------------------------------
+// runeword search box
+// --------------------------------------------------------------------
+.rw-Search {
+  label {
+    color: #a29f9d;
+  }
+
+  &-input {
+    @apply w-full rounded text-[#444];
+    padding: 0.5rem;
+    background: #000;
+    @apply border border-gold;
+    @apply text-gold-light;
+  }
+
+  &-input:focus {
+    @apply outline-none;
+    @apply border-gold-light;
+  }
+
+  &-input::placeholder {
+    @apply text-[#686047];
+  }
+}
+
 // --------------------------------------------------------------------
 // the "Help" toggle
 // --------------------------------------------------------------------

src/components/RunewordsTable.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="flex justify-between items-center mb-2">
-    <h2 class="rw-Title-h2 mb-0"
-      >Runewords<span v-if="availableCount">
-        ({{ availableCount }} available)</span
-      ></h2
-    >
+  <div class="rw-Search flex items-center mb-4">
+    <label class="text-gold whitespace-nowrap mr-4">{{ "Search" }}</label>
+    <input v-model="searchTitle" type="text" class="rw-Search-input" />
   </div>
 
+  <h2 class="rw-Title-h2 mb-2">
+    Runewords<span v-if="availableCount">({{ availableCount }} available)</span>
+  </h2>
+
   <runeword-popup ref="popup" />
 
   <table class="rw-Table w-full">
@@ -34,7 +35,7 @@
     </thead>
     <tbody>
       <tr
-        v-for="(item, i) in itemsBySort"
+        v-for="(item, i) in searchedItems"
         :key="i"
         class="rw-Table-tr"
         :class="cssCompleteRuneword(item)"
@@ -117,6 +118,8 @@ export default defineComponent({
         { key: "ttypes", label: "Type" },
         { key: "level", label: "Level" },
       ],
+
+      searchTitle: "",
     };
   },
 
@@ -150,6 +153,17 @@ export default defineComponent({
       return runewordsData;
     },
 
+    /** @return {Runeword[]} */
+    searchedItems() {
+      const list = this.itemsBySort;
+      const newList = list.filter((item) => {
+        return item.title
+          .toLowerCase()
+          .includes(this.searchTitle.toLowerCase());
+      });
+      return newList;
+    },
+
     /** @return {Runeword[]} */
     itemsBySort() {
       const list = this.items.slice();