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

Part1 of refactoring InputFields into their own components.

Browse Source
This commit is contained in:
Samuel Andert
2023-08-08 08:30:44 +02:00
parent 6d696eb4cc
commit 1f7fd8ab7a
6 changed files with 189 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,16 @@
import { afterUpdate } from 'svelte';
import { writable } from 'svelte/store';
import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
import TextInput from './inputfields/TextInput.svelte';
export let me;
const { initialFormData, fields, validators } = $me.context;
const { fields, validators } = $me.context;
const initialFormData = fields.reduce((acc, field) => {
acc[field.name] = field.placeholder;
return acc;
}, {});
const { form, errors, validate, constraints } = superForm(initialFormData, {
validators: validators,
@ -83,31 +89,32 @@
</aside>
{:else}
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
{#each fields as field}
{#each fields as field (field.name)}
<div class="mb-4">
{#if $errors[field]}
<span class="block mb-2 font-semibold text-red-500">{$errors[field]}</span>
{#if $errors[field.name]}
<span class="block mb-2 font-semibold text-red-500">{$errors[field.name]}</span>
{:else}
<label for={field} class="block mb-2 font-semibold text-white"
>{field.charAt(0).toUpperCase() + field.slice(1)}
<label for={field.name} class="block mb-2 font-semibold text-white"
>{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
</label>
{/if}
{#if field === 'about'}
{#if field.type === 'text' || field.type === 'email' || field.type === 'number'}
<TextInput {form} {errors} {validate} {field} {constraints} />
{:else if field.type === 'textarea'}
<textarea
name={field}
name={field.name}
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={$form[field]}
aria-invalid={$errors[field] ? 'true' : undefined}
{...constraints[field]}
bind:value={$form[field.name]}
aria-invalid={$errors[field.name] ? 'true' : undefined}
{...constraints[field.name]}
/>
{:else if field === 'favoriteFood'}
{:else if field.type === 'select'}
<select
name={field}
name={field.name}
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={$form[field]}
aria-invalid={$errors[field] ? 'true' : undefined}
{...constraints[field]}
bind:value={$form[field.name]}
aria-invalid={$errors[field.name] ? 'true' : undefined}
{...constraints[field.name]}
>
<option value="">Select...</option>
<option value="apple">Apple</option>
@ -116,32 +123,21 @@
<option value="strawberry">Strawberry</option>
<option value="mango">Mango</option>
</select>
{:else if field === 'age'}
<input
name={field}
type="number"
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={$form[field]}
aria-invalid={$errors[field] ? 'true' : undefined}
{...constraints[field]}
/>
{:else if field === 'slider'}
<RangeSlider name={field} bind:value={$form[field]} min={0} max={100} step={1} ticked>
{:else if field.type === 'slider'}
<RangeSlider
name={field.name}
bind:value={$form[field.name]}
min={0}
max={100}
step={1}
ticked
>
<div class="flex items-center justify-between">
<div class="text-xs">{$form[field]} / 100</div>
<div class="text-xs">{$form[field.name]} / 100</div>
</div>
</RangeSlider>
{:else if field === 'toggle'}
<SlideToggle name={field} bind:checked={$form[field]} />
{:else}
<input
name={field}
type="text"
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={$form[field]}
aria-invalid={$errors[field] ? 'true' : undefined}
{...constraints[field]}
/>
{:else if field.type === 'toggle'}
<SlideToggle name={field.name} bind:checked={$form[field.name]} />
{/if}
</div>
{/each}