feat(Tabs): add overflow handling

docs/app/components/content/examples/tabs/TabsOverflowCollapseExample.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+
+const items: TabsItem[] = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' }
+]
+</script>
+
+<template>
+  <UTabs
+    overflow="collapse"
+    :items="items"
+    class="w-96"
+  />
+</template>

docs/app/components/content/examples/tabs/TabsOverflowScrollExample.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+
+const items: TabsItem[] = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' }
+]
+</script>
+
+<template>
+  <UTabs
+    overflow="scroll"
+    :content="false"
+    :items="items"
+    class="w-96"
+  />
+</template>

docs/app/components/content/examples/tabs/TabsOverflowWrapExample.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+
+const items: TabsItem[] = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' }
+]
+</script>
+
+<template>
+  <UTabs
+    overflow="wrap"
+    :content="false"
+    :items="items"
+    class="w-96"
+  />
+</template>

docs/content/docs/2.components/tabs.md

@@ -217,6 +217,30 @@ props:
 ---
 ::
 
+### Overflow :badge{label="Soon" class="align-text-top"}
+
+Use the `overflow` prop to control how the tab list handles items that don't fit in the available space:
+
+- `scroll`{lang="ts-type"} enables scrolling along the list axis.
+- `wrap`{lang="ts-type"} allows tabs to wrap onto multiple lines.
+- `collapse`{lang="ts-type"} hides overflowing tabs behind a **More** dropdown.
+
+When omitted, no overflow handling is applied.
+
+### Scroll
+
+:component-example{name="tabs-overflow-scroll-example"}
+
+### Wrap
+
+:component-example{name="tabs-overflow-wrap-example"}
+
+### Collapse
+
+Use the `more-label` and `more-icon` props to customize the overflow trigger. You can also use the `#more` slot to fully customize it.
+
+:component-example{name="tabs-overflow-collapse-example"}
+
 ## Examples
 
 ### Control active item

playgrounds/nuxt/app/pages/components/tabs.vue

@@ -4,6 +4,7 @@ import theme from '#build/ui/tabs'
 const colors = Object.keys(theme.variants.color)
 const variants = Object.keys(theme.variants.variant)
 const orientations = Object.keys(theme.variants.orientation)
+const overflows = ['none', ...Object.keys(theme.variants.overflow)]
 const sizes = Object.keys(theme.variants.size)
 
 const attrs = reactive({
@@ -13,6 +14,7 @@ const attrs = reactive({
 })
 
 const orientation = ref('horizontal' as keyof typeof theme.variants.orientation)
+const overflow = ref<'none' | keyof typeof theme.variants.overflow>('none')
 
 const items = [{
   label: 'Tab1',
@@ -31,6 +33,21 @@ const items = [{
   slot: 'custom' as const,
   badge: '300'
 }]
+
+const manyItems = [
+  { label: 'Overview', icon: 'i-lucide-layout-dashboard', content: 'Overview content' },
+  { label: 'Activity', icon: 'i-lucide-activity', content: 'Activity content' },
+  { label: 'Settings', icon: 'i-lucide-settings', content: 'Settings content' },
+  { label: 'Members', icon: 'i-lucide-users', content: 'Members content' },
+  { label: 'Billing', icon: 'i-lucide-credit-card', content: 'Billing content' },
+  { label: 'Integrations', icon: 'i-lucide-plug', content: 'Integrations content' },
+  { label: 'Notifications', icon: 'i-lucide-bell', content: 'Notifications content' },
+  { label: 'Security', icon: 'i-lucide-shield', content: 'Security content' },
+  { label: 'API Keys', icon: 'i-lucide-key', content: 'API Keys content' },
+  { label: 'Logs', icon: 'i-lucide-scroll-text', content: 'Logs content' }
+]
+
+const overflowProp = computed(() => overflow.value === 'none' ? undefined : overflow.value)
 </script>
 
 <template>
@@ -39,6 +56,7 @@ const items = [{
     <USelect v-model="attrs.variant" :items="variants" placeholder="Variant" multiple />
     <USelect v-model="attrs.size" :items="sizes" placeholder="Size" multiple />
     <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
+    <USelect v-model="overflow" :items="overflows" placeholder="Overflow" />
   </Navbar>
 
   <Matrix v-slot="props" :attrs="attrs" container-class="gap-4">
@@ -59,5 +77,13 @@ const items = [{
         <span class="text-muted">Custom: {{ item.content }}</span>
       </template>
     </UTabs>
+
+    <UTabs
+      :orientation="orientation"
+      :overflow="overflowProp"
+      :items="manyItems"
+      :class="orientation === 'vertical' ? 'h-80' : 'w-96'"
+      v-bind="props"
+    />
   </Matrix>
 </template>