vuetifyjs/vuetify

[Feature Request] Add Drag and Drop Visual Feedback to `v-file-input` Component.

Open

#20.576 geöffnet am 14. Okt. 2024

Auf GitHub ansehen
 (1 Kommentar) (3 Reaktionen) (0 zugewiesene Personen)TypeScript (40.995 Stars) (7.139 Forks)batch import
C: New ComponentT: featuregood first issue

Beschreibung

Problem to solve

When local files are dragged onto the v-input-file component, there is an absence of clear visual feedback, which might cause confusion. Users will not be certain whether drag and drop functionality is operational.

Proposed solution

I propose adding visual changes, such as a distinct border color when a file is being dragged over the input area, similar to what the Quasar framework does. This would render it more intuitive for users.

image

Contributor Guide

Tech Stack
vuetypescriptcss
Domain
frontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
under 1 hour
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Basic knowledge of Vue componentsUnderstanding of CSS styling
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
80
Research-Richtung
The issue requests adding visual feedback (e.g., border color change) when files are dragged over the v file input component. The implementation can likely be achieved by adding a CSS class on drag events (dragenter, dragleave, drop) in the component. Refer to the existing Vuetify file input implementation (packages/vuetify/src/components/VFileInput/). Check how other components handle drag states and ensure accessibility (e.g., focus indicators). No linked PRs or maintainer comments indicate a specific approach; the proposed solution references Quasar's design as an example.