From e8eb3941ad4c1c306ccbe9e11d979d5f6c808330 Mon Sep 17 00:00:00 2001
From: Abel Derderian <derderian@abel.fr>
Date: Tue, 23 Jul 2024 14:36:03 +0200
Subject: [PATCH] feat(Tabs): handle `icon` in items (#1798)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../content/examples/TabsExampleBasic.vue     |  3 +++
 .../content/examples/TabsExampleChange.vue    |  3 +++
 .../examples/TabsExampleDefaultSlot.vue       |  8 +------
 .../content/examples/TabsExampleIconSlot.vue  | 23 +++++++++++++++++++
 .../content/examples/TabsExampleIndex.vue     |  3 +++
 .../content/examples/TabsExampleVModel.vue    |  3 +++
 .../content/examples/TabsExampleVertical.vue  |  3 +++
 docs/content/2.components/tabs.md             |  9 ++++++++
 src/runtime/components/navigation/Tabs.vue    | 10 ++++++++
 src/runtime/types/tabs.ts                     |  1 +
 src/runtime/ui.config/navigation/tabs.ts      |  3 ++-
 11 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 docs/components/content/examples/TabsExampleIconSlot.vue

diff --git a/docs/components/content/examples/TabsExampleBasic.vue b/docs/components/content/examples/TabsExampleBasic.vue
index d2357ea7..fd24dabb 100644
--- a/docs/components/content/examples/TabsExampleBasic.vue
+++ b/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>
diff --git a/docs/components/content/examples/TabsExampleChange.vue b/docs/components/content/examples/TabsExampleChange.vue
index d893e7e7..7c3dcb74 100644
--- a/docs/components/content/examples/TabsExampleChange.vue
+++ b/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'
 }]
 
diff --git a/docs/components/content/examples/TabsExampleDefaultSlot.vue b/docs/components/content/examples/TabsExampleDefaultSlot.vue
index 6d335b87..e561b040 100644
--- a/docs/components/content/examples/TabsExampleDefaultSlot.vue
+++ b/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>
diff --git a/docs/components/content/examples/TabsExampleIconSlot.vue b/docs/components/content/examples/TabsExampleIconSlot.vue
new file mode 100644
index 00000000..1ba63247
--- /dev/null
+++ b/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>
diff --git a/docs/components/content/examples/TabsExampleIndex.vue b/docs/components/content/examples/TabsExampleIndex.vue
index 1482d147..e75a4477 100644
--- a/docs/components/content/examples/TabsExampleIndex.vue
+++ b/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>
diff --git a/docs/components/content/examples/TabsExampleVModel.vue b/docs/components/content/examples/TabsExampleVModel.vue
index 97c690b4..581f32be 100644
--- a/docs/components/content/examples/TabsExampleVModel.vue
+++ b/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'
 }]
 
diff --git a/docs/components/content/examples/TabsExampleVertical.vue b/docs/components/content/examples/TabsExampleVertical.vue
index e49802ea..34d878d3 100644
--- a/docs/components/content/examples/TabsExampleVertical.vue
+++ b/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>
diff --git a/docs/content/2.components/tabs.md b/docs/content/2.components/tabs.md
index d4747765..f9b19def 100644
--- a/docs/content/2.components/tabs.md
+++ b/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.
diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index 0504edf6..0eba9191 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/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>
diff --git a/src/runtime/types/tabs.ts b/src/runtime/types/tabs.ts
index b09bb4a8..002f3bcd 100644
--- a/src/runtime/types/tabs.ts
+++ b/src/runtime/types/tabs.ts
@@ -1,5 +1,6 @@
 export interface TabItem {
   label: string
+  icon?: string
   slot?: string
   disabled?: boolean
   content?: string
diff --git a/src/runtime/ui.config/navigation/tabs.ts b/src/runtime/ui.config/navigation/tabs.ts
index 31011a62..6596844f 100644
--- a/src/runtime/ui.config/navigation/tabs.ts
+++ b/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'
     }
   }
 }