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

<template>
    <v-row :class="`radio-group ${theme}`">
        <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[itemTheme]]: true, ['theme-' + item[itemColor] ]: true, ['bubble']: true}">
                <div class="body">
                    <div :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.3;
        transition: ease all 0.3s;
        cursor: pointer;
        margin: 0px;
    }
    .bubble .body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .bubble.text-left .body {
        padding-left: 30px;
    }
    .bubble:hover, .bubble.active {
        opacity: 1;
    }
    .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 '../../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;
        }
    }
    @each $Color,
    $Value in $backgrounds {
        .bubble.theme-#{$Color} {
            background-color: $Value;
        }
    }

    .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 .text {
        margin-right: 5px;
    }
    .bubble.fa-only .v-icon {
        font-size: 20px !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>