From bf0a04eb8bda666df2c88f7d0ea121c135f7d065 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 9 Apr 2024 18:19:17 +0200
Subject: [PATCH] feat(Tabs): handle `avatar`

---
 playground/pages/tabs.vue       | 4 +++-
 src/runtime/components/Tabs.vue | 6 ++++--
 src/theme/tabs.ts               | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/playground/pages/tabs.vue b/playground/pages/tabs.vue
index 2086e048..d6de70fe 100644
--- a/playground/pages/tabs.vue
+++ b/playground/pages/tabs.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 const items = [{
   label: 'Tab1',
-  icon: 'i-heroicons-home',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  },
   content: 'This is the content shown for Tab1'
 }, {
   label: 'Tab2',
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index adfd878b..ad1b796d 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -4,7 +4,7 @@ import type { TabsRootProps, TabsRootEmits, TabsContentProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
-import type { IconProps } from '#ui/types'
+import type { IconProps, AvatarProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
 
@@ -13,6 +13,7 @@ const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 export interface TabsItem {
   label?: string
   icon?: IconProps['name']
+  avatar?: AvatarProps
   slot?: string
   value?: string
   disabled?: boolean
@@ -60,7 +61,8 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })())
 
       <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger()">
         <slot name="leading" :item="item" :index="index">
-          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
+          <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.leadingAvatar()" />
+          <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
         </slot>
 
         <span v-if="item.label || $slots.default" :class="ui.label()">
diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index bdb44d22..c07849bd 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -7,6 +7,7 @@ export default {
     trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 flex-1 h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none',
     content: 'focus:outline-none',
     leadingIcon: 'shrink-0 size-5',
+    leadingAvatar: 'shrink-0',
     label: 'truncate'
   }
 }