samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor Form fixes

Browse Source
This commit is contained in:
Samuel Andert 2023-08-08 10:59:46 +02:00
parent d3d181d625
commit 3b0640875e
1 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/lib/components/refactor/ComposerForm.svelte
View File

@ -72,7 +72,13 @@
},
submitting: {
on: {
SUBMIT: 'submitted'
SUBMIT: 'submitted',
PREV: {
target: 'input',
actions: assign({
currentField: (context) => context.currentField - 1
})
}
}
},
submitted: {
@ -119,36 +125,38 @@
<div class="p-6">
<form on:submit|preventDefault={handleNext} on:keydown={handleKeyDown} class="w-full max-w-md">
<div class="mb-4">
{#if $errors[fields[$state.context.currentField].name]}
<span class="block mb-2 font-semibold text-red-500">
{$errors[fields[$state.context.currentField].name]}
</span>
{:else}
<label
for={fields[$state.context.currentField].name}
class="block mb-2 font-semibold text-white"
>
{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
fields[$state.context.currentField].name.slice(1)}
</label>
{/if}
{#if fields[$state.context.currentField].type === 'text'}
<TextInput {childInput} />
{:else if fields[$state.context.currentField].type === 'email'}
<TextInput {childInput} />
{:else if fields[$state.context.currentField].type === 'textarea'}
<TextAreaInput {childInput} />
{:else if fields[$state.context.currentField].type === 'select'}
<SelectInput {childInput} />
{:else if fields[$state.context.currentField].type === 'slider'}
<SliderInput {childInput} />
{:else if fields[$state.context.currentField].type === 'toggle'}
<ToggleInput {childInput} />
{:else if fields[$state.context.currentField].type === 'number'}
<NumberInput {childInput} />
{/if}
</div>
{#if !$state.matches('submitting')}
<div class="mb-4">
{#if $errors[fields[$state.context.currentField].name]}
<span class="block mb-2 font-semibold text-red-500">
{$errors[fields[$state.context.currentField].name]}
</span>
{:else}
<label
for={fields[$state.context.currentField].name}
class="block mb-2 font-semibold text-white"
>
{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
fields[$state.context.currentField].name.slice(1)}
</label>
{/if}
{#if fields[$state.context.currentField].type === 'text'}
<TextInput {childInput} />
{:else if fields[$state.context.currentField].type === 'email'}
<TextInput {childInput} />
{:else if fields[$state.context.currentField].type === 'textarea'}
<TextAreaInput {childInput} />
{:else if fields[$state.context.currentField].type === 'select'}
<SelectInput {childInput} />
{:else if fields[$state.context.currentField].type === 'slider'}
<SliderInput {childInput} />
{:else if fields[$state.context.currentField].type === 'toggle'}
<ToggleInput {childInput} />
{:else if fields[$state.context.currentField].type === 'number'}
<NumberInput {childInput} />
{/if}
</div>
{/if}
{#if $state.matches('submitting')}
<div class="mb-4">
<h2 class="text-lg font-semibold text-white">Summary</h2>