Releases: logaretm/vee-validate
v4.10.0
💣 Breaking Change
Disabled syncVModel by default #4283 (7ce9d67)
A lot of issues created because of this and valid issues and concerns by the community caused by useField auto model tracking causing unexpected behavior for a lot of people. The feature has been disabled by default starting from v4.10.0.
If you relied on useField doing auto modelValue and update:modelValue emitting then you need to turn it on by passing true to syncVModel.
const { ... } = useField('name', undefined, {
syncVModel: true,
});Check the discussion in #4283
This makes sense, because it being opt-in makes it less dangerous to cause unexpected behavior.
useForm#values is now readonly #4282 (05d957e)
the values object returned from useForm should have never been treated as mutable and the docs mentioned that a few times and didn't encourage it.
In this release, we mark it as readonly to make it clear to everyone that it should not be mutated directly. The main reason for this design choice is we need to be able to infer the user intent with those mutations. For example, if you clear an array, did you mean to reset the field or did you mean to change its value and trigger a validation?
Being able to infer the user intent is paramount for vee-validate to be able to handle such behaviors correctly, it has always been the case here, and marking it as readonly is just a hint that should've been there from the start.
This should not affect a lot of users.
💅 DX enhancements
- Allow custom models for defineComponentBinds (bfd6b00)
handleBlurcan be configured to run validations (d4fafc9)useField#syncVModelalso accepts the model prop name (3e4a7c1)- Allow multiple messages to be returned in a validator function #4322 #4318 (2cf0eec)
🐛 Bug Fixes
resetFormshould merge values #4320 (77345c4)- Use event value if no checked value for checkbox/radio #4308 (f1dc135)
- Trigger validation with setFieldValue by default #4314 (ed20891)
- Parse native number fields #4313 (6a3f9f1)
👕 TypeScript
vee-validate v4.10.0 requires [email protected] as it uses many of the newly introduced types to replace its own version of them, this should not affect your experience however it may produce type errors if you relied on some of these internal types. Like MaybeRefOrLazy replaced with MaybeRefOrGetter.
v4.9.6
v4.9.5
Contributors
Assets 2
v4.9.4
Contributors
Assets 2
v4.9.3
Contributors
Assets 2
v4.9.2
v4.9.1
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
setValueswas 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
metawith 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
useFieldArrayshould 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)
Contributors
Assets 2
v4.8.6
🆕 Nuxt Module
Published the offical vee-validate nuxt module, to install the module:
npm i @vee-validate/nuxtthen you can add it to nuxt.config.ts:
export default defineNuxtConfig({
// ...
modules: [
//...
'@vee-validate/nuxt',
],
});check the documentation for more information and how to configure it.