app/components/Layout/Alert/Content.vue

<!-- Message d'alerte -->

<template>
  <v-alert
    v-model="show"
    :type="props.alert.type"
    class="position"
    border="left"
    width="400"
    dismissible
    transition="fade-transition"
    @mouseover="onMouseOver"
    @mouseout="onMouseOut"
  >
    <ul v-if="props.alert.messages.length > 1">
       <li v-for="message in props.alert.messages">
        {{ $t(message) }}
      </li>
    </ul>
    <span v-else>{{ $t(props.alert.messages[0]) }}</span>
  </v-alert>
</template>

<script setup lang="ts">
import {Alert} from '~/types/interfaces'
import {Ref} from "@vue/reactivity";
import {usePageStore} from "~/stores/page";

const props = defineProps({
  /**
   * The alert object to display
   */
  alert: {
    type: Object as () => Alert,
    required: true
  },
  /**
   * The time after which the alert disappears
   */
  timeout: {
    type: Number,
    required: false,
    default: 3000
  }
})

const show: Ref<boolean> = ref(true)
let timeout: any = null

const pageStore = usePageStore()

/**
 * Retire l'alerte après `time` (en ms)
 * @param time
 */
const clearAlert = (time: number = 2000) => {
  timeout = setTimeout(() => {
    show.value = false
    pageStore.removeSlowlyAlert()
  }, time)
}

/**
 * Réinitialise et suspend le délai avant le retrait de l'alerte au survol du curseur
 */
const onMouseOver = () => {
  clearTimeout(timeout)
}

/**
 * Relance le timer avant le retrait de l'alerte lorsque le curseur quitte l'alerte
 */
const onMouseOut = () => {
  clearAlert(props.timeout)
}

clearAlert()

</script>

<style scoped>
</style>