@tmagic/editor 1.8.1 → 1.8.2

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -136,7 +136,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		provide("codeOptions", props.codeOptions);
 		provide("stageOptions", stageOptions);
 		/** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
-		provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
+		provide(ENABLE_PROPS_FORM_VALIDATE, computed(() => props.enablePropsFormValidate ?? false));
 		/**
 		* 编辑器注入给整棵表单树的业务上下文（`services` / `stage`），属性面板、对比表单、
 		* 侧边栏里的嵌套 MForm 都通过 inject 自动继承。

package/dist/es/editorProps.js

@@ -4,6 +4,9 @@ import { getIdFromEl } from "@tmagic/utils";
 /**
 * 「属性配置表单校验」联动能力的 provide/inject 注入键。
 * 使用 Symbol 避免与其它字符串键冲突，供 PropsPanel / FormPanel 注入判断校验失败时是否仍更新节点并记录错误。
+*
+* 注入值是 ComputedRef：Editor 用 `computed(() => props.enablePropsFormValidate ?? false)` 提供，
+* 保证外部动态切换该 prop 时子孙组件能同步拿到最新值；子孙侧用 `.value` 读取。
 */
 var ENABLE_PROPS_FORM_VALIDATE = Symbol("enablePropsFormValidate");
 var defaultEditorProps = {

package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js

@@ -32,7 +32,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+		const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, computed(() => false));
 		const services = useServices();
 		const { uiService } = services;
 		const codeOptions = inject("codeOptions", {});
@@ -53,7 +53,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				const values = await configFormRef.value?.submitForm();
 				emit("submit", values, eventData);
 			} catch (e) {
-				if (enablePropsFormValidate) emit("submit", v, eventData, e);
+				if (enablePropsFormValidate.value) emit("submit", v, eventData, e);
 				else emit("submit-error", e);
 			}
 		};
@@ -70,7 +70,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const formatValidateErrorHtml = (error) => error.split(/<br\s*\/?>/i).map((segment) => filterXSS(segment).replaceAll("\n", "<br>")).join("<br>");
 		const saveCode = async (values) => {
 			const newValues = props.codeValueKey ? { [props.codeValueKey]: values } : values;
-			if (!enablePropsFormValidate) {
+			if (!enablePropsFormValidate.value) {
 				emit("submit", newValues);
 				return;
 			}
@@ -109,9 +109,9 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						size: propsPanelSize.value,
 						"init-values": __props.values,
 						config: __props.config,
-						"type-match-valid": true,
+						"type-match-valid": unref(enablePropsFormValidate),
 						context: unref(formContext),
-						"validate-on-init": true,
+						"validate-on-init": unref(enablePropsFormValidate),
 						onChange: submit,
 						onError: errorHandler
 					}, null, 8, [
@@ -122,7 +122,9 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"size",
 						"init-values",
 						"config",
-						"context"
+						"type-match-valid",
+						"context",
+						"validate-on-init"
 					])]),
 					_: 1
 				}),

package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const { editorService, uiService, propsService, storageService } = useServices();
-		const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+		const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, computed(() => false));
 		const values = ref({});
 		const curFormConfig = ref([]);
 		const node = computed(() => editorService.get("node"));
@@ -93,7 +93,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					changeRecords: eventData?.changeRecords,
 					historySource,
 					replace,
-					...enablePropsFormValidate && error ? { invalidInfo: {
+					...enablePropsFormValidate.value && error ? { invalidInfo: {
 						id: newValue.id,
 						source,
 						error: error?.message

package/dist/tmagic-editor.umd.cjs

@@ -14869,6 +14869,9 @@
 	/**
 	* 「属性配置表单校验」联动能力的 provide/inject 注入键。
 	* 使用 Symbol 避免与其它字符串键冲突，供 PropsPanel / FormPanel 注入判断校验失败时是否仍更新节点并记录错误。
+	*
+	* 注入值是 ComputedRef：Editor 用 `computed(() => props.enablePropsFormValidate ?? false)` 提供，
+	* 保证外部动态切换该 prop 时子孙组件能同步拿到最新值；子孙侧用 `.value` 读取。
 	*/
 	var ENABLE_PROPS_FORM_VALIDATE = Symbol("enablePropsFormValidate");
 	var defaultEditorProps = {
@@ -14931,7 +14934,7 @@
 		setup(__props, { expose: __expose, emit: __emit }) {
 			const props = __props;
 			const emit = __emit;
-			const enablePropsFormValidate = (0, vue.inject)(ENABLE_PROPS_FORM_VALIDATE, false);
+			const enablePropsFormValidate = (0, vue.inject)(ENABLE_PROPS_FORM_VALIDATE, (0, vue.computed)(() => false));
 			const services = useServices();
 			const { uiService } = services;
 			const codeOptions = (0, vue.inject)("codeOptions", {});
@@ -14952,7 +14955,7 @@
 					const values = await configFormRef.value?.submitForm();
 					emit("submit", values, eventData);
 				} catch (e) {
-					if (enablePropsFormValidate) emit("submit", v, eventData, e);
+					if (enablePropsFormValidate.value) emit("submit", v, eventData, e);
 					else emit("submit-error", e);
 				}
 			};
@@ -14969,7 +14972,7 @@
 			const formatValidateErrorHtml = (error) => error.split(/<br\s*\/?>/i).map((segment) => (0, _tmagic_utils.filterXSS)(segment).replaceAll("\n", "<br>")).join("<br>");
 			const saveCode = async (values) => {
 				const newValues = props.codeValueKey ? { [props.codeValueKey]: values } : values;
-				if (!enablePropsFormValidate) {
+				if (!enablePropsFormValidate.value) {
 					emit("submit", newValues);
 					return;
 				}
@@ -15008,9 +15011,9 @@
 							size: propsPanelSize.value,
 							"init-values": __props.values,
 							config: __props.config,
-							"type-match-valid": true,
+							"type-match-valid": (0, vue.unref)(enablePropsFormValidate),
 							context: (0, vue.unref)(formContext),
-							"validate-on-init": true,
+							"validate-on-init": (0, vue.unref)(enablePropsFormValidate),
 							onChange: submit,
 							onError: errorHandler
 						}, null, 8, [
@@ -15021,7 +15024,9 @@
 							"size",
 							"init-values",
 							"config",
-							"context"
+							"type-match-valid",
+							"context",
+							"validate-on-init"
 						])]),
 						_: 1
 					}),
@@ -15115,7 +15120,7 @@
 		setup(__props, { expose: __expose, emit: __emit }) {
 			const emit = __emit;
 			const { editorService, uiService, propsService, storageService } = useServices();
-			const enablePropsFormValidate = (0, vue.inject)(ENABLE_PROPS_FORM_VALIDATE, false);
+			const enablePropsFormValidate = (0, vue.inject)(ENABLE_PROPS_FORM_VALIDATE, (0, vue.computed)(() => false));
 			const values = (0, vue.ref)({});
 			const curFormConfig = (0, vue.ref)([]);
 			const node = (0, vue.computed)(() => editorService.get("node"));
@@ -15178,7 +15183,7 @@
 						changeRecords: eventData?.changeRecords,
 						historySource,
 						replace,
-						...enablePropsFormValidate && error ? { invalidInfo: {
+						...enablePropsFormValidate.value && error ? { invalidInfo: {
 							id: newValue.id,
 							source,
 							error: error?.message
@@ -20661,7 +20666,7 @@
 			(0, vue.provide)("codeOptions", props.codeOptions);
 			(0, vue.provide)("stageOptions", stageOptions);
 			/** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
-			(0, vue.provide)(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
+			(0, vue.provide)(ENABLE_PROPS_FORM_VALIDATE, (0, vue.computed)(() => props.enablePropsFormValidate ?? false));
 			/**
 			* 编辑器注入给整棵表单树的业务上下文（`services` / `stage`），属性面板、对比表单、
 			* 侧边栏里的嵌套 MForm 都通过 inject 自动继承。

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.1",
+  "version": "1.8.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -63,11 +63,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.1.1",
     "sortablejs": "^1.15.7",
-    "@tmagic/design": "1.8.1",
-    "@tmagic/form": "1.8.1",
-    "@tmagic/stage": "1.8.1",
-    "@tmagic/table": "1.8.1",
-    "@tmagic/utils": "1.8.1"
+    "@tmagic/design": "1.8.2",
+    "@tmagic/form": "1.8.2",
+    "@tmagic/stage": "1.8.2",
+    "@tmagic/table": "1.8.2",
+    "@tmagic/utils": "1.8.2"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -81,7 +81,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.43",
-    "@tmagic/core": "1.8.1"
+    "@tmagic/core": "1.8.2"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -236,7 +236,12 @@ provide('services', services);
 provide('codeOptions', props.codeOptions);
 provide('stageOptions', stageOptions);
 /** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
-provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
+// 同 isLargeStageContainer：用 computed 包一层，否则传下去的是 provide 那一刻的值快照，
+// props.enablePropsFormValidate 后续变化不会同步到子孙。
+provide(
+  ENABLE_PROPS_FORM_VALIDATE,
+  computed(() => props.enablePropsFormValidate ?? false),
+);
 /**
  * 编辑器注入给整棵表单树的业务上下文（`services` / `stage`），属性面板、对比表单、
  * 侧边栏里的嵌套 MForm 都通过 inject 自动继承。

package/src/editorProps.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey } from 'vue';
 
 import type { DataSourceSchema, EventOption, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
@@ -31,8 +31,11 @@ import type {
 /**
  * 「属性配置表单校验」联动能力的 provide/inject 注入键。
  * 使用 Symbol 避免与其它字符串键冲突，供 PropsPanel / FormPanel 注入判断校验失败时是否仍更新节点并记录错误。
+ *
+ * 注入值是 ComputedRef：Editor 用 `computed(() => props.enablePropsFormValidate ?? false)` 提供，
+ * 保证外部动态切换该 prop 时子孙组件能同步拿到最新值；子孙侧用 `.value` 读取。
  */
-export const ENABLE_PROPS_FORM_VALIDATE: InjectionKey<boolean> = Symbol('enablePropsFormValidate');
+export const ENABLE_PROPS_FORM_VALIDATE: InjectionKey<ComputedRef<boolean>> = Symbol('enablePropsFormValidate');
 
 export interface EditorProps {
   /** 是否是大屏模拟器容器，大屏容器时，左侧属性面板会扩展为两列（正常3列），颜色表单不扩展两列等 */

package/src/layouts/props-panel/FormPanel.vue

@@ -12,9 +12,9 @@
         :size="propsPanelSize"
         :init-values="values"
         :config="config"
-        :type-match-valid="true"
+        :type-match-valid="enablePropsFormValidate"
         :context="formContext"
-        :validate-on-init="true"
+        :validate-on-init="enablePropsFormValidate"
         @change="submit"
         @error="errorHandler"
       ></MForm>
@@ -86,7 +86,10 @@ const emit = defineEmits<{
   unmounted: [];
 }>();
 
-const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+const enablePropsFormValidate = inject(
+  ENABLE_PROPS_FORM_VALIDATE,
+  computed(() => false),
+);
 
 const services = useServices();
 const { uiService } = services;
@@ -116,7 +119,7 @@ const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
     // 校验成功：正常更新节点（第三个参数 error 为空，表示清除该来源的错误记录）
     emit('submit', values, eventData);
   } catch (e: any) {
-    if (enablePropsFormValidate) {
+    if (enablePropsFormValidate.value) {
       // 启用校验联动：校验失败时仍以当前表单值更新节点，并把错误信息一并抛给上层记录
       emit('submit', v, eventData, e);
     } else {
@@ -146,7 +149,7 @@ const formatValidateErrorHtml = (error: string): string =>
 const saveCode = async (values: any) => {
   const newValues = props.codeValueKey ? { [props.codeValueKey]: values } : values;
 
-  if (!enablePropsFormValidate) {
+  if (!enablePropsFormValidate.value) {
     // 未启用校验联动：保持原行为，直接提交源码保存的值
     emit('submit', newValues);
     return;

package/src/layouts/props-panel/PropsPanel.vue

@@ -93,7 +93,10 @@ const emit = defineEmits<{
 
 const { editorService, uiService, propsService, storageService } = useServices();
 
-const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+const enablePropsFormValidate = inject(
+  ENABLE_PROPS_FORM_VALIDATE,
+  computed(() => false),
+);
 
 const values = ref<FormValue>({});
 // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
@@ -205,7 +208,9 @@ const submit = async (
       replace,
       // 启用校验联动时，仅校验失败（error 存在）才把错误信息随更新传入 editorService 记录；
       // 其余情况（含表单校验成功、CodeEditor 源码保存）不携带 invalidInfo，由 editorService 在执行 update 时统一清除该节点错误。
-      ...(enablePropsFormValidate && error ? { invalidInfo: { id: newValue.id, source, error: error?.message } } : {}),
+      ...(enablePropsFormValidate.value && error
+        ? { invalidInfo: { id: newValue.id, source, error: error?.message } }
+        : {}),
     });
   } catch (e: any) {
     emit('submit-error', e);