├── .gitignore
├── LICENSE.md
├── README.md
├── index.vue
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Tim Wisniewski
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-lil-context-menu
 2 | 
 3 | A flexible context menu component for Vue. Pass it any menu template you like;
 4 | it doesn't even have to be a menu. Always disappears when you expect it
 5 | to by using an `onblur` event.
 6 | 
 7 | ```html
 8 | <div @contextmenu.prevent="$refs.menu.open">
 9 |   ...
10 | </div>
11 | 
12 | <context-menu ref="menu">
13 |   <ul class="options">
14 |     <li @click="onClick('A')">Option A</li>
15 |     <li @click="onClick('B')">Option B</li>
16 |   </ul>
17 | </context-menu>
18 | 
19 | <script>
20 | const contextMenu = require('vue-lil-context-menu')
21 | 
22 | module.exports = {
23 |   components: {
24 |     'context-menu': contextMenu
25 |   },
26 |   methods: {
27 |     onClick (opt) {
28 |       console.log('Clicked', opt)
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <style scoped>
35 | .options {
36 |   width: 250px;
37 |   border: 1px black solid;
38 | }
39 | </style>
40 | ```
41 | 
42 | If you'd like to pass any context from the original `oncontextmenu`
43 | event down to your menu template, you can pass it as the second
44 | param of `open` and access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
45 | under the `userData` property. For example:
46 | 
47 | ```html
48 | <div @contextmenu.prevent="$refs.menu.open($event, 'foo')">
49 |   ...
50 | </div>
51 | 
52 | <context-menu ref="menu">
53 |   <template scope="child">
54 |     <li @click="onClick('A', child.userData)">Option A</li>
55 |     <li @click="onClick('B', child.userData)">Option B</li>
56 |   </template>
57 | </context-menu>
58 | ```
59 | 
60 | ## Related
61 | - [vue-context-menu](https://github.com/vmaimone/vue-context-menu)
62 | 


--------------------------------------------------------------------------------
/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-show="isVisible"
 4 |     class="lil-context-menu"
 5 |     :style="style"
 6 |     tabindex="-1"
 7 |     @blur="close"
 8 |     @click="close"
 9 |     @contextmenu.capture.prevent>
10 |     <slot :user-data="userData"></slot>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | const Vue = require('vue')
16 | 
17 | module.exports = {
18 |   name: 'lil-context-menu',
19 |   data () {
20 |     return {
21 |       x: null,
22 |       y: null,
23 |       userData: null
24 |     }
25 |   },
26 |   computed: {
27 |     style () {
28 |       return this.isVisible ? {
29 |         top: this.y - document.body.scrollTop + 'px',
30 |         left: this.x + 'px'
31 |       } : {}
32 |     },
33 |     isVisible () {
34 |       return this.x !== null && this.y !== null
35 |     }
36 |   },
37 |   methods: {
38 |     open (evt, userData) {
39 |       this.x = evt.pageX || evt.clientX
40 |       this.y = evt.pageY || evt.clientY
41 |       this.userData = userData
42 |       Vue.nextTick(() => this.$el.focus())
43 |     },
44 |     close (evt) {
45 |       this.x = null
46 |       this.y = null
47 |       this.userData = null
48 |     }
49 |   }
50 | }
51 | </script>
52 | 
53 | <style scoped>
54 | .lil-context-menu {
55 |   position: fixed;
56 |   z-index: 999;
57 | }
58 | .lil-context-menu:focus {
59 |   outline: none;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-lil-context-menu",
 3 |   "version": "1.1.0",
 4 |   "description": "A flexible context menu component for Vue",
 5 |   "main": "index.vue",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/timwis/vue-lil-context-menu.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "context",
16 |     "menu"
17 |   ],
18 |   "author": "timwis <tim@timwis.com>",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/timwis/vue-lil-context-menu/issues"
22 |   },
23 |   "homepage": "https://github.com/timwis/vue-lil-context-menu#readme",
24 |   "dependencies": {
25 |     "vue": "^2.3.3"
26 |   },
27 |   "devDependencies": {
28 |     "vueify": "^9.4.1"
29 |   },
30 |   "browserify": {
31 |     "transform": [
32 |       "vueify"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------