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

update TextInput to extend input element

Browse source
This commit is contained in:
Benjamin Palko 2025-01-09 22:20:00 -05:00
parent fd705aecc5
commit 5fe4ae77e7
1 changed files with 5 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,26 +1,23 @@
<script lang="ts"> <script lang="ts">
import type { DaisyColor, DaisySize } from '$lib/types'; import type { DaisyColor, DaisySize } from '$lib/types';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import type { HTMLInputTypeAttribute } from 'svelte/elements'; import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
import { fade as fadeTransition } from 'svelte/transition'; import { fade as fadeTransition } from 'svelte/transition';
type Props = { type Props = {
bordered?: boolean; bordered?: boolean;
color?: Exclude<DaisyColor, 'neutral'>; color?: Exclude<DaisyColor, 'neutral'>;
disabled?: boolean;
error?: string | Snippet; error?: string | Snippet;
fade?: boolean; fade?: boolean;
start?: string | Snippet; start?: string | Snippet;
end?: string | Snippet; end?: string | Snippet;
label?: string | Snippet; label?: string | Snippet;
name: string;
placeholder?: string;
size?: DaisySize; size?: DaisySize;
type?: Extract< type?: Extract<
HTMLInputTypeAttribute, HTMLInputTypeAttribute,
'email' | 'password' | 'search' | 'tel' | 'text' | 'url' 'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
>; >;
}; } & Omit<SvelteHTMLElements['input'], 'type'>;
let { let {
bordered = false, bordered = false,
@ -35,10 +32,11 @@
placeholder, placeholder,
size, size,
type = 'text', type = 'text',
...props
}: Props = $props(); }: Props = $props();
</script> </script>
<label class="form-control w-full"> <label class="form-control w-full" transition:fadeTransition={{ duration: fade ? 200 : 0 }}>
<div class="label"> <div class="label">
<span <span
class="label-text" class="label-text"
@ -65,7 +63,6 @@
</span> </span>
</div> </div>
<div <div
transition:fadeTransition={{ duration: fade ? 200 : 0 }}
class="input flex w-full items-center gap-2" class="input flex w-full items-center gap-2"
class:input-bordered={bordered} class:input-bordered={bordered}
class:input-xs={size === 'xs'} class:input-xs={size === 'xs'}
@ -85,7 +82,7 @@
{:else} {:else}
{@render start?.()} {@render start?.()}
{/if} {/if}
<input {disabled} {name} {placeholder} {type} class="grow" /> <input {...props} {disabled} {name} {placeholder} {type} class="grow" />
{#if typeof end === 'string'} {#if typeof end === 'string'}
{end} {end}
{:else} {:else}