seepur/resources/scripts/applications/shared/components/Modal/Modal.vue
2020-05-01 13:24:22 -04:00

41 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>