iter: d02 select/radioGroup 补 disabled + 修复 select 箭头旋转
This commit is contained in:
@@ -6,7 +6,12 @@ export function radioGroup(props: RadioGroupProps): HTMLElement {
|
||||
const groupName = `ua-radio-${Math.random().toString(36).slice(2, 8)}`; // 组内唯一 name
|
||||
const radios: HTMLInputElement[] = [];
|
||||
for (const opt of props.options) {
|
||||
const input = h('input', { type: 'radio', name: groupName, class: 'ua-radio' }) as HTMLInputElement;
|
||||
const input = h('input', {
|
||||
type: 'radio',
|
||||
name: groupName,
|
||||
class: 'ua-radio',
|
||||
disabled: props.disabled, // 布尔或信号禁用,h() 直接透传
|
||||
}) as HTMLInputElement;
|
||||
input.value = opt.value;
|
||||
radios.push(input);
|
||||
input.addEventListener('change', () => {
|
||||
|
||||
@@ -24,6 +24,7 @@ export function select(props: SelectProps): HTMLElement {
|
||||
class: 'ua-select-trigger',
|
||||
'aria-haspopup': 'listbox',
|
||||
'aria-expanded': () => String(open()),
|
||||
disabled: props.disabled, // 布尔或信号禁用,h() 直接透传(原生 button 拦截点击)
|
||||
onClick: () => open(!open()),
|
||||
},
|
||||
h('span', { class: () => `ua-select-value${value() ? '' : ' is-empty'}` }, () => current() || props.placeholder || ''),
|
||||
@@ -46,7 +47,7 @@ export function select(props: SelectProps): HTMLElement {
|
||||
);
|
||||
const pop = h('div', { class: () => `ua-select-pop${open() ? ' ua-open' : ''}`, role: 'listbox' }, ...options);
|
||||
|
||||
const root = h('div', { class: 'ua-select' }, trigger, pop);
|
||||
const root = h('div', { class: () => `ua-select${open() ? ' ua-open' : ''}` }, trigger, pop); // 根带开合类,供箭头旋转
|
||||
|
||||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') open(false); // Esc 关闭弹层
|
||||
|
||||
@@ -67,6 +67,7 @@ export interface SelectProps {
|
||||
options: OptionItem[]; // 选项列表
|
||||
value?: Signal<string>; // 选中值信号,双向绑定
|
||||
placeholder?: string; // 未选中时的占位项文案
|
||||
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
|
||||
onChange?: (value: string) => void; // 变更回调
|
||||
}
|
||||
|
||||
@@ -74,6 +75,7 @@ export interface SelectProps {
|
||||
export interface RadioGroupProps {
|
||||
options: OptionItem[]; // 选项列表
|
||||
value?: Signal<string>; // 选中值信号,双向绑定
|
||||
disabled?: boolean | Signal<boolean>; // 禁用态:整组置灰且不可选
|
||||
onChange?: (value: string) => void; // 变更回调
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user