Skip to content

Commit 6d3436c

Browse files
johndatserakisjohndatserakis
authored
Merge pull request #41 from johndatserakis/update-readme
2 parents 68910ad + ffb8b4d commit 6d3436c

8 files changed

+290
-8717
lines changed

‎README.md

+40-29
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ Or you can include it through the browser at the bottom of your page along with
3333
```html
3434
<script src="https://unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.min.js"></script>
3535

36-
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.css">
36+
<link
37+
rel="stylesheet"
38+
type="text/css"
39+
href="https://unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.css"
40+
/>
3741
```
3842

3943
### About
@@ -44,44 +48,49 @@ A nice feature that comes baked in is the menu placement after a click - it sits
4448

4549
### Usage Example
4650

47-
```html
48-
<!-- css import for when you want to import the component css into your css file/files -->
49-
@import '/path/to/node_modules/vue-simple-context-menu.css';
51+
```css
52+
/* css import for when you want to import the component css into your css file/files */
53+
@import "/path/to/node_modules/vue-simple-context-menu.css";
54+
```
5055

51-
<!-- css import for when you're importing the css directly in your js -->
52-
import 'vue-simple-context-menu/dist/vue-simple-context-menu.css'
56+
```js
57+
// css import for when you're importing the css directly in your js
58+
import "vue-simple-context-menu/dist/vue-simple-context-menu.css";
59+
import VueSimpleContextMenu from "vue-simple-context-menu";
5360

54-
import VueSimpleContextMenu from 'vue-simple-context-menu'
55-
Vue.component('vue-simple-context-menu', VueSimpleContextMenu)
61+
Vue.component("vue-simple-context-menu", VueSimpleContextMenu);
5662
```
5763

5864
```html
5965
<!-- This is a basic use case where you have an array of items that you want
6066
to allow to be clicked. In this case, `items` is an array of objects.
6167
Each item has a click event that ties to a function. See the demo for a full example (with multiple menus as well). -->
62-
6368
<div class="item-wrapper">
64-
<div v-for="item in items" @click.prevent.stop="handleClick($event, item)" class="item-wrapper__item">
69+
<div
70+
v-for="item in items"
71+
@click.prevent.stop="handleClick($event, item)"
72+
class="item-wrapper__item"
73+
>
6574
{{item.name}}
6675
</div>
6776
</div>
6877

6978
<!-- Make sure you add the `ref` attribute, as that is what gives you the ability
7079
to open the menu. -->
71-
7280
<vue-simple-context-menu
7381
:elementId="'myUniqueId'"
7482
:options="options"
7583
:ref="'vueSimpleContextMenu'"
7684
@option-clicked="optionClicked"
7785
/>
86+
```
7887

79-
<!-- The click-handler function -->
88+
```js
8089
handleClick (event, item) {
8190
this.$refs.vueSimpleContextMenu.showMenu(event, item)
8291
}
8392

84-
<!-- And for capturing the event -->
93+
8594
optionClicked (event) {
8695
window.alert(JSON.stringify(event))
8796
}
@@ -93,26 +102,27 @@ Note - make sure to use `@click.prevent.stop` (or `@contextmenu.prevent.stop` fo
93102

94103
### Props
95104

96-
| prop | type | description | required |
97-
|---------|-------|--------------------------------|---|
98-
| elementId | String | Unique String that acts as the id of your menu. | Yes |
99-
| options | Array | Array of menu options to show. Component will use the `name` parameter as the label. | Yes |
100-
| options.name | Array | Label for the option. | Yes |
101-
| options.class | String | A custom class that will be applied to the option. | No |
102-
| options.type | String | Only one possible value at the moment - `divider`. Pass this to set the object as a divider. | No |
103-
| ref | String | Unique String that allows you to show the menu on command. | Yes |
105+
| prop | type | description | required |
106+
| --------------- | ------ | -------------------------------------------------------------------------------------------- | -------- |
107+
| `elementId` | String | Unique String that acts as the id of your menu. | Yes |
108+
| `options` | Array | Array of menu options to show. Component will use the `name` parameter as the label. | Yes |
109+
| `options.name` | Array | Label for the option. | Yes |
110+
| `options.class` | String | A custom class that will be applied to the option. | No |
111+
| `options.type` | String | Only one possible value at the moment - `divider`. Pass this to set the object as a divider. | No |
112+
| `ref` | String | Unique String that allows you to show the menu on command. | Yes |
104113

105114
### Methods
106115

107-
| method | parameters | description |
108-
|---------|-------|--------------------------------|
109-
| showMenu |event (MouseEvent), item (Object) | Used to show the menu. Make sure to pass a MouseEvent and an Object. |
116+
| method | parameters | description |
117+
| ---------- | --------------------------------- | -------------------------------------------------------------------- |
118+
| `showMenu` | event (MouseEvent), item (Object) | Used to show the menu. Make sure to pass a MouseEvent and an Object. |
110119

111120
### Events
112121

113-
| event | value | description |
114-
|---------|-------|--------------------------------|
115-
| option-clicked | Object | When a menu item is clicked the component will emit an event with a value containing the clicked item and the menu option that was clicked. Register for this event to capture the selection result. |
122+
| event | value | description |
123+
| ---------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
124+
| `option-clicked` | Object | When a menu item is clicked the component will emit an event with a value containing the clicked item and the menu option that was clicked. Register for this event to capture the selection result. |
125+
| `menu-closed` | | Emitted when the menu is closed |
116126

117127
### SASS Structure
118128

@@ -126,13 +136,14 @@ Note - make sure to use `@click.prevent.stop` (or `@contextmenu.prevent.stop` fo
126136
}
127137
}
128138

129-
&__divider {}
139+
&__divider {
140+
}
130141
}
131142
```
132143

133144
### Development
134145

135-
``` bash
146+
```bash
136147
# install dependencies
137148
npm install
138149

‎dist/vue-simple-context-menu.esm.js

+27-27
Original file line numberDiff line numberDiff line change
@@ -240,33 +240,33 @@ __vue_render__._withStripped = true;
240240
undefined
241241
);
242242

243-
// Import vue component
244-
245-
// install function executed by Vue.use()
246-
function install (Vue) {
247-
if (install.installed) { return; }
248-
install.installed = true;
249-
Vue.component('VueSimpleContextMenu', __vue_component__);
250-
}
251-
252-
// Create module definition for Vue.use()
253-
var plugin = {
254-
install: install,
255-
};
256-
257-
// To auto-install when vue is found
258-
var GlobalVue = null;
259-
if (typeof window !== 'undefined') {
260-
GlobalVue = window.Vue;
261-
} else if (typeof global !== 'undefined') {
262-
GlobalVue = global.Vue;
263-
}
264-
if (GlobalVue) {
265-
GlobalVue.use(plugin);
266-
}
267-
268-
// It's possible to expose named exports when writing components that can
269-
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
243+
// Import vue component
244+
245+
// install function executed by Vue.use()
246+
function install (Vue) {
247+
if (install.installed) { return; }
248+
install.installed = true;
249+
Vue.component('VueSimpleContextMenu', __vue_component__);
250+
}
251+
252+
// Create module definition for Vue.use()
253+
var plugin = {
254+
install: install,
255+
};
256+
257+
// To auto-install when vue is found
258+
var GlobalVue = null;
259+
if (typeof window !== 'undefined') {
260+
GlobalVue = window.Vue;
261+
} else if (typeof global !== 'undefined') {
262+
GlobalVue = global.Vue;
263+
}
264+
if (GlobalVue) {
265+
GlobalVue.use(plugin);
266+
}
267+
268+
// It's possible to expose named exports when writing components that can
269+
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
270270
// export const RollupDemoDirective = component;
271271

272272
export default __vue_component__;

‎dist/vue-simple-context-menu.umd.js

+27-27
Original file line numberDiff line numberDiff line change
@@ -246,33 +246,33 @@
246246
undefined
247247
);
248248

249-
// Import vue component
250-
251-
// install function executed by Vue.use()
252-
function install (Vue) {
253-
if (install.installed) { return; }
254-
install.installed = true;
255-
Vue.component('VueSimpleContextMenu', __vue_component__);
256-
}
257-
258-
// Create module definition for Vue.use()
259-
var plugin = {
260-
install: install,
261-
};
262-
263-
// To auto-install when vue is found
264-
var GlobalVue = null;
265-
if (typeof window !== 'undefined') {
266-
GlobalVue = window.Vue;
267-
} else if (typeof global !== 'undefined') {
268-
GlobalVue = global.Vue;
269-
}
270-
if (GlobalVue) {
271-
GlobalVue.use(plugin);
272-
}
273-
274-
// It's possible to expose named exports when writing components that can
275-
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
249+
// Import vue component
250+
251+
// install function executed by Vue.use()
252+
function install (Vue) {
253+
if (install.installed) { return; }
254+
install.installed = true;
255+
Vue.component('VueSimpleContextMenu', __vue_component__);
256+
}
257+
258+
// Create module definition for Vue.use()
259+
var plugin = {
260+
install: install,
261+
};
262+
263+
// To auto-install when vue is found
264+
var GlobalVue = null;
265+
if (typeof window !== 'undefined') {
266+
GlobalVue = window.Vue;
267+
} else if (typeof global !== 'undefined') {
268+
GlobalVue = global.Vue;
269+
}
270+
if (GlobalVue) {
271+
GlobalVue.use(plugin);
272+
}
273+
274+
// It's possible to expose named exports when writing components that can
275+
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
276276
// export const RollupDemoDirective = component;
277277

278278
exports.default = __vue_component__;

‎docs/build.js

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

0 commit comments

Comments
 (0)