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

wip

Browse Source
This commit is contained in:
rawilk
2020-08-30 13:13:55 -05:00
parent a562986be9
commit 55e816ce41
14 changed files with 10525 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.npmignore
+1
View File
@@ -7,3 +7,4 @@ CODE_OF_CONDUCT.md
CONTRIBUTING.md CONTRIBUTING.md
.editorconfig .editorconfig
docs/ docs/
docs-build/
docs-build/cleanup.js
Executable
+17
View File
@@ -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!');
docs-build/js/advanced-1.vue
+92
View File
@@ -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>
docs-build/js/advanced-2.vue
+91
View File
@@ -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)"
>
&nbsp;
</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>
docs-build/js/basic-usage.vue
+65
View File
@@ -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>
docs-build/js/close-on-click.vue
+68
View File
@@ -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>
docs-build/js/close-on-scroll.vue
+68
View File
@@ -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>
docs-build/js/index.js
+18
View File
@@ -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');
docs-build/js/nested-menus.vue
+80
View File
@@ -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>
docs-build/package-lock.json
Generated
+9916
View File
File diff suppressed because it is too large Load Diff
docs-build/package.json
+23
View File
@@ -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"
}
}
docs-build/webpack.mix.js
+4
View File
@@ -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');
docs/demos/basic.md
+80
View File
@@ -2,3 +2,83 @@
title: Basic Usage title: Basic Usage
sort: 1 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>
docs/scripts/vue-context-demos.js
+2
View File
File diff suppressed because one or more lines are too long