@volverjs/form-vue 0.0.9 → 0.0.10-beta.10

package/src/VvFormField.ts

@@ -16,21 +16,25 @@ import {
 	toRefs,
 	watch,
 	defineComponent,
+	onBeforeUnmount,
 } from 'vue'
+import type { z } from 'zod'
 import { FormFieldType } from './enums'
 import type {
 	InjectedFormData,
 	InjectedFormWrapperData,
 	InjectedFormFieldData,
-	FormComposableOptions,
+	FormFieldComponentOptions,
+	Path,
+	FormSchema,
 } from './types'
 
-export const defineFormField = (
-	formProvideKey: InjectionKey<InjectedFormData>,
-	wrapperProvideKey: InjectionKey<InjectedFormWrapperData>,
-	formFieldInjectionKey: InjectionKey<InjectedFormFieldData>,
-	options: FormComposableOptions = {},
-): Component => {
+export const defineFormField = <Schema extends FormSchema>(
+	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
+	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
+	formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>,
+	options?: FormFieldComponentOptions,
+) => {
 	// define component
 	return defineComponent({
 		name: 'FieldComponent',
@@ -47,15 +51,20 @@ export const defineFormField = (
 				default: undefined,
 			},
 			name: {
-				type: [String, Number, Boolean, Symbol],
+				type: [String, Number, Boolean, Symbol] as PropType<
+					Path<z.infer<Schema>>
+				>,
 				required: true,
 			},
 			props: {
 				type: [Object, Function] as PropType<
-					| Record<string, unknown>
-					| ((
-							formData?: Ref<ObjectConstructor>,
-					  ) => Record<string, unknown>)
+					Partial<
+						| z.infer<Schema>
+						| undefined
+						| ((
+								formData?: Ref<ObjectConstructor>,
+						  ) => Partial<z.infer<Schema>> | undefined)
+					>
 				>,
 				default: () => ({}),
 			},
@@ -67,6 +76,10 @@ export const defineFormField = (
 				type: [String, Number, Boolean, Array, Object],
 				default: undefined,
 			},
+			lazyLoad: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		emits: ['invalid', 'valid', 'update:formData', 'update:modelValue'],
 		expose: ['invalid', 'invalidLabel', 'errors'],
@@ -74,22 +87,22 @@ export const defineFormField = (
 			// v-model
 			const modelValue = computed({
 				get() {
-					if (!formProvided?.modelValue) return
+					if (!injectedFormData?.formData) return
 					return get(
-						Object(formProvided.modelValue.value),
+						Object(injectedFormData.formData.value),
 						String(props.name),
 					)
 				},
 				set(value) {
-					if (!formProvided?.modelValue) return
+					if (!injectedFormData?.formData) return
 					set(
-						Object(formProvided.modelValue.value),
+						Object(injectedFormData.formData.value),
 						String(props.name),
 						value,
 					)
 					emit('update:modelValue', {
 						newValue: modelValue.value,
-						formData: formProvided?.modelValue,
+						formData: injectedFormData?.formData,
 					})
 				},
 			})
@@ -102,21 +115,26 @@ export const defineFormField = (
 				}
 			})
 
+			onBeforeUnmount(() => {
+				unwatchInvalid()
+				unwatchInjectedFormData()
+			})
+
 			// inject data from parent form wrapper
-			const wrapperProvided = inject(wrapperProvideKey, undefined)
-			if (wrapperProvided) {
-				wrapperProvided.fields.value.add(props.name as string)
+			const injectedWrapperData = inject(wrapperProvideKey, undefined)
+			if (injectedWrapperData) {
+				injectedWrapperData.fields.value.add(props.name as string)
 			}
 
 			// inject data from parent form
-			const formProvided = inject(formProvideKey)
+			const injectedFormData = inject(formProvideKey)
 			const { props: fieldProps, name: fieldName } = toRefs(props)
 
 			const errors = computed(() => {
-				if (!formProvided?.errors.value) {
+				if (!injectedFormData?.errors.value) {
 					return undefined
 				}
-				return get(formProvided.errors.value, String(props.name))
+				return get(injectedFormData.errors.value, String(props.name))
 			})
 			const invalidLabel = computed(() => {
 				return errors.value?._errors
@@ -124,27 +142,30 @@ export const defineFormField = (
 			const invalid = computed(() => {
 				return errors.value !== undefined
 			})
-			watch(invalid, () => {
+			const unwatchInvalid = watch(invalid, () => {
 				if (invalid.value) {
 					emit('invalid', invalidLabel.value)
-					if (wrapperProvided) {
-						wrapperProvided.errors.value.set(props.name as string, {
-							_errors: invalidLabel.value,
-						})
+					if (injectedWrapperData) {
+						injectedWrapperData.errors.value.set(
+							props.name as string,
+							{
+								_errors: invalidLabel.value,
+							},
+						)
 					}
 				} else {
 					emit('valid', modelValue.value)
-					if (wrapperProvided) {
-						wrapperProvided.errors.value.delete(
+					if (injectedWrapperData) {
+						injectedWrapperData.errors.value.delete(
 							props.name as string,
 						)
 					}
 				}
 			})
-			watch(
-				() => formProvided?.modelValue,
+			const unwatchInjectedFormData = watch(
+				() => injectedFormData?.formData,
 				() => {
-					emit('update:formData', formProvided?.modelValue)
+					emit('update:formData', injectedFormData?.formData)
 				},
 				{ deep: true },
 			)
@@ -153,7 +174,7 @@ export const defineFormField = (
 			}
 			const hasFieldProps = computed(() => {
 				if (typeof fieldProps.value === 'function') {
-					return fieldProps.value(formProvided?.modelValue)
+					return fieldProps.value(injectedFormData?.formData)
 				}
 				return fieldProps.value
 			})
@@ -188,7 +209,6 @@ export const defineFormField = (
 				})(props.type as FormFieldType),
 				invalidLabel: invalidLabel.value,
 				modelValue: modelValue.value,
-				errors: props.is ? errors.value : undefined,
 				'onUpdate:modelValue': onUpdate,
 			}))
 
@@ -207,15 +227,15 @@ export const defineFormField = (
 									onUpdate,
 									invalid: invalid.value,
 									invalidLabel: invalidLabel.value,
-									formData: formProvided?.modelValue.value,
-									formErrors: formProvided?.errors.value,
+									formData: injectedFormData?.formData.value,
+									formErrors: injectedFormData?.errors.value,
 									errors: errors.value,
 								}) ?? slots.defalut
 							)
 						},
 					}
 				}
-				if (!options.lazyLoad) {
+				if (!(options?.lazyLoad ?? props.lazyLoad)) {
 					let component: string | ConcreteComponent
 					switch (props.type) {
 						case FormFieldType.select:
@@ -251,7 +271,7 @@ export const defineFormField = (
 					}
 				}
 				return defineAsyncComponent(async () => {
-					if (options.sideEffects) {
+					if (options?.sideEffects) {
 						await Promise.resolve(options.sideEffects(props.type))
 					}
 					switch (props.type) {

package/src/VvFormTemplate.ts

@@ -0,0 +1,179 @@
+import { get } from 'ts-dot-prop'
+import {
+	type Component,
+	type PropType,
+	type InjectionKey,
+	type DeepReadonly,
+	type Ref,
+	type VNode,
+	defineComponent,
+	h,
+	inject,
+	unref,
+} from 'vue'
+import type { TypeOf, z } from 'zod'
+import type { FormSchema, InjectedFormData, FormTemplateItem } from './types'
+import type { FormStatus } from './enums'
+
+export const defineFormTemplate = <Schema extends FormSchema>(
+	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
+	VvFormField: Component,
+) => {
+	const VvFormTemplate: Component = defineComponent({
+		props: {
+			schema: {
+				type: [Array, Function] as PropType<
+					| FormTemplateItem<Schema>[]
+					| ((
+							data?: InjectedFormData<Schema>,
+					  ) => FormTemplateItem<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
+						// 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,
+								),
+							)
+							return acc
+						}
+						if (vvIs) {
+							acc.push(
+								h(
+									vvIs as Component,
+									props,
+									vvSlots ?? hChildren,
+								),
+							)
+							return acc
+						}
+						if (vvChildren) {
+							acc.push(hChildren)
+							return acc
+						}
+						return acc
+					},
+					[
+						templateSlots?.default?.({
+							formData: injectedFormData?.formData.value,
+							submit: injectedFormData?.submit,
+							errors: injectedFormData?.errors.value,
+							status: injectedFormData?.status.value,
+							invalid: injectedFormData?.invalid.value,
+						}),
+					],
+				)
+		},
+	})
+
+	/**
+	 * An hack to add types to the default slot
+	 */
+	return VvFormTemplate as typeof VvFormTemplate & {
+		new (): {
+			$slots: {
+				default: (_: {
+					formData: unknown extends
+						| Partial<TypeOf<Schema>>
+						| undefined
+						? undefined
+						: Partial<TypeOf<Schema>> | undefined
+					submit: () => boolean
+					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
+			}
+		}
+	}
+}

package/src/VvFormWrapper.ts

@@ -10,14 +10,20 @@ import {
 	toRefs,
 	watch,
 	h,
+	type DeepReadonly,
 } from 'vue'
-import type { InjectedFormData, InjectedFormWrapperData } from './types'
+import type { TypeOf, z } from 'zod'
+import type {
+	FormSchema,
+	InjectedFormData,
+	InjectedFormWrapperData,
+} from './types'
 
-export const defineFormWrapper = (
-	formProvideKey: InjectionKey<InjectedFormData>,
-	wrapperProvideKey: InjectionKey<InjectedFormWrapperData>,
+export const defineFormWrapper = <Schema extends FormSchema>(
+	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
+	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
 ) => {
-	return defineComponent({
+	const VvFormWrapper = defineComponent({
 		name: 'WrapperComponent',
 		props: {
 			name: {
@@ -32,10 +38,10 @@ export const defineFormWrapper = (
 		emits: ['invalid', 'valid'],
 		expose: ['fields', 'invalid'],
 		setup(props, { emit }) {
-			const formProvided = inject(formProvideKey)
+			const injectedFormData = inject(formProvideKey)
 			const wrapperProvided = inject(wrapperProvideKey, undefined)
 			const fields = ref(new Set<string>())
-			const errors: Ref<
+			const fieldsErrors: Ref<
 				Map<string, Record<string, { _errors: string[] }>>
 			> = ref(new Map())
 			const { name } = toRefs(props)
@@ -43,7 +49,7 @@ export const defineFormWrapper = (
 			// provide data to child fields
 			provide(wrapperProvideKey, {
 				name: readonly(name),
-				errors,
+				errors: fieldsErrors,
 				fields,
 			})
 
@@ -62,7 +68,7 @@ export const defineFormWrapper = (
 
 			// add fields to parent wrapper
 			watch(
-				() => new Map(errors.value),
+				() => new Map(fieldsErrors.value),
 				(newValue, oldValue) => {
 					if (wrapperProvided?.errors) {
 						Array.from(oldValue.keys()).forEach((key) => {
@@ -80,10 +86,10 @@ export const defineFormWrapper = (
 			)
 
 			const invalid = computed(() => {
-				if (!formProvided?.errors.value) {
+				if (!injectedFormData?.invalid.value) {
 					return false
 				}
-				return errors.value.size > 0
+				return fieldsErrors.value.size > 0
 			})
 
 			watch(invalid, () => {
@@ -94,29 +100,64 @@ export const defineFormWrapper = (
 				}
 			})
 
-			return { formProvided, invalid, fields, errors }
+			return {
+				formData: injectedFormData?.formData,
+				errors: injectedFormData?.errors,
+				invalid,
+				fields,
+				fieldsErrors,
+			}
 		},
 		render() {
 			if (this.tag) {
-				return h(
-					this.tag,
-					null,
-					this.$slots.default?.({
-						invalid: this.invalid,
-						formData: this.formProvided?.modelValue,
-						errors: this.formProvided?.errors,
-						fieldsErrors: this.errors,
-					}) ?? this.$slots.defalut,
-				)
+				return h(this.tag, null, {
+					default: () =>
+						this.$slots.default?.({
+							invalid: this.invalid,
+							formData: this.formData,
+							errors: this.errors,
+							fieldsErrors: this.fieldsErrors,
+						}) ?? this.$slots.defalut,
+				})
 			}
 			return (
 				this.$slots.default?.({
 					invalid: this.invalid,
-					formData: this.formProvided?.modelValue,
-					errors: this.formProvided?.errors,
-					fieldsErrors: this.errors,
+					formData: this.formData,
+					errors: this.errors,
+					fieldsErrors: this.fieldsErrors,
 				}) ?? this.$slots.defalut
 			)
 		},
 	})
+	/**
+	 * An hack to add types to the default slot
+	 */
+	return VvFormWrapper as typeof VvFormWrapper & {
+		new (): {
+			$slots: {
+				default: (_: {
+					invalid: boolean
+					formData: unknown extends
+						| Partial<TypeOf<Schema>>
+						| undefined
+						? undefined
+						: Partial<TypeOf<Schema>> | undefined
+					errors: Readonly<
+						Ref<DeepReadonly<z.inferFormattedError<Schema>>>
+					>
+					fieldsErrors: Map<
+						string,
+						Record<
+							string,
+							{
+								_errors: string[]
+							}
+						>
+					>
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				}) => any
+			}
+		}
+	}
 }

package/src/enums.ts

@@ -21,3 +21,8 @@ export enum FormFieldType {
 	combobox = 'combobox',
 	custom = 'custom',
 }
+
+export enum FormStatus {
+	invalid = 'invalid',
+	valid = 'valid',
+}

package/src/index.ts

@@ -1,30 +1,45 @@
-import { type App, inject, type InjectionKey, type Plugin } from 'vue'
-import type { AnyZodObject, ZodEffects } from 'zod'
+import {
+	getCurrentInstance,
+	type App,
+	inject,
+	type InjectionKey,
+	type Plugin,
+} from 'vue'
 import { defineFormField } from './VvFormField'
 import { defineForm } from './VvForm'
 import { defineFormWrapper } from './VvFormWrapper'
+import { defineFormTemplate } from './VvFormTemplate'
 import type {
 	InjectedFormData,
 	InjectedFormWrapperData,
 	InjectedFormFieldData,
 	FormComposableOptions,
 	FormPluginOptions,
+	FormTemplateItem,
+	Path,
+	PathValue,
+	FormSchema,
 } from './types'
 
-export const formFactory = (
-	schema: AnyZodObject | ZodEffects<AnyZodObject>,
+const _formFactory = <Schema extends FormSchema>(
+	schema: Schema,
 	options: FormComposableOptions = {},
 ) => {
-	// create injection keys form provide/inject
-	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData>
-	const formWrapperInjectionKey =
-		Symbol() as InjectionKey<InjectedFormWrapperData>
-
-	const formFieldInjectionKey =
-		Symbol() as InjectionKey<InjectedFormFieldData>
+	// create injection keys
+	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData<Schema>>
+	const formWrapperInjectionKey = Symbol() as InjectionKey<
+		InjectedFormWrapperData<Schema>
+	>
+	const formFieldInjectionKey = Symbol() as InjectionKey<
+		InjectedFormFieldData<Schema>
+	>
 
 	// create components
-	const VvForm = defineForm(schema, formInjectionKey, options)
+	const { VvForm, errors, status, formData } = defineForm(
+		schema,
+		formInjectionKey,
+		options,
+	)
 	const VvFormWrapper = defineFormWrapper(
 		formInjectionKey,
 		formWrapperInjectionKey,
@@ -35,14 +50,19 @@ export const formFactory = (
 		formFieldInjectionKey,
 		options,
 	)
+	const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
 
 	return {
 		VvForm,
 		VvFormWrapper,
 		VvFormField,
+		VvFormTemplate,
 		formInjectionKey,
 		formWrapperInjectionKey,
 		formFieldInjectionKey,
+		errors,
+		status,
+		formData,
 	}
 }
 
@@ -53,7 +73,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, options)
 	}
 	return {
 		...toReturn,
@@ -72,17 +92,25 @@ export const createForm = (
 				if (toReturn?.VvFormField) {
 					app.component('VvFormField', toReturn.VvFormField)
 				}
+				if (toReturn?.VvFormTemplate) {
+					app.component('VvFormTemplate', toReturn.VvFormTemplate)
+				}
 			}
 		},
 	}
 }
 
-export const useForm = (
-	schema: AnyZodObject | ZodEffects<AnyZodObject>,
+export const useForm = <Schema extends FormSchema>(
+	schema: Schema,
 	options: FormComposableOptions = {},
 ) => {
-	const hasOptions = { ...inject(pluginInjectionKey, {}), ...options }
-	return formFactory(schema, hasOptions)
+	if (!getCurrentInstance()) {
+		return _formFactory(schema, options)
+	}
+	return _formFactory(schema, {
+		...inject(pluginInjectionKey, {}),
+		...options,
+	})
 }
 
 export { FormFieldType } from './enums'
@@ -91,6 +119,7 @@ export { defaultObjectBySchema } from './utils'
 type FormComponent = ReturnType<typeof defineForm>
 type FormWrapperComponent = ReturnType<typeof defineFormWrapper>
 type FormFieldComponent = ReturnType<typeof defineFormField>
+type FormTemplateComponent = ReturnType<typeof defineFormTemplate>
 
 export type {
 	InjectedFormData,
@@ -101,4 +130,18 @@ export type {
 	FormComponent,
 	FormWrapperComponent,
 	FormFieldComponent,
+	FormTemplateComponent,
+	FormTemplateItem,
+	Path,
+	PathValue,
+}
+
+/**
+ * @deprecated Use `useForm()` instead
+ */
+export const formFactory = <Schema extends FormSchema>(
+	schema: Schema,
+	options: FormComposableOptions = {},
+) => {
+	return _formFactory(schema, options)
 }