|
|
@ -1,7 +1,7 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<v-row :class="`radio-group ${theme}`">
|
|
|
|
<v-row :class="`radio-group ${theme}`">
|
|
|
|
<v-col v-for="(item, index) in items" :key="index" :xl="item.size" class="pt-0" @click="changeSelected($event, item || {})">
|
|
|
|
<v-col v-for="(item, index) in items" :key="index" :xl="item.size" class="pt-0" @click="changeSelected($event, item || {})">
|
|
|
|
<div :class="{'active':value ? value == item.id : item.id == currentSelect, [item.theme]: true, ['bubble']: true}">
|
|
|
|
<div :class="{'active': isActive(item), [item.theme]: true, ['bubble']: true}">
|
|
|
|
<div class="body">
|
|
|
|
<div class="body">
|
|
|
|
<div :class="`icon ${(item.customIconClass) ? item.customIconClass : ''}`">
|
|
|
|
<div :class="`icon ${(item.customIconClass) ? item.customIconClass : ''}`">
|
|
|
|
<v-icon>WMi-{{ item.icon }}</v-icon>
|
|
|
|
<v-icon>WMi-{{ item.icon }}</v-icon>
|
|
|
@ -20,22 +20,54 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
items: {},
|
|
|
|
items: {default: () => ([])},
|
|
|
|
initialSelect: {default: 1},
|
|
|
|
|
|
|
|
value: {default: null},
|
|
|
|
value: {default: null},
|
|
|
|
|
|
|
|
multiple: {default: false},
|
|
|
|
name: {default: 'default_name'},
|
|
|
|
name: {default: 'default_name'},
|
|
|
|
theme: String,
|
|
|
|
theme: String,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
currentSelect: this.initialSelect,
|
|
|
|
currentSelect: this.value,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
changeSelected($event, item) {
|
|
|
|
changeSelected($event, item) {
|
|
|
|
|
|
|
|
if (Array.isArray(this.value) || this.multiple) {
|
|
|
|
|
|
|
|
this.changeSelectedMultiple(item);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.changeSelectedSingle(item);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
changeSelectedMultiple(item) {
|
|
|
|
|
|
|
|
if (!Array.isArray(this.currentSelect)) {
|
|
|
|
|
|
|
|
this.currentSelect = [];
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.currentSelect.includes(item.id)) {
|
|
|
|
|
|
|
|
const index = this.currentSelect.findIndex(x => x === item.id);
|
|
|
|
|
|
|
|
this.currentSelect.splice(index, 1);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.currentSelect.push(item.id);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
let items = [];
|
|
|
|
|
|
|
|
for (let value of this.items.filter(x => this.currentSelect.includes(x.id))) {
|
|
|
|
|
|
|
|
items.push({'name': this.name, 'value': value.value});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$emit('changeState', items);
|
|
|
|
|
|
|
|
this.$emit('input', this.currentSelect);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
changeSelectedSingle(item) {
|
|
|
|
this.currentSelect = item.id;
|
|
|
|
this.currentSelect = item.id;
|
|
|
|
this.$emit('changeState', {'name':this.name,'value':item.value})
|
|
|
|
this.$emit('changeState', {'name':this.name,'value': item.value});
|
|
|
|
this.$emit('input', item.id);
|
|
|
|
this.$emit('input', this.currentSelect);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
isActive(item) {
|
|
|
|
|
|
|
|
if (this.multiple) {
|
|
|
|
|
|
|
|
return this.value && Array.isArray(this.value) ? this.value.includes(item.id) : (Array.isArray(this.currentSelect) ? this.currentSelect.includes(item.id) : false );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return this.value ? this.value === item.id : item.id === this.currentSelect
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|