From b112f5f226c6b03151bbeb4fc607e449c444e667 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Mon, 11 Apr 2022 22:47:11 +0200
Subject: [PATCH] feat(search): round and clearable searchbar

---
 src/components/SearchBar.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 78e18cf1..9c5f1648 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -33,17 +33,15 @@ function onSelect(path: string) {
 
 <template>
     <div>
-        <n-auto-complete
-            placeholder="Search a tool..."
-            :options="options"
-            v-model:value="queryString"
-            :input-props="{ autocomplete: 'disabled' }"
-            :on-select="onSelect"
-        >
-            <template #prefix>
-                <n-icon>
-                    <search-round />
-                </n-icon>
+        <n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
+            :on-select="onSelect">
+            <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
+                <n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput"
+                    @focus="handleFocus" @blur="handleBlur">
+                    <template #prefix>
+                        <n-icon :component="SearchRound" />
+                    </template>
+                </n-input>
             </template>
         </n-auto-complete>
     </div>