@steveesamson/microform 1.0.11 → 1.0.12

package/README.md

@@ -41,6 +41,11 @@ const { form, values, errors, submit, sanity } = uform({
         validateEvent:'blur',
         // Configure validators here
         validators:{}
+		// Configurable wait time in millis for form field
+		// to initialize; default is 200 millis - needed for more involving fields.
+		fieldWaitTimeInMilliSecond: 200
+		// Default false, set to true to know if changes are happening.
+		debug: false
     }
 });
 

package/dist/form-action.svelte.d.ts

@@ -1,3 +1,3 @@
-import type { FormOptions, FormAction, FormValues, FormErrors, FormSanity } from './types.js';
+import type { FormOptions, FormAction, FormValues, FormErrors } from './types.js';
 import type { Params } from './internal.svelte.js';
-export declare const formAction: (values: FormValues, errors: FormErrors, unfits: FormErrors, sanity: FormSanity, options: FormOptions, validationMap: Params) => FormAction;
+export declare const formAction: (values: FormValues, errors: FormErrors, unfits: FormErrors, onSanity: (sanity: boolean) => void, options: FormOptions, validationMap: Params) => FormAction;

package/dist/form-action.svelte.js

@@ -1,5 +1,5 @@
 import { useValidator } from './form-validators.js';
-import { getEditableContent } from './utils.js';
+import { debounce, getEditableContent } from './utils.js';
 const isField = (node) => {
     return (node instanceof HTMLSelectElement ||
         node instanceof HTMLInputElement ||
@@ -19,7 +19,7 @@ const checkFormFitness = (values, validationMap, validate) => {
         validate({ name, value: values[name], validations });
     }
 };
-export const formAction = (values, errors, unfits, sanity, options, validationMap) => {
+export const formAction = (values, errors, unfits, onSanity, options, validationMap) => {
     const { validators: customValidators } = options;
     const { validate, validators } = useValidator(errors, values);
     // override
@@ -29,7 +29,29 @@ export const formAction = (values, errors, unfits, sanity, options, validationMa
         }
     }
     const hasError = (next) => !!next;
+    let canWatch = false; // $state(false);
+    const evaluateSanity = () => {
+        const { validate: validateUnfit } = useValidator(unfits, values, validators);
+        checkFormFitness(values, validationMap, validateUnfit);
+        const withErrors = Object.values(errors).some(hasError);
+        const withUnfits = Object.values(unfits).some(hasError);
+        onSanity(!withErrors && !withUnfits && canWatch);
+    };
+    $effect(() => {
+        if (options.debug) {
+            console.log('values changed...');
+        }
+        Object.values(values);
+        evaluateSanity();
+    });
+    const start = debounce(() => {
+        canWatch = true;
+        if (options.debug) {
+            console.log('microform initialized...');
+        }
+    }, options.fieldWaitTimeInMilliSecond);
     return (node, eventProps) => {
+        start();
         const nodeName = isField(node) ? node.name : '';
         const { name: dsname = nodeName } = node.dataset || {};
         const { name = dsname, validations = [], validateEvent = (options.validateEvent = 'blur'), html = false } = eventProps || {};
@@ -73,13 +95,6 @@ export const formAction = (values, errors, unfits, sanity, options, validationMa
             }
             validate({ name, value: values[name], validations, node });
         };
-        $effect(() => {
-            const { validate: validateUnfit } = useValidator(unfits, values, validators);
-            checkFormFitness(values, validationMap, validateUnfit);
-            const withErrors = Object.values(errors).some(hasError);
-            const withUnfits = Object.values(unfits).some(hasError);
-            sanity.ok = !withErrors && !withUnfits;
-        });
         $effect(() => {
             node.addEventListener(validateEvent, updateNode);
             return () => {

package/dist/index.svelte.js

@@ -1,22 +1,26 @@
 import { formAction } from './form-action.svelte.js';
-import { formState } from './internal.svelte.js';
-import { resetObject } from './utils.js';
+import { formStore } from './internal.svelte.js';
 const microform = (props) => {
     // form default values
-    const data = props?.data || {};
-    // form state
-    const state = formState(data);
-    const validationMap = {};
-    const { options = {
+    // const data = props?.data || {};
+    const defaultOptions = {
         validateEvent: 'blur',
-        validators: {}
-    } } = props || {};
-    const form = formAction(state.values, state.errors, state.unfits, state.sanity, options, validationMap);
+        validators: {},
+        fieldWaitTimeInMilliSecond: 200,
+        debug: false
+    };
+    const { options: userOptions = {}, data = {} } = props || {};
+    const options = { ...defaultOptions, ...userOptions };
+    // form state
+    const { values, errors, unfits, reset, sanity, validationMap } = formStore(data);
+    const form = formAction(values, errors, unfits, (_sanity) => {
+        sanity.ok = _sanity;
+    }, options, validationMap);
     const handleSubmit = (e, handler) => {
         e.preventDefault();
-        if (!state.sanity.ok)
+        if (!sanity.ok)
             return;
-        handler({ ...state.values });
+        handler({ ...values });
     };
     const onsubmit = (handler) => {
         return (e) => {
@@ -32,26 +36,10 @@ const microform = (props) => {
             return () => formNode.removeEventListener('submit', localHandler);
         });
     };
-    const reset = () => {
-        resetObject(state.values, data);
-        resetObject(state.errors);
-        resetObject(state.unfits);
-        state.sanity.ok = 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] || '';
-                }
-            }
-        }
-    };
     return {
-        values: state.values,
-        errors: state.errors,
-        sanity: state.sanity,
+        values,
+        errors,
+        sanity,
         form,
         submit,
         onsubmit,

package/dist/internal.svelte.d.ts

@@ -9,4 +9,8 @@ export type FormState = {
     sanity: FormSanity;
     unfits: FormErrors;
 };
-export declare const formState: (data: Params) => FormState;
+export type FormStore = FormState & {
+    validationMap: Params;
+    reset: () => void;
+};
+export declare const formStore: (data: Params) => FormStore;

package/dist/internal.svelte.js

@@ -1,15 +1,43 @@
-export const formState = (data) => {
-    // form values
-    const values = $state({ ...data });
-    // external form errors
-    const errors = $state({});
-    const sanity = $state({ ok: false });
-    // internal checks
-    const unfits = $state({});
+import { resetObject } from "./utils.js";
+export const formStore = (data) => {
+    const validationMap = {};
+    // form state
+    const state = $state({
+        values: { ...data },
+        errors: {},
+        unfits: {},
+        sanity: { ok: false }
+    });
     return {
-        values,
-        errors,
-        sanity,
-        unfits,
+        validationMap,
+        get values() {
+            return state.values;
+        },
+        get errors() {
+            return state.errors;
+        },
+        get unfits() {
+            return state.unfits;
+        },
+        get sanity() {
+            return state.sanity;
+        },
+        reset() {
+            resetObject(state.values, data);
+            resetObject(state.errors);
+            resetObject(state.unfits);
+            state.sanity.ok = false;
+            const nodeEntries = Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef);
+            for (const [name, { nodeRef, html }] of nodeEntries) {
+                if (nodeRef) {
+                    if (nodeRef.isContentEditable) {
+                        nodeRef[html ? 'innerHTML' : 'textContent'] = data[name] || '';
+                    }
+                    else {
+                        nodeRef['value'] = data[name] || '';
+                    }
+                }
+            }
+        }
     };
 };

package/dist/types.d.ts

@@ -44,6 +44,8 @@ export type FormSubmit = (_data: Params) => (void | Promise<void>);
 export type FormOptions = {
     validateEvent?: ValidateEvent;
     validators?: Partial<ValidatorMap<ValidatorType>>;
+    fieldWaitTimeInMilliSecond?: number;
+    debug?: boolean;
 };
 export type MicroFormProps = {
     data?: Params;

package/dist/utils.d.ts

@@ -10,4 +10,5 @@ export declare const getEditableContent: (e: TEvent, isHtml: boolean) => {
 export declare const makeName: (str: string) => string;
 export declare const isValidFileSize: (node: HTMLInputElement | undefined, maxFileSizeInMB: number) => string;
 export declare const resetObject: (target: FormValues, data?: Params | undefined) => void;
+export declare const debounce: (func: (...args?: any) => any, delay?: number) => (...par?: any) => void;
 export {};

package/dist/utils.js

@@ -61,3 +61,11 @@ export const resetObject = (target, data = undefined) => {
         }
     }
 };
+export const debounce = (func, delay = 1000) => {
+    let timeoutId;
+    return function (...par) {
+        const context = this;
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func.apply(context, par), delay);
+    };
+};

package/package.json

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