63 lines
1.3 KiB
Svelte
63 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import Label from './Label.svelte';
|
|
import StyledRawInput from './StyledRawInput.svelte';
|
|
import { type ValidatorOptions } from '@svelte-toolkit/validate';
|
|
import { generateIdentifier } from './util.js';
|
|
import type { ClassValue } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
id?: string;
|
|
name?: string;
|
|
label?: string;
|
|
value?: string;
|
|
placeholder?: string;
|
|
type?: HTMLInputElement['type'];
|
|
validate?: ValidatorOptions;
|
|
invalidMessage?: string;
|
|
ref?: HTMLInputElement | null;
|
|
class?: ClassValue | null | undefined;
|
|
}
|
|
|
|
let {
|
|
id = generateIdentifier('text-input'),
|
|
name,
|
|
label,
|
|
value = $bindable(''),
|
|
placeholder,
|
|
type,
|
|
validate: validateOpts,
|
|
invalidMessage = 'Field is required',
|
|
ref = $bindable<HTMLInputElement | null>(null),
|
|
class: classValue
|
|
}: Props = $props();
|
|
|
|
let valid: boolean = $state(true);
|
|
</script>
|
|
|
|
<div class={classValue}>
|
|
{#if label}
|
|
<Label for={id}>{label}</Label>
|
|
{/if}
|
|
|
|
<StyledRawInput
|
|
{placeholder}
|
|
{id}
|
|
{name}
|
|
{type}
|
|
bind:value
|
|
bind:ref
|
|
validate={validateOpts}
|
|
onvalidate={(e) => {
|
|
valid = e.detail.valid;
|
|
}}
|
|
/>
|
|
|
|
{#if validateOpts}
|
|
<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
|
|
<Label for={id} error>
|
|
{invalidMessage}
|
|
</Label>
|
|
</div>
|
|
{/if}
|
|
</div>
|