Code restructure (#1)

Author: rawilk

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.idea
+npm-debug.log*
+**/mix-manifest.json

.npmignore

@@ -0,0 +1,6 @@
+docs/
+src/
+test/
+build/
+.idea
+**/mix-manifest.json

CHANGELOG.md

@@ -1,9 +1,16 @@
 # Changelog
 
+### 3.0.0 (May 26, 2018)
+- Update dependencies
+- Update documentation
+- Update code structure and build process
+- **Breaking** Change slot scope definition from `userData` to just `data`
+- **Breaking** Component gets imported as `{ VueContext }` instead of `VContext` now
+
 ### 2.0.1 (Aug 18, 2017)
 - Removed bottom border from context menu line items.
 - Added license file
 - Created changelog file
 
 ### 2.0.0 (Aug 17, 2017)
-- Initial Release
+- Initial Re-Release

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Randall Wilk
+Copyright (c) 2018 Randall Wilk
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -3,15 +3,22 @@
 [![npm](https://img.shields.io/npm/v/vue-context.svg)](https://www.npmjs.org/package/vue-context)
 [![npm](https://img.shields.io/npm/dt/vue-context.svg)](https://www.npmjs.org/package/vue-context)
 
-A simple yet flexible context menu component for Vue. It is styled for the standard `ul` tag, but any menu template can be used.
-The only dependency this package has is Vue, so the majority of styling is up to you, and any package styles for the menu
+A simple yet flexible context menu for Vue. It is styled for the standard `ul` tag,
+but any menu template can be used. The only dependency this package has is Vue,
+so the majority of styling is up to you, and any package styles for the menu
 can easily be overridden.
 
-The menu disappears when you expect by using the `onblur` event and also disappears when clicked on.
+The menu disappears when you expect by using the `onblur` even and it also
+disappears when clicked on.
+
+## Note
+The API has changed. Check [v2.0.1 documentation](https://github.com/rawilk/vue-context/blob/master/docs/2.0.1.md) 
+if you use the old version.
 
 ## Getting Started
 
-The following instructions will help you get the vue-context menu up and running on your project.
+The following instructions will help you get the vue-context menu up and running on
+your project.
 
 ### Installation
 
@@ -22,111 +29,117 @@ $ npm install vue-context --save
 
 ## Basic Usage
 
-Import the package and use in your Vue instance, and add a simple method for the click event.
+Import the package and use it in your Vue instance, and add a simple method
+for the click event.
 
 ```js
 import Vue from 'vue';
-import vContext from 'vue-context';
+import { VueContext } from 'vue-context';
 
 new Vue({
-  el: '#app',
-  components: {
-     vContext
-  },
-  methods: {
-     /**
-      * Alert the text of the menu item clicked on.
-      *
-      * @param text
-      */
-     onClick(text) {
-        alert(`You clicked ${text}!`);
-     }
-  }
-});
+    components: {
+    	VueContext
+    },
+    
+    methods: {
+    	/**
+    	* Alert the text of the menu item that was clicked on.
+    	* 
+        * @param {string} text
+        */
+    	onClick (text) {
+            alert(`You clicked ${text}!`);
+    	}
+    }
+}).$mount('#app');
 ```
 
-Add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.
+Add an element to the page that will trigger the context menu to appear,
+and also add the context menu to the page.
 
 ```html
 <div id="app">
-   
-   <div>
-      <p @contextmenu.prevent="$refs.menu.open">
-         Right click on me
-      </p>
-   </div>
-   
-   <v-context ref="menu">
-       <ul>
-          <li @click="onClick($event.target.innerText)">Option 1</li>
-          <li @click="onClick($event.target.innerText)">Option 2</li>
-       </ul>
-   </v-context>
-   
+    
+    <div>
+        <p @contextmenu.prevent="$refs.menu.open">
+            Right click on me
+        </p>
+    </div>
+    
+    <vue-context ref="menu">
+        <ul>
+            <li @click="onClick($event.target.innerText)">Option 1</li>
+            <li @click="onClick($event.target.innerText)">Option 2</li>
+        </ul>
+    </vue-context>
+    
 </div>
 ```
 
-`@contextmenu.prevent` is the event listener needed to open the context menu. It is using `.prevent` as a modifier to prevent the
-the default behavior. It has a ref of `menu`, which is what `$refs.menu` is referring to. When each item is clicked on, the text of
-the item is sent to the `onClick` method on the Vue instance, which is then shown in an alert.
+`@contextmenu.prevent` is the event listener needed to open the context menu. It is using
+`.prevent` as a modifier to prevent the default behavior. It has a ref of `menu`, which
+is what `$refs.menu` is referring to. When each item is clicked on, the text of the item
+is sent to the `onClick` method on the Vue instance, which is then shown in an alert.
 
 ## Advanced Usage
 
-To pass any data from the `contextmenu` event to your template, you can pass it as the second parameter of `open` and
-access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) under the `userData` property.
+To pass any data from the `contextmenu` event to your template, you can pass it as the second
+parameter of `open` and access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 
+under the `data` property`. `$event` must be passed as the first parameter,
+otherwise the context menu will not function properly.
 
 ```html
 <div id="app">
-   
-   <p @contextmenu.prevent="$refs.menu.open($event, 'foo')">
-       Right click on me
-   </p>
-   
-   <v-context ref="menu">
-       <template scope="child">
-          <ul>
-             <li @click="onClick($event.target.innerText, child.userData)">Option 1</li>
-             <li @click="onClick($event.target.innerText, child.userData)">Option 2</li>
-          </ul>
-       </template>
-   </v-context>
-   
+    
+    <p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })">
+        Right click on me
+    </p>
+    
+    <vue-context ref="menu">
+        <ul slot-scope="child">
+            <li @click="onClick($event.target.innerText, child.data)">Option 1</li>
+            <li @click="onClick($event.target.innerText, child.data)">Option 2</li>
+        </ul>
+    </vue-context>
+    
 </div>
 ```
 
-Now the `onClick` method on the Vue instance has access to any user data passed to it, which in this case this the string `foo`. The
-`userData` can also be used to output dynamic content to the context menu.
+Now the `onClick` method on the Vue instance has access to any user data passed to it,
+which in this case is an object with a property named `foo`. The `data` slot scope
+can also be used to output dynamic content to the context menu.
 
 ```js
 import Vue from 'vue';
-import vContext from 'vue-context';
+import { VueContext } from 'vue-context';
 
 new Vue({
-  el: '#app',
-  components: {
-     vContext
-  },
-  methods: {
-     /**
-      * Alert the text of the menu item clicked on. Console log the data sent from the menu.
-      *
-      * @param text
-      * @param userData
-      */
-     onClick(text, userData) {
-        alert(`You clicked ${text}!`);
-        console.log(userData);
-     }
-  }
-});
+    components: {
+    	VueContext
+    },
+    
+    methods: {
+    	/**
+    	* Alert the text of the menu item that was clicked on.
+    	* Console log the data sent from the menu.
+    	* 
+        * @param {string} text
+        * @param {object} data
+        */
+    	onClick (text, data) {
+            alert(`You clicked ${text}!`);
+            console.log(data);
+            // => { foo: 'bar' }
+    	}
+    }
+}).$mount('#app');
 ```
 
 ## Credits
 
-vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu) 
-and [Vue.JS Right Click Menu](http://vuejsexamples.com/vue-js-right-click-menu/). Ultimately vue-context is intended
-to provide a simple and lightweight context menu for Vue.
+vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu)
+and [Vue.JS Right Click Menu](http://vuejsexamples.com/vue-js-right-click-menu/). Ultimately
+vue-context is intended to provide a simple and lightweight context menu for Vue.
 
 ## License
 

build/webpack-test.mix.js

@@ -0,0 +1,6 @@
+const { mix } = require('laravel-mix');
+
+mix
+	.setPublicPath('test/js/dist')
+	.js('test/js/src/index.js', 'index.js')
+	.sourceMaps();

build/webpack.mix.js

@@ -0,0 +1,14 @@
+const { mix } = require('laravel-mix');
+
+const inProduction = mix.inProduction();
+
+mix
+	.setPublicPath('dist')
+	.js('src/index.js', 'vue-context.js')
+	.sourceMaps(! inProduction)
+	.webpackConfig({
+		output: {
+			libraryTarget: 'umd',
+			umdNamedDefine: true
+		}
+	});