@volverjs/form-vue 1.0.0-beta.1 → 1.0.0-beta.3

package/src/VvForm.ts

@@ -4,6 +4,7 @@ import {
 	type DeepReadonly,
 	type Ref,
 	type PropType,
+	type WatchStopHandle,
 	withModifiers,
 	defineComponent,
 	ref,
@@ -15,8 +16,12 @@ import {
 	isProxy,
 	computed,
 } from 'vue'
-import { watchThrottled } from '@vueuse/core'
-import type { z, ZodFormattedError, TypeOf } from 'zod'
+import {
+	watchIgnorable,
+	throttleFilter,
+	type IgnoredUpdater,
+} from '@vueuse/core'
+import { type z, type ZodFormattedError, type TypeOf } from 'zod'
 import type {
 	FormComponentOptions,
 	FormSchema,
@@ -34,21 +39,57 @@ export const defineForm = <Schema extends FormSchema>(
 ) => {
 	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 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 submit = async () => {
+		if (!(await validate())) {
+			return false
+		}
+		status.value = FormStatus.submitting
+		return true
+	}
+
+	const { ignoreUpdates, stop: stopUpdatesWatch } = watchIgnorable(
+		formData,
+		() => {
+			status.value = FormStatus.updated
+		},
+		{
+			deep: true,
+			eventFilter: throttleFilter(options?.updateThrottle ?? 500),
+		},
+	)
+
 	const component = defineComponent({
-		name: 'FormComponent',
+		name: 'VvForm',
 		props: {
+			continuosValidation: {
+				type: Boolean,
+				default: false,
+			},
 			modelValue: {
 				type: Object,
 				default: () => ({}),
 			},
-			updateThrottle: {
-				type: Number,
-				default: 500,
-			},
-			continuosValidation: {
-				type: Boolean,
-				default: false,
+			tag: {
+				type: String,
+				default: 'form',
 			},
 			template: {
 				type: [Array, Function] as PropType<FormTemplate<Schema>>,
@@ -63,7 +104,6 @@ export const defineForm = <Schema extends FormSchema>(
 				toRaw(props.modelValue),
 			)
 
-			// clone modelValue and update formData
 			watch(
 				() => props.modelValue,
 				(newValue) => {
@@ -80,72 +120,60 @@ export const defineForm = <Schema extends FormSchema>(
 				{ deep: true },
 			)
 
-			// emit update:modelValue on formData change
-			watchThrottled(
-				formData,
-				async (newValue) => {
+			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) ??
+						errors.value ||
+						options?.continuosValidation ||
 						props.continuosValidation
 					) {
 						await validate()
 					}
 					if (
-						!newValue ||
+						!formData.value ||
 						!props.modelValue ||
-						JSON.stringify(newValue) !==
+						JSON.stringify(formData.value) !==
 							JSON.stringify(props.modelValue)
 					) {
-						emit('update:modelValue', newValue)
-						options?.onUpdate?.(toRaw(newValue))
+						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
 					}
-				},
-				{
-					deep: true,
-					throttle: options?.updateThrottle ?? props.updateThrottle,
-				},
-			)
-
-			// validate formData with safeParse
-			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
-					emit('invalid', errors.value)
-					options?.onInvalid?.(toRaw(errors.value))
-					return false
-				}
-				errors.value = undefined
-				status.value = FormStatus.valid
-				formData.value = parseResult.data
-				emit('update:modelValue', formData.value)
-				options?.onUpdate?.(toRaw(formData.value))
-				emit('valid', parseResult.data)
-				options?.onValid?.(toRaw(formData.value))
-				return true
-			}
-
-			// emit submit event if form is valid
-			const submit = async () => {
-				if (!(await validate())) {
-					return false
 				}
-				emit('submit', formData.value as z.infer<Schema>)
-				options?.onSubmit?.(toRaw(formData.value) as z.infer<Schema>)
-				return true
-			}
-
-			const invalid = computed(() => status.value === FormStatus.invalid)
+			})
 
-			// provide data to children
 			provide(provideKey, {
 				formData,
 				submit,
 				validate,
+				ignoreUpdates,
+				stopUpdatesWatch,
 				errors: readonly(errors),
 				status: readonly(status),
 				invalid,
@@ -155,6 +183,8 @@ export const defineForm = <Schema extends FormSchema>(
 				formData,
 				submit,
 				validate,
+				ignoreUpdates,
+				stopUpdatesWatch,
 				errors: readonly(errors),
 				status: readonly(status),
 				invalid,
@@ -166,12 +196,14 @@ export const defineForm = <Schema extends FormSchema>(
 					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(
-				'form',
+				this.tag,
 				{
 					onSubmit: withModifiers(this.submit, ['prevent']),
 				},
@@ -196,7 +228,12 @@ export const defineForm = <Schema extends FormSchema>(
 	return {
 		errors,
 		status,
+		invalid,
 		formData,
+		validate,
+		submit,
+		ignoreUpdates,
+		stopUpdatesWatch,
 		/**
 		 * An hack to add types to the default slot
 		 */
@@ -211,6 +248,8 @@ export const defineForm = <Schema extends FormSchema>(
 							: Partial<TypeOf<Schema>> | undefined
 						submit: () => Promise<boolean>
 						validate: () => Promise<boolean>
+						ignoreUpdates: IgnoredUpdater
+						stopUpdatesWatch: WatchStopHandle
 						errors: Readonly<
 							Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 						>

package/src/VvFormField.ts

@@ -38,7 +38,7 @@ export const defineFormField = <Schema extends FormSchema>(
 ) => {
 	// define component
 	return defineComponent({
-		name: 'FieldComponent',
+		name: 'VvFormField',
 		props: {
 			type: {
 				type: String as PropType<`${FormFieldType}`>,

package/src/VvFormTemplate.ts

@@ -20,6 +20,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 	VvFormField: Component,
 ) => {
 	const VvFormTemplate = defineComponent({
+		name: 'VvFormTemplate',
 		props: {
 			schema: {
 				type: [Array, Function] as PropType<FormTemplate<Schema>>,

package/src/VvFormWrapper.ts

@@ -24,7 +24,7 @@ export const defineFormWrapper = <Schema extends FormSchema>(
 	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
 ) => {
 	const VvFormWrapper = defineComponent({
-		name: 'WrapperComponent',
+		name: 'VvFormWrapper',
 		props: {
 			name: {
 				type: String,

package/src/enums.ts

@@ -25,4 +25,7 @@ export enum FormFieldType {
 export enum FormStatus {
 	invalid = 'invalid',
 	valid = 'valid',
+	submitting = 'submitting',
+	updated = 'updated',
+	unknown = 'unknown',
 }

package/src/index.ts

@@ -48,12 +48,17 @@ const _formFactory = <Schema extends FormSchema>(
 		options,
 	)
 	const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
-	const { VvForm, errors, status, formData } = defineForm(
-		schema,
-		formInjectionKey,
-		options,
-		VvFormTemplate,
-	)
+	const {
+		VvForm,
+		errors,
+		status,
+		invalid,
+		formData,
+		validate,
+		submit,
+		ignoreUpdates,
+		stopUpdatesWatch,
+	} = defineForm(schema, formInjectionKey, options, VvFormTemplate)
 
 	return {
 		VvForm,
@@ -65,7 +70,12 @@ const _formFactory = <Schema extends FormSchema>(
 		formFieldInjectionKey,
 		errors,
 		status,
+		invalid,
 		formData,
+		validate,
+		submit,
+		ignoreUpdates,
+		stopUpdatesWatch,
 	}
 }
 

package/src/types.ts

@@ -1,5 +1,6 @@
-import { type Component, type DeepReadonly, type Ref } from 'vue'
+import type { Component, DeepReadonly, Ref, WatchStopHandle } from 'vue'
 import type { z, AnyZodObject, ZodEffects, inferFormattedError } from 'zod'
+import type { IgnoredUpdater } from '@vueuse/core'
 import type { FormFieldType, FormStatus } from './enums'
 
 export type FormSchema =
@@ -47,6 +48,8 @@ export type InjectedFormData<Schema extends FormSchema> = {
 	>
 	submit: () => Promise<boolean>
 	validate: () => Promise<boolean>
+	ignoreUpdates: IgnoredUpdater
+	stopUpdatesWatch: WatchStopHandle
 	status: Readonly<Ref<FormStatus | undefined>>
 	invalid: Readonly<Ref<boolean>>
 }