From 0224e786696381f14ce7e437868eac253c6b571c Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 30 Jul 2023 05:21:21 +0800
Subject: [PATCH] feat: add search button toggle

---
 components/RecipePanel.vue     | 9 ++++++++-
 components/SearchFoodInput.vue | 6 ++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/RecipePanel.vue b/components/RecipePanel.vue
index 2c4cc39..7433f31 100644
--- a/components/RecipePanel.vue
+++ b/components/RecipePanel.vue
@@ -4,6 +4,8 @@ import { storeToRefs } from 'pinia'
 const rStore = useRecipeStore()
 
 const { displayedRecipe, selectedStuff, curTool } = storeToRefs(rStore)
+
+const showSearchInput = ref(false)
 </script>
 
 <template>
@@ -14,9 +16,14 @@ const { displayedRecipe, selectedStuff, curTool } = storeToRefs(rStore)
 
     <ToggleMode />
 
+    <button absolute right-4 top-4 @click="showSearchInput = !showSearchInput">
+      <div v-if="!showSearchInput" i-ri-search-line />
+      <div v-else i-ri-search-fill />
+    </button>
+
     <!-- <Switch /> -->
     <div class="cook-recipes" p="2">
-      <SearchFoodInput />
+      <SearchFoodInput v-if="showSearchInput" />
 
       <Transition mode="out-in">
         <div class="cook-filter-recipes">
diff --git a/components/SearchFoodInput.vue b/components/SearchFoodInput.vue
index 76154b2..f9abd66 100644
--- a/components/SearchFoodInput.vue
+++ b/components/SearchFoodInput.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
 const rStore = useRecipeStore()
+
+const searchInput = ref<HTMLInputElement>()
+onMounted(() => {
+  searchInput.value?.focus()
+})
 </script>
 
 <template>
@@ -14,6 +19,7 @@ const rStore = useRecipeStore()
       </div>
       <input
         id="input"
+        ref="searchInput"
         v-model="rStore.keyword"
         placeholder="关键字过滤"
         aria-label="搜索关键字"