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 (7.139 forks)batch import
C: New ComponentT: featuregood first issue

Métricas do repositório

Stars
 (40.995 stars)
Métricas de merge de PR
 (Mesclagem média 59d 10h) (8 fundiu PRs em 30d)

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

Direção de pesquisa
Examine o código fonte do componente `v file input` existente no Vuetify para entender como os eventos de arrastar são atualmente tratados (ou não). Implemente feedback visual adicionando classes CSS nos eventos `dragenter`, `dragover` e `dragleave` para alterar a cor ou estilo da borda. Teste localmente.
Pilha de tecnologia
typescriptvue
Domain
frontend
Tipo Issue
Funcionalidade
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.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
VueVuetifyCSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
75