chore: updated docs and improved external errors type

docs/.vitepress/config.ts

@@ -46,7 +46,7 @@ const AdvancedUsage: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildre
   { text: 'Using metadata from rules', link: '/advanced-usage/rule-metadata' },
   { text: 'Rules operators', link: '/advanced-usage/rules-operators' },
   { text: 'Validation helpers', link: '/advanced-usage/validations-helpers' },
-  { text: 'Usage with Zod', link: '/advanced-usage/usage-with-zod' },
+  { text: 'Async validation', link: '/advanced-usage/async-validation' },
 ];
 
 const Typescript: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildren)[] = [
@@ -60,6 +60,17 @@ const Typescript: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildren)[
   },
 ];
 
+const Integrations: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildren)[] = [
+  {
+    text: 'Nuxt',
+    link: '/integrations/nuxt',
+  },
+  {
+    text: 'Zod',
+    link: '/integrations/zod',
+  },
+];
+
 const Examples: DefaultTheme.NavItemWithLink[] = [{ text: 'Simple form example', link: '/examples/simple' }];
 
 const Troubleshooting: DefaultTheme.NavItemWithLink[] = [
@@ -95,7 +106,6 @@ export default defineConfig({
         text: 'Introduction',
         items: [
           { text: 'Getting Started', link: '/introduction/' },
-          { text: 'Integrations', link: '/introduction/integrations' },
           { text: 'Comparisons', link: '/introduction/comparisons' },
         ],
         collapsed: false,
@@ -113,17 +123,22 @@ export default defineConfig({
       {
         text: 'Advanced Usage',
         items: AdvancedUsage,
-        collapsed: false,
+        collapsed: true,
+      },
+      {
+        text: 'Integrations',
+        items: Integrations,
+        collapsed: true,
       },
       {
         text: 'Examples',
         items: Examples,
-        collapsed: false,
+        collapsed: true,
       },
       {
         text: 'Troubleshooting',
         items: Troubleshooting,
-        collapsed: false,
+        collapsed: true,
       },
     ],
     socialLinks: [{ icon: 'github', link: 'https://github.com/victorgarciaesgi/regle' }],

docs/.vitepress/theme/custom.scss

@@ -112,6 +112,10 @@ iframe {
         flex-flow: row wrap;
         align-items: center;
         gap: 8px;
+
+        .delete {
+          cursor: pointer;
+        }
       }
     }
   }
@@ -182,7 +186,7 @@ iframe {
 
   .password-strength {
     margin: 8px 8px 0 8px;
-    width: 150px;
+    width: 170px;
     height: 4px;
     border-radius: 4px;
     border: 1px solid var(--vp-c-border);

docs/src/advanced-usage/async-validation.md

@@ -0,0 +1,8 @@
+---
+title: Async validations
+---
+
+
+# Async validation
+
+TODO

docs/src/introduction/integrations.md → docs/src/integrations/nuxt.md

@@ -1,11 +1,9 @@
 ---
-title: Integrations
+title: Nuxt
 ---
 
-# Integrations
 
-
-## Nuxt <span data-title="nuxt"></span>
+# Nuxt <span data-title="nuxt"></span>
 
 Adding the Nuxt module enables auto-imports for selected exports.
 
@@ -58,28 +56,3 @@ The following exports will become globally available in your Nuxt application:
 - `@regle/zod` (if present)
   - useZodRegle
 
-
-
-## Zod <span data-title="zod"></span>
-
-Regle offers an adapter for [Zod](https://zod.dev/). You can use any zod object schema to validate your state. It offers the same DX as using `@regle/rules`.
-
-Check [documentation for Zod](/advanced-usage/usage-with-zod)
-
-::: code-group
-```sh [pnpm]
-pnpm add @regle/zod
-```
-
-```sh [npm]
-npm install @regle/zod
-```
-
-```sh [yarn]
-yarn add @regle/zod
-```
-
-```sh [bun]
-bun add @regle/zod
-```
-:::

docs/src/advanced-usage/usage-with-zod.md → docs/src/integrations/zod.md

@@ -5,20 +5,17 @@ title: Zod
 <script setup>
 import QuickUsage from '../parts/components/zod/QuickUsage.vue';
 import ComputedSchema from '../parts/components/zod/ComputedSchema.vue';
-
 </script>
 
-# Usage with Zod
-
-## Prerequisites
+# Zod <span data-title="zod"></span>
 
-- `zod` version `3` or higher.
+Regle offers an adapter for [Zod](https://zod.dev/). You can use any zod object schema to validate your state. It offers the same DX as using `@regle/rules`.
 
+## Prerequisites
 
-## Installation
+- `zod` version `3.x`
 
 ::: code-group
-
 ```sh [pnpm]
 pnpm add @regle/zod
 ```
@@ -37,6 +34,7 @@ bun add @regle/zod
 :::
 
 
+
 ## Usage
 
 
@@ -125,3 +123,4 @@ async function submit() {
 }
 
 ```
+

docs/src/parts/components/collections/AccessingCurrentItemState.vue

@@ -14,7 +14,7 @@
             <label>Required</label>
           </div>
 
-          <div v-if="form.collection.length > 1" @click="form.collection.splice(index, 1)">❌</div>
+          <div v-if="form.collection.length > 1" class="delete" @click="form.collection.splice(index, 1)">🗑️</div>
         </div>
 
         <ul v-if="item.$fields.name.$errors.length">
@@ -51,7 +51,9 @@ function shuffle(arr: any[], options?: any) {
   var shuffleAll = options && options.shuffleAll;
   var result = arr.slice();
 
-  var i = arr.length, rand, temp;
+  var i = arr.length,
+    rand,
+    temp;
 
   while (--i > 0) {
     do {
@@ -63,7 +65,7 @@ function shuffle(arr: any[], options?: any) {
       result[rand] = temp;
     }
   }
-  
+
   return result;
 }
 

docs/src/parts/components/collections/DisplayingCollectionErrors.vue

@@ -9,7 +9,7 @@
             placeholder="Type an item value"
           />
 
-          <div v-if="form.collection.length > 1" @click="form.collection.splice(index, 1)">❌</div>
+          <div v-if="form.collection.length > 1" class="delete" @click="form.collection.splice(index, 1)">🗑️</div>
         </div>
 
         <ul v-if="item.$fields.name.$errors.length">
@@ -48,7 +48,9 @@ function shuffle(arr: any[], options?: any) {
   var shuffleAll = options && options.shuffleAll;
   var result = arr.slice();
 
-  var i = arr.length, rand, temp;
+  var i = arr.length,
+    rand,
+    temp;
 
   while (--i > 0) {
     do {
@@ -61,7 +63,7 @@ function shuffle(arr: any[], options?: any) {
       result[rand] = temp;
     }
   }
-  
+
   return result;
 }
 

docs/src/parts/components/collections/ValidatingArray.vue

@@ -9,7 +9,7 @@
             placeholder="Type an item value"
           />
 
-          <div v-if="form.collection.length > 1" @click="form.collection.splice(index, 1)">❌</div>
+          <div v-if="form.collection.length > 1" class="delete" @click="form.collection.splice(index, 1)">🗑️</div>
         </div>
 
         <ul v-if="item.$fields.name.$errors.length">
@@ -25,7 +25,7 @@
         {{ error }}
       </li>
     </ul>
-    
+
     <div class="button-list">
       <button type="button" @click="form.collection.push({ name: '' })">🆕 Add item</button>
       <button type="button" @click="r$.$resetAll">Reset</button>

docs/src/parts/components/modifiers/ExternalErrors.vue

@@ -31,7 +31,7 @@
           </li>
         </ul>
       </div>
-      
+
       <div>
         <button type="button" @click="submit">Submit</button>
         <button type="button" @click="r$.$clearExternalErrors">Reset Errors</button>

docs/src/troubleshooting/reactivity.md

@@ -11,55 +11,58 @@ When using `useRegle` with a getter function or a computed property, Regle autom
 To illustrate the issue, consider the following example:
 
 ```ts twoslash
-// @noErrors
+const form = ref({
+    items: [] as {weight: number}[]
+})
+//---cut---
 import { ref, computed } from 'vue';
 import { withMessage } from '@regle/rules';
+import {type Maybe, type RegleComputedRules} from '@regle/core';
 
 const condition = ref(false)
 
 const weight = (greeting: string) => {
-    return withMessage(value => {
-        return value > 1 && condition.value === true
+    return withMessage((value: Maybe<number>) => {
+        return !!value && value > 1 && condition.value === true
     }, `Weight must be greater than 1, ${greeting}`)
 }
 
 const rules = computed(() => {
     return {
         items: {
-            $each: item => ({
+            $each: (item) => ({
                 weight: {
                     weight: weight('Hello World')
                 }
             })
         }
-    }
+    } satisfies RegleComputedRules<typeof form>
 })
 ```
 
 In the above example, the `weight` rule depends on the `condition` ref, which is not tracked by Regle because it is inside a function and Vue cannot collect the reference. To fix this, you can either use the `withParams` wrapper or use the `createRule` function which automatically tracks dependencies for you.
 
 ```ts twoslash
-// @noErrors
 import { ref } from 'vue';
 import { withParams, withMessage } from '@regle/rules';
-import { createRule } from '@regle/core';
+import { createRule, type Maybe } from '@regle/core';
 
 const condition = ref(false)
 
 // Usage with `withParams`
 const weight1 = (greeting: string) => {
     return withMessage(
-        withParams(value => {
-            return value > 1 && condition.value === true
+        withParams((value: Maybe<number>) => {
+            return !!value && value > 1 && condition.value === true
         }, [condition]),
         `Weight must be greater than 1, ${greeting}`
     )
 }
 
 // Usage with `createRule`
 const weight2 = createRule({
-    validator(value: Maybe<number | string>, greeting: string, condition: boolean) {
-        return value > 1 && condition === true
+    validator(value: Maybe<number>, greeting: string, condition: boolean) {
+        return !!value && value > 1 && condition === true
     },
 
     message: ({ $params: [greeting] }) => {

packages/core/src/types/rules/rule.errors.types.ts

@@ -3,30 +3,42 @@ import type { MaybeRef, UnwrapNestedRefs } from 'vue';
 import type { ReglePartialRuleTree } from './rule.declaration.types';
 import type { DeepSafeFormState, SafeFieldProperty } from '../core';
 import type { ExtendOnlyRealRecord, Maybe, Prettify } from '../utils';
+import type { PartialObjectDeep } from 'type-fest/source/partial-deep';
 
 export type RegleErrorTree<TState = MaybeRef<Record<string, any> | any[]>> = {
   readonly [K in keyof UnwrapNestedRefs<TState>]: RegleValidationErrors<UnwrapNestedRefs<TState>[K]>;
 };
 
-export type RegleExternalErrorTree<TState = Record<string, any> | any[]> = PartialDeep<
-  RegleErrorTree<TState>,
-  { recurseIntoArrays: true }
->;
+export type RegleExternalErrorTree<TState = MaybeRef<Record<string, any> | any[]>> = {
+  readonly [K in keyof UnwrapNestedRefs<TState>]?: RegleValidationErrors<UnwrapNestedRefs<TState>[K], true>;
+};
 
-export type RegleValidationErrors<TState extends Record<string, any> | any[] | unknown = never> =
+export type RegleValidationErrors<
+  TState extends Record<string, any> | any[] | unknown = never,
+  TExternal extends boolean = false,
+> =
   NonNullable<TState> extends Array<infer U extends Record<string, any>>
-    ? RegleCollectionErrors<U>
+    ? TExternal extends false
+      ? RegleCollectionErrors<U>
+      : RegleExternalCollectionErrors<U>
     : NonNullable<TState> extends Date | File
       ? string[]
       : NonNullable<TState> extends Record<string, any>
-        ? RegleErrorTree<TState>
+        ? TExternal extends false
+          ? RegleErrorTree<TState>
+          : RegleExternalErrorTree<TState>
         : string[];
 
 export type RegleCollectionErrors<TState extends Record<string, any>> = {
   readonly $self: string[];
   readonly $each: RegleValidationErrors<TState>[];
 };
 
+export type RegleExternalCollectionErrors<TState extends Record<string, any>> = {
+  readonly $self?: string[];
+  readonly $each?: RegleValidationErrors<TState, true>[];
+};
+
 /** @internal */
 export type $InternalRegleCollectionErrors = {
   readonly $self?: string[];

packages/nuxt/test/nuxt.spec.ts

@@ -1,7 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { fileURLToPath } from 'node:url';
 import { setup, $fetch } from '@nuxt/test-utils/e2e';
-import { createResolver } from '@nuxt/kit';
 
 describe('ssr', async () => {
   await setup({