antares/src/renderer/components/BaseConfirmModal.vue

115 lines
2.8 KiB
Vue
Raw Normal View History

2020-05-23 13:32:14 +02:00
<template>
<div class="modal active" :class="modalSizeClass">
2020-05-23 13:32:14 +02:00
<a class="modal-overlay" @click="hideModal" />
<div class="modal-container">
2020-08-12 18:11:48 +02:00
<div v-if="hasHeader" class="modal-header pl-2">
2020-05-23 13:32:14 +02:00
<div class="modal-title h6">
<slot name="header" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasDefault" class="modal-header">
<div class="modal-title h6">
<slot />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasBody" class="modal-body">
<a
v-if="!hasHeader && !hasDefault"
class="btn btn-clear float-right"
@click="hideModal"
/>
<div class="content">
<slot name="body" />
</div>
</div>
<div v-if="!hideFooter" class="modal-footer">
2020-05-23 13:32:14 +02:00
<button
class="btn btn-primary mr-2"
2020-10-01 15:08:35 +02:00
@click.stop="confirmModal"
2020-05-23 13:32:14 +02:00
>
{{ confirmText || $t('word.confirm') }}
2020-05-23 13:32:14 +02:00
</button>
<button
class="btn btn-link"
@click="hideModal"
>
{{ cancelText || $t('word.cancel') }}
2020-05-23 13:32:14 +02:00
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BaseConfirmModal',
props: {
size: {
type: String,
2020-11-13 12:39:40 +01:00
validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
default: 'small'
},
hideFooter: {
type: Boolean,
default: false
},
confirmText: String,
cancelText: String
},
2020-05-23 13:32:14 +02:00
computed: {
hasHeader () {
return !!this.$slots.header;
},
hasBody () {
return !!this.$slots.body;
},
hasDefault () {
return !!this.$slots.default;
},
modalSizeClass () {
if (this.size === 'small')
return 'modal-sm';
2020-11-13 12:39:40 +01:00
if (this.size === '400')
return 'modal-400';
else if (this.size === 'large')
return 'modal-lg';
else return '';
2020-05-23 13:32:14 +02:00
}
},
2021-02-27 18:29:47 +01:00
created () {
window.addEventListener('keydown', this.onKey);
},
beforeDestroy () {
window.removeEventListener('keydown', this.onKey);
},
2020-05-23 13:32:14 +02:00
methods: {
confirmModal () {
this.$emit('confirm');
this.hideModal();
},
hideModal () {
this.$emit('hide');
2021-02-27 18:29:47 +01:00
},
onKey (e) {
e.stopPropagation();
if (e.key === 'Escape')
this.hideModal();
2020-05-23 13:32:14 +02:00
}
}
};
</script>
<style scoped>
2020-11-13 12:39:40 +01:00
.modal-400 .modal-container {
max-width: 400px;
}
.modal.modal-sm .modal-container {
padding: 0;
}
2020-05-23 13:32:14 +02:00
</style>