Merge pull request #6 from dbssman/feature/1-gain-consistency-on-the-validation-strategy

Feature/1 gain consistency on the validation strategy

Author: dbssman

src/FormHandler.ts

@@ -1,5 +1,5 @@
 import useFormHandler from './useFormHandler';
-import { FormHandlerParams, FormHandlerReturn } from './types';
+import { FormHandlerParams, FormHandlerReturn } from './types/formHandler';
 import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
@@ -8,15 +8,15 @@ export default defineComponent({
         initialValues: Object as PropType<FormHandlerParams['initialValues']>,
         interceptor: Function as PropType<FormHandlerParams['interceptor']>,
         validate: Function as PropType<FormHandlerParams['validate']>,
-        options: Object as PropType<FormHandlerParams['options']>
+        validationMode: Object as PropType<FormHandlerParams['validationMode']>
     },
-    setup: (props, {slots}) => {
-        const {...formHandler} = useFormHandler({
+    setup: (props, { slots }) => {
+        const { ...formHandler } = useFormHandler({
             initialValues: props.initialValues,
             interceptor: props.interceptor,
             validate: props.validate,
-            options: props.options
+            validationMode: props.validationMode
         })
-        return () => slots.default && slots.default({...formHandler} as FormHandlerReturn)
+        return () => slots.default && slots.default({ ...formHandler } as FormHandlerReturn)
     }
 })

src/constants.ts renamed to src/core/constants.ts

@@ -1,4 +1,4 @@
-import { BaseControlEmits } from "./types"
+import { BaseControlEmits } from "../types"
 
 export const DEFAULT_FIELD_VALUE = null;
 

src/index.ts

@@ -1,5 +1,5 @@
 export { default as FormHandler } from './FormHandler'
 export { default as useFormHandler } from './useFormHandler'
 
-export * from './constants'
+export * from './core/constants'
 export * from './types'

src/logic/getDefaultFieldValue.ts

@@ -1,5 +1,5 @@
 import { isCheckboxInput } from "../utils"
-import { DEFAULT_FIELD_VALUE } from "../constants"
+import { DEFAULT_FIELD_VALUE } from "../core/constants"
 
 export default (el: any) => {
     if (!el) {

src/logic/getNativeFieldValue.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_FIELD_VALUE } from './../constants';
+import { DEFAULT_FIELD_VALUE } from '../core/constants';
 import { isCheckboxInput, isMultipleSelect, isRadioInput } from "../utils"
 
 export default (el: any) => {

src/logic/index.ts

@@ -1,2 +1,6 @@
 export { default as getNativeFieldValue } from './getNativeFieldValue'
-export { default as getDefaultFieldValue } 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 transformValidations } from './transformValidations'

src/logic/refFn.ts

@@ -0,0 +1,50 @@
+import { Refs, FieldReference } from "../types";
+import { isCheckboxInput, isMultipleSelect, isNativeControl, isRadioInput } from "../utils"
+
+export default (name: string, _refs: Refs, values: any) => (fieldRef: any) => {
+    if (!fieldRef) {
+        delete _refs[name]
+        return
+    }
+    if (!fieldRef.nodeName || !isNativeControl(fieldRef)) {
+        //TODO: Correctly type this in order to expect a fixed data structure
+        _refs[name].ref = {
+            type: 'custom'
+        }
+        return
+    }
+    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))))
+    if (isFirstRegister) {
+        _refs[name].ref = isRadioInput(fieldRef)
+            ? [...(_refs[name].ref as FieldReference[] || [])
+                , fieldRef]
+            : fieldRef
+    }
+    if (isRadioInput(fieldRef)) {
+        if (isFirstRegister && fieldRef.checked) {
+            values[name] = fieldRef.value
+            return
+        }
+        fieldRef.checked = (values[name] === fieldRef.value)
+        return
+    }
+    if (isCheckboxInput(fieldRef)) {
+        if (isFirstRegister) {
+            values[name] = !!fieldRef.checked
+            return
+        }
+        fieldRef.checked = !!values[name]
+        return
+    }
+    if (isMultipleSelect(fieldRef)) {
+        [...fieldRef.options].forEach((option: any, index) => {
+            fieldRef[index].selected = !!values[name]?.includes(option.value)
+        })
+        return
+    }
+    fieldRef.value = values[name]
+};

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/logic/validateField.ts

@@ -0,0 +1,20 @@
+import { ValidateFieldParams } from './../types/logic';
+
+export default async ({ name, values, formState, _refs }: ValidateFieldParams): Promise<void> => {
+    if (!Object.keys(_refs[name]._validations).length) {
+        return
+    }
+    if (_refs[name]._disabled) {
+        return
+    }
+    for (const [validationName, validation] of Object.entries(_refs[name]._validations)) {
+        const result = await validation(values[name])
+        formState.errors[name] = {
+            ...(result !== true && { [validationName]: result })
+        }
+        if (result !== true) {
+            break;
+        }
+        delete formState.errors[name]
+    }
+}

src/logic/validateForm.ts

@@ -0,0 +1,8 @@
+import { ValidateFormParams } from './../types/logic';
+import validateField from "./validateField"
+
+export default async (params: ValidateFormParams) => {
+    for (const name of Object.keys(params.values)) {
+        await validateField({ ...params, name })
+    }
+}