app/components/Layout/Dialog.vue

<!-- Fenêtre de dialogue -->
<template>
  <v-dialog
    :value="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" />
          </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" />
            </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 setup lang="ts">
const props = defineProps({
  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: rgb(var(--v-theme-ot-green, #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: rgb(var(--v-theme-ot-danger, #f56954));
    }
  }

  .modal-level-warning {
    .dialog-type{
      background: rgb(var(--v-theme-ot-warning, #f39c12));
    }
  }
</style>