seepur/resources/scripts/applications/shared/components/Modal/Modal.vue
2020-03-17 18:16:34 -04:00

36 lines
1 KiB
Vue

<template>
<div :class="['modal', { 'is-active': !!isActive }]">
<div class="modal-background" @click="close()"></div>
<div class="modal-card">
<header class="modal-card-head" v-if="showTitle">
<p class="modal-card-title">{{title}}</p>
<button class="delete" aria-label="close" @click="close()"></button>
</header>
<section class="modal-card-body">
<slot></slot>
</section>
<footer class="modal-card-foot" v-if="showButtons">
<button class="button is-success" v-if="!!acceptText" @click="$emit('accept')">{{acceptText}}</button>
<button class="button" @click="close()" v-if="!!rejectText">{{rejectText}}</button>
</footer>
</div>
</div>
</template>
<script lang="ts">
export default {
props: ["title", "isActive", "acceptText", "rejectText"],
data(){
return {
showTitle: !!this.title,
showButtons: this.acceptText || this.rejectText
}
},
methods: {
close() {
this.$emit('close');
}
}
};
</script>