xt/comfy-downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 移除了多余的 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
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Input.tsx
View File

@@ -49,7 +49,7 @@ const Input: Component<InputProps> = (props) => {
class={cx( class={cx(
'flex flex-row items-center gap-2 min-h-[1em] px-3 py-1.5', 'flex flex-row items-center gap-2 min-h-[1em] px-3 py-1.5',
mProps.variant === 'normal' && 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' && 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', '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', mProps.variant === 'immersive' && 'text-on-surface aria-disabled:text-neutral-disabled',
@@ -62,7 +62,10 @@ const Input: Component<InputProps> = (props) => {
placeholder={mProps.placeholder} placeholder={mProps.placeholder}
disabled={mProps.disabled} disabled={mProps.disabled}
value={internalValue()} 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} onInput={handleInput}
/> />
<Show when={isNotNil(mProps.right)}>{mProps.right}</Show> <Show when={isNotNil(mProps.right)}>{mProps.right}</Show>