exchange-2.0/resources/assets/vue/components/general/forms/ModalFormComponent.vue

<template>
    <modal-component class="animate__animated animate__fast animate__fadeInDownBig" :size="size" :type="data ? 'editModal' : 'createModal'">
        <transition-component group enter-class="animate__animated animate__fadeInDown animate__faster" leave-class="animate__animated animate__fadeOutUp animate__faster">
            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section+'.form')" ></loading-component>
            <div class="row" key="2" v-show="!$store.getters.isLoading(section+'.form')">
                <div class="col">
                    <slot name="form" :section="section" :data="data"></slot>
                </div>
            </div>
        </transition-component>
    </modal-component>
</template>
<script>
    export default {
        props: {
            section: {
                type: String,
                required: true
            },
            'size': {
                type: String,
                default: ''
            },
            data: {
                type: Object,
                default: null
            }
        }

    }
</script>