From a78b0965e8c936b315ac0e51d4955e28941f8a34 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 20 Mar 2024 14:13:32 +0100
Subject: [PATCH] fix(FormField): generics

---
 src/runtime/components/FormField.vue    |  2 +-
 src/runtime/composables/useFormField.ts | 24 ++++++++++++------------
 src/runtime/types/form.d.ts             | 20 +++++++++++---------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index ed841358..5627aa19 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -59,7 +59,7 @@ const error = computed(() => {
 
 const inputId = ref(useId())
 
-provide<InjectedFormFieldOptions>('form-field', {
+provide<InjectedFormFieldOptions<FormFieldProps>>('form-field', {
   error,
   inputId,
   name: computed(() => props.name),
diff --git a/src/runtime/composables/useFormField.ts b/src/runtime/composables/useFormField.ts
index 8af426ca..73050699 100644
--- a/src/runtime/composables/useFormField.ts
+++ b/src/runtime/composables/useFormField.ts
@@ -2,20 +2,22 @@ import { inject, ref, computed } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormInputEvents, InjectedFormFieldOptions, InjectedFormOptions } from '../types/form'
 
-type InputProps = {
-  id?: string | number
-  size?: string | number | symbol
-  color?: string // FIXME: Replace by enum
+type Props<T> = {
+  id?: string
   name?: string
+  // @ts-ignore FIXME: TS doesn't like this
+  size?: T['size']
+  // @ts-ignore FIXME: TS doesn't like this
+  color?: T['color']
   eagerValidation?: boolean
-  legend?: string | null
-  disabled?: boolean | null
+  legend?: string
+  disabled?: boolean
 }
 
-export function useFormField (inputProps?: InputProps) {
+export function useFormField <T> (inputProps?: Props<T>) {
   const formOptions = inject<InjectedFormOptions | undefined>('form-options', undefined)
   const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
-  const formField = inject<InjectedFormFieldOptions | undefined>('form-field', undefined)
+  const formField = inject<InjectedFormFieldOptions<T> | undefined>('form-field', undefined)
   const formInputs = inject<any>('form-inputs', undefined)
 
   if (formField) {
@@ -24,7 +26,7 @@ export function useFormField (inputProps?: InputProps) {
       formField.inputId.value = inputProps?.id
     }
 
-    if (formInputs) {
+    if (formInputs && formField.name.value) {
       formInputs.value[formField.name.value] = formField.inputId.value
     }
   }
@@ -52,9 +54,7 @@ export function useFormField (inputProps?: InputProps) {
         emitFormEvent('input', formField?.name.value as string)
       }
     },
-    formField?.validateOnInputDelay.value ??
-    formOptions?.validateOnInputDelay.value ??
-    0
+    formField?.validateOnInputDelay.value ?? formOptions?.validateOnInputDelay?.value ?? 0
   )
 
   return {
diff --git a/src/runtime/types/form.d.ts b/src/runtime/types/form.d.ts
index ea35d8b6..ec4a1290 100644
--- a/src/runtime/types/form.d.ts
+++ b/src/runtime/types/form.d.ts
@@ -1,3 +1,5 @@
+import type { ComputedRef, Ref } from 'vue'
+
 export interface Form<T> {
   validate (path?: string | string[], opts?: { silent?: true }): Promise<T | false>
   validate (path?: string | string[], opts?: { silent?: false }): Promise<T | false>
@@ -36,16 +38,16 @@ export interface FormEvent {
   name?: string
 }
 
-export interface InjectedFormFieldOptions {
-  inputId: Ref<string | number | undefined>
-  name: Computed<string>
-  size: Computed<string | number | symbol>
-  error: Computed<string | boolean | undefined>
-  eagerValidation: Computed<boolean>
-  validateOnInputDelay: Computed<number | undefined>
+export interface InjectedFormFieldOptions<T> {
+  inputId: Ref<string | undefined>
+  name: ComputedRef<string | undefined>
+  size: ComputedRef<T['size']>
+  error: ComputedRef<string | boolean | undefined>
+  eagerValidation: ComputedRef<boolean | undefined>
+  validateOnInputDelay: ComputedRef<number | undefined>
 }
 
 export interface InjectedFormOptions {
-  disabled?: Computed<boolean>
-  validateOnInputDelay?: Computed<number>
+  disabled?: ComputedRef<boolean>
+  validateOnInputDelay?: ComputedRef<number>
 }