mirrors/vue-context
2
0
Fork 0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-08 09:32:22 +03:00
Code Activity

Update docs for archival

Browse Source
This commit is contained in:
Randall Wilk
2021-01-22 09:54:41 -06:00
parent efb6839aff
commit 14d4f12249
8 changed files with 4 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/demos/_index.md
-4
View File
@@ -1,4 +0,0 @@
---
title: Demos
sort: 2
---
docs/demos/advanced.md
-305
View File
@@ -1,305 +0,0 @@
---
title: Advanced Demo
sort: 2
---
## Demo 1
> {tip} Right click on each item to see a more customized context menu appear for each item.
<div id="advanced-1-app">
<div style="margin-bottom: 1rem;">
<advanced-1></advanced-1>
</div>
</div>
```html
<template>
<div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open($event, { name: item, index })"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="my-4 text-right" v-show="showReset">
<button type="button"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150"
@click="reset"
>
Reset Demo
</button>
</div>
<vue-context ref="menu" v-slot="{ data }">
<template v-if="data">
<li>
<a @click.prevent="alertName(data.name)">
Alert name
</a>
</li>
<li>
<a @click.prevent="remove(data.index)">
Delete "{{ data.name }}"
</a>
</li>
</template>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
const items = [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
];
export default {
components: { VueContext },
computed: {
showReset() {
return this.items.length < items.length;
},
},
data() {
return {
items: [...items],
};
},
methods: {
alertName(name) {
alert(`You clicked on "${name}"!`);
},
remove(index) {
this.$delete(this.items, index);
},
reset() {
this.items = [...items];
},
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/advanced-1.vue)
## Demo 2
> {tip} Right click on each of the colors to have a context menu appear to allow you do add or
> remove the color from the array of selected colors.
<div id="advanced-2-app">
<div style="margin-bottom: 1rem;">
<advanced-2></advanced-2>
</div>
</div>
```html
<template>
<div class="mt-5">
<div class="flex flex-wrap">
<div class="color-box"
:class="{ selected: hasColor(color.hex) }"
v-for="(color, index) in colors"
:key="index"
:style="{ 'background-color': color.hex }"
@contextmenu.prevent="$refs.menu.open($event, color)"
>
&nbsp;
</div>
</div>
<h5 class="my-4">
Selected colors:
</h5>
<code class="mb-3">{{ selectedColors }}</code>
<vue-context ref="menu" v-slot="{ data: color }">
<li v-if="color">
<a href="#" @click.prevent="toggle(color)">
{{ hasColor(color.hex) ? 'Remove Color' : 'Select Color' }}
</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
colors: [
{ name: 'red', hex: '#f44336' },
{ name: 'blue', hex: '#2196F3' },
{ name: 'cyan', hex: '#00BCD4' },
{ name: 'green', hex: '#4CAF50' },
{ name: 'orange', hex: '#FF9800' },
],
selectedColors: [],
};
},
methods: {
colorIndex(hex) {
return this.selectedColors.findIndex(color => color.hex === hex);
},
hasColor(hex) {
return this.colorIndex(hex) > -1;
},
toggle(color) {
const index = this.colorIndex(color.hex);
if (index > -1) {
this.$delete(this.selectedColors, index);
} else {
this.selectedColors.push(color);
}
},
},
};
</script>
<style lang="scss" scoped>
.color-box {
width: 100px;
height: 100px;
margin-right: 10px;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
opacity: .6;
&.selected {
opacity: 1;
}
&:last-child {
margin-right: 0;
}
}
</style>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/advanced-2.vue)
## Nested Menus
<div id="nested-app" style="margin-bottom: 1rem;">
<nested-menus></nested-menus>
</div>
```html
<template>
<div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu">
<li>
<a @click.prevent="alertText($event.target.innerText)">Not nested</a>
</li>
<li class="v-context__sub">
<a @click.prevent="alertText($event.target.innerText)">Has sub menu</a>
<ul class="v-context">
<li>
<a @click.prevent="alertText($event.target.innerText)">Nested child</a>
</li>
<li class="v-context__sub">
<a @click.prevent="alertText($event.target.innerText)">Another nested menu</a>
<ul class="v-context">
<li>
<a @click.prevent="alertText($event.target.innerText)">Another level deep</a>
</li>
<li>
<a @click.prevent="alertText($event.target.innerText)">There is no limit</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a @click.prevent="alertText($event.target.text)">Also not nested</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
alertText(text) {
alert(`You clicked: ${text}`);
},
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/nested-menus.vue)
<script src="../scripts/vue-context-advanced-demos.1611330204010.js"></script>
docs/demos/basic.md
-82
View File
@@ -1,82 +0,0 @@
---
title: Basic Demo
sort: 1
---
> {tip} Right click on each item to open the context menu.
<div id="basic-app" style="margin-bottom: 1rem;">
<basic-usage></basic-usage>
</div>
> {tip} Try using the up and down arrows as well to navigate the menu.
```html
<template>
<div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu">
<li>
<a @click.prevent="onClick($event.target.innerText)">
Do something
</a>
</li>
<li>
<a @click.prevent="onClick($event.target.innerText)">
Do something else
</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
onClick(text) {
alert(`You clicked on: "${text}"`);
},
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/basic/basic-usage.vue)
<script src="../scripts/vue-context-basic-demos.1611330204010.js"></script>
docs/demos/props.md
-166
View File
@@ -1,166 +0,0 @@
---
title: Props Demo
sort: 3
---
## Close on click
When `closeOnClick` is set to `false`, the context menu will not automatically close when clicked on.
You can toggle this feature on and off in this demo by using the checkbox below.
<div id="close-on-click-app" style="margin-bottom: 1rem;">
<close-on-click></close-on-click>
</div>
```html
<template>
<div class="mt-4">
<div class="mb-4">
<div class="flex items-center">
<input id="toggle-close"
type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
v-model="closeOnClick"
>
<label for="toggle-close" class="ml-2 block text-sm leading-5 text-gray-900">
Close on Click
</label>
</div>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu" :close-on-click="closeOnClick">
<li>
<a>
{{ closeOnClick ? 'I will close on click' : 'I will stay open on click' }}
</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
closeOnClick: false,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
],
};
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/props/close-on-click.vue)
## Close on scroll
If `closeOnScroll` is set to `true`, the context menu will close automatically when the window is scrolled.
You can toggle this feature on and off in this demo by using the checkbox below.
<div id="close-on-scroll-app">
<close-on-scroll></close-on-scroll>
</div>
```html
<template>
<div class="mt-4">
<div class="mb-4">
<div class="flex items-center">
<input id="toggle-scroll"
type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
v-model="closeOnScroll"
>
<label for="toggle-scroll" class="ml-2 block text-sm leading-5 text-gray-900">
Close on Scroll
</label>
</div>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu" :close-on-scroll="closeOnScroll">
<li>
<a>
{{ closeOnScroll ? 'I will hide when the window is scrolled' : 'I will stay visible when the window is scrolled' }}
</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
closeOnScroll: true,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
};
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/props/close-on-scroll.vue)
<script src="../scripts/vue-context-props-demos.1611330204011.js"></script>
docs/introduction.md
+4
View File
@@ -3,6 +3,10 @@ title: Introduction
sort: 1
---
> {note} I have abandoned this package since I no longer have the time or interest in maintaining it.
> If your project depends on vue-context, feel free to fork and maintain your own version of it, or
> consider using an [alternative vue context menu package](https://github.com/vuejs/awesome-vue#context-menu).
## Introduction
`vue-context` provides a simple yet flexible context menu for Vue. It is styled for the standard `<ul>` tag, but any menu
docs/scripts/vue-context-advanced-demos.1611330204010.js
-2
View File
File diff suppressed because one or more lines are too long
docs/scripts/vue-context-basic-demos.1611330204010.js
-2
View File
File diff suppressed because one or more lines are too long
docs/scripts/vue-context-props-demos.1611330204011.js
-2
View File
File diff suppressed because one or more lines are too long