@volverjs/form-vue 0.0.1

package/src/VvForm.ts

@@ -0,0 +1,125 @@
+import {
+	type InjectionKey,
+	withModifiers,
+	defineComponent,
+	ref,
+	provide,
+	readonly,
+	watch,
+	h,
+	toRaw,
+	isProxy,
+} from 'vue'
+import { watchThrottled } from '@vueuse/core'
+
+import type { AnyZodObject } from 'zod'
+import type { InjectedFormData } from './types'
+import { defaultObjectBySchema } from './utils'
+
+export enum FormStatus {
+	invalid = 'invalid',
+	valid = 'valid',
+}
+
+export const defineForm = (
+	schema: AnyZodObject,
+	provideKey: InjectionKey<InjectedFormData>,
+	options?: {
+		updateThrottle?: number
+	},
+) => {
+	return defineComponent({
+		name: 'FormComponent',
+		props: {
+			modelValue: {
+				type: Object,
+				default: () => ({}),
+			},
+		},
+		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
+		expose: ['submit', 'errors', 'status'],
+		setup(props, { emit }) {
+			const localModelValue = ref(
+				defaultObjectBySchema(schema, props.modelValue),
+			)
+			watch(
+				() => props.modelValue,
+				(newValue) => {
+					if (newValue) {
+						const original = isProxy(newValue)
+							? toRaw(newValue)
+							: newValue
+						localModelValue.value =
+							typeof original?.clone === 'function'
+								? original.clone()
+								: JSON.parse(JSON.stringify(original))
+					}
+				},
+				{ deep: true },
+			)
+			// v-model
+			watchThrottled(
+				localModelValue,
+				(newValue) => {
+					if (errors.value) {
+						parseModelValue()
+					}
+					if (
+						!newValue ||
+						!props.modelValue ||
+						JSON.stringify(newValue) !==
+							JSON.stringify(props.modelValue)
+					) {
+						emit('update:modelValue', newValue)
+					}
+				},
+				{ deep: true, throttle: options?.updateThrottle ?? 500 },
+			)
+
+			// validation
+			const errors = ref()
+			const status = ref()
+			const parseModelValue = (value = localModelValue.value) => {
+				const parseResult = schema.safeParse(value)
+				if (!parseResult.success) {
+					errors.value = parseResult.error.format()
+					status.value = FormStatus.invalid
+					emit('invalid', errors.value)
+					return false
+				}
+				errors.value = undefined
+				status.value = FormStatus.valid
+				localModelValue.value = parseResult.data
+				emit('valid', parseResult.data)
+				return true
+			}
+
+			// submit
+			const submit = () => {
+				if (!parseModelValue()) {
+					return false
+				}
+				emit('submit', localModelValue.value)
+				return true
+			}
+
+			// provide
+			provide(provideKey, {
+				modelValue: localModelValue,
+				submit,
+				errors: readonly(errors),
+			})
+
+			return { submit }
+		},
+		render() {
+			return h(
+				'form',
+				{
+					onSubmit: withModifiers(this.submit, ['prevent']),
+				},
+				this.$slots,
+			)
+		},
+	})
+}

package/src/VvFormField.ts

@@ -0,0 +1,299 @@
+import { get, set } from 'ts-dot-prop'
+import {
+	type Component,
+	type InjectionKey,
+	type PropType,
+	type Ref,
+	type ConcreteComponent,
+	computed,
+	defineAsyncComponent,
+	h,
+	inject,
+	onMounted,
+	provide,
+	readonly,
+	resolveComponent,
+	toRefs,
+	watch,
+	defineComponent,
+} from 'vue'
+import { FormFieldType } from './enums'
+import type {
+	InjectedFormData,
+	InjectedFormWrapperData,
+	InjectedFormFieldData,
+	FormComposableOptions,
+} from './types'
+
+export const defineFormField = (
+	formProvideKey: InjectionKey<InjectedFormData>,
+	wrapperProvideKey: InjectionKey<InjectedFormWrapperData>,
+	formFieldInjectionKey: InjectionKey<InjectedFormFieldData>,
+	options: FormComposableOptions = {},
+): Component => {
+	// define component
+	return defineComponent({
+		name: 'FieldComponent',
+		props: {
+			type: {
+				type: String as PropType<`${FormFieldType}`>,
+				validator: (value: FormFieldType) => {
+					return Object.values(FormFieldType).includes(value)
+				},
+				default: FormFieldType.custom,
+			},
+			is: {
+				type: [Object, String] as PropType<Component>,
+				default: undefined,
+			},
+			name: {
+				type: [String, Number, Boolean, Symbol],
+				required: true,
+			},
+			props: {
+				type: [Object, Function] as PropType<
+					| Record<string, unknown>
+					| ((
+							formData?: Ref<ObjectConstructor>,
+					  ) => Record<string, unknown>)
+				>,
+				default: () => ({}),
+			},
+			showValid: {
+				type: Boolean,
+				default: false,
+			},
+			defaultValue: {
+				type: [String, Number, Boolean, Array, Object],
+				default: undefined,
+			},
+		},
+		emits: ['invalid', 'valid', 'update:formData', 'update:modelValue'],
+		expose: ['invalid', 'invalidLabel', 'errors'],
+		setup(props, { slots, emit }) {
+			// v-model
+			const modelValue = computed({
+				get() {
+					if (!formProvided?.modelValue) return
+					return get(
+						Object(formProvided.modelValue.value),
+						String(props.name),
+					)
+				},
+				set(value) {
+					if (!formProvided?.modelValue) return
+					set(
+						Object(formProvided.modelValue.value),
+						String(props.name),
+						value,
+					)
+					emit('update:modelValue', {
+						newValue: modelValue.value,
+						formData: formProvided?.modelValue,
+					})
+				},
+			})
+			onMounted(() => {
+				if (
+					modelValue.value === undefined &&
+					props.defaultValue !== undefined
+				) {
+					modelValue.value = props.defaultValue
+				}
+			})
+
+			// inject data from parent form wrapper
+			const wrapperProvided = inject(wrapperProvideKey, undefined)
+			if (wrapperProvided) {
+				wrapperProvided.fields.value.add(props.name as string)
+			}
+
+			// inject data from parent form
+			const formProvided = inject(formProvideKey)
+			const { props: fieldProps, name: fieldName } = toRefs(props)
+
+			const errors = computed(() => {
+				if (!formProvided?.errors.value) {
+					return undefined
+				}
+				return get(formProvided.errors.value, String(props.name))
+			})
+			const invalidLabel = computed(() => {
+				return errors.value?._errors
+			})
+			const invalid = computed(() => {
+				return errors.value !== undefined
+			})
+			watch(invalid, () => {
+				if (invalid.value) {
+					emit('invalid', invalidLabel.value)
+					if (wrapperProvided) {
+						wrapperProvided.errors.value.set(props.name as string, {
+							_errors: invalidLabel.value,
+						})
+					}
+				} else {
+					emit('valid', modelValue.value)
+					if (wrapperProvided) {
+						wrapperProvided.errors.value.delete(
+							props.name as string,
+						)
+					}
+				}
+			})
+			watch(
+				() => formProvided?.modelValue,
+				() => {
+					emit('update:formData', formProvided?.modelValue)
+				},
+				{ deep: true },
+			)
+			const onUpdate = (value: unknown) => {
+				modelValue.value = value
+			}
+			const hasFieldProps = computed(() => {
+				if (typeof fieldProps.value === 'function') {
+					return fieldProps.value(formProvided?.modelValue)
+				}
+				return fieldProps.value
+			})
+			const hasProps = computed(() => ({
+				...hasFieldProps.value,
+				name: hasFieldProps.value.name ?? props.name,
+				invalid: invalid.value,
+				valid: props.showValid
+					? Boolean(!invalid.value && modelValue.value)
+					: undefined,
+				type: ((type: FormFieldType) => {
+					if (
+						[
+							FormFieldType.text,
+							FormFieldType.number,
+							FormFieldType.email,
+							FormFieldType.password,
+							FormFieldType.tel,
+							FormFieldType.url,
+							FormFieldType.search,
+							FormFieldType.date,
+							FormFieldType.time,
+							FormFieldType.datetimeLocal,
+							FormFieldType.month,
+							FormFieldType.week,
+							FormFieldType.color,
+						].includes(type)
+					) {
+						return type
+					}
+					return undefined
+				})(props.type as FormFieldType),
+				invalidLabel: invalidLabel.value,
+				modelValue: modelValue.value,
+				errors: props.is ? errors.value : undefined,
+				'onUpdate:modelValue': onUpdate,
+			}))
+
+			provide(formFieldInjectionKey, {
+				name: readonly(fieldName as Ref<string>),
+				errors: readonly(errors),
+			})
+
+			const component = computed(() => {
+				if (props.type === FormFieldType.custom) {
+					return {
+						render() {
+							return (
+								slots.default?.({
+									modelValue: modelValue.value,
+									onUpdate,
+									invalid: invalid.value,
+									invalidLabel: invalidLabel.value,
+									formData: formProvided?.modelValue.value,
+									formErrors: formProvided?.errors.value,
+									errors: errors.value,
+								}) ?? slots.defalut
+							)
+						},
+					}
+				}
+				if (!options.lazyLoad) {
+					let component: string | ConcreteComponent
+					switch (props.type) {
+						case FormFieldType.select:
+							component = resolveComponent('VvSelect')
+							break
+						case FormFieldType.checkbox:
+							component = resolveComponent('VvCheckbox')
+							break
+						case FormFieldType.radio:
+							component = resolveComponent('VvRadio')
+							break
+						case FormFieldType.textarea:
+							component = resolveComponent('VvTextarea')
+							break
+						case FormFieldType.radioGroup:
+							component = resolveComponent('VvRadioGroup')
+							break
+						case FormFieldType.checkboxGroup:
+							component = resolveComponent('VvCheckboxGroup')
+							break
+						case FormFieldType.combobox:
+							component = resolveComponent('VvCombobox')
+							break
+						default:
+							component = resolveComponent('VvInputText')
+					}
+					if (typeof component !== 'string') {
+						return component
+					} else {
+						console.warn(
+							`[form-vue warn]: ${component} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`,
+						)
+					}
+				}
+				return defineAsyncComponent(async () => {
+					if (options.sideEffects) {
+						await Promise.resolve(options.sideEffects(props.type))
+					}
+					switch (props.type) {
+						case FormFieldType.textarea:
+							return import(
+								'@volverjs/ui-vue/vv-textarea'
+							) as Component
+						case FormFieldType.radio:
+							return import(
+								'@volverjs/ui-vue/vv-radio'
+							) as Component
+						case FormFieldType.radioGroup:
+							return import(
+								'@volverjs/ui-vue/vv-radio-group'
+							) as Component
+						case FormFieldType.checkbox:
+							return import(
+								'@volverjs/ui-vue/vv-checkbox'
+							) as Component
+						case FormFieldType.checkboxGroup:
+							return import(
+								'@volverjs/ui-vue/vv-checkbox-group'
+							) as Component
+						case FormFieldType.combobox:
+							return import(
+								'@volverjs/ui-vue/vv-combobox'
+							) as Component
+					}
+					return import('@volverjs/ui-vue/vv-input-text') as Component
+				})
+			})
+
+			return { component, hasProps, invalid }
+		},
+		render() {
+			if (this.is) {
+				return h(this.is, this.hasProps, this.$slots)
+			}
+			if (this.type === FormFieldType.custom) {
+				return h(this.component as Component, null, this.$slots)
+			}
+			return h(this.component as Component, this.hasProps, this.$slots)
+		},
+	})
+}

package/src/VvFormWrapper.ts

@@ -0,0 +1,122 @@
+import {
+	type InjectionKey,
+	type Ref,
+	computed,
+	defineComponent,
+	inject,
+	provide,
+	readonly,
+	ref,
+	toRefs,
+	watch,
+	h,
+} from 'vue'
+import type { InjectedFormData, InjectedFormWrapperData } from './types'
+
+export const defineFormWrapper = (
+	formProvideKey: InjectionKey<InjectedFormData>,
+	wrapperProvideKey: InjectionKey<InjectedFormWrapperData>,
+) => {
+	return defineComponent({
+		name: 'WrapperComponent',
+		props: {
+			name: {
+				type: String,
+				required: true,
+			},
+			tag: {
+				type: String,
+				default: undefined,
+			},
+		},
+		emits: ['invalid', 'valid'],
+		expose: ['fields', 'invalid'],
+		setup(props, { emit }) {
+			const formProvided = inject(formProvideKey)
+			const wrapperProvided = inject(wrapperProvideKey, undefined)
+			const fields = ref(new Set<string>())
+			const errors: Ref<
+				Map<string, Record<string, { _errors: string[] }>>
+			> = ref(new Map())
+			const { name } = toRefs(props)
+
+			// provide data to child fields
+			provide(wrapperProvideKey, {
+				name: readonly(name),
+				errors,
+				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(
+				() => new Map(errors.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 (!formProvided?.errors.value) {
+					return false
+				}
+				return errors.value.size > 0
+			})
+
+			watch(invalid, () => {
+				if (invalid.value) {
+					emit('invalid')
+				} else {
+					emit('valid')
+				}
+			})
+
+			return { formProvided, invalid, fields, errors }
+		},
+		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 (
+				this.$slots.default?.({
+					invalid: this.invalid,
+					formData: this.formProvided?.modelValue,
+					errors: this.formProvided?.errors,
+					fieldsErrors: this.errors,
+				}) ?? this.$slots.defalut
+			)
+		},
+	})
+}

package/src/enums.ts

@@ -0,0 +1,23 @@
+export enum FormFieldType {
+	text = 'text',
+	number = 'number',
+	email = 'email',
+	password = 'password',
+	tel = 'tel',
+	url = 'url',
+	search = 'search',
+	date = 'date',
+	time = 'time',
+	datetimeLocal = 'datetimeLocal',
+	month = 'month',
+	week = 'week',
+	color = 'color',
+	select = 'select',
+	checkbox = 'checkbox',
+	radio = 'radio',
+	textarea = 'textarea',
+	radioGroup = 'radioGroup',
+	checkboxGroup = 'checkboxGroup',
+	combobox = 'combobox',
+	custom = 'custom',
+}

package/src/index.ts

@@ -0,0 +1,97 @@
+import { 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 type {
+	InjectedFormData,
+	InjectedFormWrapperData,
+	InjectedFormFieldData,
+	FormComposableOptions,
+	FormPluginOptions,
+} from './types'
+
+export const formFactory = (
+	schema: AnyZodObject,
+	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 components
+	const VvForm = defineForm(schema, formInjectionKey, options)
+	const VvFormWrapper = defineFormWrapper(
+		formInjectionKey,
+		formWrapperInjectionKey,
+	)
+	const VvFormField = defineFormField(
+		formInjectionKey,
+		formWrapperInjectionKey,
+		formFieldInjectionKey,
+		options,
+	)
+
+	return {
+		VvForm,
+		VvFormWrapper,
+		VvFormField,
+		formInjectionKey,
+		formWrapperInjectionKey,
+		formFieldInjectionKey,
+	}
+}
+
+export const pluginInjectionKey = Symbol() 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, options)
+	}
+	return {
+		...toReturn,
+		install(app: App, { global = false } = {}) {
+			app.provide(pluginInjectionKey, 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)
+				}
+			}
+		},
+	}
+}
+
+export const useForm = (
+	schema: AnyZodObject,
+	options: FormComposableOptions = {},
+) => {
+	const hasOptions = { ...inject(pluginInjectionKey, {}), ...options }
+	return formFactory(schema, hasOptions)
+}
+
+export { FormFieldType } from './enums'
+export { defaultObjectBySchema } from './utils'
+
+export type {
+	InjectedFormData,
+	InjectedFormWrapperData,
+	InjectedFormFieldData,
+	FormComposableOptions,
+	FormPluginOptions,
+}

package/src/shims.d.ts

@@ -0,0 +1 @@
+declare module '@volverjs/style/*'

package/src/types.d.ts

@@ -0,0 +1,30 @@
+import type { Ref } from 'vue'
+import type { ZodFormattedError } from 'zod'
+import type { FormFieldType } from './enums'
+
+export type FormComposableOptions = {
+	lazyLoad?: boolean
+	updateThrottle?: number
+	sideEffects?: (type: `${FormFieldType}`) => Promise | void
+}
+
+export type FormPluginOptions = {
+	schema?: ZodSchema
+} & FormComposableOptions
+
+export type InjectedFormData<Type = Recrod<string | number, unknown>> = {
+	modelValue: Ref<Type>
+	errors: Ref<ZodFormattedError<Type>>
+	submit: () => boolean
+}
+
+export type InjectedFormWrapperData = {
+	name: Ref<string>
+	fields: Ref<Set<string>>
+	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+}
+
+export type InjectedFormFieldData = {
+	name: Ref<string>
+	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+}