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

Comparing version 3.2.0 to 3.3.0

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

@@ -200,3 +200,8 @@ import Vue from 'vue';
             staticClass: "vue-simple-context-menu__item",
-            class: option.class,
+            class: [
+              option.class,
+              option.type === "divider"
+                ? "vue-simple-context-menu__divider"
+                : ""
+            ],
             on: {
@@ -203,0 +208,0 @@ click: function($event) {

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

@@ -1,1 +0,1 @@
-var VueSimpleContextMenu=function(e,n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t,i=(function(e,n){e.exports=function(){var e="undefined"!=typeof window,n="undefined"!=typeof navigator,t=e&&("ontouchstart"in window||n&&navigator.msMaxTouchPoints>0)?["touchstart","click"]:["click"],i=function(e){return e},o={instances:[]};function r(e){var n="function"==typeof e;if(!n&&"object"!=typeof e)throw new Error("v-click-outside: Binding value must be a function or an object");return{handler:n?e:e.handler,middleware:e.middleware||i,events:e.events||t,isActive:!(!1===e.isActive)}}function s(e){var n=e.el,t=e.event,i=e.handler,o=e.middleware;t.target!==n&&!n.contains(t.target)&&o(t,n)&&i(t,n)}function d(e){var n=e.el,t=e.handler,i=e.middleware;return{el:n,eventHandlers:e.events.map(function(e){return{event:e,handler:function(e){return s({event:e,el:n,handler:t,middleware:i})}}})}}function u(e){var n=o.instances.findIndex(function(n){return n.el===e});-1!==n&&(o.instances[n].eventHandlers.forEach(function(e){return document.removeEventListener(e.event,e.handler)}),o.instances.splice(n,1))}return o.bind=function(e,n){var t=r(n.value);if(t.isActive){var i=d({el:e,events:t.events,handler:t.handler,middleware:t.middleware});i.eventHandlers.forEach(function(e){var n=e.event,t=e.handler;return setTimeout(function(){return document.addEventListener(n,t)},0)}),o.instances.push(i)}},o.update=function(e,n){var t=n.value,i=n.oldValue;if(JSON.stringify(t)!==JSON.stringify(i)){var a=r(t),l=a.events,c=a.handler,f=a.middleware;if(a.isActive){var v=o.instances.find(function(n){return n.el===e});v?(v.eventHandlers.forEach(function(e){return document.removeEventListener(e.event,e.handler)}),v.eventHandlers=l.map(function(n){return{event:n,handler:function(n){return s({event:n,el:e,handler:c,middleware:f})}}})):(v=d({el:e,events:l,handler:c,middleware:f}),o.instances.push(v)),v.eventHandlers.forEach(function(e){var n=e.event,t=e.handler;return setTimeout(function(){return document.addEventListener(n,t)},0)})}else u(e)}},o.unbind=u,{install:function(e){e.directive("click-outside",o)},directive:o}}()}(t={exports:{}},t.exports),t.exports);n.use(i);var o=function(e,n,t,i,o,r,s,d,u,a){"boolean"!=typeof s&&(u=d,d=s,s=!1);var l,c="function"==typeof t?t.options:t;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),i&&(c._scopeId=i),r?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,u(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=l):n&&(l=s?function(){n.call(this,a(this.$root.$options.shadowRoot))}:function(e){n.call(this,d(e))}),l)if(c.functional){var f=c.render;c.render=function(e,n){return l.call(n),f(e,n)}}else{var v=c.beforeCreate;c.beforeCreate=v?[].concat(v,l):[l]}return t},r={name:"VueSimpleContextMenu",props:{elementId:{type:String,required:!0},options:{type:Array,required:!0}},data:function(){return{item:null,menuWidth:null,menuHeight:null}},methods:{showMenu:function(e,n){this.item=n;var t=document.getElementById(this.elementId);t&&(this.menuWidth&&this.menuHeight||(t.style.visibility="hidden",t.style.display="block",this.menuWidth=t.offsetWidth,this.menuHeight=t.offsetHeight,t.removeAttribute("style")),this.menuWidth+e.pageX>=window.innerWidth?t.style.left=e.pageX-this.menuWidth+2+"px":t.style.left=e.pageX-2+"px",this.menuHeight+e.pageY>=window.innerHeight?t.style.top=e.pageY-this.menuHeight+2+"px":t.style.top=e.pageY-2+"px",t.classList.add("vue-simple-context-menu--active"))},hideContextMenu:function(){var e=document.getElementById(this.elementId);e&&e.classList.remove("vue-simple-context-menu--active")},onClickOutside:function(){this.hideContextMenu()},optionClicked:function(e){this.hideContextMenu(),this.$emit("option-clicked",{item:this.item,option:e})},onEscKeyRelease:function(e){27===e.keyCode&&this.hideContextMenu()}},mounted:function(){document.body.addEventListener("keyup",this.onEscKeyRelease)},beforeDestroy:function(){document.removeEventListener("keyup",this.onEscKeyRelease)}},s=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("ul",{directives:[{name:"click-outside",rawName:"v-click-outside",value:e.onClickOutside,expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{id:e.elementId}},e._l(e.options,function(n,i){return t("li",{key:i,staticClass:"vue-simple-context-menu__item",class:n.class,on:{click:function(t){return t.stopPropagation(),e.optionClicked(n)}}},[e._v("\n      "+e._s(n.name)+"\n    ")])}),0)])};s._withStripped=!0;var d=o({render:s,staticRenderFns:[]},void 0,r,void 0,!1,void 0,void 0,void 0);function u(e){u.installed||(u.installed=!0,e.component("VueSimpleContextMenu",d))}var a={install:u},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(a),e.default=d,e.install=u,e}({},Vue);
+var VueSimpleContextMenu=function(e,n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t,i=(function(e,n){e.exports=function(){var e="undefined"!=typeof window,n="undefined"!=typeof navigator,t=e&&("ontouchstart"in window||n&&navigator.msMaxTouchPoints>0)?["touchstart","click"]:["click"],i=function(e){return e},o={instances:[]};function r(e){var n="function"==typeof e;if(!n&&"object"!=typeof e)throw new Error("v-click-outside: Binding value must be a function or an object");return{handler:n?e:e.handler,middleware:e.middleware||i,events:e.events||t,isActive:!(!1===e.isActive)}}function s(e){var n=e.el,t=e.event,i=e.handler,o=e.middleware;t.target!==n&&!n.contains(t.target)&&o(t,n)&&i(t,n)}function d(e){var n=e.el,t=e.handler,i=e.middleware;return{el:n,eventHandlers:e.events.map(function(e){return{event:e,handler:function(e){return s({event:e,el:n,handler:t,middleware:i})}}})}}function u(e){var n=o.instances.findIndex(function(n){return n.el===e});-1!==n&&(o.instances[n].eventHandlers.forEach(function(e){return document.removeEventListener(e.event,e.handler)}),o.instances.splice(n,1))}return o.bind=function(e,n){var t=r(n.value);if(t.isActive){var i=d({el:e,events:t.events,handler:t.handler,middleware:t.middleware});i.eventHandlers.forEach(function(e){var n=e.event,t=e.handler;return setTimeout(function(){return document.addEventListener(n,t)},0)}),o.instances.push(i)}},o.update=function(e,n){var t=n.value,i=n.oldValue;if(JSON.stringify(t)!==JSON.stringify(i)){var a=r(t),l=a.events,c=a.handler,f=a.middleware;if(a.isActive){var v=o.instances.find(function(n){return n.el===e});v?(v.eventHandlers.forEach(function(e){return document.removeEventListener(e.event,e.handler)}),v.eventHandlers=l.map(function(n){return{event:n,handler:function(n){return s({event:n,el:e,handler:c,middleware:f})}}})):(v=d({el:e,events:l,handler:c,middleware:f}),o.instances.push(v)),v.eventHandlers.forEach(function(e){var n=e.event,t=e.handler;return setTimeout(function(){return document.addEventListener(n,t)},0)})}else u(e)}},o.unbind=u,{install:function(e){e.directive("click-outside",o)},directive:o}}()}(t={exports:{}},t.exports),t.exports);n.use(i);var o=function(e,n,t,i,o,r,s,d,u,a){"boolean"!=typeof s&&(u=d,d=s,s=!1);var l,c="function"==typeof t?t.options:t;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),i&&(c._scopeId=i),r?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,u(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=l):n&&(l=s?function(){n.call(this,a(this.$root.$options.shadowRoot))}:function(e){n.call(this,d(e))}),l)if(c.functional){var f=c.render;c.render=function(e,n){return l.call(n),f(e,n)}}else{var v=c.beforeCreate;c.beforeCreate=v?[].concat(v,l):[l]}return t},r={name:"VueSimpleContextMenu",props:{elementId:{type:String,required:!0},options:{type:Array,required:!0}},data:function(){return{item:null,menuWidth:null,menuHeight:null}},methods:{showMenu:function(e,n){this.item=n;var t=document.getElementById(this.elementId);t&&(this.menuWidth&&this.menuHeight||(t.style.visibility="hidden",t.style.display="block",this.menuWidth=t.offsetWidth,this.menuHeight=t.offsetHeight,t.removeAttribute("style")),this.menuWidth+e.pageX>=window.innerWidth?t.style.left=e.pageX-this.menuWidth+2+"px":t.style.left=e.pageX-2+"px",this.menuHeight+e.pageY>=window.innerHeight?t.style.top=e.pageY-this.menuHeight+2+"px":t.style.top=e.pageY-2+"px",t.classList.add("vue-simple-context-menu--active"))},hideContextMenu:function(){var e=document.getElementById(this.elementId);e&&e.classList.remove("vue-simple-context-menu--active")},onClickOutside:function(){this.hideContextMenu()},optionClicked:function(e){this.hideContextMenu(),this.$emit("option-clicked",{item:this.item,option:e})},onEscKeyRelease:function(e){27===e.keyCode&&this.hideContextMenu()}},mounted:function(){document.body.addEventListener("keyup",this.onEscKeyRelease)},beforeDestroy:function(){document.removeEventListener("keyup",this.onEscKeyRelease)}},s=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("ul",{directives:[{name:"click-outside",rawName:"v-click-outside",value:e.onClickOutside,expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{id:e.elementId}},e._l(e.options,function(n,i){return t("li",{key:i,staticClass:"vue-simple-context-menu__item",class:[n.class,"divider"===n.type?"vue-simple-context-menu__divider":""],on:{click:function(t){return t.stopPropagation(),e.optionClicked(n)}}},[e._v("\n      "+e._s(n.name)+"\n    ")])}),0)])};s._withStripped=!0;var d=o({render:s,staticRenderFns:[]},void 0,r,void 0,!1,void 0,void 0,void 0);function u(e){u.installed||(u.installed=!0,e.component("VueSimpleContextMenu",d))}var a={install:u},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(a),e.default=d,e.install=u,e}({},Vue);

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

@@ -206,3 +206,8 @@ (function (global, factory) {
               staticClass: "vue-simple-context-menu__item",
-              class: option.class,
+              class: [
+                option.class,
+                option.type === "divider"
+                  ? "vue-simple-context-menu__divider"
+                  : ""
+              ],
               on: {
@@ -209,0 +214,0 @@ click: function($event) {

package.json

 {
   "name": "vue-simple-context-menu",
-  "version": "3.2.0",
+  "version": "3.3.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

@@ -98,7 +98,8 @@ # vue-simple-context-menu
 |---------|-------|--------------------------------|---|
-| elementId | 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 |
-| options.name | Array | Label for the option. | Yes |
-| options.class | String | A custom class that will be applied to the option. | No |
-| ref | String | Unique String that allows you to show the menu on command. | Yes |
+| elementId     | 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 |
+| options.name  | Array  | Label for the option.                                                                                                         | Yes |
+| options.class | String | A custom class that will be applied to the option.                                                                            | No |
+| options.type  | String | Only one possible value at the moment - `divider`. Pass this to set the object as a divider.                                  | No |
+| ref           | String | Unique String that allows you to show the menu on command.                                                                    | Yes |
 
@@ -119,3 +120,3 @@ ### Methods
 
-```sass
+```scss
 .vue-simple-context-menu {
@@ -129,2 +130,4 @@ &--active {
   }
+
+  &__divider {}
 }
@@ -131,0 +134,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

169117

increased by0.93%

Lines of code

856

increased by2.15%

Number of lines in readme file

168

increased by1.82%

No dependency changes