iter(g124): 复选框补 indeterminate 半选态
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user