8000 feat(form): improved reactivity and simplified data access · manchenkoff/nuxt-sanctum-precognition@3bab445 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 3bab445

Browse files
manchenkoffmanchenkoff
committed
feat(form): improved reactivity and simplified data access
1 parent 9a2db03 commit 3bab445

File tree

2 files changed

+21
-26
lines changed

2 files changed

+21
-26
lines changed

‎src/runtime/composables/usePrecognitionForm.ts

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,6 @@ export const usePrecognitionForm = <T extends Payload>(
4444
const _originalPayload: T = cloneDeep(payload)
4545
const _originalPayloadKeys: PayloadKey<T>[] = Object.keys(_originalPayload)
4646

47-
const _payload = reactive<T>(payload)
48-
const _errors = reactive<PayloadErrors<T>>({})
49-
5047
const _validated = ref<PayloadKey<T>[]>([]) as Ref<PayloadKey<T>[]>
5148
const _touched = ref<PayloadKey<T>[]>([]) as Ref<PayloadKey<T>[]>
5249

@@ -131,29 +128,28 @@ export const usePrecognitionForm = <T extends Payload>(
131128
return Promise.reject(response)
132129
}
133130

134-
const form: PrecognitionForm<T> = {
135-
fields: _payload,
136-
errors: _errors,
131+
const form = reactive({
132+
fields: payload,
133+
errors: {},
137134

138-
// TODO: make them accessible without '.value', use reactive() & PrecognitionForm<T> on the 'form' object
139-
processing: ref(false),
140-
validating: ref(false),
141-
hasErrors: computed(() => Object.keys(form.errors).length > 0),
135+
processing: false,
136+
validating: false,
137+
hasErrors: computed(() => Object.keys(form.errors).length > 0) as unknown as boolean,
142138

143139
touched: (name: PayloadKey<T>): boolean => _touched.value.includes(name),
144140
valid: (name: PayloadKey<T>): boolean => _validated.value.includes(name) && !form.invalid(name),
145-
invalid: (name: PayloadKey<T>): boolean => typeof (form.errors as PayloadErrors<T>)[name] !== 'undefined',
141+
invalid: (name: PayloadKey<T>): boolean => typeof form.errors[name] !== 'undefined',
146142

147143
data(): T {
148-
return toRaw(_payload) as T
144+
return toRaw(form.fields) as T
149145
},
150146

151147
setData(data: PayloadData<T>): PrecognitionForm<T> {
152148
Object
153149
.keys(data)
154150
.forEach((key: PayloadKey<T>) => {
155151
// @ts-expect-error: assign property value on reactive object
156-
_payload[key] = data[key]
152+
form.fields[key] = data[key]
157153
})
158154

159155
return form
@@ -179,7 +175,7 @@ export const usePrecognitionForm = <T extends Payload>(
179175
reset(...keys: PayloadKey<T>[]): PrecognitionForm<T> {
180176
const resetField = (fieldName: string) => {
181177
// @ts-expect-error: assign property value on reactive object
182-
_payload[fieldName] = _originalPayload[fieldName]
178+
form.fields[fieldName] = _originalPayload[fieldName]
183179
form.forgetError(fieldName)
184180
}
185181

@@ -212,7 +208,7 @@ export const usePrecognitionForm = <T extends Payload>(
212208

213209
setErrors(entries: PayloadErrors<T>): PrecognitionForm<T> {
214210
if (!isEqual(form.errors, entries)) {
215-
form.errors = reactive(entries)
211+
form.errors = entries
216212
}
217213

218214
return form
@@ -234,7 +230,7 @@ export const usePrecognitionForm = <T extends Payload>(
234230

235231
const fields = Array.isArray(name) ? name : [name]
236232

237-
form.validating.value = true
233+
form.validating = true
238234

239235
process({ precognitive: true, fields, options })
240236
.then((response: ResponseType) => {
@@ -260,18 +256,18 @@ export const usePrecognitionForm = <T extends Payload>(
260256

261257
options.onError(response)
262258
})
263-
.finally(() => form.validating.value = false)
259+
.finally(() => form.validating = false)
264260

265261
return form
266262
},
267263

268264
async submit(): Promise<ResponseType> {
269-
form.processing.value = true
265+
form.processing = true
270266

271267
return await process()
272-
.finally(() => form.processing.value = false)
268+
.finally(() => form.processing = false)
273269
},
274-
}
270+
}) as PrecognitionForm<T>
275271

276272
form.validate = debounce(form.validate, _config.validationTimeout) as typeof form.validate
277273

‎src/runtime/types.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { ComputedRef, Reactive, Ref } from 'vue'
21
import type { FetchResponse } from 'ofetch'
32

43
export interface ModuleOptions {
@@ -88,24 +87,24 @@ export interface PrecognitionForm<T extends Payload> {
8887
/**
8988
* Values of the form fields.
9089
*/
91-
fields: Reactive<T>
90+
fields: T
9291
/**
9392
* Errors for each form field.
9493
*/
95-
errors: Reactive<PayloadErrors<T>>
94+
errors: PayloadErrors<T>
9695

9796
/**
9897
* Whether the form is currently processing a submission request.
9998
*/
100-
processing: Ref<boolean>
99+
processing: boolean
101100
/**
102101
* Whether the form is currently validating the fields.
103102
*/
104-
validating: Ref<boolean>
103+
validating: boolean
105104
/**
106105
* Whether the form has any errors.
107106
*/
108-
hasErrors: ComputedRef<boolean>
107+
hasErrors: boolean
109108

110109
/**
111110
* Checks if a form field has been touched.

0 commit comments

Comments
 (0)
0