chore(Dropdown): hover mode with padding instead of offset + improve docs (#242)

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

docs/components/content/examples/DropdownExampleMode.vue

@@ -0,0 +1,16 @@
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/content/2.elements/4.dropdown.md

@@ -8,9 +8,20 @@ headlessui:
 
 ## Usage
 
+Pass an array of arrays to the `items` prop of the Dropdown component. Each array represents a group of items. Each item can have the following properties:
+
+- `label` - The label of the item.
+- `icon` - The icon of the item.
+- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
+- `shortcuts` - The shortcuts of the item.
+- `disabled` - Whether the item is disabled.
+- `click` - The click handler of the item.
+
+You can also pass properties from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
 ::component-example
 #default
-:dropdown-example
+:dropdown-example-basic
 
 #code
 ```vue
@@ -55,6 +66,35 @@ const items = [
 ```
 ::
 
+### Mode
+
+Use the `mode` prop to switch between `click` and `hover` modes.
+
+::component-example
+#default
+:dropdown-example-mode
+
+#code
+```vue
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>
+```
+::
+
 ## Props
 
 :component-props

src/runtime/components/elements/Dropdown.vue

@@ -15,7 +15,7 @@
       </slot>
     </MenuButton>
 
-    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" @mouseover="onMouseOver">
+    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <transition appear v-bind="ui.transition">
         <MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background]" static>
           <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
@@ -127,7 +127,7 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.dropdown>>(() => defu({}, props.ui, appConfig.ui.dropdown))
 
-    const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
+    const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
 
     const [trigger, container] = usePopper(popper.value)
 
@@ -149,6 +149,12 @@ export default defineComponent({
       }, 200)
     })
 
+    const containerStyle = computed(() => {
+      const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
+
+      return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
+    })
+
     function onMouseOver () {
       if (props.mode !== 'hover' || !menuApi.value) {
         return
@@ -194,6 +200,7 @@ export default defineComponent({
       ui,
       trigger,
       container,
+      containerStyle,
       onMouseOver,
       onMouseLeave,
       omit