|
|
@ -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[itemSize]" :lg="item[itemSize]" class="pt-0" @click="changeSelected($event, item || {})">
|
|
|
|
<v-col v-for="(item, index) in items" :key="index" :xl="item[itemSize]" :lg="item[itemSize]" class="pt-0" @click="changeSelected($event, item || {})">
|
|
|
|
<div :class="{'active': isActive(item), [item[itemTheme]]: true, ['theme-' + item[itemColor] ]: true, ['bubble']: true}">
|
|
|
|
<div :disabled="item[itemDisabled]" :class="{'active': isActive(item), [item[itemTheme]]: true, ['theme-' + item[itemColor] ]: true, ['bubble']: true}">
|
|
|
|
<div class="body">
|
|
|
|
<div class="body">
|
|
|
|
<div v-if="item[itemIcon]" :class="`icon ${(item[itemIconClass]) ? item[itemIconClass] : ''}`">
|
|
|
|
<div v-if="item[itemIcon]" :class="`icon ${(item[itemIconClass]) ? item[itemIconClass] : ''}`">
|
|
|
|
<v-icon>WMi-{{ item[itemIcon] }}</v-icon>
|
|
|
|
<v-icon>WMi-{{ item[itemIcon] }}</v-icon>
|
|
|
@ -34,6 +34,7 @@
|
|
|
|
multiple: {default: false},
|
|
|
|
multiple: {default: false},
|
|
|
|
name: {default: 'default_name'},
|
|
|
|
name: {default: 'default_name'},
|
|
|
|
theme: String,
|
|
|
|
theme: String,
|
|
|
|
|
|
|
|
itemDisabled: {default: 'disabled'},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
currentSelect: {
|
|
|
|
currentSelect: {
|
|
|
@ -47,6 +48,9 @@
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
changeSelected($event, item) {
|
|
|
|
changeSelected($event, item) {
|
|
|
|
|
|
|
|
if (item[this.itemDisabled]) {
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
if (Array.isArray(this.value) || this.multiple) {
|
|
|
|
if (Array.isArray(this.value) || this.multiple) {
|
|
|
|
this.changeSelectedMultiple(item);
|
|
|
|
this.changeSelectedMultiple(item);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
@ -165,7 +169,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bubble:hover, .bubble.active {
|
|
|
|
.bubble:not([disabled=disabled]):hover, .bubble.active {
|
|
|
|
opacity: 1;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|