Skip to content
This repository was archived by the owner on Oct 5, 2022. It is now read-only.

Commit 55e816c

Browse files
author
rawilk
committed
wip
1 parent a562986 commit 55e816c

14 files changed

+10525
-0
lines changed

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ CODE_OF_CONDUCT.md
77
CONTRIBUTING.md
88
.editorconfig
99
docs/
10+
docs-build/

‎docs-build/cleanup.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#!/usr/bin/env node
2+
3+
const fs = require('fs');
4+
5+
const filesToDelete = [
6+
__dirname + '/mix-manifest.json',
7+
];
8+
9+
filesToDelete.forEach(file => {
10+
try {
11+
fs.unlinkSync(file);
12+
} catch (e) {}
13+
});
14+
15+
fs.rmdirSync(__dirname + '/dist', { recursive: true });
16+
17+
console.log('All extra files cleaned up!');

‎docs-build/js/advanced-1.vue

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<div>
3+
<div class="bg-white shadow overflow-hidden sm:rounded-md">
4+
<ul>
5+
<li>
6+
<a href="#"
7+
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
8+
:class="{ 'border-t border-gray-200': index > 0 }"
9+
v-for="(item, index) in items"
10+
:key="index"
11+
@contextmenu.prevent="$refs.menu.open($event, { name: item, index })"
12+
>
13+
<div class="flex items-center px-4 py-4 sm:px-6"
14+
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
15+
>
16+
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
17+
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
18+
</div>
19+
</div>
20+
</a>
21+
</li>
22+
</ul>
23+
</div>
24+
25+
<div class="my-4 text-right" v-show="showReset">
26+
<button type="button"
27+
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"
28+
@click="reset"
29+
>
30+
Reset Demo
31+
</button>
32+
</div>
33+
34+
<vue-context ref="menu">
35+
<template slot-scope="child" v-if="child.data">
36+
<li>
37+
<a @click.prevent="alertName(child.data.name)">
38+
Alert name
39+
</a>
40+
</li>
41+
<li>
42+
<a @click.prevent="remove(child.data.index)">
43+
Delete "{{ child.data.name }}"
44+
</a>
45+
</li>
46+
</template>
47+
</vue-context>
48+
</div>
49+
</template>
50+
51+
<script>
52+
import VueContext from 'vue-context';
53+
import 'vue-context/src/sass/vue-context.scss';
54+
55+
const items = [
56+
'Cras justo odio',
57+
'Dapibus ac facilisis in',
58+
'Morbi leo risus',
59+
'Porta ac consectetur ac',
60+
'Vestibulum at eros'
61+
];
62+
63+
export default {
64+
components: { VueContext },
65+
66+
computed: {
67+
showReset () {
68+
return this.items.length < items.length;
69+
}
70+
},
71+
72+
data () {
73+
return {
74+
items: [...items]
75+
};
76+
},
77+
78+
methods: {
79+
alertName (name) {
80+
alert(`You clicked on "${name}"!`);
81+
},
82+
83+
remove (index) {
84+
this.$delete(this.items, index);
85+
},
86+
87+
reset () {
88+
this.items = [...items];
89+
}
90+
}
91+
};
92+
</script>

‎docs-build/js/advanced-2.vue

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<template>
2+
<div class="mt-5">
3+
<div class="flex flex-wrap">
4+
<div class="color-box"
5+
:class="{ selected: hasColor(color.hex) }"
6+
v-for="(color, index) in colors"
7+
:key="index"
8+
:style="{ 'background-color': color.hex }"
9+
@contextmenu.prevent="$refs.menu.open($event, color)"
10+
>
11+
&nbsp;
12+
</div>
13+
</div>
14+
15+
<h5 class="my-4">
16+
Selected colors:
17+
</h5>
18+
<code class="mb-3">{{ selectedColors }}</code>
19+
20+
<vue-context ref="menu">
21+
<template slot-scope="child" v-if="child.data">
22+
<li>
23+
<a href="#" @click.prevent="toggle(child.data)">
24+
{{ hasColor(child.data.hex) ? 'Remove Color' : 'Select Color' }}
25+
</a>
26+
</li>
27+
</template>
28+
</vue-context>
29+
</div>
30+
</template>
31+
32+
<script>
33+
import VueContext from 'vue-context';
34+
import 'vue-context/src/sass/vue-context.scss';
35+
36+
export default {
37+
components: { VueContext },
38+
39+
data () {
40+
return {
41+
colors: [
42+
{ name: 'red', hex: '#f44336' },
43+
{ name: 'blue', hex: '#2196F3' },
44+
{ name: 'cyan', hex: '#00BCD4' },
45+
{ name: 'green', hex: '#4CAF50' },
46+
{ name: 'orange', hex: '#FF9800' }
47+
],
48+
selectedColors: []
49+
};
50+
},
51+
52+
methods: {
53+
colorIndex (hex) {
54+
return this.selectedColors.findIndex(color => color.hex === hex);
55+
},
56+
57+
hasColor (hex) {
58+
return this.colorIndex(hex) > -1;
59+
},
60+
61+
toggle (color) {
62+
const index = this.colorIndex(color.hex);
63+
64+
if (index > -1) {
65+
this.$delete(this.selectedColors, index);
66+
} else {
67+
this.selectedColors.push(color);
68+
}
69+
}
70+
}
71+
};
72+
</script>
73+
74+
<style lang="scss" scoped>
75+
.color-box {
76+
width: 100px;
77+
height: 100px;
78+
margin-right: 10px;
79+
border-radius: 4px;
80+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
81+
opacity: .6;
82+
83+
&.selected {
84+
opacity: 1;
85+
}
86+
87+
&:last-child {
88+
margin-right: 0;
89+
}
90+
}
91+
</style>

‎docs-build/js/basic-usage.vue

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div>
3+
<div class="bg-white shadow overflow-hidden sm:rounded-md">
4+
<ul>
5+
<li>
6+
<a href="#"
7+
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
8+
:class="{ 'border-t border-gray-200': index > 0 }"
9+
v-for="(item, index) in items"
10+
:key="index"
11+
@contextmenu.prevent="$refs.menu.open"
12+
>
13+
<div class="flex items-center px-4 py-4 sm:px-6"
14+
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
15+
>
16+
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
17+
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
18+
</div>
19+
</div>
20+
</a>
21+
</li>
22+
</ul>
23+
</div>
24+
25+
<vue-context ref="menu">
26+
<li>
27+
<a @click.prevent="onClick($event.target.innerText)">
28+
Do something
29+
</a>
30+
</li>
31+
<li>
32+
<a @click.prevent="onClick($event.target.innerText)">
33+
Do something else
34+
</a>
35+
</li>
36+
</vue-context>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import VueContext from 'vue-context';
42+
import 'vue-context/src/sass/vue-context.scss';
43+
44+
export default {
45+
components: { VueContext },
46+
47+
data () {
48+
return {
49+
items: [
50+
'Cras justo odio',
51+
'Dapibus ac facilisis in',
52+
'Morbi leo risus',
53+
'Porta ac consectetur ac',
54+
'Vestibulum at eros'
55+
]
56+
};
57+
},
58+
59+
methods: {
60+
onClick (text) {
61+
alert(`You clicked on: "${text}"`);
62+
}
63+
}
64+
};
65+
</script>

‎docs-build/js/close-on-click.vue

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div class="mt-4">
3+
<div class="mb-4">
4+
<div class="flex items-center">
5+
<input id="toggle-close"
6+
type="checkbox"
7+
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
8+
v-model="closeOnClick"
9+
>
10+
<label for="toggle-close" class="ml-2 block text-sm leading-5 text-gray-900">
11+
Close on Click
12+
</label>
13+
</div>
14+
</div>
15+
16+
<div class="bg-white shadow overflow-hidden sm:rounded-md">
17+
<ul>
18+
<li>
19+
<a href="#"
20+
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
21+
:class="{ 'border-t border-gray-200': index > 0 }"
22+
v-for="(item, index) in items"
23+
:key="index"
24+
@contextmenu.prevent="$refs.menu.open"
25+
>
26+
<div class="flex items-center px-4 py-4 sm:px-6"
27+
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
28+
>
29+
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
30+
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
31+
</div>
32+
</div>
33+
</a>
34+
</li>
35+
</ul>
36+
</div>
37+
38+
<vue-context ref="menu" :close-on-click="closeOnClick">
39+
<li>
40+
<a>
41+
{{ closeOnClick ? 'I will close on click' : 'I will stay open on click' }}
42+
</a>
43+
</li>
44+
</vue-context>
45+
</div>
46+
</template>
47+
48+
<script>
49+
import VueContext from 'vue-context';
50+
import 'vue-context/src/sass/vue-context.scss';
51+
52+
export default {
53+
components: { VueContext },
54+
55+
data () {
56+
return {
57+
closeOnClick: false,
58+
items: [
59+
'Cras justo odio',
60+
'Dapibus ac facilisis in',
61+
'Morbi leo risus',
62+
'Porta ac consectetur ac',
63+
'Vestibulum at eros'
64+
]
65+
};
66+
}
67+
};
68+
</script>

0 commit comments

Comments
 (0)