@steveesamson/microform 1.0.7 → 1.0.9

package/README.md

@@ -31,8 +31,7 @@ import uform  from "@steveesamson/microform";
 let defaultData:any = $props();
 
 // Instatiate microform
-// const { form, values, errors, submit, sanity } = uform({
-const { form, values, errors, submit, sanity, setValue, setError } = 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.
@@ -64,8 +63,6 @@ On the instantiation of `microform`, we have access to:
 - `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.
-- `setValue`, a function to mutate state in order to avoid `ownership_invalid_mutation` errors, especially, when values is fed as props to other components that intend to mutate `values` states.
-- `setError`, is a function introduced for the same reason `setValue` was added; it give privileges to components authored on `microform` that may mutate the `errors` state.
 
 ### In the view Html
 

package/dist/form-action.d.ts

@@ -1,4 +1,4 @@
-import { type Writable } from "svelte/store";
-import type { FormOptions, FormAction } from "./types.js";
-import type { Params } from "./internal.js";
+import { type Writable } from 'svelte/store';
+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

@@ -1,13 +1,13 @@
-import { get } from "svelte/store";
-import { useValidator } from "./form-validators.js";
-import { getEditableContent } from "./utils.js";
+import { get } from 'svelte/store';
+import { useValidator } from './form-validators.js';
+import { getEditableContent } from './utils.js';
 const isField = (node) => {
-    return node instanceof HTMLSelectElement ||
+    return (node instanceof HTMLSelectElement ||
         node instanceof HTMLInputElement ||
-        node instanceof HTMLTextAreaElement;
+        node instanceof HTMLTextAreaElement);
 };
 const isExcluded = (node) => {
-    return node instanceof HTMLInputElement && ['radio', 'checkbox'].includes(node.type.toLowerCase());
+    return (node instanceof HTMLInputElement && ['radio', 'checkbox'].includes(node.type.toLowerCase()));
 };
 const isCheckbox = (node) => {
     return node instanceof HTMLInputElement && ['checkbox'].includes(node.type.toLowerCase());
@@ -18,7 +18,7 @@ const isRadio = (node) => {
 const checkFormFitness = (values, validationMap, validate) => {
     const _values = get(values);
     for (const [name, { validations }] of Object.entries(validationMap)) {
-        validate({ name, value: _values[name], validations, });
+        validate({ name, value: _values[name], validations });
     }
 };
 export const formAction = (values, errors, unfits, isdirty, options, validationMap) => {
@@ -33,7 +33,7 @@ export const formAction = (values, errors, unfits, isdirty, options, validationM
     return (node, eventProps) => {
         const nodeName = isField(node) ? node.name : '';
         const { name: dsname = nodeName } = node.dataset || {};
-        const { name = dsname, validations = [], validateEvent = options.validateEvent = 'blur', html = false } = eventProps || {};
+        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;
@@ -70,7 +70,7 @@ export const formAction = (values, errors, unfits, isdirty, options, validationM
             else if (isCheckbox(node)) {
                 const { checked, value: val } = node;
                 const { [name]: fieldValue } = get(values);
-                let current = fieldValue;
+                let current = fieldValue.split(',');
                 if (checked) {
                     current.push(val);
                 }
@@ -78,7 +78,7 @@ export const formAction = (values, errors, unfits, isdirty, options, validationM
                     current = current.filter((next) => next !== val);
                 }
                 values.update((data) => {
-                    return { ...data, [name]: [...new Set(current)] };
+                    return { ...data, [name]: [...new Set(current)].join(',') };
                 });
             }
             else if (isRadio(node)) {

package/dist/form-validators.d.ts

@@ -1,6 +1,6 @@
-import { type Writable } from "svelte/store";
-import type { ValidateArgs, ValidatorType, ValidatorMap } from "./types.js";
-import type { Params } from "./internal.js";
+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";

package/dist/form-validators.js

@@ -1,5 +1,5 @@
-import { get } from "svelte/store";
-import { makeName, isValidFileSize } from "./utils.js";
+import { get } from 'svelte/store';
+import { makeName, isValidFileSize } from './utils.js';
 const regexes = {
     number: /^[-+]?[0-9]+(\.[0-9]+)?$/g,
     alpha: /^[A-Z\s]+$/gi,
@@ -7,22 +7,22 @@ const regexes = {
     integer: /^[-+]?\d+$/g,
     email: /^[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}$/gi,
     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,
+    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
 };
-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_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 = {
@@ -30,28 +30,34 @@ const getDefaultValidators = () => {
             if (!value || (Array.isArray(value) && !value.length)) {
                 return `${label} is mandatory.`;
             }
-            return "";
+            return '';
         },
         [IS_EMAIL]: ({ value, label }) => {
-            return (!!value && !value.match(regexes['email'])) ? `${label} should be a valid email.` : '';
+            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.` : "";
+            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.` : "";
+            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.` : "";
+            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.` : "";
+            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.` : "";
+            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.` : "";
+            return !!value && !value.match(regexes['alphanum'])
+                ? `${label} should be a string of alphanumerics starting with alphabets.`
+                : '';
         },
         [IS_MIN_LEN]: ({ value, label, parts }) => {
             if (!!value) {
@@ -59,9 +65,11 @@ const getDefaultValidators = () => {
                     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 value.length >= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must be at least ${extra} characters long.`;
             }
-            return "";
+            return '';
         },
         [IS_MAX_LEN]: ({ value, label, parts }) => {
             if (!!value) {
@@ -69,9 +77,11 @@ const getDefaultValidators = () => {
                     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 value.length <= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must be at most ${extra} characters long.`;
             }
-            return "";
+            return '';
         },
         [IS_LEN]: ({ value, label, parts }) => {
             if (!!value) {
@@ -79,9 +89,11 @@ const getDefaultValidators = () => {
                     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 value.length === parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must exactly be ${extra} characters long.`;
             }
-            return "";
+            return '';
         },
         [IS_MAX]: ({ value, label, parts }) => {
             if (!!value) {
@@ -89,9 +101,11 @@ const getDefaultValidators = () => {
                     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 parseInt(value, 10) <= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must not be greater than ${extra}.`;
             }
-            return "";
+            return '';
         },
         [IS_MIN]: ({ value, label, parts }) => {
             if (!!value) {
@@ -99,9 +113,11 @@ const getDefaultValidators = () => {
                     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 parseInt(value, 10) >= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must not be less than ${extra}.`;
             }
-            return "";
+            return '';
         },
         [IT_MATCHES]: ({ values, value, label, parts }) => {
             if (value) {
@@ -110,20 +126,19 @@ const getDefaultValidators = () => {
                 }
                 const partyName = parts[1].trim();
                 const partyValue = values[partyName];
-                return value === partyValue ? "" : `${label} does not match ${makeName(partyName)}.`;
+                return value === partyValue ? '' : `${label} does not match ${makeName(partyName)}.`;
             }
-            return "";
+            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;
@@ -137,13 +152,22 @@ export const useValidator = (errors, values, validators = getDefaultValidators()
     return {
         validate: async ({ name, value, validations = [], node = undefined }) => {
             if (validations.length) {
-                const _validations = validations.includes('required') ? ['required', ...validations.filter((val) => val !== 'required')] : [...validations];
+                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 });
+                    const error = validator({
+                        name,
+                        label: makeName(name),
+                        value,
+                        values: get(values),
+                        node,
+                        parts
+                    });
                     setError(name, error ? error : '');
                     if (error) {
                         break;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./types.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";
-import microform from "./index.svelte.js";
+export * from './types.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';
+import microform from './index.svelte.js';
 export default microform;

package/dist/index.js

@@ -1,4 +1,4 @@
-export * from "./types.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";
-import microform from "./index.svelte.js";
+export * from './types.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';
+import microform from './index.svelte.js';
 export default microform;

package/dist/index.svelte.js

@@ -1,6 +1,6 @@
 import { writable, derived, get } from 'svelte/store';
 import { formAction } from './form-action.js';
-import { bindStateToStore } from "./utils.js";
+import { bindStateToStore } from './utils.js';
 const microform = (props) => {
     // form default values
     const data = props?.data || {};
@@ -11,13 +11,15 @@ const microform = (props) => {
     // external form errors
     const _errors = writable({});
     const isdirty = writable(false);
-    const isclean = derived(([_errors, unfits]), ([$errors, $unfits]) => {
+    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));
+        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]) => {
+    const _valid = derived([isclean, isdirty], ([$isclean, $isdirty]) => {
         return $isclean && $isdirty;
     });
     const validationMap = {};
@@ -51,10 +53,10 @@ const microform = (props) => {
         for (const [name, { nodeRef, html }] of Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef)) {
             if (nodeRef) {
                 if (nodeRef.isContentEditable) {
-                    nodeRef[html ? "innerHTML" : 'textContent'] = data[name] || '';
+                    nodeRef[html ? 'innerHTML' : 'textContent'] = data[name] || '';
                 }
                 else {
-                    nodeRef["value"] = data[name] || '';
+                    nodeRef['value'] = data[name] || '';
                 }
             }
         }
@@ -62,12 +64,6 @@ const microform = (props) => {
     const values = $state({ ...data });
     const errors = $state({});
     const sanity = $state({ ok: get(_valid) });
-    const setValue = (field, value) => {
-        values[field] = value;
-    };
-    const setError = (field, value) => {
-        errors[field] = value;
-    };
     bindStateToStore(values, _values);
     bindStateToStore(errors, _errors);
     _valid.subscribe((changes) => {
@@ -80,9 +76,7 @@ const microform = (props) => {
         form,
         submit,
         onsubmit,
-        reset,
-        setError,
-        setValue
+        reset
     };
 };
 export default microform;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import { type Writable } from "svelte/store";
-import type { Params } from "./internal.js";
+import { type Writable } from 'svelte/store';
+import type { Params } from './internal.js';
 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 = {
@@ -26,7 +26,7 @@ export interface ValidateArgs {
 export type FormReturn = {
     destroy: () => void;
 };
-export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur';
+export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur' | 'keydown';
 export type FormValues = Params;
 export type FormErrors = Params;
 export type Dirty = Writable<boolean>;
@@ -61,7 +61,5 @@ export type MicroFormReturn = {
     submit: (formNode: HTMLFormElement, handler: FormSubmit) => void;
     onsubmit: (handler: FormSubmit) => (e: Event) => Promise<void>;
     reset: () => void;
-    setValue: (key: string, value: unknown) => void;
-    setError: (key: string, value: unknown) => void;
 };
 export type Microform = (props?: MicroFormProps) => MicroFormReturn;

package/dist/types.js

@@ -1 +1 @@
-import {} from "svelte/store";
+import {} from 'svelte/store';

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import type { Writable } from "svelte/store";
-import type { Params } from "./internal.js";
+import type { Writable } from 'svelte/store';
+import type { Params } from './internal.js';
 type TEvent = {
     target: HTMLElement;
 };

package/dist/utils.js

@@ -1,21 +1,20 @@
 export const getEditableContent = (e, isHtml) => {
     const el = e.target;
-    const text = el.textContent?.trim() || "";
+    const text = el.textContent?.trim() || '';
     if (!isHtml) {
         return { text, value: text };
     }
+    if (!text) {
+        return { value: '', text };
+    }
     let htm = el.innerHTML;
     htm = htm.trim();
-    htm = htm.replace(/<br>/g, "");
-    htm = htm.replace(/<div><\/div>/g, "");
-    htm = htm.replace(/<p><\/p>/g, "");
-    htm = htm.replace(/<div>/g, "<p>");
-    htm = htm.replace(/<\/div>/g, "</p>");
-    htm = htm.trim()
-        ? htm.indexOf("<p>") === -1
-            ? `<p>${htm}</p>`
-            : htm
-        : htm;
+    htm = htm.replace(/<br>/g, '');
+    htm = htm.replace(/<div><\/div>/g, '');
+    htm = htm.replace(/<p><\/p>/g, '');
+    htm = htm.replace(/<div>/g, '<p>');
+    htm = htm.replace(/<\/div>/g, '</p>');
+    htm = htm.trim() ? (htm.indexOf('<p>') === -1 ? `<p>${htm}</p>` : htm) : htm;
     return { value: htm.trim(), text };
 };
 export const makeName = function (str) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@steveesamson/microform",
-	"version": "1.0.7",
+	"version": "1.0.9",
 	"scripts": {
 		"dev": "vite dev",
 		"postbuild": "touch ./docs/.nojekyll",