68 lines
No EOL
1.6 KiB
Svelte
68 lines
No EOL
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { DaisyColor, DaisySize } from '$lib/types';
|
|
import type { Snippet } from 'svelte';
|
|
import type { HTMLInputTypeAttribute } from 'svelte/elements';
|
|
import { fade as fadeTransition } from 'svelte/transition';
|
|
|
|
type Props = {
|
|
bordered?: boolean;
|
|
color?: Exclude<DaisyColor, 'neutral'>;
|
|
disabled?: boolean;
|
|
fade?: boolean;
|
|
start?: Snippet | string;
|
|
end?: Snippet | string;
|
|
name: string;
|
|
placeholder?: string;
|
|
size?: DaisySize;
|
|
type?: Extract<
|
|
HTMLInputTypeAttribute,
|
|
'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
|
|
>;
|
|
};
|
|
|
|
let {
|
|
bordered = false,
|
|
color,
|
|
disabled,
|
|
fade,
|
|
start,
|
|
end,
|
|
name,
|
|
placeholder,
|
|
size,
|
|
type = 'text'
|
|
}: 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>
|
|
|
|
<style>
|
|
</style> |