Successfully abstracted the InputTypes to dynamically composer Forms.
This commit is contained in:
Samuel Andert
parent
1f7fd8ab7a
commit
720282dbfd
@ -2,8 +2,12 @@
|
||||
import { superForm } from 'sveltekit-superforms/client';
|
||||
import { afterUpdate } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
|
||||
import TextInput from './inputfields/TextInput.svelte';
|
||||
import TextInput from './inputFields/TextInput.svelte';
|
||||
import ToggleInput from './inputFields/ToggleInput.svelte';
|
||||
import SliderInput from './inputFields/SliderInput.svelte';
|
||||
import SelectInput from './inputFields/SelectInput.svelte';
|
||||
import TextAreaInput from './inputFields/TextAreaInput.svelte';
|
||||
import NumberInput from './inputFields/NumberInput.svelte';
|
||||
|
||||
export let me;
|
||||
|
||||
@ -52,7 +56,6 @@
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
// Reset the form and remove the message
|
||||
form.set({});
|
||||
successMessage.set(null);
|
||||
}
|
||||
@ -69,18 +72,15 @@
|
||||
<div class="p-6">
|
||||
My ID is: {$me.id} <br />
|
||||
My state is: {$me.state}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full h-full p-6">
|
||||
{#if $successMessage}
|
||||
<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
|
||||
<div class="alert-message">
|
||||
<h3 class="h3">Success</h3>
|
||||
<p>{$successMessage}</p>
|
||||
</div>
|
||||
<div class="alert-actions">
|
||||
{#if $me.state === 'validated'}
|
||||
<aside id="message-container" class="p-4 mt-4 bg-green-500 rounded-md">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-white">Success!</h2>
|
||||
<p class="mt-1 text-white">{$me.message}</p>
|
||||
</div>
|
||||
<button
|
||||
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="p-1 ml-2 text-white bg-red-500 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||
on:click={handleReset}
|
||||
>
|
||||
Reset
|
||||
@ -98,46 +98,20 @@
|
||||
>{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
|
||||
</label>
|
||||
{/if}
|
||||
{#if field.type === 'text' || field.type === 'email' || field.type === 'number'}
|
||||
{#if field.type === 'text'}
|
||||
<TextInput {form} {errors} {validate} {field} {constraints} />
|
||||
{:else if field.type === 'email'}
|
||||
<TextInput {form} {errors} {validate} {field} {constraints} />
|
||||
{:else if field.type === 'textarea'}
|
||||
<textarea
|
||||
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]}
|
||||
/>
|
||||
<TextAreaInput {form} {errors} {validate} {field} {constraints} />
|
||||
{:else if field.type === 'select'}
|
||||
<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>
|
||||
<SelectInput {form} {errors} {validate} {field} {constraints} />
|
||||
{: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.name]} / 100</div>
|
||||
</div>
|
||||
</RangeSlider>
|
||||
<SliderInput {form} {errors} {validate} {field} {constraints} />
|
||||
{:else if field.type === 'toggle'}
|
||||
<SlideToggle name={field.name} bind:checked={$form[field.name]} />
|
||||
<ToggleInput {form} {errors} {validate} {field} {constraints} />
|
||||
{:else if field.type === 'number'}
|
||||
<NumberInput {form} {errors} {validate} {field} {constraints} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
20
src/lib/components/refactor/inputfields/NumberInput.svelte
Normal file
20
src/lib/components/refactor/inputfields/NumberInput.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<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(0);
|
||||
</script>
|
||||
|
||||
<input
|
||||
name={field.name}
|
||||
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.name]}
|
||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||
{...constraints[field.name]}
|
||||
/>
|
||||
@ -10,26 +10,17 @@
|
||||
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>
|
||||
<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>
|
||||
|
||||
@ -11,21 +11,16 @@
|
||||
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>
|
||||
<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>
|
||||
|
||||
19
src/lib/components/refactor/inputfields/TextAreaInput.svelte
Normal file
19
src/lib/components/refactor/inputfields/TextAreaInput.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<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>
|
||||
|
||||
<textarea
|
||||
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]}
|
||||
/>
|
||||
@ -7,55 +7,13 @@
|
||||
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>
|
||||
<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]}
|
||||
/>
|
||||
|
||||
@ -7,13 +7,6 @@
|
||||
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>
|
||||
<SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user