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

Comparing version 3.1.5 to 3.1.6

build/rollup.config.js

@@ -12,22 +12,22 @@ import vue from 'rollup-plugin-vue';
 const config = {
-    input: 'src/index.js',
-    output: {
-        name: 'VueSimpleContextMenu',
-        exports: 'named',
-        globals: {
-            'vue': 'Vue',
-            'v-click-outside': 'vClickOutside'
-        }
-    },
-    plugins: [
-        commonjs(),
-        resolve(),
-        vue({
-            css: false,
-            compileTemplate: true,
-        }),
-        css({ output: 'dist/vue-simple-context-menu.css' }),
-        buble(),
-    ],
-    external: ['vue', 'v-click-outside']
+  input: 'src/index.js',
+  output: {
+    name: 'VueSimpleContextMenu',
+    exports: 'named',
+    globals: {
+      'vue': 'Vue',
+      'v-click-outside': 'vClickOutside'
+    }
+  },
+  plugins: [
+    commonjs(),
+    resolve(),
+    vue({
+      css: false,
+      compileTemplate: true,
+    }),
+    css({ output: 'dist/vue-simple-context-menu.css' }),
+    buble(),
+  ],
+  external: ['vue', 'v-click-outside']
 };
@@ -37,10 +37,10 @@
 if (argv.format === 'iife') {
-    config.plugins.push(terser());
+  config.plugins.push(terser());
 
-    // Here we remove our `external` dependency that we have in this project
-    // Be careful with the index here - it has to match any dependency that
-    // you want to be built into to the iife output
-    config.external.splice(1)
+  // Here we remove our `external` dependency that we have in this project
+  // Be careful with the index here - it has to match any dependency that
+  // you want to be built into to the iife output
+  config.external.splice(1)
 }
 
 export default config;

CHANGELOG.md

 # CHANGELOG.md
 
+## 3.1.6
+- Adding the option to add a custom class to each option object. Thanks for the suggestion @geri777.
+
 ## 3.1.3
@@ -25,2 +28,2 @@ - Fixing emitting to use kebab-case
 - Adds support for multiple context menus. Make sure to use the newly required prop `id`, which needs a unique string.
-- Updated styling to be more modern and streamlined.
+- Updated styling to be more modern and streamlined.

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

@@ -8,68 +8,68 @@ import Vue from 'vue';
 var script = {
-    name: 'VueSimpleContextMenu',
-    props: {
-        elementId: {
-            type: String,
-            required: true
-        },
-        options: {
-            type: Array,
-            required: true
-        }
+  name: 'VueSimpleContextMenu',
+  props: {
+    elementId: {
+      type: String,
+      required: true
     },
-    data: function data () {
-        return {
-            item: null,
-            menuWidth: null,
-            menuHeight: null
-        }
-    },
-    methods: {
-        showMenu: function showMenu (event, item) {
-            this.item = item;
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  data: function data () {
+    return {
+      item: null,
+      menuWidth: null,
+      menuHeight: null
+    }
+  },
+  methods: {
+    showMenu: function showMenu (event, item) {
+      this.item = item;
 
-            var menu = document.getElementById(this.elementId);
-            if (!menu) {
-                return
-            }
+      var menu = document.getElementById(this.elementId);
+      if (!menu) {
+        return
+      }
 
-            if (!this.menuWidth || !this.menuHeight) {
-                menu.style.visibility = "hidden";
-                menu.style.display = "block";
-                this.menuWidth = menu.offsetWidth;
-                this.menuHeight = menu.offsetHeight;
-                menu.removeAttribute("style");
-            }
+      if (!this.menuWidth || !this.menuHeight) {
+        menu.style.visibility = "hidden";
+        menu.style.display = "block";
+        this.menuWidth = menu.offsetWidth;
+        this.menuHeight = menu.offsetHeight;
+        menu.removeAttribute("style");
+      }
 
-            if ((this.menuWidth + event.pageX) >= window.innerWidth) {
-                menu.style.left = (event.pageX - this.menuWidth + 2) + "px";
-            } else {
-                menu.style.left = (event.pageX - 2) + "px";
-            }
+      if ((this.menuWidth + event.pageX) >= window.innerWidth) {
+        menu.style.left = (event.pageX - this.menuWidth + 2) + "px";
+      } else {
+        menu.style.left = (event.pageX - 2) + "px";
+      }
 
-            if ((this.menuHeight + event.pageY) >= window.innerHeight) {
-                menu.style.top = (event.pageY - this.menuHeight + 2) + "px";
-            } else {
-                menu.style.top = (event.pageY - 2) + "px";
-            }
+      if ((this.menuHeight + event.pageY) >= window.innerHeight) {
+        menu.style.top = (event.pageY - this.menuHeight + 2) + "px";
+      } else {
+        menu.style.top = (event.pageY - 2) + "px";
+      }
 
-            menu.classList.add('vue-simple-context-menu--active');
-        },
-        hideContextMenu: function hideContextMenu () {
-            var element = document.getElementById(this.elementId);
-            if (element) {
-                element.classList.remove('vue-simple-context-menu--active');
-            }
-        },
-        onClickOutside: function onClickOutside () {
-            this.hideContextMenu();
-        },
-        optionClicked: function optionClicked (option) {
-            this.hideContextMenu();
-            this.$emit('option-clicked', {
-                item: this.item,
-                option: option
-            });
-        }
+      menu.classList.add('vue-simple-context-menu--active');
+    },
+    hideContextMenu: function hideContextMenu () {
+      var element = document.getElementById(this.elementId);
+      if (element) {
+        element.classList.remove('vue-simple-context-menu--active');
+      }
+    },
+    onClickOutside: function onClickOutside () {
+      this.hideContextMenu();
+    },
+    optionClicked: function optionClicked (option) {
+      this.hideContextMenu();
+      this.$emit('option-clicked', {
+        item: this.item,
+        option: option
+      });
     }
+  }
 };
@@ -190,2 +190,3 @@
             staticClass: "vue-simple-context-menu__item",
+            class: option.class,
             on: {
@@ -197,3 +198,3 @@ click: function($event) {
           },
-          [_vm._v("\n            " + _vm._s(option.name) + "\n        ")]
+          [_vm._v("\n      " + _vm._s(option.name) + "\n    ")]
         )
@@ -236,6 +237,6 @@ }),
 // install function executed by Vue.use()
-function install(Vue) {
-    if (install.installed) { return; }
-    install.installed = true;
-    Vue.component('VueSimpleContextMenu', component);
+function install (Vue) {
+  if (install.installed) { return; }
+  install.installed = true;
+  Vue.component('VueSimpleContextMenu', component);
 }
@@ -245,3 +246,3 @@
 var plugin = {
-    install: install,
+  install: install,
 };
@@ -252,8 +253,8 @@
 if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
+  GlobalVue = window.Vue;
 } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue;
+  GlobalVue = global.Vue;
 }
 if (GlobalVue) {
-    GlobalVue.use(plugin);
+  GlobalVue.use(plugin);
 }
@@ -260,0 +261,0 @@

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},r={instances:[]};function o(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,r=e.middleware;t.target!==n&&!n.contains(t.target)&&r(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 a(e){var n=r.instances.findIndex(function(n){return n.el===e});-1!==n&&(r.instances[n].eventHandlers.forEach(function(e){return document.removeEventListener(e.event,e.handler)}),r.instances.splice(n,1))}return r.bind=function(e,n){var t=o(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)}),r.instances.push(i)}},r.update=function(e,n){var t=n.value,i=n.oldValue;if(JSON.stringify(t)!==JSON.stringify(i)){var u=o(t),l=u.events,c=u.handler,f=u.middleware;if(u.isActive){var v=r.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}),r.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 a(e)}},r.unbind=a,{install:function(e){e.directive("click-outside",r)},directive:r}}()}(t={exports:{}},t.exports),t.exports);n.use(i);var r=function(e,n,t,i,r,o,s,d,a,u){"boolean"!=typeof s&&(a=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,r&&(c.functional=!0)),i&&(c._scopeId=i),o?(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,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=l):n&&(l=s?function(){n.call(this,u(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},o={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})}}},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",on:{click:function(t){return e.optionClicked(n)}}},[e._v("\n            "+e._s(n.name)+"\n        ")])}),0)])};s._withStripped=!0;var d=r({render:s,staticRenderFns:[]},void 0,o,void 0,!1,void 0,void 0,void 0);function a(e){a.installed||(a.installed=!0,e.component("VueSimpleContextMenu",d))}var u={install:a},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(u),e.default=d,e.install=a,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},r={instances:[]};function o(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,r=e.middleware;t.target!==n&&!n.contains(t.target)&&r(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 a(e){var n=r.instances.findIndex(function(n){return n.el===e});-1!==n&&(r.instances[n].eventHandlers.forEach(function(e){return document.removeEventListener(e.event,e.handler)}),r.instances.splice(n,1))}return r.bind=function(e,n){var t=o(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)}),r.instances.push(i)}},r.update=function(e,n){var t=n.value,i=n.oldValue;if(JSON.stringify(t)!==JSON.stringify(i)){var u=o(t),l=u.events,c=u.handler,f=u.middleware;if(u.isActive){var v=r.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}),r.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 a(e)}},r.unbind=a,{install:function(e){e.directive("click-outside",r)},directive:r}}()}(t={exports:{}},t.exports),t.exports);n.use(i);var r=function(e,n,t,i,r,o,s,d,a,u){"boolean"!=typeof s&&(a=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,r&&(c.functional=!0)),i&&(c._scopeId=i),o?(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,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=l):n&&(l=s?function(){n.call(this,u(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},o={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})}}},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 e.optionClicked(n)}}},[e._v("\n      "+e._s(n.name)+"\n    ")])}),0)])};s._withStripped=!0;var d=r({render:s,staticRenderFns:[]},void 0,o,void 0,!1,void 0,void 0,void 0);function a(e){a.installed||(a.installed=!0,e.component("VueSimpleContextMenu",d))}var u={install:a},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(u),e.default=d,e.install=a,e}({},Vue);

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

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('v-click-outside')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'vue', 'v-click-outside'], factory) :
-    (global = global || self, factory(global.VueSimpleContextMenu = {}, global.Vue, global.vClickOutside));
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('v-click-outside')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'v-click-outside'], factory) :
+  (global = global || self, factory(global.VueSimpleContextMenu = {}, global.Vue, global.vClickOutside));
 }(this, function (exports, Vue, vClickOutside) { 'use strict';
 
-    Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
-    vClickOutside = vClickOutside && vClickOutside.hasOwnProperty('default') ? vClickOutside['default'] : vClickOutside;
+  Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
+  vClickOutside = vClickOutside && vClickOutside.hasOwnProperty('default') ? vClickOutside['default'] : vClickOutside;
 
-    //
-    Vue.use(vClickOutside);
+  //
+  Vue.use(vClickOutside);
 
-    var script = {
-        name: 'VueSimpleContextMenu',
-        props: {
-            elementId: {
-                type: String,
-                required: true
-            },
-            options: {
-                type: Array,
-                required: true
-            }
-        },
-        data: function data () {
-            return {
-                item: null,
-                menuWidth: null,
-                menuHeight: null
-            }
-        },
-        methods: {
-            showMenu: function showMenu (event, item) {
-                this.item = item;
+  var script = {
+    name: 'VueSimpleContextMenu',
+    props: {
+      elementId: {
+        type: String,
+        required: true
+      },
+      options: {
+        type: Array,
+        required: true
+      }
+    },
+    data: function data () {
+      return {
+        item: null,
+        menuWidth: null,
+        menuHeight: null
+      }
+    },
+    methods: {
+      showMenu: function showMenu (event, item) {
+        this.item = item;
 
-                var menu = document.getElementById(this.elementId);
-                if (!menu) {
-                    return
-                }
+        var menu = document.getElementById(this.elementId);
+        if (!menu) {
+          return
+        }
 
-                if (!this.menuWidth || !this.menuHeight) {
-                    menu.style.visibility = "hidden";
-                    menu.style.display = "block";
-                    this.menuWidth = menu.offsetWidth;
-                    this.menuHeight = menu.offsetHeight;
-                    menu.removeAttribute("style");
-                }
+        if (!this.menuWidth || !this.menuHeight) {
+          menu.style.visibility = "hidden";
+          menu.style.display = "block";
+          this.menuWidth = menu.offsetWidth;
+          this.menuHeight = menu.offsetHeight;
+          menu.removeAttribute("style");
+        }
 
-                if ((this.menuWidth + event.pageX) >= window.innerWidth) {
-                    menu.style.left = (event.pageX - this.menuWidth + 2) + "px";
-                } else {
-                    menu.style.left = (event.pageX - 2) + "px";
-                }
+        if ((this.menuWidth + event.pageX) >= window.innerWidth) {
+          menu.style.left = (event.pageX - this.menuWidth + 2) + "px";
+        } else {
+          menu.style.left = (event.pageX - 2) + "px";
+        }
 
-                if ((this.menuHeight + event.pageY) >= window.innerHeight) {
-                    menu.style.top = (event.pageY - this.menuHeight + 2) + "px";
-                } else {
-                    menu.style.top = (event.pageY - 2) + "px";
-                }
+        if ((this.menuHeight + event.pageY) >= window.innerHeight) {
+          menu.style.top = (event.pageY - this.menuHeight + 2) + "px";
+        } else {
+          menu.style.top = (event.pageY - 2) + "px";
+        }
 
-                menu.classList.add('vue-simple-context-menu--active');
-            },
-            hideContextMenu: function hideContextMenu () {
-                var element = document.getElementById(this.elementId);
-                if (element) {
-                    element.classList.remove('vue-simple-context-menu--active');
-                }
-            },
-            onClickOutside: function onClickOutside () {
-                this.hideContextMenu();
-            },
-            optionClicked: function optionClicked (option) {
-                this.hideContextMenu();
-                this.$emit('option-clicked', {
-                    item: this.item,
-                    option: option
-                });
-            }
+        menu.classList.add('vue-simple-context-menu--active');
+      },
+      hideContextMenu: function hideContextMenu () {
+        var element = document.getElementById(this.elementId);
+        if (element) {
+          element.classList.remove('vue-simple-context-menu--active');
         }
-    };
+      },
+      onClickOutside: function onClickOutside () {
+        this.hideContextMenu();
+      },
+      optionClicked: function optionClicked (option) {
+        this.hideContextMenu();
+        this.$emit('option-clicked', {
+          item: this.item,
+          option: option
+        });
+      }
+    }
+  };
 
-    function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
-    /* server only */
-    , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-      if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-      } // Vue.extend constructor export interop.
+  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+  /* server only */
+  , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+      createInjectorSSR = createInjector;
+      createInjector = shadowMode;
+      shadowMode = false;
+    } // Vue.extend constructor export interop.
 
 
-      var options = typeof script === 'function' ? script.options : script; // render functions
+    var options = typeof script === 'function' ? script.options : script; // render functions
 
-      if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true; // functional template
+    if (template && template.render) {
+      options.render = template.render;
+      options.staticRenderFns = template.staticRenderFns;
+      options._compiled = true; // functional template
 
-        if (isFunctionalTemplate) {
-          options.functional = true;
-        }
-      } // scopedId
+      if (isFunctionalTemplate) {
+        options.functional = true;
+      }
+    } // scopedId
 
 
-      if (scopeId) {
-        options._scopeId = scopeId;
-      }
+    if (scopeId) {
+      options._scopeId = scopeId;
+    }
 
-      var hook;
+    var hook;
 
-      if (moduleIdentifier) {
-        // server build
-        hook = function hook(context) {
-          // 2.3 injection
-          context = context || // cached call
-          this.$vnode && this.$vnode.ssrContext || // stateful
-          this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
-          // 2.2 with runInNewContext: true
+    if (moduleIdentifier) {
+      // server build
+      hook = function hook(context) {
+        // 2.3 injection
+        context = context || // cached call
+        this.$vnode && this.$vnode.ssrContext || // stateful
+        this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+        // 2.2 with runInNewContext: true
 
-          if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-            context = __VUE_SSR_CONTEXT__;
-          } // inject component styles
+        if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+          context = __VUE_SSR_CONTEXT__;
+        } // inject component styles
 
 
-          if (style) {
-            style.call(this, createInjectorSSR(context));
-          } // register component module identifier for async chunk inference
+        if (style) {
+          style.call(this, createInjectorSSR(context));
+        } // register component module identifier for async chunk inference
 
 
-          if (context && context._registeredComponents) {
-            context._registeredComponents.add(moduleIdentifier);
-          }
-        }; // used by ssr in case component is cached and beforeCreate
-        // never gets called
+        if (context && context._registeredComponents) {
+          context._registeredComponents.add(moduleIdentifier);
+        }
+      }; // used by ssr in case component is cached and beforeCreate
+      // never gets called
 
 
-        options._ssrRegister = hook;
-      } else if (style) {
-        hook = shadowMode ? function () {
-          style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
-        } : function (context) {
-          style.call(this, createInjector(context));
-        };
-      }
+      options._ssrRegister = hook;
+    } else if (style) {
+      hook = shadowMode ? function () {
+        style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+      } : function (context) {
+        style.call(this, createInjector(context));
+      };
+    }
 
-      if (hook) {
-        if (options.functional) {
-          // register for functional component in vue file
-          var originalRender = options.render;
+    if (hook) {
+      if (options.functional) {
+        // register for functional component in vue file
+        var originalRender = options.render;
 
-          options.render = function renderWithStyleInjection(h, context) {
-            hook.call(context);
-            return originalRender(h, context);
-          };
-        } else {
-          // inject component registration as beforeCreate hook
-          var existing = options.beforeCreate;
-          options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
+        options.render = function renderWithStyleInjection(h, context) {
+          hook.call(context);
+          return originalRender(h, context);
+        };
+      } else {
+        // inject component registration as beforeCreate hook
+        var existing = options.beforeCreate;
+        options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
       }
-
-      return script;
     }
 
-    var normalizeComponent_1 = normalizeComponent;
+    return script;
+  }
 
-    /* script */
-    var __vue_script__ = script;
-    /* template */
-    var __vue_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"
+  var normalizeComponent_1 = normalizeComponent;
+
+  /* script */
+  var __vue_script__ = script;
+  /* template */
+  var __vue_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.elementId }
+        },
+        _vm._l(_vm.options, function(option, index) {
+          return _c(
+            "li",
+            {
+              key: index,
+              staticClass: "vue-simple-context-menu__item",
+              class: option.class,
+              on: {
+                click: function($event) {
+                  return _vm.optionClicked(option)
+                }
               }
-            ],
-            staticClass: "vue-simple-context-menu",
-            attrs: { id: _vm.elementId }
-          },
-          _vm._l(_vm.options, function(option, index) {
-            return _c(
-              "li",
-              {
-                key: index,
-                staticClass: "vue-simple-context-menu__item",
-                on: {
-                  click: function($event) {
-                    return _vm.optionClicked(option)
-                  }
-                }
-              },
-              [_vm._v("\n            " + _vm._s(option.name) + "\n        ")]
-            )
-          }),
-          0
-        )
-      ])
-    };
-    var __vue_staticRenderFns__ = [];
-    __vue_render__._withStripped = true;
+            },
+            [_vm._v("\n      " + _vm._s(option.name) + "\n    ")]
+          )
+        }),
+        0
+      )
+    ])
+  };
+  var __vue_staticRenderFns__ = [];
+  __vue_render__._withStripped = true;
 
-      /* style */
-      var __vue_inject_styles__ = undefined;
-      /* scoped */
-      var __vue_scope_id__ = undefined;
-      /* module identifier */
-      var __vue_module_identifier__ = undefined;
-      /* functional template */
-      var __vue_is_functional_template__ = false;
-      /* style inject */
-      
-      /* style inject SSR */
-      
+    /* style */
+    var __vue_inject_styles__ = undefined;
+    /* scoped */
+    var __vue_scope_id__ = undefined;
+    /* module identifier */
+    var __vue_module_identifier__ = undefined;
+    /* functional template */
+    var __vue_is_functional_template__ = false;
+    /* style inject */
+    
+    /* style inject SSR */
+    
 
-      
-      var component = normalizeComponent_1(
-        { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-        __vue_inject_styles__,
-        __vue_script__,
-        __vue_scope_id__,
-        __vue_is_functional_template__,
-        __vue_module_identifier__,
-        undefined,
-        undefined
-      );
+    
+    var component = normalizeComponent_1(
+      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+      __vue_inject_styles__,
+      __vue_script__,
+      __vue_scope_id__,
+      __vue_is_functional_template__,
+      __vue_module_identifier__,
+      undefined,
+      undefined
+    );
 
-    // Import vue component
+  // Import vue component
 
-    // install function executed by Vue.use()
-    function install(Vue) {
-        if (install.installed) { return; }
-        install.installed = true;
-        Vue.component('VueSimpleContextMenu', component);
-    }
+  // install function executed by Vue.use()
+  function install (Vue) {
+    if (install.installed) { return; }
+    install.installed = true;
+    Vue.component('VueSimpleContextMenu', component);
+  }
 
-    // Create module definition for Vue.use()
-    var plugin = {
-        install: install,
-    };
+  // Create module definition for Vue.use()
+  var plugin = {
+    install: install,
+  };
 
-    // To auto-install when vue is found
-    var GlobalVue = null;
-    if (typeof window !== 'undefined') {
-        GlobalVue = window.Vue;
-    } else if (typeof global !== 'undefined') {
-        GlobalVue = global.Vue;
-    }
-    if (GlobalVue) {
-        GlobalVue.use(plugin);
-    }
+  // To auto-install when vue is found
+  var GlobalVue = null;
+  if (typeof window !== 'undefined') {
+    GlobalVue = window.Vue;
+  } else if (typeof global !== 'undefined') {
+    GlobalVue = global.Vue;
+  }
+  if (GlobalVue) {
+    GlobalVue.use(plugin);
+  }
 
-    // It's possible to expose named exports when writing components that can
-    // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
-    // export const RollupDemoDirective = component;
+  // It's possible to expose named exports when writing components that can
+  // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
+  // export const RollupDemoDirective = component;
 
-    exports.default = component;
-    exports.install = install;
+  exports.default = component;
+  exports.install = install;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
+  Object.defineProperty(exports, '__esModule', { value: true });
 
 }));

package.json

 {
   "name": "vue-simple-context-menu",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "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

@@ -64,5 +64,5 @@ # vue-simple-context-menu
 <div class="item-wrapper">
-    <div v-for="item in items" @click.prevent.stop="handleClick($event, item)" class="item-wrapper__item">
-        {{item.name}}
-    </div>
+  <div v-for="item in items" @click.prevent.stop="handleClick($event, item)" class="item-wrapper__item">
+    {{item.name}}
+  </div>
 </div>
@@ -74,11 +74,11 @@
 <vue-simple-context-menu
-    :elementId="'myUniqueId'"
-    :options="options"
-    :ref="'vueSimpleContextMenu'"
-    @option-clicked="optionClicked">
-</vue-simple-context-menu>
+  :elementId="'myUniqueId'"
+  :options="options"
+  :ref="'vueSimpleContextMenu'"
+  @option-clicked="optionClicked"
+/>
 
 <!-- The click-handler function -->
 handleClick (event, item) {
-    this.$refs.vueSimpleContextMenu.showMenu(event, item)
+  this.$refs.vueSimpleContextMenu.showMenu(event, item)
 }
@@ -88,3 +88,3 @@
 optionClicked (event) {
-    window.alert(JSON.stringify(event))
+  window.alert(JSON.stringify(event))
 }
@@ -103,2 +103,4 @@ ```
 | 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.customClass | 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 |
@@ -122,9 +124,9 @@
 .vue-simple-context-menu {
-    &--active {
-    }
+  &--active {
+  }
 
-    &__item {
-        &:hover {
-        }
+  &__item {
+    &:hover {
     }
+  }
 }
@@ -167,2 +169,2 @@ ```
 
-Packaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup).
+Packaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup).

src/index.js

@@ -5,6 +5,6 @@ // Import vue component
 // install function executed by Vue.use()
-export function install(Vue) {
-    if (install.installed) return;
-    install.installed = true;
-    Vue.component('VueSimpleContextMenu', component);
+export function install (Vue) {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.component('VueSimpleContextMenu', component);
 }
@@ -14,3 +14,3 @@
 const plugin = {
-    install,
+  install,
 };
@@ -21,8 +21,8 @@
 if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
+  GlobalVue = window.Vue;
 } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue;
+  GlobalVue = global.Vue;
 }
 if (GlobalVue) {
-    GlobalVue.use(plugin);
+  GlobalVue.use(plugin);
 }
@@ -29,0 +29,0 @@

test/VueSimpleContextMenu.spec.js

@@ -5,114 +5,114 @@ import { shallowMount } from '@vue/test-utils'
 describe('VueSimpleContextMenu.vue', () => {
-    it('Sets props correctly', async () => {
-        let initialPropsData = {
-            elementId: 'myPanel1',
-            options: [
-                {
-                    name: 'Duplicate',
-                    slug: 'duplicate'
-                },
-                {
-                    name: 'Edit',
-                    slug: 'edit'
-                },
-                {
-                    name: 'Delete',
-                    slug: 'delete'
-                }
-            ]
+  it('Sets props correctly', async () => {
+    let initialPropsData = {
+      elementId: 'myPanel1',
+      options: [
+        {
+          name: 'Duplicate',
+          slug: 'duplicate'
+        },
+        {
+          name: 'Edit',
+          slug: 'edit'
+        },
+        {
+          name: 'Delete',
+          slug: 'delete'
         }
+      ]
+    }
 
-        const wrapper = shallowMount(VueSimpleContextMenu, {
-            propsData: {
-                elementId: initialPropsData.elementId,
-                options: initialPropsData.options
-            }
-        })
-
-        expect(wrapper.vm.elementId).toBe(initialPropsData.elementId)
-        expect(wrapper.vm.options).toBe(initialPropsData.options)
+    const wrapper = shallowMount(VueSimpleContextMenu, {
+      propsData: {
+        elementId: initialPropsData.elementId,
+        options: initialPropsData.options
+      }
     })
 
-    it('Shows menu on click', async () => {
-        let initialPropsData = {
-            elementId: 'myPanel1',
-            options: [
-                {
-                    name: 'Duplicate',
-                    slug: 'duplicate'
-                },
-                {
-                    name: 'Edit',
-                    slug: 'edit'
-                },
-                {
-                    name: 'Delete',
-                    slug: 'delete'
-                }
-            ]
+    expect(wrapper.vm.elementId).toBe(initialPropsData.elementId)
+    expect(wrapper.vm.options).toBe(initialPropsData.options)
+  })
+
+  it('Shows menu on click', async () => {
+    let initialPropsData = {
+      elementId: 'myPanel1',
+      options: [
+        {
+          name: 'Duplicate',
+          slug: 'duplicate'
+        },
+        {
+          name: 'Edit',
+          slug: 'edit'
+        },
+        {
+          name: 'Delete',
+          slug: 'delete'
         }
+      ]
+    }
 
-        const wrapper = shallowMount(VueSimpleContextMenu, {
-            propsData: {
-                elementId: initialPropsData.elementId,
-                options: initialPropsData.options
-            }
-        })
+    const wrapper = shallowMount(VueSimpleContextMenu, {
+      propsData: {
+        elementId: initialPropsData.elementId,
+        options: initialPropsData.options
+      }
+    })
 
-        // Make some test data
-        var testEvent = new Event("click", {"bubbles":true, "cancelable":false});
-        let testItem = { name: 'Jim', job: 'Salesman' }
+    // Make some test data
+    var testEvent = new Event("click", { "bubbles": true, "cancelable": false });
+    let testItem = { name: 'Jim', job: 'Salesman' }
 
-        // Trigger the showing of the menu
-        wrapper.vm.showMenu(testEvent, testItem)
+    // Trigger the showing of the menu
+    wrapper.vm.showMenu(testEvent, testItem)
 
-        // Menu show be showing our selected item
-        expect(wrapper.vm.item.name).toBe('Jim')
-        expect(wrapper.vm.item.name).toBe('Jim')
-    })
+    // Menu show be showing our selected item
+    expect(wrapper.vm.item.name).toBe('Jim')
+    expect(wrapper.vm.item.name).toBe('Jim')
+  })
 
-    it('Emits event on menu item selection', async () => {
-        let initialPropsData = {
-            elementId: 'myPanel1',
-            options: [
-                {
-                    name: 'Duplicate',
-                    slug: 'duplicate'
-                },
-                {
-                    name: 'Edit',
-                    slug: 'edit'
-                },
-                {
-                    name: 'Delete',
-                    slug: 'delete'
-                }
-            ]
+  it('Emits event on menu item selection', async () => {
+    let initialPropsData = {
+      elementId: 'myPanel1',
+      options: [
+        {
+          name: 'Duplicate',
+          slug: 'duplicate'
+        },
+        {
+          name: 'Edit',
+          slug: 'edit'
+        },
+        {
+          name: 'Delete',
+          slug: 'delete'
         }
+      ]
+    }
 
-        const wrapper = shallowMount(VueSimpleContextMenu, {
-            propsData: {
-                elementId: initialPropsData.elementId,
-                options: initialPropsData.options
-            }
-        })
+    const wrapper = shallowMount(VueSimpleContextMenu, {
+      propsData: {
+        elementId: initialPropsData.elementId,
+        options: initialPropsData.options
+      }
+    })
 
-        // Make some test data
-        var testEvent = new Event("click", {"bubbles":true, "cancelable":false});
-        let testItem = { name: 'Jim', job: 'Salesman' }
+    // Make some test data
+    var testEvent = new Event("click", { "bubbles": true, "cancelable": false });
+    let testItem = { name: 'Jim', job: 'Salesman' }
 
-        // Trigger the showing of the menu
-        wrapper.vm.showMenu(testEvent, testItem)
+    // Trigger the showing of the menu
+    wrapper.vm.showMenu(testEvent, testItem)
 
-        // Menu show be showing our selected item
-        expect(wrapper.vm.item.name).toBe('Jim')
-        expect(wrapper.vm.item.job).toBe('Salesman')
+    // Menu show be showing our selected item
+    expect(wrapper.vm.item.name).toBe('Jim')
+    expect(wrapper.vm.item.job).toBe('Salesman')
 
-        // Manually click an item on the menu
-        // Here we know the options because we set them earlier
-        wrapper.vm.optionClicked(initialPropsData[0])
+    // Manually click an item on the menu
+    // Here we know the options because we set them earlier
+    wrapper.vm.optionClicked(initialPropsData[0])
 
-        // Check the event was emitted properly
-        expect(wrapper.emitted('option-clicked')).toBeTruthy()
-    })
-})
+    // Check the event was emitted properly
+    expect(wrapper.emitted('option-clicked')).toBeTruthy()
+  })
+})

No alert changes

Improved metrics

Lines of code

813

increased by0.37%

Number of lines in readme file

165

increased by1.85%

Worsened metrics

Total package byte prevSize

165879

decreased by-1.87%

No dependency changes