feat: use internal yup types (#3123)

Author: logaretm

docs/content/api/use-form.md

@@ -128,7 +128,7 @@ type useForm = (
 
 <code-title level="4">
 
-`validationSchema?: Record<string, string | Function> | YupObjectSchema`
+`validationSchema?: Record<string, string | Function> | Yup.ShapeOf<T>`
 
 </code-title>
 

docs/content/guide/composition-api.md

@@ -157,7 +157,7 @@ import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
 const { ... } = useForm({
-  validationSchema: yup.object().shape({
+  validationSchema: yup.object({
     email: yup.string().required().email(),
     password: yup.string().required().min(3),
   })

docs/content/guide/handling-forms.md

@@ -49,7 +49,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       name: yup.string().required(),
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
@@ -88,7 +88,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       name: yup.string().required(),
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
@@ -163,7 +163,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       name: yup.string().required(),
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
@@ -211,7 +211,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       name: yup.string().required(),
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
@@ -297,7 +297,7 @@ export default {
   },
   data() {
     // Validation Schema
-    const schema = yup.object().shape({
+    const schema = yup.object({
       name: yup.string().required(),
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
@@ -462,7 +462,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       name: yup.string().required(),
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
@@ -525,7 +525,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       // ...
     });
 
@@ -591,7 +591,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       // ...
     });
 

docs/content/guide/validation.md

@@ -142,7 +142,7 @@ export default {
 Fortunately there is already a very neat way to build validation schemas for your forms by using `yup`, it allows you create validation objects like this:
 
 ```js
-const schema = yup.object().shape({
+const schema = yup.object({
   email: yup.string().required().email(),
   name: yup.string().required(),
   password: yup.string().required().min(8),
@@ -174,7 +174,7 @@ export default {
     Field,
   },
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
     });
@@ -398,7 +398,7 @@ You can do this in two ways depending on which validators you are using (yup or
 With yup it is very straightforward, you just need to call `label()` after defining your field's validations either in field level or form level:
 
 ```js
-const schema = Yup.object().shape({
+const schema = Yup.object({
   email_addr: Yup.string().email().required().label('Email Address'),
   acc_pazzword: Yup.string().min(5).required().label('Your Password'),
 });

docs/content/tutorials/best-practices.md

@@ -13,7 +13,7 @@ vee-validate's entire core size is very small, but the same can't be said about
 ```js
 import * as yup from 'yup';
 
-const schema = yup.object().shape({
+const schema = yup.object({
   email: yup.string().email(),
   // ...
 });
@@ -24,7 +24,7 @@ Instead you can leverage your bundler's tree-shaking capabilities and only impor
 ```js
 import { object, string } as yup from 'yup';
 
-const schema = object().shape({
+const schema = object({
   email: string().email(),
   // ...
 });
@@ -39,7 +39,7 @@ In most examples you probably noticed something like this:
 ```js
 {
   data() {
-    const schema = yup.object().shape({
+    const schema = yup.object({
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
     });
@@ -59,7 +59,7 @@ Instead you could either use `setup` instead of your data or [`markRaw`](https:/
 {
   setup() {
     // Non-reactive because it was not explicitly defined with `reactive` or `ref`
-    const schema = yup.object().shape({
+    const schema = yup.object({
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
     });
@@ -77,7 +77,7 @@ import { markRaw } from 'vue';
 {
   data() {
     // Non-reactive because it was explicitly defined with `markRaw`
-    const schema = markRaw(yup.object().shape({
+    const schema = markRaw(yup.object({
       email: yup.string().required().email(),
       password: yup.string().required().min(8),
     }));

docs/content/tutorials/dynamic-form-generator.md

@@ -259,7 +259,7 @@ const formSchema = {
   fields: [
     // ...
   ],
-+ validation: yup.object().shape({
++ validation: yup.object({
 +   email: yup.string().email().required(),
 +   name: yup.string().required(),
 +   password: yup.string().min(8).required(),
@@ -322,7 +322,7 @@ const formSchema = {
   fields: [
     // ...
   ],
-  validation: yup.object().shape({
+  validation: yup.object({
     // ...
   }),
 + values: {

package.json

@@ -22,7 +22,6 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@types/jest": "^26.0.19",
-    "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "@typescript-eslint/parser": "^4.12.0",
     "chalk": "^4.1.0",

packages/vee-validate/src/types.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref } from 'vue';
-import { ObjectSchema } from 'yup';
+import { SchemaOf } from 'yup';
 
 export interface ValidationResult {
   errors: string[];
@@ -75,7 +75,7 @@ export interface FormContext<TValues extends Record<string, any> = Record<string
   values: TValues;
   fields: ComputedRef<Record<keyof TValues, any>>;
   submitCount: Ref<number>;
-  schema?: Record<keyof TValues, GenericValidateFunction | string | Record<string, any>> | ObjectSchema<TValues>;
+  schema?: Record<keyof TValues, GenericValidateFunction | string | Record<string, any>> | SchemaOf<TValues>;
   validateSchema?: (shouldMutate?: boolean) => Promise<Record<keyof TValues, ValidationResult>>;
   validate(): Promise<FormValidationResult<TValues>>;
   meta: ComputedRef<{

packages/vee-validate/src/useForm.ts

@@ -1,5 +1,5 @@
 import { computed, ref, Ref, provide, reactive, onMounted, isRef, watch, unref, nextTick } from 'vue';
-import type { ObjectSchema, ValidationError } from 'yup';
+import type { SchemaOf, ValidationError } from 'yup';
 import type { useField } from './useField';
 import {
   FieldMeta,
@@ -16,9 +16,7 @@ import { getFromPath, isYupValidator, keysOf, resolveNextCheckboxValue, setInPat
 import { FormErrorsSymbol, FormContextSymbol, FormInitialValuesSymbol } from './symbols';
 
 interface FormOptions<TValues extends Record<string, any>> {
-  validationSchema?:
-    | Record<keyof TValues, GenericValidateFunction | string | Record<string, any>>
-    | ObjectSchema<TValues>;
+  validationSchema?: Record<keyof TValues, GenericValidateFunction | string | Record<string, any>> | SchemaOf<TValues>;
   initialValues?: MaybeReactive<TValues>;
   initialErrors?: Record<keyof TValues, string | undefined>;
   initialTouched?: Record<keyof TValues, boolean>;

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

@@ -344,7 +344,7 @@ describe('<Form />', () => {
   test('validation schema with yup', async () => {
     const wrapper = mountWithHoc({
       setup() {
-        const schema = yup.object().shape({
+        const schema = yup.object({
           email: yup.string().required().email(),
           password: yup.string().required().min(8),
         });
@@ -430,7 +430,7 @@ describe('<Form />', () => {
   test('cross field validation with yup schema', async () => {
     const wrapper = mountWithHoc({
       setup() {
-        const schema = yup.object().shape({
+        const schema = yup.object({
           password: yup.string().required(),
           confirmation: yup.string().oneOf([yup.ref('password')], 'passwords must match'),
         });
@@ -826,7 +826,7 @@ describe('<Form />', () => {
   test('checkboxes with yup schema', async () => {
     const wrapper = mountWithHoc({
       setup() {
-        const schema = yup.object().shape({
+        const schema = yup.object({
           drink: yup.array().required().min(1),
         });
 
@@ -878,7 +878,7 @@ describe('<Form />', () => {
     let drinks!: Ref<string[]>;
     const wrapper = mountWithHoc({
       setup() {
-        const schema = yup.object().shape({
+        const schema = yup.object({
           drink: yup.array().required().min(1),
         });
 
@@ -1118,7 +1118,7 @@ describe('<Form />', () => {
   test('validate fields on mount with validateOnMount = true', async () => {
     const wrapper = mountWithHoc({
       setup() {
-        const schema = yup.object().shape({
+        const schema = yup.object({
           email: yup.string().required().email(),
           password: yup.string().required().min(8),
         });
@@ -1259,7 +1259,7 @@ describe('<Form />', () => {
     const spy = jest.fn();
     const wrapper = mountWithHoc({
       setup() {
-        const schema = yup.object().shape({
+        const schema = yup.object({
           email: yup.string().required().email(),
           password: yup.string().required().min(8),
         });
@@ -1311,7 +1311,7 @@ describe('<Form />', () => {
     const spy = jest.fn();
     const wrapper = mountWithHoc({
       setup() {
-        const schema = yup.object().shape({
+        const schema = yup.object({
           email: yup.string().required().email(),
           password: yup.string().required().min(8),
         });