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

updated the interfaces of the input fields to reduce dry code

Browse Source
This commit is contained in:
Samuel Andert 2023-08-08 10:48:08 +02:00
parent b890d2918f
commit d3d181d625
7 changed files with 45 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -105,6 +105,16 @@
handleNext();
}
}
let childInput;
$: {
childInput = {
form,
errors,
validate,
field: fields[$state.context.currentField],
constraints
};
}
</script>
<div class="p-6">
@ -124,61 +134,19 @@
</label>
{/if}
{#if fields[$state.context.currentField].type === 'text'}
<TextInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
<TextInput {childInput} />
{:else if fields[$state.context.currentField].type === 'email'}
<TextInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
<TextInput {childInput} />
{:else if fields[$state.context.currentField].type === 'textarea'}
<TextAreaInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
<TextAreaInput {childInput} />
{:else if fields[$state.context.currentField].type === 'select'}
<SelectInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
<SelectInput {childInput} />
{:else if fields[$state.context.currentField].type === 'slider'}
<SliderInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
<SliderInput {childInput} />
{:else if fields[$state.context.currentField].type === 'toggle'}
<ToggleInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
<ToggleInput {childInput} />
{:else if fields[$state.context.currentField].type === 'number'}
<NumberInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
<NumberInput {childInput} />
{/if}
</div>
{#if $state.matches('submitting')}

12
src/lib/components/refactor/inputfields/NumberInput.svelte
View File

@ -1,17 +1,15 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { onMount } from 'svelte';
let inputElement;
export let childInput;
const { form, errors, field, constraints } = childInput;
onMount(() => {
inputElement.focus();
});
export let form;
export let errors;
export let validate;
export let field;
export let constraints;
</script>
<input

17
src/lib/components/refactor/inputfields/SelectInput.svelte
View File

@ -1,17 +1,20 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { onMount } from 'svelte';
export let form;
export let errors;
export let validate;
export let field;
export let constraints;
let inputElement;
const state = writable('');
export let childInput;
const { form, errors, field, constraints } = childInput;
onMount(() => {
inputElement.focus();
});
</script>
<select
name={field.name}
bind:this={inputElement}
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}

8
src/lib/components/refactor/inputfields/SliderInput.svelte
View File

@ -2,11 +2,9 @@
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;
export let childInput;
const { form, field, constraints } = childInput;
const state = writable(0);
</script>

9
src/lib/components/refactor/inputfields/TextAreaInput.svelte
View File

@ -1,14 +1,11 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { onMount } from 'svelte';
let inputElement;
export let form;
export let errors;
export let validate;
export let field;
export let constraints;
export let childInput;
const { form, errors, field, constraints } = childInput;
onMount(() => {
inputElement.focus();

11
src/lib/components/refactor/inputfields/TextInput.svelte
View File

@ -1,18 +1,15 @@
<script lang="ts">
import { createMachine, interpret } from 'xstate';
import { writable } from 'svelte/store';
import { onMount } from 'svelte';
let inputElement;
onMount(() => {
inputElement.focus();
});
export let form;
export let errors;
export let validate;
export let field;
export let constraints;
export let childInput;
const { form, errors, validate, field, constraints } = childInput;
</script>
<input

9
src/lib/components/refactor/inputfields/ToggleInput.svelte
View File

@ -1,12 +1,9 @@
<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;
export let childInput;
const { form, field, constraints } = childInput;
</script>
<SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />