2
0
mirror of https://github.com/frappe/books.git synced 2024-09-20 19:29:02 +00:00
books/ui/components/Modal/Modal.vue
Anto Christopher b96ea40b99 Add error modal (#82)
* Add error modal

* Initialize frappe.error and frappe.events. Code formatting

* Fix indentation
2018-09-21 10:58:53 +05:30

71 lines
1.7 KiB
Vue

<template>
<div :class="['modal fade show d-block']" @click.self="onBackdropClick"
tabindex="-1" role="dialog" aria-labelledby="frappe-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content shadow">
<div class="modal-header" v-if="!noHeader">
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="closeModal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body modal-height p-0">
<component ref="modalComponent" :is="component" v-bind="props" v-on="events"/>
</div>
<div class="modal-footer" v-if="!noFooter">
<!-- <f-button secondary @click="closeModal">{{ _('Close') }}</f-button> -->
<f-button primary v-if="primaryAction" @click="onPrimaryAction">{{ primaryAction.label }}</f-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "Modal Title"
},
primaryAction: {
type: Object,
default: null
},
component: {
type: Object
},
props: {
type: Object
},
events: {
type: Object
},
noHeader: {
type: Boolean,
default: false
},
noFooter: {
type: Boolean,
default: false
}
},
methods: {
closeModal() {
this.$emit('close-modal');
},
onPrimaryAction() {
this.primaryAction.handler(this.$refs.modalComponent);
},
onBackdropClick(e) {
this.closeModal();
}
}
};
</script>
<style scoped>
.modal-height {
max-height: 80vh;
overflow: auto;
}
</style>