vuetifyjs/vuetify

[Feature Request] Add duration Prop to Automatically Dismiss v-alert

Open

#20 409 ouverte le 1 sept. 2024

Voir sur GitHub
 (1 commentaire) (5 réactions) (0 assignés)TypeScript (40 995 stars) (7 139 forks)batch import
T: enhancementT: featuregood first issue

Description

Problem to solve

Currently, v-alert components remain visible until manually dismissed, requiring developers to implement a setTimeout() to hide the alert after a certain period. This can lead to repetitive code.

Proposed solution

Introduce a duration prop to the v-alert component. This prop accepts a number representing the duration (in milliseconds) for which the alert should remain visible before automatically closing usage example :

<v-alert :duration="5000" text=" This alert will automatically close after 5 seconds."/>

Guide contributeur

Stack technique
typescriptvue
Domaine
frontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
fresh
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
Basic Vue component knowledgeFamiliarity with Vuetify v alert
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
85
Direction de recherche
The implementation should add a `duration` prop to the VAlert component. Look at the VAlert source file (likely packages/vuetify/src/components/VAlert/VAlert.ts) for existing props and patterns. The auto dismiss behavior should use setTimeout and emit a close like event after the duration expires. Ensure the timer is cleared on component unmount or prop changes. Write unit tests in the corresponding spec file.