From 27c9ef24d8e415f1f4aae6a4fbe9032324f54658 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Sun, 10 Sep 2023 00:59:04 +0300
Subject: [PATCH] feat(types): stronger define component bind types closes
 #4421

---
 .changeset/orange-planes-grab.md         |  5 +++++
 packages/vee-validate/src/types/forms.ts | 17 ++++++++++++++---
 packages/vee-validate/src/useForm.ts     |  7 ++++---
 3 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/orange-planes-grab.md

diff --git a/.changeset/orange-planes-grab.md b/.changeset/orange-planes-grab.md
new file mode 100644
index 000000000..2c7612b48
--- /dev/null
+++ b/.changeset/orange-planes-grab.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat(types): stronger define component bind types closes #4421
diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts
index 77d2f8c38..26dddbb12 100644
--- a/packages/vee-validate/src/types/forms.ts
+++ b/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>,
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
index 7082840c1..da8eafb0d 100644
--- a/packages/vee-validate/src/useForm.ts
+++ b/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;