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

package/dist/src/types.d.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 = AnyZodObject | ZodEffects<AnyZodObject> | ZodEffects<ZodEffects<AnyZodObject>>;
 export type FormFieldComponentOptions = {
@@ -23,8 +24,10 @@ export type FormPluginOptions = FormPluginOptionsSchema & FormComposableOptions<
 export type InjectedFormData<Schema extends FormSchema> = {
     formData: Ref<Partial<z.infer<Schema>> | undefined>;
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>>;
-    submit: () => boolean;
-    validate: () => boolean;
+    submit: () => Promise<boolean>;
+    validate: () => Promise<boolean>;
+    ignoreUpdates: IgnoredUpdater;
+    stopUpdatesWatch: WatchStopHandle;
     status: Readonly<Ref<FormStatus | undefined>>;
     invalid: Readonly<Ref<boolean>>;
 };
@@ -38,16 +41,15 @@ export type InjectedFormFieldData<Schema extends FormSchema> = {
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>;
 };
 export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
-type ArrayKey = number;
 type IsTuple<T extends readonly any[]> = number extends T['length'] ? false : true;
 type TupleKeys<T extends readonly any[]> = Exclude<keyof T, keyof any[]>;
 export type PathConcat<TKey extends string | number, TValue> = TValue extends Primitive ? `${TKey}` : `${TKey}` | `${TKey}.${Path<TValue>}`;
 export type Path<T> = T extends readonly (infer V)[] ? IsTuple<T> extends true ? {
     [K in TupleKeys<T>]-?: PathConcat<K & string, T[K]>;
-}[TupleKeys<T>] : PathConcat<ArrayKey, V> : {
+}[TupleKeys<T>] : PathConcat<number, V> : {
     [K in keyof T]-?: PathConcat<K & string, T[K]>;
 }[keyof T];
-export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any ? TPath extends `${infer K}.${infer R}` ? K extends keyof T ? R extends Path<T[K]> ? undefined extends T[K] ? PathValue<T[K], R> | undefined : PathValue<T[K], R> : never : K extends `${ArrayKey}` ? T extends readonly (infer V)[] ? PathValue<V, R & Path<V>> : never : never : TPath extends keyof T ? T[TPath] : TPath extends `${ArrayKey}` ? T extends readonly (infer V)[] ? V : never : never : never;
+export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any ? TPath extends `${infer K}.${infer R}` ? K extends keyof T ? R extends Path<T[K]> ? undefined extends T[K] ? PathValue<T[K], R> | undefined : PathValue<T[K], R> : never : K extends `${number}` ? T extends readonly (infer V)[] ? PathValue<V, R & Path<V>> : never : never : TPath extends keyof T ? T[TPath] : TPath extends `${number}` ? T extends readonly (infer V)[] ? V : never : never : never;
 export type AnyBoolean<Schema extends FormSchema> = boolean | Ref<boolean> | ((data?: InjectedFormData<Schema>) => boolean | Ref<boolean>);
 export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<string, any> & {
     vvIs?: string | Component;

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.14",
+  "version": "1.0.0-beta.2",
   "engines": {
     "node": ">= 16.x"
   },
@@ -35,35 +35,35 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "0.0.10-beta.3",
-    "@vueuse/core": "^10.4.1",
+    "@volverjs/ui-vue": "next",
+    "@vueuse/core": "^10.5.0",
     "ts-dot-prop": "^2.1.3",
-    "vue": "^3.3.4",
-    "zod": "^3.22.2"
+    "vue": "^3.3.6",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.38.0",
+    "@playwright/experimental-ct-vue": "1.39.0",
     "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@vitejs/plugin-vue": "^4.3.4",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@vitejs/plugin-vue": "^4.4.0",
     "@volverjs/style": "^0.1.11",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.3.6",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/runtime-core": "^3.3.4",
+    "@vue/runtime-core": "^3.3.6",
     "@vue/test-utils": "^2.4.1",
     "copy": "^0.3.2",
-    "eslint": "^8.49.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-vue": "^9.17.0",
-    "happy-dom": "^11.0.6",
+    "happy-dom": "^12.9.1",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.3",
+    "vite": "^4.5.0",
+    "vite-plugin-dts": "^3.6.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.7.0",
-    "vitest": "^0.34.4"
+    "vitest": "^0.34.6"
   },
   "typesVersions": {
     "*": {

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,
@@ -35,20 +40,55 @@ export const defineForm = <Schema extends FormSchema>(
 	const errors = ref<z.inferFormattedError<Schema> | undefined>()
 	const status = ref<FormStatus | undefined>()
 	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 +103,6 @@ export const defineForm = <Schema extends FormSchema>(
 				toRaw(props.modelValue),
 			)
 
-			// clone modelValue and update formData
 			watch(
 				() => props.modelValue,
 				(newValue) => {
@@ -80,72 +119,62 @@ export const defineForm = <Schema extends FormSchema>(
 				{ deep: true },
 			)
 
-			// emit update:modelValue on formData change
-			watchThrottled(
-				formData,
-				(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
 					) {
-						validate()
+						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 = (value = formData.value) => {
-				const parseResult = schema.safeParse(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 = () => {
-				if (!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 +184,8 @@ export const defineForm = <Schema extends FormSchema>(
 				formData,
 				submit,
 				validate,
+				ignoreUpdates,
+				stopUpdatesWatch,
 				errors: readonly(errors),
 				status: readonly(status),
 				invalid,
@@ -166,12 +197,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']),
 				},
@@ -197,6 +230,10 @@ export const defineForm = <Schema extends FormSchema>(
 		errors,
 		status,
 		formData,
+		validate,
+		submit,
+		ignoreUpdates,
+		stopUpdatesWatch,
 		/**
 		 * An hack to add types to the default slot
 		 */
@@ -209,8 +246,10 @@ export const defineForm = <Schema extends FormSchema>(
 							| undefined
 							? undefined
 							: Partial<TypeOf<Schema>> | undefined
-						submit: () => boolean
-						validate: () => boolean
+						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>>,
@@ -162,8 +163,8 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 						| undefined
 						? undefined
 						: Partial<TypeOf<Schema>> | undefined
-					submit: () => boolean
-					validate: () => boolean
+					submit: () => Promise<boolean>
+					validate: () => Promise<boolean>
 					errors: Readonly<
 						Ref<DeepReadonly<z.inferFormattedError<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,
@@ -149,8 +149,8 @@ export const defineFormWrapper = <Schema extends FormSchema>(
 						| undefined
 						? undefined
 						: Partial<TypeOf<Schema>> | undefined
-					submit: () => boolean
-					validate: () => boolean
+					submit: () => Promise<boolean>
+					validate: () => Promise<boolean>
 					errors: Readonly<
 						Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 					>

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,16 @@ 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,
+		formData,
+		validate,
+		submit,
+		ignoreUpdates,
+		stopUpdatesWatch,
+	} = defineForm(schema, formInjectionKey, options, VvFormTemplate)
 
 	return {
 		VvForm,
@@ -66,6 +70,10 @@ const _formFactory = <Schema extends FormSchema>(
 		errors,
 		status,
 		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 =
@@ -45,8 +46,10 @@ export type InjectedFormData<Schema extends FormSchema> = {
 	errors: Readonly<
 		Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>
 	>
-	submit: () => boolean
-	validate: () => boolean
+	submit: () => Promise<boolean>
+	validate: () => Promise<boolean>
+	ignoreUpdates: IgnoredUpdater
+	stopUpdatesWatch: WatchStopHandle
 	status: Readonly<Ref<FormStatus | undefined>>
 	invalid: Readonly<Ref<boolean>>
 }
@@ -71,8 +74,6 @@ export type Primitive =
 	| symbol
 	| bigint
 
-type ArrayKey = number
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type IsTuple<T extends readonly any[]> = number extends T['length']
 	? false
@@ -91,7 +92,7 @@ export type Path<T> = T extends readonly (infer V)[]
 		? {
 				[K in TupleKeys<T>]-?: PathConcat<K & string, T[K]>
 		  }[TupleKeys<T>]
-		: PathConcat<ArrayKey, V>
+		: PathConcat<number, V>
 	: {
 			[K in keyof T]-?: PathConcat<K & string, T[K]>
 	  }[keyof T]
@@ -105,14 +106,14 @@ export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any
 					? PathValue<T[K], R> | undefined
 					: PathValue<T[K], R>
 				: never
-			: K extends `${ArrayKey}`
+			: K extends `${number}`
 			? T extends readonly (infer V)[]
 				? PathValue<V, R & Path<V>>
 				: never
 			: never
 		: TPath extends keyof T
 		? T[TPath]
-		: TPath extends `${ArrayKey}`
+		: TPath extends `${number}`
 		? T extends readonly (infer V)[]
 			? V
 			: never