173 lines
4.5 KiB
Vue
173 lines
4.5 KiB
Vue
<!--**
|
||
* Copyright since 2007 PrestaShop SA and Contributors
|
||
* PrestaShop is an International Registered Trademark & Property of PrestaShop SA
|
||
*
|
||
* NOTICE OF LICENSE
|
||
*
|
||
* This source file is subject to the Open Software License (OSL 3.0)
|
||
* that is bundled with this package in the file LICENSE.md.
|
||
* It is also available through the world-wide-web at this URL:
|
||
* https://opensource.org/licenses/OSL-3.0
|
||
* If you did not receive a copy of the license and are unable to
|
||
* obtain it through the world-wide-web, please send an email
|
||
* to license@prestashop.com so we can send you a copy immediately.
|
||
*
|
||
* DISCLAIMER
|
||
*
|
||
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
||
* versions in the future. If you wish to customize PrestaShop for your
|
||
* needs please refer to https://devdocs.prestashop.com/ for more information.
|
||
*
|
||
* @author PrestaShop SA and Contributors <contact@prestashop.com>
|
||
* @copyright Since 2007 PrestaShop SA and Contributors
|
||
* @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
|
||
*-->
|
||
<template>
|
||
<div>
|
||
<transition name="fade">
|
||
<div class="modal show">
|
||
<div
|
||
class="modal-dialog modal-dialog-centered"
|
||
role="document"
|
||
>
|
||
<div
|
||
class="modal-content"
|
||
aria-labelledby="modalTitle"
|
||
aria-describedby="modalDescription"
|
||
v-click-outside="close"
|
||
>
|
||
<header
|
||
class="modal-header"
|
||
>
|
||
<slot name="header">
|
||
<h5 class="modal-title">
|
||
{{ modalTitle }}
|
||
</h5>
|
||
<button
|
||
type="button"
|
||
class="close"
|
||
data-dismiss="modal"
|
||
aria-label="Close"
|
||
@click.prevent.stop="close"
|
||
>
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</slot>
|
||
</header>
|
||
<section
|
||
class="modal-body"
|
||
>
|
||
<slot name="body" />
|
||
</section>
|
||
<footer class="modal-footer">
|
||
<slot
|
||
name="footer"
|
||
v-if="!confirmation"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="btn btn-outline-secondary"
|
||
@click.prevent.stop="close"
|
||
aria-label="Close modal"
|
||
>
|
||
{{ closeLabel }}
|
||
</button>
|
||
</slot>
|
||
|
||
<slot
|
||
name="footer-confirmation"
|
||
v-if="confirmation"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="btn btn-outline-secondary"
|
||
@click.prevent.stop="close"
|
||
aria-label="Close modal"
|
||
>
|
||
{{ cancelLabel }}
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
@click.prevent.stop="confirm"
|
||
>
|
||
{{ confirmLabel }}
|
||
</button>
|
||
</slot>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<slot name="outside" />
|
||
</div>
|
||
</transition>
|
||
<div
|
||
class="modal-backdrop show"
|
||
@click.prevent.stop="close"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import '@vue/directives/click-outside';
|
||
|
||
export default {
|
||
name: 'Modal',
|
||
props: {
|
||
confirmation: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false,
|
||
},
|
||
cancelLabel: {
|
||
type: String,
|
||
required: false,
|
||
default() {
|
||
return this.$t('modal.cancel');
|
||
},
|
||
},
|
||
confirmLabel: {
|
||
type: String,
|
||
required: false,
|
||
default() {
|
||
return this.$t('modal.apply');
|
||
},
|
||
},
|
||
closeLabel: {
|
||
type: String,
|
||
required: false,
|
||
default() {
|
||
return this.$t('modal.close');
|
||
},
|
||
},
|
||
modalTitle: {
|
||
type: String,
|
||
required: false,
|
||
default() {
|
||
return '';
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
close() {
|
||
this.$emit('close');
|
||
},
|
||
confirm() {
|
||
this.$emit('confirm');
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.modal.show {
|
||
display: block;
|
||
}
|
||
.modal-fade-enter-active, .modal-fade-leave-active {
|
||
transition: opacity .5s;
|
||
}
|
||
.modal-fade-enter, .modal-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||
opacity: 0;
|
||
}
|
||
</style>
|