up

nuxt · Jul 27, 2023 · 5fb527d · 5fb527d
1 parent 0b186df
commit 5fb527d
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/docs/components/content/examples/TabsExampleDefaultSlot.vue b/docs/components/content/examples/TabsExampleDefaultSlot.vue
@@ -17,7 +17,7 @@ const items = [{
 <template>
   <UTabs :items="items" class="w-full">
     <template #default="{ item, index, selected }">
-      <div class="flex items-center gap-2 relative">
+      <div class="flex items-center gap-2 relative truncate">
         <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
 
         <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>

diff --git a/docs/components/content/examples/TabsExampleVertical.vue b/docs/components/content/examples/TabsExampleVertical.vue
@@ -12,5 +12,5 @@ const items = [{
 </script>
 
 <template>
-  <UTabs :items="items" orientation="vertical" />
+  <UTabs :items="items" orientation="vertical" :ui="{ wrapper: 'flex items-center gap-4', list: { width: 'w-48' } }" />
 </template>
diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md
@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
+navigation:
+  badge: Edge
 ---
 
 ## Usage
@@ -56,7 +58,7 @@ const items = [...]
 </script>
 
 <template>
-  <UTabs :items="items" orientation="vertical" />
+  <UTabs :items="items" orientation="vertical" :ui="{ wrapper: 'flex items-center gap-4', list: { width: 'w-48' } }" />
 </template>
 ```
 ::
@@ -114,7 +116,7 @@ const items = [{
 <template>
   <UTabs :items="items" class="w-full">
     <template #default="{ item, index, selected }">
-      <div class="flex items-center gap-2 relative">
+      <div class="flex items-center gap-2 relative truncate">
         <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
 
         <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>

diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
@@ -769,12 +769,13 @@ const tabs = {
   container: 'relative w-full',
   base: 'focus:outline-none',
   list: {
-    base: 'relative w-full',
+    base: 'relative',
     background: 'bg-gray-100 dark:bg-gray-800',
     rounded: 'rounded-lg',
     shadow: '',
     padding: 'p-1',
     height: 'h-10',
+    width: 'w-full',
     marker: {
       wrapper: 'absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none',
       base: 'w-full h-full',

diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
@@ -1,7 +1,7 @@
 <template>
   <HTabGroup :vertical="orientation === 'vertical'" :default-index="defaultIndex" as="div" :class="ui.wrapper" @change="onChange">
     <HTabList
-      :class="[ui.list.base, ui.list.background, ui.list.rounded, ui.list.shadow, ui.list.padding, orientation === 'horizontal' && ui.list.height, orientation === 'horizontal' && 'inline-grid items-center']"
+      :class="[ui.list.base, ui.list.background, ui.list.rounded, ui.list.shadow, ui.list.padding, ui.list.width, orientation === 'horizontal' && ui.list.height, orientation === 'horizontal' && 'inline-grid items-center']"
       :style="[orientation === 'horizontal' && `grid-template-columns: repeat(${items.length}, minmax(0, 1fr))`]"
     >
       <div ref="markerRef" :class="ui.list.marker.wrapper">