feat(Select): 添加只读属性并优化相关交互

- 在 Select 组件的Props中添加 readonly 属性
- 当组件为只读状态时,禁用下拉框的展开和收缩功能
- 在触发器元素上添加 aria-readonly 属性,提高无障碍访问性
- 调整样式,使只读状态下的组件外观保持一致
This commit is contained in:
Vixalie
2025-08-24 11:24:21 +08:00
parent 9eeb223b97
commit 79a7d4c92a

View File

@@ -108,6 +108,7 @@ interface SelectProps {
value?: Option['value']; value?: Option['value'];
defaultValue?: Option['value']; defaultValue?: Option['value'];
disabled?: boolean; disabled?: boolean;
readonly?: boolean;
onChange?: (value: Option['value']) => void; onChange?: (value: Option['value']) => void;
} }
@@ -118,6 +119,7 @@ const Select: Component<SelectProps> = (props) => {
placeholder: '', placeholder: '',
options: [], options: [],
disabled: false, disabled: false,
readonly: false,
}, },
props, props,
); );
@@ -209,7 +211,9 @@ const Select: Component<SelectProps> = (props) => {
return; return;
} }
clearTimeout(hideOptionTimer); clearTimeout(hideOptionTimer);
setOptionVisible((prev) => !prev); if (!mProps.readonly) {
setOptionVisible((prev) => !prev);
}
}; };
const handleOptionClick = (value: Option['value']) => { const handleOptionClick = (value: Option['value']) => {
if (selected() !== value) { if (selected() !== value) {
@@ -228,8 +232,9 @@ const Select: Component<SelectProps> = (props) => {
<div <div
ref={trigger} ref={trigger}
aria-disabled={mProps.disabled} aria-disabled={mProps.disabled}
aria-readonly={mProps.readonly}
class={cx( class={cx(
'flex items-center gap-3 min-h-[1em] px-3 py-1.5 cursor-pointer aria-disabled:cursor-not-allowed', 'flex items-center gap-3 min-h-[1em] px-3 py-1.5 cursor-pointer aria-disabled:cursor-not-allowed aria-readonly:cursor-not-allowed',
mProps.variant === 'normal' && mProps.variant === 'normal' &&
'rounded-sm bg-neutral text-on-neutral aria-disabled:text-neutral-disabled hover:not-aria-disabled:text-primary-hover', 'rounded-sm bg-neutral text-on-neutral aria-disabled:text-neutral-disabled hover:not-aria-disabled:text-primary-hover',
mProps.variant === 'underlined' && mProps.variant === 'underlined' &&