Type Mismatch in Generated Props for onInput and onChange Methods with Element Plus Integration

[v-angolenko]

What happened?

In the latest update of vee-validate, the defineField function has been introduced to define form fields and generate props for input elements. However, the types of the onInput and onChange methods in the generated props are strictly typed to accept only an Event object as their argument.

interface BaseFieldProps {
    onBlur: (e: Event) => void;
    onChange: (e: Event) => void;
    onInput: (e: Event) => void;
}

Expected Behavior:
In some UI libraries, such as Element Plus (ElInput), the onInput and onChange methods expect the first argument to be the input value, not an Event object. This results in TypeScript errors when trying to use the generated props with these input components.

Suggested Solution:
To make vee-validate more flexible and compatible with various UI libraries, it would be helpful to allow the onInput and onChange methods in the generated props to accept both an Event object and the input value as arguments. This would accommodate different use cases and prevent TypeScript errors when using vee-validate with libraries like Element Plus.

Reproduction steps

1. Import and set up vee-validate in a project.
2. Create a form field using the defineField function, for example:

const [titleValue, titleProps] = defineField('title');

3. Attempt to use the generated titleProps with an Element Plus ElInput component, like this:

<ElInput
  v-bind="titleProps"
/>

4. Observe TypeScript errors in your project due to the type mismatch in the onInput and onChange methods. Element Plus expects the first argument of these methods to be the input value, not an Event object.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Thanks for reporting this, this makes sense. While there is no good way to type this without using unknown here, but at the moment, defineField doesn't care about the event arg at all so it is safe to remove the arg all together which would make it compatible with components.