@steveesamson/microform 0.0.11 → 1.0.0

package/README.md

@@ -25,18 +25,23 @@ Once you've added `microform` to your project, use it as shown below, in your vi
 ### In the view Script
 
 ```ts
-<script lang='ts'>
+<script>
 import uForm from "@steveesamson/microform";
 // default form data, probably passed as props
-export let defaultData:any = {};
+let defaultData:any = $props();
 
 // Instatiate microform
-const { form, values, errors, submit, valid } = uForm({
+const { form, values, errors, submit, sanity } = uForm({
     // Set default form data
     data:{...defaultData},
     // Set a global event for validation, can be overriden on a each field.
     // Possible values: blur, change, input, keyup
-    validateEvent:'blur'
+    options:{
+        // Default event that triggers validation
+        validateEvent:'blur',
+        // Configure validators here
+        validators:{}
+    }
 });
 
 // Submit handler
@@ -51,11 +56,11 @@ const onSubmit = (data:unknown) => {
 
 On the instantiation of `microform`, we have access to:
 
-- `values`, a `FormValues`, which is a `svelte store` for form data.
-- `errors`, a `FormErrors`, which is a `svelte store` for form errors.
+- `values`, a `FormValues`, which represents form data.
+- `errors`, a `FormErrors`, which represents form errors.
 - `form`, which is a `svelte action` that actually does the `microform` magic.
 - `submit`, which is another `svelte action` to handle form submission.
-- `valid`, a `FormSanity`, which is a `svelte store` that tells if a form is clean/without errors.
+- `sanity`, a `FormSanity`, which tells us if a form is clean/without errors by it's `ok` property.
 - `reset`, a function to reset form
 - `onsubmit`, a function to handle form submission.
 
@@ -63,91 +68,162 @@ On the instantiation of `microform`, we have access to:
 
 ```html
     <form use:submit={onSubmit}>
-        <label for='username'>
-            Username:
-            <input
-            type='text'
-            name='username'
-            id='username'
-            use:form
-            data-validations='required'>
-            {#if $errors.username}
-            <small>{$errors.username}</small>
-            {/if}
-        </label>
-         <label for='email_account'>
-            Email Account:
-            <input
-            type='text'
-            name='email_account'
-            id='email_account'
-            use:form={{
-                validations:'required|email'
-            }}/>
-            {#if $errors.email_account}
-            <small>{$errors.email_account}</small>
-            {/if}
-        </label>
-        <label for='gender'>
-            Gender:
-            <select
-            name='gender'
-            id='gender'
-            use:form={{
-                validations:'required',
-                validateEvent:'change'
-            }}>
-                <options value=''>Gender please</option>
-                <options value='F'>Female</option>
-                <options value='M'>Male</option>
-                </select>
-            {#if $errors.gender}
-            <small>{$errors.gender}</small>
-            {/if}
-        </label>
-        <label for='password'>
-            Password:
-            <input
-            type='text'
-            name='password'
-            id='password'
-            use:form
-            data-validations='required'>
-            {#if $errors.password}
-            <small>{$errors.password}</small>
-            {/if}
-        </label>
-         <label for='confirm_password'>
-            Confirm password:
-            <input
-            type='text'
-            name='confirm_password'
-            id='confirm_password'
-            use:form
-            data-validations='required|match:password'>
-            {#if $errors.confirm_password}
-            <small>{$errors.confirm_password}</small>
-            {/if}
-        </label>
-        <label for="story">
-        Story:
-            <div
-                contenteditable="true"
-                use:form={{
-                    validateEvent: 'input',
-                    validations: 'required',
-                    name: 'story',
-                    html: true
-                }}
-            />
-            {#if $errors.story}
-                <small>{$errors.story}</small>
-            {/if}
-        </label>
+        <label for="fullname">
+			Name:
+			<input 
+			type="text" 
+			name="fullname" 
+			id="fullname" 
+			use:form={{ validations: ['required'] }} 
+			/>
+			{#if errors.fullname}
+				<small>{errors.fullname}</small>
+			{/if}
+		</label>
+		<label for="dob">
+			DOB:
+			<input 
+			type="date" 
+			name="dob" 
+			id="dob" 
+			use:form={{ validations: ['required'] }} 
+			/>
+			{#if errors.dob}
+				<small>{errors.dob}</small>
+			{/if}
+		</label>
+		<label for="supper_time">
+			Supper time:
+			<input
+				type="time"
+				name="supper_time"
+				id="supper_time"
+				use:form={{ validations: ['required'] }}
+			/>
+			{#if errors.supper_time}
+				<small>{errors.supper_time}</small>
+			{/if}
+		</label>
+		<label for="password">
+			Password:
+			<input
+				type="password"
+				name="password"
+				id="password"
+				use:form={{ validations: ['required'] }}
+			/>
+			{#if errors.password}
+				<small>{errors.password}</small>
+			{/if}
+		</label>
+		<label for="gender">
+			Gender:
+			<select
+				name="gender"
+				id="gender"
+				use:form={{ validateEvent: 'change', validations: ['required'] }}
+			>
+				<option value="">Select gender</option>
+				<option value="M">Male</option>
+				<option value="F">Female</option>
+			</select>
+			{#if errors.gender}
+				<small>{errors.gender}</small>
+			{/if}
+		</label>
+		<label for="email">
+			Email:
+			<input
+				type="text"
+				name="email"
+				id="email"
+				use:form={{ validations: ['required', 'email'] }}
+			/>
+			{#if errors.email}
+				<small>{errors.email}</small>
+			{/if}
+		</label>
+        <label for="resume">
+			Resume:
+			<input
+				type="file"
+				name="resume"
+				id="resume"
+				use:form={{ 
+					validateEvent:'change', 
+					validations: ['required', 'file-size-mb:3'] 
+				}}
+			/>
+			{#if errors.resume}
+				<small>{errors.resume}</small>
+			{/if}
+		</label>
+		<label for="comment">
+			Comment:
+			<textarea 
+			name="comment" 
+			id="comment" 
+			use:form={{ validations: ['required'] }}
+			></textarea>
+			{#if errors.comment}
+				<small>{errors.comment}</small>
+			{/if}
+		</label>
+		<label for="beverage">
+			Beverage:
+			{#each items as item (item.value)}
+				<span>
+					<input
+						type="radio"
+						name="beverage"
+						value={item.value}
+						use:form={{ validateEvent: 'input', validations: ['required'] }}
+						bind:group={values.beverage}
+					/>
+					{item.label}
+				</span>
+			{/each}
+			{#if errors.beverage}
+				<small>{errors.beverage}</small>
+			{/if}
+		</label>
+		<label for="favfoods">
+			Fav Foods:
+			{#each foods as item (item.value)}
+				<span>
+					<input
+						type="checkbox"
+						name="favfoods"
+						value={item.value}
+						use:form={{ validateEvent: 'change', validations: ['required'] }}
+						bind:group={values['favfoods']}
+					/>
+					{item.label}
+				</span>
+			{/each}
+			{#if errors.favfoods}
+				<small>{errors.favfoods}</small>
+			{/if}
+		</label>
+		<label for="story">
+			Story:
+			<div
+				contenteditable="true"
+				use:form={{ 
+				 	validateEvent: 'input', 
+					validations: ['required'], 
+					name: 'story', 
+					html: true 
+				}}
+			></div>
+			{#if errors.story}
+				<small>{errors.story}</small>
+			{/if}
+		</label>
 
         <button
         type='submit'
-        disabled={!$valid}>
+        disabled={!sanity.ok}>
             Submit form
         </button>
     </form>
@@ -159,9 +235,16 @@ While the above example uses the `submit` action of `microform`, form could also
 <form>
 	<label for="password">
 		Password:
-		<input type="text" name="password" id="password" use:form data-validations="required" />
-		{#if $errors.password}
-		<small>{$errors.password}</small>
+		<input 
+            type="text" 
+            name="password" 
+            id="password" 
+            use:form={{
+				validations: ['required']
+            }}
+        />
+		{#if errors.password}
+		<small>{errors.password}</small>
 		{/if}
 	</label>
 	<label for="confirm_password">
@@ -170,15 +253,16 @@ While the above example uses the `submit` action of `microform`, form could also
 			type="text"
 			name="confirm_password"
 			id="confirm_password"
-			use:form
-			data-validations="required|match:password"
+			use:form={{
+				validations: ['required','match:password'], 
+            }}
 		/>
-		{#if $errors.confirm_password}
-		<small>{$errors.confirm_password}</small>
+		{#if errors.confirm_password}
+		<small>{errors.confirm_password}</small>
 		{/if}
 	</label>
 
-	<button type="button" disabled="{!$valid}" on:click="{onsubmit(onSubmit)}">Submit form</button>
+	<button type="button" disabled="{!sanity.ok}" onclick="{onsubmit(onSubmit)}">Submit form</button>
 </form>
 ```
 
@@ -186,12 +270,12 @@ While the above example uses the `submit` action of `microform`, form could also
 
 `microform` performs its magic by relying the `form` action. The `form` action can optionally accept the following:
 
-```javascript
+```ts
 <input
 	use:form={{
 		// an optional list of validations
 		// default is '' - no validations
-		validations: 'email|length:20',
+		validations: ['email', 'len:20'],
 		// an optional string of
 		// any of blur, change, input, keyup.
 		// default is blur
@@ -214,46 +298,36 @@ You need not bind the `values` to your fields except when there is a definite ne
 
 ```html
 <input
-	type="text"
-	name="email_account"
-	id="email_account"
-	value="{$values.email_account}"
-	data-validations="required|email"
-	use:form
+    ...
+	value="{values.email_account}"
 />
 ```
 
 ### 1. Validations
 
-Uses both inline `data-validations` on field and `validations` props on `form` action. For instance, the following are perfectly identical:
+`validations` is an array of validations to check field values against for correctnes. Uses `validations` props on `form` action. For instance, the following:
 
 ```html
-<input
-    type='text'
-    name='email_account'
-    id='email_account'
-    data-validations='required|email'
-    use:form/>
-
 <input
     type='text'
     name='email_account'
     id='email_account'
     use:form={{
-        validations:'required|email'
-    }}/>
+        validations:[ 'required', 'email' ]
+    }}
+/>
 ```
 
 ### 2. Validation Event
 
-Validation event can be changed/specified on a per-field basis. For instance, in our example, the global `validateEvent` was set to `blur` but we changed it on the select field to `change` like so:
+Validation event is to configure the event that should trigger validations. It can be changed/specified on a per-field basis. For instance, in our example, the global `validateEvent` was set to `blur` but we changed it on the select field to `change` like so:
 
 ```html
 <select
     name='gender'
     id='gender'
     use:form={{
-        validations:'required',
+        validations:['required'],
         validateEvent:'change'
     }}>
         <options value=''>Gender please</option>
@@ -274,13 +348,13 @@ Validation event can be changed/specified on a per-field basis. For instance, in
             contenteditable="true"
             use:form={{
                 validateEvent: 'input',
-                validations: 'required',
+                validations: ['required'],
                 name: 'story',
                 html: true
             }}
-        />
-        {#if $errors.story}
-            <small>{$errors.story}</small>
+        ></div>
+        {#if errors.story}
+            <small>{errors.story}</small>
         {/if}
     </label>
 </form>
@@ -290,35 +364,128 @@ Validation event can be changed/specified on a per-field basis. For instance, in
 
 `microform` provides a set of usable validations out-of-box. The following is a list of provided validations:
 
-- `required`: Usage, `validations='required'`
-- `email`: Usage, `validations='email'`
-- `url`: Usage, `validations='url'`
-- `ip`: Usage, `validations='ip'`
-- `length`: Usage, `validations='length:40'`
-- `number`: Usage, `validations='number'`
-- `integer`: Usage, `validations='integer'`
-- `alpha`: Usage, `validations='alpha'` - only alphabets
-- `alphanum`: Usage, `validations='alphanum'` - alphanumeric
-- `match`: Usage, `validations='match:<name-of-field-to-match>'`. For instance, this is examplified in our example with `password` and `confirm_password` fields
-- `min-length`: Usage, `validations='min-length:6'`
-- `max-length`: Usage, `validations='max-length:15'`
-- `max`: Usage, `validations='max:25'`
-- `max-file-size-mb`: Usage, `validations='max-file-size-mb:30'` - for file upload
+- `required`: Usage, `validations:['required']`
+- `email`: Usage, `validations:['email']`
+- `url`: Usage, `validations:['url']`
+- `ip`: Usage, `validations:['ip']`
+- `len:<number>`: Usage, `validations:['len:40']`
+- `number`: Usage, `validations:['number']`
+- `integer`: Usage, `validations:['integer']`
+- `alpha`: Usage, `validations:['alpha']` - only alphabets
+- `alphanum`: Usage, `validations:['alphanum']` - alphanumeric
+- `match:<input-id>`: Usage, `validations:['match:<id-of-field-to-match>']`. For instance, this is examplified in our example with `password` and `confirm_password` fields
+- `minlen:<number>`: Usage, `validations:['minlen:6']`
+- `maxlen:<number>`: Usage, `validations:['maxlen:15']`
+- `max:<number>`: Usage, `validations:['max:25']`
+- `file-size-mb:<number>`: Usage, `validations:['file-size-mb:30']` - for file upload
 
 Every validation listed above also comes with a very good default error message.
 
-Finally, the validations can be combined to form a complex graph of validations based on use cases by separating each validation rule with a `pipe`, `|`. For instance, a required field that also should be an email field could be validated thus:
+Finally, the validations can be combined to form a complex graph of validations based on use cases by combining them in a single array of validations. For instance, a required field that also should be an email field could be configured thus:
 
 ```html
 <input
 	type="text"
 	name="email_account"
 	id="email_account"
-	data-validations="required|email"
-	use:form
+    use:form={{
+        validations:['required','email']
+    }}
 />
 ```
 
-# TODO
+# Overriding validators
+Validators could be overriden to provide custom validation and/or messages besides the default ones. For instance, let us overide the `len` validation rule. Every non-empty string/message returned from a validator's call becomes the error to be displayed to the user; and it shows up in the `errors` keyed by the field name.
+
+### Approach 1
+```ts
+<script>
+import uForm, { type FieldProps } from "@steveesamson/microform";
+// default form data, probably passed as props
+export let defaultData:any = {};
+
+// Instatiate microform
+const { form, values, errors, submit, sanity } = uForm({
+    // Set default form data
+    data:{...defaultData},
+    // Set a global event for validation, can be overriden on a each field.
+    // Possible values: blur, change, input, keyup
+    options:{
+        // Default event that triggers validation
+        validateEvent:'blur',
+        // Configure validators here
+        validators:{
+            len:({name, label, parts}:FieldProps) =>{
+                if (!parts || parts.length < 2) {
+                    return `${label}: length validation requires length.`;
+                }
+                const extra = parts[1].trim();
+                return !!value && value.length !== parseInt(parts[1], 10) ?  `${label} must exactly be ${extra} characters long.` : "";
+            }
+        }
+    }
+});
+</script>
+```
+Instead of using the literal validation keys like `len`, `required` etc., while overriding validators, the exported key namee could be used. The key names are:
+- IS_REQUIRED = `required`
+- IS_EMAIL = `email`
+- IS_URL = `url`
+- IS_IP = `ip`
+- IS_INTEGER = `integer`
+- IS_NUMBER = `number`
+- IS_ALPHA = `alpha`
+- IS_ALPHANUM = `alphanum`
+- IS_MIN_LEN = `minlen`
+- IS_MAX_LEN = `maxlen`
+- IS_LEN = `len`
+- IS_MIN = `min`
+- IS_MAX = `max`
+- IT_MATCHES = `match`
+- IS_FILE_SIZE_MB = `file-size-mb`
+
+Therefore, the following is equivalent to the configuration in `Approach 1`:
+
+### Approach 2
+```ts
+<script>
+import uForm, { type FieldProps, IS_LEN } from "@steveesamson/microform";
+// default form data, probably passed as props
+export let defaultData:any = {};
+
+// Instatiate microform
+const { form, values, errors, submit, sanity } = uForm({
+    // Set default form data
+    data:{...defaultData},
+    // Set a global event for validation, can be overriden on a each field.
+    // Possible values: blur, change, input, keyup
+    options:{
+        // Default event that triggers validation
+        validateEvent:'blur',
+        // Configure validators here
+        validators:{
+            [IS_LEN]:({name, label, parts}:FieldProps) =>{
+                if (!parts || parts.length < 2) {
+                    return `${label}: length validation requires length.`;
+                }
+                const extra = parts[1].trim();
+                return !!value && value.length !== parseInt(parts[1], 10) ?  `${label} must exactly be ${extra} characters long.` : "";
+            }
+        }
+    }
+});
+</script>
+```
 
-I shall be working on how to allow users register their `validators` and `error messages` for the purpose of customisation.
+The validation will be used on the view as below:
+
+```html
+<input
+	type="text"
+	name="comment"
+	id="comment"
+    use:form={{
+        validations:['required','len:30']
+    }}
+/>
+```

package/dist/form-action.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
 import { type Writable } from "svelte/store";
-import type { FormErrors, FormOptions, FormValues, Params, FormAction } from "./types.js";
-export declare const formAction: (values: FormValues, errors: FormErrors, unfits: Writable<Params>, isdirty: Writable<boolean>, options: FormOptions, validationMap: Params) => FormAction;
+import type { FormOptions, FormAction } from "./types.js";
+import type { Params } from "./internal.js";
+export declare const formAction: (values: Writable<Params>, errors: Writable<Params>, unfits: Writable<Params>, isdirty: Writable<boolean>, options: FormOptions, validationMap: Params) => FormAction;

package/dist/form-action.js

@@ -7,22 +7,34 @@ const isField = (node) => {
         node instanceof HTMLTextAreaElement;
 };
 const isExcluded = (node) => {
-    return node instanceof HTMLInputElement && ['radio', 'checkbox', 'file'].includes(node.type.toLowerCase());
+    return node instanceof HTMLInputElement && ['radio', 'checkbox'].includes(node.type.toLowerCase());
 };
-const checkFormFitness = (values, unfits, validationMap) => {
-    const validate = useValidator(unfits, values);
+const isCheckbox = (node) => {
+    return node instanceof HTMLInputElement && ['checkbox'].includes(node.type.toLowerCase());
+};
+const isRadio = (node) => {
+    return node instanceof HTMLInputElement && ['radio'].includes(node.type.toLowerCase());
+};
+const checkFormFitness = (values, validationMap, validate) => {
     const _values = get(values);
     for (const [name, { validations }] of Object.entries(validationMap)) {
         validate({ name, value: _values[name], validations, });
     }
 };
 export const formAction = (values, errors, unfits, isdirty, options, validationMap) => {
-    const validate = useValidator(errors, values);
+    const { validators: customValidators } = options;
+    const { validate, validators } = useValidator(errors, values);
+    // override
+    if (customValidators) {
+        for (const [key, val] of Object.entries(customValidators)) {
+            validators[key] = val;
+        }
+    }
     return (node, eventProps) => {
         const nodeName = isField(node) ? node.name : '';
-        const { name: dsname = nodeName, validations: dsvalidations = '' } = node.dataset || {};
-        const { name = dsname, validations = dsvalidations, validateEvent = options.validateEvent, html = false } = eventProps || {};
-        validationMap[name] = { validations, html, nodeRef: isField(node) ? false : node };
+        const { name: dsname = nodeName } = node.dataset || {};
+        const { name = dsname, validations = [], validateEvent = options.validateEvent = 'blur', html = false } = eventProps || {};
+        validationMap[name] = { validations, html, nodeRef: node };
         const storedValue = get(values)[name] || '';
         let defValue = storedValue;
         if (isField(node) && !isExcluded(node)) {
@@ -55,7 +67,28 @@ export const formAction = (values, errors, unfits, isdirty, options, validationM
                     return { ...data, [name]: htm, [`${name}-text`]: text };
                 });
             }
-            checkFormFitness(values, unfits, validationMap);
+            else if (isCheckbox(node)) {
+                const { checked, value: val } = node;
+                const { [name]: fieldValue } = get(values);
+                let current = fieldValue;
+                if (checked) {
+                    current.push(val);
+                }
+                else {
+                    current = current.filter((next) => next !== val);
+                }
+                values.update((data) => {
+                    return { ...data, [name]: [...new Set(current)] };
+                });
+            }
+            else if (isRadio(node)) {
+                const { value: fvalue } = node;
+                values.update((data) => {
+                    return { ...data, [name]: fvalue };
+                });
+            }
+            const { validate: validateUnfit } = useValidator(unfits, values, validators);
+            checkFormFitness(values, validationMap, validateUnfit);
             isdirty.set(true);
         };
         node.addEventListener(validateEvent, updateNode);

package/dist/form-validators.d.ts

@@ -1,2 +1,23 @@
-import type { FormErrors, FormValues, ValidateArgs } from "./types.js";
-export declare const useValidator: (errors: FormErrors, values: FormValues) => ({ name, value, validations, node }: ValidateArgs) => Promise<void>;
+/// <reference types="svelte" />
+import { type Writable } from "svelte/store";
+import type { ValidateArgs, ValidatorType, ValidatorMap } from "./types.js";
+import type { Params } from "./internal.js";
+export declare const IS_REQUIRED = "required";
+export declare const IS_EMAIL = "email";
+export declare const IS_URL = "url";
+export declare const IS_IP = "ip";
+export declare const IS_INTEGER = "integer";
+export declare const IS_NUMBER = "number";
+export declare const IS_ALPHA = "alpha";
+export declare const IS_ALPHANUM = "alphanum";
+export declare const IS_MIN_LEN = "minlen";
+export declare const IS_MAX_LEN = "maxlen";
+export declare const IS_LEN = "len";
+export declare const IS_MIN = "min";
+export declare const IS_MAX = "max";
+export declare const IT_MATCHES = "match";
+export declare const IS_FILE_SIZE_MB = "file-size-mb";
+export declare const useValidator: (errors: Writable<Params>, values: Writable<Params>, validators?: ValidatorMap<ValidatorType>) => {
+    validate: ({ name, value, validations, node }: ValidateArgs) => Promise<void>;
+    validators: ValidatorMap<ValidatorType>;
+};

package/dist/form-validators.js

@@ -1,5 +1,5 @@
 import { get } from "svelte/store";
-import { makeName } from "./utils.js";
+import { makeName, isValidFileSize } from "./utils.js";
 const regexes = {
     number: /^[-+]?[0-9]+(\.[0-9]+)?$/g,
     alpha: /^[A-Z\s]+$/gi,
@@ -9,175 +9,148 @@ const regexes = {
     url: /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i,
     ip: /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/g,
 };
-const getErrorText = (inputName, errorType, extra = '') => {
-    inputName = makeName(inputName);
-    switch (errorType.toLowerCase()) {
-        case 'required':
-            return inputName + ' is mandatory.';
-        case 'match':
-            return inputName + ' does not match ' + makeName(extra);
-        case 'func':
-            return inputName + extra;
-        case 'captcha':
-            return inputName + ' does not match the image.';
-        case 'email':
-            return inputName + ' should be a valid email.';
-        case 'url':
-            return inputName + ' should be a valid URL.';
-        case 'cron':
-            return inputName + ' should be a valid cron expression.';
-        case 'ip':
-            return inputName + ' should be a valid IP.';
-        case 'integer':
-            return inputName + ' must be an integer.';
-        case 'number':
-            return inputName + ' should be a number.';
-        case 'alpha':
-            return inputName + ' should be a string of alphabets.';
-        case 'alphanum':
-            return inputName + ' should be a string of alphanumerics starting with alphabets.';
-        case 'min-length':
-            return inputName + ' must be at least ' + extra + ' characters long.';
-        case 'max-length':
-            return inputName + ' must not be more than ' + extra + ' characters long.';
-        case 'length':
-            return inputName + ' must be exactly ' + extra + ' characters long.';
-        // case 'length':
-        //     return inputName + ' must not be greater than ' + extra + '.';
-        default:
-            return errorType;
-    }
-};
-const checkFileSize = (node, maxFileSizeInMB) => {
-    if (!node)
-        return "";
-    const { files } = node;
-    if (!files)
-        return `${node.name} is required`;
-    const max = maxFileSizeInMB * 1024 * 1024;
-    for (const file of files) {
-        if (file.size > max) {
-            return `File '${file.name}' is larger the ${maxFileSizeInMB}MB.`;
+export const IS_REQUIRED = "required";
+export const IS_EMAIL = "email";
+export const IS_URL = "url";
+export const IS_IP = "ip";
+export const IS_INTEGER = "integer";
+export const IS_NUMBER = "number";
+export const IS_ALPHA = "alpha";
+export const IS_ALPHANUM = "alphanum";
+export const IS_MIN_LEN = "minlen";
+export const IS_MAX_LEN = "maxlen";
+export const IS_LEN = "len";
+export const IS_MIN = "min";
+export const IS_MAX = "max";
+export const IT_MATCHES = "match";
+export const IS_FILE_SIZE_MB = 'file-size-mb';
+const getDefaultValidators = () => {
+    const validators = {
+        [IS_REQUIRED]: ({ label, value }) => {
+            if (!value || (Array.isArray(value) && !value.length)) {
+                return `${label} is mandatory.`;
+            }
+            return "";
+        },
+        [IS_EMAIL]: ({ value, label }) => {
+            return (!!value && !value.match(regexes['email'])) ? `${label} should be a valid email.` : '';
+        },
+        [IS_URL]: ({ value, label }) => {
+            return !!value && !value.match(regexes['url']) ? `${label} should be a valid URL.` : "";
+        },
+        [IS_IP]: ({ value, label }) => {
+            return !!value && !value.match(regexes['ip']) ? `${label} should be a valid IP.` : "";
+        },
+        [IS_INTEGER]: ({ value, label }) => {
+            return !!value && !value.match(regexes['integer']) ? `${label} must be an integer number.` : "";
+        },
+        [IS_NUMBER]: ({ value, label }) => {
+            return !!value && !value.match(regexes['number']) ? `${label} must be a number.` : "";
+        },
+        [IS_ALPHA]: ({ value, label }) => {
+            return !!value && !value.match(regexes['alpha']) ? `${label} should be a string of alphabets.` : "";
+        },
+        [IS_ALPHANUM]: ({ value, label }) => {
+            return !!value && !value.match(regexes['alphanum']) ? `${label} should be a string of alphanumerics starting with alphabets.` : "";
+        },
+        [IS_MIN_LEN]: ({ value, label, parts }) => {
+            if (!!value) {
+                if (!parts || parts.length < 2) {
+                    return `${label}: min-length validation requires minimum length.`;
+                }
+                const extra = parts[1].trim();
+                return value.length >= parseInt(parts[1], 10) ? "" : `${label} must be at least ${extra} characters long.`;
+            }
+            return "";
+        },
+        [IS_MAX_LEN]: ({ value, label, parts }) => {
+            if (!!value) {
+                if (!parts || parts.length < 2) {
+                    return `${label}: max-length validation requires maximum length.`;
+                }
+                const extra = parts[1].trim();
+                return value.length <= parseInt(parts[1], 10) ? "" : `${label} must be at most ${extra} characters long.`;
+            }
+            return "";
+        },
+        [IS_LEN]: ({ value, label, parts }) => {
+            if (!!value) {
+                if (!parts || parts.length < 2) {
+                    return `${label}: length validation requires length.`;
+                }
+                const extra = parts[1].trim();
+                return value.length === parseInt(parts[1], 10) ? "" : `${label} must exactly be ${extra} characters long.`;
+            }
+            return "";
+        },
+        [IS_MAX]: ({ value, label, parts }) => {
+            if (!!value) {
+                if (!parts || parts.length < 2) {
+                    return `${label}: max validation requires the maximum value.`;
+                }
+                const extra = parts[1].trim();
+                return parseInt(value, 10) <= parseInt(parts[1], 10) ? "" : `${label} must not be greater than ${extra}.`;
+            }
+            return "";
+        },
+        [IS_MIN]: ({ value, label, parts }) => {
+            if (!!value) {
+                if (!parts || parts.length < 2) {
+                    return `${label}: min validation requires the minimum value.`;
+                }
+                const extra = parts[1].trim();
+                return parseInt(value, 10) >= parseInt(parts[1], 10) ? "" : `${label} must not be less than ${extra}.`;
+            }
+            return "";
+        },
+        [IT_MATCHES]: ({ values, value, label, parts }) => {
+            if (value) {
+                if (!parts || parts.length < 2) {
+                    return `${label}: match validation requires id of field to match`;
+                }
+                const partyName = parts[1].trim();
+                const partyValue = values[partyName];
+                return value === partyValue ? "" : `${label} does not match ${makeName(partyName)}.`;
+            }
+            return "";
+        },
+        [IS_FILE_SIZE_MB]: ({ value, node, label, parts }) => {
+            if (!!value) {
+                if (!parts || parts.length < 2) {
+                    return `${label}: max file size in MB validation requires maximum file size of mb value.`;
+                    ;
+                }
+                const extra = parts[1].trim();
+                return isValidFileSize(node, parseInt(extra, 10));
+            }
+            return "";
         }
-    }
-    return "";
+    };
+    return validators;
 };
-export const useValidator = (errors, values) => {
+export const useValidator = (errors, values, validators = getDefaultValidators()) => {
     const setError = (name, error) => {
         errors.update((prev) => {
             return { ...prev, [name]: error };
         });
     };
-    return async ({ name, value, validations = '', node = undefined }) => {
-        let error = '';
-        if (validations) {
-            const inputName = name, _validations = validations.split('|');
-            for (let i = 0; i < _validations.length; ++i) {
-                const validation = _validations[i], typeDetails = validation.split(':'), type = typeDetails[0].trim();
-                let partyName, partyValue;
-                switch (type.toLowerCase()) {
-                    case 'required':
-                        error = !value || !value.length ? getErrorText(inputName, 'required') : '';
-                        setError(name, error);
-                        break;
-                    case 'match':
-                        error = typeDetails.length < 2 ? inputName + ': match validation requires party target' : '';
-                        setError(name, error);
-                        if (error)
-                            break;
-                        partyName = typeDetails[1].trim();
-                        partyValue = get(values)[partyName] || '';
-                        error = !value || value !== partyValue ? getErrorText(inputName, 'match', typeDetails[1]) : '';
-                        setError(name, error);
-                        break;
-                    case 'email':
-                        error = !value || !value.match(regexes['email']) ? getErrorText(inputName, 'email') : '';
-                        setError(name, error);
-                        break;
-                    case 'url':
-                        error = !value || !value.match(regexes['url']) ? getErrorText(inputName, 'url') : '';
-                        setError(name, error);
+    return {
+        validate: async ({ name, value, validations = [], node = undefined }) => {
+            if (validations.length) {
+                const _validations = validations.includes('required') ? ['required', ...validations.filter((val) => val !== 'required')] : [...validations];
+                for (let i = 0; i < _validations.length; ++i) {
+                    const validation = _validations[i], parts = validation.split(':'), type = parts[0].trim();
+                    const validator = validators[type];
+                    if (!validator)
+                        return;
+                    const error = validator({ name, label: makeName(name), value, values: get(values), node, parts });
+                    setError(name, error ? error : '');
+                    if (error) {
                         break;
-                    case 'ip':
-                        error = !value || !value.match(regexes['ip']) ? getErrorText(inputName, 'ip') : '';
-                        setError(name, error);
-                        break;
-                    case 'integer':
-                        error = !value || !value.match(regexes['integer']) ? getErrorText(inputName, 'integer') : '';
-                        setError(name, error);
-                        break;
-                    case 'number':
-                        error = !value || !value.match(regexes['number']) ? getErrorText(inputName, 'number') : '';
-                        setError(name, error);
-                        break;
-                    case 'alpha':
-                        error = !value || !value.match(regexes['alpha']) ? getErrorText(inputName, 'alpha') : '';
-                        setError(name, error);
-                        break;
-                    case 'alphanum':
-                        error =
-                            !value || !value.match(regexes['alphanum']) ? getErrorText(inputName, 'alphanum') : '';
-                        setError(name, error);
-                        break;
-                    case 'min-length':
-                        error = typeDetails.length < 2 ? inputName + ': min-length validation requires width' : '';
-                        setError(name, error);
-                        if (error)
-                            break;
-                        error =
-                            !value || value.length < parseInt(typeDetails[1], 10)
-                                ? getErrorText(inputName, 'min-length', typeDetails[1])
-                                : '';
-                        setError(name, error);
-                        break;
-                    case 'max-length':
-                        error = typeDetails.length < 2 ? inputName + ': max-length validation requires width' : '';
-                        setError(name, error);
-                        if (error)
-                            break;
-                        error =
-                            !value || value.length > parseInt(typeDetails[1], 10)
-                                ? getErrorText(inputName, 'max-length', typeDetails[1])
-                                : '';
-                        setError(name, error);
-                        break;
-                    case 'length':
-                        error = typeDetails.length < 2 ? inputName + ': length validation requires width' : '';
-                        setError(name, error);
-                        if (error)
-                            break;
-                        error =
-                            !value || value.length !== parseInt(typeDetails[1], 10)
-                                ? getErrorText(inputName, 'length', typeDetails[1])
-                                : '';
-                        setError(name, error);
-                        break;
-                    case 'max':
-                        error = typeDetails.length < 2 ? inputName + ': max validation requires max value' : '';
-                        setError(name, error);
-                        if (error)
-                            break;
-                        error =
-                            !value || parseInt(value, 10) !== parseInt(typeDetails[1], 10)
-                                ? getErrorText(inputName, 'max', typeDetails[1])
-                                : '';
-                        setError(name, error);
-                        break;
-                    case 'max-file-size-mb':
-                        error = typeDetails.length < 2 ? inputName + ': max file size in MB validation requires max-file-size-mb value' : '';
-                        setError(name, error);
-                        if (error)
-                            break;
-                        error = checkFileSize(node, parseInt(typeDetails[1], 10));
-                        setError(name, error);
-                        break;
-                    default:
-                }
-                if (error) {
-                    setError(name, error);
-                    break;
+                    }
                 }
-            } //end
-        }
+            }
+        },
+        validators
     };
 };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./types.js";
-import type { MicroFormProps, MicroFormReturn } from './types.js';
-declare const microForm: (props?: MicroFormProps) => MicroFormReturn;
+import { microForm } from "./index.svelte.js";
+export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from "./form-validators.js";
 export default microForm;

package/dist/index.js

@@ -1,65 +1,3 @@
-export * from "./types.js";
-import { writable, derived, get } from 'svelte/store';
-import { formAction } from './form-action.js';
-const microForm = (props) => {
-    // form default values
-    const data = props?.data || {};
-    // form values
-    const values = writable(data);
-    // internal checks
-    const unfits = writable({});
-    // external form errors
-    const errors = writable({});
-    const isdirty = writable(false);
-    const isclean = derived(([errors, unfits]), ([$errors, $unfits]) => {
-        const errVals = Object.values($errors);
-        const unfitVals = Object.values($unfits);
-        return (errVals.length === 0 || errVals.reduce((comm, next) => comm && !next, true))
-            && (unfitVals.length === 0 || unfitVals.reduce((comm, next) => comm && !next, true));
-    });
-    const valid = derived(([isclean, isdirty]), ([$isclean, $isdirty]) => {
-        return $isclean && $isdirty;
-    });
-    const validationMap = {};
-    const { options = {
-        validateEvent: 'blur'
-    } } = props || {};
-    const form = formAction(values, errors, unfits, isdirty, options, validationMap);
-    const handleSubmit = (e, handler) => {
-        e.preventDefault();
-        if (!get(valid))
-            return;
-        handler({ ...get(values) });
-    };
-    const onsubmit = (handler) => {
-        const onSubmit = async (e) => {
-            handleSubmit(e, handler);
-        };
-        return onSubmit;
-    };
-    const submit = (formNode, handler) => {
-        formNode.addEventListener('submit', (e) => {
-            handleSubmit(e, handler);
-        });
-    };
-    const reset = () => {
-        errors.set({});
-        unfits.set({});
-        values.set({ ...data });
-        for (const [name, { nodeRef, html }] of Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef)) {
-            if (nodeRef) {
-                nodeRef[html ? "innerHTML" : 'textContent'] = data[name] || '';
-            }
-        }
-    };
-    return {
-        values,
-        errors,
-        valid,
-        form,
-        submit,
-        onsubmit,
-        reset,
-    };
-};
+import { microForm } from "./index.svelte.js";
+export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from "./form-validators.js";
 export default microForm;

package/dist/index.svelte.js

@@ -0,0 +1,79 @@
+import { writable, derived, get } from 'svelte/store';
+import { formAction } from './form-action.js';
+import { bindStateToStore } from "./utils.js";
+export const microForm = (props) => {
+    // form default values
+    const data = props?.data || {};
+    // form values
+    const _values = writable({ ...data });
+    // internal checks
+    const unfits = writable({});
+    // external form errors
+    const _errors = writable({});
+    const isdirty = writable(false);
+    const isclean = derived(([_errors, unfits]), ([$errors, $unfits]) => {
+        const errVals = Object.values($errors);
+        const unfitVals = Object.values($unfits);
+        return (errVals.length === 0 || errVals.reduce((comm, next) => comm && !next, true))
+            && (unfitVals.length === 0 || unfitVals.reduce((comm, next) => comm && !next, true));
+    });
+    const _valid = derived(([isclean, isdirty]), ([$isclean, $isdirty]) => {
+        return $isclean && $isdirty;
+    });
+    const validationMap = {};
+    const { options = {
+        validateEvent: 'blur',
+        validators: {}
+    } } = props || {};
+    const form = formAction(_values, _errors, unfits, isdirty, options, validationMap);
+    const handleSubmit = (e, handler) => {
+        e.preventDefault();
+        if (!get(_valid))
+            return;
+        handler({ ...get(_values) });
+    };
+    const onsubmit = (handler) => {
+        const onSubmit = async (e) => {
+            handleSubmit(e, handler);
+        };
+        return onSubmit;
+    };
+    const submit = (formNode, handler) => {
+        formNode.addEventListener('submit', (e) => {
+            handleSubmit(e, handler);
+        });
+    };
+    const reset = () => {
+        _errors.set({});
+        unfits.set({});
+        _values.set({ ...data });
+        isdirty.set(false);
+        for (const [name, { nodeRef, html }] of Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef)) {
+            if (nodeRef) {
+                if (nodeRef.isContentEditable) {
+                    nodeRef[html ? "innerHTML" : 'textContent'] = data[name] || '';
+                }
+                else {
+                    nodeRef["value"] = data[name] || '';
+                }
+            }
+        }
+    };
+    const values = $state({ ...data });
+    const errors = $state({});
+    const sanity = $state({ ok: get(_valid) });
+    bindStateToStore(values, _values);
+    bindStateToStore(errors, _errors);
+    _valid.subscribe((changes) => {
+        sanity.ok = changes;
+    });
+    return {
+        values,
+        errors,
+        sanity,
+        form,
+        submit,
+        onsubmit,
+        reset,
+    };
+};

package/dist/internal.d.ts

@@ -1,3 +1,4 @@
-export type Params = {
-    [key: string]: string | number | Array<any> | any;
+export type Params<T = any> = {
+    [key: string | number | symbol]: T;
 };
+export type Primitive = string | number | boolean | string[] | number[] | boolean[];

package/dist/types.d.ts

@@ -1,28 +1,40 @@
 /// <reference types="svelte" />
-import { type Writable, type Readable } from "svelte/store";
+import { type Writable } from "svelte/store";
 import type { Params } from "./internal.js";
-export type { Params };
-export type FieldTypes = "Standard" | "Popover" | "Checkable";
+export type Validator = `max:${number}` | `min:${number}` | `len:${number}` | `minlen:${number}` | `maxlen:${number}` | `file-size-mb:${number}` | `match:${string}` | 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip';
+export type ValidatorKey = 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip' | `max` | `min` | `len` | `minlen` | `maxlen` | `file-size-mb` | `match`;
+export type FieldProps = {
+    name: string;
+    value: string;
+    label: string;
+    node?: HTMLElement;
+    values: Params;
+    parts?: string[];
+};
+export type ValidatorType = (props: FieldProps) => string;
+export type ValidatorMap<T> = {
+    [VAL in ValidatorKey]: T;
+};
 export type InputTypes = 'text' | 'number' | 'color' | 'time' | 'date' | 'range' | 'email' | 'hidden' | 'password' | 'tel' | 'url';
 export type FieldType = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement;
 export type InputType = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement;
 export interface ValidateArgs {
     name: string;
     value: string;
-    validations: string;
+    validations?: Validator[];
     node?: HTMLElement;
 }
 export type FormReturn = {
     destroy: () => void;
 };
 export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur';
-export type FormValues = Writable<Params>;
-export type FormErrors = Writable<Params>;
+export type FormValues = Params;
+export type FormErrors = Params;
 export type Dirty = Writable<boolean>;
 export type ActionOptions = {
     validateEvent?: ValidateEvent;
     name?: string;
-    validations?: string;
+    validations?: Validator[];
     node?: HTMLElement;
     html?: boolean;
 };
@@ -32,18 +44,21 @@ export type FormSubmitEvent = SubmitEvent & {
 };
 export type FormSubmit = (_data: Params) => void;
 export type FormOptions = {
-    validateEvent: ValidateEvent;
+    validateEvent?: ValidateEvent;
+    validators?: Partial<ValidatorMap<ValidatorType>>;
 };
 export type MicroFormProps = {
     data?: Params;
     options?: FormOptions;
 };
-export type FormSanity = Readable<boolean>;
+export type FormSanity = {
+    ok: boolean;
+};
 export type MicroFormReturn = {
     values: FormValues;
     errors: FormErrors;
+    sanity: FormSanity;
     form: (node: HTMLElement, eventProps?: ActionOptions) => FormReturn;
-    valid: FormSanity;
     submit: (formNode: HTMLFormElement, handler: FormSubmit) => void;
     onsubmit: (handler: FormSubmit) => (e: Event) => Promise<void>;
     reset: () => void;

package/dist/utils.d.ts

@@ -1,3 +1,6 @@
+/// <reference types="svelte" />
+import type { Writable } from "svelte/store";
+import type { Params } from "./internal.js";
 type TEvent = {
     target: HTMLElement;
 };
@@ -6,4 +9,6 @@ export declare const getEditableContent: (e: TEvent, isHtml: boolean) => {
     value: string;
 };
 export declare const makeName: (str: string) => string;
+export declare const isValidFileSize: (node: HTMLInputElement | undefined, maxFileSizeInMB: number) => string;
+export declare const bindStateToStore: (state: Params, store: Writable<Params>) => void;
 export {};

package/dist/utils.js

@@ -30,3 +30,24 @@ export const makeName = function (str) {
     });
     return new_name;
 };
+export const isValidFileSize = (node, maxFileSizeInMB) => {
+    if (!node)
+        return '';
+    const { files } = node;
+    if (!files)
+        return `${node.name} is required`;
+    const max = maxFileSizeInMB * 1024 * 1024;
+    for (const file of files) {
+        if (file.size > max) {
+            return `File '${file.name}' is larger the ${maxFileSizeInMB}MB.`;
+        }
+    }
+    return '';
+};
+export const bindStateToStore = (state, store) => {
+    store.subscribe((changes) => {
+        for (const [k, v] of Object.entries(changes)) {
+            state[k] = v;
+        }
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@steveesamson/microform",
-	"version": "0.0.11",
+	"version": "1.0.0",
 	"scripts": {
 		"dev": "vite dev",
 		"postbuild": "touch ./docs/.nojekyll",
@@ -20,7 +20,7 @@
 	},
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
+			"types": "./dist/types.d.ts",
 			"svelte": "./dist/index.js"
 		}
 	},
@@ -32,7 +32,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0-next.135"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
@@ -51,14 +51,14 @@
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",
 		"shiki": "^0.14.7",
-		"svelte": "^4.2.7",
+		"svelte": "^5.0.0-next.135",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
 	"default": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"types": "./dist/types.d.ts",
 	"type": "module",
 	"keywords": [
 		"microform",