<template>
    <div>
        <!-- Modal -->
        <div v-if="visible" class="modal show" aria-modal="true" role="dialog" style="display: block;overflow-y: auto;
    overflow-x: hidden;">
            <div class="modal-dialog modal-lg" :class="variant" role="document">
                <div class="modal-content">

                    <slot name="header"></slot>
                    <div class="modal-body">
                        <slot name="body"></slot>
                    </div>

                    <slot name="footer"></slot>

                </div>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    mounted() {

    },
    props: {
        visible: Boolean,

        variant: String,
    },

    watch: {
        visible: function (newVal, oldVal) { // watch it

        }
    }

}
</script>
<style>
.modal-full {
    max-width: 90vw !important;
}
</style>