@steveesamson/microform 1.0.10 → 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 } from './types.js';
 import type { Params } from './internal.svelte.js';
-export declare const formAction: (values: FormValues, errors: FormErrors, unfits: FormErrors, reportDirty: (clean: boolean) => void, 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, reportDirty, 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, reportDirty, options, validat
         }
     }
     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 || {};
@@ -45,11 +67,7 @@ export const formAction = (values, errors, unfits, reportDirty, options, validat
             node.innerHTML = defValue;
         }
         values[name] = defValue;
-        let eventBound = $state(false);
         const updateNode = (e) => {
-            if (!eventBound) {
-                eventBound = true;
-            }
             if (isField(node) && !isExcluded(node)) {
                 const value = e.target.value || '';
                 values[name] = value;
@@ -75,13 +93,7 @@ export const formAction = (values, errors, unfits, reportDirty, options, validat
                 const { value: fvalue } = node;
                 values[name] = fvalue;
             }
-            const { validate: validateUnfit } = useValidator(unfits, values, validators);
-            checkFormFitness(values, validationMap, validateUnfit);
             validate({ name, value: values[name], validations, node });
-            const withErrors = Object.values(errors).some(hasError);
-            const withUnfits = Object.values(unfits).some(hasError);
-            const clean = !withErrors && !withUnfits;
-            reportDirty(clean);
         };
         $effect(() => {
             node.addEventListener(validateEvent, updateNode);

package/dist/index.svelte.js

@@ -1,64 +1,45 @@
 import { formAction } from './form-action.svelte.js';
-import { formState } from './internal.svelte.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 updateSanity = (isOk) => {
-        state.sanity.ok = isOk;
+        validators: {},
+        fieldWaitTimeInMilliSecond: 200,
+        debug: false
     };
-    const form = formAction(state.values, state.errors, state.unfits, updateSanity, options, validationMap);
+    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) => {
-        const onSubmit = async (e) => {
+        return (e) => {
             handleSubmit(e, handler);
         };
-        return onSubmit;
     };
     const submit = (formNode, handler) => {
-        formNode.addEventListener('submit', (e) => {
-            handleSubmit(e, handler);
+        $effect(() => {
+            const localHandler = (e) => {
+                handleSubmit(e, handler);
+            };
+            formNode.addEventListener('submit', localHandler);
+            return () => formNode.removeEventListener('submit', localHandler);
         });
     };
-    const reset = () => {
-        const defaultKeys = Object.keys({ ...data });
-        for (const [key,] of Object.entries(state.values)) {
-            if (defaultKeys.includes(key)) {
-                state.values[key] = data[key];
-            }
-            else {
-                delete state.values[key];
-            }
-        }
-        state.errors = {};
-        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

@@ -40,10 +40,12 @@ export type FormAction = (node: HTMLElement, eventProps?: ActionOptions) => void
 export type FormSubmitEvent = SubmitEvent & {
     currentTarget: EventTarget & HTMLFormElement;
 };
-export type FormSubmit = (_data: Params) => void;
+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;
@@ -58,7 +60,7 @@ export type MicroFormReturn = {
     sanity: FormSanity;
     form: (node: HTMLElement, eventProps?: ActionOptions) => void;
     submit: (formNode: HTMLFormElement, handler: FormSubmit) => void;
-    onsubmit: (handler: FormSubmit) => (e: Event) => Promise<void>;
+    onsubmit: (handler: FormSubmit) => (e: Event) => void;
     reset: () => void;
 };
 export type Microform = (props?: MicroFormProps) => MicroFormReturn;

package/dist/utils.d.ts

@@ -1,3 +1,5 @@
+import type { Params } from "./internal.svelte.js";
+import type { FormValues } from "./types.js";
 type TEvent = {
     target: HTMLElement;
 };
@@ -7,4 +9,6 @@ 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

@@ -43,10 +43,29 @@ export const isValidFileSize = (node, maxFileSizeInMB) => {
     }
     return '';
 };
-// export const bindStateToStore = (state: Params, store: Writable<Params>): void => {
-// 	store.subscribe((changes: Params) => {
-// 		for (const [k, v] of Object.entries(changes)) {
-// 			state[k] = v;
-// 		}
-// 	});
-// };
+export const resetObject = (target, data = undefined) => {
+    if (data) {
+        const defaultKeys = Object.keys({ ...data });
+        for (const [key,] of Object.entries(target)) {
+            if (defaultKeys.includes(key)) {
+                target[key] = data[key];
+            }
+            else {
+                delete target[key];
+            }
+        }
+    }
+    else {
+        for (const [key,] of Object.entries(target)) {
+            target[key] = '';
+        }
+    }
+};
+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.10",
+	"version": "1.0.12",
 	"scripts": {
 		"dev": "vite dev",
 		"postbuild": "touch ./docs/.nojekyll",