51 lines
1.1 KiB
Svelte
51 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
|
import * as Field from '$lib/components/ui/field/index.js';
|
|
import * as InputGroup from '$lib/components/ui/input-group/index.js';
|
|
|
|
let {
|
|
form,
|
|
data,
|
|
name,
|
|
label,
|
|
id,
|
|
description
|
|
}: {
|
|
form: any;
|
|
data: any;
|
|
name: string;
|
|
label: string;
|
|
id: string;
|
|
description?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<FormField {form} {name}>
|
|
<Field.Field>
|
|
<Control {id}>
|
|
{#snippet children({ props })}
|
|
<Field.Label>{label}</Field.Label>
|
|
<InputGroup.Root>
|
|
<InputGroup.Addon>
|
|
<InputGroup.Text>£</InputGroup.Text>
|
|
</InputGroup.Addon>
|
|
<InputGroup.Input
|
|
{...props}
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
inputmode="decimal"
|
|
placeholder="0.00"
|
|
bind:value={$data[name]}
|
|
/>
|
|
</InputGroup.Root>
|
|
{/snippet}
|
|
</Control>
|
|
{#if description}
|
|
<Field.Description>{description}</Field.Description>
|
|
{/if}
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|