feat: add menuClasses prop to NeDropdown (#72)

nethesis · Oct 4, 2024 · afba335 · afba335
1 parent 7b0fbf9
commit afba335
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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'
+  }
+}