app/components/Layout/Dialog.vue

<!-- Fenêtre de dialogue -->
<template>
  <v-dialog
    :model-value="show"
    persistent
    max-width="800"
    :content-class="contentClass"
    @update:modelValue="console.log($event); $emit($event)"
  >
    <v-card class="d-flex flex-row">
      <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 d-flex flex-column flex-grow-1">
        <v-card-title class="dialog-title">
          <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
  }
})
</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: 50px;
    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-ot-danger, #f56954));
    }
  }

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