Merge pull request #12 from dbssman/feature/10-cleanup-before-first-release

dbssman · web-flow · commit 2e192efb2d3f · 2023-01-21T00:18:20.000+01:00
Feature/10 cleanup before first release
diff --git a/README.md b/README.md
@@ -6,8 +6,8 @@ The easy way of handling your vue forms
 </div>
 
 [![Build Status](https://github.com/mattphillips/deep-object-diff/actions/workflows/ci.yaml/badge.svg)](https://github.com/dbssman/vue-form-handler/actions/workflows/node.js.yml)
-[![version](https://img.shields.io/npm/v/deep-object-diff.svg?style=flat-square)](https://www.npmjs.com/package/deep-object-diff)
-[![downloads](https://img.shields.io/npm/dm/deep-object-diff.svg?style=flat-square)](http://npm-stat.com/charts.html?package=deep-object-diff&from=2016-11-23)
+[![version](https://img.shields.io/npm/v/deep-object-diff.svg?style=flat-square)](https://www.npmjs.com/package/vue-form-handler)
+[![downloads](https://img.shields.io/npm/dm/deep-object-diff.svg?style=flat-square)](http://npm-stat.com/charts.html?package=vue-form-handler&from=2023-01-20)
 [![MIT License](https://img.shields.io/npm/l/deep-object-diff.svg?style=flat-square)](https://github.com/dbssman/vue-form-handler/blob/master/License.md)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
diff --git a/docs/tutorial.md b/docs/tutorial.md
@@ -193,7 +193,7 @@ We can also pass a validation function and specify `validationMode: 'onSubmit'`
     <input type="password" v-bind="register('confirmPassword', {
       required: true,
       pattern: passwordRegExp,
-      validations: {
+      validate: {
         match: (value) => value === values.password || 'Passwords do not match'
       }
     })" />
@@ -244,7 +244,7 @@ If the submission fails it will call the error function we pass with the errors
     <input type="password" v-bind="register('confirmPassword', {
       required: true,
       pattern: passwordRegExp,
-      validations: {
+      validate: {
         match: (value) => value === values.password || 'Passwords do not match'
       }
     })" />
diff --git a/examples/App.vue b/examples/App.vue
@@ -0,0 +1,12 @@
+<template>
+    <section>
+        <h1>VueFormHandler examples:</h1>
+        <div>
+            <ul>
+                <li>Basic: </li>
+            </ul>
+        </div>
+    </section>
+</template>
+<script setup lang="ts" >
+</script>
diff --git a/examples/main.ts b/examples/main.ts
diff --git a/examples/vite-env.d.ts b/examples/vite-env.d.ts
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 
 <body>
     <div id="app"></div>
-    <script type="module" src="/src/playground/main.ts"></script>
+    <script type="module" src="/examples/main.ts"></script>
 </body>
 
 </html>
diff --git a/src/logic/validateField.ts b/src/logic/validateField.ts
@@ -7,12 +7,10 @@ export default async ({ name, values, formState, _refs }: ValidateFieldParams):
     if (_refs[name]._disabled) {
         return
     }
-    for (const [validationName, validation] of Object.entries(_refs[name]._validations)) {
+    for (const validation of Object.values(_refs[name]._validations)) {
         const result = await validation(values[name])
-        formState.errors[name] = {
-            ...(result !== true && { [validationName]: result })
-        }
         if (result !== true) {
+            formState.errors[name] = result
             break;
         }
         delete formState.errors[name]
diff --git a/src/playground/App.vue b/src/playground/App.vue
diff --git a/src/test/handler.test.ts b/src/test/handler.test.ts
@@ -1,8 +1,6 @@
 import useFormHandler, { initialState } from '../useFormHandler';
 import { expect, it, describe } from "vitest"
 
-const sleep = () => new Promise((resolve) => setTimeout(() => resolve(true), 50))
-
 describe('Form handler testing', () => {
     it('Initial form state and values', () => {
         const { values, formState } = useFormHandler();
@@ -45,45 +43,38 @@ describe('Form handler testing', () => {
         const { formState, setError } = useFormHandler();
         setError('field', { error: 'some error' })
         expect(formState.errors).toStrictEqual({ field: { error: 'some error' } })
-        await sleep()
         expect(formState.isValid).toBeFalsy()
     })
     it('Clearing one error of a control programmatically', async () => {
-        const { formState, setError, clearErrors } = useFormHandler();
+        const { formState, setError, clearError } = useFormHandler();
         const errors = { error: 'some error', error2: 'some other error' }
         setError('field', errors)
-        await sleep()
         expect(formState.isValid).toBeFalsy()
-        clearErrors('field', 'error')
+        clearError('field', 'error')
         expect(formState.errors.field).toStrictEqual({ error2: 'some other error' })
-        await sleep()
         expect(formState.isValid).toBeFalsy()
     })
     it('Clearing all errors of a control programmatically', async () => {
-        const { formState, setError, clearErrors } = useFormHandler();
+        const { formState, setError, clearError } = useFormHandler();
         const errors = { error: 'some error', error2: 'some other error' }
         setError('field', errors)
-        await sleep()
         expect(formState.isValid).toBeFalsy()
-        clearErrors('field')
+        clearError('field')
         expect(formState.errors.field).toBeUndefined()
-        await sleep()
         expect(formState.isValid).toBeTruthy()
     })
     it('Clearing all errors of the form programmatically', async () => {
-        const { formState, setError, clearErrors } = useFormHandler();
+        const { formState, setError, clearError } = useFormHandler();
         const errorField1 = { error1: 'some error' }
         const errorField2 = { error2: 'some error' }
         setError('field1', errorField1)
         setError('field2', errorField2)
         expect(formState.errors.field1).toStrictEqual(errorField1)
         expect(formState.errors.field2).toStrictEqual(errorField2)
-        await sleep()
         expect(formState.isValid).toBeFalsy()
-        clearErrors()
+        clearError()
         expect(formState.errors.field1).toBeUndefined()
         expect(formState.errors.field2).toBeUndefined()
-        await sleep()
         expect(formState.isValid).toBeTruthy()
     })
     it('Resetting a field it back to its initial values and state', async () => {
diff --git a/src/test/register.test.ts b/src/test/register.test.ts
@@ -1,8 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import useFormHandler from '../useFormHandler'
 
-const sleep = () => new Promise((resolve) => setTimeout(() => resolve(true), 50))
-
 describe('Register function testing', () => {
     it('Registering a field', () => {
         const { values, register } = useFormHandler();
@@ -50,28 +48,26 @@ describe('Register function testing', () => {
     it('Registered validations work on update via handler', async () => {
         const { values, register, formState } = useFormHandler();
         const field = register('field', {
-            validations: {
+            validate: {
                 error: (val) => val !== 'error' || 'Error with your field'
             }
         })
         if (field['onUpdate:modelValue']) {
-            field['onUpdate:modelValue']('error')
-            await sleep()
+            await field['onUpdate:modelValue']('error')
             expect(values.field).toBe('error')
             expect(formState.isValid).toBeFalsy()
         }
     })
     it('Registered validations work on update via setter', async () => {
         const { values, register, formState, setValue, triggerValidation } = useFormHandler();
         register('field', {
-            validations: {
+            validate: {
                 error: (val) => val !== 'error' || 'Error with your field'
             }
         })
         await setValue('field', 'error')
         await triggerValidation('field')
         expect(values.field).toBe('error')
-        await sleep()
         expect(formState.isValid).toBeFalsy()
     })
 })
diff --git a/src/types/baseControl.ts b/src/types/baseControl.ts
@@ -13,7 +13,7 @@ export interface BaseControlProps {
     modelValue: any,
 
     /** Handler binding for custom inputs */
-    'onUpdate:modelValue': (value: any) => void,
+    'onUpdate:modelValue': (value: any) => Promise<void>,
 
     /** Disabled state of the field*/
     disabled?: boolean
@@ -25,7 +25,7 @@ export interface BaseControlProps {
     isTouched?: boolean
 
     /** Handler binding for native inputs */
-    onChange?: (el: any) => void,
+    onChange?: (el: any) => Promise<void>,
 
     /** Blur handler */
     onBlur?: () => void,
diff --git a/src/types/formHandler.ts b/src/types/formHandler.ts
@@ -54,7 +54,7 @@ export type ResetForm = () => void
 export type SetError = (name: string, error: any, replace?: boolean) => void
 
 /** Function to clear an error programmatically */
-export type ClearErrors = (name?: string, errors?: string | string[]) => void
+export type ClearError = (name?: string, errors?: string | string[]) => void
 
 /** Function to get the modified values of the form */
 export type ModifiedValues = () => Object
@@ -97,7 +97,7 @@ export interface InterceptorParams {
     setError: SetError
 
     /** Function to clear one or more errors on a desired field or the whole form*/
-    clearErrors: ClearErrors
+    clearError: ClearError
 
     /** Function that returns the modified values of the form */
     modifiedValues: ModifiedValues
@@ -116,14 +116,26 @@ export interface FormHandlerParams {
     validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'always'
 }
 export interface FormHandlerReturn {
+    /** Current form state */
+    formState: FormState
+
     /** Current form values */
     values: Record<string, any>
 
-    /** Current form state */
-    formState: FormState
+    /** Function to clear one or more errors on a desired field or the whole form*/
+    clearError: ClearError
 
-    /** Triggers the validation of a field */
-    triggerValidation: TriggerValidation
+    /** Function to clear a desired field*/
+    clearField: ClearField
+
+    /** Submit handler */
+    handleSubmit: HandleSubmit
+
+    /** Function that returns the modified values of the form */
+    modifiedValues: ModifiedValues
+
+    /** Method to register a field and make it interact with the current form */
+    register: Register
 
     /** Function to reset a field */
     resetField: ResetField
@@ -134,23 +146,14 @@ export interface FormHandlerReturn {
     /** Function to set an error on a field programmatically */
     setError: SetError
 
-    /** Function to clear one or more errors on a desired field or the whole form*/
-    clearErrors: ClearErrors
-
-    /** Function that returns the modified values of the form */
-    modifiedValues: ModifiedValues
-
     /** Function to set the value of a field programmatically */
     setValue: SetValue
 
-    /** Function to clear a desired field*/
-    clearField: ClearField
-
-    /** Method to register a field and make it interact with the current form */
-    register: Register
+    /** Triggers the validation of a field */
+    triggerValidation: TriggerValidation
 
-    /** Submit handler */
-    handleSubmit: HandleSubmit
+    /** Method to unregister a field and make it stop interacting with the current form */
+    unregister: (name: string) => void
 }
 
 /** Form handler solution as a composable function */
diff --git a/src/types/register.ts b/src/types/register.ts
@@ -18,8 +18,8 @@ export interface RegisterOptions extends ValidationsConfiguration {
     /** Default value for the field */
     defaultValue?: any
 
-    /** Validations for the field */
-    validations?: Validations
+    /** Custom validations for the field */
+    validate?: Validations
 
     /** Set to true if you want to bind also dirty and touched states */
     withDetails?: boolean
diff --git a/src/useFormHandler.ts b/src/useFormHandler.ts
