vuetifyjs/vuetify

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

Open

#20 576 ouverte le 14 oct. 2024

Voir sur GitHub
 (1 commentaire) (3 réactions) (0 assignés)TypeScript (7 139 forks)batch import
C: New ComponentT: featuregood first issue

Métriques du dépôt

Stars
 (40 995 stars)
Métriques de merge PR
 (Merge moyen 59j 10h) (8 PRs mergées en 30 j)

Description

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

Guide contributeur

Direction de recherche
Examinez le code source du composant `v file input` existant dans Vuetify pour comprendre comment les evenements de glisser deposer sont actuellement geres (ou non). Mettez en œuvre un retour visuel en ajoutant des classes CSS aux evenements `dragenter`, `dragover` et `dragleave` pour modifier la couleur ou le style de la bordure. Testez localement.
Stack technique
typescriptvue
Domaine
frontend
Type d'issue
Fonctionnalité
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 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
VueVuetifyCSS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
75