Merge pull request #70 from dbssman/feature/67-update-to-vue-33

📈 Update lib dependencies

Author: dbssman

README.md

@@ -113,6 +113,63 @@ const successFn = (form: Record<string, any>) => {
 </script>
 ```
 
+### Typescript support
+
+```vue
+<template>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <q-input v-bind="register('name')" />
+    <q-checkbox v-bind="register('married')" />
+    <q-select v-bind="register('pet')" :options="['dog', 'cat', 'mouse']" />
+    <input type="submit" />
+  </form>
+</template>
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+interface MyFormInterface {
+  name: string
+  married: boolean
+  pet: string
+}
+const { register, handleSubmit } = useFormHandler<MyFormInterface>()
+const successFn = (form: MyFormInterface) => {
+  console.log({ form })
+}
+</script>
+```
+
+By doing this you will get full type support on all the interactions with any formhandler resource.
+
+### Centralized and declarative form building
+
+```vue
+<template>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <q-input v-bind="form.name" />
+    <q-checkbox v-bind="form.married" />
+    <q-select v-bind="form.pet" :options="['dog', 'cat', 'mouse']" />
+    <input type="submit" />
+  </form>
+</template>
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+interface MyFormInterface {
+  name: string,
+  married: boolean,
+  pet: string,
+}
+const { build, handleSubmit } = useFormHandler<MyFormInterface>()
+const form = build({
+  name: {}
+  married: {}
+  pet: {}
+})
+const successFn = (form: MyFormInterface) => {
+  console.log({ form })
+}
+</script>
+```
+
 ### For a more advanced usage visit the [Docs](https://vue-form-handler.com)
 
 ## 📈 Project activity

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

@@ -75,7 +75,14 @@ Notice how the template looks much cleaner with this approach, and this helps us
 ## Type Declarations
 
 ```ts
-export type Build = <T extends Record<string, RegisterOptions>>(
-  configuration: T | Ref<T> | ComputedRef<T>
-) => ComputedRef<Record<keyof T, Readonly<RegisterReturn>>>
+export type Build<T extends Record<string, any> = Record<string, any>> = <
+  TBuild extends Partial<T>,
+>(
+  configuration: ComputableUnion<ConfigType<TBuild>>
+) => ComputedRef<
+  Record<
+    keyof TBuild,
+    Readonly<RegisterReturn<Partial<Record<keyof TBuild, RegisterOptions>>>>
+  >
+>
 ```

docs/api/use-form-handler/clear-error.md

@@ -106,5 +106,5 @@ watch(
 ## Type Declarations
 
 ```ts
-export type ClearError = (name?: string) => void
+export type ClearError = (name?: keyof T | undefined) => void
 ```

docs/api/use-form-handler/clear-field.md

@@ -62,5 +62,5 @@ const { register, clearField } = useFormHandler()
 ## Type Declarations
 
 ```ts
-export type ClearField = (name: string) => Promise<void>
+export type ClearField = (name: keyof T) => Promise<void>
 ```

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

@@ -54,12 +54,12 @@ const { register, formState } = useFormHandler()
 ## Type Declarations
 
 ```ts
-export interface FormState {
+export interface FormState<T> {
   isDirty: boolean
   isTouched: boolean
   isValid: boolean
-  dirty: Record<string, boolean>
-  touched: Record<string, boolean>
-  errors: Record<string, string>
+  dirty: Record<keyof T, boolean>
+  touched: Record<keyof T, boolean>
+  errors: Record<keyof T, string | undefined>
 }
 ```

docs/api/use-form-handler/handle-submit.md

@@ -95,11 +95,12 @@ const errorFn = (errors: any) => {
 ## Type Declarations
 
 ```ts
-export type HandleSubmitSuccessFn = (values: Record<string, any>) => void
-export type HandleSubmitErrorFn = (errors: Record<string, string>) => void
+export type HandleSubmitErrorFn<T> = (errors: FormState<T>['errors']) => void
 
-export type HandleSubmit = (
-  successFn: HandleSubmitSuccessFn,
-  errorFn?: HandleSubmitErrorFn
+export type HandleSubmitSuccessFn<T> = (values: Record<keyof T, any>) => void
+
+export type HandleSubmit<T> = (
+  successFn: HandleSubmitSuccessFn<T>,
+  errorFn?: HandleSubmitErrorFn<T>
 ) => void
 ```

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

@@ -165,37 +165,47 @@ Using the `always` validationMode will have a more significant impact on perform
 ## Type Declarations
 
 ```ts
-export type Interceptor = (_: InterceptorParams) => Promise<boolean> | boolean
-
-export type FormValidation = (
-  values: Record<string, any>
-) => Promise<boolean> | boolean
-
-export interface FormHandlerParams {
-  initialValues?:
-    | Record<string, any>
-    | Ref<Record<string, any>>
-    | ComputedRef<Record<string, any>>
-  interceptor?: Interceptor
-  validate?: FormValidation
-  validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'always'
-}
-export interface FormHandlerReturn {
-  formState: FormState
-  values: Record<string, any>
-  clearError: ClearError
-  clearField: ClearField
-  handleSubmit: HandleSubmit
-  modifiedValues: ModifiedValues
-  register: Register
-  register: Build
-  resetField: ResetField
-  resetForm: ResetForm
-  setError: SetError
-  setValue: SetValue
-  triggerValidation: TriggerValidation
-  unregister: (name: string) => void
+export declare const useFormHandler: <
+  T extends Record<string, any> = Record<string, any>,
+  R extends T = T,
+>({
+  initialValues,
+  interceptor,
+  validate,
+  validationMode,
+  injectionKey,
+}?: FormHandlerParams<T, R>) => {
+  build: Build<T>
+  clearError: (name?: keyof T | undefined) => void
+  clearField: (name: keyof T) => Promise<void>
+  formState: {
+    readonly isDirty: boolean
+    readonly isTouched: boolean
+    readonly isValid: boolean
+    readonly dirty: import('@vue/reactivity').DeepReadonly<
+      import('@vue/reactivity').UnwrapRef<Record<keyof T, boolean>>
+    >
+    readonly touched: import('@vue/reactivity').DeepReadonly<
+      import('@vue/reactivity').UnwrapRef<Record<keyof T, boolean>>
+    >
+    readonly errors: import('@vue/reactivity').DeepReadonly<
+      import('@vue/reactivity').UnwrapRef<Record<keyof T, string | undefined>>
+    >
+  }
+  handleSubmit: (
+    successFn: HandleSubmitSuccessFn,
+    errorFn?: HandleSubmitErrorFn
+  ) => Promise<void>
+  modifiedValues: <TModified extends T>() => TModified
+  register: (name: keyof T, options?: RegisterOptions) => RegisterReturn
+  resetField: (name: keyof T) => void
+  resetForm: () => void
+  setError: (name: keyof T, error: string) => void
+  setValue: (name: keyof T, value?: any) => Promise<void>
+  triggerValidation: (name?: keyof T | undefined) => Promise<void>
+  unregister: (name: keyof T) => void
+  values: import('@vue/reactivity').DeepReadonly<
+    import('@vue/reactivity').UnwrapNestedRefs<T>
+  >
 }
-
-export type FormHandler = (_?: FormHandlerParams) => FormHandlerReturn
 ```

docs/api/use-form-handler/modified-values.md

@@ -1,6 +1,6 @@
 # modifiedValues
 
-Returns the current modified fields of the form.
+Computed property that holds the current modified values of the form e.g values that are different from initial value if any initial value was indicated or different than the default value for the field if no initial values were given.
 
 ## Demo
 
@@ -15,7 +15,7 @@ Coming soon...
     <input type="text" v-bind="register('email')" />
     <input type="text" v-bind="register('summary')" />
     <pre>
-            {{ modifiedValues() }} //should be initially
+            {{ modifiedValues }} //should initially be an empty object
         </pre
     >
     <pre>
@@ -41,5 +41,6 @@ Let's say your form is initialized as above, because you're editing an existing
 ## Type Declarations
 
 ```ts
-export type ModifiedValues = () => Record<string, any>
+type ModifiedValues = ComputedRef<Partial<T>>// T being the form interface
+
 ```

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

@@ -243,38 +243,19 @@ Custom validations are kept very simple, can be synchronous or asynchronous. We
 ## Type Declarations
 
 ```ts
-export interface BaseControlProps {
-  name: string
-  error: string
-  ref: any
-  modelValue: any
-  'onUpdate:modelValue': (value: any) => Promise<void>
-  onBlur: () => void
-  onClear: () => void
-  disabled?: boolean
-  isDirty?: boolean
-  isTouched?: boolean
-  onChange?: (el: any) => Promise<void>
-}
-
-export type ValidationFn = (
-  value: any
-) => Promise<boolean | string> | boolean | string
 
-export type Validations = Record<string, ValidationFn>
-
-export interface ValidationWithMessage {
+interface ValidationWithMessage {
   value: number | string | RegExp
   message: string
 }
 
-export interface ValidationsConfiguration {
+interface ValidationsConfiguration {
   required?: boolean | string
-  min?: number | ValidationWithMessage
-  max?: number | ValidationWithMessage
-  minLength?: number | ValidationWithMessage
-  maxLength?: number | ValidationWithMessage
-  pattern?: string | RegExp | ValidationWithMessage
+  min?: number | ValidationWithMessage<number>
+  max?: number | ValidationWithMessage<number>
+  minLength?: number | ValidationWithMessage<number>
+  maxLength?: number | ValidationWithMessage<number>
+  pattern?: string | RegExp | ValidationWithMessage<string | RegExp>
 }
 
 export interface RegisterOptions extends ValidationsConfiguration {
@@ -284,12 +265,28 @@ export interface RegisterOptions extends ValidationsConfiguration {
   withDetails?: boolean
   disabled?: boolean
   useNativeValidation?: boolean
+  dependentFields?: string[]
 }
 
-export type RegisterReturn = BaseControlProps & ValidationsConfiguration
-
 export type Register = (
-  name: string,
+  name: keyof T,
   options?: RegisterOptions
-) => RegisterReturn
+) => {
+  pattern?: string | undefined
+  required?: boolean | undefined
+  min?: number | undefined
+  max?: number | undefined
+  minLength?: number | undefined
+  maxLength?: number | undefined
+  onChange?: (() => Promise<void>) | undefined
+  isDirty?: boolean | undefined
+  isTouched?: boolean | undefined
+  disabled?: boolean | undefined
+  name: keyof T
+  modelValue: T[keyof T]
+  'onUpdate:modelValue': (value: any) => Promise<void>
+  ref: (fieldRef: any) => void
+  onBlur: () => void
+  onClear: () => Promise<void>
+}
 ```

docs/api/use-form-handler/reset-field.md

@@ -38,5 +38,5 @@ const { register, resetField } = useFormHandler({
 ## Type Declarations
 
 ```ts
-export type ResetField = (name: string) => void
+export type ResetField = (name: keyof T) => void
 ```

docs/api/use-form-handler/set-error.md

@@ -51,8 +51,5 @@ Notice how we use the combination of [clearError](/api/use-form-handler/clear-er
 ## Type Declarations
 
 ```ts
-export type SetError = (
-    name:string
-    error:string
-) => void
+export type SetError = (name: keyof T, error: string) => void
 ```

docs/api/use-form-handler/set-value.md

@@ -77,5 +77,5 @@ Just calling `triggerValidation` after a value is set ensures the validations ar
 ## Type Declarations
 
 ```ts
-export type SetValue = (name: string, value: any) => Promise<void>
+export type SetValue = (name: keyof T, value?: any) => Promise<void>
 ```

docs/api/use-form-handler/trigger-validation.md

@@ -108,5 +108,5 @@ All the fields get validated when triggering the validation without specifying a
 ## Type Declarations
 
 ```ts
-export type TriggerValidation = (name?: string) => Promise<void>
+export type TriggerValidation = (name?: keyof T | undefined) => Promise<void>
 ```

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

@@ -46,5 +46,5 @@ The field value or state is not recovered after un-registering it. It starts eve
 ## Type Declarations
 
 ```ts
-export type Unregister = (name: string) => void
+export type Unregister = (name: keyof T) => void
 ```

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

@@ -40,5 +40,5 @@ const { register, values } = useFormHandler()
 ## Type Declarations
 
 ```ts
-export type Values = Record<string, any>
+export type Values = Partial<T>
 ```