Barista: Combobox: nuevo componente
Solicitud de función
Resumen
Agregue un componente de cuadro combinado a la biblioteca.
Característica Descripción
Estamos tratando con muchos datos. Nuestro dt-select no funciona realmente con un gran conjunto de opciones. La función de búsqueda para dt-select es la misma que en la selección nativa. Por lo tanto, un usuario solo puede saltar a una opción que comience con la tecla que presionó el usuario.
Esto es realmente limitante en casos de uso con grandes conjuntos de datos.
Un componente de cuadro combinado que se puede construir a partir de una entrada con un dt-autocomplete adjunto puede ayudarnos en eso.
La entrada debe mostrar un texto de marcador de posición.
El cuadro combinado debe usar los mismos estilos que el dt-select.
Comportamiento
Al hacer clic en el menú desplegable, se abre una lista de varios elementos para que el usuario elija y el cursor se coloca en el campo de entrada. Tan pronto como los usuarios comiencen a escribir, el cuadro combinado debería emitir un evento antirrebote y mostrar un indicador de carga dentro de la entrada similar al que ya tenemos en el campo de filtro.
Una vez que se selecciona un elemento, el menú desplegable se cierra y el campo de entrada se actualiza en consecuencia.
Para la primera versión del cuadro combinado, sugiero que no se preocupe por el desplazamiento virtual. Podemos esperar que el filtrado de los elementos se realice en el lado del servidor. Los elementos rellenados en el cliente se pueden renderizar. Podemos mejorar el manejo de grandes conjuntos de datos en una segunda versión.
Para la primera versión, sugeriría usar dt-autocomplete, pero deberíamos considerar crear un menú desplegable simplificado con una lista de datos.
- [] Redactar propuesta de API
- [] Crear lib y demostración
- [] Agregue un menú desplegable y cree estilos adicionales para tener el signo de intercalación dentro de dtInput.
- [] Agregar evento de entrada antirrebote + indicador de carga
- [] Agregar pruebas unitarias
- [] Agregar pruebas e2e
Archivos adjuntos
ffriedl89
Todos 8 comentarios
Como referencia de accesibilidad, considere la recomendación de mejores prácticas del cuadro combinado WAI-ARIA con cuadro emergente de cuadro de lista
tomheller
en 2 mar. 2020
Cuadro combinado de propuesta de API
Estructura avanzada
<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
| Nombre | Tipo | Descripción |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Valor inicial de la entrada |
| placeholder | string \| undefined | Marcador de posición para la entrada |
Salidas
| Nombre | Tipo | Descripción |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Evento emitido cuando se ha seleccionado un nuevo valor |
| filterChanges | EventEmitter<string> | Evento emitido cuando cambia el filtro |
Proyección de contenido
opción dt
dt-optgroup
Lista de Verificación
- [] compatibilidad adecuada con el teclado (flecha: arriba hacia abajo)
- [] WAI-ARIA
- [] considere la compatibilidad con ngForms
- [] considerar la validación
lukett89
en 13 abr. 2020
Hola @ lukett89 , gracias por la propuesta de API. Realmente un gran punto de partida.
Creo que necesitaríamos las mismas entradas que en dt-select .
Yo agregaría
| Nombre | Tipo | Descripción |
| ------------- | ------------- | ------------- |
| id | string | Id para la selección |
| compareWith | (v1: T, v2: T) => boolean | Función para comparar los valores de las opciones con los valores seleccionados |
| required | boolean | Si la entrada es necesaria |
| panelClass | string | Clase agregada al menú desplegable del cuadro combinado |
Deberíamos considerar también agregar captadores para el estado abierto como "abierto" y salidas cuando ese estado cambia.
Creo que sería beneficioso si pudiéramos ceñirnos a la API más cercana a la selección como sea posible para que el cambio entre una u otra sea lo más fácil posible.
ffriedl89
en 14 abr. 2020
Gracias por tu respuesta @ ffriedl89.
Tendremos en cuenta todas las entradas / salidas que mencionó para la primera versión del componente.
lukett89
en 14 abr. 2020
Cuadro combinado de propuesta final de API
Estructura avanzada
<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
| Nombre | Tipo | Descripción |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Valor inicial de la entrada |
| placeholder | string \| undefined | Marcador de posición para la entrada |
| id | cadena | Id para la selección |
| compareWith | (v1: T, v2: T) => boolean | Función para comparar los valores de las opciones con los valores seleccionados |
| required | boolean | Si la entrada es necesaria |
| panelClass | string | Clase agregada al menú desplegable del cuadro combinado |
Salidas
| Nombre | Tipo | Descripción |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Evento emitido cuando se ha seleccionado un nuevo valor |
| filterChanges | EventEmitter<string> | Evento emitido cuando cambia el filtro |
| openedChange | EventEmitter
Proyección de contenido
opción dt
dt-optgroup
Lista de Verificación
- [] compatibilidad adecuada con el teclado (flecha: arriba hacia abajo)
- [] WAI-ARIA
- [] considere la compatibilidad con ngForms
- [] considerar la validación
lukett89
en 14 abr. 2020
Me gustaría encargarme de implementar esta función en las próximas 2 semanas. ¿Podría asignarme el problema, por favor?
heartdisease
en 15 abr. 2020
En sincronía y después de discutir con @heartdisease y @ lukett89 , he reasignado el problema.
tomheller
en 15 abr. 2020
Propongo la adición de dos entradas más:
| Nombre | Tipo | Valor predeterminado | Descripción |
| --- | --- | --- | --- |
| cargando | boolean | false | Cuando se establece en verdadero, se muestra un indicador de carga para mostrar al usuario que los datos se están cargando / filtrando actualmente |
| displayWith | (value: T) => string | (value: T) => $ {valor} `` | Una función que devuelve un nombre para mostrar para un objeto dado que representa una opción del cuadro combinado |
La función displayWith es relevante para usar el cuadro combinado con objetos y parece justificado un indicador de carga para un componente que, en la mayoría de los casos, descargará el filtrado al lado del servidor.
heartdisease
en 15 may. 2020
Temas relacionados
areknow
·
12Comentarios
lukasholzer
·
8Comentarios
beeme1mr
·
7Comentarios
lukasholzer
·
8Comentarios
tomheller
·
4Comentarios
Comentario más útil
Propongo la adición de dos entradas más:
| Nombre | Tipo | Valor predeterminado | Descripción |
| --- | --- | --- | --- |
| cargando |
boolean|false| Cuando se establece en verdadero, se muestra un indicador de carga para mostrar al usuario que los datos se están cargando / filtrando actualmente || displayWith |
(value: T) => string|(value: T) =>$ {valor} `` | Una función que devuelve un nombre para mostrar para un objeto dado que representa una opción del cuadro combinado |La función displayWith es relevante para usar el cuadro combinado con objetos y parece justificado un indicador de carga para un componente que, en la mayoría de los casos, descargará el filtrado al lado del servidor.