fix(Dropdown): merge item class

Fixes #1157
nuxt · Dec 28, 2023 · 7151b7b · 7151b7b · vercel · Dec 28, 2023
1 parent ffd20b3
commit 7151b7b
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git 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
@@ -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
@@ -10,5 +10,6 @@ export interface DropdownItem extends NuxtLinkProps {
   avatar?: Avatar
   shortcuts?: string[]
   disabled?: boolean
+  class?: string
   click?: Function
 }