app/components/Layout/Alert/Content.vue

<!-- Message d'alerte -->

<template>
  <v-alert
    v-model="show"
    :type="alert.type"
    class="position"
    border="left"
    width="400"
    dismissible
    transition="fade-transition"
    @mouseover="onMouseOver"
    @mouseout="onMouseOut"
  >
    <ul v-if="alert.messages.length > 1">
       <li v-for="message in alert.messages">
        {{ $t(message) }}
      </li>
    </ul>
    <span v-else>{{ $t(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({
    alert: {
      type: Object as () => Alert,
      required: true
    }
})

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(2000)
}

clearAlert()

</script>

<style scoped>
</style>