Skip to content
This repository was archived by the owner on Oct 5, 2022. It is now read-only.

Commit 3116d06

Browse files
rawilkrawilk
authored
Code restructure (#1)
1 parent a521b02 commit 3116d06

17 files changed

+14548
-245
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
.idea
3+
npm-debug.log*
4+
**/mix-manifest.json

‎.npmignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
docs/
2+
src/
3+
test/
4+
build/
5+
.idea
6+
**/mix-manifest.json

‎CHANGELOG.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
# Changelog
22

3+
### 3.0.0 (May 26, 2018)
4+
- Update dependencies
5+
- Update documentation
6+
- Update code structure and build process
7+
- **Breaking** Change slot scope definition from `userData` to just `data`
8+
- **Breaking** Component gets imported as `{ VueContext }` instead of `VContext` now
9+
310
### 2.0.1 (Aug 18, 2017)
411
- Removed bottom border from context menu line items.
512
- Added license file
613
- Created changelog file
714

815
### 2.0.0 (Aug 17, 2017)
9-
- Initial Release
16+
- Initial Re-Release

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2017 Randall Wilk
3+
Copyright (c) 2018 Randall Wilk
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+91-78
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@
33
[![npm](https://img.shields.io/npm/v/vue-context.svg)](https://www.npmjs.org/package/vue-context)
44
[![npm](https://img.shields.io/npm/dt/vue-context.svg)](https://www.npmjs.org/package/vue-context)
55

6-
A simple yet flexible context menu component for Vue. It is styled for the standard `ul` tag, but any menu template can be used.
7-
The only dependency this package has is Vue, so the majority of styling is up to you, and any package styles for the menu
6+
A simple yet flexible context menu for Vue. It is styled for the standard `ul` tag,
7+
but any menu template can be used. The only dependency this package has is Vue,
8+
so the majority of styling is up to you, and any package styles for the menu
89
can easily be overridden.
910

10-
The menu disappears when you expect by using the `onblur` event and also disappears when clicked on.
11+
The menu disappears when you expect by using the `onblur` even and it also
12+
disappears when clicked on.
13+
14+
## Note
15+
The API has changed. Check [v2.0.1 documentation](https://github.com/rawilk/vue-context/blob/master/docs/2.0.1.md)
16+
if you use the old version.
1117

1218
## Getting Started
1319

14-
The following instructions will help you get the vue-context menu up and running on your project.
20+
The following instructions will help you get the vue-context menu up and running on
21+
your project.
1522

1623
### Installation
1724

@@ -22,111 +29,117 @@ $ npm install vue-context --save
2229

2330
## Basic Usage
2431

25-
Import the package and use in your Vue instance, and add a simple method for the click event.
32+
Import the package and use it in your Vue instance, and add a simple method
33+
for the click event.
2634

2735
```js
2836
import Vue from 'vue';
29-
import vContext from 'vue-context';
37+
import { VueContext } from 'vue-context';
3038

3139
new Vue({
32-
el: '#app',
33-
components: {
34-
vContext
35-
},
36-
methods: {
37-
/**
38-
* Alert the text of the menu item clicked on.
39-
*
40-
* @param text
41-
*/
42-
onClick(text) {
43-
alert(`You clicked ${text}!`);
44-
}
45-
}
46-
});
40+
components: {
41+
VueContext
42+
},
43+
44+
methods: {
45+
/**
46+
* Alert the text of the menu item that was clicked on.
47+
*
48+
* @param {string} text
49+
*/
50+
onClick (text) {
51+
alert(`You clicked ${text}!`);
52+
}
53+
}
54+
}).$mount('#app');
4755
```
4856

49-
Add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.
57+
Add an element to the page that will trigger the context menu to appear,
58+
and also add the context menu to the page.
5059

5160
```html
5261
<div id="app">
53-
54-
<div>
55-
<p @contextmenu.prevent="$refs.menu.open">
56-
Right click on me
57-
</p>
58-
</div>
59-
60-
<v-context ref="menu">
61-
<ul>
62-
<li @click="onClick($event.target.innerText)">Option 1</li>
63-
<li @click="onClick($event.target.innerText)">Option 2</li>
64-
</ul>
65-
</v-context>
66-
62+
63+
<div>
64+
<p @contextmenu.prevent="$refs.menu.open">
65+
Right click on me
66+
</p>
67+
</div>
68+
69+
<vue-context ref="menu">
70+
<ul>
71+
<li @click="onClick($event.target.innerText)">Option 1</li>
72+
<li @click="onClick($event.target.innerText)">Option 2</li>
73+
</ul>
74+
</vue-context>
75+
6776
</div>
6877
```
6978

70-
`@contextmenu.prevent` is the event listener needed to open the context menu. It is using `.prevent` as a modifier to prevent the
71-
the default behavior. It has a ref of `menu`, which is what `$refs.menu` is referring to. When each item is clicked on, the text of
72-
the item is sent to the `onClick` method on the Vue instance, which is then shown in an alert.
79+
`@contextmenu.prevent` is the event listener needed to open the context menu. It is using
80+
`.prevent` as a modifier to prevent the default behavior. It has a ref of `menu`, which
81+
is what `$refs.menu` is referring to. When each item is clicked on, the text of the item
82+
is sent to the `onClick` method on the Vue instance, which is then shown in an alert.
7383

7484
## Advanced Usage
7585

76-
To pass any data from the `contextmenu` event to your template, you can pass it as the second parameter of `open` and
77-
access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) under the `userData` property.
86+
To pass any data from the `contextmenu` event to your template, you can pass it as the second
87+
parameter of `open` and access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
88+
under the `data` property`. `$event` must be passed as the first parameter,
89+
otherwise the context menu will not function properly.
7890

7991
```html
8092
<div id="app">
81-
82-
<p @contextmenu.prevent="$refs.menu.open($event, 'foo')">
83-
Right click on me
84-
</p>
85-
86-
<v-context ref="menu">
87-
<template scope="child">
88-
<ul>
89-
<li @click="onClick($event.target.innerText, child.userData)">Option 1</li>
90-
<li @click="onClick($event.target.innerText, child.userData)">Option 2</li>
91-
</ul>
92-
</template>
93-
</v-context>
94-
93+
94+
<p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })">
95+
Right click on me
96+
</p>
97+
98+
<vue-context ref="menu">
99+
<ul slot-scope="child">
100+
<li @click="onClick($event.target.innerText, child.data)">Option 1</li>
101+
<li @click="onClick($event.target.innerText, child.data)">Option 2</li>
102+
</ul>
103+
</vue-context>
104+
95105
</div>
96106
```
97107

98-
Now the `onClick` method on the Vue instance has access to any user data passed to it, which in this case this the string `foo`. The
99-
`userData` can also be used to output dynamic content to the context menu.
108+
Now the `onClick` method on the Vue instance has access to any user data passed to it,
109+
which in this case is an object with a property named `foo`. The `data` slot scope
110+
can also be used to output dynamic content to the context menu.
100111

101112
```js
102113
import Vue from 'vue';
103-
import vContext from 'vue-context';
114+
import { VueContext } from 'vue-context';
104115

105116
new Vue({
106-
el: '#app',
107-
components: {
108-
vContext
109-
},
110-
methods: {
111-
/**
112-
* Alert the text of the menu item clicked on. Console log the data sent from the menu.
113-
*
114-
* @param text
115-
* @param userData
116-
*/
117-
onClick(text, userData) {
118-
alert(`You clicked ${text}!`);
119-
console.log(userData);
120-
}
121-
}
122-
});
117+
components: {
118+
VueContext
119+
},
120+
121+
methods: {
122+
/**
123+
* Alert the text of the menu item that was clicked on.
124+
* Console log the data sent from the menu.
125+
*
126+
* @param {string} text
127+
* @param {object} data
128+
*/
129+
onClick (text, data) {
130+
alert(`You clicked ${text}!`);
131+
console.log(data);
132+
// => { foo: 'bar' }
133+
}
134+
}
135+
}).$mount('#app');
123136
```
124137

125138
## Credits
126139

127-
vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu)
128-
and [Vue.JS Right Click Menu](http://vuejsexamples.com/vue-js-right-click-menu/). Ultimately vue-context is intended
129-
to provide a simple and lightweight context menu for Vue.
140+
vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu)
141+
and [Vue.JS Right Click Menu](http://vuejsexamples.com/vue-js-right-click-menu/). Ultimately
142+
vue-context is intended to provide a simple and lightweight context menu for Vue.
130143

131144
## License
132145

‎build/webpack-test.mix.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const { mix } = require('laravel-mix');
2+
3+
mix
4+
.setPublicPath('test/js/dist')
5+
.js('test/js/src/index.js', 'index.js')
6+
.sourceMaps();

‎build/webpack.mix.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const { mix } = require('laravel-mix');
2+
3+
const inProduction = mix.inProduction();
4+
5+
mix
6+
.setPublicPath('dist')
7+
.js('src/index.js', 'vue-context.js')
8+
.sourceMaps(! inProduction)
9+
.webpackConfig({
10+
output: {
11+
libraryTarget: 'umd',
12+
umdNamedDefine: true
13+
}
14+
});

‎dist/vue-context.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)