mirrors/vue-context
2
0
Fork 0
mirror of https://github.com/tenrok/vue-context.git synced 2026-05-17 04:59:35 +03:00
Code Activity

wip

Browse Source
This commit is contained in:
rawilk
2020-08-30 19:54:12 -05:00
parent 075cc4b196
commit 7d050c0bf0
3 changed files with 15926 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-build/js/advanced-1.vue
+7 -9
View File
@@ -10,9 +10,7 @@
:key="index"
@contextmenu.prevent="$refs.menu.open($event, { name: item, index })"
>
<div class="flex items-center px-4 py-4 sm:px-6"
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
>
<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>
@@ -66,7 +64,7 @@
computed: {
showReset () {
return this.items.length < items.length;
}
},
},
data () {
@@ -76,17 +74,17 @@
},
methods: {
alertName (name) {
alertName(name) {
alert(`You clicked on "${name}"!`);
},
remove (index) {
remove(index) {
this.$delete(this.items, index);
},
reset () {
reset() {
this.items = [...items];
}
}
},
},
};
</script>
docs/demos/advanced.md
-95
View File
@@ -13,101 +13,6 @@ sort: 2
<advanced-1></advanced-1>
</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"
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
>
<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">
<template v-slot="child" v-if="child.data">
<li>
<a @click.prevent="alertName(child.data.name)">
Alert name
</a>
</li>
<li>
<a @click.prevent="remove(child.data.index)">
Delete "{{ child.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>
```
</div>
<script src="../scripts/vue-context-demos.js"></script>
docs/scripts/vue-context-demos.js
+15919 -2
View File
File diff suppressed because one or more lines are too long