iter(g55): 新增 checkboxGroup 多选组组件

This commit is contained in:
HIsheR
2026-10-26 12:19:23 +08:00
parent 73b37b1cdf
commit e54fdb6f22
12 changed files with 270 additions and 10 deletions
+57 -1
View File
@@ -67,7 +67,8 @@
"backTop(props):返回顶部悬浮按钮,越过阈值才浮现,外环 conic-gradient 显示已滚比例,点击平滑回顶",
"colorPicker(props):颜色选择,预设色板(缺省语义令牌色)+ 原生取色器 + 手输 CSS 颜色串,value 为颜色串信号",
"tour(props):引导漫游,返回 { el, start, close } 句柄;聚光框按 target 选择器定位,卡片自动选方位,Esc / 跳过走 onClose",
"watermark(props, ...children):内容容器 + 平铺水印覆盖层,canvas 生成单元、颜色取自令牌,覆盖层不挡交互"
"watermark(props, ...children):内容容器 + 平铺水印覆盖层,canvas 生成单元、颜色取自令牌,覆盖层不挡交互",
"checkboxGroup(props):多选组,value 为数组信号,min/max 用禁用边界项实现(不抛错),checkAll 支持半选且只统计未禁用项"
],
"keyTypes": [
"ButtonProps",
@@ -2332,6 +2333,61 @@
"color 传 var(--ua-*) 时会先解析成计算值(canvas 不认 CSS 变量),所以暗色主题下颜色会自动跟随",
"覆盖层为 pointer-events:none,下方按钮/输入框照常可点;watermark 根节点自带圆角与裁剪"
]
},
{
"id": "checkboxGroup",
"title": "多选组 CheckboxGroup",
"demo": "sec-checkgroup",
"props": [
{
"n": "options",
"t": "CheckOption[]",
"r": 1,
"d": "选项集合:value / label / 可选 disabled"
},
{
"n": "value",
"t": "Signal<string[]>",
"d": "选中值数组信号;不传则内部维护"
},
{
"n": "min",
"t": "number",
"d": "最少选几项:到下限后已选项禁用,防止取消"
},
{
"n": "max",
"t": "number",
"d": "最多选几项:到上限后未选项禁用"
},
{
"n": "checkAll",
"t": "boolean",
"d": "是否显示全选行(含半选);缺省 false"
},
{
"n": "direction",
"t": "'horizontal' | 'vertical'",
"d": "排列方向;缺省 horizontal"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "整组禁用"
},
{
"n": "onChange",
"t": "(values: string[]) => void",
"d": "变更回调(传副本)"
}
],
"example": "checkboxGroup({ value: permPick, min: 1, max: 3, checkAll: true, options: [{ value: 'read', label: '读取' }, { value: 'write', label: '写入' }] })",
"steps": [
"options 顺序即渲染顺序;勾选后把整份数组写回 value 信号并触发 onChange",
"max 生效时未选项自动禁用,min 生效时已选项自动禁用——用禁用表达边界,不抛错也不静默回滚",
"checkAll 行的选中/半选只统计未禁用项,禁用项不计入基数",
"direction 传 vertical 改为纵向排列;disabled 支持信号,整组响应式禁用"
]
}
]
}