vuetifyjs/vuetify

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

Open

Aperta il 14 ott 2024

Vedi su GitHub
 (1 commento) (3 reazioni) (0 assegnatari)TypeScript (40.995 star) (7139 fork)batch import
C: New ComponentT: featuregood first issue

Descrizione

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

Guida contributor

Tech stack
vuetypescriptcss
Dominio
frontend
Tipo issue
feature
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
under 1 hour
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
fresh
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
Basic knowledge of Vue componentsUnderstanding of CSS styling
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
80
Direzione di ricerca
La richiesta riguarda l'aggiunta di feedback visivo (ad esempio, cambio del colore del bordo) quando i file vengono trascinati sopra il componente v file input. L'implementazione può probabilmente essere ottenuta aggiungendo una classe CSS sugli eventi di trascinamento (dragenter, dragleave, drop) nel componente. Fare riferimento all'implementazione esistente dell'input file di Vuetify (packages/vuetify/src/components/VFileInput/). Verificare come altri componenti gestiscono gli stati di trascinamento e assicurare l'accessibilità (ad esempio, indicatori di focus). Nessun PR collegato o commento del maintainer indica un approccio specifico; la soluzione proposta fa riferimento al design di Quasar come esempio.