docs: update docs to align with 31 rc

docs/package.json

@@ -31,7 +31,7 @@
     "shiki": "^0.14.6",
     "tailwindcss": "^3.3.6",
     "unist-util-visit": "^5.0.0",
-    "valibot": "^0.28.1",
+    "valibot": "0.31.0-rc.12",
     "vee-validate": "^4.13.0",
     "vue": "^3.4.26",
     "yup": "^1.3.2",

docs/src/components/Repl.vue

@@ -39,7 +39,7 @@ store.setImportMap({
     toposort: 'https://esm-repo.netlify.app/topsort.esm.js',
     yup: 'https://unpkg.com/yup@1.2.0/index.esm.js',
     zod: 'https://unpkg.com/zod@3.21.4/lib/index.mjs',
-    valibot: 'https://unpkg.com/valibot@0.21.0/dist/index.js',
+    valibot: 'https://unpkg.com/valibot@0.31.0-rc.12/dist/index.js',
     '@vue/devtools-api': 'https://unpkg.com/@vue/devtools-api@6.5.0/lib/esm/index.js',
     vue: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.prod.js`,
   },

docs/src/components/examples/CompositionInputFieldValibot.vue

@@ -6,7 +6,10 @@
 <script setup>
 import { useField } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/valibot';
-import { string, email, minLength } from 'valibot';
+import * as v from 'valibot';
 
-const { value, errorMessage } = useField('email', toTypedSchema(string([minLength(1, 'Required'), email()])));
+const { value, errorMessage } = useField(
+  'email',
+  toTypedSchema(v.pipe(v.string(), v.email('Invalid email'), v.nonEmpty('Required'))),
+);
 </script>

docs/src/components/examples/CompositionValibotBasic.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/valibot';
-import { email as emailValidator, string, minLength, object } from 'valibot';
+import * as v from 'valibot';
 
 const { errors, defineField } = useForm({
   validationSchema: toTypedSchema(
-    object({
-      email: string([minLength(1, 'Email is required'), emailValidator()]),
-      password: string([minLength(6, 'password too short')]),
+    v.object({
+      email: v.pipe(v.string(), v.email('Invalid Email'), v.nonEmpty('Email is required')),
+      password: v.pipe(v.string(), v.minLength(6, 'password too short')),
     }),
   ),
 });

docs/src/pages/guide/composition-api/getting-started.mdx

@@ -285,13 +285,13 @@ Then you can wrap your Valibot schemas with `toTypedSchema` function which allow
 
 ```ts
 import { useForm } from 'vee-validate';
-import { string, object, email, minLength } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 // Creates a typed schema for vee-validate
 const schema = toTypedSchema(
-  object({
-    email: string([minLength(1, 'required'), email()]),
+  v.object({
+    email: v.pipe(v.string(), v.email('Invalid email'), v.nonEmpty('required')),
   }),
 );
 

docs/src/pages/guide/composition-api/typed-schema.mdx

@@ -299,15 +299,15 @@ This makes the form values and submitted values typed automatically and caters f
 
 ```ts
 import { useForm } from 'vee-validate';
-import { object, string, minLength } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 const { values, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
-    object({
-      email: string([minLength(1, 'required')]),
-      password: string([minLength(1, 'required')]),
-      name: string(),
+    v.object({
+      name: v.pipe(string()),
+      email: v.pipe(v.string() v.nonEmpty('required')),
+      password: v.pipe(string(), v.minLength(6, 'Must be at least 6 characters')),
     }),
   ),
 });
@@ -331,14 +331,14 @@ You can also define default values on your schema directly and it will be picked
 
 ```ts
 import { useForm } from 'vee-validate';
-import { object, string, optional, minLength } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 const { values, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
-    object({
-      email: optional(string([minLength(1, 'required')]), 'something@email.com'),
-      password: optional(string([minLength(1, 'required')]), ''),
+    v.object({
+      email: v.optional(v.pipe(string(), v.nonEmpty('required')), 'something@email.com'),
+      password: optional(v.pipe(v.string(), v.nonEmpty('required')), ''),
       name: optional(string(), ''),
     }),
   ),
@@ -353,13 +353,16 @@ You can also define transforms to cast your fields before submission:
 
 ```ts
 import { useForm } from 'vee-validate';
-import { object, number, coerce, any } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 const { values, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
     object({
-      age: coerce(any(), arg => Number(arg)),
+      age: v.pipe(
+        v.unknown(),
+        v.transform(v => Number(v)),
+      ),
     }),
   ),
 });