Compact _refs

Author: Daniel Requejo

src/logic/refFn.ts

@@ -1,20 +1,28 @@
+import { Refs, FieldReference } from "../types/formHandler";
 import { isCheckboxInput, isMultipleSelect, isNativeControl, isRadioInput } from "../utils"
 
-export default (name: string, _refs: any, values: any) => (fieldRef: any) => {
+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] = {
+        _refs[name].ref = {
             type: 'custom'
         }
         return
     }
-    const isFirstRegister = !_refs[name] || (Array.isArray(_refs[name]) && isRadioInput(fieldRef) && !_refs[name].some((option: any) => option.value === fieldRef.value))
+    const isFirstRegister = !_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] = isRadioInput(fieldRef) ? [...(_refs[name] || []), fieldRef] : fieldRef
+        _refs[name].ref = isRadioInput(fieldRef)
+            ? [...(_refs[name].ref as FieldReference[] || [])
+                , fieldRef]
+            : fieldRef
     }
     if (isRadioInput(fieldRef)) {
         if (isFirstRegister && fieldRef.checked) {

src/logic/validateField.ts

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

src/playground/App.vue

@@ -4,23 +4,22 @@
         <input v-bind="register('hello', {
             useNativeValidation: true,
             required: true,
-            disabled: true,
         })"><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>
-        <input type="text">
         <button>Submit</button>
+        <pre>{{ values }}</pre>
+        <pre>{{ formState }}</pre>
     </form>
 </template>
 
 <script setup lang="ts">
 import useFormHandler from '../useFormHandler';
-import { ref } from 'vue'
 
-const { register, handleSubmit } = useFormHandler({});
+const { register, handleSubmit, values, formState } = useFormHandler({});
 const submitForm = (values: any) => {
     console.log(values)
 }

src/types/formHandler.ts

@@ -1,3 +1,21 @@
+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 */

src/types/logic.ts

@@ -1,8 +1,7 @@
-import { FormState, Validations } from "./formHandler"
+import { FormState, Refs, Validations } from "./formHandler"
 
 export interface ValidateFormParams {
-    validations: Record<string, Validations>
-    disabledFields: Record<string, boolean>
+    _refs: Refs
     formState: FormState
     values: Record<string, any>
 }

src/useFormHandler.ts

@@ -18,12 +18,12 @@ import {
   FormState,
   HandleSubmit,
   Register,
-  IsValidForm
+  IsValidForm,
+  Refs
 } from './types/formHandler';
 import { reactive, readonly, watch } from 'vue'
 import { isEqual } from 'lodash-es'
 import { getNativeFieldValue, validateField, validateForm, getDefaultFieldValue, refFn } from './logic';
-import { isDefined } from './utils';
 
 export const initialState = () => ({
   touched: {},
@@ -45,35 +45,22 @@ const useFormHandler: FormHandler = ({
   const values: Record<string, any> = reactive({ ...initialValues })
   const formState = reactive<FormState>({ ...initialState() })
 
-  let _validations: Record<string, Validations> = {}
-  let _defaultValues: Record<string, any> = {}
-  let _disabledFields: Record<string, boolean> = {}
-  let _refs: Record<string, any> = {}
+  let _refs: Refs = {}
 
-  const _getDefault = (name: string): any => _defaultValues[name] ?? getDefaultFieldValue(_refs[name])
+  const _getDefault = (name: string): any => _refs[name]._defaultValue ?? getDefaultFieldValue(_refs[name].ref)
   const _getInitial = (name: string): any => initialValues[name] ?? _getDefault(name)
-
-  //TODO: check if validations and defaultValues can be hold up in under _refs object along with the ref information
   const _initControl: InitControl = (name, options) => {
-    _validations = {
-      ..._validations,
-      [name]: options.validations || {}
-    }
-    _defaultValues = {
-      ..._defaultValues,
-      [name]: options.defaultValue
+    const needsReset = options.disabled && _refs[name] && !_refs[name]._disabled
+    _refs[name] = {
+      ..._refs[name] || {},
+      _validations: options.validations || {},
+      _defaultValue: options.defaultValue,
+      _disabled: !!options.disabled,
     }
-    if (isDefined(options.disabled)) {
-      const wasDisabled = _disabledFields[name]
-      _disabledFields = {
-        ..._disabledFields,
-        [name]: !!options.disabled
-      }
-      if (!wasDisabled && options.disabled) {
-        resetField(name)
-        delete formState.errors[name]
-        return
-      }
+    if (needsReset) {
+      resetField(name)
+      delete formState.errors[name]
+      return
     }
     if (initialValues[name] === undefined && values[name] === undefined) {
       values[name] = _getDefault(name)
@@ -105,14 +92,11 @@ const useFormHandler: FormHandler = ({
   }
 
   const triggerValidation: TriggerValidation = async (name) => {
-    if (!Object.keys(_validations).length) {
-      return
-    }
     if (!name) {
-      validateForm({ formState, values, validations: _validations, disabledFields: _disabledFields })
+      validateForm({ formState, values, _refs })
       return
     }
-    validateField({ formState, name, validations: _validations, values, disabledFields: _disabledFields })
+    validateField({ formState, name, _refs, values })
   }
 
   const setDirty: SetDirty = (name, dirty) => {
@@ -165,7 +149,20 @@ const useFormHandler: FormHandler = ({
   }
 
   const setValue: SetValue = async (name, value = DEFAULT_FIELD_VALUE) => {
-    if (!_disabledFields[name] || !interceptor || await interceptor({ name, value, values, formState, clearErrors, modifiedValues, resetField, resetForm, setError, triggerValidation })) {
+    if (!_refs[name]._disabled
+      && (!interceptor
+        || await interceptor({
+          name,
+          value,
+          values,
+          formState,
+          clearErrors,
+          modifiedValues,
+          resetField,
+          resetForm,
+          setError,
+          triggerValidation
+        }))) {
       values[name] = value
       setDirty(name, !isEqual(value, _getInitial(name)))
     }
@@ -213,7 +210,7 @@ const useFormHandler: FormHandler = ({
         isTouched: !!formState.touched[name],
       }),
       ...(native !== false && {
-        onChange: () => handleChange(name, getNativeFieldValue(_refs[name] as HTMLInputElement)),
+        onChange: () => handleChange(name, getNativeFieldValue(_refs[name].ref)),
       }),
       ...(useNativeValidation && {
         ...nativeValidations