solid-hook-form 1.9.4 → 1.10.0

package/dist/main.d.ts

@@ -36,6 +36,7 @@ type RegisterReturn<F extends FormValues> = {
     ref(ref: Ref): void;
     onInput(event: Event | unknown): void;
     onChange(event: Event | unknown): void;
+    onBlur(event: FocusEvent | unknown): void;
 };
 type Register<F extends FormValues> = (name: Path<F>, options?: Rules<F, Path<F>>) => RegisterReturn<F>;
 
@@ -65,18 +66,24 @@ type ControllerProps<F extends FormValues> = {
     render(arg: UseControllerReturn<F>): JSXElement;
 };
 
+type TouchedFields<F extends FormValues = FormValues> = Partial<Record<Path<F>, boolean>>;
+
 type FormValues = Record<string, any>;
 type GetValues<F extends FormValues> = {
     (): F;
     <N extends FieldPath<F>>(name: N): FieldPathValue<F, N>;
 };
 type SetValue<F extends FormValues> = (name: Path<F>, value: FieldPathValue<F, Path<F>>) => void;
-type SubmitCallback<F extends FormValues> = (values: F) => void;
-type OnSubmit<F extends FormValues> = (submit: SubmitCallback<F>) => (event: SubmitEvent) => void;
-type Reset<F extends FormValues> = (newDefaultValues?: Partial<F>) => void;
+type SubmitHandler<F extends FormValues> = (values: F) => void;
+type SubmitErrorHandler<F extends FormValues> = (errors: FieldErrors<F>) => void;
+type HandleSubmit<F extends FormValues> = (onSubmit: SubmitHandler<F>, onError?: SubmitErrorHandler<F>) => (event: SubmitEvent) => void;
+type ResetOptions = {
+    keepTouched?: boolean;
+};
+type Reset<F extends FormValues> = (newDefaultValues?: Partial<F>, options?: ResetOptions) => void;
 type CreateFormArg<F extends FormValues> = {
     defaultValues: F;
-    mode?: "onChange" | "onSubmit";
+    mode?: "onChange" | "onSubmit" | "onBlur";
     resolver?: Resolver<F>;
 };
 type CreateFormReturn<F extends FormValues = FormValues> = {
@@ -84,6 +91,7 @@ type CreateFormReturn<F extends FormValues = FormValues> = {
     formState: {
         errors: Accessor<FieldErrors<F>>;
         isValid: Accessor<boolean>;
+        touchedFields: Accessor<TouchedFields<F>>;
     };
     values: Accessor<F>;
     errors: Accessor<FieldErrors<F>>;
@@ -91,8 +99,8 @@ type CreateFormReturn<F extends FormValues = FormValues> = {
     register: Register<F>;
     getValues: GetValues<F>;
     setValue: SetValue<F>;
-    onSubmit: OnSubmit<F>;
-    handleSubmit: OnSubmit<F>;
+    onSubmit: HandleSubmit<F>;
+    handleSubmit: HandleSubmit<F>;
     reset: Reset<F>;
 };
 type CreateForm = <F extends FormValues>(arg?: CreateFormArg<F>) => CreateFormReturn<F>;
@@ -114,4 +122,4 @@ declare const get: (object: any, path: string, defaultValue?: unknown) => any;
 
 declare const set: (object: FormValues, path: string, value: unknown) => void;
 
-export { type Control, Controller, type CreateFormArg, type CreateFormReturn, type FieldError, type FieldErrors, FormProvider, type FormValues, type Rules, type UseControllerArg, type UseControllerReturn, createForm, get, set, useController, createForm as useForm, useFormContext };
+export { type Control, Controller, type CreateFormArg, type CreateFormReturn, type FieldError, type FieldErrors, FormProvider, type FormValues, type Rules, type SubmitErrorHandler, type SubmitHandler, type UseControllerArg, type UseControllerReturn, createForm, get, set, useController, createForm as useForm, useFormContext };

package/dist/main.js

@@ -213,6 +213,23 @@ var getResolverFields = (fields) => {
     return acc;
   }, {});
 };
+var createTouched = () => {
+  const [touchedFields, setTouchedFields] = createSignal({});
+  const addTouched = (name) => {
+    setTouchedFields((prev) => {
+      const newState = { ...prev };
+      set(newState, name, true);
+      return newState;
+    });
+  };
+  const resetTouched = (keepTouched) => {
+    if (keepTouched) {
+      return;
+    }
+    setTouchedFields({});
+  };
+  return { touchedFields, addTouched, resetTouched };
+};
 
 // src/create_form.ts
 var createForm = (arg = { defaultValues: {} }) => {
@@ -221,6 +238,7 @@ var createForm = (arg = { defaultValues: {} }) => {
   const { rules, addRule, getRule } = createRules();
   const [values, setValues] = createSignal(defaultValues);
   const { errors, appendError, removeError, resetErrors, getError } = createErrors();
+  const { touchedFields, addTouched, resetTouched } = createTouched();
   const isValid = createMemo(() => {
     return !Object.keys(errors()).length;
   });
@@ -306,6 +324,12 @@ var createForm = (arg = { defaultValues: {} }) => {
           onFieldChange(event, name);
         }
       },
+      onBlur(event) {
+        if (mode === "onBlur") {
+          onFieldChange(event, name);
+        }
+        addTouched(name);
+      },
       ref(element) {
         const field = getField(name);
         if (field) {
@@ -340,23 +364,26 @@ var createForm = (arg = { defaultValues: {} }) => {
       setFieldValue(field, value);
     }
   };
-  const onSubmit = (submit) => {
+  const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
       event.preventDefault();
       await validateAllFields();
       if (isValid()) {
-        submit(getValues());
+        onSubmit(getValues());
+        return;
       }
+      onError?.(errors());
       focusFirstError();
     };
   };
-  const reset = (newDefaultValues = {}) => {
+  const reset = (newDefaultValues = {}, options = {}) => {
     const newValues = {
       ...structuredClone(defaultValues),
       ...newDefaultValues
     };
     setValues(() => newValues);
     resetErrors();
+    resetTouched(options.keepTouched);
     Object.entries(fields).forEach(([name, field]) => {
       if (field) {
         setFieldValue(field, get(newValues, name));
@@ -367,7 +394,8 @@ var createForm = (arg = { defaultValues: {} }) => {
     control,
     formState: {
       errors,
-      isValid
+      isValid,
+      touchedFields
     },
     values,
     errors,
@@ -375,8 +403,8 @@ var createForm = (arg = { defaultValues: {} }) => {
     register,
     getValues,
     setValue,
-    onSubmit,
-    handleSubmit: onSubmit,
+    onSubmit: handleSubmit,
+    handleSubmit,
     reset
   };
 };

package/dist/main.jsx

@@ -1,5 +1,5 @@
 // src/create_form.ts
-import { createMemo, createSignal as createSignal2 } from "solid-js";
+import { createMemo, createSignal as createSignal3 } from "solid-js";
 
 // src/logic/get_value.ts
 var getFieldValue = (event) => {
@@ -215,13 +215,34 @@ var getResolverFields = (fields) => {
   }, {});
 };
 
+// src/logic/create_touched.ts
+import { createSignal as createSignal2 } from "solid-js";
+var createTouched = () => {
+  const [touchedFields, setTouchedFields] = createSignal2({});
+  const addTouched = (name) => {
+    setTouchedFields((prev) => {
+      const newState = { ...prev };
+      set(newState, name, true);
+      return newState;
+    });
+  };
+  const resetTouched = (keepTouched) => {
+    if (keepTouched) {
+      return;
+    }
+    setTouchedFields({});
+  };
+  return { touchedFields, addTouched, resetTouched };
+};
+
 // src/create_form.ts
 var createForm = (arg = { defaultValues: {} }) => {
   const { defaultValues, mode = "onChange", resolver } = arg;
   const { fields, getField, setField } = createFields();
   const { rules, addRule, getRule } = createRules();
-  const [values, setValues] = createSignal2(defaultValues);
+  const [values, setValues] = createSignal3(defaultValues);
   const { errors, appendError, removeError, resetErrors, getError } = createErrors();
+  const { touchedFields, addTouched, resetTouched } = createTouched();
   const isValid = createMemo(() => {
     return !Object.keys(errors()).length;
   });
@@ -307,6 +328,12 @@ var createForm = (arg = { defaultValues: {} }) => {
           onFieldChange(event, name);
         }
       },
+      onBlur(event) {
+        if (mode === "onBlur") {
+          onFieldChange(event, name);
+        }
+        addTouched(name);
+      },
       ref(element) {
         const field = getField(name);
         if (field) {
@@ -341,23 +368,26 @@ var createForm = (arg = { defaultValues: {} }) => {
       setFieldValue(field, value);
     }
   };
-  const onSubmit = (submit) => {
+  const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
       event.preventDefault();
       await validateAllFields();
       if (isValid()) {
-        submit(getValues());
+        onSubmit(getValues());
+        return;
       }
+      onError?.(errors());
       focusFirstError();
     };
   };
-  const reset = (newDefaultValues = {}) => {
+  const reset = (newDefaultValues = {}, options = {}) => {
     const newValues = {
       ...structuredClone(defaultValues),
       ...newDefaultValues
     };
     setValues(() => newValues);
     resetErrors();
+    resetTouched(options.keepTouched);
     Object.entries(fields).forEach(([name, field]) => {
       if (field) {
         setFieldValue(field, get(newValues, name));
@@ -368,7 +398,8 @@ var createForm = (arg = { defaultValues: {} }) => {
     control,
     formState: {
       errors,
-      isValid
+      isValid,
+      touchedFields
     },
     values,
     errors,
@@ -376,8 +407,8 @@ var createForm = (arg = { defaultValues: {} }) => {
     register,
     getValues,
     setValue,
-    onSubmit,
-    handleSubmit: onSubmit,
+    onSubmit: handleSubmit,
+    handleSubmit,
     reset
   };
 };

package/package.json

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