From 67879af325bce0c5fa19f1a13b877f4b41ad88b4 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Fri, 12 Jul 2024 16:46:11 +0800
Subject: [PATCH] feat(config): search bar style

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/layout/Header.vue             |  3 +-
 components/layout/SearchButton.vue       | 40 +++++++++++++++---------
 components/layout/SearchDialog.vue       |  2 +-
 composables/useConfig.ts                 |  1 +
 content/1.getting-started/4.changelog.md |  5 ++-
 content/2.api/1.configuration.md         |  3 ++
 types/index.d.ts                         |  1 +
 7 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/components/layout/Header.vue b/components/layout/Header.vue
index 0155d965..5210f072 100644
--- a/components/layout/Header.vue
+++ b/components/layout/Header.vue
@@ -11,8 +11,9 @@
       <LayoutMobileNav />
       <LayoutHeaderNav class="hidden lg:flex flex-1" />
       <div class="flex flex-1 justify-end gap-2">
-        <LayoutSearchButton v-if="!config.search.inAside" />
+        <LayoutSearchButton v-if="!config.search.inAside && config.search.style === 'input'" />
         <div class="flex">
+          <LayoutSearchButton v-if="!config.search.inAside && config.search.style === 'button'" />
           <ThemePopover v-if="config.theme.customizable" />
           <DarkModeToggle v-if="config.header.darkModeToggle" />
           <NuxtLink
diff --git a/components/layout/SearchButton.vue b/components/layout/SearchButton.vue
index 872c0b54..aaf035dd 100644
--- a/components/layout/SearchButton.vue
+++ b/components/layout/SearchButton.vue
@@ -1,23 +1,33 @@
 <template>
-  <UiButton
-    v-if="enable"
-    variant="outline"
-    class="pr-1.5 h-8 self-center w-full rounded-md font-normal text-muted-foreground hover:text-accent-foreground"
-    :class="[inAside ? 'mb-4' : 'md:w-40 lg:w-64']"
-    @click="isOpen = true"
-  >
-    <span class="overflow-hidden mr-auto">
-      Search...
-    </span>
-    <Kbd class="hidden md:block ml-auto">
-      <span class="text-xs">⌘</span>K
-    </Kbd>
-  </UiButton>
+  <template v-if="enable">
+    <UiButton
+      v-if="style === 'input'"
+      variant="outline"
+      class="pr-1.5 h-8 self-center w-full rounded-md font-normal text-muted-foreground hover:text-accent-foreground"
+      :class="[inAside ? 'mb-4' : 'md:w-40 lg:w-64']"
+      @click="isOpen = true"
+    >
+      <span class="overflow-hidden mr-auto">
+        Search...
+      </span>
+      <Kbd class="hidden md:block ml-auto">
+        <span class="text-xs">⌘</span>K
+      </Kbd>
+    </UiButton>
+    <UiButton
+      v-else
+      variant="ghost"
+      size="icon"
+      @click="isOpen = true"
+    >
+      <Icon name="lucide:search" size="16" />
+    </UiButton>
+  </template>
 
   <LayoutSearchDialog v-model:open="isOpen" />
 </template>
 
 <script setup lang="ts">
 const isOpen = ref(false);
-const { enable, inAside } = useConfig().value.search;
+const { enable, inAside, style } = useConfig().value.search;
 </script>
diff --git a/components/layout/SearchDialog.vue b/components/layout/SearchDialog.vue
index 95de44c9..fd7f33c2 100644
--- a/components/layout/SearchDialog.vue
+++ b/components/layout/SearchDialog.vue
@@ -7,7 +7,7 @@
       <VisuallyHidden as-child>
         <UiDialogDescription aria-describedby="undefined" />
       </VisuallyHidden>
-      <UiCommand v-model:search-term="input" class="h-svh md:h-[350px]">
+      <UiCommand v-model:search-term="input" class="h-svh sm:h-[350px]">
         <UiCommandInput
           placeholder="Search documentation..."
           @keydown.enter="handleEnter"
diff --git a/composables/useConfig.ts b/composables/useConfig.ts
index 70ed109d..c5f96f1c 100644
--- a/composables/useConfig.ts
+++ b/composables/useConfig.ts
@@ -89,6 +89,7 @@ const defaultConfig: DefaultConfig = {
   search: {
     enable: true,
     inAside: false,
+    style: 'input',
   },
 };
 
diff --git a/content/1.getting-started/4.changelog.md b/content/1.getting-started/4.changelog.md
index 1f184a33..6cefaec3 100644
--- a/content/1.getting-started/4.changelog.md
+++ b/content/1.getting-started/4.changelog.md
@@ -8,7 +8,10 @@ description: Changes made to shadcn-docs.
 
 #### :icon{name="lucide:settings"} Config
 
-- [`main.padded`](/api/configuration#main)
+Added two new configs.
+
+1. [`main.padded`](/api/configuration#main)
+2. [`search.style`](/api/configuration#search)
 
 ## `v0.4.0`
 
diff --git a/content/2.api/1.configuration.md b/content/2.api/1.configuration.md
index bad56dad..08a2be6d 100644
--- a/content/2.api/1.configuration.md
+++ b/content/2.api/1.configuration.md
@@ -165,4 +165,7 @@ interface INav {
   ::field{name="inAside" type="boolean" defaultValue="false"}
   Whether to show the search bar in the sidebar.
   ::
+  ::field{name="style" type="'input' | 'button'" defaultValue="input"}
+  Whether the search bar is displayed as a input or a button.
+  ::
 ::
diff --git a/types/index.d.ts b/types/index.d.ts
index d176d2ef..2026c3a9 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -71,6 +71,7 @@ interface DefaultConfig {
   search: {
     enable: boolean;
     inAside: boolean;
+    style: 'input' | 'button';
   };
 }