[Vuetify] MessageBox

MessageBox.vue

<template>
  <v-dialog
    v-model="isOpen"
    persistent
    max-width="500px"
    transition="dialog-transition"
  >
    <v-card>
      <v-card-text class="text-center pt-5" v-if="params.icon">
        <v-icon ref="icon" :color="params.iconColor" size="91">
          {{ params.icon }}
        </v-icon>
      </v-card-text>

      <v-card-text
        v-if="params.title"
        class="text-h6 text-center justify-center"
      >
        {{ params.title }}
      </v-card-text>

      <v-card-text
        v-if="params.message"
        class="text-subtitle-1 text-center"
        v-html="params.message"
      >
      </v-card-text>

      <v-card-actions>
        <v-btn v-if="params.rejectButtonShow" @click="reject" text>
          {{ params.rejectButtonLabel }}
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn v-if="params.acceptButtonShow" @click="accept" text>
          {{ params.acceptButtonLabel }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import mitt from "mitt";

const DataDefault = {
  icon: "mdi-alert-outline",
  iconColor: "warning",

  title: null,
  message: null,

  acceptButtonShow: true,
  acceptButtonLabel: "OK",

  rejectButtonShow: true,
  rejectButtonLabel: "Annuler",
};

export default {
  data() {
    return {
      isOpen: false,

      params: {
        ...DataDefault,
      },
    };
  },

  created() {
    this.events = mitt();
  },

  methods: {
    open(props) {
      this.params = { ...DataDefault, ...props };

      this.isOpen = true;

      return new Promise((resolve) => {
        this.events.on("accept", () => resolve(true));
        this.events.on("reject", () => resolve(false));
      });
    },
    reject() {
      this.isOpen = false;
      this.events.emit("reject");
    },
    accept() {
      this.isOpen = false;
      this.events.emit("accept");
    },
  },
};
</script>

<style lang="scss"></style>