seepur/resources/scripts/applications/shared/components/Modal/Modal.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>