@volverjs/form-vue 1.0.0-beta.5 → 1.0.0-beta.7

package/src/VvForm.ts

@@ -9,12 +9,13 @@ import {
 	defineComponent,
 	ref,
 	provide,
-	readonly,
+	readonly as makeReadonly,
 	watch,
 	h,
 	toRaw,
 	isProxy,
 	computed,
+	onMounted,
 } from 'vue'
 import {
 	watchIgnorable,
@@ -41,8 +42,12 @@ export const defineForm = <Schema extends FormSchema>(
 	const status = ref<FormStatus | undefined>()
 	const invalid = computed(() => status.value === FormStatus.invalid)
 	const formData = ref<Partial<z.infer<Schema> | undefined>>()
+	const readonly = ref<boolean>(false)
 
 	const validate = async (value = formData.value) => {
+		if (readonly.value) {
+			return true
+		}
 		const parseResult = await schema.safeParseAsync(value)
 		if (!parseResult.success) {
 			errors.value = parseResult.error.format() as ZodFormattedError<
@@ -58,6 +63,9 @@ export const defineForm = <Schema extends FormSchema>(
 	}
 
 	const submit = async () => {
+		if (readonly.value) {
+			return false
+		}
 		if (!(await validate())) {
 			return false
 		}
@@ -87,6 +95,10 @@ export const defineForm = <Schema extends FormSchema>(
 				type: Object,
 				default: () => ({}),
 			},
+			readonly: {
+				type: Boolean,
+				default: options?.readonly ?? false,
+			},
 			tag: {
 				type: String,
 				default: 'form',
@@ -96,8 +108,22 @@ export const defineForm = <Schema extends FormSchema>(
 				default: undefined,
 			},
 		},
-		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
-		expose: ['submit', 'validate', 'errors', 'status', 'valid', 'invalid'],
+		emits: [
+			'invalid',
+			'valid',
+			'submit',
+			'update:modelValue',
+			'update:readonly',
+		],
+		expose: [
+			'submit',
+			'validate',
+			'errors',
+			'status',
+			'valid',
+			'invalid',
+			'readonly',
+		],
 		setup(props, { emit }) {
 			formData.value = defaultObjectBySchema(
 				schema,
@@ -111,6 +137,14 @@ export const defineForm = <Schema extends FormSchema>(
 						const original = isProxy(newValue)
 							? toRaw(newValue)
 							: newValue
+
+						if (
+							JSON.stringify(original) ===
+							JSON.stringify(toRaw(formData.value))
+						) {
+							return
+						}
+
 						formData.value =
 							typeof original?.clone === 'function'
 								? original.clone()
@@ -168,15 +202,34 @@ export const defineForm = <Schema extends FormSchema>(
 				}
 			})
 
+			onMounted(() => {
+				if (props.readonly && !readonly.value) {
+					readonly.value = props.readonly
+				}
+			})
+
+			watch(
+				() => props.readonly,
+				(newValue) => {
+					readonly.value = newValue
+				},
+			)
+			watch(readonly, (newValue) => {
+				if (newValue !== props.readonly) {
+					emit('update:readonly', readonly.value)
+				}
+			})
+
 			provide(provideKey, {
 				formData,
 				submit,
 				validate,
 				ignoreUpdates,
 				stopUpdatesWatch,
-				errors: readonly(errors),
-				status: readonly(status),
+				errors: makeReadonly(errors),
+				status: makeReadonly(status),
 				invalid,
+				readonly,
 			})
 
 			return {
@@ -185,9 +238,10 @@ export const defineForm = <Schema extends FormSchema>(
 				validate,
 				ignoreUpdates,
 				stopUpdatesWatch,
-				errors: readonly(errors),
-				status: readonly(status),
+				errors: makeReadonly(errors),
+				status: makeReadonly(status),
 				invalid,
+				isReadonly: readonly,
 			}
 		},
 		render() {
@@ -201,6 +255,7 @@ export const defineForm = <Schema extends FormSchema>(
 					errors: this.errors,
 					status: this.status,
 					invalid: this.invalid,
+					readonly: this.isReadonly,
 				}) ?? this.$slots.default
 			return h(
 				this.tag,
@@ -229,6 +284,7 @@ export const defineForm = <Schema extends FormSchema>(
 		errors,
 		status,
 		invalid,
+		readonly,
 		formData,
 		validate,
 		submit,
@@ -255,6 +311,7 @@ export const defineForm = <Schema extends FormSchema>(
 						>
 						status: Ref<DeepReadonly<`${FormStatus}` | undefined>>
 						invalid: Ref<DeepReadonly<boolean>>
+						readonly: Ref<boolean>
 						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 					}) => any
 				}

package/src/VvFormField.ts

@@ -81,6 +81,10 @@ export const defineFormField = <Schema extends FormSchema>(
 				type: Boolean,
 				default: false,
 			},
+			readonly: {
+				type: Boolean,
+				default: undefined,
+			},
 		},
 		emits: ['invalid', 'valid', 'update:formData', 'update:modelValue'],
 		expose: ['invalid', 'invalidLabel', 'errors'],
@@ -186,6 +190,15 @@ export const defineFormField = <Schema extends FormSchema>(
 					{},
 				)
 			})
+			const isReadonly = computed(() => {
+				const fieldReadonly =
+					hasFieldProps.value.readonly ?? props.readonly
+				if (fieldReadonly === undefined) {
+					return injectedFormData?.readonly.value
+				}
+				return fieldReadonly
+			})
+
 			const hasProps = computed(() => ({
 				...hasFieldProps.value,
 				name: hasFieldProps.value.name ?? props.name,
@@ -217,6 +230,7 @@ export const defineFormField = <Schema extends FormSchema>(
 				})(props.type as FormFieldType),
 				invalidLabel: invalidLabel.value,
 				modelValue: modelValue.value,
+				readonly: isReadonly.value,
 				'onUpdate:modelValue': onUpdate,
 			}))
 
@@ -240,6 +254,7 @@ export const defineFormField = <Schema extends FormSchema>(
 									formData: injectedFormData?.formData.value,
 									formErrors: injectedFormData?.errors.value,
 									errors: errors.value,
+									readonly: isReadonly.value,
 								}) ?? slots.defalut
 							)
 						},

package/src/index.ts

@@ -53,6 +53,7 @@ const _formFactory = <Schema extends FormSchema>(
 		errors,
 		status,
 		invalid,
+		readonly,
 		formData,
 		validate,
 		submit,
@@ -71,6 +72,7 @@ const _formFactory = <Schema extends FormSchema>(
 		errors,
 		status,
 		invalid,
+		readonly,
 		formData,
 		validate,
 		submit,

package/src/types.ts

@@ -16,6 +16,7 @@ export type FormFieldComponentOptions = {
 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
@@ -52,6 +53,7 @@ export type InjectedFormData<Schema extends FormSchema> = {
 	stopUpdatesWatch: WatchStopHandle
 	status: Readonly<Ref<FormStatus | undefined>>
 	invalid: Readonly<Ref<boolean>>
+	readonly: Ref<boolean>
 }
 
 export type InjectedFormWrapperData<Schema extends FormSchema> = {
@@ -107,17 +109,17 @@ export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any
 					: PathValue<T[K], R>
 				: never
 			: K extends `${number}`
-			? T extends readonly (infer V)[]
-				? PathValue<V, R & Path<V>>
-				: never
-			: never
+			  ? 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
+		  ? T[TPath]
+		  : TPath extends `${number}`
+		    ? T extends readonly (infer V)[]
+					? V
+					: never
+		    : never
 	: never
 
 export type AnyBoolean<Schema extends FormSchema> =