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

Comparing version 2.0.1 to 3.0.0

build/rollup.config.js

 // rollup.config.js
 import vue from 'rollup-plugin-vue';
+import css from 'rollup-plugin-css-only'
 import buble from 'rollup-plugin-buble';
@@ -21,5 +22,6 @@ import uglify from 'rollup-plugin-uglify-es';
         vue({
-            css: true,
+            css: false,
             compileTemplate: true,
         }),
+        css({ output: 'dist/vue-simple-context-menu.css' }),
         buble(),
@@ -26,0 +28,0 @@ ],

CHANGELOG.md

 # CHANGELOG.md
 
+## 3.0.0 (2018-11-03)
+
+Features:
+
+- New build method that separates the js and css from the component. Component's js and css now need to be included separately.
+- Adjusted blue color in menu
+- Added tests
+
 ## 2.0.0 (2018-08-31)
@@ -4,0 +12,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-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":_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',
+var script = {
     name: 'VueSimpleContextMenu',
     props: {
-        id: {
+        elementId: {
             type: String,
@@ -26,4 +26,2 @@ required: true
     },
-    computed: {
-    },
     methods: {
@@ -33,3 +31,3 @@ showMenu: function showMenu (event, item) {
 
-            var menu = document.getElementById(this.id);
+            var menu = document.getElementById(this.elementId);
             if (!menu) {
@@ -39,3 +37,3 @@ return
 
-            if(!this.menuWidth || !this.menuHeight) {
+            if (!this.menuWidth || !this.menuHeight) {
                 menu.style.visibility = "hidden";
@@ -63,3 +61,3 @@ menu.style.display = "block";
         hideContextMenu: function hideContextMenu () {
-            var element = document.getElementById(this.id);
+            var element = document.getElementById(this.elementId);
             if (element) {
@@ -82,2 +80,94 @@ element.classList.remove('vue-simple-context-menu--active');
 
+/* 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) {
+        return _c(
+          "li",
+          {
+            staticClass: "vue-simple-context-menu__item",
+            on: {
+              click: function($event) {
+                _vm.optionClicked(option);
+              }
+            }
+          },
+          [_vm._v("\n            " + _vm._s(option.name) + "\n        ")]
+        )
+      })
+    )
+  ])
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = "data-v-65f428bc";
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* component normalizer */
+  function __vue_normalize__(
+    template, style, script$$1,
+    scope, functional, moduleIdentifier,
+    createInjector, createInjectorSSR
+  ) {
+    var component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};
+
+    // For security concerns, we use only base name in production mode.
+    component.__file = "/Users/johndatserakis/Documents/Code/vue-simple-context-menu/src/vue-simple-context-menu.vue";
+
+    if (!component.render) {
+      component.render = template.render;
+      component.staticRenderFns = template.staticRenderFns;
+      component._compiled = true;
+
+      if (functional) { component.functional = true; }
+    }
+
+    component._scopeId = scope;
+
+    
+
+    return component
+  }
+  /* style inject */
+  
+  /* style inject SSR */
+  
+
+  
+  var component = __vue_normalize__(
+    { 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
@@ -84,0 +174,0 @@

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

@@ -1,1 +0,1 @@
-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(){var e=document.getElementById(this.id);e&&e.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);
+var VueSimpleContextMenu=function(e,t,i){"use strict";function n(e){n.installed||(n.installed=!0,e.component("VueSimpleContextMenu",l))}t=t&&t.hasOwnProperty("default")?t.default:t,i=i&&i.hasOwnProperty("default")?i.default:i,t.use(i);var s={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,t){this.item=t;var i=document.getElementById(this.elementId);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(){var e=document.getElementById(this.elementId);e&&e.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})}}},u=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.elementId}},e._l(e.options,function(t){return i("li",{staticClass:"vue-simple-context-menu__item",on:{click:function(i){e.optionClicked(t)}}},[e._v("\n            "+e._s(t.name)+"\n        ")])}))])},o=[];u._withStripped=!0;var l=function(e,t,i,n,s,u,o,l){var d=("function"==typeof i?i.options:i)||{};return d.__file="/Users/johndatserakis/Documents/Code/vue-simple-context-menu/src/vue-simple-context-menu.vue",d.render||(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,s&&(d.functional=!0)),d._scopeId=n,d}({render:u,staticRenderFns:o},void 0,s,"data-v-65f428bc",!1,void 0,void 0,void 0),d={install:n},a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&a.use(d),e.install=n,e.default=l,e}({},Vue,vClickOutside);

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

@@ -10,9 +10,9 @@ (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-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":_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',
+    var script = {
         name: 'VueSimpleContextMenu',
         props: {
-            id: {
+            elementId: {
                 type: String,
@@ -33,4 +33,2 @@ required: true
         },
-        computed: {
-        },
         methods: {
@@ -40,3 +38,3 @@ showMenu: function showMenu (event, item) {
 
-                var menu = document.getElementById(this.id);
+                var menu = document.getElementById(this.elementId);
                 if (!menu) {
@@ -46,3 +44,3 @@ return
 
-                if(!this.menuWidth || !this.menuHeight) {
+                if (!this.menuWidth || !this.menuHeight) {
                     menu.style.visibility = "hidden";
@@ -70,3 +68,3 @@ menu.style.display = "block";
             hideContextMenu: function hideContextMenu () {
-                var element = document.getElementById(this.id);
+                var element = document.getElementById(this.elementId);
                 if (element) {
@@ -89,2 +87,94 @@ element.classList.remove('vue-simple-context-menu--active');
 
+    /* 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) {
+            return _c(
+              "li",
+              {
+                staticClass: "vue-simple-context-menu__item",
+                on: {
+                  click: function($event) {
+                    _vm.optionClicked(option);
+                  }
+                }
+              },
+              [_vm._v("\n            " + _vm._s(option.name) + "\n        ")]
+            )
+          })
+        )
+      ])
+    };
+    var __vue_staticRenderFns__ = [];
+    __vue_render__._withStripped = true;
+
+      /* style */
+      var __vue_inject_styles__ = undefined;
+      /* scoped */
+      var __vue_scope_id__ = "data-v-65f428bc";
+      /* module identifier */
+      var __vue_module_identifier__ = undefined;
+      /* functional template */
+      var __vue_is_functional_template__ = false;
+      /* component normalizer */
+      function __vue_normalize__(
+        template, style, script$$1,
+        scope, functional, moduleIdentifier,
+        createInjector, createInjectorSSR
+      ) {
+        var component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};
+
+        // For security concerns, we use only base name in production mode.
+        component.__file = "/Users/johndatserakis/Documents/Code/vue-simple-context-menu/src/vue-simple-context-menu.vue";
+
+        if (!component.render) {
+          component.render = template.render;
+          component.staticRenderFns = template.staticRenderFns;
+          component._compiled = true;
+
+          if (functional) { component.functional = true; }
+        }
+
+        component._scopeId = scope;
+
+        
+
+        return component
+      }
+      /* style inject */
+      
+      /* style inject SSR */
+      
+
+      
+      var component = __vue_normalize__(
+        { 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
@@ -91,0 +181,0 @@

package.json

 {
   "name": "vue-simple-context-menu",
-  "version": "2.0.1",
+  "version": "3.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.",
@@ -35,3 +35,4 @@ "author": "John Datserakis <[e-mail]>",
     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-simple-context-menu.min.js",
-    "build:example": "rm -rf ./docs && cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build:example": "rm -rf ./docs && cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "test": "jest"
   },
@@ -42,2 +43,3 @@ "dependencies": {
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^6.26.0",
@@ -56,3 +58,4 @@ "babel-loader": "^7.1.2",
     "rollup-plugin-uglify-es": "0.0.1",
-    "rollup-plugin-vue": "^3.0.0",
+    "rollup-plugin-vue": "^4.3.0",
+    "rollup-plugin-css-only": "^0.4.0",
     "sass-loader": "^7.0.1",
@@ -64,4 +67,23 @@ "vue": "^2.5.16",
     "webpack-dev-server": "^2.9.1",
-    "html-webpack-plugin": "^3.2.0"
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^23.6.0",
+    "jest-serializer-vue": "^2.0.2",
+    "vue-jest": "^2.6.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ]
   }
 }

README.md

@@ -31,6 +31,10 @@ # vue-simple-context-menu
 
-Or you can include it through the browser at the bottom of your page:
+Or you can include it through the browser at the bottom of your page along with the css:
 
-`<script src="https://unpkg.com/vue-simple-context-menu"></script>`
+```html
+<script src="https://unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.min.js"></script>
 
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.css">
+```
+
 ### About
@@ -45,2 +49,8 @@
 ```html
+<!-- css import for when you want to import the component css into your css file/files  -->
+@import '/path/to/node_modules/vue-simple-context-menu.css';
+
+<!-- css import for when you're importing the css directly in your js  -->
+import 'vue-simple-context-menu/dist/vue-simple-context-menu.css'
+
 import VueSimpleContextMenu from 'vue-simple-context-menu'
@@ -65,3 +75,3 @@ Vue.component('vue-simple-context-menu', VueSimpleContextMenu)
 <vue-simple-context-menu
-    :id="'myUniqueId'"
+    :elementId="'myUniqueId'"
     :options="options"
@@ -91,3 +101,3 @@ :ref="'vueSimpleContextMenu'"
 |---------|-------|--------------------------------|---|
-| id | String | Unique String that acts as the id of your menu. | 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 |
@@ -128,2 +138,5 @@ | ref | String | Unique String that allows you to show the menu on command. | Yes |
 
+# run tests
+npm run test
+
 # serve with hot reload
@@ -130,0 +143,0 @@ npm run watch

No alert changes

Improved metrics

Total package byte prevSize

1031038

increased by0.81%

Number of package files

21

increased by10.53%

Lines of code

1089

increased by34.11%

Number of lines in readme file

163

increased by8.67%

Worsened metrics

Dev dependency count

26

increased by23.81%

No dependency changes