chore(Dropdown): support item avatar

src/runtime/components/elements/Dropdown.vue

@@ -22,8 +22,9 @@
               <Component v-bind="item" :is="(item.to && 'Link') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
                 <slot :name="item.slot" :item="item">
                   <Icon v-if="item.icon" :name="item.icon" :class="itemIconClass" />
+                  <Avatar v-if="item.avatar" :src="item.avatar" :alt="item.label" :class="itemAvatarClass" size="xs" />
 
-                  {{ item.label }}
+                  <span class="truncate">{{ item.label }}</span>
                 </slot>
               </Component>
             </MenuItem>
@@ -43,6 +44,7 @@ import {
 } from '@headlessui/vue'
 
 import Icon from '../elements/Icon'
+import Avatar from '../elements/Avatar'
 import Link from '../elements/Link'
 import { classNames, usePopper } from '../../utils'
 import $ui from '#build/ui'
@@ -54,6 +56,7 @@ export default {
     MenuItems,
     MenuItem,
     Icon,
+    Avatar,
     Link
   },
   props: {
@@ -106,6 +109,10 @@ export default {
     itemIconClass: {
       type: String,
       default: () => $ui.dropdown.item.icon
+    },
+    itemAvatarClass: {
+      type: String,
+      default: () => $ui.dropdown.item.avatar
     }
   },
   setup (props) {

src/runtime/presets/default.ts

@@ -284,11 +284,12 @@ const dropdown = {
   container: 'w-48 z-20',
   base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg',
   item: {
-    base: 'group flex items-center px-4 py-2 text-sm w-full',
+    base: 'group flex items-center gap-3 px-4 py-2 text-sm w-full',
     active: 'u-bg-gray-100 u-text-gray-900',
     inactive: 'u-text-gray-700',
     disabled: 'cursor-not-allowed opacity-50',
-    icon: 'mr-3 h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500'
+    icon: 'h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500 flex-shrink-0',
+    avatar: '-my-0.5 group-hover:u-bg-gray-200 flex-shrink-0'
   }
 }