@lemonadejs/contextmenu 1.1.1 → 1.1.3

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

@@ -302,14 +302,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);
             }
         }
@@ -365,7 +365,7 @@ if (! Modal && typeof (require) === 'function') {
             // Create event for focus out
             self.root.addEventListener("focusout", (e) => {
                 if (! self.root.contains(e.relatedTarget)) {
-                    //self.close(0);
+                    self.close(0);
                 }
             });
 

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,8 @@
     height: initial;
     min-width: 250px;
     min-height: initial;
+    padding-top: 4px;
+    padding-bottom: 4px;
 }
 
 .lm-menu-submenu {
@@ -50,11 +52,11 @@
 
 .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 +69,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/modal": "^2.8.1",
+        "lemonadejs": "^4.2.2"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "1.1.1"
+    "version": "1.1.3"
 }