Barista: Combobox: Neue Komponente
Featureanfrage
Zusammenfassung
Fügen Sie der Bibliothek eine Combobox-Komponente hinzu.
Funktionsbeschreibung
Wir haben es mit vielen Daten zu tun. Unser dt-select funktioniert nicht wirklich mit einer großen Auswahl an Optionen. Die Suchfunktionalität für das dt-select ist die gleiche wie beim nativen select. Daher kann ein Benutzer nur zu einer Option springen, die mit der Taste beginnt, die der Benutzer gedrückt hat.
Dies ist in Anwendungsfällen mit großen Datensätzen wirklich einschränkend.
Eine Combobox-Komponente, die aus einer Eingabe mit angehängtem dt-Autocomplete konstruiert werden kann, kann uns dabei helfen.
Die Eingabe muss einen Platzhaltertext anzeigen.
Die Combobox sollte die gleichen Stile wie die dt-select verwenden.
Verhalten
Beim Anklicken öffnet das Dropdown-Menü eine Liste mit mehreren Elementen, aus denen der Benutzer auswählen kann, und der Cursor wird in das Eingabefeld platziert. Sobald Benutzer mit der Eingabe beginnen, sollte die Combobox ein entprelltes Ereignis ausgeben und einen Ladeindikator in der Eingabe anzeigen, ähnlich dem, den wir bereits im Filterfeld haben.
Sobald ein Element ausgewählt ist, schließt sich die Dropdown-Liste und das Eingabefeld wird entsprechend aktualisiert.
Für die erste Version der Combobox schlage ich vor, sich keine Gedanken über das virtuelle Scrollen zu machen. Wir können erwarten, dass die Filterung der Elemente auf der Serverseite erfolgt. Die auf dem Client aufgefüllten Elemente können gerendert werden. In einer zweiten Version können wir den Umgang mit großen Datensätzen verbessern.
Für die erste Version würde ich vorschlagen, dt-autocomplete zu verwenden, aber wir sollten erwägen, ein vereinfachtes Dropdown mit einer Datenliste zu erstellen.
- [ ] API-Vorschlag schreiben
- [ ] Lib und Demo erstellen
- [ ] Dropdown-Menü hinzufügen und zusätzliche Stile erstellen, um das Caret-Zeichen in der dtInput-Datei zu haben.
- [ ] Entprelltes Eingabeereignis + Ladeindikator hinzufügen
- [ ] Unit-Tests hinzufügen
- [ ] e2e-Tests hinzufügen
Anhänge
ffriedl89
Alle 8 Kommentare
Als Referenz zur Barrierefreiheit beachten Sie bitte die Best-Practice-Empfehlung der WAI-ARIA Combobox mit Listbox Popup
tomheller
am 2. März 2020
Kombinationsfeld für API-Vorschläge
Erweiterte Struktur
<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>
Eingänge
| Name | Typ | Beschreibung |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Anfangswert für den Eingang |
| placeholder | string \| undefined | Platzhalter für die Eingabe |
Ausgänge
| Name | Typ | Beschreibung |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Ereignis wird ausgegeben, wenn ein neuer Wert ausgewählt wurde |
| filterChanges | EventEmitter<string> | Ereignis wird ausgegeben, wenn sich der Filter ändert |
Inhaltsprojektion
dt-Option
dt-optgroup
Checkliste
- [ ] richtige Tastaturunterstützung (Pfeil: hoch runter)
- [ ] WAI-ARIA
- [ ] ngForms-Kompatibilität berücksichtigen
- [ ] Validierung prüfen
lukett89
am 13. Apr. 2020
Hey @lukett89 , danke für den API-Vorschlag. Wirklich toller Ausgangspunkt.
Ich denke, wir bräuchten ziemlich die gleichen Eingaben wie in dt-select .
ich würde hinzufügen
| Name | Typ | Beschreibung |
| ------------- | ------------- | ------------- |
| id | string | ID für die Auswahl |
| compareWith | (v1: T, v2: T) => boolean | Funktion zum Vergleichen der Optionswerte mit den ausgewählten Werten |
| required | boolean | Ob die Eingabe erforderlich ist |
| panelClass | string | Klasse zur Dropdown-Liste der Combobox hinzugefügt |
Wir sollten auch erwägen, Getter für den geöffneten Zustand wie "geöffnet" und Ausgaben hinzuzufügen, wenn sich dieser Zustand ändert.
Ich denke, es wäre von Vorteil, wenn wir uns an die API halten können, die der Auswahl am nächsten kommt, um den Wechsel zwischen dem einen oder dem anderen so einfach wie möglich zu gestalten.
ffriedl89
am 14. Apr. 2020
Danke für deine Antwort @ffriedl89.
Wir berücksichtigen alle von Ihnen genannten Ein-/Ausgänge für die erste Version der Komponente.
lukett89
am 14. Apr. 2020
Kombinationsfeld für den endgültigen API-Vorschlag
Erweiterte Struktur
<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>
Eingänge
| Name | Typ | Beschreibung |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Anfangswert für den Eingang |
| placeholder | string \| undefined | Platzhalter für die Eingabe |
| id | Zeichenfolge | ID für die Auswahl |
| compareWith | (v1: T, v2: T) => boolean | Funktion zum Vergleichen der Optionswerte mit den ausgewählten Werten |
| required | boolean | Ob die Eingabe erforderlich ist |
| panelClass | string | Klasse zur Dropdown-Liste der Combobox hinzugefügt |
Ausgänge
| Name | Typ | Beschreibung |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Ereignis wird ausgegeben, wenn ein neuer Wert ausgewählt wurde |
| filterChanges | EventEmitter<string> | Ereignis wird ausgegeben, wenn sich der Filter ändert |
| openedChange | EventEmitter
Inhaltsprojektion
dt-Option
dt-optgroup
Checkliste
- [ ] richtige Tastaturunterstützung (Pfeil: hoch runter)
- [ ] WAI-ARIA
- [ ] ngForms-Kompatibilität berücksichtigen
- [ ] Validierung prüfen
lukett89
am 14. Apr. 2020
Ich möchte mich um die Implementierung dieser Funktion innerhalb der nächsten 2 Wochen kümmern. Könnten Sie mir bitte das Problem zuordnen?
heartdisease
am 15. Apr. 2020
Synchron und nach Diskussion mit @heartdisease und @lukett89 habe ich das Problem neu zugewiesen.
tomheller
am 15. Apr. 2020
Ich schlage vor, zwei weitere Eingaben hinzuzufügen:
| Name | Typ | Standardwert | Beschreibung |
| --- | --- | --- | --- |
| Laden | boolean | false | Wenn auf "true" gesetzt, wird ein Ladeindikator angezeigt, um dem Benutzer anzuzeigen, dass derzeit Daten geladen/gefiltert werden |
| anzeigenMit | (value: T) => string | (value: T) => ${value}`` | Eine Funktion, die einen Anzeigenamen für ein bestimmtes Objekt zurückgibt, das eine Option aus der Combobox darstellt |
Die Funktion displayWith ist für die Verwendung der Combobox mit Objekten relevant und ein Ladeindikator scheint für eine Komponente angebracht, die - in den meisten Fällen - die Filterung auf die Serverseite auslagert.
heartdisease
am 15. Mai 2020
Verwandte Themen
schobocop
·
10Kommentare
ffriedl89
·
11Kommentare
samuelfahrngruber
·
13Kommentare
tomheller
·
4Kommentare
Sherif-Elhefnawy
·
7Kommentare
Hilfreichster Kommentar
Ich schlage vor, zwei weitere Eingaben hinzuzufügen:
| Name | Typ | Standardwert | Beschreibung |
| --- | --- | --- | --- |
| Laden |
boolean|false| Wenn auf "true" gesetzt, wird ein Ladeindikator angezeigt, um dem Benutzer anzuzeigen, dass derzeit Daten geladen/gefiltert werden || anzeigenMit |
(value: T) => string|(value: T) =>${value}`` | Eine Funktion, die einen Anzeigenamen für ein bestimmtes Objekt zurückgibt, das eine Option aus der Combobox darstellt |Die Funktion displayWith ist für die Verwendung der Combobox mit Objekten relevant und ein Ladeindikator scheint für eine Komponente angebracht, die - in den meisten Fällen - die Filterung auf die Serverseite auslagert.