chore(Dropdown): handle item hover

Co-Authored-By: Sébastien Chopin <seb@nuxtjs.com>

docs/pages/examples.vue

@@ -83,7 +83,7 @@
         Dropdown with avatar:
       </div>
 
-      <UDropdown :items="customDropdownItems" placement="bottom-end">
+      <UDropdown :items="customDropdownItems" placement="bottom-end" @hover="onHover">
         <button class="flex">
           <UAvatar src="https://picsum.photos/200/300" />
         </button>
@@ -274,6 +274,10 @@ function onSubmit () {
   console.warn('submit')
 }
 
+function onHover (item) {
+  console.log(item)
+}
+
 const dropdownItems = [
   [{
     label: 'Edit',

src/runtime/components/elements/Dropdown.vue

@@ -19,7 +19,7 @@
         <MenuItems :class="baseClass" static>
           <div v-for="(subItems, index) of items" :key="index" class="py-1">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled }" :disabled="item.disabled">
-              <Component v-bind="item" :is="(item.to && 'Link') || (item.click && 'button') || 'div'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
+              <Component v-bind="item" :is="(item.to && 'Link') || (item.click && 'button') || 'div'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)" @mouseover="$emit('hover', 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" />
@@ -115,6 +115,7 @@ export default {
       default: () => $ui.dropdown.item.avatar
     }
   },
+  emits: ['hover'],
   setup (props) {
     const [trigger, container] = usePopper({
       placement: props.placement,