svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

StyledRawInput: support external force invalid visual state

Browse Source
This commit is contained in:
Elijah Duffy
2025-12-11 16:00:26 -08:00
parent 0608343741
commit df1dd238e2
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/StyledRawInput.svelte
View File

@@ -16,6 +16,8 @@
compact?: boolean; compact?: boolean;
use?: (node: HTMLInputElement) => void; use?: (node: HTMLInputElement) => void;
ref?: HTMLInputElement | null; ref?: HTMLInputElement | null;
/** Forces the input to be visually marked as invalid */
forceInvalid?: boolean;
onvalidate?: (e: InputValidatorEvent) => void; onvalidate?: (e: InputValidatorEvent) => void;
}; };
@@ -30,6 +32,7 @@
compact = false, compact = false,
use, use,
ref = $bindable<HTMLInputElement | null>(null), ref = $bindable<HTMLInputElement | null>(null),
forceInvalid = false,
onvalidate, onvalidate,
class: classValue, class: classValue,
...others ...others
@@ -71,7 +74,7 @@
'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800', 'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800',
'ring-sui-primary ring-offset-1 placeholder-shown:text-ellipsis focus:ring-2', 'ring-sui-primary ring-offset-1 placeholder-shown:text-ellipsis focus:ring-2',
!compact ? 'px-[1.125rem] py-3.5' : 'px-[0.75rem] py-2', !compact ? 'px-[1.125rem] py-3.5' : 'px-[0.75rem] py-2',
!valid && 'border-red-500!', (!valid || forceInvalid) && 'border-red-500!',
disabled && disabled &&
'border-sui-accent/20 text-sui-text/60 dark:text-sui-background/60 cursor-not-allowed', 'border-sui-accent/20 text-sui-text/60 dark:text-sui-background/60 cursor-not-allowed',
classValue classValue