mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
46 lines
1.6 KiB
Vue
46 lines
1.6 KiB
Vue
<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" 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>
|