36 lines
1 KiB
Vue
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>
|