<template>
<transition name="modal">
   <div class="modal-mask">
      <!-- :: styles bootstrap :: -->
      <div class="modal-dialog" :class="modalDialogClass">
         <div class="modal-content">
            <div class="modal-header">
               <slot name="header"></slot>
               <button class="close sc-button grey" @click="$emit('close')">
                  <i class="fa fa-times" aria-hidden="true"></i></button>
            </div>
            <div class="modal-body up" style="overflow-y: unset;">
               <slot name="body-fixed"></slot>
            </div>
            <div class="modal-body">
               <slot name="body"></slot>
            </div>
            <div class="modal-footer">
               <button class="sc-button cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
               <slot name="footer"></slot>
            </div>
         </div>
      </div>
      <!-- :: end styles bootstrap :: -->
   </div>
</transition>
</template> 

<script>
/*
 *    This Modal component is a mix between :
 *    - Vue3 modal implementation 
 *      => with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
 *      => with slot we can pass content from parent component
 *      => some classes are passed from parent component
 *    - Bootstrap 4.6 _modal.scss module
 *      => using bootstrap css classes, the modal have a responsive behaviour, 
 *      => modal design can be configured using css classes (size, scroll)
 */
export default {
   name: 'Modal',
   props: ['modalDialogClass'],
   emits: ['close']
}
</script>
