app/components/Layout/Dialog.vue

<!-- Fenêtre de dialogue -->
<template>
  <v-dialog
    :model-value="_show"
    :persistent="true"
    :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 theme-' + theme">
          <v-icon icon="fa-solid fa-bullhorn" width="25" height="25" />
          <span class="pt-4"><slot name="dialogType" /></span>
        </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, Object],
    required: true,
  },
  contentClass: {
    type: String,
    required: false,
    default: '',
  },
  theme: {
    type: String,
    required: false,
    default: 'primary',
  },
  maxWidth: {
    type: [Number, String],
    required: false,
    default: 800,
  },
})

// @ts-expect-error This is just to avoid the error with the prop's type of v-dialog
const _show = computed(() => props.show) as boolean
</script>

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

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

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

  .v-icon {
    font-size: 25px;
    transform: rotate(90deg);
    padding-right: 25px;
  }
}

.dialog-container {
  overflow-x: scroll;
}

.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));
  }
}

:deep(.v-card-actions) {
  min-height: 62px;
}
</style>