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

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

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'
     }
   }
 }