vuetifyjs/vuetify

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

Open

#20.576 aberto em 14 de out. de 2024

Ver no GitHub
 (1 comment) (3 reactions) (0 assignees)TypeScript (40.995 stars) (7.139 forks)batch import
C: New ComponentT: featuregood first issue

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

Guia do colaborador

Pilha de tecnologia
vuetypescriptcss
Domain
frontend
Tipo Issue
feature
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
under 1 hour
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
fresh
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Basic knowledge of Vue componentsUnderstanding of CSS styling
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80
Direção de pesquisa
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.