First publishable build

README.md

@@ -6,13 +6,47 @@
 ## Usage
 
 ```HTML
-<ContextMenu :text="hello"></ContextMenu>
+<ContextMenu ref="contextMenu" :menu-items="menuItems"/>
+
+<div class="context-menu-trigger" 
+	@click.right.prevent="$refs.contextMenu.open($event)">
+    Right Click Me!
+</div>
 ```
 
 ```javascript
-import { ContextMenu } from 'vue-context-menu-popup'
+import ContextMenu from 'vue-context-menu-popup'
 
 export default {
+  data() {
+    return {
+        menuItems: [
+        {
+          label: 'First Menu Item',
+        },
+        {
+          label: 'Disabled Menu Item',
+          disabled: true,
+        },
+        {
+          label: 'I have children',
+          children: [
+            {
+              label: 'Child Item 1',
+            },
+            {
+              label: 'I also have children',
+              children: [
+                {
+                  label: 'Child Item 2',
+                },
+              ],
+            },
+          ],
+        },
+        ]
+    }
+  },
   components: {
     ContextMenu
   }
@@ -23,11 +57,15 @@ export default {
 
 ### context-menu 
 
-eslint-disable prefer-destructuring 
+A simple context menu component
+
+```html
+<ContextMenu :menu-items="[....]"/>
+``` 
 
 #### props 
 
-- `menu-items` ***Array*** (*optional*) 
+- `menu-items` ***Array*** (*required*) 
 
 #### data 
 
@@ -45,6 +83,8 @@ eslint-disable prefer-destructuring
 
 - `open(position)` 
 
+  Accepts an Object with an `x, y` position or an instance of Event 
+
 ## Installation
 
 ```

example/App.vue

@@ -12,44 +12,44 @@
 </template>
 
 <script>
-  import ContextMenu from '@/components/ContextMenu.vue';
+import ContextMenu from '@/components/ContextMenu.vue';
 
-  export default {
-    name: 'app',
-    data() {
-      return {
-        menuItems: [
-          {
-            'label': 'First Menu Item'
-          },
-          {
-            'label': 'Disabled Menu Item',
-            'disabled': true
-          },
-          {
-            'label': 'I have children',
-            'children': [
-              {
-                'label': 'Child Item 1'
-              },
-              {
-                'label': 'I also have children',
-                'children': [
-                  {
-                    'label': 'Child Item 2'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        consoleMessage: [],
-      };
-    },
-    components: {
-      ContextMenu,
-    },
-  };
+export default {
+  name: 'app',
+  data() {
+    return {
+      menuItems: [
+        {
+          label: 'First Menu Item',
+        },
+        {
+          label: 'Disabled Menu Item',
+          disabled: true,
+        },
+        {
+          label: 'I have children',
+          children: [
+            {
+              label: 'Child Item 1',
+            },
+            {
+              label: 'I also have children',
+              children: [
+                {
+                  label: 'Child Item 2',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      consoleMessage: [],
+    };
+  },
+  components: {
+    ContextMenu,
+  },
+};
 </script>
 
 <style lang="scss">

src/components/ContextMenu.vue

@@ -17,10 +17,18 @@
 import ContextMenuItem from './ContextMenuItem.vue';
 import ClickOutside from '../directives/ClickOutside';
 
+/**
+ * A simple context menu component
+ *
+ * ```html
+ * <ContextMenu :menu-items="[....]"/>
+ * ```
+ */
 export default {
   props: {
     menuItems: {
       type: Array,
+      required: true,
     },
   },
 
@@ -39,6 +47,9 @@ export default {
       this.visible = false;
     },
 
+    /**
+     * Accepts an Object with an `x, y` position or an instance of Event
+     */
     open(position) {
       let x = 0;
       let y = 0;

src/directives/ClickOutside.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 export default {
   bind(el, binding, vnode) {
     el.clickOutsideEvent = (event) => {

src/index.js

@@ -1,3 +1,3 @@
 import ContextMenu from './components/ContextMenu.vue';
 
-export { ContextMenu };
+export default ContextMenu;