chore(Tabs): improve slots

playground/pages/tabs.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 const items = [{
   label: 'Tab1',
-  content: 'This is the content shown for Tab1',
-  slot: 'tab1'
+  content: 'This is the content shown for Tab1'
 }, {
   label: 'Tab2',
   content: 'And, this is the content for Tab2'
@@ -13,9 +12,5 @@ const items = [{
 </script>
 
 <template>
-  <UTabs :items="items" class="w-96">
-    <template #tab1="{ item }">
-      {{ item.label }}
-    </template>
-  </UTabs>
+  <UTabs :items="items" />
 </template>

src/runtime/components/Tabs.vue

@@ -10,7 +10,7 @@ const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme>
 const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 
 export interface TabsItem {
-  label: string
+  label?: string
   value?: string
   slot?: string
   disabled?: boolean
@@ -25,13 +25,13 @@ export interface TabsProps<T extends TabsItem> extends Omit<TabsRootProps, 'asCh
 
 export interface TabsEmits extends TabsRootEmits {}
 
-type SlotFunction<T> = (props: { item: T, index: number }) => any
+type SlotProps<T> = (props: { item: T, index: number }) => any
 
 export type TabsSlots<T extends TabsItem> = {
-  default(): any
-  content(): SlotFunction<T>
+  default: SlotProps<T>
+  content: SlotProps<T>
 } & {
-  [key in T['slot'] as string]?: SlotFunction<T>
+  [key in T['slot'] as string]?: SlotProps<T>
 }
 </script>
 
@@ -54,9 +54,9 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })())
       <TabsIndicator :class="ui.indicator()" />
 
       <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger()">
-        <slot :item="item" :index="index">
-          <span class="truncate">{{ item.label }}</span>
-        </slot>
+        <span v-if="item.label || $slots.default" :class="ui.label()">
+          <slot :item="item" :index="index">{{ item.label }}</slot>
+        </span>
       </TabsTrigger>
     </TabsList>
 

src/theme/tabs.ts

@@ -5,6 +5,7 @@ export default {
     // FIXME: Replace transition with `transition-[width,transform]` when available
     indicator: 'absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm',
     trigger: 'relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0',
-    content: 'focus:outline-none'
+    content: 'focus:outline-none',
+    label: 'truncate'
   }
 }