You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.8 KiB
71 lines
1.8 KiB
<template>
|
|
<div class="WM-Checkbox c-toggle-hide RTL WM-Align-R">
|
|
<input
|
|
type="checkbox"
|
|
:id="rand"
|
|
class="c-check"
|
|
:value="valueSelected"
|
|
v-model="values"
|
|
@change="changeValue"
|
|
/>
|
|
<label :for="rand">
|
|
<span class="inc"></span>
|
|
<span class="check"></span>
|
|
<span class="box"></span>
|
|
{{ showText }}
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
itemValue: { default: null },
|
|
itemText: { default: null },
|
|
text: { default: " " },
|
|
item: { default: {} },
|
|
color: { default: "Red" },
|
|
value: {type: Array},
|
|
},
|
|
data: function() {
|
|
return {
|
|
IconClass: "WMi-" + this.Icon,
|
|
values: this.value,
|
|
rand : Math.random()
|
|
};
|
|
},
|
|
computed: {
|
|
valueSelected() {
|
|
if (this.itemValue) {
|
|
return this.item[this.itemValue];
|
|
}
|
|
return this.item;
|
|
},
|
|
showText() {
|
|
if (this.itemText) {
|
|
return this.item[this.itemText];
|
|
}
|
|
return this.text;
|
|
},
|
|
},
|
|
methods:{
|
|
changeValue($event) {
|
|
if (this.value) {
|
|
if ($event.target.checked) {
|
|
this.value.push(this.valueSelected);
|
|
} else {
|
|
let index = this.value.findIndex(x => x == this.valueSelected);
|
|
this.value.splice(index, 1);
|
|
}
|
|
}
|
|
this.$emit('change', this.ItemID, $event.target.checked);
|
|
}
|
|
},
|
|
watch:{
|
|
value(value) {
|
|
this.values = value;
|
|
}
|
|
}
|
|
};
|
|
</script>
|