Add componentField to Field's slot (#4270)

Author: FedorShcherbakov

docs/src/pages/api/field.mdx

@@ -329,3 +329,7 @@ An array containing a few listeners for the `input` event, it involves updating
 </CodeTitle>
 
 An array containing a few listeners for the `change` event, it involves updating the field value and triggering validation.
+
+#### `componentField`
+
+Same as `field`, but provides value as `modelValue` to use with components

packages/vee-validate/src/Field.ts

@@ -15,22 +15,30 @@ interface ValidationTriggersProps {
   validateOnModelUpdate: boolean;
 }
 
-interface FieldBindingObject<TValue = any> {
+interface SharedBindingObject<TValue = any> {
   name: string;
   onBlur: (e: Event) => void;
   onInput: (e: Event) => void;
   onChange: (e: Event) => void;
   'onUpdate:modelValue'?: ((e: TValue) => unknown) | undefined;
+}
+
+interface FieldBindingObject<TValue = any> extends SharedBindingObject<TValue> {
   value?: TValue;
   checked?: boolean;
 }
 
+interface ComponentFieldBindingObject<TValue = any> extends SharedBindingObject<TValue> {
+  modelValue?: TValue;
+}
+
 interface FieldSlotProps<TValue = unknown>
   extends Pick<
     FieldContext,
     'validate' | 'resetField' | 'handleChange' | 'handleReset' | 'handleBlur' | 'setTouched' | 'setErrors'
   > {
   field: FieldBindingObject<TValue>;
+  componentField: ComponentFieldBindingObject<TValue>;
   value: TValue;
   meta: FieldMeta<TValue>;
   errors: string[];
@@ -147,7 +155,7 @@ const FieldImpl = /** #__PURE__ */ defineComponent({
       ctx.emit('update:modelValue', value.value);
     };
 
-    const fieldProps = computed(() => {
+    const sharedProps = computed(() => {
       const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } =
         resolveValidationTriggers(props);
 
@@ -185,6 +193,14 @@ const FieldImpl = /** #__PURE__ */ defineComponent({
 
       attrs['onUpdate:modelValue'] = e => onChangeHandler(e, validateOnModelUpdate);
 
+      return attrs;
+    });
+
+    const fieldProps = computed(() => {
+      const attrs = {
+        ...sharedProps.value,
+      };
+
       if (hasCheckedAttr(ctx.attrs.type) && checked) {
         attrs.checked = checked.value;
       }
@@ -197,9 +213,17 @@ const FieldImpl = /** #__PURE__ */ defineComponent({
       return attrs;
     });
 
+    const componentProps = computed(() => {
+      return {
+        ...sharedProps.value,
+        modelValue: value.value,
+      };
+    });
+
     function slotProps(): FieldSlotProps {
       return {
         field: fieldProps.value,
+        componentField: componentProps.value,
         value: value.value,
         meta,
         errors: errors.value,

packages/vee-validate/tests/Field.spec.ts

@@ -1,7 +1,8 @@
-import { defineRule, configure } from '@/vee-validate';
+import { defineRule, configure, useForm } from '@/vee-validate';
 import { mountWithHoc, setValue, dispatchEvent, setChecked, flushPromises, dispatchFileEvent } from './helpers';
 import * as yup from 'yup';
 import { computed, reactive, ref, Ref } from 'vue';
+import ModelComp from './helpers/ModelComp';
 
 vi.useFakeTimers();
 
@@ -1208,4 +1209,36 @@ describe('<Field />', () => {
     expect(lastCallOf(radioType)).toHaveProperty('checked');
     expect(lastCallOf(radioType)).not.toHaveProperty('value');
   });
+
+  describe('componentField', () => {
+    test('provides bindable object to components', async () => {
+      mountWithHoc({
+        components: {
+          ModelComp,
+        },
+        template: `
+          <Field name="name" v-slot="{ componentField, errorMessage, value }" rules="required">
+            <ModelComp v-bind="componentField" />
+            <span id="errors">{{ errorMessage }}</span>
+            <span id="values">{{ value }}</span>
+          </Field>
+        `,
+      });
+
+      await flushPromises();
+      const errorEl = document.getElementById('errors');
+      const valuesEl = document.getElementById('values');
+      const inputEl = document.querySelector('input') as HTMLInputElement;
+      expect(inputEl.getAttribute('name')).toBe('name');
+      setValue(inputEl, '');
+      dispatchEvent(inputEl, 'blur');
+      await flushPromises();
+      expect(errorEl?.textContent).toBe('This field is required');
+      setValue(inputEl, '123');
+      dispatchEvent(inputEl, 'blur');
+      await flushPromises();
+      expect(errorEl?.textContent).toBe('');
+      expect(valuesEl?.textContent).toBe('123');
+    });
+  });
 });

packages/vee-validate/tests/helpers/ModelComp.ts

@@ -1,6 +1,7 @@
 export default {
-  props: ['modelValue', 'test'],
+  props: ['modelValue', 'name', 'test'],
   emits: ['blur', 'update:modelValue'],
-  template: `<input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @blur="$emit('blur')">
+  inheritAttrs: false,
+  template: `<input type="text" :name="name" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @blur="$emit('blur')">
   <div v-if="test">{{ test }}</div>`,
 };