69 lines
No EOL
1.7 KiB
Svelte
69 lines
No EOL
1.7 KiB
Svelte
<script lang="ts" module>
|
|
export type InputFieldStyle = 'ghost';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { DaisyColor, DaisySize } from '$lib/types';
|
|
import clsx from 'clsx';
|
|
import type { Snippet } from 'svelte';
|
|
import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
type Props = {
|
|
block?: boolean;
|
|
color?: DaisyColor;
|
|
error?: string | Snippet;
|
|
fade?: boolean;
|
|
start?: string | Snippet;
|
|
end?: string | Snippet;
|
|
label?: string | Snippet;
|
|
size?: DaisySize;
|
|
style?: InputFieldStyle;
|
|
type?: Extract<
|
|
HTMLInputTypeAttribute,
|
|
'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
|
|
>;
|
|
} & Omit<SvelteHTMLElements['input'], 'type' | 'size'>;
|
|
|
|
let {
|
|
block,
|
|
class: className,
|
|
color,
|
|
start,
|
|
end,
|
|
size = 'md',
|
|
style,
|
|
...props
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="input flex items-center gap-2 transition-[width] delay-150 duration-300 ease-in-out"
|
|
class:w-full={block}
|
|
class:input-primary={color === 'primary'}
|
|
class:input-secondary={color === 'secondary'}
|
|
class:input-accent={color === 'accent'}
|
|
class:input-neutral={color === 'neutral'}
|
|
class:input-info={color === 'info'}
|
|
class:input-success={color === 'success'}
|
|
class:input-warning={color === 'warning'}
|
|
class:input-error={color === 'error'}
|
|
class:input-ghost={style === 'ghost'}
|
|
class:input-xs={size === 'xs'}
|
|
class:input-sm={size === 'sm'}
|
|
class:input-md={size === 'md'}
|
|
class:input-lg={size === 'lg'}
|
|
class:input-xl={size === 'xl'}
|
|
>
|
|
{#if typeof start === 'string'}
|
|
{start}
|
|
{:else}
|
|
{@render start?.()}
|
|
{/if}
|
|
<input {...props} class={twMerge('grow', clsx(className))} />
|
|
{#if typeof end === 'string'}
|
|
{end}
|
|
{:else}
|
|
{@render end?.()}
|
|
{/if}
|
|
</div> |