iter(g124): 复选框补 indeterminate 半选态

This commit is contained in:
HIsheR
2026-10-26 14:37:02 +08:00
parent 85731a206a
commit 63d3c910a7
7 changed files with 36 additions and 9 deletions
+5 -1
View File
@@ -1,7 +1,7 @@
import { effect, h } from '@ui-arch/frame';
import type { CheckboxProps } from './types.js';
/*** 复选框:checked 信号双向绑定,disabled 支持布尔或信号禁用,onChange 为变更回调 ***/
/*** 复选框:checked 信号双向绑定,indeterminate 半选态(视觉与 mixed 播报),disabled 支持布尔或信号禁用,onChange 为变更回调 ***/
export function checkbox(props: CheckboxProps): HTMLElement {
const el = h('input', { type: 'checkbox', class: 'ua-checkbox', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性,Signal 走响应式
if (props.checked) {
@@ -11,6 +11,10 @@ export function checkbox(props: CheckboxProps): HTMLElement {
if (el.checked !== checked()) el.checked = checked(); // 外部变化写回勾选框
});
}
if (props.indeterminate !== undefined) {
const ind = props.indeterminate;
effect(() => { el.indeterminate = typeof ind === 'function' ? ind() : !!ind; }); // 半选态同步原生属性(accent-color 自动渲染横杠,读屏播报 mixed)
}
if (props.onChange) el.addEventListener('change', () => props.onChange!(el.checked));
if (!props.label) return el;
const wrap = h('label', { class: 'ua-check-row' }, el, props.label);
+1
View File
@@ -89,6 +89,7 @@ export interface SegmentedProps {
export interface CheckboxProps {
label?: string; // 右侧文案;缺省不渲染
checked?: Signal<boolean>; // 勾选状态信号,双向绑定
indeterminate?: boolean | Signal<boolean>; // 半选态(批量选择时部分子项选中):仅影响视觉与读屏 mixed 播报,不改变 checked 值
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
onChange?: (checked: boolean) => void; // 变更回调
}
+8 -2
View File
@@ -18,7 +18,7 @@
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限",
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
"checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用",
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮",
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项",
@@ -457,6 +457,11 @@
"t": "string",
"d": "右侧文案;缺省只渲染勾选框"
},
{
"n": "indeterminate",
"t": "boolean | Signal<boolean>",
"d": "半选态(批量选择时部分子项选中):仅影响视觉与读屏 mixed 播报,不改变 checked 值;点一下即回到全选"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
@@ -473,7 +478,8 @@
"steps": [
"创建布尔信号 agreed = signal(false)",
"传入 checked 与 label,勾选即写回信号",
"表单提交前用 agreed() 判断是否勾选"
"表单提交前用 agreed() 判断是否勾选",
"做全选/子项联动时把「部分选中」折算成 indeterminate(布尔或信号):视觉显示横杠,读屏播报 mixed,点一下即全选"
]
},
{