Skip to content

Commit 7b77067

Browse files
author
Daniel Requejo
committed
WIP: Cleanup before first release
1 parent 429ecf4 commit 7b77067

11 files changed

+106
-133
lines changed

‎examples/App.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<section>
3+
<h1>VueFormHandler examples:</h1>
4+
<div>
5+
<ul>
6+
<li>Basic: </li>
7+
</ul>
8+
</div>
9+
</section>
10+
</template>
11+
<script setup lang="ts" >
12+
</script>

‎src/playground/main.ts ‎examples/main.ts

File renamed without changes.

‎src/playground/vite-env.d.ts ‎examples/vite-env.d.ts

File renamed without changes.

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<body>
1212
<div id="app"></div>
13-
<script type="module" src="/src/playground/main.ts"></script>
13+
<script type="module" src="/examples/main.ts"></script>
1414
</body>
1515

1616
</html>

‎src/logic/validateField.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,10 @@ export default async ({ name, values, formState, _refs }: ValidateFieldParams):
77
if (_refs[name]._disabled) {
88
return
99
}
10-
for (const [validationName, validation] of Object.entries(_refs[name]._validations)) {
10+
for (const validation of Object.values(_refs[name]._validations)) {
1111
const result = await validation(values[name])
12-
formState.errors[name] = {
13-
...(result !== true && { [validationName]: result })
14-
}
1512
if (result !== true) {
13+
formState.errors[name] = result
1614
break;
1715
}
1816
delete formState.errors[name]

‎src/playground/App.vue

-38
This file was deleted.

‎src/test/handler.test.ts

+6-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import useFormHandler, { initialState } from '../useFormHandler';
22
import { expect, it, describe } from "vitest"
33

4-
const sleep = () => new Promise((resolve) => setTimeout(() => resolve(true), 50))
5-
64
describe('Form handler testing', () => {
75
it('Initial form state and values', () => {
86
const { values, formState } = useFormHandler();
@@ -45,45 +43,38 @@ describe('Form handler testing', () => {
4543
const { formState, setError } = useFormHandler();
4644
setError('field', { error: 'some error' })
4745
expect(formState.errors).toStrictEqual({ field: { error: 'some error' } })
48-
await sleep()
4946
expect(formState.isValid).toBeFalsy()
5047
})
5148
it('Clearing one error of a control programmatically', async () => {
52-
const { formState, setError, clearErrors } = useFormHandler();
49+
const { formState, setError, clearError } = useFormHandler();
5350
const errors = { error: 'some error', error2: 'some other error' }
5451
setError('field', errors)
55-
await sleep()
5652
expect(formState.isValid).toBeFalsy()
57-
clearErrors('field', 'error')
53+
clearError('field', 'error')
5854
expect(formState.errors.field).toStrictEqual({ error2: 'some other error' })
59-
await sleep()
6055
expect(formState.isValid).toBeFalsy()
6156
})
6257
it('Clearing all errors of a control programmatically', async () => {
63-
const { formState, setError, clearErrors } = useFormHandler();
58+
const { formState, setError, clearError } = useFormHandler();
6459
const errors = { error: 'some error', error2: 'some other error' }
6560
setError('field', errors)
66-
await sleep()
6761
expect(formState.isValid).toBeFalsy()
68-
clearErrors('field')
62+
clearError('field')
6963
expect(formState.errors.field).toBeUndefined()
70-
await sleep()
7164
expect(formState.isValid).toBeTruthy()
7265
})
7366
it('Clearing all errors of the form programmatically', async () => {
74-
const { formState, setError, clearErrors } = useFormHandler();
67+
const { formState, setError, clearError } = useFormHandler();
7568
const errorField1 = { error1: 'some error' }
7669
const errorField2 = { error2: 'some error' }
7770
setError('field1', errorField1)
7871
setError('field2', errorField2)
7972
expect(formState.errors.field1).toStrictEqual(errorField1)
8073
expect(formState.errors.field2).toStrictEqual(errorField2)
81-
await sleep()
8274
expect(formState.isValid).toBeFalsy()
83-
clearErrors()
75+
clearError()
8476
expect(formState.errors.field1).toBeUndefined()
8577
expect(formState.errors.field2).toBeUndefined()
86-
await sleep()
8778
expect(formState.isValid).toBeTruthy()
8879
})
8980
it('Resetting a field it back to its initial values and state', async () => {

‎src/test/register.test.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { describe, it, expect } from 'vitest'
22
import useFormHandler from '../useFormHandler'
33

4-
const sleep = () => new Promise((resolve) => setTimeout(() => resolve(true), 50))
5-
64
describe('Register function testing', () => {
75
it('Registering a field', () => {
86
const { values, register } = useFormHandler();
@@ -55,8 +53,7 @@ describe('Register function testing', () => {
5553
}
5654
})
5755
if (field['onUpdate:modelValue']) {
58-
field['onUpdate:modelValue']('error')
59-
await sleep()
56+
await field['onUpdate:modelValue']('error')
6057
expect(values.field).toBe('error')
6158
expect(formState.isValid).toBeFalsy()
6259
}
@@ -71,7 +68,6 @@ describe('Register function testing', () => {
7168
await setValue('field', 'error')
7269
await triggerValidation('field')
7370
expect(values.field).toBe('error')
74-
await sleep()
7571
expect(formState.isValid).toBeFalsy()
7672
})
7773
})

‎src/types/baseControl.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface BaseControlProps {
1313
modelValue: any,
1414

1515
/** Handler binding for custom inputs */
16-
'onUpdate:modelValue': (value: any) => void,
16+
'onUpdate:modelValue': (value: any) => Promise<void>,
1717

1818
/** Disabled state of the field*/
1919
disabled?: boolean
@@ -25,7 +25,7 @@ export interface BaseControlProps {
2525
isTouched?: boolean
2626

2727
/** Handler binding for native inputs */
28-
onChange?: (el: any) => void,
28+
onChange?: (el: any) => Promise<void>,
2929

3030
/** Blur handler */
3131
onBlur?: () => void,

‎src/types/formHandler.ts

+22-19
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export type ResetForm = () => void
5454
export type SetError = (name: string, error: any, replace?: boolean) => void
5555

5656
/** Function to clear an error programmatically */
57-
export type ClearErrors = (name?: string, errors?: string | string[]) => void
57+
export type ClearError = (name?: string, errors?: string | string[]) => void
5858

5959
/** Function to get the modified values of the form */
6060
export type ModifiedValues = () => Object
@@ -97,7 +97,7 @@ export interface InterceptorParams {
9797
setError: SetError
9898

9999
/** Function to clear one or more errors on a desired field or the whole form*/
100-
clearErrors: ClearErrors
100+
clearError: ClearError
101101

102102
/** Function that returns the modified values of the form */
103103
modifiedValues: ModifiedValues
@@ -116,14 +116,26 @@ export interface FormHandlerParams {
116116
validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'always'
117117
}
118118
export interface FormHandlerReturn {
119+
/** Current form state */
120+
formState: FormState
121+
119122
/** Current form values */
120123
values: Record<string, any>
121124

122-
/** Current form state */
123-
formState: FormState
125+
/** Function to clear one or more errors on a desired field or the whole form*/
126+
clearError: ClearError
124127

125-
/** Triggers the validation of a field */
126-
triggerValidation: TriggerValidation
128+
/** Function to clear a desired field*/
129+
clearField: ClearField
130+
131+
/** Submit handler */
132+
handleSubmit: HandleSubmit
133+
134+
/** Function that returns the modified values of the form */
135+
modifiedValues: ModifiedValues
136+
137+
/** Method to register a field and make it interact with the current form */
138+
register: Register
127139

128140
/** Function to reset a field */
129141
resetField: ResetField
@@ -134,23 +146,14 @@ export interface FormHandlerReturn {
134146
/** Function to set an error on a field programmatically */
135147
setError: SetError
136148

137-
/** Function to clear one or more errors on a desired field or the whole form*/
138-
clearErrors: ClearErrors
139-
140-
/** Function that returns the modified values of the form */
141-
modifiedValues: ModifiedValues
142-
143149
/** Function to set the value of a field programmatically */
144150
setValue: SetValue
145151

146-
/** Function to clear a desired field*/
147-
clearField: ClearField
148-
149-
/** Method to register a field and make it interact with the current form */
150-
register: Register
152+
/** Triggers the validation of a field */
153+
triggerValidation: TriggerValidation
151154

152-
/** Submit handler */
153-
handleSubmit: HandleSubmit
155+
/** Method to unregister a field and make it stop interacting with the current form */
156+
unregister: (name: string) => void
154157
}
155158

156159
/** Form handler solution as a composable function */

0 commit comments

Comments
 (0)