@lemonadejs/contextmenu 1.1.2 → 1.3.0

package/README.md

@@ -69,6 +69,79 @@ export default function App() {
 }
 ```
 
+Quick example with React
+
+```jsx
+import React, { useRef } from 'react';
+import Contextmenu from '@lemonadejs/contextmenu/dist/react';
+import '@lemonadejs/contextmenu/dist/style.css';
+import '@lemonadejs/modal/dist/style.css';
+
+const options = [
+    {
+        title: 'Console.log',
+        onclick: function () {
+            console.log('Hello!')
+        },
+    },
+    {
+        title: 'Show Alert',
+        onclick: function () {
+            alert('Hello!')
+        },
+    },
+];
+export default function App() {
+    const contextmenu = useRef();
+
+    return (
+        <div style={{ backgroundColor: '#2222AA', width: '100px', height: '100px' }}>
+            <Contextmenu options={options} ref={contextmenu} />
+        </div>);
+}
+```
+
+Quick example with Vue
+
+```vue
+<template>
+    <div style="background-color: #2222AA; width: 100px; height: 100px;">
+        <Contextmenu :options="options" />
+    </div>
+</template>
+
+<script>
+import Contextmenu from '@lemonadejs/contextmenu/dist/vue'
+import '@lemonadejs/contextmenu/dist/style.css';
+import '@lemonadejs/modal/dist/style.css';
+
+export default {
+    name: 'App',
+    components: {
+        Contextmenu
+    },
+    data() {
+        return {
+            options: [
+                {
+                    title: 'Console.log',
+                    onclick:function() {
+                        console.log('Hello!')
+                    },
+                },
+                {
+                    title: 'Show Alert',
+                    onclick:function() {
+                        alert('Hello!')
+                    },
+                },
+            ]
+        }
+    }
+}
+</script>
+```
+
 ### Properties
 
 | Property  | Type | Description |
@@ -94,5 +167,5 @@ The [LemonadeJS](https://lemonadejs.net) Context Menu is released under the MIT.
 
 ## Other Tools
 
--   [jSuites](https://jsuites.net/v4/)
+-   [jSuites](https://jsuites.net/docs)
 -   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.js

@@ -1,4 +1,4 @@
-if (!lemonade && typeof (require) === 'function') {
+if (! lemonade && typeof(require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -42,12 +42,14 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
+        self.hasSubmenu = !! self.submenu;
+
         if (self.type === 'line') {
             return `<hr />`;
         } else if (self.type === 'inline') {
             return `<div></div>`;
         } else {
-            return `<div class="lm-menu-item" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" data-submenu="{{self.submenu?true:''}}" onmouseup="self.parent.parent.mouseUp(self, e)" onmouseenter="self.parent.parent.mouseEnter(self)" onmouseleave="self.parent.parent.mouseLeave(self)">
+            return `<div class="lm-menu-item" data-disabled="{{self.disabled}}" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" data-submenu="{{self.hasSubmenu}}" onmouseup="self.parent.parent.mouseUp(self, e)" onmouseenter="self.parent.parent.mouseEnter(self)" onmouseleave="self.parent.parent.mouseLeave(self)">
                 <a>{{self.title}}</a> <div>{{self.shortcut}}</div>
             </div>`;
         }
@@ -250,7 +252,7 @@ if (! Modal && typeof (require) === 'function') {
         // Open submenu
         if (typeof(item) !== 'undefined') {
             // Open submenu in case that exists
-            if (item.submenu) {
+            if (item.submenu && ! item.disabled) {
                 this.parent.open(item, true);
                 return true;
             }
@@ -302,14 +304,14 @@ if (! Modal && typeof (require) === 'function') {
             if (modal.closed === false) {
                 // Close modals with higher level
                 self.close(1);
-                // Define new position
-                modal.top = y;
-                modal.left = x;
                 // Update the data
                 if (modal.options !== options) {
                     // Refresh content
                     modal.options = options;
                 }
+                // Define new position
+                modal.top = y;
+                modal.left = x;
                 onopen(self, options);
             }
         }
@@ -390,6 +392,8 @@ if (! Modal && typeof (require) === 'function') {
 
     lemonade.setComponents({ Contextmenu: Contextmenu });
 
+    lemonade.createWebComponent('contextmenu', Contextmenu);
+
     return function (root, options) {
         if (typeof (root) === 'object') {
             lemonade.render(Contextmenu, root, options)

package/dist/react.d.ts

@@ -6,10 +6,13 @@
 import Component from './index';
 
 interface Contextmenu {
+    ref?: MutableRefObject<undefined>;
     (): any
     [key: string]: any
 }
 
-declare function Contextmenu<Contextmenu>(props: Component.Options): any;
+type Props = IntrinsicAttributes & Component.Options & Contextmenu;
+
+declare function Contextmenu<Contextmenu>(props: Props): any;
 
 export default Contextmenu;

package/dist/style.css

@@ -1,7 +1,7 @@
 .lm-menu .lm-modal {
     color: #555;
     user-select: none;
-    border: 1px solid transparent;
+    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;
@@ -9,6 +9,9 @@
     height: initial;
     min-width: 250px;
     min-height: initial;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    z-index: 16;
 }
 
 .lm-menu-submenu {
@@ -44,17 +47,18 @@
     content: '\25B6'
 }
 
-.lm-menu-submenu > div.lm-menu-item.disabled {
-    color: #ccc;
+.lm-menu-submenu > div.lm-menu-item[data-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
 }
 
 .lm-menu-submenu > div.lm-menu-item:hover,
 .lm-menu-submenu > div.lm-menu-item[data-cursor="true"] {
-    background: #ebebeb;
+    background-color: var(--lm-background-color-hover, #ebebeb);
 }
 
 .lm-menu-submenu hr {
-    border: 1px solid #e9e9e9;
+    border: 1px solid var(--lm-border-color-light, #e9e9e9);
     border-bottom: 0;
     margin-top:5px;
     margin-bottom:5px;
@@ -67,4 +71,5 @@
     line-height: 24px;
     margin-right: 10px;
     width: 16px;
+    color: var(--lm-icon-color, #777);
 }

package/package.json

@@ -14,10 +14,10 @@
         "build": "webpack --config webpack.config.js"
     },
     "dependencies": {
-        "@lemonadejs/modal": "^2.7.1",
-        "lemonadejs": "^4.0.7"
+        "lemonadejs": "^4.3.3",
+        "@lemonadejs/modal": "^3.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "1.1.2"
+    "version": "1.3.0"
 }