Skip to content
This repository was archived by the owner on Apr 9, 2025. It is now read-only.

Commit 9cae605

Browse files
dbssmandbssman
authored
Merge pull request #26 from dbssman/feature/25-fix-typescript-warning-when-binding-register-function-in-vue-ts
🎯 Amend register function return type
2 parents 02a2903 + 2662f8b commit 9cae605

File tree

5 files changed

+67
-42
lines changed

5 files changed

+67
-42
lines changed

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@ Coming soon...
4141
| isDirty | `boolean` | Dirty state binding for the field. Only returned if `withDetails` is true |
4242
| isTouched | `boolean` | Touched state binding for the field. Only returned if `withDetails` is true |
4343
| onChange | `(el: any) => Promise<void>` | Value update handler for native inputs |
44-
| required | `boolean` | Native required validation. Only returned if `useNativeValidations` is set to true and `required` is set. |
45-
| min | `number` | Native min validation. Only returned if `useNativeValidations` is set to true and `min` is set. |
46-
| max | `number` | Native max validation. Only returned if `useNativeValidations` is set to true and `max` is set. |
47-
| minLength | `number` | Native minLength validation. Only returned if `useNativeValidations` is set to true and `minLength` is set. |
48-
| maxLength | `number` | Native maxLength validation. Only returned if `useNativeValidations` is set to true and `maxLength` is set. |
49-
| pattern | `RegExp` | Native pattern validation. Only returned if `useNativeValidations` is set to true and `pattern` is set. |
44+
| required | `boolean \| string` | Native required validation. Only returned if `useNativeValidations` is set to true and `required` is set. |
45+
| min | `number \| Object` | Native min validation. Only returned if `useNativeValidations` is set to true and `min` is set. |
46+
| max | `number \| Object` | Native max validation. Only returned if `useNativeValidations` is set to true and `max` is set. |
47+
| minLength | `number \| Object` | Native minLength validation. Only returned if `useNativeValidations` is set to true and `minLength` is set. |
48+
| maxLength | `number \| Object` | Native maxLength validation. Only returned if `useNativeValidations` is set to true and `maxLength` is set. |
49+
| pattern | `string \| RegExp \| Object` | Native pattern validation. Only returned if `useNativeValidations` is set to true and `pattern` is set. |
5050

5151
:::info
5252
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 {
254254
max?: number | ValidationWithMessage
255255
minLength?: number | ValidationWithMessage
256256
maxLength?: number | ValidationWithMessage
257-
pattern?: RegExp | ValidationWithMessage
257+
pattern?: string | RegExp | ValidationWithMessage
258258
}
259259

260260
export interface RegisterOptions extends ValidationsConfiguration {

‎src/logic/transformValidations.ts

+31-31
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,37 @@ import { ValidationsConfiguration, ValidationWithMessage, Validations } from "..
22
import { max, maxLength, min, minLength, pattern, required } from "../utils";
33

44
export default (validations: ValidationsConfiguration = {}): Validations => {
5-
const transformed: Validations = {};
6-
if (!!validations.required) {
7-
transformed.required = typeof validations.required === 'string'
8-
? required(validations.required)
9-
: required();
5+
return {
6+
...(validations.required && {
7+
required: typeof validations.required === 'string'
8+
? required(validations.required)
9+
: required()
10+
}),
11+
...(validations.min && {
12+
min: typeof validations.min === 'number'
13+
? min(validations.min)
14+
: min(validations.min.value as number, validations.min.message)
15+
}),
16+
...(validations.max && {
17+
max: typeof validations.max === 'number'
18+
? max(validations.max)
19+
: max(validations.max.value as number, validations.max.message)
20+
}),
21+
...(validations.minLength && {
22+
minLength: typeof validations.minLength === 'number'
23+
? minLength(validations.minLength)
24+
: minLength(validations.minLength.value as number, validations.minLength.message)
25+
}),
26+
...(validations.maxLength && {
27+
maxLength: typeof validations.maxLength === 'number'
28+
? maxLength(validations.maxLength)
29+
: maxLength(validations.maxLength.value as number, validations.maxLength.message)
30+
}),
31+
...(validations.pattern && {
32+
pattern: !(validations.pattern as ValidationWithMessage)?.value
33+
? pattern((typeof validations.pattern === 'string' ? new RegExp(validations.pattern) : validations.pattern) as RegExp)
34+
: pattern((validations.pattern as ValidationWithMessage).value as RegExp, (validations.pattern as ValidationWithMessage).message as string)
35+
})
1036
}
11-
if (validations.min) {
12-
transformed.min = typeof validations.min === 'number'
13-
? min(validations.min)
14-
: min(validations.min.value as number, validations.min.message);
15-
}
16-
if (validations.max) {
17-
transformed.max = typeof validations.max === 'number'
18-
? max(validations.max)
19-
: max(validations.max.value as number, validations.max.message);
20-
}
21-
if (validations.minLength) {
22-
transformed.minLength = typeof validations.minLength === 'number'
23-
? minLength(validations.minLength)
24-
: minLength(validations.minLength.value as number, validations.minLength.message);
25-
}
26-
if (validations.maxLength) {
27-
transformed.maxLength = typeof validations.maxLength === 'number'
28-
? maxLength(validations.maxLength)
29-
: maxLength(validations.maxLength.value as number, validations.maxLength.message);
30-
}
31-
if (validations.pattern) {
32-
transformed.pattern = !(validations.pattern as ValidationWithMessage)?.value
33-
? pattern(validations.pattern as RegExp)
34-
: pattern((validations.pattern as ValidationWithMessage).value as RegExp, (validations.pattern as ValidationWithMessage).message as string);
35-
}
36-
return transformed;
3737
}
3838

‎src/types/register.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { BaseControlProps } from "./baseControl";
2-
import { ValidationsConfiguration } from "./validations";
2+
import { ValidationsConfiguration, NativeValidations } from "./validations";
33

44
/** Function returning true for correct validation or a string with an error if it's invalid */
55
export type ValidationFn = (_: any) => Promise<true | string> | true | string
@@ -28,7 +28,7 @@ export interface RegisterOptions extends ValidationsConfiguration {
2828
useNativeValidation?: boolean
2929
}
3030

31-
export type RegisterReturn = BaseControlProps & ValidationsConfiguration
31+
export type RegisterReturn = BaseControlProps & NativeValidations
3232

3333
/** Function that allows you to register a control to interact with the form */
3434
export type Register = (name: string, options?: RegisterOptions) => RegisterReturn

‎src/types/validations.ts

+21-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,26 @@ export interface ValidationWithMessage {
66
message: string
77
}
88

9+
export interface NativeValidations {
10+
/** Required validation */
11+
required?: boolean
12+
13+
/** Min validation */
14+
min?: number
15+
16+
/** Max validation */
17+
max?: number
18+
19+
/** MinLength validation */
20+
minLength?: number
21+
22+
/** MaxLength validation */
23+
maxLength?: number
24+
25+
/** Pattern validation */
26+
pattern?: string
27+
}
28+
929
export interface ValidationsConfiguration {
1030
/** Required validation */
1131
/** If true, the field is required */
@@ -35,5 +55,5 @@ export interface ValidationsConfiguration {
3555
/** Pattern validation */
3656
/** If a RegExp, the field must match the RegExp */
3757
/** If an object, the field must match the object.value and the object.message is the validation message */
38-
pattern?: RegExp | ValidationWithMessage
58+
pattern?: string | RegExp | ValidationWithMessage
3959
}

‎src/useFormHandler.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { NativeValidations } from './types/validations';
12
import { DEFAULT_FIELD_VALUE } from './core/constants';
23
import {
34
ModifiedValues,
@@ -218,6 +219,7 @@ const useFormHandler: FormHandler = ({
218219
withDetails,
219220
native,
220221
useNativeValidation,
222+
pattern,
221223
...nativeValidations } = options
222224
_initControl(name, options);
223225
return ({
@@ -237,7 +239,10 @@ const useFormHandler: FormHandler = ({
237239
onChange: async () => await handleChange(name, getNativeFieldValue(_refs[name].ref)),
238240
}),
239241
...(useNativeValidation && {
240-
...nativeValidations
242+
...({
243+
...nativeValidations,
244+
...(pattern && { pattern: pattern instanceof RegExp ? pattern.source : pattern }),
245+
} as NativeValidations)
241246
})
242247
})
243248
}

0 commit comments

Comments
 (0)