iter(g11): 浮层空间不足时自动翻转
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
import { effect, h, signal } from '@ui-arch/frame';
|
||||
import type { MenuItem, MenuProps } from './types.js';
|
||||
import { flip } from './position.js';
|
||||
|
||||
/*** 下拉菜单:触发器 + 自绘弹层,项支持禁用 / 危险 / 分隔线;点项 / 点外部 / Esc 关闭,↑↓ 环形导航 + Home/End 跳转 ***/
|
||||
export function menu(props: MenuProps): HTMLElement {
|
||||
// —— 状态集中声明 ——
|
||||
const open = signal(false); // 弹层开合
|
||||
const place = signal<'top' | 'bottom'>('bottom'); // 实际生效方位:打开时按视口空间自动翻转
|
||||
const focusables: HTMLButtonElement[] = []; // 可聚焦项(跳过分隔线与禁用项),供键盘导航
|
||||
|
||||
const pick = (item: MenuItem): void => {
|
||||
@@ -47,7 +49,7 @@ export function menu(props: MenuProps): HTMLElement {
|
||||
const pop = h(
|
||||
'div',
|
||||
{
|
||||
class: () => `ua-menu-pop${open() ? ' ua-open' : ''}${props.align === 'end' ? ' is-end' : ''}`,
|
||||
class: () => `ua-menu-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}${props.align === 'end' ? ' is-end' : ''}`,
|
||||
role: 'menu',
|
||||
},
|
||||
...rows,
|
||||
@@ -81,5 +83,6 @@ export function menu(props: MenuProps): HTMLElement {
|
||||
});
|
||||
|
||||
effect(() => open()); // 建立依赖,保证开合信号生效
|
||||
effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 每次打开重算方位:空间不足自动翻转
|
||||
return root;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user