solid-hook-form 2.2.0 → 2.4.0

package/dist/main.d.ts

@@ -29,6 +29,11 @@ type FieldError = {
     message?: Message;
 };
 type FieldErrors<F extends FormValues = FormValues> = Partial<Record<Path<F>, FieldError>>;
+type SetErrorOptions = {
+    shouldFocus?: boolean;
+};
+type SetError<F extends FormValues = FormValues> = (name: Path<F>, error: FieldError, options?: SetErrorOptions) => void;
+type ClearErrors<F extends FormValues = FormValues> = (name?: Path<F> | Path<F>[]) => void;
 
 type Ref = HTMLElement | null;
 type RegisterReturn<F extends FormValues> = {
@@ -72,6 +77,8 @@ type ResetOptions = {
     keepValues?: boolean;
     keepTouched?: boolean;
     keepDirty?: boolean;
+    keepIsSubmitted?: boolean;
+    keepSubmitCount?: boolean;
 };
 type Reset<F extends FormValues> = (values?: Partial<F>, options?: ResetOptions) => void;
 
@@ -108,6 +115,8 @@ type CreateFormReturn<F extends FormValues = FormValues> = {
         isDirty: Accessor<boolean>;
         touchedFields: Accessor<TouchedFields<F>>;
         dirtyFields: Accessor<DirtyFields<F>>;
+        isSubmitted: Accessor<boolean>;
+        submitCount: Accessor<number>;
     };
     values: Accessor<F>;
     errors: FieldErrors<F>;
@@ -116,6 +125,8 @@ type CreateFormReturn<F extends FormValues = FormValues> = {
     setValue: SetValue<F>;
     handleSubmit: HandleSubmit<F>;
     reset: Reset<F>;
+    setError: SetError<F>;
+    clearErrors: ClearErrors<F>;
     trigger: Trigger<F>;
 };
 type CreateForm = <F extends FormValues>(arg: CreateFormArg<F>) => CreateFormReturn<F>;

package/dist/main.js

@@ -1,5 +1,5 @@
 import { createContext, createSignal, createMemo, useContext } from 'solid-js';
-import { createStore, reconcile, produce } from 'solid-js/store';
+import { createStore, produce, reconcile } from 'solid-js/store';
 import { memo, createComponent } from 'solid-js/web';
 
 // src/create_form.ts
@@ -88,7 +88,7 @@ var createErrors = () => {
       })
     );
   };
-  const removeError = (name) => {
+  const clearError = (name) => {
     setErrors(
       produce((prevState) => {
         delete prevState[name];
@@ -101,12 +101,30 @@ var createErrors = () => {
     }
     setErrors(reconcile({}));
   };
+  const clearErrors = (name) => {
+    if (!name) {
+      resetErrors();
+      return;
+    }
+    if (typeof name === "string") {
+      clearError(name);
+      return;
+    }
+    setErrors(
+      produce((prevState) => {
+        name.forEach((name2) => {
+          delete prevState[name2];
+        });
+      })
+    );
+  };
   return {
     errors,
     appendError,
-    removeError,
+    clearError,
     resetErrors,
-    getError
+    getError,
+    clearErrors
   };
 };
 
@@ -119,10 +137,14 @@ var createFields = () => {
   const setField = (name, element) => {
     fields[name] = element;
   };
+  const focusField = (name) => {
+    getField(name)?.focus();
+  };
   return {
     fields,
     getField,
-    setField
+    setField,
+    focusField
   };
 };
 
@@ -146,6 +168,23 @@ var createRules = () => {
   };
   return { rules, addRule, getRule };
 };
+var createSubmit = () => {
+  const [isSubmitted, setIsSubmitted] = createSignal(false);
+  const [submitCount, setSubmitCount] = createSignal(0);
+  const logSubmit = () => {
+    setIsSubmitted(true);
+    setSubmitCount((prev) => prev + 1);
+  };
+  const resetSubmit = (keepIsSubmitted, keepSubmitCount) => {
+    if (!keepIsSubmitted) {
+      setIsSubmitted(false);
+    }
+    if (!keepSubmitCount) {
+      setSubmitCount(0);
+    }
+  };
+  return { isSubmitted, submitCount, logSubmit, resetSubmit };
+};
 var createTouchedFields = () => {
   const [touchedFields, setTouchedFields] = createSignal({});
   const addTouched = (name) => {
@@ -277,24 +316,25 @@ var getResolverFields = (fields) => {
 // src/create_form.ts
 var createForm = (arg) => {
   const { defaultValues, mode = "onChange", resolver } = arg;
-  const { fields, getField, setField } = createFields();
+  const { fields, getField, setField, focusField } = createFields();
   const { rules, addRule, getRule } = createRules();
   const [values, setValues] = createSignal(structuredClone(defaultValues));
-  const { errors, appendError, removeError, resetErrors, getError } = createErrors();
+  const { errors, appendError, clearError, resetErrors, clearErrors, getError } = createErrors();
   const { touchedFields, addTouched, resetTouched } = createTouchedFields();
   const { dirtyFields, isDirty, checkDirty, resetDirty } = createDirtyFields(defaultValues);
+  const { isSubmitted, submitCount, logSubmit, resetSubmit } = createSubmit();
   const isValid = createMemo(() => {
     return !Object.keys(errors).length;
   });
-  const setFieldError = (name, error) => {
+  const setError = (name, error, options) => {
     const field = getField(name);
     if (field) {
       error.ref = field;
     }
     appendError(name, error);
-  };
-  const clearFieldError = (name) => {
-    removeError(name);
+    if (options?.shouldFocus) {
+      focusField(name);
+    }
   };
   const runSchema = async (names) => {
     if (!resolver) {
@@ -307,9 +347,9 @@ var createForm = (arg) => {
     for (const name of names) {
       const error = get(result.errors, name);
       if (error) {
-        setFieldError(name, error);
+        setError(name, error);
       } else {
-        clearFieldError(name);
+        clearError(name);
       }
     }
   };
@@ -321,9 +361,9 @@ var createForm = (arg) => {
     const rule = getRule(name);
     const error = validate(values(), name, rule);
     if (error) {
-      setFieldError(name, error);
+      setError(name, error);
     } else {
-      clearFieldError(name);
+      clearError(name);
     }
   };
   const validateAllFields = async () => {
@@ -418,6 +458,7 @@ var createForm = (arg) => {
   const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
       event.preventDefault();
+      logSubmit();
       await validateAllFields();
       if (isValid()) {
         onSubmit(getValues());
@@ -428,6 +469,7 @@ var createForm = (arg) => {
     };
   };
   const reset = (values2, options = {}) => {
+    resetSubmit(options.keepIsSubmitted, options.keepSubmitCount);
     resetErrors(options.keepErrors);
     resetTouched(options.keepTouched);
     resetDirty(options.keepDirty);
@@ -458,7 +500,9 @@ var createForm = (arg) => {
       isValid,
       isDirty,
       touchedFields,
-      dirtyFields
+      dirtyFields,
+      isSubmitted,
+      submitCount
     },
     values,
     errors,
@@ -467,6 +511,8 @@ var createForm = (arg) => {
     setValue,
     handleSubmit,
     reset,
+    setError,
+    clearErrors,
     trigger
   };
 };

package/dist/main.jsx

@@ -1,5 +1,5 @@
 // src/create_form.ts
-import { createMemo as createMemo2, createSignal as createSignal3 } from "solid-js";
+import { createMemo as createMemo2, createSignal as createSignal4 } from "solid-js";
 
 // src/logic/create_dirty_fields.ts
 import { createMemo, createSignal } from "solid-js";
@@ -91,7 +91,7 @@ var createErrors = () => {
       })
     );
   };
-  const removeError = (name) => {
+  const clearError = (name) => {
     setErrors(
       produce((prevState) => {
         delete prevState[name];
@@ -104,12 +104,30 @@ var createErrors = () => {
     }
     setErrors(reconcile({}));
   };
+  const clearErrors = (name) => {
+    if (!name) {
+      resetErrors();
+      return;
+    }
+    if (typeof name === "string") {
+      clearError(name);
+      return;
+    }
+    setErrors(
+      produce((prevState) => {
+        name.forEach((name2) => {
+          delete prevState[name2];
+        });
+      })
+    );
+  };
   return {
     errors,
     appendError,
-    removeError,
+    clearError,
     resetErrors,
-    getError
+    getError,
+    clearErrors
   };
 };
 
@@ -122,10 +140,14 @@ var createFields = () => {
   const setField = (name, element) => {
     fields[name] = element;
   };
+  const focusField = (name) => {
+    getField(name)?.focus();
+  };
   return {
     fields,
     getField,
-    setField
+    setField,
+    focusField
   };
 };
 
@@ -150,10 +172,30 @@ var createRules = () => {
   return { rules, addRule, getRule };
 };
 
-// src/logic/create_touched_fields.ts
+// src/logic/create_submit.ts
 import { createSignal as createSignal2 } from "solid-js";
+var createSubmit = () => {
+  const [isSubmitted, setIsSubmitted] = createSignal2(false);
+  const [submitCount, setSubmitCount] = createSignal2(0);
+  const logSubmit = () => {
+    setIsSubmitted(true);
+    setSubmitCount((prev) => prev + 1);
+  };
+  const resetSubmit = (keepIsSubmitted, keepSubmitCount) => {
+    if (!keepIsSubmitted) {
+      setIsSubmitted(false);
+    }
+    if (!keepSubmitCount) {
+      setSubmitCount(0);
+    }
+  };
+  return { isSubmitted, submitCount, logSubmit, resetSubmit };
+};
+
+// src/logic/create_touched_fields.ts
+import { createSignal as createSignal3 } from "solid-js";
 var createTouchedFields = () => {
-  const [touchedFields, setTouchedFields] = createSignal2({});
+  const [touchedFields, setTouchedFields] = createSignal3({});
   const addTouched = (name) => {
     setTouchedFields((prev) => {
       const newState = { ...prev };
@@ -283,24 +325,25 @@ var getResolverFields = (fields) => {
 // src/create_form.ts
 var createForm = (arg) => {
   const { defaultValues, mode = "onChange", resolver } = arg;
-  const { fields, getField, setField } = createFields();
+  const { fields, getField, setField, focusField } = createFields();
   const { rules, addRule, getRule } = createRules();
-  const [values, setValues] = createSignal3(structuredClone(defaultValues));
-  const { errors, appendError, removeError, resetErrors, getError } = createErrors();
+  const [values, setValues] = createSignal4(structuredClone(defaultValues));
+  const { errors, appendError, clearError, resetErrors, clearErrors, getError } = createErrors();
   const { touchedFields, addTouched, resetTouched } = createTouchedFields();
   const { dirtyFields, isDirty, checkDirty, resetDirty } = createDirtyFields(defaultValues);
+  const { isSubmitted, submitCount, logSubmit, resetSubmit } = createSubmit();
   const isValid = createMemo2(() => {
     return !Object.keys(errors).length;
   });
-  const setFieldError = (name, error) => {
+  const setError = (name, error, options) => {
     const field = getField(name);
     if (field) {
       error.ref = field;
     }
     appendError(name, error);
-  };
-  const clearFieldError = (name) => {
-    removeError(name);
+    if (options?.shouldFocus) {
+      focusField(name);
+    }
   };
   const runSchema = async (names) => {
     if (!resolver) {
@@ -313,9 +356,9 @@ var createForm = (arg) => {
     for (const name of names) {
       const error = get(result.errors, name);
       if (error) {
-        setFieldError(name, error);
+        setError(name, error);
       } else {
-        clearFieldError(name);
+        clearError(name);
       }
     }
   };
@@ -327,9 +370,9 @@ var createForm = (arg) => {
     const rule = getRule(name);
     const error = validate(values(), name, rule);
     if (error) {
-      setFieldError(name, error);
+      setError(name, error);
     } else {
-      clearFieldError(name);
+      clearError(name);
     }
   };
   const validateAllFields = async () => {
@@ -424,6 +467,7 @@ var createForm = (arg) => {
   const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
       event.preventDefault();
+      logSubmit();
       await validateAllFields();
       if (isValid()) {
         onSubmit(getValues());
@@ -434,6 +478,7 @@ var createForm = (arg) => {
     };
   };
   const reset = (values2, options = {}) => {
+    resetSubmit(options.keepIsSubmitted, options.keepSubmitCount);
     resetErrors(options.keepErrors);
     resetTouched(options.keepTouched);
     resetDirty(options.keepDirty);
@@ -464,7 +509,9 @@ var createForm = (arg) => {
       isValid,
       isDirty,
       touchedFields,
-      dirtyFields
+      dirtyFields,
+      isSubmitted,
+      submitCount
     },
     values,
     errors,
@@ -473,6 +520,8 @@ var createForm = (arg) => {
     setValue,
     handleSubmit,
     reset,
+    setError,
+    clearErrors,
     trigger
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-hook-form",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",