clear button serach

assets/haditha/font-icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.7158C0 7.87926 7.16344 0.71582 16 0.71582C24.8366 0.71582 32 7.87926 32 16.7158C32 25.5524 24.8366 32.7158 16 32.7158C7.16344 32.7158 0 25.5524 0 16.7158Z" fill="#F0F1F4"/>
+<path d="M11 21.7158L21 11.7158" stroke="#1B2132" stroke-linecap="round"/>
+<path d="M11 11.7158L21 21.7158" stroke="#1B2132" stroke-linecap="round"/>
+</svg>

components/haditha/AutoComplation.vue

@@ -57,6 +57,7 @@ const search_type = ref("normal");
 const type_key = ref("hadith");
 const typeModelValue = ref("normal");
 const typeModelValueFa = ref("");
+const showclearButton = ref(false);
 
 // If you want to share state across multiple components,
 // you can use the same key in useState. Nuxt will ensure
@@ -168,17 +169,27 @@ const clearSimilar = () => {
 // const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
 //   console.info("onUpdateModel", newVal);
 // };
+const searchButtonIcon = computed(() => {
+  return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
+});
+
+const handleSearchClearButton = ()=>{
+  showclearButton.value = true;
+  sendQuery();
+}
 
 const onKeyDown = () => {
-  clearTimeout(typingTimer.value);
-};
-const onKeyUp = () => {
-  clearTimeout(typingTimer.value);
-  typingTimer.value = setTimeout(() => {
-    if (props.autoRedirection) sendQuery();
-  }, doneTypingInterval.value);
+  showclearButton.value = false;
+  // clearTimeout(typingTimer.value);
 };
 
+// const onKeyUp = () => {
+//   clearTimeout(typingTimer.value);
+//   typingTimer.value = setTimeout(() => {
+//     if (props.autoRedirection) sendQuery();
+//   }, doneTypingInterval.value);
+// };
+
 const setType = (type: string) => {
   search_type.value = type;
   sendQuery();
@@ -225,11 +236,6 @@ const sendQuery = async (payload = {}) => {
     .postRequest(url, payload)
     .then((res) => {
       // pass res and search query to the parent.
-      emit("response-ready", {
-        res: res,
-        searchQuery: searchTerm.value,
-        disableAutoRedirect: true,
-      });
 
       loading.value = false;
       // check if search term is not empty
@@ -238,6 +244,32 @@ const sendQuery = async (payload = {}) => {
       // close the history dropdown menu
       open.value = false;
 
+
+      
+      // show clear button
+      if (showclearButton.value) {
+        searchTerm.value = "";
+
+        emit("response-ready", {
+          res: {
+            hits:{
+              total:0,
+              hits:[]
+            }
+          },
+          searchQuery: searchTerm.value,
+          disableAutoRedirect: true,
+        });
+      } else {
+        emit("response-ready", {
+          res: res,
+          searchQuery: searchTerm.value,
+          disableAutoRedirect: true,
+        });
+      }
+      
+      showclearButton.value = !showclearButton.value;
+
       // store search phrase
       useStorage("searchPhrase", searchTerm.value);
     })
@@ -405,7 +437,6 @@ onMounted(() => {
           @blur="open = false"
           @change="sendQuery"
           @keydown="onKeyDown"
-          @keyup="onKeyUp"
           @keydown.enter="sendQuery"
         >
           <!-- @update:modelValue="onUpdateModel" -->
@@ -414,8 +445,9 @@ onMounted(() => {
       </div>
       <UButton
         class="my-trailing-button"
-        @click.prevent="sendQuery"
-        icon="i-haditha-search"
+        :class="{ 'close-mode': showclearButton }"
+        @click.prevent="handleSearchClearButton"
+        :icon="searchButtonIcon"
       >
         <!-- <UIcon  name="i-lucide-search" /> -->
       </UButton>
@@ -765,6 +797,13 @@ onMounted(() => {
       ); */
     }
   }
+  .close-mode {
+    background: #f0f1f4;
+    color: #000; /* رنگ خاکستری */
+    &:hover {
+      background: #e0e0e0; /* رنگ خاکستری */
+    }
+  }
   .haditha-search-input {
     z-index: 0;
 

pages/haditha/search/index.vue

@@ -90,7 +90,7 @@ const SearchList = defineAsyncComponent(() =>
           </div>
           <div
             v-if="searchQuery?.length == 0"
-            class="flex justify-center flex-col items-center"
+            class="flex justify-center flex-col items-center mt-10"
           >
             <img
               fit="auto"
@@ -100,7 +100,7 @@ const SearchList = defineAsyncComponent(() =>
             />
             <div class="title">
               کاوش با
-              <span class="badge-style"> هوش مصنوعی </span>
+              <span class="badge-style mx-1">هوش مصنوعی</span>
               در احادیث اسلامی
             </div>
           </div>