Merge pull request #1 from nickt26/feature/useArrayField

0.2 Release

Author: nickt26

.prettierrc

@@ -1,7 +1,7 @@
 {
 	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "none",
+	"trailingComma": "all",
 	"printWidth": 120,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Nicholas Trummer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -13,7 +13,7 @@ npm install svelte-headless-form
 ```html
 <script>
     import { createForm } from 'svelte-headless-form';
-    const { submitForm, input, errors, values } = createForm({
+    const { submitForm, input, errors, values, register } = createForm({
         validateMode: 'onBlur', // Defaults - Schemaless:onChange Schema:onBlur
         initialValues: {
             username: '',
@@ -29,11 +29,8 @@ npm install svelte-headless-form
 <form on:submit|preventDefault={submitForm((values) => console.log(values))}>
     <input
         type="text"
-        name="username"
-        value={$values.username}
-        on:input={input.handleChange}
-        on:blur={input.handleBlur}
-        on:focus={input.handleFocus}
+        bind:value={$values.username}
+        use:register={{ name: 'username' }}
     />
     {#if $errors.username}
         <div>
@@ -43,11 +40,8 @@ npm install svelte-headless-form
 
     <input
         type="password"
-        name="password"
-        value={$values.password}
-        on:input={input.handleChange}
-        on:blur={input.handleBlur}
-        on:focus={input.handleFocus}
+        bind:value={$values.password}
+        use:register={{ name: 'password' }}
     />
     {#if $errors.password}
         <div>
@@ -65,8 +59,6 @@ Svelte Headless Form allows for 2 different validation implementations, called s
 In the [How To Use](#how-to-use) section we are demonstrating schemaless validation by giving each form value it's own validator in the initialValidators prop.
 If you are intereseted in using schema based validaton please give your createForm() a prop called 'validationResolver' which is a single function that returns an object with error strings located at the same path of the corresponding values. In the future we plan to have pre-built validation resolvers for all the major schema based validators like zod, yup and joi to name a few.
 
-### **Please note that schema based validation is not implemented yet**
-
 ## Roadmap
 
 These roadmap features are not ordered by priority.
@@ -75,11 +67,11 @@ These roadmap features are not ordered by priority.
  - [x] Support validation dependencies.
  - [ ] Update README with more advanced examples.
  - [ ] Create a website with a tutorial, an API overview and documentation.
- - [ ] Send through entire form state to schemaless validators.
+ - [x] Send through entire form state to schemaless validators.
  - [x] Support async schemaless validators.
  - [x] Support schema-based validation.
- - [ ] Unify useField and useArrayField api by passing down control.
+ - [x] Unify useField and useFieldArray api by passing down control.
  - [ ] Support a revalidateMode in createForm options.
- - [ ] Explore simpler options for attaching handleChange, handleBlur and handleFocus events to inputs.
+ - [x] Explore simpler options for attaching handleChange, handleBlur and handleFocus events to inputs.
 
 Please consider svelte-headless-form in beta until a 1.0 release.

app/.prettierrc

@@ -1,8 +1,8 @@
 {
 	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
+	"trailingComma": "all",
+	"printWidth": 120,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]

app/src/components/FieldArray.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { FormValues, Roles } from '../types/FormValues';
+
+	import { useFieldArray } from '../../../src/core/useFieldArray';
+	import type { FormControl } from '../../../src/types/Form';
+	import Input from './Input.svelte';
+
+	export let control: FormControl<FormValues>;
+	export let name: string;
+	const {
+		fields,
+		remove,
+		form: { touched, dirty, pristine },
+	} = useFieldArray<Roles, FormValues>({ name, control });
+</script>
+
+<div>
+	{#each $fields as _, index}
+		<Input {control} name={`${name}.${index}`} />
+		<button type="button" on:click={() => remove(index)}>Remove</button>
+		<div>touched: {$touched.roles[index]}</div>
+		<div>dirty: {$dirty.roles[index]}</div>
+		<div>pristine: {$pristine.roles[index]}</div>
+	{/each}
+</div>

app/src/components/Input.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { useField } from '../../../src/core/useField';
+	import type { FormControl } from '../../../src/types/Form';
+
+	type IncomingFormValues = $$Generic;
+
+	export let name: string;
+	export let control: FormControl<IncomingFormValues & object>;
+	export let type = 'text';
+	export let parseToInt = false;
+
+	const {
+		field: { value },
+		fieldState: { error, isTouched },
+		form: { register },
+	} = useField<string | number | null, IncomingFormValues & object>({ name, control });
+</script>
+
+<input
+	{type}
+	value={$value}
+	on:input={(e) =>
+		($value = parseToInt
+			? isNaN(parseInt(e.currentTarget.value))
+				? null
+				: parseInt(e.currentTarget.value)
+			: e.currentTarget.value)}
+	use:register={{ name }}
+/>
+{#if $error && $isTouched}
+	<span style="color:red;">{$error}</span>
+{/if}

app/src/routes/+layout.svelte

@@ -0,0 +1,8 @@
+<nav>
+	<ul>
+		<li><a href="/">Home</a></li>
+		<li><a href="/test">Test</a></li>
+	</ul>
+</nav>
+
+<slot />

app/src/routes/+page.svelte

@@ -1,88 +1,124 @@
 <script lang="ts">
 	import { createForm } from '../../../src/core/createForm';
+	import FieldArray from '../components/FieldArray.svelte';
+	import Input from '../components/Input.svelte';
+	import { roles, type FormValues } from '../types/FormValues';
 
 	const delay = <T>(fn: () => T): Promise<T> =>
 		new Promise((resolve) =>
 			setTimeout(() => {
 				resolve(fn());
-			}, 3000)
+			}, 3000),
 		);
 
-	const initialValues = {
+	const initialValues: FormValues = {
 		username: '',
-		password: ''
-	};
-	const {
-		submitForm,
-		touched,
-		input,
-		errors,
-		values,
-		state,
-		dirty,
-		pristine,
-		resetForm,
-		resetField
-	} = createForm({
-		initialDeps: {
-			username: ['password']
+		password: 'password',
+		nested: {
+			age: 0,
+			gender: false,
 		},
-		initialValues,
-		initialValidators: {
-			username: async (value) =>
-				await delay(() => (value.length > 0 ? false : 'Username is required')),
-			password: (value) => (value.length > 0 ? false : 'Password is required')
-		}
-		// validationResolver: (values) => {
-		// 	const errors: any = {};
+		roles: ['admin', 'user', 'guest'],
+		rolesAreUnique: null,
+	};
+
+	const { submitForm, errors, values, state, resetForm, resetField, control, register, touched } =
+		createForm<FormValues>({
+			initialValues,
+			initialValidators: {
+				username: (value) => delay(() => (value.length > 0 ? false : 'Username is required')),
+				password: (value) => (value.length > 0 ? false : 'Password is required'),
+				nested: {
+					age: (val) => (val === null ? 'Age is required' : val <= 0 ? 'Age must be greater than 0' : false),
+					gender: (val) => (val === false ? 'Gender must be true' : false),
+				},
+				roles: initialValues.roles.map((_) => (val) => !roles.includes(val) ? 'Role is invalid' : false),
+				rolesAreUnique: (_, { values, errors }) => {
+					return values.roles.some((role, i) => values.roles.some((_role, j) => _role === role && i !== j)) &&
+						errors.roles.every((error) => error === false)
+						? 'Roles must be unique'
+						: false;
+				},
+			},
+			initialDeps: {
+				// username: ['nested'],
+				// password: ['username'],
+				rolesAreUnique: ['roles'],
+			},
+			// validationResolver: (values) => {
+			// 	const errors: PartialErrorFields<typeof initialValues> = {};
+
+			// 	if (values.username.length === 0) errors.username = 'Username is required';
+
+			// 	if (values.password.length === 0) errors.password = 'Password is required';
+
+			// 	if (values.nested.age <= 0 || values.nested.age === null)
+			// 		errors.nested === undefined
+			// 			? (errors.nested = { age: 'Age must be greater than 0' })
+			// 			: (errors.nested.age = 'Age must be greater than 0');
 
-		// 	if (values.username.length === 0) {
-		// 		errors.username = 'Username is required';
-		// 	}
+			// 	if (values.nested.gender === false)
+			// 		errors.nested === undefined
+			// 			? (errors.nested = { gender: 'Gender must be true' })
+			// 			: (errors.nested.gender = 'Gender must be true');
+			// 	return errors;
+			// }
+		});
 
-		// 	if (values.password.length === 0) {
-		// 		errors.password = 'Password is required';
-		// 	}
-		// 	return errors;
-		// }
-	});
+	let showUsername = true;
 </script>
 
-<form on:submit|preventDefault={submitForm((values) => delay(() => console.log(values)))}>
-	<input
-		type="text"
-		name="username"
-		value={$values.username}
-		on:input={input.handleChange}
-		on:blur={input.handleBlur}
-		on:focus={input.handleFocus}
-	/>
-	<span>touched: {$touched.username}</span>
-	<span>dirty: {$dirty.username}</span>
-	<span>pristine: {$pristine.username}</span>
-	{#if $errors.username}
-		<span>
-			{$errors.username}
-		</span>
+<form
+	on:submit|preventDefault={submitForm(
+		(values) => delay(() => console.log(values)),
+		(errors) => console.log(errors),
+	)}
+>
+	<button type="button" on:click={() => (showUsername = !showUsername)}>Toggle Username</button>
+	{#if showUsername}
+		<Input {control} name="username" />
+		<button type="button" on:click={() => resetField('username')}>Reset Username</button>
 	{/if}
-	<button type="button" on:click={() => resetField('username')}>Reset Username</button>
 
-	<input
-		type="password"
-		name="password"
-		value={$values.password}
-		on:input={input.handleChange}
-		on:blur={input.handleBlur}
-		on:focus={input.handleFocus}
-	/>
-	{#if $errors.password}
-		<span>
-			{$errors.password}
-		</span>
+	<Input {control} name="password" type="password" />
+	<Input {control} name="nested.age" type="number" parseToInt />
+
+	<button
+		type="button"
+		on:click={() => ($values.nested.gender = !$values.nested.gender)}
+		use:register={{ name: 'nested.gender', changeEvent: 'click' }}>Change Gender</button
+	>
+	<div>Gender: {$values.nested.gender}</div>
+	{#if $errors.nested.gender}
+		<div>
+			{$errors.nested.gender}
+		</div>
+	{/if}
+
+	<FieldArray name="roles" {control} />
+	<button type="button" on:click={() => resetField('roles')}>Reset Roles</button>
+	{#if $errors.rolesAreUnique}
+		<div>{$errors.rolesAreUnique}</div>
 	{/if}
 
-	<button type="submit" disabled={$state.isSubmitting || $state.isValidating}>Submit</button>
-	<button type="button" on:click={() => resetForm({ username: '123' })}>Reset</button>
+	<button type="submit">Submit</button>
+	<button
+		type="button"
+		on:click={() =>
+			resetForm(
+				{
+					username: 'banana',
+					nested: { age: 10 },
+					roles: ['baker', 'admin', 'user', 'omega'],
+				},
+				{
+					replaceArrays: false,
+					validators: (values) => ({
+						roles: values.roles.map((_) => (val) => !roles.includes(val) ? 'Role is invalid' : false),
+					}),
+				},
+			)}>Reset</button
+	>
 
 	<div>
 		isValidating: {$state.isValidating ? 'Yes' : 'No'}
@@ -99,4 +135,7 @@
 	<div>
 		isPristine: {$state.isPristine ? 'Yes' : 'No'}
 	</div>
+	<div>
+		hasErrors: {$state.hasErrors ? 'Yes' : 'No'}
+	</div>
 </form>

app/src/routes/test/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { createForm } from '../../../../src/core/createForm';
+
+	const { register, values } = createForm({
+		initialValues: {
+			selection: ''
+		},
+		initialValidators: {
+			selection: (value) => (value.length > 0 ? false : 'Selection is required')
+		}
+	});
+</script>
+
+<div>
+	<select
+		bind:value={$values.selection}
+		use:register={{ name: 'selection', changeEvent: 'banana' }}
+	>
+		<option value="1">1</option> <option value="2">2</option><option value="3">3</option><option
+			value="4">4</option
+		></select
+	>
+</div>