major design update of input types
This commit is contained in:
Samuel Andert
parent
1240549cd4
commit
72d597efc8
@ -1,293 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { createMachine, assign } from 'xstate';
|
|
||||||
import { useMachine } from '@xstate/svelte';
|
|
||||||
import { superForm } from 'sveltekit-superforms/client';
|
|
||||||
import { TreeSchema } from '$lib/types/TreeSchema';
|
|
||||||
import { writable, get } from 'svelte/store';
|
|
||||||
import { createUser } from './userService';
|
|
||||||
import { derived } from 'svelte/store';
|
|
||||||
import Composer from '$lib/core/refactor/Composer.svelte';
|
|
||||||
|
|
||||||
const initialFormData = { name: '', age: '' };
|
|
||||||
|
|
||||||
const { form, errors, validate, constraints, capture, restore } = superForm(initialFormData, {
|
|
||||||
validators: TreeSchema,
|
|
||||||
warnings: {
|
|
||||||
noValidationAndConstraints: false
|
|
||||||
},
|
|
||||||
validationMethod: 'oninput',
|
|
||||||
clearOnSubmit: 'errors-and-message'
|
|
||||||
});
|
|
||||||
|
|
||||||
export const snapshot = { capture, restore };
|
|
||||||
|
|
||||||
const isFormValid = writable(false); // Store to keep track of form validation status
|
|
||||||
|
|
||||||
async function handleSubmit() {
|
|
||||||
const validationResult = await validate();
|
|
||||||
if (!validationResult.valid) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log(form);
|
|
||||||
isFormValid.set(true); // Set the form validation status to true after successful validation
|
|
||||||
}
|
|
||||||
|
|
||||||
const stateMachine = createMachine(
|
|
||||||
{
|
|
||||||
id: 'steps',
|
|
||||||
initial: 'start',
|
|
||||||
context: {
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
constraints: {}
|
|
||||||
},
|
|
||||||
states: {
|
|
||||||
start: {
|
|
||||||
meta: {
|
|
||||||
title: 'Welcome!',
|
|
||||||
description: 'Start your registration process by clicking next.',
|
|
||||||
buttonLabel: 'Start'
|
|
||||||
},
|
|
||||||
on: { NEXT: 'name' }
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
meta: {
|
|
||||||
title: 'Name Input',
|
|
||||||
description: 'Please enter your name.',
|
|
||||||
fieldLabel: 'Name',
|
|
||||||
buttonLabel: 'Next'
|
|
||||||
},
|
|
||||||
entry: assign({
|
|
||||||
constraints: (context) => constraints.name || {}
|
|
||||||
}),
|
|
||||||
on: {
|
|
||||||
NEXT: {
|
|
||||||
target: 'email',
|
|
||||||
actions: ['setName']
|
|
||||||
},
|
|
||||||
BACK: 'start'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
email: {
|
|
||||||
meta: {
|
|
||||||
title: 'Email Input',
|
|
||||||
description: 'Please enter your email address.',
|
|
||||||
fieldLabel: 'Email',
|
|
||||||
buttonLabel: 'Next'
|
|
||||||
},
|
|
||||||
entry: assign({
|
|
||||||
constraints: (context) => constraints.email || {}
|
|
||||||
}),
|
|
||||||
on: {
|
|
||||||
NEXT: {
|
|
||||||
target: 'litStatus',
|
|
||||||
actions: ['setEmail']
|
|
||||||
},
|
|
||||||
BACK: 'name'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
litStatus: {
|
|
||||||
meta: {
|
|
||||||
title: 'LitStatus',
|
|
||||||
buttonLabel: 'next',
|
|
||||||
composer: {
|
|
||||||
id: 'litStatus',
|
|
||||||
component: 'LitStatus'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
NEXT: 'summary',
|
|
||||||
BACK: 'email'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
summary: {
|
|
||||||
meta: {
|
|
||||||
title: 'Summary',
|
|
||||||
description: 'Review your details before submission.',
|
|
||||||
buttonLabel: 'test'
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
SUBMIT: 'submitting',
|
|
||||||
BACK: 'litStatus'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
submitting: {
|
|
||||||
meta: {
|
|
||||||
title: 'Submitting...'
|
|
||||||
},
|
|
||||||
invoke: {
|
|
||||||
src: 'createUserService',
|
|
||||||
onDone: 'success',
|
|
||||||
onError: {
|
|
||||||
target: 'failure',
|
|
||||||
actions: assign({
|
|
||||||
error: (context, event) => event.data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
meta: {
|
|
||||||
title: 'Success',
|
|
||||||
buttonLabel: 'Start again'
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
RESTART: 'start'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
failure: {
|
|
||||||
meta: {
|
|
||||||
title: 'Submission Failed',
|
|
||||||
buttonLabel: 'Restart'
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
RESTART: 'start'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actions: {
|
|
||||||
setName: assign({
|
|
||||||
name: (context, event) => $form.name
|
|
||||||
}),
|
|
||||||
setEmail: assign({
|
|
||||||
email: (context, event) => $form.email
|
|
||||||
})
|
|
||||||
},
|
|
||||||
services: {
|
|
||||||
createUserService: (context) => {
|
|
||||||
console.log('Attempting to create user...');
|
|
||||||
return createUser(context.name, context.email);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const { state, send } = useMachine(stateMachine);
|
|
||||||
|
|
||||||
$: {
|
|
||||||
isFormValid.set(Object.keys(get(errors)).length === 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
const possibleActions = derived(state, ($state) =>
|
|
||||||
Object.keys(stateMachine.states[$state.value]?.on || {})
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<main class="flex items-center justify-center w-full h-full">
|
|
||||||
<div class="w-full max-w-lg">
|
|
||||||
<h1 class="text-2xl">
|
|
||||||
{$state.value in stateMachine.states && stateMachine.states[$state.value].meta
|
|
||||||
? stateMachine.states[$state.value].meta.title
|
|
||||||
: 'Unknown state'}
|
|
||||||
</h1>
|
|
||||||
<p>
|
|
||||||
{$state.value in stateMachine.states
|
|
||||||
? stateMachine.states[$state.value].meta.description
|
|
||||||
: ''}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{#if stateMachine.states[$state.value].meta.composite}
|
|
||||||
<Composer composer={stateMachine.states[$state.value].meta.composer} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if $state.value === 'start'}Welcome{:else if $state.value === 'name'}
|
|
||||||
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-lg">
|
|
||||||
<div class="mb-4">
|
|
||||||
{#if $errors.name}
|
|
||||||
<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
|
|
||||||
{:else}
|
|
||||||
<label for="name" class="block mb-2 font-semibold text-white"
|
|
||||||
>{$state.value in stateMachine.states
|
|
||||||
? stateMachine.states[$state.value].meta.fieldLabel
|
|
||||||
: ''}</label
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<input
|
|
||||||
name={$state.value}
|
|
||||||
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.name}
|
|
||||||
aria-invalid={$errors.name ? 'true' : undefined}
|
|
||||||
{...$state.context.constraints}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{:else if $state.value === 'email'}
|
|
||||||
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-lg">
|
|
||||||
<div class="mb-4">
|
|
||||||
{#if $errors.email}
|
|
||||||
<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
|
|
||||||
{:else}
|
|
||||||
<label for="email" class="block mb-2 font-semibold text-white"
|
|
||||||
>{$state.value in stateMachine.states
|
|
||||||
? stateMachine.states[$state.value].meta.fieldLabel
|
|
||||||
: ''}</label
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<input
|
|
||||||
name={$state.value}
|
|
||||||
type="email"
|
|
||||||
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.email}
|
|
||||||
aria-invalid={$errors.email ? 'true' : undefined}
|
|
||||||
{...$state.context.constraints}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{:else if $state.value === 'summary'}
|
|
||||||
<p>Name: {$form.name}</p>
|
|
||||||
<p>Email: {$form.email}</p>
|
|
||||||
{:else if $state.value === 'submitting'}
|
|
||||||
Add spinner here
|
|
||||||
{:else if $state.value === 'success'}
|
|
||||||
<p>Thank you for your submission!</p>
|
|
||||||
{:else if $state.value === 'failure'}
|
|
||||||
<p class="text-red-500">
|
|
||||||
Error: {$state.context.error?.message || 'An unknown error occurred.'}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
{#if possibleActions}
|
|
||||||
<div class="flex justify-between">
|
|
||||||
{#each $possibleActions as action (action)}
|
|
||||||
{#if action === 'BACK'}
|
|
||||||
<button
|
|
||||||
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
|
|
||||||
on:click={() => send(action)}
|
|
||||||
>
|
|
||||||
{action}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#each $possibleActions as action (action)}
|
|
||||||
{#if action !== 'NEXT' && action !== 'BACK'}
|
|
||||||
<button
|
|
||||||
class="px-4 py-2 mx-auto mt-4 text-white bg-blue-500 rounded"
|
|
||||||
on:click={() => send(action)}
|
|
||||||
>
|
|
||||||
{action}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#each $possibleActions as action (action)}
|
|
||||||
{#if action === 'NEXT'}
|
|
||||||
<button
|
|
||||||
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
|
|
||||||
on:click={() => send(action)}
|
|
||||||
disabled={$errors[$state.value] || $state.context.constraints[$state.value]}
|
|
||||||
>
|
|
||||||
{$state.value in stateMachine.states
|
|
||||||
? stateMachine.states[$state.value].meta.buttonLabel
|
|
||||||
: ''}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
// src/lib/components/Recipies/machines/authMachine.ts
|
|
||||||
import { createMachine } from 'xstate';
|
|
||||||
|
|
||||||
export const recipeMachine = createMachine(
|
|
||||||
{
|
|
||||||
id: 'auth',
|
|
||||||
initial: 'notAuthenticated',
|
|
||||||
states: {
|
|
||||||
notAuthenticated: {
|
|
||||||
meta: {
|
|
||||||
title: 'Welcome!',
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
type: 'START',
|
|
||||||
label: 'Login',
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
START: {
|
|
||||||
target: 'signIn',
|
|
||||||
actions: 'startSignIn'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
signIn: {
|
|
||||||
meta: {
|
|
||||||
title: 'Sign In',
|
|
||||||
composite: {
|
|
||||||
id: 'signInForm',
|
|
||||||
component: 'oForm'
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
type: 'BACK',
|
|
||||||
label: 'Back',
|
|
||||||
disabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'NEXT',
|
|
||||||
label: 'Authenticate',
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
BACK: 'notAuthenticated',
|
|
||||||
NEXT: {
|
|
||||||
target: 'authenticated',
|
|
||||||
actions: 'authenticate'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
authenticated: {
|
|
||||||
meta: {
|
|
||||||
title: 'Authenticated',
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
type: 'LOGOUT',
|
|
||||||
label: 'Logout',
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
LOGOUT: {
|
|
||||||
target: 'notAuthenticated',
|
|
||||||
actions: 'logout'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actions: {
|
|
||||||
startSignIn: (context, event) => {
|
|
||||||
console.log('Starting sign in process...');
|
|
||||||
},
|
|
||||||
authenticate: (context, event) => {
|
|
||||||
console.log('Authenticating...');
|
|
||||||
},
|
|
||||||
logout: (context, event) => {
|
|
||||||
console.log('Logging out...');
|
|
||||||
},
|
|
||||||
setValidated: (context, event) => {
|
|
||||||
console.log('Form is validated');
|
|
||||||
// Add your logic here to update the visual representation
|
|
||||||
},
|
|
||||||
setNotValidated: (context, event) => {
|
|
||||||
console.log('Form is not validated');
|
|
||||||
// Add your logic here to update the visual representation
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { Machine } from 'xstate';
|
|
||||||
|
|
||||||
export const toggleMachine = Machine({
|
|
||||||
id: 'toggleMachine',
|
|
||||||
initial: 'NOTREADY',
|
|
||||||
states: {
|
|
||||||
NOTREADY: {
|
|
||||||
on: { TOGGLE: 'READY' }
|
|
||||||
},
|
|
||||||
READY: {
|
|
||||||
on: { TOGGLE: 'NOTREADY' }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -8,17 +8,19 @@
|
|||||||
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 { createUser } from './userService';
|
||||||
|
|
||||||
export let me;
|
export let me;
|
||||||
|
|
||||||
const { fields, validators } = $me.context;
|
const { fields, validators } = $me.context;
|
||||||
|
|
||||||
const 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;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
const { form, errors, validate, constraints } = superForm(initialFormData, {
|
let { form, errors, validate, constraints } = superForm(initialFormData, {
|
||||||
validators: validators,
|
validators: validators,
|
||||||
warnings: {
|
warnings: {
|
||||||
noValidationAndConstraints: false
|
noValidationAndConstraints: false
|
||||||
@ -61,6 +63,7 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
PREV: {
|
PREV: {
|
||||||
target: 'input',
|
target: 'input',
|
||||||
actions: assign({
|
actions: assign({
|
||||||
@ -82,13 +85,33 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
submitted: {
|
submitted: {
|
||||||
// Add your submission logic here
|
on: {
|
||||||
|
RESTART: {
|
||||||
|
target: 'input',
|
||||||
|
actions: assign({
|
||||||
|
currentField: 0,
|
||||||
|
formData: () => ({ ...initialFormData }) // Create a new object
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const { state, send } = useMachine(formMachine);
|
const { state, send } = useMachine(formMachine);
|
||||||
|
|
||||||
|
$: if ($state.matches('submitted')) {
|
||||||
|
// Reset the superForm instance when the form is submitted
|
||||||
|
({ form, errors, validate, constraints } = superForm(initialFormData, {
|
||||||
|
validators: validators,
|
||||||
|
warnings: {
|
||||||
|
noValidationAndConstraints: false
|
||||||
|
},
|
||||||
|
validationMethod: 'oninput',
|
||||||
|
clearOnSubmit: 'errors-and-message'
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
async function handleNext() {
|
async function handleNext() {
|
||||||
const currentFieldName = fields[$state.context.currentField].name;
|
const currentFieldName = fields[$state.context.currentField].name;
|
||||||
const validationResult = await validate(currentFieldName);
|
const validationResult = await validate(currentFieldName);
|
||||||
@ -98,11 +121,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const fieldValue = $form[currentFieldName];
|
const fieldValue = $form[currentFieldName];
|
||||||
console.log(`Current input value: ${fieldValue}`);
|
if ($state.matches('submitting')) {
|
||||||
|
send('SUBMIT');
|
||||||
|
} else {
|
||||||
send('NEXT', { fieldValue });
|
send('NEXT', { fieldValue });
|
||||||
|
}
|
||||||
// Log the context formData
|
|
||||||
console.log(`Context formData: ${JSON.stringify($state.context.formData)}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleKeyDown(event) {
|
function handleKeyDown(event) {
|
||||||
@ -111,6 +134,7 @@
|
|||||||
handleNext();
|
handleNext();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let childInput;
|
let childInput;
|
||||||
$: {
|
$: {
|
||||||
childInput = {
|
childInput = {
|
||||||
@ -121,25 +145,37 @@
|
|||||||
constraints
|
constraints
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const possibleActions = derived(state, ($state) =>
|
||||||
|
Object.keys(formMachine.states[$state.value]?.on || {})
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-12">
|
||||||
<form on:submit|preventDefault={handleNext} on:keydown={handleKeyDown} class="w-full">
|
<form on:submit|preventDefault={handleNext} on:keydown={handleKeyDown} class="w-full">
|
||||||
{#if !$state.matches('submitting')}
|
{#if $state.matches('input')}
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
|
<div class="mb-6">
|
||||||
|
<h2 class="mb-2 text-5xl font-semibold text-center text-white">
|
||||||
|
{fields[$state.context.currentField].title}
|
||||||
|
</h2>
|
||||||
{#if $errors[fields[$state.context.currentField].name]}
|
{#if $errors[fields[$state.context.currentField].name]}
|
||||||
<span class="block mb-2 font-semibold text-red-500">
|
<p class="text-2xl text-center text-yellow-500">
|
||||||
{$errors[fields[$state.context.currentField].name]}
|
{$errors[fields[$state.context.currentField].name]}
|
||||||
</span>
|
</p>
|
||||||
{:else}
|
{:else}
|
||||||
<label
|
<p class="text-2xl text-center text-white">
|
||||||
|
{fields[$state.context.currentField].description}
|
||||||
|
</p>
|
||||||
|
<!-- <label
|
||||||
for={fields[$state.context.currentField].name}
|
for={fields[$state.context.currentField].name}
|
||||||
class="block mb-2 font-semibold text-white"
|
class="block mb-2 font-semibold text-center text-white"
|
||||||
>
|
>
|
||||||
{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
|
{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
|
||||||
fields[$state.context.currentField].name.slice(1)}
|
fields[$state.context.currentField].name.slice(1)}
|
||||||
</label>
|
</label> -->
|
||||||
{/if}
|
{/if}
|
||||||
|
</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'}
|
||||||
@ -165,33 +201,47 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if $state.matches('submitted')}
|
||||||
|
submitted
|
||||||
|
{/if}
|
||||||
<div class="flex justify-between mt-4">
|
<div class="flex justify-between mt-4">
|
||||||
|
{#each $possibleActions as action (action)}
|
||||||
|
{#if action === 'PREV'}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
on:click={() => send('PREV')}
|
on:click={() => send(action)}
|
||||||
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
disabled={$state.context.currentField === 0}
|
disabled={$state.context.currentField === 0}
|
||||||
>
|
>
|
||||||
Previous
|
{action}
|
||||||
</button>
|
</button>
|
||||||
{#if !$state.matches('submitting')}
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each $possibleActions as action (action)}
|
||||||
|
{#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
on:click={() => send('NEXT')}
|
on:click={() => send(action)}
|
||||||
|
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
{action}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each $possibleActions as action (action)}
|
||||||
|
{#if action === 'NEXT' || action === 'SUBMIT'}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
on:click={() => handleNext()}
|
||||||
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
disabled={$errors[fields[$state.context.currentField].name]}
|
disabled={$errors[fields[$state.context.currentField].name]}
|
||||||
>
|
>
|
||||||
Next
|
{action}
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{#if $state.matches('submitting')}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="px-4 py-2 text-white bg-green-500 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500"
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,14 +10,56 @@
|
|||||||
onMount(() => {
|
onMount(() => {
|
||||||
inputElement.focus();
|
inputElement.focus();
|
||||||
});
|
});
|
||||||
|
function increment(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
form.update((values) => {
|
||||||
|
values[field.name] = values[field.name] ? Number(values[field.name]) + 1 : 1;
|
||||||
|
return values;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function decrement(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
form.update((values) => {
|
||||||
|
values[field.name] = values[field.name] ? Number(values[field.name]) - 1 : 0;
|
||||||
|
return values;
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input
|
<div class="input-group input-group-divider grid grid-cols-[auto,1fr,auto]">
|
||||||
|
<button type="button" class="variant-filled-secondary" on:click={decrement}>-</button>
|
||||||
|
<input
|
||||||
name={field.name}
|
name={field.name}
|
||||||
bind:this={inputElement}
|
bind:this={inputElement}
|
||||||
type="number"
|
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"
|
class="w-full h-48 px-3 py-2 bg-transparent border-gray-100 rounded-md text-9xl border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500 {$errors[
|
||||||
|
field.name
|
||||||
|
]
|
||||||
|
? 'input-warning'
|
||||||
|
: ''}"
|
||||||
bind:value={$form[field.name]}
|
bind:value={$form[field.name]}
|
||||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||||
{...constraints[field.name]}
|
{...constraints[field.name]}
|
||||||
/>
|
/>
|
||||||
|
<button type="button" class="variant-filled-secondary" on:click={increment}>+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Hide the default arrows */
|
||||||
|
input[type='number']::-webkit-inner-spin-button,
|
||||||
|
input[type='number']::-webkit-outer-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the buttons */
|
||||||
|
.variant-filled-secondary {
|
||||||
|
background-color: #6b7280; /* Tailwind's coolGray-600 */
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 40px;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
<select
|
<select
|
||||||
name={field.name}
|
name={field.name}
|
||||||
bind:this={inputElement}
|
bind:this={inputElement}
|
||||||
class="select"
|
class="text-3xl select"
|
||||||
size="5"
|
size="5"
|
||||||
bind:value={$form[field.name]}
|
bind:value={$form[field.name]}
|
||||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||||
|
|||||||
@ -15,7 +15,11 @@
|
|||||||
<textarea
|
<textarea
|
||||||
name={field.name}
|
name={field.name}
|
||||||
bind:this={inputElement}
|
bind:this={inputElement}
|
||||||
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md textarea border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
class="w-full px-3 py-2 text-3xl bg-transparent border-gray-100 rounded-md textarea border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500 {$errors[
|
||||||
|
field.name
|
||||||
|
]
|
||||||
|
? 'input-warning'
|
||||||
|
: ''}"
|
||||||
bind:value={$form[field.name]}
|
bind:value={$form[field.name]}
|
||||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||||
{...constraints[field.name]}
|
{...constraints[field.name]}
|
||||||
|
|||||||
@ -16,7 +16,11 @@
|
|||||||
name={field.name}
|
name={field.name}
|
||||||
bind:this={inputElement}
|
bind:this={inputElement}
|
||||||
type="text"
|
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"
|
class="input w-full h-24 px-3 py-2 text-6xl border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500 {$errors[
|
||||||
|
field.name
|
||||||
|
]
|
||||||
|
? 'input-warning'
|
||||||
|
: ''}"
|
||||||
bind:value={$form[field.name]}
|
bind:value={$form[field.name]}
|
||||||
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
aria-invalid={$errors[field.name] ? 'true' : undefined}
|
||||||
{...constraints[field.name]}
|
{...constraints[field.name]}
|
||||||
|
|||||||
@ -21,11 +21,41 @@
|
|||||||
initial: 'notValidated',
|
initial: 'notValidated',
|
||||||
context: {
|
context: {
|
||||||
fields: [
|
fields: [
|
||||||
{ name: 'name', type: 'text', placeholder: '' },
|
{
|
||||||
{ name: 'email', type: 'email', placeholder: '' },
|
name: 'name',
|
||||||
{ name: 'about', type: 'textarea', placeholder: '' },
|
type: 'text',
|
||||||
{ name: 'age', type: 'number', placeholder: '' },
|
placeholder: '',
|
||||||
{ name: 'favoriteFood', type: 'select', placeholder: '' }
|
title: 'What is your name?',
|
||||||
|
description: 'Please enter your name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'email',
|
||||||
|
type: 'email',
|
||||||
|
placeholder: '',
|
||||||
|
title: 'What is your email?',
|
||||||
|
description: 'Please enter your email'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'about',
|
||||||
|
type: 'textarea',
|
||||||
|
placeholder: '',
|
||||||
|
title: 'Can you tell us about yourself?',
|
||||||
|
description: 'Tell us about yourself'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'age',
|
||||||
|
type: 'number',
|
||||||
|
placeholder: '',
|
||||||
|
title: 'How old are you?',
|
||||||
|
description: 'Please enter your age'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'favoriteFood',
|
||||||
|
type: 'select',
|
||||||
|
placeholder: '',
|
||||||
|
title: 'What is your favorite food?',
|
||||||
|
description: 'Please select your favorite food'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
validators: UserSchema
|
validators: UserSchema
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user