32 lines
770 B
Vue
32 lines
770 B
Vue
<template>
|
|
<div class="feedback" role="alert">
|
|
<Icon class="feedback-icon" icon="fa-solid fa-circle-exclamation" aria-hidden="true"></Icon>
|
|
<div class="error-message">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
/**
|
|
* Message d'erreur en rouge (role="alert" : annoncé immédiatement). Slot par défaut : le message.
|
|
*/
|
|
</script>
|
|
<style scoped>
|
|
/* Spécificité de « div » (comme avant) : une classe posée par le parent reste prioritaire */
|
|
div:where(.feedback) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--text-error);
|
|
animation: u-fade-in 0.5s ease-in-out;
|
|
}
|
|
|
|
.feedback-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.error-message {
|
|
display: flex;
|
|
text-align: justify;
|
|
}
|
|
</style> |