feat: update docs

Author: logaretm

README.md

@@ -18,7 +18,7 @@ Painless Vue forms
   <img src="https://img.shields.io/npm/dm/vee-validate.svg?color=05bd6d&label=">
 </a>
 
-<a href="https://vee-validate.logaretm.com/v4/" target="_blank">
+<a href="https://vee-validate.logaretm.com/v5/" target="_blank">
   <img src="https://img.shields.io/badge/-docs%20and%20demos-009f53">
 </a>
 
@@ -117,7 +117,7 @@ const onSubmit = handleSubmit(values => {
 </template>
 ```
 
-You can do so much more than this, for more info [check the composition API documentation](https://vee-validate.logaretm.com/v4/guide/composition-api/getting-started/).
+You can do so much more than this, for more info [check the composition API documentation](https://vee-validate.logaretm.com/v5/guide/composition-api/getting-started/).
 
 #### Declarative Components
 
@@ -150,7 +150,7 @@ function onSubmit(values) {
 </template>
 ```
 
-The `Field` component renders an `input` of type `text` by default but you can [control that](https://vee-validate.logaretm.com/v4/api/field#rendering-fields)
+The `Field` component renders an `input` of type `text` by default but you can [control that](https://vee-validate.logaretm.com/v5/api/field#rendering-fields)
 
 ## 📚 Documentation
 

docs/_redirects

@@ -1,7 +1,7 @@
 # redirects old component api paths to new one
-/guide/validation                     /v4/guide/components/validation
-/guide/handling-forms                 /v4/guide/components/handling-forms
-/guide/nested-objects-and-arrays      /v4/guide/components/nested-objects-and-arrays
-/tutorials/best-practices             /v4/guide/best-practices
+/guide/validation                     /v5/guide/components/validation
+/guide/handling-forms                 /v5/guide/components/handling-forms
+/guide/nested-objects-and-arrays      /v5/guide/components/nested-objects-and-arrays
+/tutorials/best-practices             /v5/guide/best-practices
 
-/v4/guide/composition/validation     /v4/guide/composition/getting-started
+/v5/guide/composition/validation     /v5/guide/composition/getting-started

docs/astro.config.ts

@@ -13,7 +13,7 @@ import partytown from '@astrojs/partytown';
 export default defineConfig({
   site: process.env.NODE_ENV === 'production' ? 'https://vee-validate.logaretm.com/' : 'http://localhost:4321/',
   trailingSlash: 'always',
-  base: '/v4',
+  base: '/v5',
   vite: {
     ssr: {
       noExternal: ['@vue/repl'],
@@ -23,7 +23,7 @@ export default defineConfig({
     vue(),
     sitemap(),
     mdx({
-      remarkPlugins: [baseLink('/v4'), highlight, remarkGfm],
+      remarkPlugins: [baseLink('/v5'), highlight, remarkGfm],
     }),
     svgSprite,
     partytown({

docs/package.json

@@ -17,9 +17,6 @@
     "@stackblitz/sdk": "^1.9.0",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@vee-validate/valibot": "workspace:*",
-    "@vee-validate/yup": "workspace:*",
-    "@vee-validate/zod": "workspace:*",
     "@vue/repl": "^3.0.0",
     "@vueuse/core": "^10.7.0",
     "astro": "^3.6.4",

docs/src/components/DocFlavor.vue

@@ -4,7 +4,7 @@
     <p class="mt-4">Before you go on, you should choose which flavor of vee-validate you want to use.</p>
 
     <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-8 text-white">
-      <a :href="`/v4/guide/components/${next}/`" class="bg-gray-600 hover:bg-accent-900 p-6 rounded-lg relative">
+      <a :href="`/v5/guide/components/${next}/`" class="bg-gray-600 hover:bg-accent-900 p-6 rounded-lg relative">
         <p class="text-xl font-semibold font-display">Components</p>
         <p class="mt-8">Simple, high-level, dynamic template-based higher-order components.</p>
         <p class="mt-4">Great for simple UI components and native HTML elements with custom styling.</p>
@@ -25,7 +25,7 @@
         </svg>
       </a>
 
-      <a :href="`/v4/guide/composition-api/${next}/`" class="bg-gray-600 hover:bg-accent-900 p-6 rounded-lg relative">
+      <a :href="`/v5/guide/composition-api/${next}/`" class="bg-gray-600 hover:bg-accent-900 p-6 rounded-lg relative">
         <p class="text-xl font-semibold font-display">Composition API</p>
         <p class="mt-8">Low level, intuitive composition API functions.</p>
         <p class="mt-4">Great for building complex UI form components and general purpose data validation.</p>

docs/src/components/Icon.vue

@@ -9,5 +9,5 @@ const props = defineProps<{
   name: string;
 }>();
 
-const basePath = import.meta.env.DEV ? '' : '/v4/sprite.svg';
+const basePath = import.meta.env.DEV ? '' : '/v5/sprite.svg';
 </script>

docs/src/components/Repl.vue

@@ -29,9 +29,6 @@ const store = new ReplStore({
 store.setImportMap({
   imports: {
     'vee-validate': 'https://unpkg.com/vee-validate@latest/dist/vee-validate.mjs',
-    '@vee-validate/zod': 'https://unpkg.com/@vee-validate/zod@latest/dist/vee-validate-zod.mjs',
-    '@vee-validate/yup': 'https://unpkg.com/@vee-validate/yup@latest/dist/vee-validate-yup.mjs',
-    '@vee-validate/valibot': 'https://unpkg.com/@vee-validate/valibot@latest/dist/vee-validate-valibot.mjs',
     '@vee-validate/i18n': 'https://unpkg.com/@vee-validate/i18n@latest/dist/vee-validate-i18n.esm.js',
     '@vee-validate/rules': 'https://unpkg.com/@vee-validate/rules@latest/dist/vee-validate-rules.esm.js',
     'property-expr': 'https://esm-repo.netlify.app/property-expr.esm.js',

docs/src/components/SiteHead.astro

@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
 
 const title = frontmatter?.title || 'VeeValidate: Painless Vue.js forms';
 const description = frontmatter?.description || 'Painless Vue.js forms';
-const path = frontmatter?.url || '/v4/';
+const path = frontmatter?.url || '/v5/';
 const image = generateSocialImage({
   title: title,
   tagline: description,
@@ -28,11 +28,11 @@ const links = generateLinks({
 <head>
   <title>{title}</title>
   <meta charset="utf-8" />
-  <link rel="icon" type="image/x-icon" href="/v4/img/favicon.ico" />
+  <link rel="icon" type="image/x-icon" href="/v5/img/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   {metaTags.map(t => <meta content={t.content} name={t.name} property={t.property} />)}
   {links.map(t => <link href={t.href} rel={t.rel} />)}
-  <script is:inline src="/v4/loadTheme.js"></script>
+  <script is:inline src="/v5/loadTheme.js"></script>
   <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-T7VXTJ0MFH"></script>
   <script type="text/partytown">
     window.dataLayer = window.dataLayer || [];

docs/src/components/TheHeader.vue

@@ -23,7 +23,7 @@
     </svg>
 
     <div class="flex items-center header__content px-6 lg:px-10" :class="{ 'lg:mt-8': displayWarning }">
-      <a class="mr-auto flex items-center" href="/v4/">
+      <a class="mr-auto flex items-center" href="/v5/">
         <Icon name="logo" class="h-8 w-8 lg:w-10 lg:h-10 logo" />
 
         <span

docs/src/components/UiLibraries.vue

@@ -14,8 +14,8 @@ const libraries = [
   {
     name: 'Shadcn Vue',
     link: 'https://www.shadcn-vue.com/docs/components/form',
-    logoLight: '/v4/img/shadcn.svg',
-    logoDark: '/v4/img/shadcn.svg',
+    logoLight: '/v5/img/shadcn.svg',
+    logoDark: '/v5/img/shadcn.svg',
   },
   {
     name: 'Vuetify',