76 lines
1.5 KiB
Svelte
76 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
id?: string;
|
|
type?: 'color' | 'date' | 'datetime-local' | 'number' | 'tel' | 'text' | 'email';
|
|
value?: string | null;
|
|
label?: string;
|
|
required?: boolean;
|
|
validation?: {
|
|
min?: string;
|
|
max?: string;
|
|
pattern?: string;
|
|
hint: string;
|
|
};
|
|
hidden?: boolean;
|
|
readonly?: boolean;
|
|
disabled?: boolean;
|
|
|
|
size?: 'sm';
|
|
dynamicWidth?: boolean;
|
|
|
|
notice?: Snippet;
|
|
}
|
|
|
|
let {
|
|
id,
|
|
type,
|
|
value = $bindable(),
|
|
label,
|
|
required,
|
|
validation,
|
|
hidden,
|
|
readonly,
|
|
disabled,
|
|
size,
|
|
dynamicWidth,
|
|
notice
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<fieldset class="fieldset" {hidden}>
|
|
<legend class="fieldset-legend">
|
|
<span>
|
|
{label}
|
|
{#if required}
|
|
<span class="text-red-700">*</span>
|
|
{/if}
|
|
</span>
|
|
</legend>
|
|
<input
|
|
{id}
|
|
name={id}
|
|
bind:value
|
|
class="input"
|
|
class:input-sm={size === 'sm'}
|
|
class:validator={required || validation}
|
|
class:w-full={dynamicWidth}
|
|
type={type || 'text'}
|
|
min={validation?.min}
|
|
max={validation?.max}
|
|
required={required ? true : null}
|
|
pattern={validation?.pattern}
|
|
readonly={readonly ? true : null}
|
|
disabled={disabled ? true : null}
|
|
/>
|
|
<p class="fieldset-label">
|
|
{#if notice}
|
|
{@render notice()}
|
|
{/if}
|
|
</p>
|
|
{#if validation}
|
|
<p class="validator-hint mt-0">{validation.hint}</p>
|
|
{/if}
|
|
</fieldset>
|