iter: e02 新增 stepper 步骤条组件(三态流转 + active 信号双向绑定 + clickable 回跳)
This commit is contained in:
@@ -284,6 +284,14 @@
|
||||
"acceptance": "packages/skin/ui 新增 inputNumber.ts:−/+ 按钮 + 输入框三段式,value 信号双向绑定,min/max/step 超界自动夹取,键盘 ↑↓ 调节,非法输入回滚,disabled 支持布尔或信号;只消费 --ua-* 令牌;导出、manifest、文档、llms-full.txt 同步;demo 加一节演示;npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "inputNumber(props):−/+ 复用 ghost button(自带微动画与 disabled 透传),输入框 inputmode=decimal,change 时 parseFloat 解析、非法回滚当前值;↑↓ 步进并 preventDefault;clamp 统一夹取 min/max(缺省 ±Infinity);aria-label 三件套 + role=group;CSS 步进按钮收窄、tabular-nums;demo 新增 sec-inputnumber(与禁用态实例共用 qty 信号);manifest/docs/llms-full/README 同步为 29 组件"
|
||||
},
|
||||
{
|
||||
"id": "e02",
|
||||
"title": "新增 stepper 步骤条组件",
|
||||
"motivation": "下单、注册等多步流程需要进度指示与回跳,现有导航类组件(tabs/breadcrumb/pagination)都不覆盖分步语义;纯展示 + 可选点击回跳,改动范围可控",
|
||||
"acceptance": "packages/skin/ui 新增 stepper.ts:stepper({steps, active, clickable?, onChange?}),done/current/upcoming 三态视觉,clickable 时已完成步骤可点回跳并写回 active 信号,aria-current=step;只消费 --ua-* 令牌;导出、manifest、文档、llms-full.txt、README 清单同步;demo 加一节演示;npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "stepper(props):active 信号变化整条重渲染(effect 首跑赋值 + replaceWith,条目少开销可忽略);done 显示 ✓、current 光环聚焦、upcoming 弱化,aria-current=step;clickable 时已完成步骤渲染为 button 回跳写回信号;连接线用 .ua-step + .ua-step::before 横向短线;demo 新增 sec-stepper(上一步/下一步按钮 computed 禁用联动);README 同步 30 组件"
|
||||
}
|
||||
]
|
||||
}
|
||||
+38
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-23T09:49:54.480Z",
|
||||
"generatedAt": "2026-10-23T09:57:15.241Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -167,6 +167,7 @@
|
||||
"spinner(props):加载指示器,size 控制直径",
|
||||
"progress(props):进度条,value 信号驱动 0-100(满格切 success 色);不传 value 退化为不确定态无限往复",
|
||||
"tabs(props):标签页,active 信号双向绑定,滑动指示条 + 方向键环形导航,支持禁用页签",
|
||||
"stepper(props):步骤条,done/current/upcoming 三态,active 信号双向绑定,clickable 时已完成步骤可回跳",
|
||||
"modal(props, ...children):弹窗,open 信号驱动显隐,Esc / 遮罩 / × 关闭,size 三档宽度,footer 提供底部操作区",
|
||||
"drawer(props, ...children):抽屉,open 信号驱动侧滑面板,placement 左右可配、width 可调、footer 操作区,遮罩 / × / Esc 关闭",
|
||||
"form(props, items):表单容器,布局 + 聚合校验,全部通过才触发 onSubmit",
|
||||
@@ -1107,6 +1108,42 @@
|
||||
"键盘可访问:Tab 聚焦激活页签,←→ 在启用页签间环形移动"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "stepper",
|
||||
"title": "步骤条 Stepper",
|
||||
"demo": "sec-stepper",
|
||||
"props": [
|
||||
{
|
||||
"n": "steps",
|
||||
"t": "StepperItem[]",
|
||||
"r": 1,
|
||||
"d": "步骤列表,每项 { label, description? }"
|
||||
},
|
||||
{
|
||||
"n": "active",
|
||||
"t": "Signal<number>",
|
||||
"r": 1,
|
||||
"d": "当前步索引(0 基)信号,双向绑定:回跳写回、外部赋值同步"
|
||||
},
|
||||
{
|
||||
"n": "clickable",
|
||||
"t": "boolean",
|
||||
"d": "已完成步骤是否可点击回跳;缺省 false"
|
||||
},
|
||||
{
|
||||
"n": "onChange",
|
||||
"t": "(index: number) => void",
|
||||
"k": 1,
|
||||
"d": "步骤切换回调(点击回跳触发)"
|
||||
}
|
||||
],
|
||||
"example": "const step = signal(1); stepper({ steps: [{ label: '下单' }, { label: '支付' }, { label: '完成' }], active: step, clickable: true })",
|
||||
"steps": [
|
||||
"用 signal(0) 创建当前步索引,传入 active;索引之前的步骤显示 ✓ 已完成态",
|
||||
"流程推进时外部赋值即可:step(step() + 1),组件三态自动跟随",
|
||||
"clickable: true 时已完成步骤可点击回跳并写回信号,配合 onChange 同步业务状态"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "pagination",
|
||||
"title": "分页器 Pagination",
|
||||
|
||||
@@ -35,3 +35,4 @@
|
||||
{"ts": "2026-10-23T09:11:42+00:00", "round": 28, "id": "d28", "result": "done", "commit": "", "summary": "drawer 焦点陷阱对齐 modal"}
|
||||
{"ts": "2026-10-23T09:12:49+00:00", "round": 29, "id": "d29", "result": "done", "commit": "", "summary": "menu Home/End 跳转对齐 select"}
|
||||
{"ts":"2026-10-23T17:50:14+08:00","id":"e01","result":"done","commit":"20d7b94","summary":"新增 inputNumber 数字输入:−/+ 按钮 + 键盘上下步进,信号双向绑定,min/max/step 夹取,门禁全绿"}
|
||||
{"ts":"2026-10-23T17:57:31+08:00","id":"e02","result":"done","commit":"pending","summary":"新增 stepper 步骤条:三态流转 + active 信号双向绑定 + clickable 回跳,门禁全绿"}
|
||||
|
||||
Reference in New Issue
Block a user