pantheon/hestia
2
0
Fork 0
Code Issues 23 Pull requests Projects Releases Packages Wiki Activity Actions

update with label and error

Browse source
This commit is contained in:
Benjamin Palko 2024-12-30 18:36:37 -05:00
parent 01704b5a88
commit be3c7874ff
2 changed files with 77 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/lib/components/DataInput/TextInput.stories.svelte
View file

@ -6,27 +6,36 @@
title: 'Data Input/Text Input',
component: TextInput,
argTypes: {
bordered: {
control: 'boolean',
},
color: {
control: 'select',
options: [
'ghost',
'primary',
'secondary',
'accent',
'ghost',
'link',
'info',
'success',
'warning',
'error',
],
},
bordered: {
disabled: {
control: 'boolean',
},
error: {
control: 'text',
},
fade: { control: 'boolean' },
start: { control: 'text' },
end: { control: 'text' },
label: { control: 'text' },
placeholder: { control: 'text' },
size: {
control: 'select',
options: ['Default', 'xs', 'sm', 'lg'],
defaultValue: 'Default',
options: ['xs', 'sm', '-', 'lg'],
},
type: {
control: 'select',
@ -42,4 +51,4 @@
<Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
<Story name="Icon Start" args={{ color: 'secondary', name: 'text', start: icon }} />
<Story name="Icon End" args={{ color: 'secondary', name: 'text', end: icon }} />
<Story name="Icon End" args={{ color: 'secondary', name: 'text', end: icon }} />

93
src/lib/components/DataInput/TextInput.svelte
View file

@ -8,9 +8,11 @@
bordered?: boolean;
color?: Exclude<DaisyColor, 'neutral'>;
disabled?: boolean;
error?: string | Snippet;
fade?: boolean;
start?: Snippet | string;
end?: Snippet | string;
start?: string | Snippet;
end?: string | Snippet;
label?: string | Snippet;
name: string;
placeholder?: string;
size?: DaisySize;
@ -24,9 +26,11 @@
bordered = false,
color,
disabled,
error,
fade,
start,
end,
label,
name,
placeholder,
size,
@ -34,35 +38,62 @@
}: Props = $props();
</script>
<label
transition:fadeTransition={{ duration: fade ? 200 : 0 }}
class="input flex w-full items-center gap-2"
class:input-bordered={bordered}
class:input-xs={size === 'xs'}
class:input-sm={size === 'sm'}
class:input-lg={size === 'lg'}
class:input-primary={color === 'primary'}
class:input-secondary={color === 'secondary'}
class:input-accent={color === 'accent'}
class:input-ghost={color === 'ghost'}
class:input-link={color === 'link'}
class:input-info={color === 'info'}
class:input-success={color === 'success'}
class:input-warning={color === 'warning'}
class:input-error={color === 'error'}
>
{#if typeof start === 'string'}
{start}
{:else}
{@render start?.()}
{/if}
<input {disabled} {name} {placeholder} {type} class="grow" />
{#if typeof end === 'string'}
{end}
{:else}
{@render end?.()}
{/if}
<label class="form-control w-full">
<div class="label">
<span
class="label-text"
class:text-primary={color === 'primary'}
class:text-secondary={color === 'secondary'}
class:text-accent={color === 'accent'}
class:text-info={color === 'info'}
class:text-success={color === 'success'}
class:text-warning={color === 'warning'}
class:text-error={color === 'error' || error}
>
{#if typeof label === 'string'}
{label}
{:else if label}
{@render label()}
{/if}
</span>
<span class="label-text-alt font-semibold text-error">
{#if typeof error === 'string'}
{error}
{:else if error}
{@render error()}
{/if}
</span>
</div>
<div
transition:fadeTransition={{ duration: fade ? 200 : 0 }}
class="input flex w-full items-center gap-2"
class:input-bordered={bordered}
class:input-xs={size === 'xs'}
class:input-sm={size === 'sm'}
class:input-lg={size === 'lg'}
class:input-primary={color === 'primary'}
class:input-secondary={color === 'secondary'}
class:input-accent={color === 'accent'}
class:input-ghost={color === 'ghost'}
class:input-link={color === 'link'}
class:input-info={color === 'info'}
class:input-success={color === 'success'}
class:input-warning={color === 'warning'}
class:input-error={color === 'error' || error}
>
{#if typeof start === 'string'}
{start}
{:else}
{@render start?.()}
{/if}
<input {disabled} {name} {placeholder} {type} class="grow" />
{#if typeof end === 'string'}
{end}
{:else}
{@render end?.()}
{/if}
</div>
</label>
<style>
</style>
</style>