vuetifyjs/vuetify

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

Open

#20409 opened on Sep 1, 2024

View on GitHub
 (1 comment) (5 reactions) (0 assignees)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."/>

Contributor guide

Tech stack
typescriptvue
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic Vue component knowledgeFamiliarity with Vuetify v alert
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
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.