@tmagic/editor 1.8.0-beta.10 → 1.8.0-beta.12

package/dist/es/style.css

@@ -1,55 +1,4 @@
-@charset "UTF-8";.m-editor-scroll-bar {
-  position: absolute;
-  background-color: transparent;
-  opacity: 0.3;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-}
-.m-editor-scroll-bar .m-editor-scroll-bar-thumb {
-  background-color: #aaa;
-  border-radius: 6px;
-  position: absolute;
-}
-.m-editor-scroll-bar.horizontal {
-  width: 100%;
-  height: 15px;
-  bottom: 0;
-}
-.m-editor-scroll-bar.horizontal .m-editor-scroll-bar-thumb {
-  height: 6px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
-  bottom: 2px;
-}
-.m-editor-scroll-bar.vertical {
-  height: 100%;
-  width: 15px;
-  right: 5px;
-}
-.m-editor-scroll-bar.vertical .m-editor-scroll-bar-thumb {
-  width: 6px;
-  transition: background-color 0.2s linear, width 0.2s ease-in-out;
-  right: 2px;
-}
-.m-editor-scroll-bar:hover, .m-editor-scroll-bar:focus {
-  background-color: #eee;
-  opacity: 0.9;
-}
-.m-editor-scroll-bar:hover .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus .m-editor-scroll-bar-thumb {
-  background-color: #999;
-}
-.m-editor-scroll-bar:hover.horizontal .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.horizontal .m-editor-scroll-bar-thumb {
-  height: 11px;
-}
-.m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
-  width: 11px;
-}.m-fields-ui-select {
-  cursor: pointer;
-}
-.m-fields-ui-select i {
-  margin-right: 3px;
-}
-.m-fields-ui-select span {
-  color: #2882e0;
-}
+@charset "UTF-8";
 .tmagic-design-popper {
   min-width: 150px;
   line-height: 1.4;
@@ -115,6 +64,22 @@
   color: #999;
 }
 
+.tmagic-table-sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.tmagic-table-sub-actions .sub-action-btn {
+  width: 100%;
+}
+.tmagic-table-sub-actions .tmagic-design-button + .tmagic-design-button {
+  margin-left: 0;
+}
+.tmagic-table-sub-actions .tmagic-design-button {
+  justify-content: flex-start;
+}
+
 .tmagic-design-form-inline .m-form-container {
   display: inline-flex;
 }
@@ -139,7 +104,7 @@
 .m-form-dialog .m-dialog-body {
   padding: 0 20px;
 }
-.m-form-dialog .el-table .m-form-item .el-form-item {
+.m-form-dialog .el-table .m-form-item .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 
@@ -363,6 +328,10 @@ fieldset.m-fieldset .m-form-tip {
   width: 95vw !important;
 }
 
+.el-form-item .m-fields-table .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-fields-table {
   width: 100%;
 }
@@ -385,7 +354,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table .el-table__expanded-cell .m-form-tip {
   margin-left: 80px;
 }
-.m-fields-table .el-form-item {
+.m-fields-table .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 .m-fields-table .tmagic-form-table-drag-target {
@@ -1808,6 +1777,10 @@ fieldset.m-fieldset .m-form-tip {
   margin-right: 5px;
 }
 
+.el-form-item .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-editor-layout {
   width: 100%;
   display: flex;
@@ -2020,13 +1993,21 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-float-box .m-editor-float-box-body {
   overflow: auto;
   flex: 1;
-  padding: 0 16px;
 }
 
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
 
+.m-editor-float-box-drag-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
 .m-fields-page-fragment-select {
   width: 100%;
 }
@@ -2076,6 +2057,74 @@ fieldset.m-fieldset .m-form-tip {
   padding: 5px 8px;
 }
 
+.m-editor-scroll-bar {
+  position: absolute;
+  background-color: transparent;
+  opacity: 0.3;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+}
+.m-editor-scroll-bar .m-editor-scroll-bar-thumb {
+  background-color: #aaa;
+  border-radius: 6px;
+  position: absolute;
+}
+.m-editor-scroll-bar.horizontal {
+  width: 100%;
+  height: 15px;
+  bottom: 0;
+}
+.m-editor-scroll-bar.horizontal .m-editor-scroll-bar-thumb {
+  height: 6px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  bottom: 2px;
+}
+.m-editor-scroll-bar.vertical {
+  height: 100%;
+  width: 15px;
+  right: 5px;
+}
+.m-editor-scroll-bar.vertical .m-editor-scroll-bar-thumb {
+  width: 6px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  right: 2px;
+}
+.m-editor-scroll-bar:hover, .m-editor-scroll-bar:focus {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.m-editor-scroll-bar:hover .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus .m-editor-scroll-bar-thumb {
+  background-color: #999;
+}
+.m-editor-scroll-bar:hover.horizontal .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.horizontal .m-editor-scroll-bar-thumb {
+  height: 11px;
+}
+.m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
+  width: 11px;
+}
+
+.m-fields-ui-select {
+  cursor: pointer;
+}
+.m-fields-ui-select i {
+  margin-right: 3px;
+}
+.m-fields-ui-select span {
+  color: #2882e0;
+}
+
+.m-editor-layer-node-content {
+  display: inline-flex;
+  align-items: center;
+}
+.m-editor-layer-node-content.is-invalid .m-editor-layer-node-label {
+  color: var(--el-color-danger, #f56c6c);
+}
+.m-editor-layer-node-content .m-editor-layer-node-error-icon {
+  margin-left: 4px;
+  color: var(--el-color-danger, #f56c6c);
+  cursor: help;
+}
+
 .border-box-container {
   display: flex;
 }

package/dist/es/utils/data-source/index.js

@@ -188,17 +188,36 @@ var getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"])
 	}
 	return result;
 };
-var getFieldType = (ds, fieldNames) => {
-	let fields = ds?.fields;
-	let type = "";
-	for (const fieldName of fieldNames) {
-		if (!fields?.length) return "";
-		const field = fields.find((f) => f.name === fieldName);
-		if (!field) return "";
-		type = field.type || "";
-		fields = field.fields;
+/**
+* 按字段名路径下钻 DataSchema。
+* @param skipNumberIndices 为 true 时跳过数字段（模板路径中的数组下标，如 arr[0].x）
+*/
+var resolveFieldByPath = (fields, fieldNames, options = {}) => {
+	let currentFields = fields || [];
+	let field;
+	for (const name of fieldNames) {
+		if (options.skipNumberIndices && isNumber(name)) continue;
+		if (!currentFields.length) return {
+			ok: false,
+			fields: currentFields
+		};
+		field = currentFields.find((item) => item.name === name);
+		if (!field) return {
+			ok: false,
+			fields: currentFields
+		};
+		currentFields = field.fields || [];
 	}
-	return type;
+	return {
+		field,
+		ok: true,
+		fields: currentFields
+	};
+};
+var getFieldType = (ds, fieldNames) => {
+	const { ok, field } = resolveFieldByPath(ds?.fields, fieldNames);
+	if (!ok) return "";
+	return field?.type || "";
 };
 //#endregion
-export { getCascaderOptionsFromFields, getDisplayField, getFieldType, getFormConfig, getFormValue };
+export { getCascaderOptionsFromFields, getDisplayField, getFieldType, getFormConfig, getFormValue, resolveFieldByPath };

package/dist/es/utils/event.js

@@ -0,0 +1,123 @@
+import editor_default from "../services/editor.js";
+import { getCascaderOptionsFromFields } from "./data-source/index.js";
+import dataSource_default from "../services/dataSource.js";
+import events_default from "../services/events.js";
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from "@tmagic/utils";
+//#region packages/editor/src/utils/event.ts
+var EVENT_NAME_VALUE_SEPARATOR = ".";
+/** 与 EventSelect 中 checkStrictly 一致：component 为 false，其余为 true */
+var isEventNameCheckStrictly = (src) => src !== "component";
+/** 将动作 method 值规范为与 collectEventNameOptionValues 一致的字符串（cascader 无 valueSeparator 时存数组） */
+var normalizeCompActionValue = (value) => {
+	if (Array.isArray(value)) return value.map((item) => `${item}`).join(".");
+	if (value === null || value === void 0 || value === "") return "";
+	return `${value}`;
+};
+/**
+* 组装事件名称下拉/级联 options，与 EventSelect 默认 eventNameConfig.options 逻辑一致。
+*/
+var getEventNameOptions = (src, formValue = {}) => {
+	if (!formValue.type) return [];
+	if (src === "component") {
+		let events = events_default.getEvent(formValue.type) || [];
+		if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
+			const pageFragment = editor_default.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
+			if (!pageFragment) return [];
+			events = [{
+				label: pageFragment.name || "页面片容器",
+				value: pageFragment.id,
+				children: events
+			}];
+			(pageFragment.items || []).forEach((node) => {
+				traverseNode(node, (current) => {
+					const nodeEvents = current.type && events_default.getEvent(current.type) || [];
+					events.push({
+						label: `${current.name}_${current.id}`,
+						value: `${current.id}`,
+						children: nodeEvents
+					});
+				});
+			});
+			return events;
+		}
+		return events.map((option) => ({
+			text: option.label,
+			value: option.value
+		}));
+	}
+	if (src === "datasource") {
+		const events = dataSource_default.getFormEvent(formValue.type) || [];
+		const fields = dataSource_default.getDataSourceById(formValue.id)?.fields || [];
+		if (fields.length > 0) return [...events, {
+			label: "数据变化",
+			value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+			children: getCascaderOptionsFromFields(fields)
+		}];
+		return events;
+	}
+	return [];
+};
+/** 将 select / cascader options 展平为最终写入 name 的字符串集合（cascader 用 `.` 拼接） */
+var collectEventNameOptionValues = (options, checkStrictly, prefix = [], result = /* @__PURE__ */ new Set()) => {
+	options.forEach((option) => {
+		if (typeof option?.value === "undefined") return;
+		const path = [...prefix, option.value];
+		const joined = path.map((item) => `${item}`).join(".");
+		const children = "children" in option ? option.children : void 0;
+		if (Array.isArray(children) && children.length) {
+			if (checkStrictly) result.add(joined);
+			collectEventNameOptionValues(children, checkStrictly, path, result);
+			return;
+		}
+		result.add(joined);
+	});
+	return result;
+};
+/**
+* 解析 event-select 允许的 name 集合。
+* 自定义 eventNameConfig.options 时返回 null（跳过枚举校验）。
+*/
+var getEventNameAllowedValues = (config = {}, formValue = {}) => {
+	if (typeof config.eventNameConfig?.options !== "undefined") return null;
+	if (config.src !== "component" && config.src !== "datasource") return null;
+	return collectEventNameOptionValues(getEventNameOptions(config.src, formValue), isEventNameCheckStrictly(config.src));
+};
+/**
+* 组装联动组件动作下拉/级联 options，与 EventSelect 默认 compActionConfig.options 逻辑一致。
+*/
+var getCompActionOptions = (toId) => {
+	if (typeof toId === "undefined" || toId === null || toId === "") return [];
+	const node = editor_default.getNodeById(toId);
+	if (!node?.type) return [];
+	let methods = events_default.getMethod(node.type, toId) || [];
+	if (node.type === "page-fragment-container" && node.pageFragmentId) {
+		const pageFragment = editor_default.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
+		if (!pageFragment) return [];
+		methods = [];
+		(pageFragment.items || []).forEach((item) => {
+			traverseNode(item, (current) => {
+				const nodeMethods = current.type && events_default.getMethod(current.type, current.id) || [];
+				if (nodeMethods.length) methods.push({
+					label: `${current.name}_${current.id}`,
+					value: `${current.id}`,
+					children: nodeMethods
+				});
+			});
+		});
+		return methods;
+	}
+	return methods.map((method) => ({
+		text: method.label,
+		value: method.value
+	}));
+};
+/**
+* 解析 event-select 联动组件动作允许的 method 集合。
+* 自定义 compActionConfig.options 时返回 null（跳过枚举校验）。
+*/
+var getCompActionAllowedValues = (config = {}, model = {}) => {
+	if (typeof config.compActionConfig?.options !== "undefined") return null;
+	return collectEventNameOptionValues(getCompActionOptions(model.to), isEventNameCheckStrictly(config.src));
+};
+//#endregion
+export { EVENT_NAME_VALUE_SEPARATOR, collectEventNameOptionValues, getCompActionAllowedValues, getCompActionOptions, getEventNameAllowedValues, getEventNameOptions, isEventNameCheckStrictly, normalizeCompActionValue };

package/dist/es/utils/monaco-editor.js

@@ -1,12 +1,28 @@
 //#region packages/editor/src/utils/monaco-editor.ts
 var cached;
-var monaco_editor_default = () => {
-	if (!cached) cached = Promise.all([import("emmet-monaco-es"), import("monaco-editor")]).then(([emmet, monaco]) => {
-		const { emmetHTML, emmetCSS } = emmet;
-		emmetHTML(monaco);
-		emmetCSS(monaco, ["css", "scss"]);
-		return monaco;
+var isMonacoCanceledError = (reason) => {
+	if (!reason) return false;
+	if (reason instanceof Error) return reason.name === "Canceled" || reason.message === "Canceled";
+	return reason === "Canceled";
+};
+var canceledRejectionHandlerInstalled = false;
+var installCanceledRejectionHandler = () => {
+	if (canceledRejectionHandlerInstalled || typeof globalThis.addEventListener !== "function") return;
+	canceledRejectionHandlerInstalled = true;
+	globalThis.addEventListener("unhandledrejection", (event) => {
+		if (isMonacoCanceledError(event.reason)) event.preventDefault();
 	});
+};
+var monaco_editor_default = () => {
+	if (!cached) {
+		installCanceledRejectionHandler();
+		cached = Promise.all([import("emmet-monaco-es"), import("monaco-editor")]).then(([emmet, monaco]) => {
+			const { emmetHTML, emmetCSS } = emmet;
+			emmetHTML(monaco);
+			emmetCSS(monaco, ["css", "scss"]);
+			return monaco;
+		});
+	}
 	return cached;
 };
 //#endregion

package/dist/es/utils/props.js

@@ -1,5 +1,6 @@
+import { validateForm } from "@tmagic/form";
 import { tMagicMessage } from "@tmagic/design";
-import { NODE_CONDS_KEY, NODE_CONDS_RESULT_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from "@tmagic/core";
+import { HookType, NODE_CONDS_KEY, NODE_CONDS_RESULT_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from "@tmagic/core";
 //#region packages/editor/src/utils/props.ts
 var arrayOptions = [{
 	text: "包含",
@@ -41,10 +42,29 @@ var numberOptions = [
 		value: "not_between"
 	}
 ];
+var booleanOptions = [{
+	text: "是",
+	value: "is"
+}, {
+	text: "不是",
+	value: "not"
+}];
+/** 按字段类型返回条件运算符选项（UI 与 typeMatch 校验共用） */
+var getCondOpOptionsByFieldType = (type) => {
+	if (type === "array") return arrayOptions;
+	if (type === "boolean" || type === "null") return booleanOptions;
+	if (type === "number") return [...eqOptions, ...numberOptions];
+	if (type === "string") return [...arrayOptions, ...eqOptions];
+	return [
+		...arrayOptions,
+		...eqOptions,
+		...numberOptions
+	];
+};
 var styleTabConfig = {
 	title: "样式",
 	lazy: true,
-	display: ({ services }) => !(services.uiService.get("showStylePanel") ?? true),
+	display: ({ services }) => !(services?.uiService?.get("showStylePanel") ?? true),
 	items: [{
 		name: "style",
 		labelWidth: "100px",
@@ -113,7 +133,8 @@ var eventTabConfig = {
 		name: "events",
 		src: "component",
 		labelWidth: "100px",
-		type: "event-select"
+		type: "event-select",
+		rules: [{ typeMatch: true }]
 	}]
 };
 var advancedTabConfig = {
@@ -139,21 +160,42 @@ var advancedTabConfig = {
 			text: "created",
 			labelPosition: "top",
 			type: "code-select",
-			extra: "组件初始化时执行"
+			extra: "组件初始化时执行",
+			rules: [{
+				typeMatch: true,
+				trigger: "change"
+			}, { validator: ({ value, callback }) => {
+				if (value && value.hookType !== HookType.CODE) return callback("hookType 必须是 code");
+				callback();
+			} }]
 		},
 		{
 			name: "mounted",
 			text: "mounted",
 			labelPosition: "top",
 			type: "code-select",
-			extra: "组件挂载到dom时执行"
+			extra: "组件挂载到dom时执行",
+			rules: [{
+				typeMatch: true,
+				trigger: "change"
+			}, { validator: ({ value, callback }) => {
+				if (value && value.hookType !== HookType.CODE) return callback("hookType 必须是 code");
+				callback();
+			} }]
 		},
 		{
 			name: "display",
 			text: "display",
 			extra: "控制组件是否渲染，关系的代码块返回值为false时不渲染",
 			labelPosition: "top",
-			type: "code-select"
+			type: "code-select",
+			rules: [{
+				typeMatch: true,
+				trigger: "change"
+			}, { validator: ({ value, callback }) => {
+				if (value && value.hookType !== HookType.CODE) return callback("hookType 必须是 code");
+				callback();
+			} }]
 		}
 	]
 };
@@ -177,7 +219,8 @@ var displayTabConfig = {
 		type: "display-conds",
 		name: NODE_CONDS_KEY,
 		titlePrefix: "条件组",
-		defaultValue: []
+		defaultValue: [],
+		rules: [{ typeMatch: true }]
 	}]
 };
 /**
@@ -232,5 +275,48 @@ var fillConfig = (config = [], { labelWidth = "80px", disabledDataSource = false
 	if (!disabledDataSource) tabConfig.items.push({ ...displayTabConfig });
 	return [tabConfig];
 };
+/**
+* 对一份「组件属性表单配置 + 值」做一次独立的校验，**不复用也不污染页面上正在展示的表单**。
+*
+* 内部基于 `@tmagic/form` 的 `validateForm` 另建一个独立的 MForm 实例完成校验，并统一处理
+* 编辑器场景所需的上下文注入：将当前组件实例的 provides 合入 appContext，并向 formState 注入
+* stage / services 及外部扩展状态，保证校验规则依赖的上下文可用。
+*
+* 常用于源码编辑器保存后，对最新配置做一次校验，并将校验结果（错误信息）随提交一并抛给上层记录，
+* 使源码保存的错误状态与表单编辑保持一致。
+*
+* @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
+*   仅在初始化超时或挂载失败等异常情况下才会 reject。
+*
+* @example
+* ```ts
+* const error = await validatePropsForm({
+*   config,
+*   values,
+*   appContext: getCurrentInstance()?.appContext,
+*   services,
+*   stage: editorService.get('stage'),
+*   extendState,
+* });
+* if (error) {
+*   // 配置不合法，error 为错误文案
+* }
+* ```
+*/
+var validatePropsForm = ({ config, values, appContext = null, services, stage, extendState, debug, typeMatchValid }) => validateForm({
+	config,
+	debug,
+	typeMatchValid,
+	initValues: values,
+	appContext: appContext ? {
+		...appContext,
+		provides: { services }
+	} : null,
+	extendState: async (state) => ({
+		...await extendState?.(state) || {},
+		stage,
+		services
+	})
+});
 //#endregion
-export { advancedTabConfig, arrayOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, numberOptions, styleTabConfig };
+export { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, styleTabConfig, validatePropsForm };