updated the interfaces of the input fields to reduce dry code
This commit is contained in:
parent
b890d2918f
commit
d3d181d625
@ -105,6 +105,16 @@
|
|||||||
handleNext();
|
handleNext();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
let childInput;
|
||||||
|
$: {
|
||||||
|
childInput = {
|
||||||
|
form,
|
||||||
|
errors,
|
||||||
|
validate,
|
||||||
|
field: fields[$state.context.currentField],
|
||||||
|
constraints
|
||||||
|
};
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
@ -124,61 +134,19 @@
|
|||||||
</label>
|
</label>
|
||||||
{/if}
|
{/if}
|
||||||
{#if fields[$state.context.currentField].type === 'text'}
|
{#if fields[$state.context.currentField].type === 'text'}
|
||||||
<TextInput
|
<TextInput {childInput} />
|
||||||
{form}
|
|
||||||
{errors}
|
|
||||||
{validate}
|
|
||||||
field={fields[$state.context.currentField]}
|
|
||||||
{constraints}
|
|
||||||
/>
|
|
||||||
{:else if fields[$state.context.currentField].type === 'email'}
|
{:else if fields[$state.context.currentField].type === 'email'}
|
||||||
<TextInput
|
<TextInput {childInput} />
|
||||||
{form}
|
|
||||||
{errors}
|
|
||||||
{validate}
|
|
||||||
field={fields[$state.context.currentField]}
|
|
||||||
{constraints}
|
|
||||||
/>
|
|
||||||
{:else if fields[$state.context.currentField].type === 'textarea'}
|
{:else if fields[$state.context.currentField].type === 'textarea'}
|
||||||
<TextAreaInput
|
<TextAreaInput {childInput} />
|
||||||
{form}
|
|
||||||
{errors}
|
|
||||||
{validate}
|
|
||||||
field={fields[$state.context.currentField]}
|
|
||||||
{constraints}
|
|
||||||
/>
|
|
||||||
{:else if fields[$state.context.currentField].type === 'select'}
|
{:else if fields[$state.context.currentField].type === 'select'}
|
||||||
<SelectInput
|
<SelectInput {childInput} />
|
||||||
{form}
|
|
||||||
{errors}
|
|
||||||
{validate}
|
|
||||||
field={fields[$state.context.currentField]}
|
|
||||||
{constraints}
|
|
||||||
/>
|
|
||||||
{:else if fields[$state.context.currentField].type === 'slider'}
|
{:else if fields[$state.context.currentField].type === 'slider'}
|
||||||
<SliderInput
|
<SliderInput {childInput} />
|
||||||
{form}
|
|
||||||
{errors}
|
|
||||||
{validate}
|
|
||||||
field={fields[$state.context.currentField]}
|
|
||||||
{constraints}
|
|
||||||
/>
|
|
||||||
{:else if fields[$state.context.currentField].type === 'toggle'}
|
{:else if fields[$state.context.currentField].type === 'toggle'}
|
||||||
<ToggleInput
|
<ToggleInput {childInput} />
|
||||||
{form}
|
|
||||||
{errors}
|
|
||||||
{validate}
|
|
||||||
field={fields[$state.context.currentField]}
|
|
||||||
{constraints}
|
|
||||||
/>
|
|
||||||
{:else if fields[$state.context.currentField].type === 'number'}
|
{:else if fields[$state.context.currentField].type === 'number'}
|
||||||
<NumberInput
|
<NumberInput {childInput} />
|
||||||
{form}
|
|
||||||
{errors}
|
|
||||||
{validate}
|
|
||||||
field={fields[$state.context.currentField]}
|
|
||||||
{constraints}
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if $state.matches('submitting')}
|
{#if $state.matches('submitting')}
|
||||||
|
@ -1,17 +1,15 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { writable } from 'svelte/store';
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let inputElement;
|
let inputElement;
|
||||||
|
|
||||||
|
export let childInput;
|
||||||
|
|
||||||
|
const { form, errors, field, constraints } = childInput;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
inputElement.focus();
|
inputElement.focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
export let form;
|
|
||||||
export let errors;
|
|
||||||
export let validate;
|
|
||||||
export let field;
|
|
||||||
export let constraints;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
|
@ -1,17 +1,20 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { writable } from 'svelte/store';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let form;
|
let inputElement;
|
||||||
export let errors;
|
|
||||||
export let validate;
|
|
||||||
export let field;
|
|
||||||
export let constraints;
|
|
||||||
|
|
||||||
const state = writable('');
|
export let childInput;
|
||||||
|
|
||||||
|
const { form, errors, field, constraints } = childInput;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
inputElement.focus();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<select
|
<select
|
||||||
name={field.name}
|
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"
|
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]}
|
bind:value={$form[field.name]}
|
||||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||||
|
@ -2,11 +2,9 @@
|
|||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
import { RangeSlider } from '@skeletonlabs/skeleton';
|
import { RangeSlider } from '@skeletonlabs/skeleton';
|
||||||
|
|
||||||
export let form;
|
export let childInput;
|
||||||
export let errors;
|
|
||||||
export let validate;
|
const { form, field, constraints } = childInput;
|
||||||
export let field;
|
|
||||||
export let constraints;
|
|
||||||
|
|
||||||
const state = writable(0);
|
const state = writable(0);
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,14 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { writable } from 'svelte/store';
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let inputElement;
|
let inputElement;
|
||||||
|
|
||||||
export let form;
|
export let childInput;
|
||||||
export let errors;
|
|
||||||
export let validate;
|
const { form, errors, field, constraints } = childInput;
|
||||||
export let field;
|
|
||||||
export let constraints;
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
inputElement.focus();
|
inputElement.focus();
|
||||||
|
@ -1,18 +1,15 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createMachine, interpret } from 'xstate';
|
|
||||||
import { writable } from 'svelte/store';
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let inputElement;
|
let inputElement;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
inputElement.focus();
|
inputElement.focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
export let form;
|
export let childInput;
|
||||||
export let errors;
|
|
||||||
export let validate;
|
const { form, errors, validate, field, constraints } = childInput;
|
||||||
export let field;
|
|
||||||
export let constraints;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
|
@ -1,12 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { writable } from 'svelte/store';
|
|
||||||
import { SlideToggle } from '@skeletonlabs/skeleton';
|
import { SlideToggle } from '@skeletonlabs/skeleton';
|
||||||
|
|
||||||
export let form;
|
export let childInput;
|
||||||
export let errors;
|
|
||||||
export let validate;
|
const { form, field, constraints } = childInput;
|
||||||
export let field;
|
|
||||||
export let constraints;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />
|
<SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />
|
||||||
|
Loading…
Reference in New Issue
Block a user