First publishable build

Author: Johnathan Barrett

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;