HIsheR
68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
import { effect, h, signal } from '@ui-arch/frame';
|
|
import type { PopoverProps } from './types.js';
|
|
import { flip } from './position.js';
|
|
import { bindOutside, pushOverlay } from './overlay.js';
|
|
|
|
let seq = 0; // 全局自增序号：保证每个弹层 id 唯一，供 aria-controls 关联
|
|
|
|
/*** 气泡卡片：包裹触发器，默认点击开合；内容可交互，点外部 / Esc / 再次点触发器收起 ***/
|
|
export function popover(props: PopoverProps, trigger: HTMLElement): HTMLElement {
|
|
// —— 状态集中声明 ——
|
|
const open = props.open ?? signal(false); // 弹层显隐：外部传了信号就交给它控制（实现受控开合）
|
|
let releaseEsc: (() => void) | null = null; // Esc 栈注销函数：展开期间占一层，收起即释放
|
|
const place = signal(props.placement ?? 'bottom'); // 实际生效方位：打开时按视口空间自动翻转
|
|
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-${place()}${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();
|
|
});
|
|
}
|
|
bindOutside(root, open, () => setOpen(false)); // 点外部收起：仅展开期间挂监听，收起即摘
|
|
effect(() => {
|
|
if (open()) {
|
|
releaseEsc ??= pushOverlay(() => { setOpen(false); trigger.focus(); }); // 入 Esc 栈：与弹窗/抽屉共用同一套逐层关闭
|
|
} else {
|
|
releaseEsc?.();
|
|
releaseEsc = null;
|
|
}
|
|
});
|
|
|
|
return root;
|
|
}
|