From 4f1268565ff94696c69f4259051f2135765629c0 Mon Sep 17 00:00:00 2001
From: Felix Scholze <felix@webshaped.de>
Date: Wed, 15 Nov 2023 01:19:57 +0100
Subject: [PATCH] feat: readd reset function

---
 src/components/SearchWords.vue        | 35 ++++++++++++++++-----------
 src/components/WordList.vue           |  2 --
 src/styles/components/_word-list.scss |  8 ++----
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/SearchWords.vue b/src/components/SearchWords.vue
index 7ab3b2ae..5992e13d 100644
--- a/src/components/SearchWords.vue
+++ b/src/components/SearchWords.vue
@@ -10,7 +10,7 @@
       @click="buttonActions"
     >
       <Transition name="fade-fast" mode="out-in">
-        <span v-if="toggleShowAndClearIcon" key="search" class="c-button--center-icon">
+        <span v-if="searchLength === 0" key="search" class="c-button--center-icon">
           <Search default-class="c-word-search__search-icon" />
         </span>
         <span v-else key="del" class="c-button--center-icon">
@@ -34,7 +34,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import Search from "virtual:icons/lucide/search";
-import Command from "virtual:icons/lucide/command";
 import X from "virtual:icons/lucide/x";
 
 interface SearchWordsProps {
@@ -45,26 +44,34 @@ const { buttonPosition = "left" } = defineProps<SearchWordsProps>();
 
 const search = ref("");
 const searchLength = computed(() => search.value.length);
-const toggleShowAndClearIcon = ref(true);
 
 const emit = defineEmits(["update:search"]);
 
-const updateSearch = () => {
+/**
+ * Emits the search value to the parent component
+ *
+ * @return  {void}
+ */
+const updateSearch = (): void => {
   emit("update:search", search);
 };
 
-const buttonActions = () => {
-  if (searchLength.value > 0) {
-    search.value = "";
-  }
+/**
+ * Handles the button actions
+ *
+ * @return  {void}
+ */
+const buttonActions = (): void => {
+  if (searchLength.value > 0) resetSearch();
 };
 
-const toggleSearchClearIcons = () => {
-  if (searchLength.value === 0) {
-    toggleShowAndClearIcon.value = true;
-  } else {
-    toggleShowAndClearIcon.value = false;
-  }
+/**
+ * Resets the search value
+ *
+ * @return  {void}
+ */
+const resetSearch = (): void => {
+  search.value = "";
 };
 </script>
 
diff --git a/src/components/WordList.vue b/src/components/WordList.vue
index 9c41e095..b3198f44 100644
--- a/src/components/WordList.vue
+++ b/src/components/WordList.vue
@@ -56,10 +56,8 @@ const wordSearchIndex = computed(() => {
   };
 
   const fuse = new Fuse(words, options);
-  console.log("index", fuse);
 
   const results = fuse.search(search);
-  console.log("results", results);
 
   const cleanResults = results.map((result) => {
     return result.item;
diff --git a/src/styles/components/_word-list.scss b/src/styles/components/_word-list.scss
index 117a6e22..afcf5b4b 100644
--- a/src/styles/components/_word-list.scss
+++ b/src/styles/components/_word-list.scss
@@ -6,12 +6,8 @@
 
   height: 100%;
 
-  &__item {
-    &:not(:last-of-type) {
-      .c-word-list__word-wrap {
-        padding-bottom: vars.$spacer * 1.75;
-      }
-    }
+  .c-word-list__word-wrap {
+    padding-bottom: vars.$spacer * 1.75;
   }
 
   &__word {