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

styled, raw input: improve error message control, add compact mode

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-08 12:24:36 -07:00
parent 39ca78e837
commit 9d17fef232
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/StyledRawInput.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { ClassValue, HTMLInputAttributes } from 'svelte/elements'; import type { HTMLInputAttributes } from 'svelte/elements';
import { import {
validate, validate,
type InputValidatorEvent, type InputValidatorEvent,
@@ -13,6 +13,7 @@
value?: string; value?: string;
validate?: ValidatorOptions; validate?: ValidatorOptions;
focus?: boolean; focus?: boolean;
compact?: boolean;
use?: (node: HTMLInputElement) => void; use?: (node: HTMLInputElement) => void;
ref?: HTMLInputElement | null; ref?: HTMLInputElement | null;
onvalidate?: (e: InputValidatorEvent) => void; onvalidate?: (e: InputValidatorEvent) => void;
@@ -26,6 +27,7 @@
validate: validateOpts, validate: validateOpts,
disabled = false, disabled = false,
focus: focusOnMount = false, focus: focusOnMount = false,
compact = false,
use, use,
ref = $bindable<HTMLInputElement | null>(null), ref = $bindable<HTMLInputElement | null>(null),
onvalidate, onvalidate,
@@ -63,10 +65,11 @@
{...others} {...others}
bind:value bind:value
class={[ class={[
'border-sui-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors', 'border-sui-accent w-full rounded-sm border bg-white font-normal transition-colors',
'text-sui-text placeholder:text-sui-text/60 dark:border-sui-accent/50 dark:bg-sui-text-800 placeholder:font-normal', 'text-sui-text placeholder:text-sui-text/60 dark:border-sui-accent/50 dark:bg-sui-text-800 placeholder:font-normal',
'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',
!valid && 'border-red-500!', !valid && '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',

4
src/lib/TextInput.svelte
View File

@@ -9,7 +9,7 @@
id?: string; id?: string;
label?: string; label?: string;
value?: string; value?: string;
invalidMessage?: string; invalidMessage?: string | null;
ref?: HTMLInputElement | null; ref?: HTMLInputElement | null;
class?: ClassValue | null | undefined; class?: ClassValue | null | undefined;
} }
@@ -46,7 +46,7 @@
{...others} {...others}
/> />
{#if others.validate} {#if others.validate && invalidMessage !== null}
<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}> <div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
<Label for={id} error> <Label for={id} error>
{invalidMessage} {invalidMessage}

4
src/routes/+page.svelte
View File

@@ -160,7 +160,7 @@
</div> </div>
<div class="component"> <div class="component">
<p class="title">Styled Raw Input, Text Input, Disabled Input</p> <p class="title">Styled Raw Input, Text Input, Disabled Input, Compact Input</p>
<InputGroup> <InputGroup>
<StyledRawInput placeholder="Type here..." class="basis-1/2" /> <StyledRawInput placeholder="Type here..." class="basis-1/2" />
@@ -169,6 +169,8 @@
<InputGroup> <InputGroup>
<TextInput label="Disabled input" placeholder="You can't enter text" disabled /> <TextInput label="Disabled input" placeholder="You can't enter text" disabled />
<TextInput label="Compact Input" placeholder="Small input field" compact />
</InputGroup> </InputGroup>
</div> </div>