✅ Improve type support

docs/api/use-form-handler/build.md

@@ -23,42 +23,49 @@ Coming soon...
 <script setup lang="ts">
 import { useFormHandler } from 'vue-form-handler'
 
-const successFn = (result: Record<string, any>) => { console.log(result) }
-const errorFn = (result: Record<string, string | undefined>) => { console.warn(result) }
+const successFn = (result: Record<string, any>) => {
+  console.log(result)
+}
+const errorFn = (result: Record<string, string | undefined>) => {
+  console.warn(result)
+}
 const { build, handleSubmit, values, formState } = useFormHandler()
 
 const form = build({
   name: {
     required: true,
     pattern: {
       value: /^[a-zA-Z]+$/,
-      message: 'Only letters are allowed'
-    }
+      message: 'Only letters are allowed',
+    },
   },
   email: {
     required: true,
     pattern: {
       value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
-      message: 'Please enter a valid email'
-    }
+      message: 'Please enter a valid email',
+    },
   },
   password: {
     required: true,
     pattern: {
       value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
-      message: 'Password must contain at least 8 characters, one uppercase, one lowercase and one number'
-    }
+      message:
+        'Password must contain at least 8 characters, one uppercase, one lowercase and one number',
+    },
   },
   passwordConfirmation: {
     required: true,
     pattern: {
       value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
-      message: 'Password must contain at least 8 characters, one uppercase, one lowercase and one number'
+      message:
+        'Password must contain at least 8 characters, one uppercase, one lowercase and one number',
     },
     validate: {
-      match: (value: string) => value === values.password || 'Passwords do not match'
-    }
-  }
+      match: (value: string) =>
+        value === values.password || 'Passwords do not match',
+    },
+  },
 })
 </script>
 ```
@@ -68,9 +75,7 @@ Notice how the template looks much cleaner with this approach, and this helps us
 ## Type Declarations
 
 ```ts
-export interface Build<T = Record<string, RegisterOptions>> {
-  (configuration: T | Ref<T> | ComputedRef<T>): ComputedRef<
-    Record<keyof T, RegisterReturn>
-  >
-}
+export type Build = <T extends Record<string, RegisterOptions>>(
+  configuration: T | Ref<T> | ComputedRef<T>
+) => ComputedRef<Record<keyof T, Readonly<RegisterReturn>>>
 ```

src/test/handler.test.ts

@@ -99,7 +99,6 @@ describe('useFormHandler()', () => {
     })
 
     expect(form.value.field.name).toBe('field')
-    expect(form.value.field.error).toBeUndefined()
     expect(form.value.field.onBlur).toBeDefined()
     expect(form.value.field.isDirty).toBeUndefined()
     expect(form.value.field.isTouched).toBeUndefined()

src/test/register.test.ts

@@ -6,7 +6,6 @@ describe('register()', () => {
     const { values, register } = useFormHandler()
     const field = register('field')
     expect(field.name).toBe('field')
-    expect(field.error).toBeUndefined()
     expect(field.onBlur).toBeDefined()
     expect(field.isDirty).toBeUndefined()
     expect(field.isTouched).toBeUndefined()

src/types/baseControl.ts

@@ -3,9 +3,6 @@ export interface BaseControlProps {
   /** Name of the control */
   name: string
 
-  /** Current error of the control */
-  error: string | undefined
-
   /** Value binding for native inputs */
   ref: (fieldRef: any) => void
 

src/types/formHandler.ts

@@ -77,11 +77,9 @@ export type HandleSubmit = (
   errorFn?: HandleSubmitErrorFn
 ) => void
 
-export interface Build<T = Record<string, RegisterOptions>> {
-  (configuration: T | Ref<T> | ComputedRef<T>): ComputedRef<
-    Record<keyof T, RegisterReturn>
-  >
-}
+export type Build = <T extends Record<string, RegisterOptions>>(
+  configuration: T | Ref<T> | ComputedRef<T>
+) => ComputedRef<Record<keyof T, Readonly<RegisterReturn>>>
 
 export interface InterceptorParams {
   /** Name of the field that is currently about to be set*/

src/useFormHandler.ts

@@ -24,7 +24,6 @@ import {
   ValidationsConfiguration,
   Unregister,
   FieldReference,
-  RegisterOptions,
   RegisterReturn,
 } from './types'
 import {
@@ -44,7 +43,7 @@ import {
   refFn,
   transformValidations,
 } from './logic'
-import { isNativeControl } from './utils'
+import { isNativeControl, objectKeys } from './utils'
 
 export const initialState = () => ({
   touched: {},
@@ -271,7 +270,6 @@ export const useFormHandler: UseFormHandler = ({
     return {
       name,
       modelValue: values[name],
-      error: formState.errors[name],
       'onUpdate:modelValue': async (value: any) =>
         await handleChange(name, value),
       ref: refFn(name, _refs, values),
@@ -305,12 +303,12 @@ export const useFormHandler: UseFormHandler = ({
   }
 
   const build: Build = (configuration) => {
-    const staticConfig = unref(configuration) as Record<string, RegisterOptions>
+    const staticConfig = unref(configuration)
     return computed(() =>
-      Object.keys(staticConfig).reduce((acc, key) => {
-        acc[key] = register(key, staticConfig[key])
+      objectKeys(staticConfig).reduce((acc, key) => {
+        acc[key] = register(String(key), staticConfig[key])
         return acc
-      }, {} as Record<string, RegisterReturn>)
+      }, {} as Record<keyof typeof staticConfig, Readonly<RegisterReturn>>)
     )
   }
 

src/utils/index.ts

@@ -8,3 +8,4 @@ export { default as min } from './min'
 export { default as minLength } from './minLength'
 export { default as pattern } from './pattern'
 export { default as required } from './required'
+export { default as objectKeys } from './objectKeys'

src/utils/objectKeys.ts

@@ -0,0 +1 @@
+export default <T extends object>(obj: T) => Object.keys(obj) as (keyof T)[]

tsconfig.json

@@ -22,7 +22,7 @@
     "noImplicitAny": true,
     "types": ["vitest/importMeta"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "./*d.ts"],
   "references": [
     {
       "path": "./tsconfig.node.json"

vue.d.ts

@@ -0,0 +1,5 @@
+import { ComputedRef, Ref } from '@vue/runtime-core'
+
+declare module '@vue/runtime-core' {
+  export function unref<T>(ref: T | Ref<T> | ComputedRef<T>): T
+}