@lemonadejs/contextmenu 1.0.6 → 1.0.8

package/dist/index.js

@@ -72,9 +72,10 @@ if (! Modal && typeof (require) === 'function') {
 
         /**
          * Open submenu handler
-         * @param s
+         * @param {object} s
+         * @param {boolean} cursor - Activate the first item
          */
-        self.open = function(s) {
+        self.open = function(s, cursor) {
             if (s.submenu) {
                 // Get the modal in the container of modals
                 let item = self.parent.modals[index+1];
@@ -100,10 +101,14 @@ if (! Modal && typeof (require) === 'function') {
                 // Define the position
                 modal.top = parent.top + s.el.offsetTop + 2;
                 modal.left = parent.left + 248;
-                // Place cursor in the first position
-                modal.options[0].cursor = true;
-                // Position cursor
-                modal.cursor = 0;
+
+                // Activate the cursor
+                if (cursor === true) {
+                    // Place cursor in the first position
+                    modal.options[0].cursor = true;
+                    // Position cursor
+                    modal.cursor = 0;
+                }
             } else {
                 // Close modals with higher level
                 self.parent.close(index+1);
@@ -135,7 +140,7 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
-        let template = `<Modal :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :onclose="self.onclose" :focus="false" :layers="false">
+        let template = `<Modal :overflow="true" :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :onclose="self.onclose" :focus="false" :layers="false">
             <div class="lm-menu-submenu">
                 <Item :loop="self.options" />
             </div>
@@ -226,7 +231,7 @@ if (! Modal && typeof (require) === 'function') {
         if (typeof(item) !== 'undefined') {
             // Open submenu in case that exists
             if (item.submenu) {
-                this.parent.open(item);
+                this.parent.open(item, true);
                 return true;
             }
         }
@@ -339,7 +344,8 @@ if (! Modal && typeof (require) === 'function') {
             self.root.addEventListener("contextmenu", function(e) {
                 let [x,y] = getCoords(e);
                 // Open the context menu
-                self.open(self.options, x, y, e);
+                var scrollPosition = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+                self.open(self.options, x, y+scrollPosition, e);
                 e.preventDefault();
                 e.stopImmediatePropagation();
             });

package/dist/react.js

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
+import Component from './index';
+
+
+// @ts-ignore
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (!Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options);
+        }
+    }, []);
+
+    useEffect(() => {
+        for (let key in props) {
+            if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
+                if (props[key] !== mainReference.current[key]) {
+                    mainReference.current[key] = props[key];
+                }
+            }
+        }
+    }, [props])
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
+})

package/dist/style.css

@@ -3,31 +3,14 @@
     user-select: none;
     border: 1px solid transparent;
     border-radius: 4px;
-    box-shadow: 0 2px 6px 2px rgba(60,64,67,.15);
+    box-shadow: 0 2px 6px 2px rgba(60,64,67,.2);
     max-height: 300px;
-    overflow-y: auto;
-
     width: initial;
     height: initial;
     min-width: 250px;
     min-height: initial;
 }
 
-.lm-menu .lm-modal::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-}
-
-.lm-menu .lm-modal::-webkit-scrollbar-track {
-    border: 1px solid #fff;
-    background: #eee;
-}
-
-.lm-menu .lm-modal::-webkit-scrollbar-thumb {
-    border: 1px solid #fff;
-    background: #888;
-}
-
 .lm-menu-submenu {
     padding-top: 1px;
     padding-bottom: 1px;
@@ -53,6 +36,8 @@
 
 .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 {
@@ -82,5 +67,4 @@
     position: absolute;
     left: 9px;
     line-height: 24px;
-    transform: rotate(0.03deg);
 }

package/dist/vue.js

@@ -0,0 +1,45 @@
+import { h } from 'vue';
+import component from "./index";
+
+
+export default {
+    inheritAttrs: false,
+    mounted() {
+        let options = {
+            ...this.$attrs
+        };
+
+        this.el = this.$refs.container;
+
+        this.current = component(this.$refs.container, options);
+    },
+    setup() {
+        let containerProps = {
+            ref: 'container',
+            style: {
+                width: '100%',
+                height: '100%',
+            }
+        };
+        return () => h('div', containerProps);
+    },
+    watch: {
+        $attrs: {
+            deep: true,
+            handler() {
+                this.updateState();
+            }
+        }
+    },
+    methods: {
+        updateState() {
+            for (let key in this.$attrs) {
+                if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
+                    if (this.$attrs[key] !== this.current[key]) {
+                        this.current[key] = this.$attrs[key];
+                    }
+                }
+            }
+        }
+    }
+}

package/package.json

@@ -14,10 +14,10 @@
         "build": "webpack --config webpack.config.js"
     },
     "dependencies": {
-        "@lemonadejs/modal": "^2.3.3",
-        "lemonadejs": "^3.4.0"
+        "@lemonadejs/modal": "^2.4.4",
+        "lemonadejs": "^4.0.7"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "1.0.6"
+    "version": "1.0.8"
 }