Merge pull request #26 from dbssman/feature/25-fix-typescript-warning-when-binding-register-function-in-vue-ts

🎯 Amend register function return type

Author: dbssman

docs/api/use-form-handler/register.md

@@ -41,12 +41,12 @@ Coming soon...
 | isDirty     | `boolean`          | Dirty state binding for the field. Only returned if `withDetails` is true |
 | isTouched     | `boolean`          | Touched state binding for the field. Only returned if `withDetails` is true |
 | onChange     | `(el: any) => Promise<void>`          | Value update handler for native inputs |
-| required     | `boolean`          | Native required validation. Only returned if `useNativeValidations` is set to true and `required` is set. |
-| min     | `number`          | Native min validation. Only returned if `useNativeValidations` is set to true and `min` is set. |
-| max     | `number`          | Native max validation. Only returned if `useNativeValidations` is set to true and `max` is set. |
-| minLength     | `number`          | Native minLength validation. Only returned if `useNativeValidations` is set to true and `minLength` is set. |
-| maxLength     | `number`          | Native maxLength validation. Only returned if `useNativeValidations` is set to true and `maxLength` is set. |
-| pattern     | `RegExp`          | Native pattern validation. Only returned if `useNativeValidations` is set to true and `pattern` is set. |
+| required     | `boolean \| string`          | Native required validation. Only returned if `useNativeValidations` is set to true and `required` is set. |
+| min     | `number \| Object`          | Native min validation. Only returned if `useNativeValidations` is set to true and `min` is set. |
+| max     | `number \| Object`          | Native max validation. Only returned if `useNativeValidations` is set to true and `max` is set. |
+| minLength     | `number \| Object`          | Native minLength validation. Only returned if `useNativeValidations` is set to true and `minLength` is set. |
+| maxLength     | `number \| Object`          | Native maxLength validation. Only returned if `useNativeValidations` is set to true and `maxLength` is set. |
+| pattern     | `string  \| RegExp \| Object`          | Native pattern validation. Only returned if `useNativeValidations` is set to true and `pattern` is set. |
 
 :::info
 Notice how `modelValue` and `'onUpdate:modelValue'` are used as our two way data binding for non-native inputs following the Vue [approach](https://vuejs.org/guide/components/v-model.html). So that your fields used for complex forms could also be re-used in other parts of your application with v-model.
@@ -254,7 +254,7 @@ export interface ValidationsConfiguration {
     max?: number | ValidationWithMessage
     minLength?: number | ValidationWithMessage
     maxLength?: number | ValidationWithMessage
-    pattern?: RegExp | ValidationWithMessage
+    pattern?: string | RegExp | ValidationWithMessage
 }
 
 export interface RegisterOptions extends ValidationsConfiguration {

src/logic/transformValidations.ts

@@ -2,37 +2,37 @@ import { ValidationsConfiguration, ValidationWithMessage, Validations } from "..
 import { max, maxLength, min, minLength, pattern, required } from "../utils";
 
 export default (validations: ValidationsConfiguration = {}): Validations => {
-    const transformed: Validations = {};
-    if (!!validations.required) {
-        transformed.required = typeof validations.required === 'string'
-            ? required(validations.required)
-            : required();
+    return {
+        ...(validations.required && {
+            required: typeof validations.required === 'string'
+                ? required(validations.required)
+                : required()
+        }),
+        ...(validations.min && {
+            min: typeof validations.min === 'number'
+                ? min(validations.min)
+                : min(validations.min.value as number, validations.min.message)
+        }),
+        ...(validations.max && {
+            max: typeof validations.max === 'number'
+                ? max(validations.max)
+                : max(validations.max.value as number, validations.max.message)
+        }),
+        ...(validations.minLength && {
+            minLength: typeof validations.minLength === 'number'
+                ? minLength(validations.minLength)
+                : minLength(validations.minLength.value as number, validations.minLength.message)
+        }),
+        ...(validations.maxLength && {
+            maxLength: typeof validations.maxLength === 'number'
+                ? maxLength(validations.maxLength)
+                : maxLength(validations.maxLength.value as number, validations.maxLength.message)
+        }),
+        ...(validations.pattern && {
+            pattern: !(validations.pattern as ValidationWithMessage)?.value
+                ? pattern((typeof validations.pattern === 'string' ? new RegExp(validations.pattern) : validations.pattern) as RegExp)
+                : pattern((validations.pattern as ValidationWithMessage).value as RegExp, (validations.pattern as ValidationWithMessage).message as string)
+        })
     }
-    if (validations.min) {
-        transformed.min = typeof validations.min === 'number'
-            ? min(validations.min)
-            : min(validations.min.value as number, validations.min.message);
-    }
-    if (validations.max) {
-        transformed.max = typeof validations.max === 'number'
-            ? max(validations.max)
-            : max(validations.max.value as number, validations.max.message);
-    }
-    if (validations.minLength) {
-        transformed.minLength = typeof validations.minLength === 'number'
-            ? minLength(validations.minLength)
-            : minLength(validations.minLength.value as number, validations.minLength.message);
-    }
-    if (validations.maxLength) {
-        transformed.maxLength = typeof validations.maxLength === 'number'
-            ? maxLength(validations.maxLength)
-            : maxLength(validations.maxLength.value as number, validations.maxLength.message);
-    }
-    if (validations.pattern) {
-        transformed.pattern = !(validations.pattern as ValidationWithMessage)?.value
-            ? pattern(validations.pattern as RegExp)
-            : pattern((validations.pattern as ValidationWithMessage).value as RegExp, (validations.pattern as ValidationWithMessage).message as string);
-    }
-    return transformed;
 }
 

src/types/register.ts

@@ -1,5 +1,5 @@
 import { BaseControlProps } from "./baseControl";
-import { ValidationsConfiguration } from "./validations";
+import { ValidationsConfiguration, NativeValidations } from "./validations";
 
 /** Function returning true for correct validation or a string with an error if it's invalid */
 export type ValidationFn = (_: any) => Promise<true | string> | true | string
@@ -28,7 +28,7 @@ export interface RegisterOptions extends ValidationsConfiguration {
     useNativeValidation?: boolean
 }
 
-export type RegisterReturn = BaseControlProps & ValidationsConfiguration
+export type RegisterReturn = BaseControlProps & NativeValidations
 
 /** Function that allows you to register a control to interact with the form */
 export type Register = (name: string, options?: RegisterOptions) => RegisterReturn

src/types/validations.ts

@@ -6,6 +6,26 @@ export interface ValidationWithMessage {
     message: string
 }
 
+export interface NativeValidations {
+    /** Required validation */
+    required?: boolean
+
+    /** Min validation */
+    min?: number
+
+    /** Max validation */
+    max?: number
+
+    /** MinLength validation */
+    minLength?: number
+
+    /** MaxLength validation */
+    maxLength?: number
+
+    /** Pattern validation */
+    pattern?: string
+}
+
 export interface ValidationsConfiguration {
     /** Required validation */
     /** If true, the field is required */
@@ -35,5 +55,5 @@ export interface ValidationsConfiguration {
     /** Pattern validation */
     /** If a RegExp, the field must match the RegExp */
     /** If an object, the field must match the object.value and the object.message is the validation message */
-    pattern?: RegExp | ValidationWithMessage
+    pattern?: string | RegExp | ValidationWithMessage
 }

src/useFormHandler.ts

@@ -1,3 +1,4 @@
+import { NativeValidations } from './types/validations';
 import { DEFAULT_FIELD_VALUE } from './core/constants';
 import {
   ModifiedValues,
@@ -218,6 +219,7 @@ const useFormHandler: FormHandler = ({
       withDetails,
       native,
       useNativeValidation,
+      pattern,
       ...nativeValidations } = options
     _initControl(name, options);
     return ({
@@ -237,7 +239,10 @@ const useFormHandler: FormHandler = ({
         onChange: async () => await handleChange(name, getNativeFieldValue(_refs[name].ref)),
       }),
       ...(useNativeValidation && {
-        ...nativeValidations
+        ...({
+          ...nativeValidations,
+          ...(pattern && { pattern: pattern instanceof RegExp ? pattern.source : pattern }),
+        } as NativeValidations)
       })
     })
   }