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

package/dist/{types.d.ts → src/types.d.ts}

@@ -1,19 +1,25 @@
-import type { Component, DeepReadonly, Ref } from 'vue';
-import type { z, AnyZodObject, ZodEffects } from 'zod';
+import { type Component, type DeepReadonly, type Ref } from 'vue';
+import type { z, AnyZodObject, ZodEffects, inferFormattedError } from 'zod';
 import type { FormFieldType, FormStatus } from './enums';
 export type FormSchema = AnyZodObject | ZodEffects<AnyZodObject> | ZodEffects<ZodEffects<AnyZodObject>>;
 export type FormFieldComponentOptions = {
     lazyLoad?: boolean;
     sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void;
 };
-export type FormComponentOptions = {
+export type FormComponentOptions<Schema> = {
     updateThrottle?: number;
     continuosValidation?: boolean;
+    template?: Schema extends FormSchema ? FormTemplate<Schema> : never;
+    onUpdate?: Schema extends FormSchema ? (data: Partial<z.infer<Schema> | undefined>) => void : never;
+    onSubmit?: Schema extends FormSchema ? (data: z.infer<Schema>) => void : never;
+    onInvalid?: Schema extends FormSchema ? (error: inferFormattedError<Schema, string>) => void : never;
+    onValid?: Schema extends FormSchema ? (data: z.infer<Schema>) => void : never;
 };
-export type FormComposableOptions = FormFieldComponentOptions & FormComponentOptions;
-export type FormPluginOptions = {
+export type FormComposableOptions<Schema> = FormFieldComponentOptions & FormComponentOptions<Schema>;
+type FormPluginOptionsSchema = {
     schema?: FormSchema;
-} & FormComposableOptions;
+};
+export type FormPluginOptions = FormPluginOptionsSchema & FormComposableOptions<FormPluginOptionsSchema['schema']>;
 export type InjectedFormData<Schema extends FormSchema> = {
     formData: Ref<Partial<z.infer<Schema>> | undefined>;
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>>;
@@ -52,7 +58,9 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<string, a
     vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>;
     vvType?: `${FormFieldType}`;
     vvShowValid?: boolean;
+    vvContent?: string;
     vvDefaultValue?: any;
 };
 export type FormTemplateItem<Schema extends FormSchema> = SimpleFormTemplateItem<Schema> | ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>);
+export type FormTemplate<Schema extends FormSchema> = FormTemplateItem<Schema>[] | ((data?: InjectedFormData<Schema>) => FormTemplateItem<Schema>[]);
 export {};

package/dist/test-playwright/VvForm.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-playwright/VvFormField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-playwright/VvFormWrapper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-vitest/defaultObjectBySchema.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-vitest/useForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -19,11 +19,11 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.14-beta.2",
+  "version": "0.0.14-beta.4",
   "engines": {
     "node": ">= 16.x"
   },
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.7.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -35,34 +35,35 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "^0.0.8",
-    "@vueuse/core": "^10.3.0",
+    "@volverjs/ui-vue": "0.0.10-beta.3",
+    "@vueuse/core": "^10.4.1",
     "ts-dot-prop": "^2.1.3",
     "vue": "^3.3.4",
-    "zod": "^3.21.4"
+    "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.36.2",
+    "@playwright/experimental-ct-vue": "1.38.0",
     "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@vitejs/plugin-vue": "^4.3.4",
     "@volverjs/style": "^0.1.11",
     "@vue/compiler-sfc": "^3.3.4",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/runtime-core": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
     "copy": "^0.3.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "happy-dom": "^10.9.0",
-    "prettier": "^3.0.1",
-    "typescript": "^5.1.6",
+    "eslint-plugin-vue": "^9.17.0",
+    "happy-dom": "^11.0.6",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.1",
+    "vite-plugin-dts": "^3.5.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.7.0",
-    "vitest": "^0.34.1"
+    "vitest": "^0.34.4"
   },
   "typesVersions": {
     "*": {
@@ -83,9 +84,9 @@
   "scripts": {
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "type-check": "tsc --noEmit",
-    "build": "vite build",
     "dev": "vite build --watch",
-    "test": "pnpm run test-vitest && pnpm run test-playwright",
+    "build": "vite build",
+    "test": "pnpm run build && pnpm run test-vitest && pnpm run test-playwright",
     "test-vitest": "vitest run",
     "test-vitest-watch": "vitest",
     "test-playwright": "playwright test -c playwright-ct.config.ts",

package/src/VvForm.ts

@@ -1,7 +1,9 @@
 import {
+	type Component,
 	type InjectionKey,
 	type DeepReadonly,
 	type Ref,
+	type PropType,
 	withModifiers,
 	defineComponent,
 	ref,
@@ -18,6 +20,7 @@ import type { z, ZodFormattedError, TypeOf } from 'zod'
 import type {
 	FormComponentOptions,
 	FormSchema,
+	FormTemplate,
 	InjectedFormData,
 } from './types'
 import { FormStatus } from './enums'
@@ -26,7 +29,8 @@ import { defaultObjectBySchema } from './utils'
 export const defineForm = <Schema extends FormSchema>(
 	schema: Schema,
 	provideKey: InjectionKey<InjectedFormData<Schema>>,
-	options?: FormComponentOptions,
+	options?: FormComponentOptions<Schema>,
+	VvFormTemplate?: Component,
 ) => {
 	const errors = ref<z.inferFormattedError<Schema> | undefined>()
 	const status = ref<FormStatus | undefined>()
@@ -46,6 +50,10 @@ export const defineForm = <Schema extends FormSchema>(
 				type: Boolean,
 				default: false,
 			},
+			template: {
+				type: [Array, Function] as PropType<FormTemplate<Schema>>,
+				default: undefined,
+			},
 		},
 		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
 		expose: ['submit', 'validate', 'errors', 'status', 'valid', 'invalid'],
@@ -89,6 +97,7 @@ export const defineForm = <Schema extends FormSchema>(
 							JSON.stringify(props.modelValue)
 					) {
 						emit('update:modelValue', newValue)
+						options?.onUpdate?.(toRaw(newValue))
 					}
 				},
 				{
@@ -107,13 +116,16 @@ export const defineForm = <Schema extends FormSchema>(
 						>
 					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
 			}
 
@@ -122,7 +134,8 @@ export const defineForm = <Schema extends FormSchema>(
 				if (!validate()) {
 					return false
 				}
-				emit('submit', formData.value)
+				emit('submit', formData.value as z.infer<Schema>)
+				options?.onSubmit?.(toRaw(formData.value) as z.infer<Schema>)
 				return true
 			}
 
@@ -148,22 +161,35 @@ export const defineForm = <Schema extends FormSchema>(
 			}
 		},
 		render() {
+			const defaultSlot = () =>
+				this.$slots?.default?.({
+					formData: this.formData,
+					submit: this.submit,
+					validate: this.validate,
+					errors: this.errors,
+					status: this.status,
+					invalid: this.invalid,
+				}) ?? this.$slots.default
 			return h(
 				'form',
 				{
 					onSubmit: withModifiers(this.submit, ['prevent']),
 				},
-				{
-					default: () =>
-						this.$slots?.default?.({
-							formData: this.formData,
-							submit: this.submit,
-							validate: this.validate,
-							errors: this.errors,
-							status: this.status,
-							invalid: this.invalid,
-						}) ?? this.$slots.default,
-				},
+				(this.template ?? options?.template) && VvFormTemplate
+					? [
+							h(
+								VvFormTemplate,
+								{
+									schema: this.template ?? options?.template,
+								},
+								{
+									default: defaultSlot,
+								},
+							),
+					  ]
+					: {
+							default: defaultSlot,
+					  },
 			)
 		},
 	})

package/src/VvFormTemplate.ts

@@ -12,146 +12,141 @@ import {
 	unref,
 } from 'vue'
 import type { TypeOf, z } from 'zod'
-import type { FormSchema, InjectedFormData, FormTemplateItem } from './types'
+import type { FormSchema, InjectedFormData, FormTemplate } from './types'
 import type { FormStatus } from './enums'
 
 export const defineFormTemplate = <Schema extends FormSchema>(
 	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
 	VvFormField: Component,
 ) => {
-	const VvFormTemplate: Component = defineComponent({
+	const VvFormTemplate = defineComponent({
 		props: {
 			schema: {
-				type: [Array, Function] as PropType<
-					| FormTemplateItem<Schema>[]
-					| ((
-							data?: InjectedFormData<Schema>,
-					  ) => FormTemplateItem<Schema>[])
-				>,
+				type: [Array, Function] as PropType<FormTemplate<Schema>>,
 				required: true,
 			},
 		},
 		setup(templateProps, { slots: templateSlots }) {
 			const injectedFormData = inject(formProvideKey)
 			if (!injectedFormData?.formData) return
-			const normalizedSchema =
-				typeof templateProps.schema === 'function'
-					? templateProps.schema(injectedFormData)
-					: templateProps.schema
-			let lastIf: boolean | undefined = undefined
-			return () =>
-				normalizedSchema.reduce<(VNode | VNode[] | undefined)[]>(
-					(acc, field) => {
-						const normalizedField =
-							typeof field === 'function'
-								? field(injectedFormData)
-								: field
-						const {
-							vvIs,
-							vvName,
-							vvSlots,
-							vvChildren,
-							vvIf,
-							vvElseIf,
-							vvType,
-							vvDefaultValue,
-							vvShowValid,
-							...props
-						} = normalizedField
+			return () => {
+				const normalizedSchema =
+					typeof templateProps.schema === 'function'
+						? templateProps.schema(injectedFormData)
+						: templateProps.schema
+				let lastIf: boolean | undefined = undefined
+				const toReturn = normalizedSchema.reduce<
+					(VNode | VNode[] | undefined)[]
+				>((acc, field) => {
+					const normalizedField =
+						typeof field === 'function'
+							? field(injectedFormData)
+							: field
+					const {
+						vvIs,
+						vvName,
+						vvSlots,
+						vvChildren,
+						vvIf,
+						vvElseIf,
+						vvType,
+						vvDefaultValue,
+						vvShowValid,
+						vvContent,
+						...props
+					} = normalizedField
 
-						// conditions
-						if (vvIf !== undefined) {
-							if (typeof vvIf === 'string') {
-								lastIf = Boolean(
-									get(
-										Object(injectedFormData.formData.value),
-										vvIf,
-									),
-								)
-							} else if (typeof vvIf === 'function') {
-								lastIf = unref(vvIf(injectedFormData))
-							} else {
-								lastIf = unref(vvIf)
-							}
-							if (!lastIf) {
-								return acc
-							}
-						} else if (
-							vvElseIf !== undefined &&
-							lastIf !== undefined
-						) {
-							if (lastIf) {
-								return acc
-							}
-							if (typeof vvElseIf === 'string') {
-								lastIf = Boolean(
-									get(
-										Object(injectedFormData.formData.value),
-										vvElseIf,
-									),
-								)
-							} else if (typeof vvElseIf === 'function') {
-								lastIf = unref(vvElseIf(injectedFormData))
-							} else {
-								lastIf = unref(vvElseIf)
-							}
-							if (!lastIf) {
-								return acc
-							}
-						} else {
-							lastIf = undefined
-						}
-						// children
-						const hChildren = vvChildren
-							? h(VvFormTemplate, {
-									schema: vvChildren,
-							  })
-							: undefined
-						// render
-						if (vvName) {
-							acc.push(
-								h(
-									VvFormField,
-									{
-										name: vvName,
-										is: vvIs,
-										type: vvType,
-										defaultValue: vvDefaultValue,
-										showValid: vvShowValid,
-										props,
-									},
-									vvSlots ?? hChildren,
+					// conditions
+					if (vvIf !== undefined) {
+						if (typeof vvIf === 'string') {
+							lastIf = Boolean(
+								get(
+									Object(injectedFormData.formData.value),
+									vvIf,
 								),
 							)
+						} else if (typeof vvIf === 'function') {
+							lastIf = unref(vvIf(injectedFormData))
+						} else {
+							lastIf = unref(vvIf)
+						}
+						if (!lastIf) {
 							return acc
 						}
-						if (vvIs) {
-							acc.push(
-								h(
-									vvIs as Component,
-									props,
-									vvSlots ?? hChildren,
+					} else if (vvElseIf !== undefined && lastIf !== undefined) {
+						if (lastIf) {
+							return acc
+						}
+						if (typeof vvElseIf === 'string') {
+							lastIf = Boolean(
+								get(
+									Object(injectedFormData.formData.value),
+									vvElseIf,
 								),
 							)
-							return acc
+						} else if (typeof vvElseIf === 'function') {
+							lastIf = unref(vvElseIf(injectedFormData))
+						} else {
+							lastIf = unref(vvElseIf)
 						}
-						if (vvChildren) {
-							acc.push(hChildren)
+						if (!lastIf) {
 							return acc
 						}
+					} else {
+						lastIf = undefined
+					}
+					// children
+					const hChildren = vvChildren
+						? h(VvFormTemplate, {
+								schema: vvChildren,
+						  })
+						: undefined
+					// render
+					if (vvName) {
+						acc.push(
+							h(
+								VvFormField,
+								{
+									name: vvName,
+									is: vvIs,
+									type: vvType,
+									defaultValue: vvDefaultValue,
+									showValid: vvShowValid,
+									props,
+								},
+								vvSlots ?? hChildren ?? vvContent,
+							),
+						)
 						return acc
-					},
-					[
-						templateSlots?.default?.({
-							formData: injectedFormData?.formData.value,
-							submit: injectedFormData?.submit,
-							validate: injectedFormData?.validate,
-							errors: injectedFormData?.errors.value,
-							status: injectedFormData?.status.value,
-							invalid: injectedFormData?.invalid.value,
-						}),
-					],
+					}
+					if (vvIs) {
+						acc.push(
+							h(
+								vvIs as Component,
+								props,
+								vvSlots ?? hChildren ?? vvContent,
+							),
+						)
+						return acc
+					}
+					if (vvChildren) {
+						acc.push(hChildren)
+						return acc
+					}
+					return acc
+				}, [])
+				toReturn.push(
+					templateSlots?.default?.({
+						formData: injectedFormData?.formData.value,
+						submit: injectedFormData?.submit,
+						validate: injectedFormData?.validate,
+						errors: injectedFormData?.errors.value,
+						status: injectedFormData?.status.value,
+						invalid: injectedFormData?.invalid.value,
+					}),
 				)
+				return toReturn
+			}
 		},
 	})
 

package/src/index.ts

@@ -19,11 +19,13 @@ import type {
 	Path,
 	PathValue,
 	FormSchema,
+	FormTemplate,
 } from './types'
+import type { AnyZodObject } from 'zod'
 
 const _formFactory = <Schema extends FormSchema>(
 	schema: Schema,
-	options: FormComposableOptions = {},
+	options: FormComposableOptions<Schema> = {},
 ) => {
 	// create injection keys
 	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData<Schema>>
@@ -35,11 +37,6 @@ const _formFactory = <Schema extends FormSchema>(
 	>
 
 	// create components
-	const { VvForm, errors, status, formData } = defineForm(
-		schema,
-		formInjectionKey,
-		options,
-	)
 	const VvFormWrapper = defineFormWrapper(
 		formInjectionKey,
 		formWrapperInjectionKey,
@@ -51,6 +48,12 @@ const _formFactory = <Schema extends FormSchema>(
 		options,
 	)
 	const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
+	const { VvForm, errors, status, formData } = defineForm(
+		schema,
+		formInjectionKey,
+		options,
+		VvFormTemplate,
+	)
 
 	return {
 		VvForm,
@@ -73,7 +76,7 @@ export const createForm = (
 ): Plugin & Partial<ReturnType<typeof useForm>> => {
 	let toReturn: Partial<ReturnType<typeof useForm>> = {}
 	if (options.schema) {
-		toReturn = _formFactory(options.schema, options)
+		toReturn = _formFactory(options.schema as AnyZodObject, options)
 	}
 	return {
 		...toReturn,
@@ -102,15 +105,18 @@ export const createForm = (
 
 export const useForm = <Schema extends FormSchema>(
 	schema: Schema,
-	options: FormComposableOptions = {},
+	options: FormComposableOptions<Schema> = {},
 ) => {
 	if (!getCurrentInstance()) {
 		return _formFactory(schema, options)
 	}
-	return _formFactory(schema, {
-		...inject(pluginInjectionKey, {}),
-		...options,
-	})
+	return _formFactory(
+		schema as AnyZodObject,
+		{
+			...inject(pluginInjectionKey, {}),
+			...options,
+		} as FormComposableOptions<AnyZodObject>,
+	)
 }
 
 export { FormFieldType } from './enums'
@@ -126,10 +132,12 @@ export type {
 	InjectedFormWrapperData,
 	InjectedFormFieldData,
 	FormComposableOptions,
+	FormSchema,
 	FormPluginOptions,
 	FormComponent,
 	FormWrapperComponent,
 	FormFieldComponent,
+	FormTemplate,
 	FormTemplateComponent,
 	FormTemplateItem,
 	Path,
@@ -141,7 +149,7 @@ export type {
  */
 export const formFactory = <Schema extends FormSchema>(
 	schema: Schema,
-	options: FormComposableOptions = {},
+	options: FormComposableOptions<Schema> = {},
 ) => {
 	return _formFactory(schema, options)
 }

package/src/types.ts

@@ -1,5 +1,5 @@
-import type { Component, DeepReadonly, Ref } from 'vue'
-import type { z, AnyZodObject, ZodEffects } from 'zod'
+import { type Component, type DeepReadonly, type Ref } from 'vue'
+import type { z, AnyZodObject, ZodEffects, inferFormattedError } from 'zod'
 import type { FormFieldType, FormStatus } from './enums'
 
 export type FormSchema =
@@ -12,17 +12,33 @@ export type FormFieldComponentOptions = {
 	sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void
 }
 
-export type FormComponentOptions = {
+export type FormComponentOptions<Schema> = {
 	updateThrottle?: number
 	continuosValidation?: boolean
+	template?: Schema extends FormSchema ? FormTemplate<Schema> : never
+	onUpdate?: Schema extends FormSchema
+		? (data: Partial<z.infer<Schema> | undefined>) => void
+		: never
+	onSubmit?: Schema extends FormSchema
+		? (data: z.infer<Schema>) => void
+		: never
+	onInvalid?: Schema extends FormSchema
+		? (error: inferFormattedError<Schema, string>) => void
+		: never
+	onValid?: Schema extends FormSchema
+		? (data: z.infer<Schema>) => void
+		: never
 }
 
-export type FormComposableOptions = FormFieldComponentOptions &
-	FormComponentOptions
+export type FormComposableOptions<Schema> = FormFieldComponentOptions &
+	FormComponentOptions<Schema>
 
-export type FormPluginOptions = {
+type FormPluginOptionsSchema = {
 	schema?: FormSchema
-} & FormComposableOptions
+}
+
+export type FormPluginOptions = FormPluginOptionsSchema &
+	FormComposableOptions<FormPluginOptionsSchema['schema']>
 
 export type InjectedFormData<Schema extends FormSchema> = {
 	formData: Ref<Partial<z.infer<Schema>> | undefined>
@@ -125,6 +141,7 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
 	vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
 	vvType?: `${FormFieldType}`
 	vvShowValid?: boolean
+	vvContent?: string
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	vvDefaultValue?: any
 }
@@ -132,3 +149,7 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
 export type FormTemplateItem<Schema extends FormSchema> =
 	| SimpleFormTemplateItem<Schema>
 	| ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)
+
+export type FormTemplate<Schema extends FormSchema> =
+	| FormTemplateItem<Schema>[]
+	| ((data?: InjectedFormData<Schema>) => FormTemplateItem<Schema>[])