@volverjs/form-vue 1.0.0-beta.2 → 1.0.0-beta.20

package/src/VvForm.ts

@@ -1,264 +1,344 @@
 import {
-	type Component,
-	type InjectionKey,
-	type DeepReadonly,
-	type Ref,
-	type PropType,
-	type WatchStopHandle,
-	withModifiers,
-	defineComponent,
-	ref,
-	provide,
-	readonly,
-	watch,
-	h,
-	toRaw,
-	isProxy,
-	computed,
+    type Component,
+    type InjectionKey,
+    type PropType,
+    type SlotsType,
+    computed,
+    defineComponent,
+    h,
+    isProxy,
+    onMounted,
+    provide,
+    readonly as makeReadonly,
+    ref,
+    toRaw,
+    watch,
+    withModifiers,
 } from 'vue'
 import {
-	watchIgnorable,
-	throttleFilter,
-	type IgnoredUpdater,
+    throttleFilter,
+    watchIgnorable,
 } from '@vueuse/core'
-import { type z, type ZodFormattedError, type TypeOf } from 'zod'
+import { type z, ZodError } from 'zod'
 import type {
-	FormComponentOptions,
-	FormSchema,
-	FormTemplate,
-	InjectedFormData,
+    FormComponentOptions,
+    FormSchema,
+    FormTemplate,
+    InjectedFormData,
 } from './types'
 import { FormStatus } from './enums'
 import { defaultObjectBySchema } from './utils'
 
-export const defineForm = <Schema extends FormSchema>(
-	schema: Schema,
-	provideKey: InjectionKey<InjectedFormData<Schema>>,
-	options?: FormComponentOptions<Schema>,
-	VvFormTemplate?: Component,
-) => {
-	const errors = ref<z.inferFormattedError<Schema> | undefined>()
-	const status = ref<FormStatus | undefined>()
-	const formData = ref<Partial<z.infer<Schema> | undefined>>()
+export function defineForm<Schema extends FormSchema>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema>>, options?: FormComponentOptions<Schema>, VvFormTemplate?: Component) {
+    const errors = ref<z.inferFormattedError<Schema> | undefined>()
+    const status = ref<FormStatus | undefined>()
+    const invalid = computed(() => status.value === FormStatus.invalid)
+    const formData = ref<Partial<z.infer<Schema> | undefined>>()
+    const readonly = ref<boolean>(false)
+    let validationFields: Set<string> | undefined
 
-	const validate = async (value = formData.value) => {
-		const parseResult = await schema.safeParseAsync(value)
-		if (!parseResult.success) {
-			errors.value = parseResult.error.format() as ZodFormattedError<
-				z.infer<Schema>
-			>
-			status.value = FormStatus.invalid
-			return false
-		}
-		errors.value = undefined
-		status.value = FormStatus.valid
-		formData.value = parseResult.data
-		return true
-	}
+    const validate = async (value = formData.value, fields?: Set<string>) => {
+        validationFields = fields
+        if (readonly.value) {
+            return true
+        }
+        const parseResult = await schema.safeParseAsync(value)
+        if (!parseResult.success) {
+            status.value = FormStatus.invalid
+            if (!fields) {
+                errors.value
+				= parseResult.error.format() as z.inferFormattedError<Schema>
+                return false
+            }
+            const fieldsIssues = parseResult.error.issues.filter(item => fields.has(item.path.join('.')))
+            if (!fieldsIssues.length) {
+                errors.value = undefined
+                return true
+            }
+            errors.value = new ZodError(fieldsIssues).format() as z.inferFormattedError<Schema>
+            return false
+        }
+        errors.value = undefined
+        status.value = FormStatus.valid
+        formData.value = parseResult.data
+        return true
+    }
 
-	const submit = async () => {
-		if (!(await validate())) {
-			return false
-		}
-		status.value = FormStatus.submitting
-		return true
-	}
+    const clear = () => {
+        errors.value = undefined
+        status.value = undefined
+        validationFields = undefined
+    }
 
-	const { ignoreUpdates, stop: stopUpdatesWatch } = watchIgnorable(
-		formData,
-		() => {
-			status.value = FormStatus.updated
-		},
-		{
-			deep: true,
-			eventFilter: throttleFilter(options?.updateThrottle ?? 500),
-		},
-	)
+    const reset = () => {
+        formData.value = defaultObjectBySchema(schema)
+        clear()
+        status.value = FormStatus.reset
+    }
 
-	const component = defineComponent({
-		name: 'VvForm',
-		props: {
-			continuosValidation: {
-				type: Boolean,
-				default: false,
-			},
-			modelValue: {
-				type: Object,
-				default: () => ({}),
-			},
-			tag: {
-				type: String,
-				default: 'form',
-			},
-			template: {
-				type: [Array, Function] as PropType<FormTemplate<Schema>>,
-				default: undefined,
-			},
-		},
-		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
-		expose: ['submit', 'validate', 'errors', 'status', 'valid', 'invalid'],
-		setup(props, { emit }) {
-			formData.value = defaultObjectBySchema(
-				schema,
-				toRaw(props.modelValue),
-			)
+    const submit = async () => {
+        if (readonly.value) {
+            return false
+        }
+        if (!(await validate())) {
+            return false
+        }
+        status.value = FormStatus.submitting
+        return true
+    }
 
-			watch(
-				() => props.modelValue,
-				(newValue) => {
-					if (newValue) {
-						const original = isProxy(newValue)
-							? toRaw(newValue)
-							: newValue
-						formData.value =
-							typeof original?.clone === 'function'
-								? original.clone()
-								: JSON.parse(JSON.stringify(original))
-					}
-				},
-				{ deep: true },
-			)
+    const { ignoreUpdates, stop: stopUpdatesWatch } = watchIgnorable(
+        formData,
+        () => {
+            status.value = FormStatus.updated
+        },
+        {
+            deep: true,
+            eventFilter: throttleFilter(options?.updateThrottle ?? 500),
+        },
+    )
 
-			watch(status, async (newValue) => {
-				if (newValue === FormStatus.invalid) {
-					const toReturn = toRaw(
-						errors.value as ZodFormattedError<z.infer<Schema>>,
-					)
-					emit('invalid', toReturn)
-					options?.onInvalid?.(toReturn)
-					return
-				}
-				if (newValue === FormStatus.valid) {
-					const toReturn = toRaw(formData.value as z.infer<Schema>)
-					emit('valid', toReturn)
-					options?.onValid?.(toReturn)
-					emit('update:modelValue', toReturn)
-					options?.onUpdate?.(toReturn)
-					return
-				}
-				if (newValue === FormStatus.submitting) {
-					const toReturn = toRaw(formData.value as z.infer<Schema>)
-					emit('submit', toReturn)
-					options?.onSubmit?.(toReturn)
-				}
-				if (newValue === FormStatus.updated) {
-					if (
-						errors.value ||
-						options?.continuosValidation ||
-						props.continuosValidation
-					) {
-						await validate()
-					}
-					if (
-						!formData.value ||
-						!props.modelValue ||
-						JSON.stringify(formData.value) !==
-							JSON.stringify(props.modelValue)
-					) {
-						const toReturn = toRaw(
-							formData.value as z.infer<Schema>,
-						)
-						emit('update:modelValue', toReturn)
-						options?.onUpdate?.(toReturn)
-					}
-					if (status.value === FormStatus.updated) {
-						status.value = FormStatus.unknown
-					}
-				}
-			})
+    const readonlyErrors = makeReadonly(errors)
+    const readonlyStatus = makeReadonly(status)
 
-			const invalid = computed(() => status.value === FormStatus.invalid)
+    const VvForm = defineComponent({
+        name: 'VvForm',
+        props: {
+            continuousValidation: {
+                type: Boolean,
+                default: false,
+            },
+            modelValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            readonly: {
+                type: Boolean,
+                default: options?.readonly ?? false,
+            },
+            tag: {
+                type: String,
+                default: 'form',
+            },
+            template: {
+                type: [Array, Function] as PropType<FormTemplate<Schema>>,
+                default: undefined,
+            },
+        },
+        emits: [
+            'invalid',
+            'submit',
+            'update:modelValue',
+            'update:readonly',
+            'valid',
+            'reset',
+        ],
+        expose: [
+            'errors',
+            'invalid',
+            'readonly',
+            'status',
+            'submit',
+            'tag',
+            'template',
+            'valid',
+            'validate',
+            'clear',
+            'reset',
+        ],
+        slots: Object as SlotsType<{
+            default: {
+                errors: typeof readonlyErrors
+                formData: typeof formData
+                ignoreUpdates: typeof ignoreUpdates
+                invalid: typeof invalid
+                readonly: typeof readonly
+                status: typeof readonlyStatus
+                stopUpdatesWatch: typeof stopUpdatesWatch
+                submit: typeof submit
+                validate: typeof validate
+                clear: typeof clear
+                reset: typeof reset
+            }
+        }>,
+        setup(props, { emit }) {
+            formData.value = defaultObjectBySchema(
+                schema,
+                toRaw(props.modelValue),
+            )
 
-			provide(provideKey, {
-				formData,
-				submit,
-				validate,
-				ignoreUpdates,
-				stopUpdatesWatch,
-				errors: readonly(errors),
-				status: readonly(status),
-				invalid,
-			})
+            watch(
+                () => props.modelValue,
+                (newValue) => {
+                    if (newValue) {
+                        const original = isProxy(newValue)
+                            ? toRaw(newValue)
+                            : newValue
 
-			return {
-				formData,
-				submit,
-				validate,
-				ignoreUpdates,
-				stopUpdatesWatch,
-				errors: readonly(errors),
-				status: readonly(status),
-				invalid,
-			}
-		},
-		render() {
-			const defaultSlot = () =>
-				this.$slots?.default?.({
-					formData: this.formData,
-					submit: this.submit,
-					validate: this.validate,
-					ignoreUpdates: this.ignoreUpdates,
-					stopUpdatesWatch: this.stopUpdatesWatch,
-					errors: this.errors,
-					status: this.status,
-					invalid: this.invalid,
-				}) ?? this.$slots.default
-			return h(
-				this.tag,
-				{
-					onSubmit: withModifiers(this.submit, ['prevent']),
-				},
-				(this.template ?? options?.template) && VvFormTemplate
-					? [
-							h(
-								VvFormTemplate,
-								{
-									schema: this.template ?? options?.template,
-								},
-								{
-									default: defaultSlot,
-								},
-							),
-					  ]
-					: {
-							default: defaultSlot,
-					  },
-			)
-		},
-	})
-	return {
-		errors,
-		status,
-		formData,
-		validate,
-		submit,
-		ignoreUpdates,
-		stopUpdatesWatch,
-		/**
-		 * An hack to add types to the default slot
-		 */
-		VvForm: component as typeof component & {
-			new (): {
-				$slots: {
-					default: (_: {
-						formData: unknown extends
-							| Partial<TypeOf<Schema>>
-							| undefined
-							? undefined
-							: Partial<TypeOf<Schema>> | undefined
-						submit: () => Promise<boolean>
-						validate: () => Promise<boolean>
-						ignoreUpdates: IgnoredUpdater
-						stopUpdatesWatch: WatchStopHandle
-						errors: Readonly<
-							Ref<DeepReadonly<z.inferFormattedError<Schema>>>
-						>
-						status: Ref<DeepReadonly<`${FormStatus}` | undefined>>
-						invalid: Ref<DeepReadonly<boolean>>
-						// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					}) => any
-				}
-			}
-		},
-	}
+                        if (
+                            JSON.stringify(original)
+                            === JSON.stringify(toRaw(formData.value))
+                        ) {
+                            return
+                        }
+
+                        formData.value
+							= typeof original?.clone === 'function'
+                                ? original.clone()
+                                : JSON.parse(JSON.stringify(original))
+                    }
+                },
+                { deep: true },
+            )
+
+            watch(status, async (newValue) => {
+                if (newValue === FormStatus.invalid) {
+                    const toReturn = toRaw(errors.value)
+                    emit('invalid', toReturn)
+                    options?.onInvalid?.(
+                        toReturn as z.inferFormattedError<Schema> | undefined,
+                    )
+                    return
+                }
+                if (newValue === FormStatus.valid) {
+                    const toReturn = toRaw(formData.value)
+                    emit('valid', toReturn)
+                    options?.onValid?.(toReturn)
+                    emit('update:modelValue', toReturn)
+                    options?.onUpdate?.(toReturn)
+                    return
+                }
+                if (newValue === FormStatus.submitting) {
+                    const toReturn = toRaw(formData.value)
+                    emit('submit', toReturn)
+                    options?.onSubmit?.(toReturn)
+                    return
+                }
+                if (newValue === FormStatus.reset) {
+                    const toReturn = toRaw(formData.value)
+                    emit('reset', toReturn)
+                    options?.onReset?.(toReturn)
+                    return
+                }
+                if (newValue === FormStatus.updated) {
+                    if (
+                        errors.value
+                        || options?.continuousValidation
+                        || props.continuousValidation
+                    ) {
+                        await validate(undefined, validationFields)
+                    }
+                    if (
+                        !formData.value
+                        || !props.modelValue
+                        || JSON.stringify(formData.value)
+                        !== JSON.stringify(props.modelValue)
+                    ) {
+                        const toReturn = toRaw(formData.value)
+                        emit('update:modelValue', toReturn)
+                        options?.onUpdate?.(toReturn)
+                    }
+                    if (status.value === FormStatus.updated) {
+                        status.value = FormStatus.unknown
+                    }
+                }
+            })
+
+            // readonly
+            onMounted(() => {
+                readonly.value = props.readonly
+            })
+            watch(
+                () => props.readonly,
+                (newValue) => {
+                    readonly.value = newValue
+                },
+            )
+            watch(readonly, (newValue) => {
+                if (newValue !== props.readonly) {
+                    emit('update:readonly', readonly.value)
+                }
+            })
+
+            provide(provideKey, {
+                clear,
+                errors: readonlyErrors,
+                formData,
+                ignoreUpdates,
+                invalid,
+                readonly,
+                reset,
+                status: readonlyStatus,
+                stopUpdatesWatch,
+                submit,
+                validate,
+            })
+
+            return {
+                clear,
+                errors: readonlyErrors,
+                formData,
+                ignoreUpdates,
+                invalid,
+                isReadonly: readonly,
+                reset,
+                status: readonlyStatus,
+                stopUpdatesWatch,
+                submit,
+                validate,
+            }
+        },
+        render() {
+            const defaultSlot = () =>
+                this.$slots?.default?.({
+                    clear,
+                    errors: readonlyErrors,
+                    formData,
+                    ignoreUpdates,
+                    invalid,
+                    readonly,
+                    reset,
+                    status: readonlyStatus,
+                    stopUpdatesWatch,
+                    submit,
+                    validate,
+                }) ?? this.$slots.default
+            return h(
+                this.tag,
+                {
+                    onSubmit: withModifiers(this.submit, ['prevent']),
+                    onReset: withModifiers(this.reset, ['prevent']),
+                },
+                (this.template ?? options?.template) && VvFormTemplate
+                    ? [
+                            h(
+                                VvFormTemplate,
+                                {
+                                    schema: this.template ?? options?.template,
+                                },
+                                {
+                                    default: defaultSlot,
+                                },
+                            ),
+                        ]
+                    : {
+                            default: defaultSlot,
+                        },
+            )
+        },
+    })
+    return {
+        clear,
+        errors,
+        formData,
+        ignoreUpdates,
+        invalid,
+        readonly,
+        reset,
+        status,
+        stopUpdatesWatch,
+        submit,
+        validate,
+        VvForm,
+    }
 }