diff --git a/.ua/backlog.json b/.ua/backlog.json index d96b262..7eeb877 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -1309,14 +1309,6 @@ "notes": "自补:发版前刷新步骤;本次唤起收尾轮", "status": "done" }, - { - "id": "g124", - "title": "checkbox 补 indeterminate 半选态", - "motivation": "全选/子项联动只能表达「全勾」与「全不勾」:部分选中时全选框没有任何视觉区分,dataTable 内部的全选三态也是包私有实现,独立 checkbox 场景(树形勾选、批量列选择)用不上", - "acceptance": "CheckboxProps 新增 indeterminate(布尔或信号):同步到原生 input.indeterminate 属性,accent-color 自动渲染横杠,读屏播报 mixed;不改变 checked 值与点击语义(点一下即回全选);文档参数表 / api 说明 / 手把手与 llms-full.txt 同步;npm run check 全绿", - "notes": "自补:组件能力补齐;零新增 CSS(accent-color 原生覆盖 :indeterminate)", - "status": "open" - }, { "id": "g119", "title": "空状态支持自定义图标", @@ -1355,6 +1347,22 @@ "motivation": "g118 之后又落了 10 次提交(textField 字数统计、rate 半星等),changelog:check 已报漂移", "acceptance": "npm run changelog 重新生成(319 提交),changelog:check 一致(提交本条后按约定再差一条,属正常);npm run check 全绿", "notes": "自补:发版前刷新步骤;本次唤起收尾轮", + "status": "done" + }, + { + "id": "g124", + "title": "checkbox 补 indeterminate 半选态", + "motivation": "全选/子项联动只能表达「全勾」与「全不勾」:部分选中时全选框没有任何视觉区分,dataTable 内部的全选三态也是包私有实现,独立 checkbox 场景(树形勾选、批量列选择)用不上", + "acceptance": "CheckboxProps 新增 indeterminate(布尔或信号):同步到原生 input.indeterminate 属性,accent-color 自动渲染横杠,读屏播报 mixed;不改变 checked 值与点击语义(点一下即回全选);文档参数表 / api 说明 / 手把手与 llms-full.txt 同步;npm run check 全绿", + "notes": "自补:组件能力补齐;零新增 CSS(accent-color 原生覆盖 :indeterminate)", + "status": "done" + }, + { + "id": "g125", + "title": "开关补 loading 加载态", + "motivation": "开关切换常伴随后端写入(改配置、提交设置):请求在途时用户可以连续拨动,最后一次点击覆盖前面的状态,业务方只能自己在 onChange 里加标志位手动锁", + "acceptance": "SwitchProps 新增 loading(布尔或信号):加载中锁定交互(disabled 同值语义)、滑块换成转圈(reduced-motion 静态化为实心环)、input 挂 aria-busy;与 disabled 同时生效且不双写竞争;文档参数表 / api 说明 / 手把手与 llms-full.txt 同步;npm run check 全绿", + "notes": "自补:组件能力补齐;loading 接管时 disabled 不再走 h() 绑定,单一 effect 写入避免竞争", "status": "open" } ] diff --git a/.ua/index.json b/.ua/index.json index baedabc..3705929 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T06:36:53.099Z", + "generatedAt": "2026-10-26T06:44:14.161Z", "repoRoot": ".", "packages": [ { @@ -148,7 +148,7 @@ "textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限", "slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值", "checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用", - "switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用", + "switchButton(props):开关,checked 信号双向绑定,loading 加载锁(滑块转圈 + aria-busy),disabled 支持布尔或信号禁用", "select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮", "menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项", "flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom'", @@ -632,6 +632,11 @@ "t": "string", "d": "左侧文案" }, + { + "n": "loading", + "t": "boolean | Signal", + "d": "加载中:锁定交互、滑块换成转圈并挂 aria-busy(异步提交防误点);与 disabled 同时生效" + }, { "n": "disabled", "t": "boolean | Signal", @@ -648,7 +653,8 @@ "steps": [ "创建布尔信号并传入 checked", "轨道与滑块的动画由 CSS 完成,无需干预", - "状态变化在 onChange 里做副作用(如切换主题)" + "状态变化在 onChange 里做副作用(如切换主题)", + "切换要等异步请求就传 loading(布尔或信号):请求期间滑块转圈、不可点,完成后自动恢复" ] }, { diff --git a/llms-full.txt b/llms-full.txt index e91ebb2..06f2f2d 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档(无图形版) -> 自动生成于 2026-10-26T06:36:53.099Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 +> 自动生成于 2026-10-26T06:44:14.161Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 ## 快速上手 @@ -245,6 +245,7 @@ const agreed = signal(false); checkbox({ label: '同意条款', checked: agreed, - checked:Signal —— 开关状态信号,双向绑定 - ariaLabel:string —— 无可见文案时的可访问名(如纯图标开关);缺省取 label - label:string —— 左侧文案 +- loading:boolean | Signal —— 加载中:锁定交互、滑块换成转圈并挂 aria-busy(异步提交防误点);与 disabled 同时生效 - disabled:boolean | Signal —— 禁用态:布尔直接置位,传信号则动态同步 - onChange(回调):(checked: boolean) => void —— 变更回调 @@ -259,6 +260,7 @@ const night = signal(true); switchButton({ label: '夜间模式', checked: night 1. 创建布尔信号并传入 checked 2. 轨道与滑块的动画由 CSS 完成,无需干预 3. 状态变化在 onChange 里做副作用(如切换主题) +4. 切换要等异步请求就传 loading(布尔或信号):请求期间滑块转圈、不可点,完成后自动恢复 现场演示:apps/docs/demo.html#sec-form @@ -1672,7 +1674,7 @@ API 速览: - textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限 - slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值 - checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用 -- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用 +- switchButton(props):开关,checked 信号双向绑定,loading 加载锁(滑块转圈 + aria-busy),disabled 支持布尔或信号禁用 - select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮 - menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项 - flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom' diff --git a/llms.txt b/llms.txt index 92c33f9..e653c67 100644 --- a/llms.txt +++ b/llms.txt @@ -53,7 +53,7 @@ - textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限 - slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值 - checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用 - - switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用 + - switchButton(props):开关,checked 信号双向绑定,loading 加载锁(滑块转圈 + aria-busy),disabled 支持布尔或信号禁用 - select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮 - menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项 - flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom' diff --git a/packages/skin/ui/src/switch.ts b/packages/skin/ui/src/switch.ts index 7c8c0f1..4d32371 100644 --- a/packages/skin/ui/src/switch.ts +++ b/packages/skin/ui/src/switch.ts @@ -1,14 +1,15 @@ import { effect, h } from '@ui-arch/frame'; import type { SwitchProps } from './types.js'; -/*** 开关:checked 信号双向绑定,disabled 支持布尔或信号禁用,轨道 + 滑块的纯 CSS 实现 ***/ +/*** 开关:checked 信号双向绑定,loading 加载锁(转圈 + 禁点),disabled 支持布尔或信号禁用,轨道 + 滑块的纯 CSS 实现 ***/ export function switchButton(props: SwitchProps): HTMLElement { + const hasLoading = props.loading !== undefined; // 加载态接管禁用写入时,disabled 不再走 h() 双写 const input = h('input', { type: 'checkbox', class: 'ua-switch-input', role: 'switch', // 用开关语义而非复选框:读屏播报「开关」并跟随选中态 'aria-label': props.ariaLabel ?? props.label, // 无可见文案时也要有可访问名 - disabled: props.disabled, // false/undefined 移除属性,Signal 走响应式 + disabled: hasLoading ? undefined : props.disabled, // false/undefined 移除属性,Signal 走响应式 }) as HTMLInputElement; if (props.checked) { const checked = props.checked; @@ -20,6 +21,16 @@ export function switchButton(props: SwitchProps): HTMLElement { if (props.onChange) input.addEventListener('change', () => props.onChange!(input.checked)); const track = h('span', { class: 'ua-switch-track' }, h('span', { class: 'ua-switch-thumb' })); const el = h('label', { class: 'ua-switch' }, input, track); + if (hasLoading) { + const ld = props.loading; // 加载态:单一写入口同时管 disabled 与转圈,避免与 disabled 信号双写竞争 + const dis = props.disabled; + effect(() => { + const busy = typeof ld === 'function' ? ld() : !!ld; + input.disabled = busy || (typeof dis === 'function' ? dis() : !!dis); // 加载中锁定交互 + el.classList.toggle('is-loading', busy); // 滑块转圈由 CSS 承载 + input.setAttribute('aria-busy', String(busy)); // 读屏可感知忙碌 + }); + } if (props.label) el.append(h('span', { class: 'ua-switch-label' }, props.label)); return el; } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index c3eb36b..5775772 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -99,6 +99,7 @@ export interface SwitchProps { label?: string; // 左侧文案;缺省不渲染(此时读屏名靠 ariaLabel 兜底) ariaLabel?: string; // 无可见文案时的可访问名,如纯图标开关;缺省取 label checked?: Signal; // 开关状态信号,双向绑定 + loading?: boolean | Signal; // 加载中:锁定交互、滑块换成转圈并挂 aria-busy,用于异步提交防误点 disabled?: boolean | Signal; // 禁用态:布尔直接置位,传信号则动态同步 onChange?: (checked: boolean) => void; // 变更回调 } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 772abe0..e5c87e9 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -19,7 +19,7 @@ "textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限", "slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值", "checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用", - "switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用", + "switchButton(props):开关,checked 信号双向绑定,loading 加载锁(滑块转圈 + aria-busy),disabled 支持布尔或信号禁用", "select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮", "menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项", "flip(trigger, panel, preferred):浮层上下翻转判定,按触发器与面板的视口几何决定 preferred 方位放不下时是否翻转,返回实际生效方位 'top' | 'bottom'", @@ -503,6 +503,11 @@ "t": "string", "d": "左侧文案" }, + { + "n": "loading", + "t": "boolean | Signal", + "d": "加载中:锁定交互、滑块换成转圈并挂 aria-busy(异步提交防误点);与 disabled 同时生效" + }, { "n": "disabled", "t": "boolean | Signal", @@ -519,7 +524,8 @@ "steps": [ "创建布尔信号并传入 checked", "轨道与滑块的动画由 CSS 完成,无需干预", - "状态变化在 onChange 里做副作用(如切换主题)" + "状态变化在 onChange 里做副作用(如切换主题)", + "切换要等异步请求就传 loading(布尔或信号):请求期间滑块转圈、不可点,完成后自动恢复" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index ddd6319..e46bd03 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -293,6 +293,24 @@ body.ua-col-resizing { .ua-switch-label { font-size: var(--ua-font-size-md); } +.ua-switch.is-loading { + cursor: progress; /* 加载中:光标改忙碌 */ +} +.ua-switch.is-loading .ua-switch-thumb { + box-sizing: border-box; /* 滑块换成转圈环:border 计入尺寸 */ + background: transparent; + border: 2px solid color-mix(in srgb, var(--ua-color-bg) 40%, transparent); + border-top-color: var(--ua-color-bg); + animation: ua-switch-spin 0.7s linear infinite; +} +@keyframes ua-switch-spin { + to { transform: rotate(360deg); } +} +@media (prefers-reduced-motion: reduce) { + .ua-switch.is-loading .ua-switch-thumb { + animation: none; /* 减少动效:转圈静态化为实心环 */ + } +} /* —— 下拉选择(自绘弹层) —— */ .ua-select {