app/components/Layout/Dialog.vue

<!-- Fenêtre de dialogue -->
<template>
  <v-dialog
    :model-value="show"
    persistent
    :max-width="maxWidth"
    :content-class="contentClass"
  >
    <v-card class="d-flex flex-row">
      <div :class="'dialog-type flex-column justify-center d-none d-sm-flex theme-' + theme">
        <h3 class="d-flex">
          <slot name="dialogType" />
        </h3>
      </div>

      <div class="dialog-container d-flex flex-column flex-grow-1">
        <v-card-title class="dialog-title theme-neutral">
          <slot name="dialogTitle" />
        </v-card-title>

        <div class="dialog-text-container">
          <slot name="dialogText" />
        </div>

        <v-spacer />
        <v-divider />

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

<script setup lang="ts">
const props = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  contentClass: {
    type: String,
    required: false
  },
  theme: {
    type: String,
    required: false,
    default: 'primary',
  },
  maxWidth: {
    type: [Number, String],
    required: false,
    default: 800
  }
})
</script>

<style lang="scss" scoped>
  .dialog-title {
    padding-left: 40px;
    font-weight: normal;
  }

  .dialog-type {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    min-height: 400px;
    padding: 25px 10px;

   h3 {
     font-size: 25px;
     font-weight: normal;
     writing-mode: vertical-lr;
     transform: rotate(-180deg);
    }
  }

  .dialog-text-container {
    max-height: 70vh;
    overflow: auto;
  }

  .modal-level-alert {
    .dialog-type{
      background: rgb(var(--v-theme-danger, #f56954));
    }
  }

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