more work on ionic7

Author: Tommertom

demo-app/package-lock.json

@@ -36,7 +36,7 @@
 		"sveltekit-superforms": "^0.8.1",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
-		"vite": "^4.0.4",
+		"vite": "^4.3.4",
 		"vite-plugin-pwa": "^0.14.1",
 		"zod": "^3.21.4"
 	},

demo-app/package.json

@@ -55,7 +55,7 @@
 		.map((componentName) => {
 			// console.log('COMPONENTN', componentName);
 			const url =
-				componentName !== 'Tabs' ? `/components/${componentName}` : `/components/tabs/[tab]`;
+				componentName !== 'Tabs' ? `/components/${componentName}` : `/components/tabs/explain`;
 			return {
 				url,
 				label: componentName,

demo-app/src/lib/components/Menu.svelte

@@ -62,7 +62,7 @@
 	// we use a separate way to load the svelte source
 	// hack the name for tabs
 	if (name == 'Tabs' || name == 'tabs') {
-		name = 'tabs/[tab]';
+		name = 'tabs/explain';
 	}
 
 	console.log('getting', `assets/src/components/${name}/+page.svelte`);
@@ -196,17 +196,15 @@
 						if (REPLlink.length > 1) {
 							window.open(REPLlink, '_blank');
 						}
-					}}
-				>
+					}}>
 					REPL
 				</ion-button>
 			{/if}
 
 			<ion-button
 				on:click={() => {
 					window.open(APIlink, '_blank');
-				}}
-			>
+				}}>
 				API
 			</ion-button>
 

demo-app/src/lib/components/SourceViewer.svelte

@@ -2,70 +2,32 @@
 	import SourceButton from '$lib/components/SourceButton.svelte';
 	import { alertController, IonPage } from 'ionic-svelte';
 
-	import { accountSchema as schema } from './account.interface';
-	//	import { enhance, getFormWritable, validateField } from './spa-enhance';
-
 	import { superForm, setMessage, setError } from 'sveltekit-superforms/client';
 	import { z } from 'zod';
 
-	/*
-<h1>Edit user</h1>
-
-{#if $message}<h3>{$message}</h3>{/if}
-
-<form method="POST" use:enhance>
-  <input type="hidden" name="id" bind:value={$form.id} />
-
-  <label>
-    Name<br />
-    <input
-      name="name"
-      data-invalid={$errors.name}
-      bind:value={$form.name}
-      {...$constraints.name} />
-  </label>
-  {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
-
-  <label>
-    E-mail<br />
-    <input
-      name="email"
-      type="email"
-      data-invalid={$errors.email}
-      bind:value={$form.email}
-      {...$constraints.email} />
-  </label>
-  {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
-
-  <button>Submit</button>
-</form>
-
-	*/
-
-	//const form = getFormWritable();
-
 	const userSchema = z.object({
 		firstName: z.string().min(2).default(''),
 		lastName: z.string().min(2).default('')
 	});
 
+	type User = z.infer<typeof userSchema>; // not used - but usefull
+
 	const { form, errors, message, constraints, enhance, delayed, validate } = superForm(
-		{ firstName: 'F', lastName: 'ss' },
+		{ firstName: '', lastName: '' },
 		{
 			SPA: true,
 			validators: userSchema,
 			onUpdate(form) {
 				console.log('SUBMIT clicked, received form', form);
 			},
 			onError({ result, message }) {
+				console.log('ERROR received', result, message);
 				message.set(result.error.message);
 			},
 			validationMethod: 'oninput'
 		}
 	);
 
-	// $: console.log('Form received', $form);
-
 	function submit() {
 		if (!$errors) {
 			const controller = alertController
@@ -96,29 +58,14 @@
 		}
 	}
 
-	async function doStuff(e: any) {
-		console.log('doStuff', e.detail.value, e.target.name);
-
-		// const nameErrors = awai	validate(e.target.value);
-		// validate('firstName', { update: 'errors' }).then(console.log);
-		//	validate('lastName', { update: 'errors' }).then(console.log);
+	async function checkInput(e: any) {
+		console.log('Getting stuff', e.detail.value, e.target.name);
+		if (e.target.name in $form) {
+			//@ts-ignore
+			$form[e.target.name] = e.detail.value;
+		}
 		const nameErrors = await validate('firstName', { update: false });
 		console.log('validate errors', nameErrors);
-		/*
-
-const nameErrors = await validate('name', { update: false })
-
-// Validate and update field with a custom value
-validate('name', { value: 'Test' })
-
-// Validate a custom value, update errors only
-validate('name', { value: 'Test', update: 'errors' })
-
-// Validate and update nested data, and also taint the field
-validate(['tags', 1, 'name'], { value: 'Test', taint: true })
-
-
-*/
 	}
 </script>
 
@@ -144,30 +91,32 @@ validate(['tags', 1, 'name'], { value: 'Test', taint: true })
 			<ion-list lines="full" class="ion-no-margin ion-no-padding">
 				<ion-item>
 					<ion-input
+						placeholder="Start typing here to see superforms"
 						class:ion-invalid={$errors.firstName}
 						class:ion-touched={$errors.firstName}
-						label="First Name"
+						label="First Name - Superforms supercharged"
 						label-placement="stacked"
 						helper-text="Here you may enter your first name - or something else"
 						error-text="Please type more characters..."
 						name="firstName"
 						type="text"
 						value={$form.firstName ?? ''}
-						on:ionInput={doStuff} />
+						on:ionInput={checkInput} />
 				</ion-item>
 
 				<ion-item>
 					<ion-input
+						placeholder="Start typing here to see superforms"
 						class:ion-invalid={$errors.lastName}
 						class:ion-touched={$errors.lastName}
-						label="Last Name"
+						label="Last Name - Superforms supercharged"
 						label-placement="stacked"
 						helper-text="Here you may enter your last name - or something else"
 						error-text="Please type more characters..."
 						name="lastName"
 						type="text"
 						value={$form.lastName ?? ''}
-						on:ionInput={doStuff} />
+						on:ionInput={checkInput} />
 				</ion-item>
 
 				<ion-item>

demo-app/src/routes/components/Inputs/+page.svelte

@@ -31,16 +31,11 @@
 	<br /> <br />
 	<br />
 	<br />
-	<br /> <br />
-	<br />
-	<br />
-	<br />
 	<div class="ion-text-center">
 		<img
 			src="/assets/svelte-ionic-logo.png"
 			alt="Great success"
-			in:scale={{ duration: 1900, easing: elasticInOut }}
-		/>
+			in:scale={{ duration: 1900, easing: elasticInOut }} />
 		<br /><br /><br />
 		<div in:scale={{ delay: 400, duration: 1900, easing: elasticInOut }}>Great success!</div>
 	</div>