Barista: Combobox: Novo componente
Solicitação de recurso
Resumo
Adicione um componente combobox à biblioteca.
Descrição do Recurso
Estamos lidando com muitos dados. Nosso dt-select realmente não funciona com um grande conjunto de opções. A funcionalidade de pesquisa para o dt-select é a mesma que no select nativo. Portanto, um usuário só pode pular para uma opção que comece com a tecla que o usuário pressionou.
Isso é realmente limitante em casos de uso com grandes conjuntos de dados.
Um componente combobox que pode ser construído a partir de uma entrada com um dt-autocomplete anexado pode nos ajudar nisso.
A entrada precisa mostrar um texto de espaço reservado.
A combobox deve usar os mesmos estilos que o dt-select.
Comportamento
Ao clicar, o menu suspenso abre uma lista de vários itens para o usuário escolher e o cursor é colocado no campo de entrada. Assim que os usuários começarem a digitar, a combobox deve emitir um evento debelado e mostrar um indicador de carregamento dentro da entrada semelhante ao que já temos no campo de filtro.
Depois que um item é selecionado, a lista suspensa fecha e o campo de entrada é atualizado de acordo.
Para a primeira versão do combobox, sugiro não se preocupar com a rolagem virtual. Podemos esperar que a filtragem dos itens seja feita no lado do servidor. Os itens preenchidos no cliente podem ser renderizados. Podemos melhorar o manuseio de grandes conjuntos de dados em uma segunda versão.
Para a primeira versão, eu sugeriria usar o dt-autocomplete, mas devemos considerar a criação de um menu suspenso simplificado com um datalist.
- [] Escrever proposta de API
- [] Crie lib e demo
- [] Adicione o menu suspenso e crie estilos adicionais para ter o cursor dentro do dtInput.
- [] Adicionar evento de entrada debelado + indicador de carregamento
- [] Adicionar testes de unidade
- [] Adicionar testes e2e
Anexos
ffriedl89
Todos 8 comentários
Como uma referência de acessibilidade, por favor, considere a recomendação de prática recomendada da caixa de combinação WAI-ARIA com pop-up da caixa de listagem
tomheller
em 2 mar. 2020
Caixa de combinação de propostas de API
Estrutura avançada
<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
<dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>
Entradas
| Nome Tipo | Descrição
| ------------- | ------------- | ------------- |
| value | string \| undefined | Valor inicial da entrada |
| placeholder | string \| undefined | Espaço reservado para a entrada |
Saídas
| Nome Tipo | Descrição
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Evento emitido quando um novo valor foi selecionado |
| filterChanges | EventEmitter<string> | Evento emitido quando o filtro muda |
Projeção de conteúdo
opção dt
dt-optgroup
Lista de controle
- [] suporte de teclado adequado (seta: cima para baixo)
- [] WAI-ARIA
- [] considere a compatibilidade do ngForms
- [] considere a validação
lukett89
em 13 abr. 2020
Olá @ lukett89 , obrigado pela proposta de API. Excelente ponto de partida.
Acho que precisaríamos das mesmas entradas de dt-select .
Eu adicionaria
| Nome Tipo | Descrição
| ------------- | ------------- | ------------- |
| id | string | Id para selecionar |
| compareWith | (v1: T, v2: T) => boolean | Função para comparar os valores das opções com os valores selecionados |
| required | boolean | Se a entrada é necessária |
| panelClass | string | Classe adicionada ao menu suspenso combobox |
Devemos considerar também a adição de getters para o estado aberto como "aberto" e saídas quando esse estado for alterado.
Acho que seria benéfico se pudéssemos nos ater à API mais próxima possível da seleção para tornar a alternância entre um ou outro o mais fácil possível.
ffriedl89
em 14 abr. 2020
Obrigado pela sua resposta @ ffriedl89.
Levaremos em consideração todas as entradas / saídas que você mencionou para a primeira versão do componente.
lukett89
em 14 abr. 2020
Combobox de proposta final de API
Estrutura avançada
<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
<dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>
Entradas
| Nome Tipo | Descrição
| ------------- | ------------- | ------------- |
| value | string \| undefined | Valor inicial da entrada |
| placeholder | string \| undefined | Espaço reservado para a entrada |
| id | string | Id para selecionar |
| compareWith | (v1: T, v2: T) => boolean | Função para comparar os valores das opções com os valores selecionados |
| required | boolean | Se a entrada é necessária |
| panelClass | string | Classe adicionada ao menu suspenso combobox |
Saídas
| Nome Tipo | Descrição
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Evento emitido quando um novo valor foi selecionado |
| filterChanges | EventEmitter<string> | Evento emitido quando o filtro muda |
| openedChange | EventEmitter
Projeção de conteúdo
opção dt
dt-optgroup
Lista de controle
- [] suporte de teclado adequado (seta: cima para baixo)
- [] WAI-ARIA
- [] considere a compatibilidade do ngForms
- [] considere a validação
lukett89
em 14 abr. 2020
Eu gostaria de cuidar da implementação desse recurso nas próximas 2 semanas. Você poderia atribuir o problema para mim, por favor?
heartdisease
em 15 abr. 2020
Em sincronia e após discussão com @heartdisease e @ lukett89 , reatribuí o problema.
tomheller
em 15 abr. 2020
Proponho a adição de mais duas entradas:
| Nome Tipo | Valor padrão | Descrição
| --- | --- | --- | --- |
| carregando | boolean | false | Quando definido como verdadeiro, um indicador de carregamento é mostrado para mostrar ao usuário que os dados estão sendo carregados / filtrados |
| displayWith | (value: T) => string | (value: T) => $ {value} `` | Uma função que retorna um nome de exibição para um determinado objeto que representa uma opção da combobox |
A função displayWith é relevante para usar a combobox com objetos e um indicador de carregamento parece garantido para um componente que - na maioria dos casos - irá descarregar a filtragem para o lado do servidor.
heartdisease
em 15 mai. 2020
Questões relacionadas
tomheller
·
4Comentários
christian-fischer
·
4Comentários
kaikcreator
·
10Comentários
lukasholzer
·
8Comentários
areknow
·
12Comentários
Comentários muito úteis
Proponho a adição de mais duas entradas:
| Nome Tipo | Valor padrão | Descrição
| --- | --- | --- | --- |
| carregando |
boolean|false| Quando definido como verdadeiro, um indicador de carregamento é mostrado para mostrar ao usuário que os dados estão sendo carregados / filtrados || displayWith |
(value: T) => string|(value: T) =>$ {value} `` | Uma função que retorna um nome de exibição para um determinado objeto que representa uma opção da combobox |A função displayWith é relevante para usar a combobox com objetos e um indicador de carregamento parece garantido para um componente que - na maioria dos casos - irá descarregar a filtragem para o lado do servidor.