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

wip

Browse Source
This commit is contained in:
rawilk
2020-08-30 20:11:35 -05:00
parent 20d3c22f2b
commit 633eb31afd
4 changed files with 182 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-build/js/advanced/advanced-1.vue
+2 -2
View File
@@ -62,12 +62,12 @@ export default {
components: { VueContext }, components: { VueContext },
computed: { computed: {
showReset () { showReset() {
return this.items.length < items.length; return this.items.length < items.length;
}, },
}, },
data () { data() {
return { return {
items: [...items] items: [...items]
}; };
docs-build/js/advanced/advanced-2.vue
+38 -40
View File
@@ -17,58 +17,56 @@
</h5> </h5>
<code class="mb-3">{{ selectedColors }}</code> <code class="mb-3">{{ selectedColors }}</code>
<vue-context ref="menu"> <vue-context ref="menu" v-slot="{ data: color }">
<template slot-scope="child" v-if="child.data"> <li v-if="color">
<li> <a href="#" @click.prevent="toggle(color)">
<a href="#" @click.prevent="toggle(child.data)"> {{ hasColor(color.hex) ? 'Remove Color' : 'Select Color' }}
{{ hasColor(child.data.hex) ? 'Remove Color' : 'Select Color' }} </a>
</a> </li>
</li>
</template>
</vue-context> </vue-context>
</div> </div>
</template> </template>
<script> <script>
import VueContext from 'vue-context'; import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss'; import 'vue-context/src/sass/vue-context.scss';
export default { export default {
components: { VueContext }, components: { VueContext },
data () { data() {
return { return {
colors: [ colors: [
{ name: 'red', hex: '#f44336' }, { name: 'red', hex: '#f44336' },
{ name: 'blue', hex: '#2196F3' }, { name: 'blue', hex: '#2196F3' },
{ name: 'cyan', hex: '#00BCD4' }, { name: 'cyan', hex: '#00BCD4' },
{ name: 'green', hex: '#4CAF50' }, { name: 'green', hex: '#4CAF50' },
{ name: 'orange', hex: '#FF9800' } { name: 'orange', hex: '#FF9800' },
], ],
selectedColors: [] selectedColors: [],
}; };
},
methods: {
colorIndex(hex) {
return this.selectedColors.findIndex(color => color.hex === hex);
}, },
methods: { hasColor(hex) {
colorIndex (hex) { return this.colorIndex(hex) > -1;
return this.selectedColors.findIndex(color => color.hex === hex); },
},
hasColor (hex) { toggle(color) {
return this.colorIndex(hex) > -1; const index = this.colorIndex(color.hex);
},
toggle (color) { if (index > -1) {
const index = this.colorIndex(color.hex); this.$delete(this.selectedColors, index);
} else {
if (index > -1) { this.selectedColors.push(color);
this.$delete(this.selectedColors, index);
} else {
this.selectedColors.push(color);
}
} }
} },
}; },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
docs/demos/advanced.md
+107 -3
View File
@@ -79,14 +79,14 @@ export default {
components: { VueContext }, components: { VueContext },
computed: { computed: {
showReset () { showReset() {
return this.items.length < items.length; return this.items.length < items.length;
}, },
}, },
data () { data() {
return { return {
items: [...items] items: [...items],
}; };
}, },
@@ -107,4 +107,108 @@ export default {
</script> </script>
``` ```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/advanced-1.vue)
## Demo 2
<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)
<script src="../scripts/vue-context-advanced-demos.js"></script> <script src="../scripts/vue-context-advanced-demos.js"></script>
docs/scripts/vue-context-advanced-demos.js
+35 -40
View File
@@ -405,8 +405,6 @@ __webpack_require__.r(__webpack_exports__);
// //
// //
// //
//
//
/* harmony default export */ __webpack_exports__["default"] = ({ /* harmony default export */ __webpack_exports__["default"] = ({
@@ -2502,46 +2500,43 @@ var render = function() {
_vm._v(" "), _vm._v(" "),
_c("vue-context", { _c("vue-context", {
ref: "menu", ref: "menu",
scopedSlots: _vm._u( scopedSlots: _vm._u([
[ {
{ key: "default",
key: "default", fn: function(ref) {
fn: function(child) { var color = ref.data
return child.data return [
? [ color
_c("li", [ ? _c("li", [
_c( _c(
"a", "a",
{ {
attrs: { href: "#" }, attrs: { href: "#" },
on: { on: {
click: function($event) { click: function($event) {
$event.preventDefault() $event.preventDefault()
return _vm.toggle(child.data) return _vm.toggle(color)
}
} }
}, }
[ },
_vm._v( [
"\n " + _vm._v(
_vm._s( "\n " +
_vm.hasColor(child.data.hex) _vm._s(
? "Remove Color" _vm.hasColor(color.hex)
: "Select Color" ? "Remove Color"
) + : "Select Color"
"\n " ) +
) "\n "
] )
) ]
]) )
] ])
: undefined : _vm._e()
} ]
} }
], }
null, ])
true
)
}) })
], ],
1 1