vue-simple-context-menu - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

dist/vue-simple-context-menu.esm.js

 import Vue from 'vue';
 import vClickOutside from 'v-click-outside';
 
-(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=".vue-simple-context-menu[data-v-718435e8] { top: 0; left: 0; margin: 0; padding: 0; display: none; list-style: none; position: absolute; z-index: 1000000; background-color: #ECF0F1; border: 1px solid #dde4e6; border-bottom-width: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif; } .vue-simple-context-menu--active[data-v-718435e8] { display: block; } .vue-simple-context-menu__item[data-v-718435e8] { display: flex; cursor: pointer; padding: 12px 22px; align-items: center; border-bottom: 1px solid #c0cdd1; transition: all 0.2s ease; } .vue-simple-context-menu__item[data-v-718435e8]:hover { background-color: #3482B5; color: #fff; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=".vue-simple-context-menu[data-v-718435e8] { top: 0; left: 0; margin: 0; padding: 0; display: none; list-style: none; position: absolute; z-index: 1000000; background-color: #ECF0F1; border-bottom-width: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif; box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.2); border-radius: 4px; } .vue-simple-context-menu--active[data-v-718435e8] { display: block; } .vue-simple-context-menu__item[data-v-718435e8] { display: flex; color: #333; cursor: pointer; padding: 5px 15px; align-items: center; } .vue-simple-context-menu__item[data-v-718435e8]:hover { background-color: #3482B5; color: #fff; } .vue-simple-context-menu li[data-v-718435e8]:first-of-type { margin-top: 4px; } .vue-simple-context-menu li[data-v-718435e8]:last-of-type { margin-bottom: 4px; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
 Vue.use(vClickOutside);
 
-var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('ul',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.onClickOutside),expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{"id":"vue-simple-context-menu"}},_vm._l((_vm.options),function(option){return _c('li',{staticClass:"vue-simple-context-menu__item",on:{"click":function($event){_vm.optionClicked(option);}}},[_vm._v(" "+_vm._s(option.name)+" ")])}))])},staticRenderFns: [],_scopeId: 'data-v-718435e8',
+var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('ul',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.onClickOutside),expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{"id":_vm.id}},_vm._l((_vm.options),function(option){return _c('li',{staticClass:"vue-simple-context-menu__item",on:{"click":function($event){_vm.optionClicked(option);}}},[_vm._v(" "+_vm._s(option.name)+" ")])}))])},staticRenderFns: [],_scopeId: 'data-v-718435e8',
     name: 'VueSimpleContextMenu',
     props: {
+        id: {
+            type: String,
+            required: true
+        },
         options: {
@@ -28,3 +32,3 @@ type: Array,
 
-            var menu = document.getElementById("vue-simple-context-menu");
+            var menu = document.getElementById(this.id);
             if (!menu) {
@@ -43,11 +47,11 @@ return
             if ((this.menuWidth + event.pageX) >= window.innerWidth) {
-                menu.style.left = (event.pageX - this.menuWidth) + "px";
+                menu.style.left = (event.pageX - this.menuWidth + 2) + "px";
             } else {
-                menu.style.left = event.pageX + "px";
+                menu.style.left = (event.pageX - 2) + "px";
             }
 
             if ((this.menuHeight + event.pageY) >= window.innerHeight) {
-                menu.style.top = (event.pageY - this.menuHeight) + "px";
+                menu.style.top = (event.pageY - this.menuHeight + 2) + "px";
             } else {
-                menu.style.top = event.pageY + "px";
+                menu.style.top = (event.pageY - 2) + "px";
             }
@@ -58,3 +62,3 @@
         hideContextMenu: function hideContextMenu () {
-            document.getElementById("vue-simple-context-menu").classList.remove('vue-simple-context-menu--active');
+            document.getElementById(this.id).classList.remove('vue-simple-context-menu--active');
         },
@@ -61,0 +65,0 @@ onClickOutside: function onClickOutside (event) {

dist/vue-simple-context-menu.min.js

@@ -1,1 +0,1 @@
-var VueSimpleContextMenu=function(e,t,n){"use strict";function i(e){i.installed||(i.installed=!0,e.component("VueSimpleContextMenu",o))}t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),n='.vue-simple-context-menu[data-v-718435e8] { top: 0; left: 0; margin: 0; padding: 0; display: none; list-style: none; position: absolute; z-index: 1000000; background-color: #ECF0F1; border: 1px solid #dde4e6; border-bottom-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .vue-simple-context-menu--active[data-v-718435e8] { display: block; } .vue-simple-context-menu__item[data-v-718435e8] { display: flex; cursor: pointer; padding: 12px 22px; align-items: center; border-bottom: 1px solid #c0cdd1; transition: all 0.2s ease; } .vue-simple-context-menu__item[data-v-718435e8]:hover { background-color: #3482B5; color: #fff; } ';t.type="text/css",t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n)),e.appendChild(t)}}(),t.use(n);var o={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("ul",{directives:[{name:"click-outside",rawName:"v-click-outside",value:e.onClickOutside,expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{id:"vue-simple-context-menu"}},e._l(e.options,function(t){return n("li",{staticClass:"vue-simple-context-menu__item",on:{click:function(n){e.optionClicked(t)}}},[e._v(" "+e._s(t.name)+" ")])}))])},staticRenderFns:[],_scopeId:"data-v-718435e8",name:"VueSimpleContextMenu",props:{options:{type:Array,required:!0}},data:function(){return{item:null,menuWidth:null,menuHeight:null}},computed:{},methods:{showMenu:function(e,t){this.item=t;var n=document.getElementById("vue-simple-context-menu");n&&(this.menuWidth&&this.menuHeight||(n.style.visibility="hidden",n.style.display="block",this.menuWidth=n.offsetWidth,this.menuHeight=n.offsetHeight,n.removeAttribute("style")),this.menuWidth+e.pageX>=window.innerWidth?n.style.left=e.pageX-this.menuWidth+"px":n.style.left=e.pageX+"px",this.menuHeight+e.pageY>=window.innerHeight?n.style.top=e.pageY-this.menuHeight+"px":n.style.top=e.pageY+"px",n.classList.add("vue-simple-context-menu--active"))},hideContextMenu:function(){document.getElementById("vue-simple-context-menu").classList.remove("vue-simple-context-menu--active")},onClickOutside:function(e){this.hideContextMenu()},optionClicked:function(e){this.hideContextMenu(),this.$emit("optionClicked",{item:this.item,option:e})}}},s={install:i},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(s),e.install=i,e.default=o,e}({},Vue,vClickOutside);
+var VueSimpleContextMenu=function(e,t,i){"use strict";function n(e){n.installed||(n.installed=!0,e.component("VueSimpleContextMenu",o))}t=t&&t.hasOwnProperty("default")?t.default:t,i=i&&i.hasOwnProperty("default")?i.default:i,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),i='.vue-simple-context-menu[data-v-718435e8] { top: 0; left: 0; margin: 0; padding: 0; display: none; list-style: none; position: absolute; z-index: 1000000; background-color: #ECF0F1; border-bottom-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.2); border-radius: 4px; } .vue-simple-context-menu--active[data-v-718435e8] { display: block; } .vue-simple-context-menu__item[data-v-718435e8] { display: flex; color: #333; cursor: pointer; padding: 5px 15px; align-items: center; } .vue-simple-context-menu__item[data-v-718435e8]:hover { background-color: #3482B5; color: #fff; } .vue-simple-context-menu li[data-v-718435e8]:first-of-type { margin-top: 4px; } .vue-simple-context-menu li[data-v-718435e8]:last-of-type { margin-bottom: 4px; } ';t.type="text/css",t.styleSheet?t.styleSheet.cssText=i:t.appendChild(document.createTextNode(i)),e.appendChild(t)}}(),t.use(i);var o={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",[i("ul",{directives:[{name:"click-outside",rawName:"v-click-outside",value:e.onClickOutside,expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{id:e.id}},e._l(e.options,function(t){return i("li",{staticClass:"vue-simple-context-menu__item",on:{click:function(i){e.optionClicked(t)}}},[e._v(" "+e._s(t.name)+" ")])}))])},staticRenderFns:[],_scopeId:"data-v-718435e8",name:"VueSimpleContextMenu",props:{id:{type:String,required:!0},options:{type:Array,required:!0}},data:function(){return{item:null,menuWidth:null,menuHeight:null}},computed:{},methods:{showMenu:function(e,t){this.item=t;var i=document.getElementById(this.id);i&&(this.menuWidth&&this.menuHeight||(i.style.visibility="hidden",i.style.display="block",this.menuWidth=i.offsetWidth,this.menuHeight=i.offsetHeight,i.removeAttribute("style")),this.menuWidth+e.pageX>=window.innerWidth?i.style.left=e.pageX-this.menuWidth+2+"px":i.style.left=e.pageX-2+"px",this.menuHeight+e.pageY>=window.innerHeight?i.style.top=e.pageY-this.menuHeight+2+"px":i.style.top=e.pageY-2+"px",i.classList.add("vue-simple-context-menu--active"))},hideContextMenu:function(){document.getElementById(this.id).classList.remove("vue-simple-context-menu--active")},onClickOutside:function(e){this.hideContextMenu()},optionClicked:function(e){this.hideContextMenu(),this.$emit("optionClicked",{item:this.item,option:e})}}},s={install:n},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(s),e.install=n,e.default=o,e}({},Vue,vClickOutside);

dist/vue-simple-context-menu.umd.js

@@ -10,8 +10,12 @@ (function (global, factory) {
 
-    (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=".vue-simple-context-menu[data-v-718435e8] { top: 0; left: 0; margin: 0; padding: 0; display: none; list-style: none; position: absolute; z-index: 1000000; background-color: #ECF0F1; border: 1px solid #dde4e6; border-bottom-width: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif; } .vue-simple-context-menu--active[data-v-718435e8] { display: block; } .vue-simple-context-menu__item[data-v-718435e8] { display: flex; cursor: pointer; padding: 12px 22px; align-items: center; border-bottom: 1px solid #c0cdd1; transition: all 0.2s ease; } .vue-simple-context-menu__item[data-v-718435e8]:hover { background-color: #3482B5; color: #fff; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+    (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=".vue-simple-context-menu[data-v-718435e8] { top: 0; left: 0; margin: 0; padding: 0; display: none; list-style: none; position: absolute; z-index: 1000000; background-color: #ECF0F1; border-bottom-width: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif; box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.2); border-radius: 4px; } .vue-simple-context-menu--active[data-v-718435e8] { display: block; } .vue-simple-context-menu__item[data-v-718435e8] { display: flex; color: #333; cursor: pointer; padding: 5px 15px; align-items: center; } .vue-simple-context-menu__item[data-v-718435e8]:hover { background-color: #3482B5; color: #fff; } .vue-simple-context-menu li[data-v-718435e8]:first-of-type { margin-top: 4px; } .vue-simple-context-menu li[data-v-718435e8]:last-of-type { margin-bottom: 4px; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
     Vue.use(vClickOutside);
 
-    var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('ul',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.onClickOutside),expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{"id":"vue-simple-context-menu"}},_vm._l((_vm.options),function(option){return _c('li',{staticClass:"vue-simple-context-menu__item",on:{"click":function($event){_vm.optionClicked(option);}}},[_vm._v(" "+_vm._s(option.name)+" ")])}))])},staticRenderFns: [],_scopeId: 'data-v-718435e8',
+    var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('ul',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.onClickOutside),expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{"id":_vm.id}},_vm._l((_vm.options),function(option){return _c('li',{staticClass:"vue-simple-context-menu__item",on:{"click":function($event){_vm.optionClicked(option);}}},[_vm._v(" "+_vm._s(option.name)+" ")])}))])},staticRenderFns: [],_scopeId: 'data-v-718435e8',
         name: 'VueSimpleContextMenu',
         props: {
+            id: {
+                type: String,
+                required: true
+            },
             options: {
@@ -35,3 +39,3 @@ type: Array,
 
-                var menu = document.getElementById("vue-simple-context-menu");
+                var menu = document.getElementById(this.id);
                 if (!menu) {
@@ -50,11 +54,11 @@ return
                 if ((this.menuWidth + event.pageX) >= window.innerWidth) {
-                    menu.style.left = (event.pageX - this.menuWidth) + "px";
+                    menu.style.left = (event.pageX - this.menuWidth + 2) + "px";
                 } else {
-                    menu.style.left = event.pageX + "px";
+                    menu.style.left = (event.pageX - 2) + "px";
                 }
 
                 if ((this.menuHeight + event.pageY) >= window.innerHeight) {
-                    menu.style.top = (event.pageY - this.menuHeight) + "px";
+                    menu.style.top = (event.pageY - this.menuHeight + 2) + "px";
                 } else {
-                    menu.style.top = event.pageY + "px";
+                    menu.style.top = (event.pageY - 2) + "px";
                 }
@@ -65,3 +69,3 @@
             hideContextMenu: function hideContextMenu () {
-                document.getElementById("vue-simple-context-menu").classList.remove('vue-simple-context-menu--active');
+                document.getElementById(this.id).classList.remove('vue-simple-context-menu--active');
             },
@@ -68,0 +72,0 @@ onClickOutside: function onClickOutside (event) {

package.json

 {
   "name": "vue-simple-context-menu",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.",
@@ -5,0 +5,0 @@ "author": "John Datserakis <[e-mail]>",

README.md

@@ -19,3 +19,3 @@ # vue-simple-context-menu
 
-#yarn
+# yarn
 yarn add vue-simple-context-menu
@@ -30,4 +30,6 @@ ```
 
-Just a simple little menu to be shown where a click happens - closes after use automatically by clicking an option or outside of the menu.
+Just a simple little menu to be shown where a click happens - closes after use automatically by clicking an option or outside of the menu. Multiple menus are supported - just make sure to use a unique string as your `id` prop value.
 
+A nice feature that comes baked in is the menu placement after a click - it sits just ever so slightly under your click location - so that any hover style you had on the item that was clicked gets removed nicely. I modeled it after the macOS right click menu.
+
 ### Usage Example
@@ -40,7 +42,6 @@
 
-
 ```html
 <!-- This is a basic use case where you have an array of items that you want
 to allow to be clicked. In this case, `items` is an array of objects.
-Each item has a click event that ties to a function. See the demo for a full example. -->
+Each item has a click event that ties to a function. See the demo for a full example (with multiple menus as well). -->
 
@@ -57,4 +58,5 @@ <div class="item-wrapper">
 <vue-simple-context-menu
+    :id="'myUniqueId'"
     :options="options"
-    ref="vueSimpleContextMenu"
+    :ref="'vueSimpleContextMenu'"
     @optionClicked="optionClicked">
@@ -76,9 +78,11 @@ </vue-simple-context-menu>
 
-Note - make sure to use `@click.prevent.stop` or `@contextmenu.prevent.stop` for right click) when setting up the click handler.
+Note - make sure to use `@click.prevent.stop` (or `@contextmenu.prevent.stop` for right click) when setting up the click handler.
 
 ### Props
 
-| prop    | type  | description                    |
-|---------|-------|--------------------------------|
-| options | Array | Array of menu options to show. Component will use the `name` parameter as the label. |
+| prop    | type  | description | required |
+|---------|-------|--------------------------------|---|
+| id | String | Unique String that acts as the id of your menu. | Yes |
+| options | Array | Array of menu options to show. Component will use the `name` parameter as the label. | Yes |
+| ref | String | Unique String that allows you to show the menu on command. | Yes |
 
@@ -85,0 +89,0 @@ ### Methods

No alert changes

Improved metrics

Total package byte prevSize

1021513

increased by0.94%

Number of package files

19

increased by5.56%

Lines of code

806

increased by1.9%

Number of lines in readme file

142

increased by2.9%

No dependency changes