Add componentField to Field's slot

[FedorSherbakov]

🔎 Overview

This PR adds an ability to easily bind all useful props to complex components, same as it currently works with native elements.

🤓 Code snippets/examples (if applicable)

<Field name="name" v-slot="{ componentField }">
  <ComplexInput v-bind="componentField" /> // some component that expects value to be set as `modelValue` prop
</Field>

I was looking for such feature, as it's a bit tedious and too verbose binding all props / listeners to custom components manually. Probably there is already an easy solution that I've missed?

[logaretm]

This is a really nice feature and aligns well with the defineComponentBinds API introduced in 4.9. I am happy to merge it but could we have a few tests for it? Let me know if you need guidance, I can add the tests later if you don't have the time.

[codecov-commenter]

Codecov Report

Merging #4270 (ca99911) into main (12399d2) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

@@           Coverage Diff           @@
##             main    #4270   +/-   ##
=======================================
  Coverage   98.10%   98.11%           
=======================================
  Files          73       73           
  Lines        5753     5777   +24     
  Branches     1092     1095    +3     
=======================================
+ Hits         5644     5668   +24     
  Misses        109      109           

Impacted Files	Coverage Δ
packages/vee-validate/src/Field.ts	98.71% <100.00%> (+0.10%)	⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[FedorSherbakov]

Cool! I reused the defineComponentBinds test with a small extension. LMK if it's OK, or you see something worth adding now

[logaretm]

Looks great, thanks a lot.

[valentinoli]

This should be documented, I could not see this in the documentation and I found it by accident by logging the slot props. I need this because one doesn't have access to defineComponentBinds in a subcomponent nested beneath the component that calls useForm()

In my case the component where I need this is the great grandchild of the component that calls useForm()

Is there otherwise a way to use defineComponentBinds in a sub component that I just don't know about? (besides passing the function down as prop)

[valentinoli]

This should be documented

Edit: Found it documented here: https://vee-validate.logaretm.com/v4/api/field/#componentfield