feat(types): stronger define component bind types closes #4421

Author: logaretm

.changeset/orange-planes-grab.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat(types): stronger define component bind types closes #4421

packages/vee-validate/src/types/forms.ts

@@ -265,11 +265,21 @@ export interface PrivateFormContext<TValues extends GenericObject = GenericObjec
   isFieldValid<TPath extends Path<TValues>>(path: TPath): boolean;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export interface BaseComponentBinds<TValue = unknown, TModel = 'modelValue'> {
+interface ComponentModellessBinds {
   onBlur: () => void;
 }
 
+type ComponentModelBinds<TValue = any, TModel extends string = 'modelValue'> = ComponentModellessBinds & {
+  [TKey in `onUpdate:${TModel}`]: (value: TValue) => void;
+};
+
+export type BaseComponentBinds<TValue = any, TModel extends string = 'modelValue'> = ComponentModelBinds<
+  TValue,
+  TModel
+> & {
+  [k in TModel]: TValue;
+};
+
 export type PublicPathState<TValue = unknown> = Omit<
   PathState<TValue>,
   'bails' | 'label' | 'multiple' | 'fieldsCount' | 'validate' | 'id' | 'type' | '__flags'
@@ -339,11 +349,12 @@ export interface FormContext<TValues extends GenericObject = GenericObject, TOut
   defineComponentBinds<
     TPath extends Path<TValues>,
     TValue = PathValue<TValues, TPath>,
+    TModel extends string = 'modelValue',
     TExtras extends GenericObject = GenericObject,
   >(
     path: MaybeRefOrGetter<TPath>,
     config?: Partial<ComponentBindsConfig<TValue, TExtras>> | LazyComponentBindsConfig<TValue, TExtras>,
-  ): Ref<BaseComponentBinds<TValue> & TExtras>;
+  ): Ref<BaseComponentBinds<TValue, TModel> & TExtras>;
   defineInputBinds<
     TPath extends Path<TValues>,
     TValue = PathValue<TValues, TPath>,

packages/vee-validate/src/useForm.ts

@@ -959,6 +959,7 @@ export function useForm<
   function defineComponentBinds<
     TPath extends Path<TValues>,
     TValue = PathValue<TValues, TPath>,
+    TModel extends string = 'modelValue',
     TExtras extends GenericObject = GenericObject,
   >(
     path: MaybeRefOrGetter<TPath>,
@@ -990,7 +991,7 @@ export function useForm<
           [model]: pathState.value,
           [`onUpdate:${model}`]: onUpdateModelValue,
           ...(configVal.props || {}),
-        } as BaseComponentBinds<TValue> & TExtras;
+        } as BaseComponentBinds<TValue, TModel> & TExtras;
       }
 
       const model = config?.model || 'modelValue';
@@ -1004,10 +1005,10 @@ export function useForm<
         return {
           ...base,
           ...config.mapProps(omit(pathState, PRIVATE_PATH_STATE_KEYS)),
-        } as BaseComponentBinds<TValue> & TExtras;
+        } as BaseComponentBinds<TValue, TModel> & TExtras;
       }
 
-      return base as BaseComponentBinds<TValue> & TExtras;
+      return base as BaseComponentBinds<TValue, TModel> & TExtras;
     });
 
     return props;