fix: [minLength] Parameter isn't a number, got parameter: true #31

.github/ISSUE_TEMPLATE/bug_report.md

@@ -21,7 +21,11 @@ A clear and concise description of what the bug is.
 A clear and concise description of what you expected to happen.
 
 **Reproduction**
-Please provide a reproduction link or repo
+Please provide a reproduction.
+
+Use this template to help me identity the problem:
+
+<a href='https://stackblitz.com/~/github.com/victorgarciaesgi/regle-reproduction?file=src/views/Home.vue' target='_blank'><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg"/></a>
 
 **Screenshots**
 If applicable, add screenshots or recordings to help explain your problem.

docs/.vitepress/theme/custom.scss

@@ -117,7 +117,7 @@ html.dark {
     align-items: flex-start;
   }
 
-  ul {
+  ul:not(.text-red-400) {
     margin-bottom: 0;
     color: var(--vp-c-form-error);
     font-size: 14px;

docs/src/core-concepts/rules/built-in-rules.md

@@ -28,6 +28,12 @@ bun add @regle/rules
 
 :::
 
+:::tip
+Every built-in rule will check if the value of the field is set before checking if it's valid.
+
+This allow to have rules even if the field is not required.
+:::
+
 ## `required`
 
 Requires non-empty data. Checks for empty arrays and strings containing only whitespaces.

packages/rules/src/helpers/applyIf.ts

@@ -6,6 +6,7 @@ import type {
   RegleRuleMetadataDefinition,
   RegleRuleMetadataConsumer,
   RegleRuleDefinitionWithMetadataProcessor,
+  RegleRuleRaw,
 } from '@regle/core';
 import { createRule, InternalRuleType, unwrapRuleParameters } from '@regle/core';
 
@@ -37,10 +38,10 @@ export function applyIf<
     _params = rule._params?.concat([_condition] as any);
   }
 
-  function newValidator(value: any) {
+  function newValidator(value: any, ...args: any[]) {
     const [condition] = unwrapRuleParameters<[boolean]>([_condition]);
     if (condition) {
-      return validator(value, condition);
+      return validator(value, ...args);
     }
     return true;
   }
@@ -52,12 +53,19 @@ export function applyIf<
 
   const newRule = createRule({
     type: _type as any,
-    validator: newValidator as any,
+    validator: newValidator,
     active: newActive,
     message: _message,
-  });
+  }) as RegleRuleRaw;
 
-  newRule._params = _params as any;
+  const newParams = [...(_params ?? [])] as [];
+  newRule._params = newParams as any;
 
-  return newRule as any;
+  if (typeof newRule === 'function') {
+    const executedRule = newRule(...newParams);
+    executedRule._message_patched = true;
+    return executedRule as any;
+  } else {
+    return newRule as any;
+  }
 }

packages/rules/src/helpers/tests/applyIf.spec.ts

@@ -2,7 +2,7 @@ import type { RegleRuleDefinition } from '@regle/core';
 import { useRegle } from '@regle/core';
 import { mount } from '@vue/test-utils';
 import { defineComponent, nextTick, ref } from 'vue';
-import { required } from '../../rules';
+import { minLength, required } from '../../rules';
 import { applyIf } from '../applyIf';
 import { createRegleComponent } from '../../../../../tests/utils/test.utils';
 
@@ -49,6 +49,7 @@ describe('applyIf helper', () => {
         email: '',
         name: '',
         count: 0,
+        field: '',
       });
 
       return useRegle(form, () => ({
@@ -58,18 +59,23 @@ describe('applyIf helper', () => {
         name: {
           error: applyIf(form.value.count === 1, (value) => required.exec(value)),
         },
+        field: {
+          error: applyIf(form.value.count === 1, minLength(3)),
+        },
       }));
     });
 
     expect(vm.r$.$fields.email.$rules.error.$params).toStrictEqual([false]);
     expect(vm.r$.$fields.name.$rules.error.$params).toStrictEqual([false]);
+    expect(vm.r$.$fields.field.$rules.error.$params).toStrictEqual([3, false]);
 
     vm.r$.$value.count = 1;
 
     await vm.$nextTick();
 
     expect(vm.r$.$fields.email.$rules.error.$params).toStrictEqual([true]);
     expect(vm.r$.$fields.name.$rules.error.$params).toStrictEqual([true]);
+    expect(vm.r$.$fields.field.$rules.error.$params).toStrictEqual([3, true]);
   });
 
   it('should have correct types', () => {

playground/vue3/src/components/Test14.vue

@@ -23,14 +23,17 @@
 
 <script setup lang="ts">
 import { useRegle } from '@regle/core';
-import { requiredIf } from '@regle/rules';
+import { applyIf, minLength, required } from '@regle/rules';
 import { ref } from 'vue';
 import JSONViewer from './JSONViewer.vue';
 
 const form = ref({ name: '' });
 const condition = ref(false);
 
 const { r$ } = useRegle(form, {
-  name: { required: requiredIf(condition) },
+  name: {
+    required: applyIf(condition, required),
+    minLength: applyIf(condition, minLength(3)),
+  },
 });
 </script>