@lemonadejs/contextmenu 5.0.0 → 5.2.1

package/README.md

@@ -1,171 +1,172 @@
-# LemonadeJS Context Menu
-
-[Official website and documentation is here](https://lemonadejs.net/docs/plugins/context-menu)
-
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
-
-The LemonadeJS Context Menu is a versatile solution for interactive menu navigation, offering a customizable and intuitive experience. Designed for efficient decision-making, users can choose options that trigger specific actions or toggle the opening of another menu—configurable to your preferences.
-
-With a focus on flexibility, this component empowers you to tailor the menu's behavior according to your application's needs. Whether it's executing actions directly or revealing nested options for a more in-depth selection process, the Context Menu adapts seamlessly.
-
-Noteworthy features include a user-friendly interface, allowing for smooth interactions and a clear decision-making process. The configuration options provided by the Context Menu make it a valuable addition to various applications, ensuring a responsive and adaptable menu system.
-
-## Getting Started
-
-You can install using NPM or using directly from a CDN.
-
-### npm Installation
-
-To install it in your project using npm, run the following command:
-
-```bash
-$ npm install @lemonadejs/contextmenu
-```
-
-### CDN
-
-To use Context Menu via a CDN, include the following script tags in your HTML file:
-
-```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/index.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/style.min.css" />
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
-```
-
-### Usage
-
-Quick example with Lemonade
-
-```javascript
-// Add the following link to your HTML file:
-// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
-import Contextmenu from '@lemonadejs/contextmenu';
-import '@lemonadejs/contextmenu/dist/style.css';
-import '@lemonadejs/modal/dist/style.css';
-
-export default function App() {
-    const self = this;
-
-    self.options = [
-        {
-            title: 'Console.log',
-            onclick:function() {
-                console.log('Hello!')
-            },
-        },
-        {
-            title: 'Show Alert',
-            onclick:function() {
-                alert('Hello!')
-            },
-        },
-    ];
-
-    return `<div style="background-color: #2222AA; width: 100px; height: 100px;">
-        <Contextmenu :options="self.options" :ref="self.contextmenu" />
-    </div>`
-}
-```
-
-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 |
-|-----------|------|-------------|
-| options | option[] | An array of option objects describing the rendering options. Each item should follow the structure defined in the 'Option Details' section.  |
-
-### Option Details
-
-| Property  | Type | Description |
-|-----------|------|-------------|
-| submenu? | array of options | An optional array containing options displayed as a sub-menu. |
-| title? | string | The title text associated with the option. |
-| type? | string | The type of the current object, which can be utilized to display a line with 'line'. |
-| onclick? | function | The function executed upon selecting the option. |
-| icon? | string | The name of the Material Icon associated with the option. |
-| render? | function | The function executed when rendering the option. |
-| onopen? | function | The function executed when the submenu is opened. |
-| onclose? | function | The function executed when the submenu is closed. |
-
-## License
-
-The [LemonadeJS](https://lemonadejs.net) Context Menu is released under the MIT.
-
-## Other Tools
-
--   [jSuites](https://jsuites.net/docs)
--   [Jspreadsheet Data Grid](https://jspreadsheet.com)
+# LemonadeJS Context Menu
+
+[Official website and documentation is here](https://lemonadejs.net/docs/plugins/context-menu)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS Context Menu is a versatile solution for interactive menu navigation, offering a customizable and intuitive experience. Designed for efficient decision-making, users can choose options that trigger specific actions or toggle the opening of another menu—configurable to your preferences.
+
+With a focus on flexibility, this component empowers you to tailor the menu's behavior according to your application's needs. Whether it's executing actions directly or revealing nested options for a more in-depth selection process, the Context Menu adapts seamlessly.
+
+Noteworthy features include a user-friendly interface, allowing for smooth interactions and a clear decision-making process. The configuration options provided by the Context Menu make it a valuable addition to various applications, ensuring a responsive and adaptable menu system.
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/contextmenu
+```
+
+### CDN
+
+To use Context Menu via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/style.min.css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+// Add the following link to your HTML file:
+// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
+import Contextmenu from '@lemonadejs/contextmenu';
+import '@lemonadejs/contextmenu/dist/style.css';
+import '@lemonadejs/modal/dist/style.css';
+
+export default function App() {
+    const self = this;
+
+    self.options = [
+        {
+            title: 'Console.log',
+            onclick: function () {
+                console.log('Hello!');
+            },
+        },
+        {
+            title: 'Show Alert',
+            onclick: function () {
+                alert('Hello!');
+            },
+        },
+    ];
+
+    return `<div style="background-color: #2222AA; width: 100px; height: 100px;">
+        <Contextmenu :options="self.options" :ref="self.contextmenu" />
+    </div>`;
+}
+```
+
+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                                                                                                                                 |
+| -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| options  | option[] | An array of option objects describing the rendering options. Each item should follow the structure defined in the 'Option Details' section. |
+
+### Option Details
+
+| Property | Type             | Description                                                                          |
+| -------- | ---------------- | ------------------------------------------------------------------------------------ |
+| submenu? | array of options | An optional array containing options displayed as a sub-menu.                        |
+| title?   | string           | The title text associated with the option.                                           |
+| type?    | string           | The type of the current object, which can be utilized to display a line with 'line'. |
+| onclick? | function         | The function executed upon selecting the option.                                     |
+| icon?    | string           | The name of the Material Icon associated with the option.                            |
+| render?  | function         | The function executed when rendering the option.                                     |
+| onopen?  | function         | The function executed when the submenu is opened.                                    |
+| onclose? | function         | The function executed when the submenu is closed.                                    |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) Context Menu is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/docs)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

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>`;
         }
@@ -114,10 +114,11 @@ if (! Modal && typeof (require) === 'function') {
                 }
                 // Update selected modal
                 self.parent.modalIndex = index+1;
+                let rect = parent.modal.el.getBoundingClientRect();
                 // Update modal
                 current.modal.closed = false;
-                current.modal.top = parent.modal.top + s.el.offsetTop + 2;
-                current.modal.left = parent.modal.left + 248;
+                current.modal.top = rect.y + s.el.offsetTop + 2;
+                current.modal.left = rect.x + 248;
 
                 // Activate the cursor
                 if (cursor === true) {
@@ -159,7 +160,7 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
-        let template = `<lm-modal position="absolute" :overflow="true" :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :focus="false" :layers="false" :onopen="self.onopen" :onclose="self.onclose">
+        let template = `<lm-modal :overflow="true" :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :focus="false" :layers="false" :onopen="self.onopen" :onclose="self.onclose">
             <div class="lm-menu-submenu">
                 <Item :loop="self.options" />
             </div>
@@ -239,7 +240,7 @@ if (! Modal && typeof (require) === 'function') {
         }
     }
 
-    const Contextmenu = function() {
+    const Contextmenu = function(children, { onload }) {
         let self = this;
 
         // Container for all modals
@@ -287,7 +288,7 @@ if (! Modal && typeof (require) === 'function') {
                 onopen(self, options);
             }
         }
-        
+
         self.close = function(level) {
             // Close all modals from the level specified
             self.modals.forEach(function(menu, k) {
@@ -302,12 +303,12 @@ if (! Modal && typeof (require) === 'function') {
             self.modalIndex = level ? level - 1 : 0;
         }
 
-        self.onload = function() {
+        onload(() => {
             if (! self.root) {
                 self.root = self.el.parentNode;
             }
 
-            self.root.setAttribute('tabindex', -1);
+            self.root.setAttribute('tabindex', 0);
 
             // Create first menu
             self.create();
@@ -356,7 +357,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);
@@ -393,14 +394,12 @@ if (! Modal && typeof (require) === 'function') {
 
             // Parent
             self.root.addEventListener("contextmenu", function(e) {
-                let [x,y] = getCoords(e);
-                // Open the context menu
-                let scrollPosition = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
-                self.open(self.options, x, y+scrollPosition, e);
+                let [x, y] = getCoords(e);
+                self.open(self.options, x, y, e);
                 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;
@@ -12,6 +12,7 @@
     padding-top: 4px;
     padding-bottom: 4px;
     z-index: 16;
+    transition: initial;
 }
 
 .lm-menu-submenu {
@@ -22,9 +23,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 +35,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 +69,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

@@ -1,23 +1,23 @@
-{
-    "name": "@lemonadejs/contextmenu",
-    "title": "LemonadeJS contextmenu",
-    "description": "LemonadeJS Contextmenu JavaScript Plugin",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript contextmenu"
-    ],
-    "scripts": {
-        "start": "webpack serve --history-api-fallback",
-        "build": "webpack --config webpack.config.js"
-    },
-    "dependencies": {
-        "lemonadejs": "^5.0.3",
-        "@lemonadejs/modal": "^5.0.0"
-    },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "version": "5.0.0"
-}
+{
+    "name": "@lemonadejs/contextmenu",
+    "title": "LemonadeJS contextmenu",
+    "description": "LemonadeJS Contextmenu JavaScript Plugin",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript contextmenu"
+    ],
+    "scripts": {
+        "start": "webpack serve --history-api-fallback",
+        "build": "webpack --config webpack.config.js"
+    },
+    "dependencies": {
+        "lemonadejs": "^5.2.0",
+        "@lemonadejs/modal": "^5.2.0"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "version": "5.2.1"
+}