iter(g166): 下拉选项支持分组标题
This commit is contained in:
@@ -60,6 +60,19 @@ export function select(props: SelectProps): HTMLElement {
|
||||
opt.label,
|
||||
),
|
||||
);
|
||||
// —— 分组:相邻同组选项合成一段,组内首项前插小标题;记下区间供过滤时整组显隐 ——
|
||||
const nodes: HTMLElement[] = []; // 弹层内容序列(小标题与选项混排)
|
||||
const runs: { el: HTMLElement; from: number; to: number }[] = []; // 每段标题及其首尾选项下标
|
||||
props.options.forEach((opt, i) => {
|
||||
let run = runs[runs.length - 1] ?? null;
|
||||
if (opt.group && (!run || run.to !== i - 1)) { // 新起一段:标题插在本组首项之前
|
||||
const el = h('div', { class: 'ua-option-group', role: 'presentation' }, opt.group);
|
||||
run = { el, from: i, to: i };
|
||||
runs.push(run);
|
||||
nodes.push(el);
|
||||
} else if (opt.group && run) run.to = i; // 同组续接:只拉长区间
|
||||
nodes.push(options[i]);
|
||||
});
|
||||
const search = h('input', {
|
||||
type: 'search',
|
||||
class: 'ua-select-search',
|
||||
@@ -75,7 +88,7 @@ export function select(props: SelectProps): HTMLElement {
|
||||
'div',
|
||||
{ class: () => `ua-select-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}`, role: 'listbox' },
|
||||
props.searchable ? search : null,
|
||||
...options,
|
||||
...nodes,
|
||||
blank,
|
||||
);
|
||||
|
||||
@@ -129,6 +142,11 @@ export function select(props: SelectProps): HTMLElement {
|
||||
el.hidden = !on; // 不匹配即折叠,键盘只在可见项之间移动
|
||||
if (on) shown += 1;
|
||||
});
|
||||
for (const run of runs) { // 整组都无命中时连小标题一起藏,不留孤零零的分组名
|
||||
let any = false;
|
||||
for (let i = run.from; i <= run.to; i++) if (match(i)) { any = true; break; }
|
||||
run.el.hidden = !any;
|
||||
}
|
||||
blank.hidden = shown > 0 || !q; // 仅「有关键字且无命中」时才提示
|
||||
});
|
||||
effect(() => {
|
||||
|
||||
Reference in New Issue
Block a user