<template>
    <v-dialog v-model="modal" :max-width="maxWidth" :width="width" :transition="transition">
        <slot :modal="modal" :data="data" v-if="modal" ></slot>
    </v-dialog>
</template>


<script>
    import {mapGetters} from "vuex";
    export default {
        props: {
            width:{default: null},
            maxWidth:{default: null},
            name:{default: null},
            transition:{default: 'slide-x-transition'},
        },
        computed: {
            ...mapGetters("modal", ["isModal", "getModal"]),
            modal: {
                get() {
                    return this.isModal(this.modalName);
                },
                set(value) {
                    if (!value) {
                        this.$_closeModal();
                    }
                }
            },
            modalName() {
                return this.name ? this.name : this.$parent.$options.name;
            },
            data() {
                return this.getModal(this.modalName);
            }
        },

    }
</script>
