fix: validator triggering too many times #32, field does not become d…

…irty after touching it #33
victorgarciaesgi · Dec 12, 2024 · 662192b · 662192b
1 parent 1caf6a5
commit 662192b
Show file tree

Hide file tree

Showing 15 changed files with 658 additions and 211 deletions.
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -8,7 +8,6 @@ import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client';
 import type { EnhanceAppContext } from 'vitepress';
 import 'virtual:group-icons.css';
 import { createPinia } from 'pinia';
-import './tailwind.postcss';
 
 export default {
   extends: DefaultTheme,

diff --git a/docs/src/demo/FieldError.vue b/docs/src/demo/FieldError.vue
diff --git a/docs/src/demo/SimpleDemo.vue b/docs/src/demo/SimpleDemo.vue
diff --git a/docs/src/examples/simple.md b/docs/src/examples/simple.md
@@ -2,10 +2,6 @@
 title: Simple demo
 ---
 
-<script setup>
-import SimpleDemo from '../demo/SimpleDemo.vue';
-</script>
-
 # Simple demo
 
 You can play with the code of this example in the stackblitz sandbox.
@@ -20,8 +16,5 @@ Don't forgot to install the `Vue` extension in the online IDE.
 </a>
 
 
-## Rendered demo
-
-<SimpleDemo/>
 
 
diff --git a/...ges/core/src/core/useRegle/useStateProperties/collections/createReactiveCollectionRoot.ts b/...ges/core/src/core/useRegle/useStateProperties/collections/createReactiveCollectionRoot.ts
@@ -443,13 +443,13 @@ export function createReactiveCollectionStatus({
     });
 
     if (filterNullishValues) {
-      dirtyFields = dirtyFields.filter((value) => {
-        if (isObject(value)) {
-          return !isEmpty(value);
-        } else {
-          return !!value;
-        }
-      });
+      if (
+        dirtyFields.every((value) => {
+          return isEmpty(value);
+        })
+      ) {
+        dirtyFields = [];
+      }
     }
     return dirtyFields;
   }

diff --git a/packages/core/src/core/useRegle/useStateProperties/createReactiveFieldStatus.ts b/packages/core/src/core/useRegle/useStateProperties/createReactiveFieldStatus.ts
@@ -453,10 +453,14 @@ export function createReactiveFieldStatus({
     $reset();
   }
 
-  function $extractDirtyFields(filterNullishValues: boolean = true): any | null {
+  function $extractDirtyFields(filterNullishValues: boolean = true): unknown | null | { _null: true } {
     if ($dirty.value) {
       return state.value;
     }
+    if (filterNullishValues) {
+      // Differenciate untouched empty values from dirty empty ones
+      return { _null: true };
+    }
     return null;
   }
 

diff --git a/packages/core/src/core/useRegle/useStateProperties/createReactiveNestedStatus.ts b/packages/core/src/core/useRegle/useStateProperties/createReactiveNestedStatus.ts
@@ -371,20 +371,24 @@ export function createReactiveNestedStatus({
     createReactiveFieldsStatus();
   }
 
+  function filterNullishFields(fields: [string, unknown][]) {
+    return fields.filter(([key, value]) => {
+      if (isObject(value)) {
+        return !(value && typeof value === 'object' && '_null' in value) && !isEmpty(value);
+      } else if (Array.isArray(value)) {
+        return value.length;
+      } else {
+        return true;
+      }
+    });
+  }
+
   function $extractDirtyFields(filterNullishValues: boolean = true): Record<string, any> {
-    let dirtyFields = Object.entries($fields.value).map(([key, field]) => {
+    let dirtyFields: [string, unknown][] = Object.entries($fields.value).map(([key, field]) => {
       return [key, field.$extractDirtyFields(filterNullishValues)];
     });
     if (filterNullishValues) {
-      dirtyFields = dirtyFields.filter(([key, value]) => {
-        if (isObject(value)) {
-          return !isEmpty(value);
-        } else if (Array.isArray(value)) {
-          return value.length;
-        } else {
-          return !!value;
-        }
-      });
+      dirtyFields = filterNullishFields(dirtyFields);
     }
     return Object.fromEntries(dirtyFields);
   }

diff --git a/packages/core/src/core/useRegle/useStateProperties/createReactiveRuleStatus.ts b/packages/core/src/core/useRegle/useStateProperties/createReactiveRuleStatus.ts
@@ -158,9 +158,7 @@ export function createReactiveRuleStatus({
       } satisfies ScopeState;
     })!;
 
-    $unwatchState = watch(scopeState.$params, $validate, {
-      deep: true,
-    });
+    $unwatchState = watch(scopeState.$params, $validate);
   }
 
   $watch();

diff --git a/playground/vue3/src/App.vue b/playground/vue3/src/App.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- <TestForm /> -->
-  <Test14 />
+  <Test15 />
 </template>
 
 <script setup lang="ts">
-import Test14 from './components/Test14.vue';
+import Test15 from './components/Test15.vue';
 
 // const form = ref({ name: [{ foo: '' }] });