fix(Input): 修复 Input 组件禁用状态样式
- 移除了多余的 disabled 属性相关样式 - 统一使用 aria-disabled 属性来控制禁用状态样式 - 在 input 元素上添加 disabled:text-neutral-disabled 样式,确保禁用状态下文本颜色正确
This commit is contained in:
@@ -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>
|
||||
|
Reference in New Issue
Block a user