From 0ca40a57c935ab016fb2856b90c0f6d4b787ee9e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 26 Mar 2022 00:45:16 +0100
Subject: [PATCH] chore(Dropdown): handle item hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Sébastien Chopin <seb@nuxtjs.com>
---
 docs/pages/examples.vue                      | 6 +++++-
 src/runtime/components/elements/Dropdown.vue | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
index 38550ef6..b120737b 100644
--- a/docs/pages/examples.vue
+++ b/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',
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index b980bbdc..09ce4175 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/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,