feat(Tabs): handle icon in items (#1798)

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

docs/components/content/examples/TabsExampleBasic.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 const items = [{
   label: 'Tab1',
+  icon: 'i-heroicons-information-circle',
   content: 'This is the content shown for Tab1'
 }, {
   label: 'Tab2',
+  icon: 'i-heroicons-arrow-down-tray',
   disabled: true,
   content: 'And, this is the content for Tab2'
 }, {
   label: 'Tab3',
+  icon: 'i-heroicons-eye-dropper',
   content: 'Finally, this is the content for Tab3'
 }]
 </script>

docs/components/content/examples/TabsExampleChange.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 const items = [{
   label: 'Tab1',
+  icon: 'i-heroicons-information-circle',
   content: 'This is the content shown for Tab1'
 }, {
   label: 'Tab2',
+  icon: 'i-heroicons-arrow-down-tray',
   content: 'And, this is the content for Tab2'
 }, {
   label: 'Tab3',
+  icon: 'i-heroicons-eye-dropper',
   content: 'Finally, this is the content for Tab3'
 }]
 

docs/components/content/examples/TabsExampleDefaultSlot.vue

@@ -17,13 +17,7 @@ const items = [{
 <template>
   <UTabs :items="items" class="w-full">
     <template #default="{ item, index, selected }">
-      <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>
-
-        <span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
-      </div>
+      <span class="truncate" :class="[selected && 'text-primary-500 dark:text-primary-400']">{{ index + 1 }}. {{ item.label }}</span>
     </template>
   </UTabs>
 </template>

docs/components/content/examples/TabsExampleIconSlot.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const items = [{
+  label: 'Getting Started',
+  icon: 'i-heroicons-information-circle',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-arrow-down-tray',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Theming',
+  icon: 'i-heroicons-eye-dropper',
+  content: 'Finally, this is the content for Tab3'
+}]
+</script>
+
+<template>
+  <UTabs :items="items" class="w-full">
+    <template #icon="{ item, selected }">
+      <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0 mr-2" :class="[selected && 'text-primary-500 dark:text-primary-400']" />
+    </template>
+  </UTabs>
+</template>

docs/components/content/examples/TabsExampleIndex.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 const items = [{
   label: 'Tab1',
+  icon: 'i-heroicons-information-circle',
   content: 'This is the content shown for Tab1'
 }, {
   label: 'Tab2',
+  icon: 'i-heroicons-arrow-down-tray',
   content: 'And, this is the content for Tab2'
 }, {
   label: 'Tab3',
+  icon: 'i-heroicons-eye-dropper',
   content: 'Finally, this is the content for Tab3'
 }]
 </script>

docs/components/content/examples/TabsExampleVModel.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 const items = [{
   label: 'Tab1',
+  icon: 'i-heroicons-information-circle',
   content: 'This is the content shown for Tab1'
 }, {
   label: 'Tab2',
+  icon: 'i-heroicons-arrow-down-tray',
   content: 'And, this is the content for Tab2'
 }, {
   label: 'Tab3',
+  icon: 'i-heroicons-eye-dropper',
   content: 'Finally, this is the content for Tab3'
 }]
 

docs/components/content/examples/TabsExampleVertical.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 const items = [{
   label: 'Tab1',
+  icon: 'i-heroicons-information-circle',
   content: 'This is the content shown for Tab1'
 }, {
   label: 'Tab2',
+  icon: 'i-heroicons-arrow-down-tray',
   content: 'And, this is the content for Tab2'
 }, {
   label: 'Tab3',
+  icon: 'i-heroicons-eye-dropper',
   content: 'Finally, this is the content for Tab3'
 }]
 </script>

docs/content/2.components/tabs.md

@@ -11,6 +11,7 @@ links:
 Pass an array to the `items` prop of the Tabs component. Each item can have the following properties:
 
 - `label` - The label of the item.
+- `icon` - The icon of the item.
 - `slot` - A key to customize the item with a slot.
 - `content` - The content to display in the panel by default.
 - `disabled` - Determines whether the item is disabled or not.
@@ -91,6 +92,14 @@ Use the `#default` slot to customize the content of the trigger buttons. You wil
 
 :component-example{component="tabs-example-default-slot"}
 
+
+### `icon`
+
+Use the `#icon` slot to customize the icon of the trigger buttons. You will have access to the `item`, `index`, `selected` and `disabled` in the slot scope.
+
+:component-example{component="tabs-example-icon-slot"}
+
+
 ### `item`
 
 Use the `#item` slot to customize the items content. You will have access to the `item`, `index` and `selected` properties in the slot scope.

src/runtime/components/navigation/Tabs.vue

@@ -25,6 +25,16 @@
         as="template"
       >
         <button :class="[ui.list.tab.base, ui.list.tab.background, ui.list.tab.height, ui.list.tab.padding, ui.list.tab.size, ui.list.tab.font, ui.list.tab.rounded, ui.list.tab.shadow, selected ? ui.list.tab.active : ui.list.tab.inactive]">
+          <slot
+            name="icon"
+            :item="item"
+            :index="index"
+            :selected="selected"
+            :disabled="disabled"
+          >
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.list.tab.icon" />
+          </slot>
+
           <slot :item="item" :index="index" :selected="selected" :disabled="disabled">
             <span class="truncate">{{ item.label }}</span>
           </slot>

src/runtime/types/tabs.ts

@@ -1,5 +1,6 @@
 export interface TabItem {
   label: string
+  icon?: string
   slot?: string
   disabled?: boolean
   content?: string

src/runtime/ui.config/navigation/tabs.ts

@@ -27,7 +27,8 @@ export default {
       size: 'text-sm',
       font: 'font-medium',
       rounded: 'rounded-md',
-      shadow: ''
+      shadow: '',
+      icon: 'w-4 h-4 flex-shrink-0 mr-2'
     }
   }
 }