iter(g124): 复选框补 indeterminate 半选态
This commit is contained in:
@@ -1309,6 +1309,14 @@
|
|||||||
"notes": "自补:发版前刷新步骤;本次唤起收尾轮",
|
"notes": "自补:发版前刷新步骤;本次唤起收尾轮",
|
||||||
"status": "done"
|
"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",
|
"id": "g119",
|
||||||
"title": "空状态支持自定义图标",
|
"title": "空状态支持自定义图标",
|
||||||
|
|||||||
+9
-3
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"$schema": "ui-arch-registry-index/0.1",
|
"$schema": "ui-arch-registry-index/0.1",
|
||||||
"generatedAt": "2026-10-26T06:33:37.851Z",
|
"generatedAt": "2026-10-26T06:36:53.099Z",
|
||||||
"repoRoot": ".",
|
"repoRoot": ".",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
|
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
|
||||||
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限",
|
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限",
|
||||||
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
|
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
|
||||||
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
"checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用",
|
||||||
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮",
|
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮",
|
||||||
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项",
|
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项",
|
||||||
@@ -586,6 +586,11 @@
|
|||||||
"t": "string",
|
"t": "string",
|
||||||
"d": "右侧文案;缺省只渲染勾选框"
|
"d": "右侧文案;缺省只渲染勾选框"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"n": "indeterminate",
|
||||||
|
"t": "boolean | Signal<boolean>",
|
||||||
|
"d": "半选态(批量选择时部分子项选中):仅影响视觉与读屏 mixed 播报,不改变 checked 值;点一下即回到全选"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"n": "disabled",
|
"n": "disabled",
|
||||||
"t": "boolean | Signal<boolean>",
|
"t": "boolean | Signal<boolean>",
|
||||||
@@ -602,7 +607,8 @@
|
|||||||
"steps": [
|
"steps": [
|
||||||
"创建布尔信号 agreed = signal(false)",
|
"创建布尔信号 agreed = signal(false)",
|
||||||
"传入 checked 与 label,勾选即写回信号",
|
"传入 checked 与 label,勾选即写回信号",
|
||||||
"表单提交前用 agreed() 判断是否勾选"
|
"表单提交前用 agreed() 判断是否勾选",
|
||||||
|
"做全选/子项联动时把「部分选中」折算成 indeterminate(布尔或信号):视觉显示横杠,读屏播报 mixed,点一下即全选"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
+4
-2
@@ -1,6 +1,6 @@
|
|||||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||||
|
|
||||||
> 自动生成于 2026-10-26T06:33:37.851Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
> 自动生成于 2026-10-26T06:36:53.099Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||||
|
|
||||||
## 快速上手
|
## 快速上手
|
||||||
@@ -219,6 +219,7 @@ const vol = signal(40); slider({ value: vol, min: 0, max: 100, step: 5, onChange
|
|||||||
|
|
||||||
- checked:Signal<boolean> —— 勾选状态信号,双向绑定
|
- checked:Signal<boolean> —— 勾选状态信号,双向绑定
|
||||||
- label:string —— 右侧文案;缺省只渲染勾选框
|
- label:string —— 右侧文案;缺省只渲染勾选框
|
||||||
|
- indeterminate:boolean | Signal<boolean> —— 半选态(批量选择时部分子项选中):仅影响视觉与读屏 mixed 播报,不改变 checked 值;点一下即回到全选
|
||||||
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
|
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
|
||||||
- onChange(回调):(checked: boolean) => void —— 变更回调
|
- onChange(回调):(checked: boolean) => void —— 变更回调
|
||||||
|
|
||||||
@@ -233,6 +234,7 @@ const agreed = signal(false); checkbox({ label: '同意条款', checked: agreed,
|
|||||||
1. 创建布尔信号 agreed = signal(false)
|
1. 创建布尔信号 agreed = signal(false)
|
||||||
2. 传入 checked 与 label,勾选即写回信号
|
2. 传入 checked 与 label,勾选即写回信号
|
||||||
3. 表单提交前用 agreed() 判断是否勾选
|
3. 表单提交前用 agreed() 判断是否勾选
|
||||||
|
4. 做全选/子项联动时把「部分选中」折算成 indeterminate(布尔或信号):视觉显示横杠,读屏播报 mixed,点一下即全选
|
||||||
|
|
||||||
现场演示:apps/docs/demo.html#sec-form
|
现场演示:apps/docs/demo.html#sec-form
|
||||||
|
|
||||||
@@ -1669,7 +1671,7 @@ API 速览:
|
|||||||
- inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块
|
- inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块
|
||||||
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限
|
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限
|
||||||
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
|
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
|
||||||
- checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
- checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用
|
||||||
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
||||||
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮
|
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮
|
||||||
- menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项
|
- menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项
|
||||||
|
|||||||
@@ -52,7 +52,7 @@
|
|||||||
- inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块
|
- inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块
|
||||||
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限
|
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限
|
||||||
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
|
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
|
||||||
- checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
- checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用
|
||||||
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
|
||||||
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮
|
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮
|
||||||
- menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项
|
- menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { effect, h } from '@ui-arch/frame';
|
import { effect, h } from '@ui-arch/frame';
|
||||||
import type { CheckboxProps } from './types.js';
|
import type { CheckboxProps } from './types.js';
|
||||||
|
|
||||||
/*** 复选框:checked 信号双向绑定,disabled 支持布尔或信号禁用,onChange 为变更回调 ***/
|
/*** 复选框:checked 信号双向绑定,indeterminate 半选态(视觉与 mixed 播报),disabled 支持布尔或信号禁用,onChange 为变更回调 ***/
|
||||||
export function checkbox(props: CheckboxProps): HTMLElement {
|
export function checkbox(props: CheckboxProps): HTMLElement {
|
||||||
const el = h('input', { type: 'checkbox', class: 'ua-checkbox', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性,Signal 走响应式
|
const el = h('input', { type: 'checkbox', class: 'ua-checkbox', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性,Signal 走响应式
|
||||||
if (props.checked) {
|
if (props.checked) {
|
||||||
@@ -11,6 +11,10 @@ export function checkbox(props: CheckboxProps): HTMLElement {
|
|||||||
if (el.checked !== checked()) el.checked = checked(); // 外部变化写回勾选框
|
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.onChange) el.addEventListener('change', () => props.onChange!(el.checked));
|
||||||
if (!props.label) return el;
|
if (!props.label) return el;
|
||||||
const wrap = h('label', { class: 'ua-check-row' }, el, props.label);
|
const wrap = h('label', { class: 'ua-check-row' }, el, props.label);
|
||||||
|
|||||||
@@ -89,6 +89,7 @@ export interface SegmentedProps {
|
|||||||
export interface CheckboxProps {
|
export interface CheckboxProps {
|
||||||
label?: string; // 右侧文案;缺省不渲染
|
label?: string; // 右侧文案;缺省不渲染
|
||||||
checked?: Signal<boolean>; // 勾选状态信号,双向绑定
|
checked?: Signal<boolean>; // 勾选状态信号,双向绑定
|
||||||
|
indeterminate?: boolean | Signal<boolean>; // 半选态(批量选择时部分子项选中):仅影响视觉与读屏 mixed 播报,不改变 checked 值
|
||||||
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
|
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
|
||||||
onChange?: (checked: boolean) => void; // 变更回调
|
onChange?: (checked: boolean) => void; // 变更回调
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
|
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
|
||||||
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限",
|
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限",
|
||||||
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
|
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
|
||||||
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
"checkbox(props):复选框,checked 信号双向绑定,indeterminate 半选态(读屏播报 mixed),disabled 支持布尔或信号禁用",
|
||||||
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮",
|
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用,空间不足自动翻转,键入字母快跳选项;searchable 开启弹层搜索框,clearable 有值时给清空按钮",
|
||||||
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项",
|
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭,空间不足自动翻转,键入字母快跳菜单项",
|
||||||
@@ -457,6 +457,11 @@
|
|||||||
"t": "string",
|
"t": "string",
|
||||||
"d": "右侧文案;缺省只渲染勾选框"
|
"d": "右侧文案;缺省只渲染勾选框"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"n": "indeterminate",
|
||||||
|
"t": "boolean | Signal<boolean>",
|
||||||
|
"d": "半选态(批量选择时部分子项选中):仅影响视觉与读屏 mixed 播报,不改变 checked 值;点一下即回到全选"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"n": "disabled",
|
"n": "disabled",
|
||||||
"t": "boolean | Signal<boolean>",
|
"t": "boolean | Signal<boolean>",
|
||||||
@@ -473,7 +478,8 @@
|
|||||||
"steps": [
|
"steps": [
|
||||||
"创建布尔信号 agreed = signal(false)",
|
"创建布尔信号 agreed = signal(false)",
|
||||||
"传入 checked 与 label,勾选即写回信号",
|
"传入 checked 与 label,勾选即写回信号",
|
||||||
"表单提交前用 agreed() 判断是否勾选"
|
"表单提交前用 agreed() 判断是否勾选",
|
||||||
|
"做全选/子项联动时把「部分选中」折算成 indeterminate(布尔或信号):视觉显示横杠,读屏播报 mixed,点一下即全选"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user