ui-arch-bot
61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import { effect, h, signal } from '@ui-arch/frame';
|
|
import type { PopoverProps } from './types.js';
|
|
|
|
let seq = 0; // 全局自增序号：保证每个弹层 id 唯一，供 aria-controls 关联
|
|
|
|
/*** 气泡卡片：包裹触发器，默认点击开合；内容可交互，点外部 / Esc / 再次点触发器收起 ***/
|
|
export function popover(props: PopoverProps, trigger: HTMLElement): HTMLElement {
|
|
// —— 状态集中声明 ——
|
|
const open = signal(false); // 弹层显隐
|
|
const id = `ua-pop-${++seq}`; // 弹层唯一 id
|
|
let timer: number | null = null; // hover 模式下的出入场计时器
|
|
|
|
const setOpen = (next: boolean): void => {
|
|
if (open() === next) return; // 幂等：状态未变不派发回调
|
|
open(next);
|
|
props.onOpenChange?.(next);
|
|
};
|
|
const toggle = (): void => setOpen(!open());
|
|
|
|
// —— 触发器与弹层 ——
|
|
trigger.setAttribute('aria-haspopup', 'dialog');
|
|
effect(() => trigger.setAttribute('aria-expanded', String(open()))); // 展开态跟随信号写回
|
|
const panel = h(
|
|
'div',
|
|
{
|
|
id,
|
|
class: () => `ua-pop ua-pop-${props.placement ?? 'bottom'}${open() ? ' ua-open' : ''}`,
|
|
role: 'dialog',
|
|
'aria-hidden': () => String(!open()),
|
|
onClick: (e: Event) => e.stopPropagation(), // 弹层内点击不触发外部关闭
|
|
},
|
|
props.title ? h('div', { class: 'ua-pop-title' }, props.title) : null,
|
|
h('div', { class: 'ua-pop-body' }, props.content),
|
|
);
|
|
const root = h('span', { class: 'ua-pop-wrap' }, trigger, panel);
|
|
|
|
if (props.trigger === 'hover') {
|
|
root.addEventListener('pointerenter', () => {
|
|
if (timer != null) window.clearTimeout(timer);
|
|
timer = window.setTimeout(() => setOpen(true), props.delay ?? 150);
|
|
});
|
|
root.addEventListener('pointerleave', () => {
|
|
if (timer != null) window.clearTimeout(timer); // 未出场就离开：取消计时
|
|
setOpen(false);
|
|
});
|
|
} else {
|
|
trigger.addEventListener('click', (e: Event) => {
|
|
e.stopPropagation(); // 阻止冒泡到 document，否则刚打开就被外部点击关掉
|
|
toggle();
|
|
});
|
|
}
|
|
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
|
if (e.key !== 'Escape' || !open()) return; // 卫语句：未展开时 Esc 不处理
|
|
setOpen(false);
|
|
trigger.focus(); // 收起后焦点回触发器
|
|
});
|
|
document.addEventListener('click', () => setOpen(false)); // 点外部收起（弹层内已阻止冒泡）
|
|
|
|
return root;
|
|
}
|