Initial Commit

Author: Johnathan Barrett

.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/assets/logo.png

@@ -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');