alireza_hassani
/
willaengine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://git.willaspace.com/WillaEngine-Project/WillaEngine into dev

Browse Source
pull/7/head
Saeid 4 years ago
parent f2a593fac7 c6c54c6b5b
commit c05e90fbc2
1 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File

37
resources/js/Global/components/Inputs/RadioGroup.vue
Unescape View File

@ -1,17 +1,17 @@
<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[itemSize]" class="pt-0" @click="changeSelected($event, item || {})">
<div :class="{'active': isActive(item), [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[itemIconClass]) ? item[itemIconClass] : ''}`">
<v-icon>WMi-{{ item.icon }}</v-icon> <v-icon>WMi-{{ item[itemIcon] }}</v-icon>
</div> </div>
<div class="text"> <div class="text">
<div class="Fa"> {{ item.title_fa }} </div> <div class="Fa"> {{ item[itemText] }} </div>
<div v-if="item.title_en" class="En"> {{ item.title_en }} </div> <div v-if="item[itemTextEn]" class="En"> {{ item[itemTextEn] }} </div>
</div> </div>
</div> </div>
<div class="footer mt-2" v-if="item.desc" v-html="item.desc" /> <div class="footer mt-2" v-if="item[itemDesc]" v-html="item[itemDesc]" />
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
@ -22,13 +22,20 @@
props: { props: {
items: {default: () => ([])}, items: {default: () => ([])},
value: {default: null}, value: {default: null},
itemValue: {default: 'id'},
itemText: {default: 'title_fa'},
itemIcon: {default: 'icon'},
itemTextEn: {default: 'title_en'},
itemSize: {default: 'size'},
itemIconClass: {default: 'customIconClass'},
itemDesc: {default: 'desc'},
multiple: {default: false}, multiple: {default: false},
name: {default: 'default_name'}, name: {default: 'default_name'},
theme: String, theme: String,
}, },
data() { computed: {
return { currentSelect() {
currentSelect: this.value, return this.value;
} }
}, },
methods: { methods: {
@ -43,11 +50,11 @@
if (!Array.isArray(this.currentSelect)) { if (!Array.isArray(this.currentSelect)) {
this.currentSelect = []; this.currentSelect = [];
} }
if (this.currentSelect.includes(item.id)) { if (this.currentSelect.includes(item[this.itemValue])) {
const index = this.currentSelect.findIndex(x => x === item.id); const index = this.currentSelect.findIndex(x => x === item[this.itemValue]);
this.currentSelect.splice(index, 1); this.currentSelect.splice(index, 1);
} else { } else {
this.currentSelect.push(item.id); this.currentSelect.push(item[this.itemValue]);
} }
let items = []; let items = [];
for (let value of this.items.filter(x => this.currentSelect.includes(x.id))) { for (let value of this.items.filter(x => this.currentSelect.includes(x.id))) {
@ -58,15 +65,15 @@
}, },
changeSelectedSingle(item) { changeSelectedSingle(item) {
this.currentSelect = item.id; this.currentSelect = item[this.itemValue];
this.$emit('changeState', {'name':this.name,'value': item.value}); this.$emit('changeState', {'name':this.name,'value': item.value});
this.$emit('input', this.currentSelect); this.$emit('input', this.currentSelect);
}, },
isActive(item) { isActive(item) {
if (this.multiple) { 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 ); 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 { } else {
return this.value ? this.value === item.id : item.id === this.currentSelect return this.value ? this.value === item[this.itemValue] : item[this.itemValue] === this.currentSelect
} }
} }
} }

Write Preview
Loading…
Cancel
Save