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

resources/js/Global/components/Inputs/RadioGroup.vue

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