@tmagic/editor 1.5.12 → 1.5.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.12",
+  "version": "1.5.13",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.12",
-    "@tmagic/form": "1.5.12",
-    "@tmagic/stage": "1.5.12",
-    "@tmagic/table": "1.5.12",
-    "@tmagic/utils": "1.5.12"
+    "@tmagic/design": "1.5.13",
+    "@tmagic/stage": "1.5.13",
+    "@tmagic/form": "1.5.13",
+    "@tmagic/table": "1.5.13",
+    "@tmagic/utils": "1.5.13"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.12"
+    "@tmagic/core": "1.5.13"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CodeBlockEditor.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, Ref, ref, useTemplateRef } from 'vue';
+import { computed, inject, nextTick, Ref, ref, useTemplateRef, watch } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
@@ -95,6 +95,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   submit: [values: CodeBlockContent, eventData: ContainerChangeEventData];
+  close: [];
+  open: [];
 }>();
 
 const { codeBlockService, uiService } = useServices();
@@ -261,6 +263,16 @@ const closedHandler = () => {
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 
+watch(boxVisible, (visible) => {
+  nextTick(() => {
+    if (!visible) {
+      emit('close');
+    } else {
+      emit('open');
+    }
+  });
+});
+
 defineExpose({
   async show() {
     calcBoxPosition();

package/src/components/ContentMenu.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, type Ref, ref, useTemplateRef } from 'vue';
 
 import { useZIndex } from '@tmagic/design';
 
@@ -73,7 +73,7 @@ const menuEl = useTemplateRef<HTMLDivElement>('menu');
 const buttonRefs = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
 const subMenuRef = useTemplateRef<any>('subMenu');
 const visible = ref(false);
-const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
+const subMenuData: Ref<(MenuButton | MenuComponent)[]> = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);
 

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -173,6 +173,7 @@ const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
 };
 
 defineExpose({
+  nodeStatusMap,
   filter: filterTextChangeHandler,
   deleteCode,
 });

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -32,6 +32,8 @@
     :disabled="!editable"
     :content="codeConfig"
     @submit="submitCodeBlockHandler"
+    @close="editDialogCloseHandler"
+    @open="editDialogOpenHandler"
   ></CodeBlockEditor>
 
   <Teleport to="body">
@@ -87,7 +89,7 @@ const { codeBlockService } = useServices();
 
 const editable = computed(() => codeBlockService.getEditStatus());
 
-const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
+const { codeId, codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
 const codeBlockListRef = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
@@ -100,6 +102,22 @@ eventBus?.on('edit-code', (id: string) => {
   editCode(id);
 });
 
+const editDialogOpenHandler = () => {
+  if (codeBlockListRef.value) {
+    for (const [statusId, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
+      status.selected = statusId === codeId.value;
+    }
+  }
+};
+
+const editDialogCloseHandler = () => {
+  if (codeBlockListRef.value) {
+    for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
+      status.selected = false;
+    }
+  }
+};
+
 const {
   nodeContentMenuHandler,
   menuData: contentMenuData,

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, Ref, ref, watchEffect } from 'vue';
+import { inject, nextTick, Ref, ref, watch, watchEffect } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
@@ -48,6 +48,8 @@ const width = defineModel<number>('width', { default: 670 });
 
 const emit = defineEmits<{
   submit: [v: any, eventData: ContainerChangeEventData];
+  close: [];
+  open: [id: string];
 }>();
 
 const { uiService, dataSourceService } = useServices();
@@ -73,6 +75,16 @@ const errorHandler = (error: any) => {
   tMagicMessage.error(error.message);
 };
 
+watch(boxVisible, (visible) => {
+  nextTick(() => {
+    if (!visible) {
+      emit('close');
+    } else if (initValues.value?.id) {
+      emit('open', initValues.value.id);
+    }
+  });
+});
+
 defineExpose({
   show() {
     calcBoxPosition();

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -178,6 +178,7 @@ const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
 };
 
 defineExpose({
+  nodeStatusMap,
   filter: filterTextChangeHandler,
 });
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -45,6 +45,8 @@
     :values="dataSourceValues"
     :title="dialogTitle"
     @submit="submitDataSourceHandler"
+    @close="editDialogCloseHandler"
+    @open="editDialogOpenHandler"
   ></DataSourceConfigPanel>
 
   <Teleport to="body">
@@ -93,6 +95,22 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
+const editDialogOpenHandler = (id: string) => {
+  if (dataSourceList.value) {
+    for (const [statusId, status] of dataSourceList.value.nodeStatusMap.entries()) {
+      status.selected = statusId === id;
+    }
+  }
+};
+
+const editDialogCloseHandler = () => {
+  if (dataSourceList.value) {
+    for (const [, status] of dataSourceList.value.nodeStatusMap.entries()) {
+      status.selected = false;
+    }
+  }
+};
+
 const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },