feat: menu improvements (#531)

lob · Jul 24, 2024 · 31524e6 · 31524e6
1 parent 048a990
commit 31524e6
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.86
+
+- Adds `class` property to `MenuItem` type
+
 ## v2.0.85
 
 - Improve `Overlay` interface

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.85",
+  "version": "2.0.86",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

diff --git a/src/components/Menu/Menu.stories.ts b/src/components/Menu/Menu.stories.ts
@@ -56,7 +56,7 @@ export const Primary: StoryObj<typeof Menu> = {
     items: [
       {
         label: 'Create (External Link)',
-        to: 'https://google.com',
+        to: 'https://lob.com',
         target: '_blank',
         key: 'test1',
         icon: IconName.PLUS

diff --git a/src/components/Menu/Menu.vue b/src/components/Menu/Menu.vue
@@ -33,6 +33,7 @@
         :to="item.item.url"
         :href="item.item.url"
         :target="item.item.target"
+        :class="item.item.class"
       >
         <span
           :class="[
@@ -104,6 +105,7 @@ const pvMenuItems = computed<PrimeVueMenuItem[]>(() =>
       pvItem.disabled = item.disabled;
       pvItem.visible = item.visible;
       pvItem.target = item.target;
+      pvItem.class = item.class;
     }
 
     return pvItem;

diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
@@ -1,6 +1,7 @@
 import { IconName } from '../Icon';
 
 export interface MenuItem {
+  class?: string;
   label: string;
   to?: string;
   disabled?: boolean;

diff --git a/src/utils/ConditionalWrapper.vue b/src/utils/ConditionalWrapper.vue
@@ -2,7 +2,7 @@
   <component :is="tag" v-if="tag" v-bind="$attrs">
     <slot />
   </component>
-  <slot v-else v-bind="$attrs" />
+  <slot v-else attrs="$attrs" />
 </template>
 
 <script setup lang="ts">