added some more Stepper UI sugar

This commit is contained in:
Samuel Andert 2023-08-08 13:41:30 +02:00
parent 31ee2a507d
commit 844334bd27
3 changed files with 45 additions and 81 deletions

View File

@ -1,79 +0,0 @@
<script>
import { Stepper, Step } from '@skeletonlabs/skeleton';
let step = 1;
let name = '';
let age = '';
let flowData = {};
const handleNextStep = () => {
if (step === 1 && name.trim() === '') {
alert('Please enter a valid name.');
return;
}
if (step === 2 && age.trim() === '') {
alert('Please enter a valid age.');
return;
}
step += 1;
};
const handlePrevStep = () => {
step -= 1;
};
const handleConfirm = () => {
flowData = {
name,
age
};
alert('Flow data confirmed: ' + JSON.stringify(flowData));
};
const handleReset = () => {
step = 1;
name = '';
age = '';
flowData = {};
};
</script>
<Stepper start={step - 1}>
<Step>
<svelte:fragment slot="header">Step 1: Name</svelte:fragment>
<div>
<label for="name">Name:</label>
<input class="text-black" type="text" id="name" bind:value={name} />
</div>
<div slot="navigation">
<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
</div>
</Step>
<Step>
<svelte:fragment slot="header">Step 2: Age</svelte:fragment>
<div>
<label for="age">Age:</label>
<input class="text-black" type="number" id="age" bind:value={age} />
</div>
<div slot="navigation">
<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
</div>
</Step>
<Step>
<svelte:fragment slot="header">Step 3: Confirm Summary</svelte:fragment>
<div>
<h3>Confirm Summary:</h3>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
<div slot="navigation">
<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
<button class="btn variant-ghost-primary" on:click={handleConfirm}>Confirm</button>
</div>
</Step>
</Stepper>
<button on:click={handleReset}>Reset</button>

View File

@ -8,13 +8,17 @@
import SelectInput from './inputFields/SelectInput.svelte'; import SelectInput from './inputFields/SelectInput.svelte';
import TextAreaInput from './inputFields/TextAreaInput.svelte'; import TextAreaInput from './inputFields/TextAreaInput.svelte';
import NumberInput from './inputFields/NumberInput.svelte'; import NumberInput from './inputFields/NumberInput.svelte';
import { derived } from 'svelte/store'; import { derived, writable } from 'svelte/store';
import { createUser } from './userService'; import Stepper from './Stepper.svelte';
export let me; export let me;
const { fields, validators } = $me.context; const { fields, validators } = $me.context;
let stepperState = writable({ current: 0, total: fields.length });
$: stepperState.update((state) => ({ ...state, current: $state.context.currentField }));
let initialFormData = fields.reduce((acc, field) => { let initialFormData = fields.reduce((acc, field) => {
acc[field.name] = field.placeholder; acc[field.name] = field.placeholder;
return acc; return acc;
@ -169,6 +173,10 @@
</p> </p>
{/if} {/if}
</div> </div>
<div class="py-4">
<Stepper {stepperState} stepStateName={fields[$state.context.currentField].name} />
</div>
{#if fields[$state.context.currentField].type === 'text'} {#if fields[$state.context.currentField].type === 'text'}
<TextInput {childInput} /> <TextInput {childInput} />
{:else if fields[$state.context.currentField].type === 'email'} {:else if fields[$state.context.currentField].type === 'email'}

View File

@ -0,0 +1,35 @@
<script>
import { getContext } from 'svelte';
export let stepperState;
export let stepStateName = '';
const cHeader = 'flex items-center border-t mt-[15px]';
const cHeaderStep = '-mt-[15px] transition-all duration-300';
const active = 'variant-filled';
const badge = 'variant-filled-surface';
// Context
const stepTerm = getContext('stepTerm') || 'Step';
// State
$: isActive = (step) => step === $stepperState.current;
// Reactive
$: classesHeader = `${cHeader} `;
$: classesHeaderStep = `${cHeaderStep}`;
$: classesBadge = (step) => (isActive(step) ? active : badge);
</script>
<!-- Header -->
{#if $stepperState.total}
<header class="stepper-header {classesHeader}" transition:fade|local={{ duration: 100 }}>
{#each Array.from(Array($stepperState.total).keys()) as step}
<div class="stepper-header-step {classesHeaderStep}" class:flex-1={isActive(step)}>
<span class="badge {classesBadge(step)}">
{isActive(step) ? `${stepStateName}` : ` ${step + 1}`}
</span>
</div>
{/each}
</header>
{/if}