iter(g11): 浮层空间不足时自动翻转
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
import { effect, h, signal } from '@ui-arch/frame';
|
||||
import type { SelectProps } from './types.js';
|
||||
import { flip } from './position.js';
|
||||
|
||||
/*** 下拉选择:自绘弹层替代原生 select,value 信号双向绑定;支持 ↑↓/Home/End 键盘导航,点选项 / 点外部 / Esc 关闭 ***/
|
||||
export function select(props: SelectProps): HTMLElement {
|
||||
// —— 状态集中声明 ——
|
||||
const open = signal(false); // 弹层开合
|
||||
const place = signal<'top' | 'bottom'>('bottom'); // 实际生效方位:打开时按视口空间自动翻转
|
||||
const value = props.value ?? signal(''); // 选中值;未传信号则内部持有
|
||||
|
||||
const labelOf = (v: string) => props.options.find((o) => o.value === v)?.label ?? '';
|
||||
@@ -45,7 +47,7 @@ export function select(props: SelectProps): HTMLElement {
|
||||
opt.label,
|
||||
),
|
||||
);
|
||||
const pop = h('div', { class: () => `ua-select-pop${open() ? ' ua-open' : ''}`, role: 'listbox' }, ...options);
|
||||
const pop = h('div', { class: () => `ua-select-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}`, role: 'listbox' }, ...options);
|
||||
|
||||
const root = h('div', { class: () => `ua-select${open() ? ' ua-open' : ''}` }, trigger, pop); // 根带开合类,供箭头旋转
|
||||
|
||||
@@ -68,5 +70,6 @@ export function select(props: SelectProps): HTMLElement {
|
||||
open(false); // 点外部关闭
|
||||
});
|
||||
effect(() => open()); // 建立依赖,保证开合信号生效
|
||||
effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 每次打开重算方位:空间不足自动翻转
|
||||
return root;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user