Sinkronkan dengan @heartdisease tentang ide API untuk kotak kombo. Dia meningkatkan versi eksperimental kami saat ini untuk Angular

Saya menguji microsoft-graph-toolkit TemplateHelper untuk menghasilkan item kotak kombo dengan konteks dan template tertentu yang disediakan dalam slot. Ini berfungsi seperti yang kami harapkan, juga dengan elemen bersarang di template.
Saya mengunggah tes ke repo ini

Jadi sebaiknya kita meneruskan daftar item dan (opsional) template ke kotak kombo dan "hanya" menambahkan virtualisasi sebelum benar-benar merender item untuk hanya membuat x item, tergantung pada posisi gulir dan ketinggian wadah overlay.

Saat ini, metode TemplateHelper.renderTemplate() menerima HTMLElement sebagai simpul akar, templat, dan konteks (dan konteks tambahan opsional). Itu membuat semua node sesuai dengan template yang diberikan dan menempelkannya ke node root.
Mungkin lebih baik untuk mengubah perilaku ini dan memiliki metode yang hanya menerima template dan konteks dan mengembalikan template yang dikompilasi untuk kemudian dapat menampilkan HTML yang dikembalikan secara langsung di template menyala di komponen.
Bagaimana menurut anda?

Persyaratan

• Pengguliran virtual: Hanya sebagian dari opsi yang benar-benar harus dirender untuk menghindari masalah kinerja
• Templat khusus: Pengguna harus dapat menyediakan templat yang digunakan untuk merender opsi
• Pemfilteran: Pengguna harus dapat mengetikkan input untuk memfilter daftar item; pemfilteran harus dilakukan menggunakan fungsi filter yang disediakan oleh pengguna
• Indikator gulir: Harus selalu jelas apakah ada lebih banyak opsi --> selama ada lebih banyak opsi, setengah dari opsi pertama yang terlihat terakhir (atau maksimum x piksel) harus terlihat untuk menunjukkan dengan jelas bahwa wadah dapat digulir .

Persyaratan langkah selanjutnya

• Status pemuatan: Pemintal pemuatan harus ditampilkan di hamparan selama tidak ada item yang tersedia ToDo Di mana pemintal pemuatan harus ditampilkan?
• Multi pilih: Pengguna harus dapat memilih beberapa opsi
• Grup opsi: Seharusnya dimungkinkan untuk mengelompokkan opsi

Aksesibilitas

Saat fokus, kotak kombo akan terbuka saat menekan tombol Enter , ArrowUp atau ArrowDown atau saat pengguna mulai mengetik filter di bidang input.

Saat terbuka, pengguna harus dapat menggunakan kunci ArrowUp / ArrowDown untuk memilih dari opsi yang ada. Fokus untuk mengetik filter harus tetap di bidang input, opsi tidak boleh tab. Status pemilihan opsi harus ditunjukkan menggunakan atribut aria-selected .

Pilihan harus dikirimkan menggunakan kunci Enter .

Menekan tombol Tab atau Escape akan menutup overlay dan tidak akan mengubah item yang dipilih.

Saat mengetik filter dan kemudian keluar dari bidang input, filter harus diatur ulang dan item yang dipilih sebelumnya akan ditampilkan.

Sintaks templat khusus

Pengguna harus menyediakan string pembuka dan penutup bagian template. Ini harus dimungkinkan baik pada tingkat global atau per komponen (belum diputuskan).

Default ke {{ dan }} .

Proposal API

_WIP_

ComboBox harus dipecah menjadi komponen FluidComboBox , komponen FluidComboBoxOptionsList dan komponen FluidComboBoxOption .

CairanComboBox

Berisi FluidComboBoxOptionsList , yang pada gilirannya berisi FluidComboBoxOption s.
Menangani pembukaan dan penutupan posisi overlay dan overlay.
Menerima template sebagai elemen anak yang menerima basis HTMLElement s.

Saat menyediakan template, string pembuka dan penutup yang digunakan untuk binding template harus diatur.

masukan

| Nama | Direncanakan untuk | Ketik | Bawaan | Deskripsi |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| pilihan | MVP | Array | [] | Array opsi untuk ditampilkan di FluidComboBoxOptionsList |
| filterFn | MVP | (option: T) => boolean | null | Fungsi yang digunakan untuk opsi penyaringan |
| renderOptionFn | MVP | (option: T) => string | null | Fungsi yang digunakan untuk merender opsi di panel pelengkapan otomatis |
| tempat penampung | MVP | string | '' | Placeholder untuk ditampilkan di bidang input saat tidak ada opsi yang dipilih |
| dengan disabilitas | MVP | boolean | salah | Boolean untuk menentukan apakah kotak kombo dinonaktifkan |
| memuat | MVP | boolean | salah | Boolean untuk menentukan apakah akan menampilkan indikator pemuatan |
| dipilih | MVP | apa saja | nol | Item untuk dipilih sebelumnya |
| multiPilih | v2 | boolean | salah | Boolean untuk menentukan apakah lebih dari satu opsi dapat dipilih secara bersamaan |

Keluaran

| Nama | Direncanakan untuk | Ketik | Deskripsi |
| ---------------- | ----------- | ---------------------------------- | -------------------------------------------------- ---- |
| ubah | MVP | FluidComboBoxChangeEvent | Peristiwa dipicu saat nilainya berubah |
| filter-ubah | MVP | FluidComboBoxFilterChangeEvent | Peristiwa dipicu saat pengguna memasukkan nilai untuk pemfilteran |
| pilihan-ubah | MVP | FluidComboBoxSelectionChangeEvent | Acara dipicu saat opsi yang dipilih berubah |

Pemintal Pemuatan Cairan

Sebagai prasyarat untuk FluidComboBox, kita perlu mengimplementasikan komponen spinner pemuatan yang dapat digunakan kembali terlebih dahulu.
ToDo Tanyakan UX tentang L&F dari pemintal pemuatan baru (atau apakah desain lama dapat digunakan kembali).

FluidVirtualScroller

Sebagai prasyarat untuk FluidComboBox, kita perlu mengimplementasikan komponen yang dapat digunakan kembali yang mengimplementasikan pengguliran virtual
agar bisa menggunakan combobox dengan jumlah item yang banyak.

Lihat juga:
https://github.com/WICG/virtual-scroller/blob/master/README.md
https://www.sitepen.com/blog/next-generation-virtual-scrolling/
https://dev.to/adamklein/build-your-own-virtual-scroll-part-i-11ib
https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/

Cairan Popover

Sebagai prasyarat untuk FluidComboBox, kita perlu mengimplementasikan komponen popover yang dapat digunakan kembali yang dapat ditempatkan
sempurna di bawah elemen input dari kotak kombo.

Pustaka ini harus digunakan untuk mengimplementasikan komponen itu:
https://popper.js.org/docs/v2/

Mengenai templat, saya memiliki beberapa kekhawatiran karena tidak terlalu fleksibel dan ekstensif bagi pengembang untuk hanya memiliki penggantian teks. Pikirkan tentang transformasi teks melalui fungsi atau kondisi sederhana seperti jika itu tidak mungkin tetapi saya pikir diperlukan.

Pendekatan saya adalah menulis fungsi yang mengembalikan string HTML yang dapat dimasukkan ke dalam DocumentFragment yang kemudian dapat ditambahkan.

Dengan fungsi penulisan, Anda akan mendapatkan fleksibilitas penuh untuk mengubah atau mengkondisikan.
Untuk menyediakan outlet sederhana untuk itu, kami dapat memanfaatkan sesuatu yang mirip dengan JSX htm yang dapat dirender ke string sehingga tidak diperlukan kompilasi. Ini juga memiliki jejak yang sangat minimal yang kita bicarakan ~ 700Bytes.

itu kemudian dapat digunakan entah bagaimana seperti:

<script type="text/template">
html`
  <span>${text}</span>
   {count > 0
     <span>occurrences ${count}</span>
   }
   </div>
`;
</script>

import { render } from "preact-render-to-string";

const template = document.createElement('template');
template.innerHTML = render(option); // option is the script that can be passed via slot or input

const fragment = temp.content;

sebagai alternatif, kami dapat menggunakan templat yang diberi tag https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates.

Ini mungkin solusi yang lebih minimal.

Saya telah melakukan beberapa pengujian dan Angular, sayangnya, menghapus semua tag skrip dari template. Hanya 2 sen saya tentang mendeklarasikan skrip di dalam templat.

Mungkin mari kita pergi dengan pendekatan fungsi-pertama sehingga Combobox memiliki Input di mana Anda dapat memberikan fungsi tentang cara merender template.

Apakah mungkin untuk menyediakan fungsi pada LitElements sebagai properti? Karena kemudian saya akan meneruskan rendering ke konsumen di mana ia memiliki semua fleksibilitas javascript dalam fungsi ini. Fungsi telah mendeklarasikan parameter (input untuk template) dan harus mengembalikan string.

Implementasi default dapat dilakukan seperti ini:

_defaultTemplate<T>(display: string, value: T): string {
   return `<option>${display}</option>`
}

Seperti yang dibahas di #1513, kita perlu menangani popover dengan benar.

Saya tidak yakin apakah ini adalah tempat yang tepat untuk membahas input yang merupakan bagian dari komponen kotak kombo - Tetapi karena input tumbuh pada fokus, saya pikir masuk akal untuk memperluas kotak komponen input untuk mengambil ruang yang menyatakan terbesar memiliki.

Saat ini input bertambah lebar 16px setelah difokuskan. Jadi saya sarankan agar label + input dipindahkan dengan padding 8. Ini berarti bahwa jika beberapa kontrol (input, pilih, ...) berada dalam tata letak formulir vertikal, semua label dari kontrol apa pun harus selaras. Mungkin kontrol formulir masuk akal yang menangani penyatuan spasi untuk label + input.

Saya ingin mengubah proposal dengan menambahkan input baru untuk merender string tampilan untuk opsi pilihan saat ini:

masukan

| Nama | Direncanakan untuk | Ketik | Bawaan | Deskripsi |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| tampilanNamaFn | MVP | (option: T) => string | (pilihan) => `${pilihan}` | Fungsi yang mengembalikan string tampilan (HTML tidak diizinkan) untuk opsi yang diberikan. |

Ini juga akan memberikan solusi mudah untuk masalah ini: #1527

Sesuatu yang kecil yang menurut saya penting: DtCombobox saat ini, menggunakan opsi value sebagai teks tampilan default "opsi yang dipilih". Saya pikir lebih masuk akal untuk menggunakan opsi textContent .
1) textContent selalu merupakan nilai ramah-UI ( value hanya terkadang nilai ramah-UI)
2) Menggunakan textContent adalah apa yang standar select lakukan

Kami akan menutup masalah ini karena komponen web tidak seperti yang kami inginkan untuk membuat komponen di masa depan, ini terkait dengan pergeseran prioritas dalam tim.