From afba3357a4faea7c2d296988572f3b7a3b23fb55 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Fri, 4 Oct 2024 08:58:18 +0200
Subject: [PATCH] feat: add menuClasses prop to NeDropdown (#72)

---
 src/components/NeDropdown.vue |  6 ++++--
 stories/NeDropdown.stories.ts | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/NeDropdown.vue b/src/components/NeDropdown.vue
index e320e30..d9fa6ed 100644
--- a/src/components/NeDropdown.vue
+++ b/src/components/NeDropdown.vue
@@ -15,12 +15,14 @@ export interface Props {
   items: NeDropdownItem[]
   alignToRight: boolean
   openMenuAriaLabel?: string
+  menuClasses?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   alignToRight: false,
-  openMenuAriaLabel: 'Open menu'
+  openMenuAriaLabel: 'Open menu',
+  menuClasses: ''
 })
 
 export interface NeDropdownItem {
@@ -104,7 +106,7 @@ watch(
             { top: top + 'px' },
             alignToRight ? { right: right + 'px' } : { left: left + 'px' }
           ]"
-          class="absolute z-50 mt-2.5 min-w-[10rem] rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-gray-950 dark:ring-gray-500/50"
+          :class="`absolute z-50 mt-2.5 min-w-[10rem] rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-gray-950 dark:ring-gray-500/50 ${menuClasses}`"
         >
           <template v-for="item in items" :key="item.id">
             <!-- divider -->
diff --git a/stories/NeDropdown.stories.ts b/stories/NeDropdown.stories.ts
index 85ebbbc..5eb420e 100644
--- a/stories/NeDropdown.stories.ts
+++ b/stories/NeDropdown.stories.ts
@@ -59,7 +59,8 @@ const meta = {
       }
     ],
     alignToRight: false,
-    openMenuAriaLabel: 'Open menu'
+    openMenuAriaLabel: 'Open menu',
+    menuClasses: ''
   }
 } satisfies Meta<typeof NeDropdown>
 
@@ -114,3 +115,16 @@ export const WithSlot: Story = {
   }),
   args: {}
 }
+
+export const MenuClasses: Story = {
+  render: (args) => ({
+    components: { NeDropdown },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {
+    menuClasses: '!bg-fuchsia-200 dark:!bg-fuchsia-900'
+  }
+}