<Svelte:Options immutable /> <script lang="ts"> import { onDestroy } from

'svelte';
import ErrorReporter from './ErrorReporter.svelte';
import { getFormContext } from './form';

export let name = '';
export let type = 'text';
export let defaultValue: string | number | null = type === 'text' ? '' : null;
export let value = defaultValue || (type === 'text' ? '' : null);
export let error = '';
export let label = '';
export let placeholder = '';
export let noMargin = false;
export let multiline = false;

const { setValue, unsetValue, values, errors } = getFormContext();

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function handleInput({ target: t }: any) {
if (type === 'number') {
value = t.value === '' ? null : t.valueAsNumber;
} else {
value = t.value;
}
setValue(name, value);
}

function validOrDefault(value: unknown) {
if (
typeof value === 'string' ||
typeof value === 'number' ||
value === null
) {
return value;
}
return defaultValue;
}

if ($values[name] === undefined) {
setValue(name, value);
}

onDestroy(() => unsetValue(name));
</script>

<label for={name} class="block" class:margin={!noMargin}>
{#if label}
<span class="block">{label}</span>
{/if}
{#if multiline}
<textarea
class="input"
class:error={$errors[name] || error}
{name}
{type}
{placeholder}
value={validOrDefault($values[name]) || value}
on:input={handleInput}
on:input
on:change
on:blur
/>
{:else}
<input
class="input"
class:error={$errors[name] || error}
{name}
{type}
{placeholder}
value={validOrDefault($values[name]) || value}
on:input={handleInput}
on:input
on:change
on:blur
/>
{/if}
<ErrorReporter error={$errors[name] || error} />
</label>

отлично выглядит