initial commit

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,43 @@
+# vue-context
+
+A flexible context menu component for Vue. Pass it any menu template you like;
+it doesn't even have to be a menu. Always disappears when you expect it
+to by using an `onblur` event.
+
+```html
+<div @contextmenu.prevent="$refs.menu.open">
+  ...
+</div>
+
+<context-menu ref="menu">
+  <ul class="menu">
+    <li @click="onClick('A')">Option A</li>
+    <li @click="onClick('B')">Option B</li>
+  </ul>
+</context-menu>
+
+<script>
+const contextMenu = require('vue-context')
+
+module.exports = {
+  components: {
+    'context-menu': contextMenu
+  },
+  methods: {
+    onClick (opt) {
+      console.log('Clicked', opt)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.menu {
+  width: 250px;
+  border: 1px black solid;
+}
+</style>
+```
+
+## Related
+- [vue-context-menu](https://github.com/vmaimone/vue-context-menu)

index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-show="isVisible"
+    class="context-menu"
+    :style="style"
+    tabindex="-1"
+    @blur="close"
+    @click.capture="close"
+    @contextmenu.capture.prevent>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+const Vue = require('vue')
+
+module.exports = {
+  data () {
+    return {
+      x: null,
+      y: null
+    }
+  },
+  computed: {
+    style () {
+      return {
+        top: this.y - document.body.scrollTop + 'px',
+        left: this.x + 'px'
+      }
+    },
+    isVisible () {
+      return this.x !== null && this.y !== null
+    }
+  },
+  methods: {
+    open (evt) {
+      this.x = evt.pageX || evt.clientX
+      this.y = evt.pageY || evt.clientY
+      Vue.nextTick(() => this.$el.focus())
+    },
+    close (evt) {
+      this.x = null
+      this.y = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.context-menu {
+  position: fixed;
+  z-index: 999;
+}
+.context-menu:focus {
+  outline: none;
+}
+</style>

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "vue-context",
+  "version": "1.0.0",
+  "description": "A flexible context menu component for Vue",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/timwis/vue-context.git"
+  },
+  "keywords": [
+    "vue",
+    "context",
+    "menu"
+  ],
+  "author": "timwis <tim@timwis.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/timwis/vue-context/issues"
+  },
+  "homepage": "https://github.com/timwis/vue-context#readme",
+  "dependencies": {
+    "vue": "^2.3.3"
+  },
+  "devDependencies": {
+    "vueify": "^9.4.1"
+  },
+  "browserify": {
+    "transform": [
+      "vueify"
+    ]
+  }
+}