Merge branch 'master' into feature/23-reduce-final-package-size

Author: Daniel Requejo

docs/.vitepress/config.cts

@@ -38,21 +38,21 @@ export default defineConfig({
       },
       {
         text: 'Guides', collapsible: true, items: [
-          { text: 'Validation', link: '/guides/validation' },
-          { text: 'Typescript', link: '/guides/typescript' },
-          { text: 'Form submission', link: '/guides/form-submission' },
           { text: 'Custom components', link: '/guides/custom-components' },
+          { text: 'Material libraries', link: '/guides/material-libraries' },
           { text: 'Native support', link: '/guides/native-support' },
+          { text: 'Typescript', link: '/guides/typescript' },
+          { text: 'Validation', link: '/guides/validation' },
         ]
       },
       {
         text: 'Examples', collapsible: true, items: [
-          { text: 'Basic', link: '/examples/basic' },
           { text: 'Async validations', link: '/examples/async-validations' },
-          { text: 'Typescript', link: '/examples/typescript' },
-          { text: 'Interceptor', link: '/examples/interceptor' },
+          { text: 'Basic', link: '/examples/basic' },
           { text: 'Dependent fields', link: '/examples/dependent-fields' },
-          { text: 'More examples', link: '/examples/more-examples' }
+          { text: 'Interceptor', link: '/examples/interceptor' },
+          { text: 'More examples', link: '/examples/more-examples' },
+          { text: 'Typescript', link: '/examples/typescript' },
         ]
       },
       {

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

@@ -30,7 +30,7 @@ export default (validations: ValidationsConfiguration = {}): Validations => {
         }),
         ...(validations.pattern && {
             pattern: !(validations.pattern as ValidationWithMessage)?.value
-                ? pattern(validations.pattern as RegExp)
+                ? 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)
         })
     }

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)
       })
     })
   }