iter(g17): select 键入字母快跳选项
This commit is contained in:
@@ -492,6 +492,14 @@
|
||||
"acceptance": "img 加载失败自动替换为虚线占位块,fallback 可自定义文案;样式只消费 --ua-* 令牌;manifest/demo 同步;npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "自补:既有组件可用性细节"
|
||||
},
|
||||
{
|
||||
"id": "g17",
|
||||
"title": "select 键入字母快跳选项",
|
||||
"motivation": "选项多时纯方向键逐个移动太慢,主流下拉都支持键入首字母循环跳转",
|
||||
"acceptance": "select 展开时键入可打印字符循环聚焦 label 前缀匹配项(不区分大小写),1 秒无输入重置缓冲;既有 ↑↓/Home/End 行为不变;npm run check 全绿",
|
||||
"status": "open",
|
||||
"notes": "自补:既有组件可用性细节"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-26T02:57:22.328Z",
|
||||
"generatedAt": "2026-10-26T02:59:40.484Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -149,7 +149,7 @@
|
||||
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
|
||||
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转",
|
||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项",
|
||||
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转",
|
||||
"flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom'",
|
||||
"radioGroup(props):单选组,options + value 信号双向绑定,disabled 整组禁用",
|
||||
|
||||
+1
-1
@@ -214,7 +214,7 @@ const content = h(
|
||||
section(
|
||||
'sec-form',
|
||||
'表单控件',
|
||||
'checkbox / switch / select / radioGroup / textarea:状态一律由调用方信号持有;select 弹层在视口下方空间不足时自动翻到上方。',
|
||||
'checkbox / switch / select / radioGroup / textarea:状态一律由调用方信号持有;select 弹层在视口下方空间不足时自动翻到上方,展开后键入字母可快跳选项。',
|
||||
h('div', { class: 'row' }, checkbox({ label: '同意条款', checked: agreed }), h('span', { class: 'out' }, () => (agreed() ? '已同意' : '未同意'))),
|
||||
h('div', { class: 'row' }, switchButton({ label: '夜间模式', checked: nightMode }), h('span', { class: 'out' }, () => (nightMode() ? '开' : '关'))),
|
||||
h('div', { class: 'row' }, select({ options: cities.map((c) => ({ value: c, label: c })), value: city, placeholder: '选择城市…' }), h('span', { class: 'out' }, () => (city() ? `城市:${city()}` : '未选择'))),
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T02:57:22.328Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T02:59:40.484Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1014,7 +1014,7 @@ API 速览:
|
||||
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
|
||||
- checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
||||
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
||||
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转
|
||||
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项
|
||||
- menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转
|
||||
- flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom'
|
||||
- radioGroup(props):单选组,options + value 信号双向绑定,disabled 整组禁用
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
|
||||
- checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
||||
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
||||
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转
|
||||
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项
|
||||
- menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转
|
||||
- flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom'
|
||||
- radioGroup(props):单选组,options + value 信号双向绑定,disabled 整组禁用
|
||||
|
||||
@@ -51,6 +51,19 @@ export function select(props: SelectProps): HTMLElement {
|
||||
|
||||
const root = h('div', { class: () => `ua-select${open() ? ' ua-open' : ''}` }, trigger, pop); // 根带开合类,供箭头旋转
|
||||
|
||||
// —— 键入快跳缓冲 ——
|
||||
let typed = ''; // 最近键入的字母串,用于前缀匹配
|
||||
let typedAt = 0; // 最近键入时间戳,超 1 秒重置缓冲
|
||||
const jumpByTyped = (ch: string): void => {
|
||||
const now = Date.now();
|
||||
typed = now - typedAt > 1000 ? ch : typed + ch; // 超时重新起词,否则追加
|
||||
typedAt = now;
|
||||
const at = options.indexOf(document.activeElement as HTMLElement); // 当前焦点序号,作为环形搜索起点
|
||||
const order = options.map((_, i) => (at + 1 + i) % options.length); // 从下一项开始环形排列的序号
|
||||
const hit = order.find((i) => props.options[i].label.toLowerCase().startsWith(typed.toLowerCase())); // 前缀匹配(忽略大小写)
|
||||
if (hit != null) options[hit]?.focus(); // 命中即聚焦;无命中留在原地
|
||||
};
|
||||
|
||||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') { open(false); trigger.focus(); return; } // Esc 关闭并回焦触发器
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
@@ -63,7 +76,8 @@ export function select(props: SelectProps): HTMLElement {
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Home' && open()) { e.preventDefault(); options[0]?.focus(); return; } // Home 跳首项
|
||||
if (e.key === 'End' && open()) { e.preventDefault(); options[options.length - 1]?.focus(); } // End 跳末项
|
||||
if (e.key === 'End' && open()) { e.preventDefault(); options[options.length - 1]?.focus(); return; } // End 跳末项
|
||||
if (open() && e.key.length === 1) jumpByTyped(e.key); // 可打印字符:键入快跳(Home/End/方向键已提前接管)
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
if (root.contains(e.target as Node)) return; // 卫语句:组件内点击不处理
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
|
||||
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转",
|
||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项",
|
||||
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转",
|
||||
"flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom'",
|
||||
"radioGroup(props):单选组,options + value 信号双向绑定,disabled 整组禁用",
|
||||
|
||||
Reference in New Issue
Block a user