feat: customize placeholder for combobox tab

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Nov 10, 2024 · e0008b3 · e0008b3
1 parent c3932da
commit e0008b3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/components/content/Tabs.vue b/components/content/Tabs.vue
@@ -130,8 +130,8 @@
       </UiPopoverTrigger>
       <UiPopoverContent class="w-[200px] p-0">
         <UiCommand>
-          <UiCommandInput v-if="!disableSearch" class="h-9" placeholder="Search Tab..." />
-          <UiCommandEmpty>No tab found.</UiCommandEmpty>
+          <UiCommandInput v-if="!disableSearch" class="h-9" :placeholder="searchPlaceholder" />
+          <UiCommandEmpty>{{ searchEmpty }}</UiCommandEmpty>
           <UiCommandList>
             <UiCommandGroup>
               <UiCommandItem
@@ -184,11 +184,15 @@ const {
   padded = true,
   inStack = false,
   disableSearch = false,
+  searchPlaceholder = 'Search Tab...',
+  searchEmpty = 'No tab found.',
 } = defineProps<{
   variant?: 'separate' | 'card' | 'line' | 'combobox';
   padded?: boolean;
   inStack?: boolean;
   disableSearch?: boolean;
+  searchPlaceholder?: string;
+  searchEmpty?: string;
 }>();
 
 const activeTabIndex = ref(0);

diff --git a/content/2.components/2.docs/tabs.md b/content/2.components/2.docs/tabs.md
@@ -176,7 +176,7 @@ badges:
 
 ::code-group
   ::div{label="Preview" class="md:p-4"}
-    ::tabs{variant="combobox"}
+    ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
       ::div{label="PostgreSQL"}
       ### PostgreSQL column types
 
@@ -219,7 +219,7 @@ badges:
     ::
   ::
   ```mdc [Code]
-  ::tabs{variant="combobox"}
+  ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
     ::div{label="PostgreSQL"}
     ### PostgreSQL column types