Barista: Kotak kombo: Komponen baru
Permintaan fitur
Ringkasan
Tambahkan komponen kotak kombo ke perpustakaan.
Deskripsi Fitur
Kami berurusan dengan banyak data. Dt-select kami tidak benar-benar berfungsi dengan banyak pilihan. Fungsi pencarian untuk dt-select sama seperti pada native select. Oleh karena itu, pengguna hanya dapat melompat ke opsi yang dimulai dengan tombol yang ditekan pengguna.
Ini sangat membatasi dalam kasus penggunaan dengan kumpulan data besar.
Komponen kotak kombo yang dapat dibuat dari input dengan pelengkapan otomatis dt dapat membantu kita di sana.
Input perlu menampilkan teks placeholder.
Kotak kombo harus menggunakan gaya yang sama dengan dt-select.
Perilaku
Saat klik, dropdown membuka daftar beberapa item untuk dipilih pengguna dan kursor ditempatkan di bidang input. Segera setelah pengguna mulai mengetik, kotak kombo akan memancarkan acara yang di-debounce dan menunjukkan indikator pemuatan di dalam input yang serupa dengan yang sudah kita miliki di bidang filter.
Setelah item dipilih, dropdown ditutup dan bidang input diperbarui sesuai dengan itu.
Untuk combobox versi pertama, saya sarankan untuk tidak khawatir dengan virtual scrolling. Kita dapat mengharapkan pemfilteran item dilakukan di sisi server. Item yang diisi pada klien dapat dirender. Kami dapat meningkatkan penanganan kumpulan data besar di versi kedua.
Untuk versi pertama saya sarankan menggunakan dt-autocomplete, tetapi kita harus mempertimbangkan untuk membuat dropdown yang disederhanakan dengan datalist.
- [ ] Tulis proposal API
- [ ] Buat lib dan demo
- [ ] Tambahkan dropdown dan buat gaya tambahan untuk memiliki tanda sisipan di dalam dtInput.
- [ ] Tambahkan acara input yang di-debounce + indikator pemuatan
- [ ] Tambahkan tes unit
- [ ] Tambahkan tes e2e
lampiran
ffriedl89
Semua 8 komentar
Sebagai referensi aksesibilitas, harap pertimbangkan rekomendasi praktik terbaik dari kotak kombo WAI-ARIA dengan popup kotak daftar
tomheller
pada 2 Mar 2020
Kotak Kombo Proposal API
Struktur lanjutan
<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>
Masukan
| Nama | Ketik | Deskripsi |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Nilai awal untuk masukan |
| placeholder | string \| undefined | Placeholder untuk masukan |
Keluaran
| Nama | Ketik | Deskripsi |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Peristiwa yang dipancarkan ketika nilai baru telah dipilih |
| filterChanges | EventEmitter<string> | Peristiwa yang dipancarkan saat filter berubah |
Proyeksi konten
opsi-dt
dt-optgroup
Daftar periksa
- [ ] dukungan keyboard yang tepat (panah: atas bawah)
- [ ] WAI-ARIA
- [ ] pertimbangkan kompatibilitas ngForms
- [ ] pertimbangkan validasi
lukett89
pada 13 Apr 2020
Hai @lukett89 , terima kasih atas proposal
Saya pikir kita akan membutuhkan input yang sama seperti pada dt-select .
saya akan menambahkan
| Nama | Ketik | Deskripsi |
| ------------- | ------------- | ------------- |
| id | string | Id untuk pilihan |
| compareWith | (v1: T, v2: T) => boolean | Berfungsi untuk membandingkan nilai opsi dengan nilai yang dipilih |
| required | boolean | Apakah input diperlukan |
| panelClass | string | Kelas ditambahkan ke dropdown kotak kombo |
Kita juga harus mempertimbangkan untuk menambahkan getter untuk status terbuka seperti "dibuka" dan mengeluarkan output saat status tersebut berubah.
Saya pikir akan bermanfaat jika kita dapat tetap menggunakan API terdekat dengan pilihan untuk membuat peralihan di antara satu atau yang lain semudah mungkin.
ffriedl89
pada 14 Apr 2020
Terima kasih atas balasan Anda @ ffriedl89.
Kami akan memperhitungkan semua input/output yang Anda sebutkan untuk komponen versi pertama.
lukett89
pada 14 Apr 2020
Kotak Kombo Proposal API Akhir
Struktur lanjutan
<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>
Masukan
| Nama | Ketik | Deskripsi |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Nilai awal untuk masukan |
| placeholder | string \| undefined | Placeholder untuk masukan |
| id | string | Id untuk pilihan |
| compareWith | (v1: T, v2: T) => boolean | Berfungsi untuk membandingkan nilai opsi dengan nilai yang dipilih |
| required | boolean | Apakah input diperlukan |
| panelClass | string | Kelas ditambahkan ke dropdown kotak kombo |
Keluaran
| Nama | Ketik | Deskripsi |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Peristiwa yang dipancarkan ketika nilai baru telah dipilih |
| filterChanges | EventEmitter<string> | Peristiwa yang dipancarkan saat filter berubah |
| openedChange | AcaraEmitter
Proyeksi konten
opsi-dt
dt-optgroup
Daftar periksa
- [ ] dukungan keyboard yang tepat (panah: atas bawah)
- [ ] WAI-ARIA
- [ ] pertimbangkan kompatibilitas ngForms
- [ ] pertimbangkan validasi
lukett89
pada 14 Apr 2020
Saya ingin menerapkan fitur ini dalam 2 minggu ke depan. Bisakah Anda menugaskan masalah ini kepada saya?
heartdisease
pada 15 Apr 2020
Dalam sinkronisasi dan setelah diskusi dengan @heartdisease dan @lukett89 , saya telah menetapkan kembali masalah tersebut.
tomheller
pada 15 Apr 2020
Saya mengusulkan penambahan dua input lagi:
| Nama | Ketik | Nilai Bawaan | Deskripsi |
| --- | --- | --- | --- |
| memuat | boolean | false | Jika disetel ke true, indikator pemuatan ditampilkan untuk menunjukkan kepada pengguna bahwa data sedang dimuat/difilter |
| tampilanDengan | (value: T) => string | (value: T) => ${nilai}`` | Fungsi yang mengembalikan nama tampilan untuk objek tertentu yang mewakili opsi dari kotak kombo |
Fungsi displayWith relevan untuk menggunakan kotak kombo dengan objek dan indikator pemuatan tampaknya diperlukan untuk komponen yang - dalam banyak kasus - akan memindahkan pemfilteran ke sisi server.
heartdisease
pada 15 Mei 2020
Masalah terkait
kaikcreator
·
10Komentar
lukasholzer
·
8Komentar
tomheller
·
21Komentar
christian-fischer
·
4Komentar
christian-fischer
·
4Komentar
Komentar yang paling membantu
Saya mengusulkan penambahan dua input lagi:
| Nama | Ketik | Nilai Bawaan | Deskripsi |
| --- | --- | --- | --- |
| memuat |
boolean|false| Jika disetel ke true, indikator pemuatan ditampilkan untuk menunjukkan kepada pengguna bahwa data sedang dimuat/difilter || tampilanDengan |
(value: T) => string|(value: T) =>${nilai}`` | Fungsi yang mengembalikan nama tampilan untuk objek tertentu yang mewakili opsi dari kotak kombo |Fungsi displayWith relevan untuk menggunakan kotak kombo dengan objek dan indikator pemuatan tampaknya diperlukan untuk komponen yang - dalam banyak kasus - akan memindahkan pemfilteran ke sisi server.