app_vue2/components/Layout/Dialog.vue

<!-- Fenêtre de dialogue -->

<template>
  <v-dialog
    v-model="show"
    persistent
    max-width="800"
    :content-class="contentClass"
  >
    <v-card>
      <div class="d-flex">
        <div class="dialog-type flex-column justify-center d-none d-sm-flex">
          <h3 class="d-flex"> <slot name="dialogType">Type de la modal</slot></h3>
        </div>
        <div class="dialog-container">
          <v-card-title class="dialog-title">
            <slot name="dialogTitle">Titre de la modal</slot>
          </v-card-title>
          <div class="dialog-text-container">
            <slot name="dialogText" />
          </div>


          <v-divider />

          <v-card-actions class="justify-center">
            <slot name="dialogBtn" />
          </v-card-actions>
        </div>

      </div>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    show: {
      type: Boolean,
      required: true
    },
    contentClass: {
      type: String,
      required: false
    }
  }
})
</script>

<style lang="scss" scoped>
  .dialog-title{
    background: #e6e6e6;
    padding-left: 40px;
    font-weight: normal;
  }
  .dialog-type{
    background: #00AD8E;
    color: #fff;
   h3{
     font-size: 25px;
     font-weight: normal;
     writing-mode: tb-lr;
     writing-mode: vertical-lr;
     transform: rotate(
         -180deg);
     padding: 10px;
    }
  }
  .dialog-text-container{
    max-height: 60vh;
    overflow: auto;
  }
  .modal-level-alert{
    .dialog-type{
      background: #f56954;
    }
  }
  .modal-level-warning{
    .dialog-type{
      background: #f39c12;
    }
  }
</style>