49 lines
2.0 KiB
JavaScript
49 lines
2.0 KiB
JavaScript
Vue.component('tt-modal', {
|
|
props: {
|
|
show: { type: Boolean, default: false },
|
|
title: { type: String, default: 'Modal Title' },
|
|
delete: { type: Boolean, default: true },
|
|
deleteText: { type: String, default: 'Delete' },
|
|
save: { type: Boolean, default: true },
|
|
saveText: { type: String, default: 'Save' },
|
|
},
|
|
watch: {
|
|
show(newVal) {
|
|
if (!newVal) {
|
|
this.$emit('close')
|
|
}
|
|
},
|
|
},
|
|
//language=Vue
|
|
template: `
|
|
<div class="modal show d-block"
|
|
role="dialog"
|
|
tabindex="-1"
|
|
style="background: rgba(0, 0, 0, 0.5);"
|
|
ref="modal"
|
|
@mousedown="$emit('update:show', false)"
|
|
@keydown.esc="$emit('update:show', false)"
|
|
v-if="show">
|
|
<div class="modal-dialog modal-lg" role="document" @mousedown.stop>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{title}}</h5>
|
|
<button type="button" class="close" @click="$emit('update:show', false)">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<slot name="footer">
|
|
<button v-if="save" class="btn btn-primary" @click="$emit('submit')">{{saveText}}</button>
|
|
<button v-if="$props.delete" class="btn btn-danger" @click="$emit('delete')">{{deleteText}}</button>
|
|
<button class="btn btn-secondary" @click="$emit('update:show', false)">Close</button>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}) |