make uimenu accept maxWidth to avoid text truncation

learningequality · Dec 9, 2024 · 56e5b4e · 56e5b4e
1 parent 20f9350
commit 56e5b4e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
@@ -21,6 +21,7 @@
         ref="menu" 
         :options="options" 
         :hasIcons="hasIcons" 
+        :maxWidth="maxWidth"
         @select="handleSelection" 
       />
     </UiPopover>
@@ -82,6 +83,12 @@
         type: Boolean,
         default: false,
       },
+
+      /** maximim width of the dropdown menu */
+      maxWidth: {
+        type: [Number, String],
+        default: null,
+      },
       /**
        * The position of the dropdown relative to the button
        */

diff --git a/lib/keen/UiMenu.vue b/lib/keen/UiMenu.vue
@@ -8,6 +8,7 @@
     lazy
 
     :class="classes"
+    :style="menuStyle"
   >
     <UiMenuOption
       v-for="(option, index) in options"
@@ -55,6 +56,10 @@
           return [];
         },
       },
+      maxWidth: {
+        type: [Number,String],
+        default: null,
+      },
       hasIcons: {
         type: Boolean,
         default: false,
@@ -101,6 +106,15 @@
           'has-secondary-text': this.hasSecondaryText,
         };
       },
+      menuStyle(){
+        if(this.maxWidth){
+          return {
+            maxWidth: `${this.maxWidth}${typeof this.maxWidth === 'number' ? 'px' : ''}`
+          };
+          
+        }
+        return{};
+      },
       activeOutline() {
         return this.isActive ? this.$coreOutline : {};
       },