mirror of
https://github.com/tenrok/vue-context.git
synced 2026-05-17 03:09:35 +03:00
wip
This commit is contained in:
rawilk
@@ -7,3 +7,4 @@ CODE_OF_CONDUCT.md
|
||||
CONTRIBUTING.md
|
||||
.editorconfig
|
||||
docs/
|
||||
docs-build/
|
||||
|
||||
Executable
+17
@@ -0,0 +1,17 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const fs = require('fs');
|
||||
|
||||
const filesToDelete = [
|
||||
__dirname + '/mix-manifest.json',
|
||||
];
|
||||
|
||||
filesToDelete.forEach(file => {
|
||||
try {
|
||||
fs.unlinkSync(file);
|
||||
} catch (e) {}
|
||||
});
|
||||
|
||||
fs.rmdirSync(__dirname + '/dist', { recursive: true });
|
||||
|
||||
console.log('All extra files cleaned up!');
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul>
|
||||
<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 slot-scope="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>
|
||||
@@ -0,0 +1,91 @@
|
||||
<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)"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="my-4">
|
||||
Selected colors:
|
||||
</h5>
|
||||
<code class="mb-3">{{ selectedColors }}</code>
|
||||
|
||||
<vue-context ref="menu">
|
||||
<template slot-scope="child" v-if="child.data">
|
||||
<li>
|
||||
<a href="#" @click.prevent="toggle(child.data)">
|
||||
{{ hasColor(child.data.hex) ? 'Remove Color' : 'Select Color' }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</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>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul>
|
||||
<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"
|
||||
: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>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<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>
|
||||
<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"
|
||||
: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>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<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>
|
||||
<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"
|
||||
: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>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,18 @@
|
||||
import Vue from 'vue';
|
||||
import BasicUsage from './basic-usage';
|
||||
import Advanced1 from './advanced-1';
|
||||
import Advanced2 from './advanced-2';
|
||||
import NestedMenus from './nested-menus';
|
||||
import CloseOnClick from './close-on-click';
|
||||
import CloseOnScroll from './close-on-scroll';
|
||||
|
||||
new Vue({
|
||||
components: {
|
||||
BasicUsage,
|
||||
Advanced1,
|
||||
Advanced2,
|
||||
NestedMenus,
|
||||
CloseOnClick,
|
||||
CloseOnScroll,
|
||||
},
|
||||
}).$mount('#app');
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul>
|
||||
<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"
|
||||
: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>
|
||||
|
||||
<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>
|
||||
Generated
+9916
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js && npm run cleanup",
|
||||
"watch": "npm run development -- --watch",
|
||||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js && npm run cleanup",
|
||||
"cleanup": "./cleanup.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "^7.0.2",
|
||||
"fs": "0.0.1-security",
|
||||
"laravel-mix": "^5.0.5",
|
||||
"resolve-url-loader": "^3.1.1",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^10.0.1",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.12",
|
||||
"vue-context": "^6.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
const mix = require('laravel-mix');
|
||||
|
||||
mix.js('js/index.js', 'dist/vue-context-demos.js')
|
||||
.copy('dist/vue-context-demos.js', __dirname + '/../docs/scripts');
|
||||
@@ -2,3 +2,83 @@
|
||||
title: Basic Usage
|
||||
sort: 1
|
||||
---
|
||||
|
||||
{.tip}
|
||||
> Right click on each item to open the context menu.
|
||||
|
||||
<div id="app">
|
||||
<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>
|
||||
<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"
|
||||
: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>
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
<script src="../scripts/vue-context-demos.js"></script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user