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  class="d-flex">

        <div class="dialog-type flex-column justify-center d-none d-sm-flex">
          <h3 class="d-flex"> <slot name="dialogType"></slot></h3>
        </div>

        <div class="dialog-container flex-column flex-grow-1">
          <div class="d-flex flex-column">
            <v-card-title class="dialog-title">
              <slot name="dialogTitle"></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: var(--v-ot_green-base, #00AD8E);
    color: #fff;
    width: 160px;
   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: 70vh;
    overflow: auto;
  }
  .modal-level-alert{
    .dialog-type{
      background: var(--v-ot_danger-base, #f56954);
    }
  }
  .modal-level-warning{
    .dialog-type{
      background: var(--v-ot_warning-base, #f39c12);
    }
  }
</style>