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

package/dist/es/index.js

@@ -1,6 +1,6 @@
 import { CODE_DRAFT_STORAGE_KEY, CodeDeleteErrorType, ColumnLayout, DragType, KeyBindingCommand, Keys, LayerOffset, Layout, SideItemKey, canUsePluginMethods } from "./type.js";
 import { useCodeBlockEdit } from "./hooks/use-code-block-edit.js";
-import { advancedTabConfig, arrayOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, numberOptions, styleTabConfig } from "./utils/props.js";
+import { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, styleTabConfig, validatePropsForm } from "./utils/props.js";
 import props_default from "./services/props.js";
 import { getEditorConfig, setEditorConfig } from "./utils/config.js";
 import { UndoRedo } from "./utils/undo-redo.js";
@@ -25,9 +25,14 @@ import { useNextFloatBoxPosition } from "./hooks/use-next-float-box-position.js"
 import { useNodeStatus } from "./hooks/use-node-status.js";
 import { getCodeBlockFormConfig } from "./utils/code-block.js";
 import { debug, error, info, log, warn } from "./utils/logger.js";
-import { getCascaderOptionsFromFields, getDisplayField, getFieldType, getFormConfig, getFormValue } from "./utils/data-source/index.js";
+import { getCascaderOptionsFromFields, getDisplayField, getFieldType, getFormConfig, getFormValue, resolveFieldByPath } from "./utils/data-source/index.js";
 import { IdleTask } from "./utils/dep/idle-task.js";
 import { ScrollViewer } from "./utils/scroll-viewer.js";
+import codeBlock_default from "./services/codeBlock.js";
+import dataSource_default from "./services/dataSource.js";
+import { ALL_COND_OPS, editorTypeMatchRules } from "./utils/type-match-rules.js";
+import events_default from "./services/events.js";
+import { EVENT_NAME_VALUE_SEPARATOR, collectEventNameOptionValues, getCompActionAllowedValues, getCompActionOptions, getEventNameAllowedValues, getEventNameOptions, isEventNameCheckStrictly, normalizeCompActionValue } from "./utils/event.js";
 import monaco_editor_default from "./utils/monaco-editor.js";
 import Resizer_default from "./components/Resizer.js";
 import SplitView_default from "./components/SplitView.js";
@@ -49,13 +54,11 @@ import CodeBlockList_default from "./layouts/sidebar/code-block/CodeBlockList.js
 import CodeBlockListPanel_default from "./layouts/sidebar/code-block/CodeBlockListPanel.js";
 import DataSourceAddButton_default from "./layouts/sidebar/data-source/DataSourceAddButton.js";
 import DataSourceConfigPanel_default from "./layouts/sidebar/data-source/DataSourceConfigPanel.js";
+import LayerNodeContent_default from "./layouts/sidebar/layer/LayerNodeContent.js";
 import LayerPanel_default from "./layouts/sidebar/layer/LayerPanel.js";
 import ComponentListPanel_default from "./layouts/sidebar/ComponentListPanel.js";
-import codeBlock_default from "./services/codeBlock.js";
 import componentList_default from "./services/componentList.js";
-import dataSource_default from "./services/dataSource.js";
 import dep_default from "./services/dep.js";
-import events_default from "./services/events.js";
 import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import Editor_default from "./Editor.js";
@@ -87,4 +90,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, numberOptions, openIndexedDB, props_default as propsService, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
+export { ALL_COND_OPS, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EVENT_NAME_VALUE_SEPARATOR, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerNodeContent_default as LayerNodeContent, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, booleanOptions, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectEventNameOptionValues, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, editorTypeMatchRules, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getCompActionAllowedValues, getCompActionOptions, getCondOpOptionsByFieldType, getDefaultConfig, getDisplayField, getEditorConfig, getEventNameAllowedValues, getEventNameOptions, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isEventNameCheckStrictly, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, normalizeCompActionValue, numberOptions, openIndexedDB, props_default as propsService, resolveFieldByPath, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, validatePropsForm, warn };

package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -110,6 +110,7 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const values = ref("");
 		const loading = ref(false);
 		const codeEditorEl = useTemplateRef("codeEditor");
+		let destroyed = false;
 		const resizeObserver = new globalThis.ResizeObserver(throttle(() => {
 			vsEditor?.layout();
 			vsDiffEditor?.layout();
@@ -150,11 +151,17 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
 			}
 		};
+		const isEditorElValid = () => !destroyed && !!codeEditorEl.value && codeEditorEl.value.isConnected;
 		const init = async () => {
-			if (!codeEditorEl.value) return;
-			if (codeEditorEl.value.clientHeight === 0) await nextTick();
+			if (!isEditorElValid()) return;
+			if (codeEditorEl.value.clientHeight === 0) {
+				await nextTick();
+				if (!isEditorElValid()) return;
+			}
 			cachedExtraHeight = null;
 			monaco = await monaco_editor_default();
+			if (!isEditorElValid()) return;
+			const editorEl = codeEditorEl.value;
 			const options = {
 				value: values.value,
 				language: props.language,
@@ -163,19 +170,26 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				...props.options
 			};
 			if (props.type === "diff") {
-				vsDiffEditor = await getEditorConfig("customCreateMonacoDiffEditor")(monaco, codeEditorEl.value, options);
+				vsDiffEditor = await getEditorConfig("customCreateMonacoDiffEditor")(monaco, editorEl, options);
 				vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
 					if (props.autosize) setAutoHeight(getEditorValue());
 				});
 			} else {
-				vsEditor = await getEditorConfig("customCreateMonacoEditor")(monaco, codeEditorEl.value, options);
+				vsEditor = await getEditorConfig("customCreateMonacoEditor")(monaco, editorEl, options);
 				vsEditor.onDidChangeModelContent(() => {
 					if (props.autosize) setAutoHeight(getEditorValue());
 				});
 			}
+			if (destroyed) {
+				vsEditor?.dispose();
+				vsDiffEditor?.dispose();
+				vsEditor = null;
+				vsDiffEditor = null;
+				return;
+			}
 			setEditorValue(props.initValues, props.modifiedValues);
 			emit("initd", vsEditor);
-			codeEditorEl.value.addEventListener("keydown", handleKeyDown);
+			editorEl.addEventListener("keydown", handleKeyDown);
 			if (props.type !== "diff" && props.autoSave) vsEditor?.onDidBlurEditorWidget(() => {
 				const newValue = getEditorValue();
 				if (values.value !== newValue) {
@@ -183,7 +197,7 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
 				}
 			});
-			resizeObserver.observe(codeEditorEl.value);
+			resizeObserver.observe(editorEl);
 		};
 		watch(() => props.initValues, (v, preV) => {
 			if (v !== preV) setEditorValue(props.initValues, props.modifiedValues);
@@ -205,6 +219,7 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			loading.value = false;
 		});
 		onBeforeUnmount(() => {
+			destroyed = true;
 			resizeObserver.disconnect();
 			vsEditor?.dispose();
 			vsDiffEditor?.dispose();

package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js

@@ -33,6 +33,9 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const pageLength = computed(() => editorService.get("pageLength") || 0);
 		const showSrc = computed(() => uiService.get("showSrc"));
 		const columnWidth = computed(() => uiService.get("columnWidth"));
+		const minLeftColumnWidth = computed(() => uiService.get("minLeftColumnWidth"));
+		const minCenterColumnWidth = computed(() => uiService.get("minCenterColumnWidth"));
+		const minRightColumnWidth = computed(() => uiService.get("minRightColumnWidth"));
 		watch(pageLength, () => {
 			splitViewRef.value?.updateWidth();
 		});
@@ -76,13 +79,13 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				renderSlot(_ctx.$slots, "header"),
 				renderSlot(_ctx.$slots, "nav"),
 				renderSlot(_ctx.$slots, "content-before"),
-				showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [createVNode(CodeEditor_default, {
+				showSrc.value ? renderSlot(_ctx.$slots, "src-code", {}, () => [createVNode(CodeEditor_default, {
 					class: "m-editor-content",
 					"editor-custom-type": "m-editor-content",
 					"init-values": root.value,
 					options: unref(codeOptions),
 					onSave: saveCode
-				}, null, 8, ["init-values", "options"])]) : createCommentVNode("v-if", true),
+				}, null, 8, ["init-values", "options"])], void 0, 0) : createCommentVNode("v-if", true),
 				withDirectives(createVNode(SplitView_default, {
 					ref: "splitView",
 					class: "m-editor-content",
@@ -91,13 +94,13 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"right-class": "m-editor-framework-right",
 					left: __props.hideSidebar ? void 0 : columnWidth.value.left,
 					right: columnWidth.value.right,
-					"min-left": __props.hideSidebar ? 0 : unref(200),
-					"min-right": unref(300),
-					"min-center": unref(400),
+					"min-left": __props.hideSidebar ? 0 : minLeftColumnWidth.value,
+					"min-right": minRightColumnWidth.value,
+					"min-center": minCenterColumnWidth.value,
 					width: frameworkRect.value.width,
 					onChange: columnWidthChange
 				}, createSlots({
-					center: withCtx(() => [page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [createVNode(AddPageBox_default, { "disabled-page-fragment": __props.disabledPageFragment }, null, 8, ["disabled-page-fragment"])]), renderSlot(_ctx.$slots, "page-bar", {}, () => [createVNode(PageBar_default, {
+					center: withCtx(() => [page.value ? renderSlot(_ctx.$slots, "workspace", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "empty", {}, () => [createVNode(AddPageBox_default, { "disabled-page-fragment": __props.disabledPageFragment }, null, 8, ["disabled-page-fragment"])], void 0, 1), renderSlot(_ctx.$slots, "page-bar", {}, () => [createVNode(PageBar_default, {
 						"disabled-page-fragment": __props.disabledPageFragment,
 						"page-bar-sort-options": __props.pageBarSortOptions,
 						"filter-function": __props.pageFilterFunction

package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js

@@ -28,6 +28,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		extendState: {},
 		loadConfig: {},
 		width: { default: "900px" },
+		size: {},
 		isConfirm: { type: Boolean },
 		onConfirm: {},
 		selfDiffFieldTypes: {},
@@ -258,6 +259,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						"load-config": __props.loadConfig,
 						"self-diff-field-types": __props.selfDiffFieldTypes,
 						services: props.services,
+						size: props.size,
 						height: "70vh"
 					}, null, 8, [
 						"category",
@@ -269,7 +271,8 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						"extend-state",
 						"load-config",
 						"self-diff-field-types",
-						"services"
+						"services",
+						"size"
 					])) : (openBlock(), createBlock(CodeEditor_default, {
 						key: 2,
 						type: "diff",

package/dist/es/layouts/history-list/composables.js

@@ -181,4 +181,4 @@ var confirmHistoryAction = async (message) => {
 	}
 };
 //#endregion
-export { confirmHistoryAction, describePageGroup, describePageStep, describeStep, formatHistoryFullTime, formatHistoryTime, isHistoryGroupExpanded, isPageStepRevertable, isSingleDiffStepRevertable, opLabel, sourceLabel, toRowGroup };
+export { confirmHistoryAction, describePageGroup, describePageStep, describeStep, formatHistoryFullTime, formatHistoryTime, groupOperator, groupSource, groupTimestamp, isHistoryGroupExpanded, isPageStepRevertable, isSingleDiffStepRevertable, opLabel, sourceLabel, toRowGroup };

package/dist/es/layouts/history-list/useHistoryRevert.js

@@ -48,6 +48,7 @@ var mountHistoryDiffDialog = async (options) => {
 		selfDiffFieldTypes: options.selfDiffFieldTypes,
 		compareFormState: options.compareFormState,
 		width: options.width,
+		size: options.size ?? options.services?.uiService?.get("propsPanelSize"),
 		onClose: options.onClose
 	});
 	if (options.appContext) Object.assign(app._context, options.appContext);
@@ -148,7 +149,8 @@ var useHistoryRevert = (options = {}, services) => {
 			extendState,
 			services,
 			...extra,
-			width: extra?.width ?? dialogWidth
+			width: extra?.width ?? dialogWidth,
+			size: extra?.size
 		});
 		return confirmRevert();
 	};
@@ -275,7 +277,8 @@ var useHistoryRevert = (options = {}, services) => {
 		if (!await runRevert(revertOptions.diffPayload ?? null, {
 			loadConfig: revertOptions.loadConfig,
 			selfDiffFieldTypes: revertOptions.selfDiffFieldTypes,
-			width: revertOptions.width
+			width: revertOptions.width,
+			size: revertOptions.size
 		})) return null;
 		return await revertOptions.revert();
 	};
@@ -289,7 +292,8 @@ var useHistoryRevert = (options = {}, services) => {
 			extendState,
 			services,
 			...extra,
-			width: extra?.width ?? dialogWidth
+			width: extra?.width ?? dialogWidth,
+			size: extra?.size
 		});
 	};
 	return {

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

@@ -1,9 +1,12 @@
+import { validatePropsForm } from "../../utils/props.js";
 import { useServices } from "../../hooks/use-services.js";
 import { useEditorContentHeight } from "../../hooks/use-editor-content-height.js";
 import Icon_default from "../../components/Icon.js";
 import CodeEditor_default from "../CodeEditor.js";
+import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
 import { MForm } from "@tmagic/form";
-import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
+import { TMagicButton, TMagicScrollbar, tMagicMessage } from "@tmagic/design";
+import { filterXSS } from "@tmagic/utils";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
 import { Document } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/props-panel/FormPanel.vue?vue&type=script&setup=true&lang.ts
@@ -30,6 +33,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 services = useServices();
 		const { editorService, uiService } = services;
 		const codeOptions = inject("codeOptions", {});
@@ -53,16 +57,50 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		});
 		const submit = async (v, eventData) => {
 			try {
-				emit("submit", await configFormRef.value?.submitForm(), eventData);
+				const values = await configFormRef.value?.submitForm();
+				emit("submit", values, eventData);
 			} catch (e) {
-				emit("submit-error", e);
+				if (enablePropsFormValidate) emit("submit", v, eventData, e);
+				else emit("submit-error", e);
 			}
 		};
 		const errorHandler = (e) => {
 			emit("form-error", e);
 		};
-		const saveCode = (values) => {
-			emit("submit", props.codeValueKey ? { [props.codeValueKey]: values } : values);
+		/**
+		* 将校验错误文案安全地转为用于弹窗展示的 HTML。
+		*
+		* 文案形如 `字段 -> 主文案\n\n建议`，多条以结构性 `<br>` 拼接。为在保留换行排版的同时
+		* 避免 `${value}`/字段名中可能夹带的 HTML 造成 XSS：先按结构性 `<br>` 拆分，对每段做 HTML
+		* 转义后再把段内换行 `\n` 替换为 `<br>`，最后用 `<br>` 拼回。
+		*/
+		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) {
+				emit("submit", newValues);
+				return;
+			}
+			try {
+				const error = await validatePropsForm({
+					config: props.config,
+					values: newValues,
+					appContext: internalInstance?.appContext ?? null,
+					services,
+					stage: stage.value,
+					typeMatchValid: true,
+					extendState: props.extendState
+				});
+				if (error) tMagicMessage({
+					type: "error",
+					message: formatValidateErrorHtml(error),
+					dangerouslyUseHTMLString: true
+				});
+				emit("submit", newValues, void 0, error ? new Error(error) : void 0);
+			} catch (e) {
+				console.log("validateForm error", e);
+				emit("submit", newValues);
+			}
 		};
 		__expose({
 			configForm: configFormRef,
@@ -81,6 +119,7 @@ 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,
 						"extend-state": __props.extendState,
 						onChange: submit,
 						onError: errorHandler

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

@@ -4,11 +4,12 @@ import { PROPS_PANEL_WIDTH_STORAGE_KEY } from "../../utils/const.js";
 import { useServices } from "../../hooks/use-services.js";
 import Resizer_default from "../../components/Resizer.js";
 import Icon_default from "../../components/Icon.js";
+import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
 import FormPanel_default from "./FormPanel.js";
 import { useStylePanel } from "./use-style-panel.js";
 import { TMagicButton } from "@tmagic/design";
 import { setValueByKeyPath } from "@tmagic/utils";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
 import { Close, Sugar } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/props-panel/PropsPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -32,6 +33,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 values = ref({});
 		const curFormConfig = ref([]);
 		const node = computed(() => editorService.get("node"));
@@ -54,7 +56,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		onBeforeUnmount(() => {
 			propsService.off("props-configs-change", init);
 		});
-		const submit = async (v, eventData) => {
+		const submit = async (v, eventData, error, source = "props") => {
 			try {
 				if (!v.id) v.id = values.value.id;
 				const newValue = {
@@ -72,7 +74,12 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				const historySource = eventData ? "props" : "code";
 				editorService.update(newValue, {
 					changeRecords: eventData?.changeRecords,
-					historySource
+					historySource,
+					...enablePropsFormValidate && error ? { invalidInfo: {
+						id: newValue.id,
+						source,
+						error: error?.message
+					} } : {}
 				});
 			} catch (e) {
 				emit("submit-error", e);
@@ -123,7 +130,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					values: values.value,
 					disabledShowSrc: __props.disabledShowSrc,
 					extendState: __props.extendState,
-					onSubmit: submit,
+					onSubmit: _cache[0] || (_cache[0] = (v, eventData, error) => submit(v, eventData, error, "props")),
 					onSubmitError: errorHandler,
 					onFormError: errorHandler,
 					onMounted: mountedHandler,
@@ -148,14 +155,14 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					values: values.value,
 					disabledShowSrc: __props.disabledShowSrc,
 					extendState: __props.extendState,
-					onSubmit: submit,
+					onSubmit: _cache[2] || (_cache[2] = (v, eventData, error) => submit(v, eventData, error, "style")),
 					onSubmitError: errorHandler,
 					onFormError: errorHandler
 				}, {
-					"props-form-panel-header": withCtx(() => [createElementVNode("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("span", null, "样式", -1)), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
+					"props-form-panel-header": withCtx(() => [createElementVNode("div", _hoisted_2, [_cache[4] || (_cache[4] = createElementVNode("span", null, "样式", -1)), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
 						link: "",
 						size: "small",
-						onClick: _cache[0] || (_cache[0] = ($event) => unref(toggleStylePanel)(false))
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleStylePanel)(false))
 					}, {
 						default: withCtx(() => [createVNode(Icon_default, { icon: unref(Close) }, null, 8, ["icon"])]),
 						_: 1
@@ -170,7 +177,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					key: 2,
 					class: "m-editor-props-panel-style-icon",
 					circle: "",
-					onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleStylePanel)(true))
+					onClick: _cache[3] || (_cache[3] = ($event) => unref(toggleStylePanel)(true))
 				}, {
 					default: withCtx(() => [createVNode(Icon_default, { icon: unref(Sugar) }, null, 8, ["icon"])]),
 					_: 1

package/dist/es/layouts/props-panel/use-style-panel.js

@@ -23,8 +23,9 @@ var useStylePanel = ({ uiService, storageService }, propsPanelWidth) => {
 			columnWidth.center += propsPanelWidth.value;
 		}
 		if (columnWidth.center < 0) {
-			columnWidth.right = columnWidth.right + columnWidth.center - 400;
-			columnWidth.center = 400;
+			const minCenterColumnWidth = uiService.get("minCenterColumnWidth");
+			columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth;
+			columnWidth.center = minCenterColumnWidth;
 			propsPanelWidth.value = columnWidth.right / 2;
 		}
 		storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });

package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -61,6 +61,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const taskLength = computed(() => depService.get("taskLength"));
 		const tipsBarVisible = ref(true);
 		const columnLeftWidth = computed(() => uiService.get("columnWidth")[ColumnLayout.LEFT]);
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		const { height: editorContentHeight } = useEditorContentHeight();
 		const columnLeftHeight = ref(0);
 		const unWatchEditorContentHeight = watch(editorContentHeight, (height) => {
@@ -189,23 +190,17 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					}, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
 						config.$key === "component-list" || config.slots?.componentList ? {
 							name: "component-list",
-							fn: withCtx(({ componentGroupList }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list", {
-								key: 0,
-								componentGroupList
-							}) : config.slots?.componentList ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentList), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(({ componentGroupList }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list", { componentGroupList }, void 0, void 0, 0) : config.slots?.componentList ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentList), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "0"
 						} : void 0,
 						config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
 							name: "component-list-panel-header",
-							fn: withCtx(() => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", {}, void 0, void 0, 0) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "1"
 						} : void 0,
 						config.$key === "component-list" || config.slots?.componentListItem ? {
 							name: "component-list-item",
-							fn: withCtx(({ component }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-								key: 0,
-								component
-							}) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+							fn: withCtx(({ component }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", { component }, void 0, void 0, 0) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
 								key: 1,
 								component
 							}, null, 8, ["component"])) : createCommentVNode("v-if", true)]),
@@ -213,34 +208,30 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerPanelHeader ? {
 							name: "layer-panel-header",
-							fn: withCtx(() => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", {}, void 0, void 0, 0) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "3"
 						} : void 0,
 						config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
 							name: "code-block-panel-header",
-							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", {}, void 0, void 0, 0) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "4"
 						} : void 0,
 						config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
 							name: "code-block-panel-tool",
 							fn: withCtx(({ id, data }) => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
-								key: 0,
 								id,
 								data
-							}) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
+							}, void 0, void 0, 0) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "5"
 						} : void 0,
 						config.$key === "code-block" || config.slots?.codeBlockPanelSearch ? {
 							name: "code-block-panel-search",
-							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-search", { key: 0 }) : config.slots?.codeBlockPanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-search", {}, void 0, void 0, 0) : config.slots?.codeBlockPanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "6"
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerNodeContent ? {
 							name: "layer-node-content",
-							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
-								key: 0,
-								data: nodeData
-							}) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData }, void 0, void 0, 0) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
 								key: 1,
 								data: nodeData
 							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
@@ -248,10 +239,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerNodeLabel ? {
 							name: "layer-node-label",
-							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-label", {
-								key: 0,
-								data: nodeData
-							}) : config.slots?.layerNodeLabel ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData }, void 0, void 0, 0) : config.slots?.layerNodeLabel ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
 								key: 1,
 								data: nodeData
 							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
@@ -259,10 +247,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerNodeTool ? {
 							name: "layer-node-tool",
-							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", {
-								key: 0,
-								data: nodeData
-							}) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, void 0, void 0, 0) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
 								key: 1,
 								data: nodeData
 							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
@@ -270,15 +255,12 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "data-source" || config.slots?.dataSourcePanelTool ? {
 							name: "data-source-panel-tool",
-							fn: withCtx(({ data }) => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", {
-								key: 0,
-								data
-							}) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(({ data }) => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", { data }, void 0, void 0, 0) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "10"
 						} : void 0,
 						config.$key === "data-source" || config.slots?.dataSourcePanelSearch ? {
 							name: "data-source-panel-search",
-							fn: withCtx(() => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-search", { key: 0 }) : config.slots?.dataSourcePanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-search", {}, void 0, void 0, 0) : config.slots?.dataSourcePanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "11"
 						} : void 0
 					]), 1040)) : createCommentVNode("v-if", true)], 2)), [[vShow, [
@@ -301,6 +283,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"onUpdate:height": _cache[2] || (_cache[2] = ($event) => columnLeftHeight.value = $event),
 					width: columnLeftWidth.value,
 					title: config.text,
+					"framework-width": frameworkWidth.value,
 					position: {
 						left: unref(floatBoxStates)[config.$key].left,
 						top: unref(floatBoxStates)[config.$key].top
@@ -317,6 +300,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"height",
 					"width",
 					"title",
+					"framework-width",
 					"position"
 				])) : createCommentVNode("v-if", true)], 64);
 			}), 256))]))], 64);

package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js

@@ -37,10 +37,10 @@ var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const editDialogCloseHandler = () => {
 			if (codeBlockListRef.value) for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) status.selected = false;
 		};
-		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu((id) => {
+		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler, getTarget } = useContentMenu((id) => {
 			codeBlockListRef.value?.deleteCode(id, { historySource: "tree-contextmenu" });
 		});
-		const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block"));
+		const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block", getTarget));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {

package/dist/es/layouts/sidebar/code-block/useContentMenu.js

@@ -6,6 +6,14 @@ var useContentMenu = (deleteCode) => {
 	const eventBus = inject("eventBus");
 	const menuRef = useTemplateRef("menu");
 	let selectId = "";
+	let selectData = null;
+	const getTarget = () => {
+		if (!selectId) return null;
+		return {
+			id: selectId,
+			data: selectData ?? void 0
+		};
+	};
 	const menuData = [
 		{
 			type: "button",
@@ -43,17 +51,24 @@ var useContentMenu = (deleteCode) => {
 		event.preventDefault();
 		if (data.type === "code") {
 			menuRef.value?.show(event);
-			if (data.id) selectId = `${data.id}`;
-			else selectId = "";
+			if (data.id) {
+				selectId = `${data.id}`;
+				selectData = data;
+			} else {
+				selectId = "";
+				selectData = null;
+			}
 		}
 	};
 	const contentMenuHideHandler = () => {
 		selectId = "";
+		selectData = null;
 	};
 	return {
 		menuData,
 		nodeContentMenuHandler,
-		contentMenuHideHandler
+		contentMenuHideHandler,
+		getTarget
 	};
 };
 //#endregion