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.
241 lines
7.2 KiB
241 lines
7.2 KiB
<template>
|
|
<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 || {})">
|
|
<div :class="{'active': isActive(item), [item[itemTheme]]: true, ['theme-' + item[itemColor] ]: true, ['bubble']: true}">
|
|
<div class="body">
|
|
<div v-if="item[itemIcon]" :class="`icon ${(item[itemIconClass]) ? item[itemIconClass] : ''}`">
|
|
<v-icon>WMi-{{ item[itemIcon] }}</v-icon>
|
|
</div>
|
|
<div class="text">
|
|
<div class="Fa"> {{ item[itemText] }} </div>
|
|
<div v-if="item[itemTextEn]" class="En"> {{ item[itemTextEn] }} </div>
|
|
</div>
|
|
</div>
|
|
<div class="footer mt-2" v-if="item[itemDesc]" v-html="item[itemDesc]" />
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
items: {default: () => ([])},
|
|
value: {default: null},
|
|
itemValue: {default: 'id'},
|
|
itemTheme: {default: 'theme'},
|
|
itemColor: {default: 'color'},
|
|
itemText: {default: 'title_fa'},
|
|
itemIcon: {default: 'icon'},
|
|
itemTextEn: {default: 'title_en'},
|
|
itemSize: {default: 'size'},
|
|
itemIconClass: {default: 'customIconClass'},
|
|
itemDesc: {default: 'desc'},
|
|
multiple: {default: false},
|
|
name: {default: 'default_name'},
|
|
theme: String,
|
|
},
|
|
computed: {
|
|
currentSelect: {
|
|
get() {
|
|
return this.value;
|
|
},
|
|
set(value) {
|
|
this.$emit('input', value);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
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[this.itemValue])) {
|
|
const index = this.currentSelect.findIndex(x => x === item[this.itemValue]);
|
|
this.currentSelect.splice(index, 1);
|
|
} else {
|
|
this.currentSelect.push(item[this.itemValue]);
|
|
}
|
|
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);
|
|
|
|
},
|
|
changeSelectedSingle(item) {
|
|
this.currentSelect = item[this.itemValue];
|
|
this.$emit('changeState', {'name':this.name,'value': item.value});
|
|
},
|
|
isActive(item) {
|
|
if (this.multiple) {
|
|
return this.value && Array.isArray(this.value) ? this.value.includes(item[this.itemValue]) : (Array.isArray(this.currentSelect) ? this.currentSelect.includes(item[this.itemValue]) : false );
|
|
} else {
|
|
return this.value ? this.value === item[this.itemValue] : item[this.itemValue] === this.currentSelect
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.radio-group {
|
|
margin: 0px;
|
|
}
|
|
.bubble {
|
|
width: 100%;
|
|
border: 2px solid;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
padding: 12px;
|
|
opacity: 0.4;
|
|
transition: ease all 0.3s;
|
|
cursor: pointer;
|
|
margin: 0px;
|
|
}
|
|
.fill-on-active .bubble {
|
|
opacity: 0.6;
|
|
}
|
|
.bubble .body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.bubble.text-left .body {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.bubble .v-icon {
|
|
font-size: 45px !important;
|
|
line-height: 45px;
|
|
}
|
|
|
|
.bubble.right {
|
|
border-top-right-radius: 0px !important;
|
|
}
|
|
.bubble.left {
|
|
border-top-left-radius: 0px !important;
|
|
}
|
|
.bubble.text-right .body {
|
|
justify-content: start;
|
|
}
|
|
.bubble.text-right .footer {
|
|
text-align: right;
|
|
}
|
|
|
|
.bubble.text-left .body {
|
|
justify-content: flex-end;
|
|
}
|
|
.bubble .body .text {
|
|
text-align: right;
|
|
}
|
|
|
|
//------------------------Theme Colors
|
|
@import "resources/js/Global/scss/_vars.scss";
|
|
@each $Color,
|
|
$Value in $colors {
|
|
.bubble.theme-#{$Color} {
|
|
border-color: $Value;
|
|
background-color: #ffe5e9;
|
|
color: $Value;
|
|
}
|
|
.bubble.theme-#{$Color} .v-icon {
|
|
color: $Value;
|
|
}
|
|
.fill-on-active .bubble.theme-#{$Color}:hover, .fill-on-active .bubble.theme-#{$Color}.active {
|
|
background-color: $Value;
|
|
color: #fff;
|
|
}
|
|
.fill-on-active .bubble.theme-#{$Color}:hover .v-icon, .fill-on-active .bubble.theme-#{$Color}.active .v-icon {
|
|
color: #fff;
|
|
}
|
|
}
|
|
@each $Color,
|
|
$Value in $backgrounds {
|
|
.bubble.theme-#{$Color} {
|
|
background-color: $Value;
|
|
}
|
|
}
|
|
|
|
.bubble:hover, .bubble.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.bubble .En {
|
|
letter-spacing: 5px;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
margin-right: -5px;
|
|
}
|
|
.bubble .Fa {
|
|
font-size: 18px;
|
|
}
|
|
.bubble.title-bold .Fa {
|
|
font-size: 22px;
|
|
font-family: 'iranyekan-extrabold', sans-serif;
|
|
}
|
|
|
|
.bubble .footer {
|
|
font-size: 14px;
|
|
color: #676767;
|
|
}
|
|
|
|
|
|
|
|
//------------------------Farsi Title Only
|
|
.bubble.fa-only {
|
|
padding: 8px;
|
|
border-radius: 10px;
|
|
border: 1px solid;
|
|
}
|
|
.bubble.fa-only .v-icon {
|
|
font-size: 20px !important;
|
|
line-height: 20px;
|
|
margin-left: 5px;
|
|
}
|
|
.bubble.fa-only.icon-large .v-icon {
|
|
font-size: 25px !important;
|
|
line-height: 20px;
|
|
}
|
|
.bubble.fa-only .Fa {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.bubble.icon-only {
|
|
padding: 6px 4px 2px 4px;
|
|
border-radius: 10px;
|
|
border: 1px solid;
|
|
}
|
|
.bubble.icon-only .v-icon {
|
|
font-size: 20px !important;
|
|
line-height: 20px;
|
|
}
|
|
|
|
//-----------------------------------Shadow hover
|
|
.radio-group.shadowed .bubble.theme-black:hover, .radio-group.shadowed .bubble.theme-black.active {
|
|
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.radio-group.shadowed .bubble.theme-red:hover, .radio-group.shadowed .bubble.theme-red.active {
|
|
box-shadow: 0 10px 20px 0 rgba(238, 53, 82, 0.2);
|
|
}
|
|
.radio-group.shadowed .bubble.theme-cyan:hover, .radio-group.shadowed .bubble.theme-cyan.active {
|
|
box-shadow: 0 10px 20px 0 rgba(57, 197, 210, 0.2);
|
|
}
|
|
|
|
//-----------------------------------Small Padding
|
|
.radio-group.sm-pad .col {
|
|
padding: 1px;
|
|
}
|
|
|
|
|
|
|
|
</style>
|