From f568c83f16580e19c7da36cbe850f70e29be7109 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 16:00:08 +0200
Subject: [PATCH] pulled out the selection options in the selectInput field.

---
 src/lib/components/inputfields/SelectInput.svelte |  8 +++-----
 src/lib/components/inputfields/TextInput.svelte   |  2 ++
 src/lib/types/UserSchema.ts                       |  2 +-
 src/routes/composer/form/+page.svelte             | 14 ++++++++------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/inputfields/SelectInput.svelte b/src/lib/components/inputfields/SelectInput.svelte
index 2ab0f65..92f95fd 100644
--- a/src/lib/components/inputfields/SelectInput.svelte
+++ b/src/lib/components/inputfields/SelectInput.svelte
@@ -21,9 +21,7 @@
 	aria-invalid={$errors[field.name] ? 'true' : undefined}
 	{...constraints[field.name]}
 >
-	<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>
+	{#each field.options as option (option.value)}
+		<option value={option.value}>{option.label}</option>
+	{/each}
 </select>
diff --git a/src/lib/components/inputfields/TextInput.svelte b/src/lib/components/inputfields/TextInput.svelte
index 8fed656..dc9038b 100644
--- a/src/lib/components/inputfields/TextInput.svelte
+++ b/src/lib/components/inputfields/TextInput.svelte
@@ -10,6 +10,8 @@
 	export let childInput;
 
 	const { form, errors, field, constraints } = childInput;
+
+	$: console.log({ field });
 </script>
 
 <input
diff --git a/src/lib/types/UserSchema.ts b/src/lib/types/UserSchema.ts
index 80e4dc4..59673d4 100644
--- a/src/lib/types/UserSchema.ts
+++ b/src/lib/types/UserSchema.ts
@@ -33,7 +33,7 @@ export const UserSchema = z.object({
     email: z.string().email(validationMessages.email.isEmail),
     about: z.string().max(500, validationMessages.about.maxLength),
     age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max),
-    favoriteFood: z.enum(['apple', 'banana', 'coconut', 'strawberry', 'mango']).refine(value => value !== '', validationMessages.favoriteFood.invalid),
+    favoriteFood: z.enum(['apple', 'banana', 'coconut', 'peach', 'mango']).refine(value => value !== '', validationMessages.favoriteFood.invalid),
     slider: z.number().min(0, validationMessages.slider.min).max(100, validationMessages.slider.max),
     toggle: z.boolean().refine(value => typeof value === 'boolean', validationMessages.toggle.isBoolean),
 }).required({
diff --git a/src/routes/composer/form/+page.svelte b/src/routes/composer/form/+page.svelte
index 0a55b07..6141361 100644
--- a/src/routes/composer/form/+page.svelte
+++ b/src/routes/composer/form/+page.svelte
@@ -24,37 +24,39 @@
 							{
 								name: 'name',
 								type: 'text',
-								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'
+								description: 'Please select your favorite food',
+								options: [
+									{ value: 'apple', label: 'Apple' },
+									{ value: 'banana', label: 'Banana' },
+									{ value: 'peach', label: 'Peach' },
+									{ value: 'coconut', label: 'Coconut' },
+									{ value: 'mango', label: 'Mango' }
+								]
 							}
 						],
 						validators: UserSchema