willaengine/resources/js/Global/components/Modals/Helper.vue

<template>
    <v-dialog v-model="modal" :width="properties.properties &&  properties.properties.width ? properties.properties.width : '40%'" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title :class="[properties.properties &&  properties.properties.color ? properties.properties.color : 'orange', 'lighten-5']" primary-title>
                <WM-PartTitle
                    class="WM-Margin-T-20"
                    :TitleFa="properties.name || 'عنوان'"
                    :TitleEn="properties.name_en || 'title'"
                    :color="properties.properties &&  properties.properties.color ? properties.properties.color : 'orange'"
                ></WM-PartTitle>
            </v-card-title>
            <v-card-text>
                <div
                    class="WM-Align-R WM-Margin-T-10"
                >{{ properties.description || 'پیام'}}</div>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    :color="properties.properties &&  properties.properties.color ? properties.properties.color : 'orange'"
                    depressed
                    dark
                    @click="$_closeModalStack()"
                >
                    <v-icon dark right>fas fa-trash-alt</v-icon>
                    متوجه شدم!
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import axios from 'axios';
import { url } from '@Common/mixins/urls';
export default {
    name: "modal_modal_helper",
    data: () => ({
        properties: {}
    }),
    computed: {
        ...mapGetters("modal", ["isModalStack", "getModal"]),
        modal: {
			get() {
                return this.isModalStack(this.$options.name);
			},
			set(value) {
				if (!value) {
					this.$_closeModalStack();
				}
			}
		},
    },
    methods: {
        async getDate() {
            if (this.modal) {
                let response = await axios.get(url('help', {help: this.getModal(this.$options.name).slug}));
                if (response && response.status == 200) {
                    this.properties = response.data.data;
                    this.properties.properties = (response.data.data.properties) ? JSON.parse(response.data.data.properties) : null;
                }
            }
        }
    },
    created() {
        this.getDate();
    },
};
</script>