@steveesamson/microform 1.0.10 → 1.0.11

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

@@ -1,3 +1,3 @@
-import type { FormOptions, FormAction, FormValues, FormErrors } from './types.js';
+import type { FormOptions, FormAction, FormValues, FormErrors, FormSanity } 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, sanity: FormSanity, options: FormOptions, validationMap: Params) => FormAction;

package/dist/form-action.svelte.js

@@ -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, sanity, options, validationMap) => {
     const { validators: customValidators } = options;
     const { validate, validators } = useValidator(errors, values);
     // override
@@ -45,11 +45,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,14 +71,15 @@ export const formAction = (values, errors, unfits, reportDirty, options, validat
                 const { value: fvalue } = node;
                 values[name] = fvalue;
             }
+            validate({ name, value: values[name], validations, node });
+        };
+        $effect(() => {
             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);
-        };
+            sanity.ok = !withErrors && !withUnfits;
+        });
         $effect(() => {
             node.addEventListener(validateEvent, updateNode);
             return () => {

package/dist/index.svelte.js

@@ -1,5 +1,6 @@
 import { formAction } from './form-action.svelte.js';
 import { formState } from './internal.svelte.js';
+import { resetObject } from './utils.js';
 const microform = (props) => {
     // form default values
     const data = props?.data || {};
@@ -10,10 +11,7 @@ const microform = (props) => {
         validateEvent: 'blur',
         validators: {}
     } } = props || {};
-    const updateSanity = (isOk) => {
-        state.sanity.ok = isOk;
-    };
-    const form = formAction(state.values, state.errors, state.unfits, updateSanity, options, validationMap);
+    const form = formAction(state.values, state.errors, state.unfits, state.sanity, options, validationMap);
     const handleSubmit = (e, handler) => {
         e.preventDefault();
         if (!state.sanity.ok)
@@ -21,28 +19,23 @@ const microform = (props) => {
         handler({ ...state.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 = {};
+        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) {

package/dist/types.d.ts

@@ -40,7 +40,7 @@ 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>>;
@@ -58,7 +58,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,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 {};

package/dist/utils.js

@@ -43,10 +43,21 @@ 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] = '';
+        }
+    }
+};

package/package.json

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