fix(Input): 修复 Input 组件禁用状态样式

- 移除了多余的 disabled 属性相关样式
- 统一使用 aria-disabled 属性来控制禁用状态样式
- 在 input 元素上添加 disabled:text-neutral-disabled 样式,确保禁用状态下文本颜色正确
This commit is contained in:
Vixalie
2025-08-24 11:07:55 +08:00
parent dd4d9b67ee
commit 9fe13bde17

View File

@@ -49,7 +49,7 @@ const Input: Component<InputProps> = (props) => {
class={cx(
'flex flex-row items-center gap-2 min-h-[1em] px-3 py-1.5',
mProps.variant === 'normal' &&
'rounded-sm bg-neutral text-on-neutral aria-disabled:cursor-not-allowed aria-disabled:bg-neutral-disabled aria-disabled:text-on-neutral-disabled disabled:bg-neutral-disabled disabled:text-on-neutral-disabled',
'rounded-sm bg-neutral text-on-neutral aria-disabled:cursor-not-allowed aria-disabled:text-neutral-disabled',
mProps.variant === 'underlined' &&
'border-b border-solid pb-[calc(var(--spacing)*1.5-1px)] border-on-surface text-on-surface aria-disabled:border-neutral-disabled aria-disabled:text-neutral-disabled',
mProps.variant === 'immersive' && 'text-on-surface aria-disabled:text-neutral-disabled',
@@ -62,7 +62,10 @@ const Input: Component<InputProps> = (props) => {
placeholder={mProps.placeholder}
disabled={mProps.disabled}
value={internalValue()}
class={cx('min-h-[1em] grow focus:outline-none placeholder:italic', mProps.inputClass)}
class={cx(
'min-h-[1em] grow focus:outline-none placeholder:italic disabled:text-neutral-disabled',
mProps.inputClass,
)}
onInput={handleInput}
/>
<Show when={isNotNil(mProps.right)}>{mProps.right}</Show>