@lemonadejs/contextmenu 5.0.0 → 5.2.0

package/dist/index.d.ts

@@ -10,6 +10,9 @@ declare namespace Contextmenu {
     interface Item {
         submenu?: Item[];
         title?: string;
+        disabled?: boolean;
+        tooltip?: string;
+        shortcut?: string;
         type: 'line' | undefined;
         onclick?: (e: MouseEvent, element: HTMLElement) => void;
         icon?: string;

package/dist/index.js

@@ -47,7 +47,7 @@ if (! Modal && typeof (require) === 'function') {
         } else if (self.type === 'inline') {
             return `<div></div>`;
         } else {
-            return `<div class="lm-menu-item" data-disabled="{{self.disabled}}" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" data-submenu="${!!self.submenu}" onmouseup="self.parent.mouseUp" onmouseenter="self.parent.mouseEnter" onmouseleave="self.parent.mouseLeave">
+            return `<div class="lm-menu-item" data-disabled="{{self.disabled}}" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" title="{{self.tooltip}}" data-submenu="${!!self.submenu}" onmouseup="self.parent.mouseUp" onmouseenter="self.parent.mouseEnter" onmouseleave="self.parent.mouseLeave">
                 <a>{{self.title}}</a> <div>{{self.shortcut}}</div>
             </div>`;
         }
@@ -239,7 +239,7 @@ if (! Modal && typeof (require) === 'function') {
         }
     }
 
-    const Contextmenu = function() {
+    const Contextmenu = function(children, { onload }) {
         let self = this;
 
         // Container for all modals
@@ -302,7 +302,7 @@ if (! Modal && typeof (require) === 'function') {
             self.modalIndex = level ? level - 1 : 0;
         }
 
-        self.onload = function() {
+        onload(() => {
             if (! self.root) {
                 self.root = self.el.parentNode;
             }
@@ -356,7 +356,7 @@ if (! Modal && typeof (require) === 'function') {
                         // Contextmenu modal
                         let item = menu.options[menu.cursor];
                         // Cursor is found so reset it
-                        if (typeof (item) !== 'undefined') {
+                        if (typeof(item) !== 'undefined') {
                             // Execute action
                             if (typeof (item.onclick) === 'function') {
                                 item.onclick.call(item, e, item.el);
@@ -400,7 +400,7 @@ if (! Modal && typeof (require) === 'function') {
                 e.preventDefault();
                 e.stopImmediatePropagation();
             });
-        }
+        });
 
         return `<div class="lm-menu"></div>`;
     }

package/dist/style.css

@@ -3,8 +3,8 @@
     user-select: none;
     border: 1px solid var(--lm-border-color-light, #e9e9e9);
     border-radius: 4px;
-    box-shadow: 0 2px 6px 2px rgba(60,64,67,.2);
-    max-height: 300px;
+    box-shadow: 0 2px 4px 2px rgba(60,64,67,.2);
+    max-height: 350px;
     width: initial;
     height: initial;
     min-width: 250px;
@@ -22,9 +22,9 @@
 .lm-menu-submenu > div.lm-menu-item {
     box-sizing: border-box;
     display: flex;
-    padding: 0 8px 0 30px;
+    padding: 1px 8px 1px 40px;
     width: 250px;
-    font-size: 11px;
+    font-size: 0.9em;
     font-family:sans-serif;
     text-align: left;
     align-items: center;
@@ -34,17 +34,19 @@
     text-decoration: none;
     flex: 1;
     cursor: pointer;
-    line-height: 28px;
+    line-height: 30px;
 }
 
 .lm-menu-submenu > div.lm-menu-item div {
     margin-right: 5px;
-    font-size: 0.9em;
     color: #888;
 }
 
 .lm-menu-submenu > div.lm-menu-item[data-submenu="true"]::after {
-    content: '\25B6'
+    content: 'arrow_right';
+    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
+    font-size: 18px;
+    color: var(--lm-icon-color, #777);
 }
 
 .lm-menu-submenu > div.lm-menu-item[data-disabled="true"] {
@@ -66,12 +68,22 @@
 
 .lm-menu-submenu > div.lm-menu-item::before {
     content: attr(data-icon);
-    font-family: 'Material Icons';
-    font-size: 16px;
+    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
+    font-size: 18px;
+    width: 24px;
+    height: 24px;
     line-height: 24px;
-    margin-right: 10px;
-    width: 16px;
-    color: var(--lm-icon-color, #777);
     position: absolute;
-    left: 8px;
+    left: 11px;
+}
+
+.lm-dark-mode .lm-menu .lm-modal {
+    color: #e8e7e9;
+    background-color: #111;
+    border: 1px solid #3c3c3c;
+}
+
+.lm-dark-mode .lm-menu-submenu > div.lm-menu-item:hover,
+.lm-dark-mode .lm-menu-submenu > div.lm-menu-item[data-cursor="true"] {
+    background-color: var(--lm-background-color-hover, #2d2d2d);
 }

package/package.json

@@ -14,10 +14,10 @@
         "build": "webpack --config webpack.config.js"
     },
     "dependencies": {
-        "lemonadejs": "^5.0.3",
-        "@lemonadejs/modal": "^5.0.0"
+        "lemonadejs": "^5.2.0",
+        "@lemonadejs/modal": "^5.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.0.0"
+    "version": "5.2.0"
 }