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