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.