42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<template>
|
|
<transition name="fade">
|
|
<div :class="['modal', { 'is-active': !!isActive }]" v-if="!!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>
|
|
</transition>
|
|
</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>
|