@volverjs/form-vue 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/src/types.d.ts

@@ -10,6 +10,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 : never;
     onSubmit?: Schema extends FormSchema ? (data: z.infer<Schema>) => void : never;
@@ -30,6 +31,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> = {
     name: Ref<string>;

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "engines": {
     "node": ">= 16.x"
   },
@@ -35,35 +35,35 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "^0.0.9",
-    "@vueuse/core": "^10.5.0",
+    "@volverjs/ui-vue": "0.0.10-beta.27",
+    "@vueuse/core": "^10.7.2",
     "ts-dot-prop": "^2.1.3",
-    "vue": "^3.3.7",
+    "vue": "^3.4.15",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.39.0",
-    "@testing-library/vue": "^8.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@playwright/experimental-ct-vue": "1.41.1",
+    "@testing-library/vue": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@vitejs/plugin-vue": "^5.0.3",
     "@volverjs/style": "^0.1.11",
-    "@vue/compiler-sfc": "^3.3.7",
+    "@vue/compiler-sfc": "^3.4.15",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/runtime-core": "^3.3.7",
-    "@vue/test-utils": "^2.4.1",
+    "@vue/runtime-core": "^3.4.15",
+    "@vue/test-utils": "^2.4.4",
     "copy": "^0.3.2",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-vue": "^9.18.1",
-    "happy-dom": "^12.10.3",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.3",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.21.0",
+    "happy-dom": "^13.3.5",
+    "prettier": "^3.2.4",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.2",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-externalize-deps": "^0.7.0",
-    "vitest": "^0.34.6"
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "^1.2.2"
   },
   "typesVersions": {
     "*": {

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,
@@ -176,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 {
@@ -193,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() {
@@ -209,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,
@@ -237,6 +284,7 @@ export const defineForm = <Schema extends FormSchema>(
 		errors,
 		status,
 		invalid,
+		readonly,
 		formData,
 		validate,
 		submit,
@@ -263,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,12 @@ export const defineFormField = <Schema extends FormSchema>(
 					{},
 				)
 			})
+			const isReadonly = computed(() => {
+				if (injectedFormData?.readonly.value) {
+					return true
+				}
+				return hasFieldProps.value.readonly ?? props.readonly
+			})
 			const hasProps = computed(() => ({
 				...hasFieldProps.value,
 				name: hasFieldProps.value.name ?? props.name,
@@ -217,14 +227,17 @@ export const defineFormField = <Schema extends FormSchema>(
 				})(props.type as FormFieldType),
 				invalidLabel: invalidLabel.value,
 				modelValue: modelValue.value,
+				readonly: isReadonly.value,
 				'onUpdate:modelValue': onUpdate,
 			}))
 
+			// provide data to children
 			provide(formFieldInjectionKey, {
 				name: readonly(fieldName as Ref<string>),
 				errors: readonly(errors),
 			})
 
+			// load component
 			const component = computed(() => {
 				if (props.type === FormFieldType.custom) {
 					return {
@@ -240,6 +253,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> =