From 7151b7b97d42f389506521044ebaffa8a299e7fb Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 28 Dec 2023 13:14:17 +0100
Subject: [PATCH] fix(Dropdown): merge item `class`

Fixes #1157
---
 docs/content/2.elements/6.dropdown.md        | 1 +
 src/runtime/components/elements/Dropdown.vue | 4 ++--
 src/runtime/types/dropdown.d.ts              | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/content/2.elements/6.dropdown.md b/docs/content/2.elements/6.dropdown.md
index 5787310c..74d99e1c 100644
--- a/docs/content/2.elements/6.dropdown.md
+++ b/docs/content/2.elements/6.dropdown.md
@@ -21,6 +21,7 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
 - `shortcuts` - The shortcuts of the item.
 - `slot` - The slot of the item.
 - `disabled` - Whether the item is disabled.
+- `class` - The class of the item.
 - `click` - The click handler of the item.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index bc8f8129..35543fc3 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -21,14 +21,14 @@
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'labelClass', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'labelClass', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'class', 'click'])" custom>
                 <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
                   <component
                     :is="!!href ? 'a' : 'button'"
                     :href="!itemDisabled ? href : undefined"
                     :rel="rel"
                     :target="target"
-                    :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
                     @click="onClick($event, item, { href, navigate, close, isExternal })"
                   >
                     <slot :name="item.slot || 'item'" :item="item">
diff --git a/src/runtime/types/dropdown.d.ts b/src/runtime/types/dropdown.d.ts
index eae46d01..67dad14e 100644
--- a/src/runtime/types/dropdown.d.ts
+++ b/src/runtime/types/dropdown.d.ts
@@ -10,5 +10,6 @@ export interface DropdownItem extends NuxtLinkProps {
   avatar?: Avatar
   shortcuts?: string[]
   disabled?: boolean
+  class?: string
   click?: Function
 }