feat(core): add setFieldTouched method (#50)

* refactor: expose `setFieldTouched` * fix: types * fix: correct name * types: collating type definitions --------- Co-authored-by: Alex Liu <dsa1314@gmail.com>
Mini-ghost · Jan 3, 2024 · 83cb5fe · 83cb5fe
1 parent 015883a
commit 83cb5fe
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/packages/core/src/composables/useForm.ts b/packages/core/src/composables/useForm.ts
@@ -34,6 +34,7 @@ import type {
   UseFormRegister,
   UseFormReturn,
   UseFormSetFieldError,
+  UseFormSetFieldTouched,
   ValidateField,
 } from '../types';
 
@@ -252,7 +253,10 @@ export function useForm<
     };
   };
 
-  const setFieldTouched = (name: string, touched = true) => {
+  const setFieldTouched: UseFormSetFieldTouched<Values> = (
+    name,
+    touched = true,
+  ) => {
     dispatch({
       type: ACTION_TYPE.SET_TOUCHED,
       payload: {
@@ -365,19 +369,21 @@ export function useForm<
     });
   };
 
-  const handleBlur: FormEventHandler['handleBlur'] = (
-    eventOrName: Event | string,
-    path?: string,
-  ): void | (() => void) => {
-    if (isString(eventOrName)) {
+  const handleBlur: FormEventHandler<Path<Values>>['handleBlur'] = (
+    eventOrName,
+    path,
+  ) => {
+    const isPath = (value: any): value is Path<Values> => isString(value);
+
+    if (isPath(eventOrName)) {
       return () => setFieldTouched(eventOrName, true);
     }
 
     const { name, id } = eventOrName.target as HTMLInputElement;
-    const field = path ?? (name || id);
+    const field = path ?? ((name || id) as Path<Values>);
 
     if (field) {
-      setFieldTouched(field, true);
+      return setFieldTouched(field, true);
     }
   };
 
@@ -631,6 +637,7 @@ export function useForm<
     setFieldValue,
     setErrors,
     setFieldError,
+    setFieldTouched,
     handleSubmit,
     handleReset,
     resetForm,
@@ -647,6 +654,7 @@ export function useForm<
     getFieldAttrs,
     registerFieldArray,
     setFieldArrayValue,
+    setFieldTouched,
     register,
   });
 

diff --git a/packages/core/src/composables/useInternalContext.ts b/packages/core/src/composables/useInternalContext.ts
@@ -17,6 +17,7 @@ import {
   PathValue,
   SetFieldArrayValue,
   UseFormRegister,
+  UseFormSetFieldTouched,
   UseFormSetFieldValue,
 } from '../types';
 
@@ -52,6 +53,7 @@ export interface InternalContextValues<Values extends FormValues> {
   getFieldAttrs: (name: MaybeRefOrGetter<string>) => ComputedRef<FieldAttrs>;
 
   setFieldArrayValue: SetFieldArrayValue<FormValues>;
+  setFieldTouched: UseFormSetFieldTouched<FormValues>;
 
   register: UseFormRegister<FormValues>;
 }

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -47,12 +47,8 @@ export interface FormState<Values extends FormValues> {
   isValidating: Ref<boolean>;
 }
 
-export interface FormEventHandler {
-  handleBlur: {
-    (event: Event, name?: string): void;
-    <T = string | Event>(name: T): T extends string ? () => void : void;
-  };
-
+export interface FormEventHandler<S = string> {
+  handleBlur: (event: Event | S, name?: S) => void;
   handleChange: () => void;
   handleInput: () => void;
 }
@@ -114,6 +110,13 @@ export type UseFormSetFieldError<Values extends FormValues> = <
   error: FieldError<PathValue<Values, Name>> | string | string[],
 ) => void;
 
+export type UseFormSetFieldTouched<Values extends FormValues> = <
+  Name extends Path<Values>,
+>(
+  name: Name,
+  touched: boolean,
+) => void;
+
 export interface FormResetState<Values extends FormValues = FormValues> {
   values: Values;
   touched: FormTouched<Values>;
@@ -138,6 +141,7 @@ export interface UseFormReturn<Values extends FormValues> {
   setFieldValue: UseFormSetFieldValue<Values>;
   setErrors: (errors: FormErrors<Values>) => void;
   setFieldError: UseFormSetFieldError<Values>;
+  setFieldTouched: UseFormSetFieldTouched<Values>;
   handleSubmit: (event?: Event) => void;
   handleReset: (event?: Event) => void;
   resetForm: ResetForm<Values>;