🦄 Added in-build validations

Author: Daniel Requejo

src/index.ts

@@ -2,4 +2,4 @@ export { default as FormHandler } from './FormHandler'
 export { default as useFormHandler } from './useFormHandler'
 
 export * from './core/constants'
-export * from './types/formHandler'
+export * from './types'

src/logic/index.ts

@@ -2,4 +2,5 @@ export { default as getNativeFieldValue } from './getNativeFieldValue'
 export { default as getDefaultFieldValue } from './getDefaultFieldValue'
 export { default as validateField } from './validateField'
 export { default as validateForm } from './validateForm'
-export { default as refFn } from './refFn'
+export { default as refFn } from './refFn'
+export { default as transformValidations } from './transformValidations'

src/logic/refFn.ts

@@ -1,4 +1,4 @@
-import { Refs, FieldReference } from "../types/formHandler";
+import { Refs, FieldReference } from "../types";
 import { isCheckboxInput, isMultipleSelect, isNativeControl, isRadioInput } from "../utils"
 
 export default (name: string, _refs: Refs, values: any) => (fieldRef: any) => {
@@ -13,11 +13,11 @@ export default (name: string, _refs: Refs, values: any) => (fieldRef: any) => {
         }
         return
     }
-    const isFirstRegister = !_refs[name].ref
+    const isFirstRegister = _refs[name] && (!_refs[name].ref
         || (Array.isArray(_refs[name].ref)
             && isRadioInput(fieldRef)
             && (!(_refs[name].ref as FieldReference[])
-                .some((option: any) => option.value === fieldRef.value)))
+                .some((option: any) => option.value === fieldRef.value))))
     if (isFirstRegister) {
         _refs[name].ref = isRadioInput(fieldRef)
             ? [...(_refs[name].ref as FieldReference[] || [])

src/logic/transformValidations.ts

@@ -0,0 +1,38 @@
+import { ValidationsConfiguration, ValidationWithMessage, Validations } from "../types";
+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();
+    }
+    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/playground/App.vue

@@ -2,13 +2,21 @@
     <form @submit.prevent="() => handleSubmit(submitForm)">
         <h2> VSSTS </h2>
         <input v-bind="register('hello', {
-            useNativeValidation: true,
-            required: true,
+            required: 'Something is required',
+            pattern: /^[A-Za-z]+$/i
+        })"><br>
+        <input type="number" v-bind="register('hello2', {
+            min: 5,
+            max: 10
+        })"><br>
+        <input v-bind="register('hello3', {
+            minLength: {
+                value: 5,
+                message: 'Min length is 5'
+            },
+            maxLength: 20,
+            disabled: values.hello2 > 5
         })"><br>
-        <br>
-        <input type="radio" value="male" v-bind="register('gender')"> Male<br>
-        <input type="radio" value="female" v-bind="register('gender')"> Female<br>
-        <input type="radio" value="other" v-bind="register('gender')"> Other<br>
         <br>
         <button>Submit</button>
         <pre>{{ values }}</pre>

src/types/baseControl.ts

@@ -0,0 +1,40 @@
+/** Props for a base control */
+export interface BaseControlProps {
+    /** Name of the control */
+    name: string,
+
+    /** Current errors of the control */
+    errors: string[]
+
+    /** Value binding for native inputs */
+    ref: any,
+
+    /** Value binding for custom inputs */
+    modelValue: any,
+
+    /** Handler binding for custom inputs */
+    'onUpdate:modelValue': (value: any) => void,
+
+    /** Disabled state of the field*/
+    disabled?: boolean
+
+    /** Current dirty state of the control */
+    isDirty?: boolean
+
+    /** Current touched state of the control */
+    isTouched?: boolean
+
+    /** Handler binding for native inputs */
+    onChange?: (el: any) => void,
+
+    /** Blur handler */
+    onBlur?: () => void,
+
+    /** Clear handler */
+    onClear?: () => void,
+}
+
+/** Each emit the handler could be expecting */
+export type EmitOption = 'update:modelValue' | 'blur' | 'clear'
+/** Emit collection for a base control */
+export type BaseControlEmits = EmitOption[]

src/types/formHandler.ts

@@ -1,61 +1,4 @@
-export interface FieldReference {
-    type: 'custom' | 'select' | 'select-multiple' | 'radio' | 'checkbox' | 'input' | 'textarea' | 'file' | 'range' | 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-    value?: any;
-    checked?: boolean;
-    selected?: boolean;
-    options?: any;
-    nodeName?: string;
-}
-
-export interface WrappedReference {
-    ref: FieldReference | FieldReference[];
-    _validations: Validations;
-    _disabled: boolean;
-    _defaultValue: any;
-}
-
-export type Refs = Record<string, WrappedReference>;
-
-/** Props for a base control */
-export interface BaseControlProps {
-    /** Name of the control */
-    name: string,
-
-    /** Current errors of the control */
-    errors: string[]
-
-    /** Value binding for native inputs */
-    ref: any,
-
-    /** Value binding for custom inputs */
-    modelValue: any,
-
-    /** Handler binding for custom inputs */
-    'onUpdate:modelValue': (value: any) => void,
-
-    /** Disabled state of the field*/
-    disabled?: boolean
-
-    /** Current dirty state of the control */
-    isDirty?: boolean
-
-    /** Current touched state of the control */
-    isTouched?: boolean
-
-    /** Handler binding for native inputs */
-    onChange?: (el: any) => void,
-
-    /** Blur handler */
-    onBlur?: () => void,
-
-    /** Clear handler */
-    onClear?: () => void,
-}
-
-/** Each emit the handler could be expecting */
-export type EmitOption = 'update:modelValue' | 'blur' | 'clear'
-/** Emit collection for a base control */
-export type BaseControlEmits = EmitOption[]
+import { RegisterOptions, Register } from "./register"
 
 export interface FormState {
     /** Boolean holding the dirty state of the form */
@@ -77,59 +20,9 @@ export interface FormState {
     errors: Record<string, any>
 }
 
-/** Function returning true for correct validation or a string with an error if it's invalid */
-export type ValidationFn = (_: any) => Promise<boolean | string> | boolean | string
-
-/** Validations collection as an object */
-export type Validations = Record<string, ValidationFn>
-
-export interface RegisterOptions {
-    /** Indicates wether the input is native or not, set to false if the extra listeners are not desired */
-    native?: boolean
-
-    /** Indicates wether the input is clearable or not */
-    clearable?: boolean
-
-    /** Default value for the field */
-    defaultValue?: any
-
-    /** Validations for the field */
-    validations?: Validations
-
-    /** Set to true if you want to bind also dirty and touched states */
-    withDetails?: boolean
-
-    /** Set to true if the field should be disabled */
-    disabled?: boolean
-
-    /** Indicates if the control should use the native html validation */
-    useNativeValidation?: boolean
-
-    /** Native required validation */
-    required?: boolean
-
-    /** Native min validation */
-    min?: number
-
-    /** Native max validation */
-    max?: number
-
-    /** Native minLength validation */
-    minLength?: number
-
-    /** Native maxLength validation */
-    maxLength?: number
-
-    /** Native pattern validation */
-    pattern?: string
-}
-
 /** Field initializer */
 export type InitControl = (name: string, options: RegisterOptions) => void
 
-/** Function that allows you to register a control to interact with the form */
-export type Register = (name: string, options?: RegisterOptions) => BaseControlProps
-
 /** Sets dirty state of a control */
 export type SetDirty = (name: string, dirty: boolean) => void
 
@@ -222,7 +115,6 @@ export interface FormHandlerParams {
     /** Validation behavior options */
     validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'always'
 }
-
 export interface FormHandlerReturn {
     /** Current form values */
     values: Record<string, any>

src/types/index.ts

@@ -0,0 +1,6 @@
+export * from './formHandler'
+export * from './logic'
+export * from './register'
+export * from './validations'
+export * from './refs'
+export * from './baseControl'

src/types/logic.ts

@@ -1,4 +1,5 @@
-import { FormState, Refs, Validations } from "./formHandler"
+import { FormState } from "./formHandler"
+import { Refs } from "./refs"
 
 export interface ValidateFormParams {
     _refs: Refs

src/types/refs.ts

@@ -0,0 +1,19 @@
+import { Validations } from "./register";
+
+export interface FieldReference {
+    type: 'custom' | 'select' | 'select-multiple' | 'radio' | 'checkbox' | 'input' | 'textarea' | 'file' | 'range' | 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    value?: any;
+    checked?: boolean;
+    selected?: boolean;
+    options?: any;
+    nodeName?: string;
+}
+
+export interface WrappedReference {
+    ref: FieldReference | FieldReference[];
+    _validations: Validations;
+    _disabled: boolean;
+    _defaultValue: any;
+}
+
+export type Refs = Record<string, WrappedReference>;

src/types/register.ts

@@ -0,0 +1,35 @@
+import { BaseControlProps } from "./baseControl";
+import { ValidationsConfiguration } from "./validations";
+
+/** Function returning true for correct validation or a string with an error if it's invalid */
+export type ValidationFn = (_: any) => Promise<boolean | string> | boolean | string
+
+/** Validations collection as an object */
+export type Validations = Record<string, ValidationFn>
+
+
+export interface RegisterOptions extends ValidationsConfiguration {
+    /** Indicates wether the input is native or not, set to false if the extra listeners are not desired */
+    native?: boolean
+
+    /** Indicates wether the input is clearable or not */
+    clearable?: boolean
+
+    /** Default value for the field */
+    defaultValue?: any
+
+    /** Validations for the field */
+    validations?: Validations
+
+    /** Set to true if you want to bind also dirty and touched states */
+    withDetails?: boolean
+
+    /** Set to true if the field should be disabled */
+    disabled?: boolean
+
+    /** Indicates if the control should use the native html validation */
+    useNativeValidation?: boolean
+}
+
+/** Function that allows you to register a control to interact with the form */
+export type Register = (name: string, options?: RegisterOptions) => BaseControlProps

src/types/validations.ts

@@ -0,0 +1,39 @@
+export interface ValidationWithMessage {
+    /** Validation value */
+    value: number | string | RegExp
+
+    /** Validation message */
+    message: string
+}
+
+export interface ValidationsConfiguration {
+    /** Required validation */
+    /** If true, the field is required */
+    /** If a string, the field is required and the string is the validation message */
+    required?: boolean | string
+
+    /** Min validation */
+    /** If a number, the field must be greater than or equal to the number */
+    /** If an object, the field must be greater than or equal to the object.value and the object.message is the validation message */
+    min?: number | ValidationWithMessage
+
+    /** Max validation */
+    /** If a number, the field must be less than or equal to the number */
+    /** If an object, the field must be less than or equal to the object.value and the object.message is the validation message */
+    max?: number | ValidationWithMessage
+
+    /** MinLength validation */
+    /** If a number, the field must be greater than or equal to the number */
+    /** If an object, the field must be greater than or equal to the object.value and the object.message is the validation message */
+    minLength?: number | ValidationWithMessage
+
+    /** MaxLength validation */
+    /** If a number, the field must be less than or equal to the number */
+    /** If an object, the field must be less than or equal to the object.value and the object.message is the validation message */
+    maxLength?: number | ValidationWithMessage
+
+    /** 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
+}