HIsheR
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import { effect, h, signal } from '@ui-arch/frame';
|
|
import { bindOutside, pushOverlay } from './overlay.js';
|
|
import { tree } from './tree.js';
|
|
import type { TreeNode, TreeSelectProps } from './types.js';
|
|
|
|
/*** 按 key 深度优先找节点，用于把选中 key 还原成显示名 ***/
|
|
function findNode(nodes: TreeNode[], key: string): TreeNode | null {
|
|
for (const node of nodes) {
|
|
if (node.key === key) return node; // 命中即返回
|
|
const hit = node.children ? findNode(node.children, key) : null;
|
|
if (hit) return hit;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/*** 树形选择：按钮触发弹层，内部复用 tree（搜索 / 多选 / 级联由 tree 提供）；单选选中即收起，多选保持展开 ***/
|
|
export function treeSelect(props: TreeSelectProps): HTMLElement {
|
|
const open = signal(false); // 弹层开合
|
|
const value = props.value ?? signal(''); // 单选 key
|
|
const checked = props.checked ?? signal<string[]>([]); // 多选 key 集合
|
|
let release: (() => void) | null = null; // Esc 栈注销句柄
|
|
const labelEl = h('span', { class: 'ua-treeselect-label' });
|
|
const trigger = h('button', {
|
|
class: 'ua-treeselect-trigger',
|
|
type: 'button',
|
|
'aria-haspopup': 'tree',
|
|
'aria-expanded': 'false',
|
|
}, labelEl, h('span', { class: 'ua-treeselect-arrow', 'aria-hidden': 'true' }, '▾')) as HTMLButtonElement;
|
|
const pop = h('div', { class: 'ua-treeselect-pop' });
|
|
const inner = tree({
|
|
nodes: props.nodes,
|
|
searchable: props.searchable,
|
|
multi: props.multi,
|
|
selected: value,
|
|
checked,
|
|
onSelect: (node) => {
|
|
if (!props.multi) close(); // 单选选中即收起，少一次点击
|
|
props.onSelect?.(node);
|
|
},
|
|
onCheck: (keys) => {
|
|
props.onChange?.(keys);
|
|
},
|
|
});
|
|
pop.append(inner);
|
|
const wrap = h('div', { class: 'ua-treeselect' }, trigger, pop);
|
|
|
|
/*** 收起弹层并注销 Esc 栈 ***/
|
|
function close(): void {
|
|
open(false);
|
|
release?.();
|
|
release = null;
|
|
}
|
|
|
|
/*** 触发器文案：单选回显节点名，多选回显已选数量，都没选则显示占位 ***/
|
|
const paint = (): void => {
|
|
const keys = checked();
|
|
if (props.multi) {
|
|
labelEl.textContent = keys.length ? `已选 ${keys.length} 项` : (props.placeholder ?? '请选择');
|
|
} else {
|
|
const node = value() ? findNode(props.nodes, value()) : null;
|
|
labelEl.textContent = node ? node.label : (props.placeholder ?? '请选择');
|
|
}
|
|
wrap.classList.toggle('is-empty', props.multi ? !keys.length : !value());
|
|
trigger.disabled = Boolean(props.disabled);
|
|
};
|
|
|
|
trigger.addEventListener('click', () => {
|
|
if (props.disabled) return; // 卫语句：禁用不响应
|
|
if (open()) return close();
|
|
open(true);
|
|
release = pushOverlay(close); // 与其他弹层共享 Esc 栈，只关最上层
|
|
});
|
|
bindOutside(wrap, open, close);
|
|
effect(() => {
|
|
const on = open();
|
|
wrap.classList.toggle('is-open', on);
|
|
trigger.setAttribute('aria-expanded', String(on));
|
|
if (on) inner.querySelector('input')?.focus(); // 展开即聚焦搜索框，键盘可直接用
|
|
});
|
|
effect(paint);
|
|
return wrap;
|
|
}
|