Part1 of refactoring InputFields into their own components.
This commit is contained in:
Samuel Andert
parent
6d696eb4cc
commit
1f7fd8ab7a
@ -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}
|
||||
|
||||
35
src/lib/components/refactor/inputfields/SelectInput.svelte
Normal file
35
src/lib/components/refactor/inputfields/SelectInput.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export let form;
|
||||
export let errors;
|
||||
export let validate;
|
||||
export let field;
|
||||
export let constraints;
|
||||
|
||||
const state = writable('');
|
||||
</script>
|
||||
|
||||
<div class="mb-4">
|
||||
{#if $errors[field.name]}
|
||||
<span class="block mb-2 font-semibold text-red-500">{$errors[field.name]}</span>
|
||||
{:else}
|
||||
<label for={field.name} class="block mb-2 font-semibold text-white">
|
||||
{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
|
||||
</label>
|
||||
{/if}
|
||||
<select
|
||||
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.name]}
|
||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||
{...constraints[field.name]}
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
<option value="apple">Apple</option>
|
||||
<option value="banana">Banana</option>
|
||||
<option value="coconut">Coconut</option>
|
||||
<option value="strawberry">Strawberry</option>
|
||||
<option value="mango">Mango</option>
|
||||
</select>
|
||||
</div>
|
||||
31
src/lib/components/refactor/inputfields/SliderInput.svelte
Normal file
31
src/lib/components/refactor/inputfields/SliderInput.svelte
Normal file
@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import { RangeSlider } from '@skeletonlabs/skeleton';
|
||||
|
||||
export let form;
|
||||
export let errors;
|
||||
export let validate;
|
||||
export let field;
|
||||
export let constraints;
|
||||
|
||||
const state = writable(0);
|
||||
</script>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for={field.name} class="block mb-2 font-semibold text-white">
|
||||
{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
|
||||
</label>
|
||||
<RangeSlider
|
||||
name={field.name}
|
||||
bind:value={$form[field.name]}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
ticked
|
||||
{...constraints[field.name]}
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-xs">{$form[field.name]} / 100</div>
|
||||
</div>
|
||||
</RangeSlider>
|
||||
</div>
|
||||
61
src/lib/components/refactor/inputfields/TextInput.svelte
Normal file
61
src/lib/components/refactor/inputfields/TextInput.svelte
Normal file
@ -0,0 +1,61 @@
|
||||
<script lang="ts">
|
||||
import { createMachine, interpret } from 'xstate';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export let form;
|
||||
export let errors;
|
||||
export let validate;
|
||||
export let field;
|
||||
export let constraints;
|
||||
|
||||
const machine = createMachine({
|
||||
id: 'field',
|
||||
initial: 'notValid',
|
||||
states: {
|
||||
notValid: {
|
||||
on: {
|
||||
VALIDATE: 'valid'
|
||||
}
|
||||
},
|
||||
valid: {
|
||||
on: {
|
||||
INVALIDATE: 'notValid'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const service = interpret(machine);
|
||||
service.start();
|
||||
|
||||
const state = writable(service.state.value);
|
||||
|
||||
form.subscribe(async (value) => {
|
||||
const validationResult = await validate();
|
||||
if (validationResult.valid) {
|
||||
service.send('VALIDATE');
|
||||
} else {
|
||||
service.send('INVALIDATE');
|
||||
}
|
||||
state.set(service.state.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mb-4">
|
||||
{#if $errors[field.name]}
|
||||
<span class="block mb-2 font-semibold text-red-500">{$errors[field.name]}</span>
|
||||
{:else}
|
||||
<label for={field.name} class="block mb-2 font-semibold text-white"
|
||||
>{field.name.charAt(0).toUpperCase() + field.name.slice(1)}</label
|
||||
>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
name={field.name}
|
||||
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.name]}
|
||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||
{...constraints[field.name]}
|
||||
/>
|
||||
</div>
|
||||
19
src/lib/components/refactor/inputfields/ToggleInput.svelte
Normal file
19
src/lib/components/refactor/inputfields/ToggleInput.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import { SlideToggle } from '@skeletonlabs/skeleton';
|
||||
|
||||
export let form;
|
||||
export let errors;
|
||||
export let validate;
|
||||
export let field;
|
||||
export let constraints;
|
||||
|
||||
const state = writable(false);
|
||||
</script>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for={field.name} class="block mb-2 font-semibold text-white">
|
||||
{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
|
||||
</label>
|
||||
<SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />
|
||||
</div>
|
||||
@ -20,14 +20,13 @@
|
||||
id: 'validation',
|
||||
initial: 'notValidated',
|
||||
context: {
|
||||
initialFormData: {
|
||||
name: '',
|
||||
email: '',
|
||||
about: '',
|
||||
age: '',
|
||||
favoriteFood: ''
|
||||
},
|
||||
fields: ['name', 'email', 'about', 'age', 'favoriteFood'],
|
||||
fields: [
|
||||
{ name: 'name', type: 'text', placeholder: '' },
|
||||
{ name: 'email', type: 'email', placeholder: '' },
|
||||
{ name: 'about', type: 'textarea', placeholder: '' },
|
||||
{ name: 'age', type: 'number', placeholder: '' },
|
||||
{ name: 'favoriteFood', type: 'select', placeholder: '' }
|
||||
],
|
||||
validators: UserSchema
|
||||
},
|
||||
states: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user