57 lines
1.2 KiB
Svelte
57 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import Label from './Label.svelte';
|
|
import StyledRawInput from './StyledRawInput.svelte';
|
|
import { generateIdentifier } from './util';
|
|
import type { ClassValue } from 'svelte/elements';
|
|
import type { ComponentProps } from 'svelte';
|
|
|
|
interface Props extends ComponentProps<typeof StyledRawInput> {
|
|
id?: string;
|
|
label?: string;
|
|
value?: string;
|
|
invalidMessage?: string | null;
|
|
ref?: HTMLInputElement | null;
|
|
class?: ClassValue | null | undefined;
|
|
}
|
|
|
|
let {
|
|
id = generateIdentifier('text-input'),
|
|
label,
|
|
value = $bindable(''),
|
|
invalidMessage = 'Field is required',
|
|
ref = $bindable<HTMLInputElement | null>(null),
|
|
class: classValue,
|
|
...others
|
|
}: Props = $props();
|
|
|
|
let valid: boolean = $state(true);
|
|
|
|
export const focus = () => {
|
|
if (ref) ref.focus();
|
|
};
|
|
</script>
|
|
|
|
<div class={['w-full', classValue]}>
|
|
{#if label}
|
|
<Label for={id}>{label}</Label>
|
|
{/if}
|
|
|
|
<StyledRawInput
|
|
{id}
|
|
bind:value
|
|
bind:ref
|
|
onvalidate={(e) => {
|
|
valid = e.detail.valid;
|
|
}}
|
|
{...others}
|
|
/>
|
|
|
|
{#if others.validate && invalidMessage !== null}
|
|
<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
|
|
<Label for={id} error>
|
|
{invalidMessage}
|
|
</Label>
|
|
</div>
|
|
{/if}
|
|
</div>
|