v4.9.0

This release required a lot of internal changes to how vee-validate tracks fields to have better DX down the line. There shouldn't be any breaking changes to your apps, as all the tests are passing with these changes. But some behaviors may differ if you were using some unintentional bugs as features.

The main change is vee-validate shifting from thinking about fields as unique field instances to treating them as outlets for path values. The outcome is the same in most cases but allows for more ways for vee-validate to define fields.

💣 Possible breaking changes

• setValues was deleting the other values not specified, now it only sets the fields partially as provided without deleting any values. #4231 (298577b)
• If you were using a field's meta with group fields (checkboxes/radio), each field had its own meta, with this release all those fields will have the exact same meta values.
• Validations are now run only when a value setter has been triggered, this should not break anything but if you were using nested values as field values you will get a warning and which alternative to use.

🆕 New Features

Component Binds

useForm now exposes a new helper defineComponentBinds which allows you to create bindable objects for your components.

This is meant as replacement for useFieldModel and should replace using useField as a model. useField is still the best way to build input fields components, but if you don't want to wrap your fields with useField especially with 3rd party UI component libraries then defineComponentBinds is the way to go.

This is an example with Vuetify:

<script>
const schema = toTypedSchema(yup.object({
  email: yup.string().email().required().label('E-mail'),
  password: yup.string().min(6).required(),
}));

const { defineComponentBinds } = useForm({
  validationSchema: schema
});

const email = defineComponentBinds('email', {
 // maps error messages to Vuetify
  mapProps: (state) => ({ 'error-messages': state.errors  })
});
const password = defineComponentBinds('password');
</script>

<template>
  <v-text-field
    v-bind="email"
    label="email"
    type="email"
  />

  <v-text-field
    v-bind="password"
    label="password"
    type="password"
   />
</template>

Input Binds

Another helper exposed by useForm is defineInputBinds which allows you to create bindable objects for your HTML elements.

<script>
const schema = toTypedSchema(yup.object({
  email: yup.string().email().required().label('E-mail'),
  password: yup.string().min(6).required(),
}));

const { defineInputBinds } = useForm({
  validationSchema: schema
});

const email = defineInputBinds('email', {
 // Adds attributes to the element, like classes, aria-attrs, etc...
  mapAttrs: (state) => ({ 'aria-invalid': state.valid ? 'false' : 'true'  })
});
const password = defineInputBinds('password');
</script>

<template>
  <input
    v-bind="email"
    label="email"
    type="email"
  />

  <input
    v-bind="password"
    label="password"
    type="password"
   />
</template>

📚 Docs update WIP

The docs will be updated throughout the week to include a new guide for the composition API and the recommended ways to set up fields depending on the different requirements.

Some of the recently added features will be missing until the re-write is complete.

🐛 Bug Fixes

• Removing a field from useFieldArray should not trigger validation for unchanged fields #4017 (7554d4a)
• fix: handle mimes with plus symbol #4230 (f5b3482)
• fix: support surrogate pairs (#4229) thanks to @NaokiHaba
• fix: Zod transforms not reflecting in output types correctly #4227 (93228b7)
• fix: corrected slot prop types for field component #4223 (b2c4967)