vuetifyjs/vuetify

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

Open

#20,409 opened on Sep 1, 2024

View on GitHub
 (2 comments) (5 reactions) (0 assignees)TypeScript (7,139 forks)batch import
T: enhancementT: featuregood first issue

Repository metrics

Stars
 (40,995 stars)
PR merge metrics
 (Avg merge 36d 4h) (23 merged PRs in 30d)

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

Research direction
Add a duration prop to v alert component; use setTimeout auto dismiss, clear timeout on unmount, emit 'dismissed' event. Update tests and documentation.
Tech stack
vuetypescript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
VueTypeScriptGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75