From 3447a062b636a469089d6e9bdcfcb3dce9063ee5 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Thu, 10 Apr 2025 21:50:20 +0200
Subject: [PATCH] feat(Tabs): add `list-leading` and `list-trailing` slots
 (#3837)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 playground/app/pages/components/tabs.vue |  8 ++++++++
 src/runtime/components/Tabs.vue          | 14 ++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/playground/app/pages/components/tabs.vue b/playground/app/pages/components/tabs.vue
index 6392ee71..434b45e0 100644
--- a/playground/app/pages/components/tabs.vue
+++ b/playground/app/pages/components/tabs.vue
@@ -59,6 +59,14 @@ const items = [{
         <template #custom="{ item }">
           <span class="text-(--ui-text-muted)">Custom: {{ item.content }}</span>
         </template>
+
+        <template #list-trailing>
+          <UButton
+            icon="lucide:refresh-cw"
+            variant="soft"
+            class="ml-2"
+          />
+        </template>
       </UTabs>
     </div>
   </div>
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 07e53c21..4d980692 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -73,10 +73,12 @@ export interface TabsEmits extends TabsRootEmits<string | number> {}
 type SlotProps<T extends TabsItem> = (props: { item: T, index: number }) => any
 
 export type TabsSlots<T extends TabsItem = TabsItem> = {
-  leading: SlotProps<T>
-  default: SlotProps<T>
-  trailing: SlotProps<T>
-  content: SlotProps<T>
+  'leading': SlotProps<T>
+  'default': SlotProps<T>
+  'trailing': SlotProps<T>
+  'content': SlotProps<T>
+  'list-leading': (props?: {}) => any
+  'list-trailing': (props?: {}) => any
 } & DynamicSlots<T, undefined, { index: number }>
 
 </script>
@@ -114,6 +116,8 @@ const ui = computed(() => tabs({
     <TabsList :class="ui.list({ class: props.ui?.list })">
       <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
 
+      <slot name="list-leading" />
+
       <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
         <slot name="leading" :item="item" :index="index">
           <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
@@ -126,6 +130,8 @@ const ui = computed(() => tabs({
 
         <slot name="trailing" :item="item" :index="index" />
       </TabsTrigger>
+
+      <slot name="list-trailing" />
     </TabsList>
 
     <template v-if="!!content">