feat(config): search bar style

Signed-off-by: ZTL-UwU <[email protected]>

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

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>

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"

composables/useConfig.ts

@@ -89,6 +89,7 @@ const defaultConfig: DefaultConfig = {
   search: {
     enable: true,
     inAside: false,
+    style: 'input',
   },
 };
 

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`
 

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.
+  ::
 ::

types/index.d.ts

@@ -71,6 +71,7 @@ interface DefaultConfig {
   search: {
     enable: boolean;
     inAside: boolean;
+    style: 'input' | 'button';
   };
 }