feat(Tabs): handle items icon

src/runtime/components/Accordion.vue

@@ -11,9 +11,9 @@ const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof th
 const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
 
 export interface AccordionItem {
-  slot?: string
-  icon?: IconProps['name']
   label?: string
+  icon?: IconProps['name']
+  slot?: string
   value?: string
   content?: string
   disabled?: boolean

src/runtime/components/Tabs.vue

@@ -4,6 +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'
 
 const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
 
@@ -11,8 +12,9 @@ const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
-  value?: string
+  icon?: IconProps['name']
   slot?: string
+  value?: string
   disabled?: boolean
   content?: string
 }
@@ -57,9 +59,15 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })())
       <TabsIndicator :class="ui.indicator()" />
 
       <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()" />
+        </slot>
+
         <span v-if="item.label || $slots.default" :class="ui.label()">
           <slot :item="item" :index="index">{{ item.label }}</slot>
         </span>
+
+        <slot name="trailing" :item="item" :index="index" />
       </TabsTrigger>
     </TabsList>
 

src/theme/tabs.ts

@@ -4,8 +4,9 @@ export default {
     list: 'relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group',
     // FIXME: Replace `transition-all` with `transition-[width,transform]` when available
     indicator: 'absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-all duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm',
-    trigger: 'relative inline-flex items-center justify-center 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',
+    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',
     label: 'truncate'
   }
 }