@volverjs/form-vue 1.0.0-beta.9 → 1.0.0

package/src/index.ts

@@ -1,134 +1,158 @@
 import {
-	getCurrentInstance,
-	type App,
-	inject,
-	type InjectionKey,
-	type Plugin,
+    getCurrentInstance,
+
+    inject,
+
 } from 'vue'
-import { defineFormField } from './VvFormField'
+import type { App, InjectionKey, Plugin } from 'vue'
+import type { AnyZodObject } from 'zod'
 import { defineForm } from './VvForm'
+import { defineFormField } from './VvFormField'
+import { defineFormFieldsGroup } from './VvFormFieldsGroup'
 import { defineFormWrapper } from './VvFormWrapper'
 import { defineFormTemplate } from './VvFormTemplate'
 import type {
-	InjectedFormData,
-	InjectedFormWrapperData,
-	InjectedFormFieldData,
-	FormComposableOptions,
-	FormPluginOptions,
-	FormTemplateItem,
-	Path,
-	PathValue,
-	FormSchema,
-	FormTemplate,
+    InjectedFormData,
+    InjectedFormWrapperData,
+    InjectedFormFieldData,
+    InjectedFormFieldsGroupData,
+    FormComposableOptions,
+    FormPluginOptions,
+    FormTemplateItem,
+    Path,
+    PathValue,
+    FormSchema,
+    FormTemplate,
 } from './types'
-import type { AnyZodObject } from 'zod'
 
-const _formFactory = <Schema extends FormSchema>(
-	schema: Schema,
-	options: FormComposableOptions<Schema> = {},
-) => {
-	// create injection keys
-	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData<Schema>>
-	const formWrapperInjectionKey = Symbol() as InjectionKey<
-		InjectedFormWrapperData<Schema>
-	>
-	const formFieldInjectionKey = Symbol() as InjectionKey<
-		InjectedFormFieldData<Schema>
-	>
+function _formType<Schema extends FormSchema, Type>(schema: Schema, options: FormComposableOptions<Schema, Type> = {}) {
+    // create injection keys
+    const formInjectionKey = Symbol('formInjectionKey') as InjectionKey<InjectedFormData<Schema, Type>>
+    const formWrapperInjectionKey = Symbol('formWrapperInjectionKey') as InjectionKey<
+        InjectedFormWrapperData<Schema>
+    >
+    const formFieldInjectionKey = Symbol('formFieldInjectionKey') as InjectionKey<
+        InjectedFormFieldData<Schema>
+    >
+    const formFieldsGroupInjectionKey = Symbol('formFieldsGroupInjectionKey') as InjectionKey<
+        InjectedFormFieldsGroupData<Schema>
+    >
 
-	// create components
-	const VvFormWrapper = defineFormWrapper(
-		formInjectionKey,
-		formWrapperInjectionKey,
-	)
-	const VvFormField = defineFormField(
-		formInjectionKey,
-		formWrapperInjectionKey,
-		formFieldInjectionKey,
-		options,
-	)
-	const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
-	const {
-		VvForm,
-		errors,
-		status,
-		invalid,
-		readonly,
-		formData,
-		validate,
-		submit,
-		ignoreUpdates,
-		stopUpdatesWatch,
-	} = defineForm(schema, formInjectionKey, options, VvFormTemplate)
+    // create components
+    const VvFormWrapper = defineFormWrapper<Schema, Type>(
+        formInjectionKey,
+        formWrapperInjectionKey,
+    )
+    const VvFormField = defineFormField<Schema, Type>(
+        formInjectionKey,
+        formWrapperInjectionKey,
+        formFieldInjectionKey,
+        options,
+    )
+    const VvFormFieldsGroup = defineFormFieldsGroup<Schema, Type>(
+        formInjectionKey,
+        formWrapperInjectionKey,
+        formFieldsGroupInjectionKey,
+    )
+    const VvFormTemplate = defineFormTemplate<Schema, Type>(formInjectionKey, VvFormField)
+    const wrappers = new Map<string, InjectedFormWrapperData<Schema>>()
+    const {
+        clear,
+        errors,
+        formData,
+        ignoreUpdates,
+        invalid,
+        readonly,
+        reset,
+        status,
+        stopUpdatesWatch,
+        submit,
+        validate,
+        VvForm,
+    } = defineForm(schema, formInjectionKey, options, VvFormTemplate, wrappers)
 
-	return {
-		VvForm,
-		VvFormWrapper,
-		VvFormField,
-		VvFormTemplate,
-		formInjectionKey,
-		formWrapperInjectionKey,
-		formFieldInjectionKey,
-		errors,
-		status,
-		invalid,
-		readonly,
-		formData,
-		validate,
-		submit,
-		ignoreUpdates,
-		stopUpdatesWatch,
-	}
+    return {
+        clear,
+        errors,
+        formData,
+        formFieldInjectionKey,
+        formInjectionKey,
+        formWrapperInjectionKey,
+        ignoreUpdates,
+        invalid,
+        readonly,
+        reset,
+        status,
+        stopUpdatesWatch,
+        submit,
+        validate,
+        wrappers,
+        VvForm,
+        VvFormField,
+        VvFormFieldsGroup,
+        VvFormTemplate,
+        VvFormWrapper,
+    }
 }
 
-export const pluginInjectionKey = Symbol() as InjectionKey<FormPluginOptions>
+export const pluginInjectionKey = Symbol('pluginInjectionKey') as InjectionKey<FormPluginOptions>
 
-export const createForm = (
-	options: FormPluginOptions,
-): Plugin & Partial<ReturnType<typeof useForm>> => {
-	let toReturn: Partial<ReturnType<typeof useForm>> = {}
-	if (options.schema) {
-		toReturn = _formFactory(options.schema as AnyZodObject, options)
-	}
-	return {
-		...toReturn,
-		install(app: App, { global = false } = {}) {
-			app.provide(pluginInjectionKey, options)
+export function createForm(options: FormPluginOptions): Plugin & Partial<ReturnType<typeof useForm>> {
+    let toReturn: Partial<ReturnType<typeof useForm>> = {}
+    if (options.schema) {
+        toReturn = _formType(options.schema as AnyZodObject, options)
+    }
+    return {
+        ...toReturn,
+        install(app: App, { global = false } = {}) {
+            app.provide(pluginInjectionKey, options)
 
-			if (global) {
-				app.config.globalProperties.$vvForm = options
+            if (global) {
+                app.config.globalProperties.$vvForm = options
 
-				if (toReturn?.VvForm) {
-					app.component('VvForm', toReturn.VvForm)
-				}
-				if (toReturn?.VvFormWrapper) {
-					app.component('VvFormWrapper', toReturn.VvFormWrapper)
-				}
-				if (toReturn?.VvFormField) {
-					app.component('VvFormField', toReturn.VvFormField)
-				}
-				if (toReturn?.VvFormTemplate) {
-					app.component('VvFormTemplate', toReturn.VvFormTemplate)
-				}
-			}
-		},
-	}
+                if (toReturn?.VvForm) {
+                    app.component('VvForm', toReturn.VvForm)
+                }
+                if (toReturn?.VvFormWrapper) {
+                    app.component('VvFormWrapper', toReturn.VvFormWrapper)
+                }
+                if (toReturn?.VvFormField) {
+                    app.component('VvFormField', toReturn.VvFormField)
+                }
+                if (toReturn?.VvFormFieldsGroup) {
+                    app.component('VvFormFieldsGroup', toReturn.VvFormFieldsGroup)
+                }
+                if (toReturn?.VvFormTemplate) {
+                    app.component('VvFormTemplate', toReturn.VvFormTemplate)
+                }
+            }
+        },
+    }
 }
 
-export const useForm = <Schema extends FormSchema>(
-	schema: Schema,
-	options: FormComposableOptions<Schema> = {},
-) => {
-	if (!getCurrentInstance()) {
-		return _formFactory(schema, options)
-	}
-	return _formFactory(
-		schema as AnyZodObject,
-		{
-			...inject(pluginInjectionKey, {}),
-			...options,
-		} as FormComposableOptions<AnyZodObject>,
-	)
+const formInstances: Map<string, ReturnType<typeof _formType>> = new Map()
+export function useForm<Schema extends FormSchema, Type>(schema: Schema, options: FormComposableOptions<Schema, Type> = {}): ReturnType <typeof _formType<Schema, Type>> {
+    if (options.scope && formInstances.has(options.scope)) {
+        return formInstances.get(options.scope)
+    }
+    if (!getCurrentInstance()) {
+        const toReturn = _formType(schema, options)
+        if (options.scope) {
+            formInstances.set(options.scope, toReturn)
+        }
+        return toReturn
+    }
+    const toReturn = _formType(
+        schema,
+        {
+            ...inject(pluginInjectionKey, {}),
+            ...options,
+        } as FormComposableOptions<Schema, Type>,
+    )
+    if (options.scope) {
+        formInstances.set(options.scope, toReturn)
+    }
+    return toReturn
 }
 
 export { FormFieldType } from './enums'
@@ -137,31 +161,30 @@ export { defaultObjectBySchema } from './utils'
 type FormComponent = ReturnType<typeof defineForm>
 type FormWrapperComponent = ReturnType<typeof defineFormWrapper>
 type FormFieldComponent = ReturnType<typeof defineFormField>
-type FormTemplateComponent = ReturnType<typeof defineFormTemplate>
+type FormFieldsGroupComponent = ReturnType<typeof defineFormFieldsGroup>
+type FormTemplateComponent = ReturnType<typeof defineFormFieldsGroup>
 
 export type {
-	InjectedFormData,
-	InjectedFormWrapperData,
-	InjectedFormFieldData,
-	FormComposableOptions,
-	FormSchema,
-	FormPluginOptions,
-	FormComponent,
-	FormWrapperComponent,
-	FormFieldComponent,
-	FormTemplate,
-	FormTemplateComponent,
-	FormTemplateItem,
-	Path,
-	PathValue,
+    FormComponent,
+    FormComposableOptions,
+    FormFieldComponent,
+    FormFieldsGroupComponent,
+    FormPluginOptions,
+    FormSchema,
+    FormTemplate,
+    FormTemplateComponent,
+    FormTemplateItem,
+    FormWrapperComponent,
+    InjectedFormData,
+    InjectedFormFieldData,
+    InjectedFormWrapperData,
+    Path,
+    PathValue,
 }
 
 /**
  * @deprecated Use `useForm()` instead
  */
-export const formFactory = <Schema extends FormSchema>(
-	schema: Schema,
-	options: FormComposableOptions<Schema> = {},
-) => {
-	return _formFactory(schema, options)
+export function formType<Schema extends FormSchema, Type>(schema: Schema, options: FormComposableOptions<Schema, Type> = {}) {
+    return _formType(schema, options)
 }

package/src/types.ts

@@ -1,158 +1,195 @@
-import type { Component, DeepReadonly, Ref, WatchStopHandle } from 'vue'
-import type { z, AnyZodObject, ZodEffects, inferFormattedError } from 'zod'
+import type { Component, DeepReadonly, Ref, RendererElement, RendererNode, VNode, WatchStopHandle } from 'vue'
+import type { z, AnyZodObject, ZodEffects, ZodOptional, ZodTypeAny, RefinementCtx } from 'zod'
 import type { IgnoredUpdater } from '@vueuse/core'
 import type { FormFieldType, FormStatus } from './enums'
 
-export type FormSchema =
-	| AnyZodObject
-	| ZodEffects<AnyZodObject>
-	| ZodEffects<ZodEffects<AnyZodObject>>
+type Depth = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // Adjust the depth limit as needed
+
+type DecrementDepth<D extends Depth[number]> = Depth[D]
+
+export type EffectType<T extends ZodTypeAny, D extends Depth[number] = 10>
+    = D extends 0
+        ? T
+        : T | ZodOptional<T> | ZodEffects<EffectType<T, DecrementDepth<D>>>
+
+export type FormSchema = EffectType<AnyZodObject>
 
 export type FormFieldComponentOptions = {
-	lazyLoad?: boolean
-	sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void
+    lazyLoad?: boolean
+    sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void
 }
 
-export type FormComponentOptions<Schema> = {
-	updateThrottle?: number
-	continuosValidation?: boolean
-	readonly?: 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 FormComponentOptions<Schema, Type> = {
+    updateThrottle?: number
+    continuousValidation?: boolean
+    readonly?: boolean
+    template?: Schema extends FormSchema ? FormTemplate<Schema, Type> : never
+    class?: Schema extends FormSchema ? new (data?: Partial<z.infer<Schema>>) => Type : never
+    onUpdate?: Schema extends FormSchema
+        ? (data?: undefined extends Type ? Partial<z.infer<Schema>> : Type) => void
+        : never
+    onSubmit?: Schema extends FormSchema
+        ? (data?: undefined extends Type ? Partial<z.infer<Schema>> : Type) => void
+        : never
+    onReset?: Schema extends FormSchema ? (data?: undefined extends Type ? Partial<z.infer<Schema>> : Type) => void : never
+    onInvalid?: Schema extends FormSchema
+        ? (error?: z.inferFormattedError<Schema>) => void
+        : never
+    onValid?: Schema extends FormSchema
+        ? (data?: undefined extends Type ? Partial<z.infer<Schema>> : Type) => void
+        : never
 }
 
-export type FormComposableOptions<Schema> = FormFieldComponentOptions &
-	FormComponentOptions<Schema>
+export type FormComposableOptions<Schema, Type> = FormFieldComponentOptions
+    & FormComponentOptions<Schema, Type> & {
+        scope?: string
+    }
 
-type FormPluginOptionsSchema = {
-	schema?: FormSchema
+type FormPluginOptionsSchema<T = Partial<z.infer<FormSchema>>> = {
+    schema?: FormSchema
+    factory?: (data?: Partial<z.infer<FormSchema>>) => T
 }
 
-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>
-	>
-	submit: () => Promise<boolean>
-	validate: () => Promise<boolean>
-	ignoreUpdates: IgnoredUpdater
-	stopUpdatesWatch: WatchStopHandle
-	status: Readonly<Ref<FormStatus | undefined>>
-	invalid: Readonly<Ref<boolean>>
-	readonly: Ref<boolean>
+export type FormPluginOptions = FormPluginOptionsSchema
+    & FormComposableOptions<FormPluginOptionsSchema['schema'], FormPluginOptionsSchema['factory']>
+
+export type InjectedFormData<Schema extends FormSchema, Type> = {
+    formData: Ref<(undefined extends Type ? Partial<z.infer<Schema>> : Type) | undefined>
+    errors: Readonly<
+        Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>
+    >
+    submit: () => Promise<boolean>
+    validate: (formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type, options?: { fields?: Set<Path<z.infer<Schema>>>, superRefine?: (arg: z.infer<Schema>, ctx: RefinementCtx) => void | Promise<void> }) => Promise<boolean>
+    clear: () => void
+    reset: () => void
+    ignoreUpdates: IgnoredUpdater
+    stopUpdatesWatch: WatchStopHandle
+    status: Readonly<Ref<FormStatus | undefined>>
+    invalid: Readonly<Ref<boolean>>
+    readonly: Ref<boolean>
+    wrappers: Map<string, InjectedFormWrapperData<Schema>>
 }
 
 export type InjectedFormWrapperData<Schema extends FormSchema> = {
-	name: Ref<string>
-	fields: Ref<Set<string>>
-	errors: Ref<Map<string, z.inferFormattedError<Schema, string>>>
+    name: Readonly<Ref<string>>
+    errors: Ref<Map<string, z.inferFormattedError<Schema>>>
+    invalid: Readonly<Ref<boolean>>
+    readonly: Readonly<Ref<boolean>>
+    fields: Ref<Map<string, string>>
 }
 
 export type InjectedFormFieldData<Schema extends FormSchema> = {
-	name: Ref<string>
-	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
+    name: Readonly<Ref<Path<z.infer<Schema>>>>
+    errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 }
 
-export type Primitive =
-	| null
-	| undefined
-	| string
-	| number
-	| boolean
-	| symbol
-	| bigint
+export type InjectedFormFieldsGroupData<Schema extends FormSchema> = {
+    names: DeepReadonly<Ref<Path<z.infer<Schema>>[]>>
+    errors: Readonly<Ref<DeepReadonly<Record<string, z.inferFormattedError<Schema>> | undefined>>>
+}
+
+export type Primitive
+    = | null
+        | undefined
+        | string
+        | number
+        | boolean
+        | symbol
+        | bigint
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type IsTuple<T extends readonly any[]> = number extends T['length']
-	? false
-	: true
+    ? false
+    : true
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TupleKeys<T extends readonly any[]> = Exclude<keyof T, keyof any[]>
 
 export type PathConcat<
-	TKey extends string | number,
-	TValue,
+    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<number, V>
-	: {
-			[K in keyof T]-?: PathConcat<K & string, T[K]>
-	  }[keyof T]
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ? IsTuple<T> extends true
+        ? {
+                [K in TupleKeys<T>]-?: PathConcat<K & string, T[K]>
+            }[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 `${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,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	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, Type>
+    = | boolean
+        | Ref<boolean>
+        | ((data?: InjectedFormData<Schema, Type>) => boolean | Ref<boolean>)
+
+export type SimpleFormTemplateItem<Schema extends FormSchema, Type> = Record<
+    string,
+    any
 > & {
-	vvIs?: string | Component
-	vvName?: Path<z.infer<Schema>>
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	vvSlots?: Record<string, any>
-	vvChildren?: Array<
-		| SimpleFormTemplateItem<Schema>
-		| ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)
-	>
-	vvIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
-	vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
-	vvType?: `${FormFieldType}`
-	vvShowValid?: boolean
-	vvContent?: string
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	vvDefaultValue?: any
+    vvIs?: string | Component
+    vvName?: Path<z.infer<Schema>>
+    vvSlots?: Record<string, any>
+    vvChildren?:
+        | Array<
+            | SimpleFormTemplateItem<Schema, Type>
+            | ((
+                data?: InjectedFormData<Schema, Type>,
+                scope?: Record<string, unknown>,
+            ) => SimpleFormTemplateItem<Schema, Type>)
+        >
+        | ((
+            data?: InjectedFormData<Schema, Type>,
+            scope?: Record<string, unknown>,
+        ) => Array<
+            | SimpleFormTemplateItem<Schema, Type>
+            | ((
+                data?: InjectedFormData<Schema, Type>,
+                scope?: Record<string, unknown>,
+            ) => SimpleFormTemplateItem<Schema, Type>)
+        >)
+    vvIf?: AnyBoolean<Schema, Type> | Path<z.infer<Schema>>
+    vvElseIf?: AnyBoolean<Schema, Type> | 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 type FormTemplateItem<Schema extends FormSchema, Type = undefined>
+    = | SimpleFormTemplateItem<Schema, Type>
+        | ((
+            data?: InjectedFormData<Schema, Type>,
+            scope?: Record<string, unknown>,
+        ) => SimpleFormTemplateItem<Schema, Type>)
+
+export type FormTemplate<Schema extends FormSchema, Type = undefined>
+    = | FormTemplateItem<Schema, Type>[]
+        | ((
+            data?: InjectedFormData<Schema, Type>,
+            scope?: Record<string, unknown>,
+        ) => FormTemplateItem<Schema, Type>[])
+
+export type RenderFunctionOutput = VNode<RendererNode, RendererElement, { [key: string]: any }>