@regle/core 0.0.7 → 0.0.9

package/dist/index.js

@@ -202,8 +202,9 @@ function useStorage() {
       const $pending = ref(false);
       const $valid = ref(true);
       const $metadata = ref({});
-      ruleStatusStorage.value.set(path, { $pending, $valid, $metadata });
-      return { $pending, $valid, $metadata };
+      const $validating = ref(false);
+      ruleStatusStorage.value.set(path, { $pending, $valid, $metadata, $validating });
+      return { $pending, $valid, $metadata, $validating };
     }
   }
   onScopeDispose(() => {
@@ -265,6 +266,35 @@ function isEmpty(value) {
 // src/utils/composables.ts
 import { effectScope, getCurrentScope, onScopeDispose as onScopeDispose2 } from "vue";
 
+// src/utils/debounce.ts
+function debounce(func, wait, immediate) {
+  let timeout;
+  const debouncedFn = (...args) => new Promise((resolve) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = void 0;
+      if (!immediate) {
+        void Promise.resolve(func.apply(this, [...args])).then(resolve);
+      }
+    }, wait);
+    if (immediate && !timeout) {
+      void Promise.resolve(func.apply(this, [...args])).then(resolve);
+    }
+  });
+  debouncedFn.cancel = () => {
+    clearTimeout(timeout);
+    timeout = void 0;
+  };
+  debouncedFn.doImmediately = (...args) => new Promise((resolve) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = void 0;
+      void Promise.resolve(func.apply(this, [...args])).then(resolve);
+    }, 0);
+  });
+  return debouncedFn;
+}
+
 // src/core/useRegle/guards/ruleDef.guards.ts
 function isNestedRulesDef(state, rule) {
   return isObject(state.value) && isObject(rule.value) && !Object.entries(rule.value).some((rule2) => isRuleDef(rule2));
@@ -305,7 +335,13 @@ function extractRulesErrors(rules, externalErrors) {
       return rule.$message;
     }
     return null;
-  }).filter((msg) => !!msg).concat(externalErrors ?? []);
+  }).filter((msg) => !!msg).reduce((acc, value) => {
+    if (typeof value === "string") {
+      return acc?.concat([value]);
+    } else {
+      return acc?.concat(value);
+    }
+  }, []).concat(externalErrors ?? []);
 }
 function processFieldErrors(fieldStatus) {
   if (isNestedRulesStatus(fieldStatus)) {
@@ -396,7 +432,9 @@ function createReactiveRuleStatus({
 }) {
   let scope = effectScope2();
   let scopeState;
-  const { $pending, $valid, $metadata } = storage.trySetRuleStatusRef(`${path}.${ruleKey}`);
+  const { $pending, $valid, $metadata, $validating } = storage.trySetRuleStatusRef(
+    `${path}.${ruleKey}`
+  );
   function $watch() {
     scopeState = scope.run(() => {
       const $defaultMetadata = computed2(() => ({
@@ -417,26 +455,28 @@ function createReactiveRuleStatus({
       });
       const $message = computed2(() => {
         let message = "";
-        const customMessageRule = customMessages ? customMessages[ruleKey]?.message : void 0;
-        if (customMessageRule) {
-          if (typeof customMessageRule === "function") {
-            message = customMessageRule(state.value, $defaultMetadata.value);
-          } else {
-            message = customMessageRule;
-          }
-        }
-        if (isFormRuleDefinition(rule)) {
-          if (!(customMessageRule && !rule.value._patched)) {
-            if (typeof rule.value.message === "function") {
-              message = rule.value.message(state.value, $defaultMetadata.value);
+        if ($dirty.value && !$validating.value) {
+          const customMessageRule = customMessages ? customMessages[ruleKey]?.message : void 0;
+          if (customMessageRule) {
+            if (typeof customMessageRule === "function") {
+              message = customMessageRule(state.value, $defaultMetadata.value);
             } else {
-              message = rule.value.message;
+              message = customMessageRule;
             }
           }
-        }
-        if (isEmpty(message)) {
-          message = "Error";
-          console.warn(`No error message defined for ${ruleKey}`);
+          if (isFormRuleDefinition(rule)) {
+            if (!(customMessageRule && !rule.value._patched)) {
+              if (typeof rule.value.message === "function") {
+                message = rule.value.message(state.value, $defaultMetadata.value);
+              } else {
+                message = rule.value.message;
+              }
+            }
+          }
+          if (isEmpty(message)) {
+            message = "Error";
+            console.warn(`No error message defined for ${ruleKey}`);
+          }
         }
         return message;
       });
@@ -476,43 +516,48 @@ function createReactiveRuleStatus({
     deep: true
   });
   async function $validate() {
-    const validator = scopeState.$validator.value;
-    let ruleResult = false;
-    const resultOrPromise = validator(state.value, ...scopeState.$params.value);
-    if (resultOrPromise instanceof Promise) {
-      if ($dirty.value && !$pending.value) {
-        try {
-          $valid.value = true;
-          $pending.value = true;
-          const promiseResult = await resultOrPromise;
-          if (typeof promiseResult === "boolean") {
-            ruleResult = promiseResult;
+    try {
+      $validating.value = true;
+      const validator = scopeState.$validator.value;
+      let ruleResult = false;
+      const resultOrPromise = validator(state.value, ...scopeState.$params.value);
+      if (resultOrPromise instanceof Promise) {
+        if ($dirty.value && !$pending.value) {
+          try {
+            $valid.value = true;
+            $pending.value = true;
+            const promiseResult = await resultOrPromise;
+            if (typeof promiseResult === "boolean") {
+              ruleResult = promiseResult;
+            } else {
+              const { $valid: $valid2, ...rest } = promiseResult;
+              ruleResult = $valid2;
+              $metadata.value = rest;
+            }
+          } catch (e) {
+            ruleResult = false;
+          } finally {
+            $pending.value = false;
+          }
+        }
+      } else {
+        if (resultOrPromise != null) {
+          if (typeof resultOrPromise === "boolean") {
+            ruleResult = resultOrPromise;
           } else {
-            const { $valid: $valid2, ...rest } = promiseResult;
+            const { $valid: $valid2, ...rest } = resultOrPromise;
             ruleResult = $valid2;
             $metadata.value = rest;
           }
-        } catch (e) {
-          ruleResult = false;
-        } finally {
-          $pending.value = false;
         }
       }
-    } else {
-      if (resultOrPromise != null) {
-        if (typeof resultOrPromise === "boolean") {
-          ruleResult = resultOrPromise;
-        } else {
-          const { $valid: $valid2, ...rest } = resultOrPromise;
-          ruleResult = $valid2;
-          $metadata.value = rest;
-        }
+      $valid.value = ruleResult;
+      if (options.$externalErrors) {
       }
+      return ruleResult;
+    } finally {
+      $validating.value = false;
     }
-    $valid.value = ruleResult;
-    if (options.$externalErrors) {
-    }
-    return ruleResult;
   }
   function $unwatch() {
     $unwatchState();
@@ -555,8 +600,11 @@ function createReactiveFieldStatus({
   function createReactiveRulesResult() {
     const declaredRules = rulesDef.value;
     const storeResult = storage.checkRuleDeclEntry(path, declaredRules);
+    $localOptions.value = Object.fromEntries(
+      Object.entries(declaredRules).filter(([ruleKey]) => ruleKey.startsWith("$"))
+    );
     $rules.value = Object.fromEntries(
-      Object.entries(declaredRules).map(([ruleKey, rule]) => {
+      Object.entries(declaredRules).filter(([ruleKey]) => !ruleKey.startsWith("$")).map(([ruleKey, rule]) => {
         if (rule) {
           const ruleRef = toRef2(() => rule);
           return [
@@ -589,15 +637,17 @@ function createReactiveFieldStatus({
     storage.setDirtyEntry(path, $dirty.value);
   });
   const $unwatchState = watch2(state, () => {
-    if (unref2(options.autoDirty)) {
+    if (scopeState.$autoDirty.value) {
       if (!$dirty.value) {
         $dirty.value = true;
       }
     }
-    if (!unref2(options.lazy)) {
+    if (!scopeState.$lazy.value) {
       $commit();
+      if (!scopeState.$rewardEarly.value !== false) {
+        $clearExternalErrors();
+      }
     }
-    $externalErrors.value = [];
   });
   function $unwatch() {
     if ($rules.value) {
@@ -617,11 +667,32 @@ function createReactiveFieldStatus({
   }
   function $watch() {
     scopeState = scope.run(() => {
+      const $debounce = computed3(() => {
+        return $localOptions.value.$debounce;
+      });
+      const $lazy = computed3(() => {
+        if ($localOptions.value.$lazy) {
+          return $localOptions.value.$lazy;
+        }
+        return unref2(options.lazy);
+      });
+      const $rewardEarly = computed3(() => {
+        if ($localOptions.value.$rewardEarly) {
+          return $localOptions.value.$rewardEarly;
+        }
+        return unref2(options.rewardEarly);
+      });
+      const $autoDirty = computed3(() => {
+        if ($localOptions.value.$autoDirty) {
+          return $localOptions.value.$autoDirty;
+        }
+        return unref2(options.autoDirty);
+      });
       const $error = computed3(() => {
         return $invalid.value && !$pending.value && $dirty.value;
       });
       const $pending = computed3(() => {
-        if (triggerPunishment.value || !unref2(options.rewardEarly)) {
+        if (triggerPunishment.value || !$rewardEarly.value) {
           return Object.entries($rules.value).some(([key, ruleResult]) => {
             return ruleResult.$pending;
           });
@@ -629,7 +700,9 @@ function createReactiveFieldStatus({
         return false;
       });
       const $invalid = computed3(() => {
-        if (triggerPunishment.value || !unref2(options.rewardEarly)) {
+        if ($externalErrors.value?.length) {
+          return true;
+        } else if (triggerPunishment.value || !$rewardEarly.value) {
           return Object.entries($rules.value).some(([key, ruleResult]) => {
             return !ruleResult.$valid;
           });
@@ -637,7 +710,9 @@ function createReactiveFieldStatus({
         return false;
       });
       const $valid = computed3(() => {
-        if (unref2(options.rewardEarly)) {
+        if ($externalErrors.value?.length) {
+          return false;
+        } else if ($rewardEarly.value) {
           return Object.entries($rules.value).every(([key, ruleResult]) => {
             return ruleResult.$valid;
           });
@@ -649,14 +724,19 @@ function createReactiveFieldStatus({
         $error,
         $pending,
         $invalid,
-        $valid
+        $valid,
+        $debounce,
+        $lazy,
+        $rewardEarly,
+        $autoDirty
       };
     });
   }
   const $rules = ref2();
+  const $localOptions = ref2();
   createReactiveRulesResult();
   const $unwatchValid = watch2(scopeState.$valid, (valid) => {
-    if (unref2(options.rewardEarly) && valid) {
+    if (scopeState.$rewardEarly.value && valid) {
       triggerPunishment.value = false;
     }
   });
@@ -667,15 +747,18 @@ function createReactiveFieldStatus({
   function $touch() {
     $dirty.value = true;
   }
-  function $commit() {
+  const $commit = debounce($commitHandler, scopeState.$debounce.value ?? 0);
+  function $commitHandler() {
     Object.entries($rules.value).map(([key, rule]) => {
       return rule.$validate();
     });
   }
-  async function $validate() {
+  const $validate = debounce($validateHandler, scopeState.$debounce.value ?? 0);
+  async function $validateHandler() {
     try {
+      $clearExternalErrors();
       triggerPunishment.value = true;
-      const results = await Promise.all(
+      const results = await Promise.allSettled(
         Object.entries($rules.value).map(([key, rule]) => {
           return rule.$validate();
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regle/core",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Vue form validator",
   "scripts": {
     "lint": "eslint --ext .ts --ext .vue .",