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

package/src/VvFormWrapper.ts

@@ -1,171 +1,166 @@
 import {
-	type InjectionKey,
-	type Ref,
-	computed,
-	defineComponent,
-	inject,
-	provide,
-	readonly,
-	ref,
-	toRefs,
-	watch,
-	h,
-	type DeepReadonly,
+    type DeepReadonly,
+    type InjectionKey,
+    type Ref,
+    type SlotsType,
+    computed,
+    defineComponent,
+    h,
+    inject,
+    provide,
+    readonly,
+    ref,
+    toRefs,
+    watch,
 } from 'vue'
-import type { TypeOf, z } from 'zod'
+import type { inferFormattedError, TypeOf, z } from 'zod'
 import type {
-	FormSchema,
-	InjectedFormData,
-	InjectedFormWrapperData,
+    FormSchema,
+    InjectedFormData,
+    InjectedFormWrapperData,
 } from './types'
 
-export const defineFormWrapper = <Schema extends FormSchema>(
-	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
-	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
-) => {
-	const VvFormWrapper = defineComponent({
-		name: 'VvFormWrapper',
-		props: {
-			name: {
-				type: String,
-				required: true,
-			},
-			tag: {
-				type: String,
-				default: undefined,
-			},
-		},
-		emits: ['invalid', 'valid'],
-		expose: ['fields', 'invalid'],
-		setup(props, { emit }) {
-			const injectedFormData = inject(formProvideKey)
-			const wrapperProvided = inject(wrapperProvideKey, undefined)
-			const fields = ref(new Set<string>())
-			const fieldsErrors: Ref<
-				Map<string, z.inferFormattedError<Schema>>
-			> = ref(new Map())
-			const { name } = toRefs(props)
+export function defineFormWrapper<Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>) {
+    return defineComponent({
+        name: 'VvFormWrapper',
+        props: {
+            name: {
+                type: String,
+                required: true,
+            },
+            tag: {
+                type: String,
+                default: undefined,
+            },
+        },
+        emits: ['invalid', 'valid'],
+        expose: [
+            'clear',
+            'errors',
+            'fields',
+            'fieldsErrors',
+            'formData',
+            'invalid',
+            'reset',
+            'submit',
+            'tag',
+            'validate',
+            'validateWrapper',
+        ],
+        slots: Object as SlotsType<{
+            default: {
+                errors?: DeepReadonly<z.inferFormattedError<Schema>>
+                formData?: Partial<TypeOf<Schema>>
+                formErrors?: DeepReadonly<inferFormattedError<Schema, string>>
+                invalid: boolean
+                submit?: InjectedFormData<Schema>['submit']
+                validate?: InjectedFormData<Schema>['validate']
+                validateWrapper?: () => Promise<boolean>
+                fieldsErrors: Map<string, inferFormattedError<Schema, string>>
+                clear?: InjectedFormData<Schema>['clear']
+                reset?: InjectedFormData<Schema>['reset']
+            }
+        }>,
+        setup(props, { emit }) {
+            const injectedFormData = inject(formProvideKey)
+            const wrapperProvided = inject(wrapperProvideKey, undefined)
+            const fields = ref(new Set<string>())
+            const fieldsErrors: Ref<
+                Map<string, z.inferFormattedError<Schema>>
+            > = ref(new Map())
+            const { name } = toRefs(props)
 
-			// provide data to child fields
-			provide(wrapperProvideKey, {
-				name: readonly(name),
-				errors: fieldsErrors,
-				fields,
-			})
+            // provide data to child fields
+            provide(wrapperProvideKey, {
+                name: readonly(name),
+                errors: fieldsErrors,
+                fields,
+            })
 
-			// add fields to parent wrapper
-			watch(
-				fields,
-				(newValue) => {
-					if (wrapperProvided?.fields) {
-						newValue.forEach((field) => {
-							wrapperProvided?.fields.value.add(field)
-						})
-					}
-				},
-				{ deep: true },
-			)
+            // add fields to parent wrapper
+            watch(
+                fields,
+                (newValue) => {
+                    if (wrapperProvided?.fields) {
+                        newValue.forEach((field) => {
+                            wrapperProvided?.fields.value.add(field)
+                        })
+                    }
+                },
+                { deep: true },
+            )
 
-			// add fields to parent wrapper
-			watch(
-				() => new Map(fieldsErrors.value),
-				(newValue, oldValue) => {
-					if (wrapperProvided?.errors) {
-						Array.from(oldValue.keys()).forEach((key) => {
-							wrapperProvided.errors.value.delete(key)
-						})
-						Array.from(newValue.keys()).forEach((key) => {
-							const value = newValue.get(key)
-							if (value) {
-								wrapperProvided.errors.value.set(key, value)
-							}
-						})
-					}
-				},
-				{ deep: true },
-			)
+            // add fields to parent wrapper
+            watch(
+                () => new Map(fieldsErrors.value),
+                (newValue, oldValue) => {
+                    if (wrapperProvided?.errors) {
+                        Array.from(oldValue.keys()).forEach((key) => {
+                            wrapperProvided.errors.value.delete(key)
+                        })
+                        Array.from(newValue.keys()).forEach((key) => {
+                            const value = newValue.get(key)
+                            if (value) {
+                                wrapperProvided.errors.value.set(key, value)
+                            }
+                        })
+                    }
+                },
+                { deep: true },
+            )
 
-			const invalid = computed(() => {
-				if (!injectedFormData?.invalid.value) {
-					return false
-				}
-				return fieldsErrors.value.size > 0
-			})
+            const invalid = computed(() => {
+                if (!injectedFormData?.invalid.value) {
+                    return false
+                }
+                return fieldsErrors.value.size > 0
+            })
 
-			watch(invalid, () => {
-				if (invalid.value) {
-					emit('invalid')
-				} else {
-					emit('valid')
-				}
-			})
+            watch(invalid, () => {
+                if (invalid.value) {
+                    emit('invalid')
+                }
+                else {
+                    emit('valid')
+                }
+            })
 
-			return {
-				formData: injectedFormData?.formData,
-				errors: injectedFormData?.errors,
-				submit: injectedFormData?.submit,
-				validate: injectedFormData?.validate,
-				invalid,
-				fields,
-				fieldsErrors,
-			}
-		},
-		render() {
-			if (this.tag) {
-				return h(this.tag, null, {
-					default: () =>
-						this.$slots.default?.({
-							invalid: this.invalid,
-							formData: this.formData,
-							submit: this.submit,
-							validate: this.validate,
-							errors: this.errors,
-							fieldsErrors: this.fieldsErrors,
-						}) ?? this.$slots.defalut,
-				})
-			}
-			return (
-				this.$slots.default?.({
-					invalid: this.invalid,
-					formData: this.formData,
-					submit: this.submit,
-					validate: this.validate,
-					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
-					submit: () => Promise<boolean>
-					validate: () => Promise<boolean>
-					errors: Readonly<
-						Ref<DeepReadonly<z.inferFormattedError<Schema>>>
-					>
-					fieldsErrors: Map<
-						string,
-						Record<
-							string,
-							{
-								_errors: string[]
-							}
-						>
-					>
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				}) => any
-			}
-		}
-	}
+            const validateWrapper = () => {
+                return injectedFormData?.validate(undefined, fields.value) ?? Promise.resolve(true)
+            }
+
+            return {
+                clear: injectedFormData?.clear,
+                errors: injectedFormData?.errors,
+                fields,
+                fieldsErrors,
+                formData: injectedFormData?.formData,
+                invalid,
+                reset: injectedFormData?.reset,
+                submit: injectedFormData?.submit,
+                validate: injectedFormData?.validate,
+                validateWrapper,
+            }
+        },
+        render() {
+            const defaultSlot = () =>
+                this.$slots.default?.({
+                    clear: this.clear,
+                    errors: this.errors,
+                    fieldsErrors: this.fieldsErrors,
+                    formData: this.formData,
+                    invalid: this.invalid,
+                    reset: this.reset,
+                    submit: this.submit,
+                    validate: this.validate,
+                    validateWrapper: this.validateWrapper,
+                })
+            if (this.tag) {
+                return h(this.tag, null, {
+                    default: defaultSlot,
+                })
+            }
+            return defaultSlot()
+        },
+    })
 }

package/src/enums.ts

@@ -1,31 +1,32 @@
 export enum FormFieldType {
-	text = 'text',
-	number = 'number',
-	email = 'email',
-	password = 'password',
-	tel = 'tel',
-	url = 'url',
-	search = 'search',
-	date = 'date',
-	time = 'time',
-	datetimeLocal = 'datetime-local',
-	month = 'month',
-	week = 'week',
-	color = 'color',
-	select = 'select',
-	checkbox = 'checkbox',
-	radio = 'radio',
-	textarea = 'textarea',
-	radioGroup = 'radioGroup',
-	checkboxGroup = 'checkboxGroup',
-	combobox = 'combobox',
-	custom = 'custom',
+    text = 'text',
+    number = 'number',
+    email = 'email',
+    password = 'password',
+    tel = 'tel',
+    url = 'url',
+    search = 'search',
+    date = 'date',
+    time = 'time',
+    datetimeLocal = 'datetime-local',
+    month = 'month',
+    week = 'week',
+    color = 'color',
+    select = 'select',
+    checkbox = 'checkbox',
+    radio = 'radio',
+    textarea = 'textarea',
+    radioGroup = 'radioGroup',
+    checkboxGroup = 'checkboxGroup',
+    combobox = 'combobox',
+    custom = 'custom',
 }
 
 export enum FormStatus {
-	invalid = 'invalid',
-	valid = 'valid',
-	submitting = 'submitting',
-	updated = 'updated',
-	unknown = 'unknown',
+    invalid = 'invalid',
+    valid = 'valid',
+    submitting = 'submitting',
+    reset = 'reset',
+    updated = 'updated',
+    unknown = 'unknown',
 }

package/src/index.ts

@@ -1,130 +1,130 @@
 import {
-	getCurrentInstance,
-	type App,
-	inject,
-	type InjectionKey,
-	type Plugin,
+    getCurrentInstance,
+    type App,
+    inject,
+    type InjectionKey,
+    type Plugin,
 } from 'vue'
+import type { AnyZodObject } from 'zod'
 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,
-	FormTemplate,
+    InjectedFormData,
+    InjectedFormWrapperData,
+    InjectedFormFieldData,
+    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 _formFactory<Schema extends FormSchema>(schema: Schema,	options: FormComposableOptions<Schema> = {}) {
+    // create injection keys
+    const formInjectionKey = Symbol('formInjectionKey') as InjectionKey<InjectedFormData<Schema>>
+    const formWrapperInjectionKey = Symbol('formWrapperInjectionKey') as InjectionKey<
+        InjectedFormWrapperData<Schema>
+    >
+    const formFieldInjectionKey = Symbol('formFieldInjectionKey') as InjectionKey<
+        InjectedFormFieldData<Schema>
+    >
 
-	// create components
-	const VvFormWrapper = defineFormWrapper(
-		formInjectionKey,
-		formWrapperInjectionKey,
-	)
-	const VvFormField = defineFormField(
-		formInjectionKey,
-		formWrapperInjectionKey,
-		formFieldInjectionKey,
-		options,
-	)
-	const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
-	const {
-		VvForm,
-		errors,
-		status,
-		formData,
-		validate,
-		submit,
-		ignoreUpdates,
-		stopUpdatesWatch,
-	} = defineForm(schema, formInjectionKey, options, VvFormTemplate)
+    // create components
+    const VvFormWrapper = defineFormWrapper(
+        formInjectionKey,
+        formWrapperInjectionKey,
+    )
+    const VvFormField = defineFormField(
+        formInjectionKey,
+        formWrapperInjectionKey,
+        formFieldInjectionKey,
+        options,
+    )
+    const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
+    const {
+        clear,
+        errors,
+        formData,
+        ignoreUpdates,
+        invalid,
+        readonly,
+        reset,
+        status,
+        stopUpdatesWatch,
+        submit,
+        validate,
+        VvForm,
+    } = defineForm(schema, formInjectionKey, options, VvFormTemplate)
 
-	return {
-		VvForm,
-		VvFormWrapper,
-		VvFormField,
-		VvFormTemplate,
-		formInjectionKey,
-		formWrapperInjectionKey,
-		formFieldInjectionKey,
-		errors,
-		status,
-		formData,
-		validate,
-		submit,
-		ignoreUpdates,
-		stopUpdatesWatch,
-	}
+    return {
+        clear,
+        errors,
+        formData,
+        formFieldInjectionKey,
+        formInjectionKey,
+        formWrapperInjectionKey,
+        ignoreUpdates,
+        invalid,
+        readonly,
+        reset,
+        status,
+        stopUpdatesWatch,
+        submit,
+        validate,
+        VvForm,
+        VvFormField,
+        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 = _formFactory(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?.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>,
-	)
+export function 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>,
+    )
 }
 
 export { FormFieldType } from './enums'
@@ -136,28 +136,25 @@ type FormFieldComponent = ReturnType<typeof defineFormField>
 type FormTemplateComponent = ReturnType<typeof defineFormTemplate>
 
 export type {
-	InjectedFormData,
-	InjectedFormWrapperData,
-	InjectedFormFieldData,
-	FormComposableOptions,
-	FormSchema,
-	FormPluginOptions,
-	FormComponent,
-	FormWrapperComponent,
-	FormFieldComponent,
-	FormTemplate,
-	FormTemplateComponent,
-	FormTemplateItem,
-	Path,
-	PathValue,
+    FormComponent,
+    FormComposableOptions,
+    FormFieldComponent,
+    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 formFactory<Schema extends FormSchema>(schema: Schema,	options: FormComposableOptions<Schema> = {}) {
+    return _formFactory(schema, options)
 }