Initial Commit

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -0,0 +1,86 @@
+# vue-context-menu-popup
+
+[![GitHub open issues](https://img.shields.io/github/issues/Johnathan Barrett/vue-context-menu-popup.svg?maxAge=2592000)](https://github.com/Johnathan Barrett/vue-context-menu-popup/issues)
+[![Npm version](https://img.shields.io/npm/v/vue-context-menu-popup.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-context-menu-popup)
+
+## Usage
+
+```HTML
+<ContextMenu :text="hello"></ContextMenu>
+```
+
+```javascript
+import { ContextMenu } from 'vue-context-menu-popup'
+
+export default {
+  components: {
+    ContextMenu
+  }
+}
+```
+
+## API
+
+### context-menu 
+
+#### props 
+
+- `menu-items` ***Array*** (*optional*) 
+
+#### data 
+
+- `visible` 
+
+**initial value:** `false` 
+
+- `contextMenuPosition` 
+
+**initial value:** `[object Object]` 
+
+#### methods 
+
+- `close()` 
+
+- `open(position)` 
+
+## Installation
+
+```
+npm install vue-context-menu-popup
+```
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```
+
+### Run your unit tests
+
+```
+npm run test:unit
+```
+
+### Update the API section of README.md with generated documentation
+
+```
+npm run doc:build
+```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+};

example/App.vue

@@ -0,0 +1,83 @@
+<template>
+    <div id="app">
+        <ContextMenu ref="contextMenu" :menu-items="[
+      {
+        label: 'First Menu Item',
+        handler: () => {this.consoleMessage.push('First Menu Item Clicked')}
+      },
+      {
+        label: 'Disabled Menu Item',
+        handler: () => {/* I don't do anything because I'm disabled ¯\_(ツ)_/¯ */},
+        disabled: true,
+      },
+      {
+        label: 'I have children',
+        children: [
+          {
+            label: 'Child Item 1',
+            handler: () => {this.consoleMessage.push('Child Item 1 Clicked')}
+          },
+          {
+            label: 'I also have children',
+            children: [
+              {
+                label: 'Child Item 2',
+                handler: () => {this.consoleMessage.push('Child Item 2 Clicked')}
+              }
+            ]
+          }
+        ]
+      }
+    ]"/>
+
+        <div class="context-menu-trigger" @click.right.prevent="$refs.contextMenu.open($event)">
+            Right Click Me!
+        </div>
+
+        <div class="console" v-html="consoleMessage.length ? consoleMessage.join('<br>') : '...'"></div>
+
+    </div>
+</template>
+
+<script>
+  import ContextMenu from '@/components/ContextMenu.vue';
+
+  export default {
+    name: 'app',
+    data() {
+      return {
+        consoleMessage: [],
+      };
+    },
+    components: {
+      ContextMenu,
+    },
+  };
+</script>
+
+<style lang="scss">
+    body, html {
+        height: 100%;
+    }
+
+    #app {
+        margin-top: 60px;
+        font-family: arial, sans-serif;
+    }
+
+    .console {
+        background: #112300;
+        padding: 1em;
+        font-family: monospace;
+        line-height: 1.5em;
+        color: lawngreen;
+        text-shadow: 0 0 10px lawngreen;
+    }
+
+    .context-menu-trigger {
+        width: 50%;
+        margin: 2em auto;
+        padding: 2em;
+        background: #c0c0c0;
+    }
+</style>

example/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');