PteroTheme/resources/assets/scripts/components/core/Modal.vue

<template>
    <transition name="modal">
        <div class="modal-mask" v-show="show" v-on:click="close">
            <div class="modal-container" @click.stop>
                <div v-on:click="close">
                    <Icon name="x"
                          class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
                          aria-label="Close modal"
                          role="button"
                    />
                </div>
                <slot/>
            </div>
        </div>
    </transition>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Icon from "./Icon.vue";

    export default Vue.extend({
        name: 'Modal',
        components: {Icon},

        props: {
            modalName: {type: String, default: 'modal'},
            show: {type: Boolean, default: false},
            closeOnEsc: {type: Boolean, default: true},
        },

        mounted: function () {
            if (this.$props.closeOnEsc) {
                document.addEventListener('keydown', e => {
                    if (this.show && e.key === 'Escape') {
                        this.close();
                    }
                })
            }
        },

        methods: {
            close: function () {
                this.$emit('close', this.$props.modalName);
            }
        },
    });
</script>