@volverjs/form-vue 1.0.0-beta.25 → 1.0.0-beta.26

package/src/VvFormWrapper.ts

@@ -1,26 +1,30 @@
 import {
+    type Component,
     type DeepReadonly,
     type InjectionKey,
     type Ref,
     type SlotsType,
     computed,
     defineComponent,
+    getCurrentInstance,
     h,
     inject,
+    onBeforeUnmount,
+    onMounted,
     provide,
     readonly,
     ref,
     toRefs,
     watch,
 } from 'vue'
-import type { inferFormattedError, TypeOf, z } from 'zod'
+import type { inferFormattedError, z } from 'zod'
 import type {
     FormSchema,
     InjectedFormData,
     InjectedFormWrapperData,
 } from './types'
 
-export function defineFormWrapper<Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>) {
+export function defineFormWrapper<Schema extends FormSchema, Type>(formProvideKey: InjectionKey<InjectedFormData<Schema, Type>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>) {
     return defineComponent({
         name: 'VvFormWrapper',
         props: {
@@ -50,21 +54,21 @@ export function defineFormWrapper<Schema extends FormSchema>(formProvideKey: Inj
         slots: Object as SlotsType<{
             default: {
                 errors?: DeepReadonly<z.inferFormattedError<Schema>>
-                formData?: Partial<TypeOf<Schema>>
+                formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type
                 formErrors?: DeepReadonly<inferFormattedError<Schema, string>>
                 invalid: boolean
-                submit?: InjectedFormData<Schema>['submit']
-                validate?: InjectedFormData<Schema>['validate']
+                submit?: InjectedFormData<Schema, Type>['submit']
+                validate?: InjectedFormData<Schema, Type>['validate']
                 validateWrapper?: () => Promise<boolean>
                 fieldsErrors: Map<string, inferFormattedError<Schema, string>>
-                clear?: InjectedFormData<Schema>['clear']
-                reset?: InjectedFormData<Schema>['reset']
+                clear?: InjectedFormData<Schema, Type>['clear']
+                reset?: InjectedFormData<Schema, Type>['reset']
             }
         }>,
         setup(props, { emit }) {
             const injectedFormData = inject(formProvideKey)
             const wrapperProvided = inject(wrapperProvideKey, undefined)
-            const fields = ref(new Set<string>())
+            const fields = ref(new Map<string, string>())
             const fieldsErrors: Ref<
                 Map<string, z.inferFormattedError<Schema>>
             > = ref(new Map())
@@ -80,19 +84,28 @@ export function defineFormWrapper<Schema extends FormSchema>(formProvideKey: Inj
             // add fields to parent wrapper
             watch(
                 fields,
-                (newValue) => {
+                (newValue, oldValue) => {
                     if (wrapperProvided?.fields) {
-                        newValue.forEach((field) => {
-                            wrapperProvided?.fields.value.add(field)
+                        oldValue.entries().forEach(([id]) => {
+                            if (!newValue.has(id)) {
+                                wrapperProvided?.fields.value.delete(id)
+                            }
+                        })
+                    }
+                    if (wrapperProvided?.fields) {
+                        newValue.entries().forEach(([id, field]) => {
+                            if (!wrapperProvided?.fields.value.has(id)) {
+                                wrapperProvided?.fields.value.set(id, field)
+                            }
                         })
                     }
                 },
                 { deep: true },
             )
 
-            // add fields to parent wrapper
+            // add fields errors to parent wrapper
             watch(
-                () => new Map(fieldsErrors.value),
+                fieldsErrors,
                 (newValue, oldValue) => {
                     if (wrapperProvided?.errors) {
                         Array.from(oldValue.keys()).forEach((key) => {
@@ -125,8 +138,26 @@ export function defineFormWrapper<Schema extends FormSchema>(formProvideKey: Inj
                 }
             })
 
+            onMounted(() => {
+                const instance = getCurrentInstance()
+                if (!instance || !injectedFormData?.wrappers || !name.value) {
+                    console.warn('[@volverjs/form-vue]: Invalid wrapper registration state')
+                    return
+                }
+                if (injectedFormData.wrappers.has(name.value)) {
+                    console.warn(`[@volverjs/form-vue]: wrapper name "${name.value}" is already used`)
+                    return
+                }
+                injectedFormData.wrappers.set(name.value, instance as unknown as Component)
+            })
+            onBeforeUnmount(() => {
+                if (injectedFormData?.wrappers && name.value) {
+                    injectedFormData.wrappers.delete(name.value)
+                }
+            })
+
             const validateWrapper = () => {
-                return injectedFormData?.validate(undefined, fields.value) ?? Promise.resolve(true)
+                return injectedFormData?.validate(undefined, new Set(fields.value.values())) ?? Promise.resolve(true)
             }
 
             return {

package/src/index.ts

@@ -25,9 +25,9 @@ import type {
     FormTemplate,
 } from './types'
 
-function _formFactory<Schema extends FormSchema>(schema: Schema, options: FormComposableOptions<Schema> = {}) {
+function _formType<Schema extends FormSchema, Type>(schema: Schema, options: FormComposableOptions<Schema, Type> = {}) {
     // create injection keys
-    const formInjectionKey = Symbol('formInjectionKey') as InjectionKey<InjectedFormData<Schema>>
+    const formInjectionKey = Symbol('formInjectionKey') as InjectionKey<InjectedFormData<Schema, Type>>
     const formWrapperInjectionKey = Symbol('formWrapperInjectionKey') as InjectionKey<
         InjectedFormWrapperData<Schema>
     >
@@ -55,6 +55,7 @@ function _formFactory<Schema extends FormSchema>(schema: Schema, options: FormCo
         formFieldsGroupInjectionKey,
     )
     const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
+    const wrappers = new Map<string, typeof VvFormWrapper>()
     const {
         clear,
         errors,
@@ -68,7 +69,7 @@ function _formFactory<Schema extends FormSchema>(schema: Schema, options: FormCo
         submit,
         validate,
         VvForm,
-    } = defineForm(schema, formInjectionKey, options, VvFormTemplate)
+    } = defineForm(schema, formInjectionKey, options, VvFormTemplate, wrappers)
 
     return {
         clear,
@@ -85,6 +86,7 @@ function _formFactory<Schema extends FormSchema>(schema: Schema, options: FormCo
         stopUpdatesWatch,
         submit,
         validate,
+        wrappers,
         VvForm,
         VvFormField,
         VvFormFieldsGroup,
@@ -98,7 +100,7 @@ export const pluginInjectionKey = Symbol('pluginInjectionKey') as InjectionKey<F
 export function createForm(options: FormPluginOptions): Plugin & Partial<ReturnType<typeof useForm>> {
     let toReturn: Partial<ReturnType<typeof useForm>> = {}
     if (options.schema) {
-        toReturn = _formFactory(options.schema as AnyZodObject, options)
+        toReturn = _formType(options.schema as AnyZodObject, options)
     }
     return {
         ...toReturn,
@@ -128,17 +130,29 @@ export function createForm(options: FormPluginOptions): Plugin & Partial<ReturnT
     }
 }
 
-export function useForm<Schema extends FormSchema>(schema: Schema,	options: FormComposableOptions<Schema> = {}) {
+const formInstances: Map<string, ReturnType<typeof _formType>> = new Map()
+export function useForm<Schema extends FormSchema, Type>(schema: Schema, options: FormComposableOptions<Schema, Type> = {}) {
+    if (options.scope && formInstances.has(options.scope)) {
+        return formInstances.get(options.scope) as ReturnType<typeof _formType<Schema, Type>>
+    }
     if (!getCurrentInstance()) {
-        return _formFactory(schema, options)
+        const toReturn = _formType(schema, options)
+        if (options.scope) {
+            formInstances.set(options.scope, toReturn)
+        }
+        return toReturn
     }
-    return _formFactory(
+    const toReturn = _formType(
         schema as AnyZodObject,
         {
             ...inject(pluginInjectionKey, {}),
             ...options,
-        } as FormComposableOptions<AnyZodObject>,
+        } as FormComposableOptions<AnyZodObject, Type>,
     )
+    if (options.scope) {
+        formInstances.set(options.scope, toReturn)
+    }
+    return toReturn
 }
 
 export { FormFieldType } from './enums'
@@ -171,6 +185,6 @@ export type {
 /**
  * @deprecated Use `useForm()` instead
  */
-export function 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

@@ -19,43 +19,47 @@ export type FormFieldComponentOptions = {
     sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void
 }
 
-export type FormComponentOptions<Schema> = {
+export type FormComponentOptions<Schema, Type> = {
     updateThrottle?: number
     continuousValidation?: boolean
     readonly?: boolean
-    template?: Schema extends FormSchema ? FormTemplate<Schema> : never
+    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?: Partial<z.infer<Schema>>) => void
+        ? (data?: undefined extends Type ? Partial<z.infer<Schema>> : Type) => void
         : never
     onSubmit?: Schema extends FormSchema
-        ? (data?: z.infer<Schema>) => void
+        ? (data?: undefined extends Type ? Partial<z.infer<Schema>> : Type) => void
         : never
-    onReset?: Schema extends FormSchema ? (data?: z.infer<Schema>) => 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?: z.infer<Schema>) => void
+        ? (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 = {
+type FormPluginOptionsSchema<T = Partial<z.infer<FormSchema>>> = {
     schema?: FormSchema
+    factory?: (data?: Partial<z.infer<FormSchema>>) => T
 }
 
 export type FormPluginOptions = FormPluginOptionsSchema &
-    FormComposableOptions<FormPluginOptionsSchema['schema']>
+    FormComposableOptions<FormPluginOptionsSchema['schema'], FormPluginOptionsSchema['factory']>
 
-export type InjectedFormData<Schema extends FormSchema> = {
-    formData: Ref<Partial<z.infer<Schema>> | undefined>
+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?: Partial<z.infer<Schema>>, fields?: Set<string>) => Promise<boolean>
+    validate: (formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type, fields?: Set<string>) => Promise<boolean>
     clear: () => void
     reset: () => void
     ignoreUpdates: IgnoredUpdater
@@ -63,11 +67,12 @@ export type InjectedFormData<Schema extends FormSchema> = {
     status: Readonly<Ref<FormStatus | undefined>>
     invalid: Readonly<Ref<boolean>>
     readonly: Ref<boolean>
+    wrappers: Map<string, Component>
 }
 
 export type InjectedFormWrapperData<Schema extends FormSchema> = {
     name: Ref<string>
-    fields: Ref<Set<string>>
+    fields: Ref<Map<string, string>>
     errors: Ref<Map<string, z.inferFormattedError<Schema>>>
 }
 
@@ -133,12 +138,12 @@ export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any
                 : never
     : never
 
-export type AnyBoolean<Schema extends FormSchema> =
+export type AnyBoolean<Schema extends FormSchema, Type> =
     | boolean
     | Ref<boolean>
-    | ((data?: InjectedFormData<Schema>) => boolean | Ref<boolean>)
+    | ((data?: InjectedFormData<Schema, Type>) => boolean | Ref<boolean>)
 
-export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
+export type SimpleFormTemplateItem<Schema extends FormSchema, Type> = Record<
     string,
     any
 > & {
@@ -147,42 +152,42 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
     vvSlots?: Record<string, any>
     vvChildren?:
         | Array<
-            | SimpleFormTemplateItem<Schema>
+            | SimpleFormTemplateItem<Schema, Type>
             | ((
-                data?: InjectedFormData<Schema>,
+                data?: InjectedFormData<Schema, Type>,
                 scope?: Record<string, unknown>,
-            ) => SimpleFormTemplateItem<Schema>)
+            ) => SimpleFormTemplateItem<Schema, Type>)
         >
         | ((
-            data?: InjectedFormData<Schema>,
+            data?: InjectedFormData<Schema, Type>,
             scope?: Record<string, unknown>,
         ) => Array<
-            | SimpleFormTemplateItem<Schema>
+            | SimpleFormTemplateItem<Schema, Type>
             | ((
-                data?: InjectedFormData<Schema>,
+                data?: InjectedFormData<Schema, Type>,
                 scope?: Record<string, unknown>,
-            ) => SimpleFormTemplateItem<Schema>)
+            ) => SimpleFormTemplateItem<Schema, Type>)
         >)
-    vvIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
-    vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
+    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>
+export type FormTemplateItem<Schema extends FormSchema, Type> =
+    | SimpleFormTemplateItem<Schema, Type>
     | ((
-        data?: InjectedFormData<Schema>,
+        data?: InjectedFormData<Schema, Type>,
         scope?: Record<string, unknown>,
-    ) => SimpleFormTemplateItem<Schema>)
+    ) => SimpleFormTemplateItem<Schema, Type>)
 
-export type FormTemplate<Schema extends FormSchema> =
-    | FormTemplateItem<Schema>[]
+export type FormTemplate<Schema extends FormSchema, Type> =
+    | FormTemplateItem<Schema, Type>[]
     | ((
-        data?: InjectedFormData<Schema>,
+        data?: InjectedFormData<Schema, Type>,
         scope?: Record<string, unknown>,
-    ) => FormTemplateItem<Schema>[])
+    ) => FormTemplateItem<Schema, Type>[])
 
 export type RenderFunctionOutput = VNode<RendererNode, RendererElement, { [key: string]: any }>