feat(Tabs): add list-leading and list-trailing slots (#3837)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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>

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>
+  'leading': SlotProps<T>
-  default: SlotProps<T>
+  'default': SlotProps<T>
-  trailing: SlotProps<T>
+  'trailing': SlotProps<T>
-  content: 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">