@tmagic/editor 1.5.12 → 1.5.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.12",
+  "version": "1.5.14",
   "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.14",
+    "@tmagic/form": "1.5.14",
+    "@tmagic/table": "1.5.14",
+    "@tmagic/stage": "1.5.14",
+    "@tmagic/utils": "1.5.14"
   },
   "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.14"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -142,7 +142,7 @@ import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
 import dataSourceService from './services/dataSource';
 import depService from './services/dep';
-import editorService, { type EditorService } from './services/editor';
+import editorService from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
 import keybindingService from './services/keybinding';
@@ -153,25 +153,9 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type {
-  EventBus,
-  FrameworkSlots,
-  PropsPanelSlots,
-  Services,
-  SidebarSlots,
-  StageOptions,
-  WorkspaceSlots,
-} from './type';
-
-defineSlots<
-  FrameworkSlots &
-    WorkspaceSlots &
-    SidebarSlots &
-    PropsPanelSlots & {
-      workspace(props: { editorService: EditorService }): any;
-      'workspace-content'(props: { editorService: EditorService }): any;
-    }
->();
+import type { EditorSlots, EventBus, Services, StageOptions } from './type';
+
+defineSlots<EditorSlots>();
 
 defineOptions({
   name: 'MEditor',

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();
@@ -231,7 +233,7 @@ const changeHandler = (values: CodeBlockContent) => {
   changedValue.value = values;
 };
 
-const beforeClose = (done: (cancel?: boolean) => void) => {
+const beforeClose = (done: (_cancel?: boolean) => void) => {
   if (!changedValue.value) {
     done();
     return;
@@ -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/components/FloatingBox.vue

@@ -39,7 +39,7 @@ const props = withDefaults(
   defineProps<{
     position?: Position;
     title?: string;
-    beforeClose?: (done: (cancel?: boolean) => void) => void;
+    beforeClose?: (_done: (_cancel?: boolean) => void) => void;
   }>(),
   {
     title: '',

package/src/components/ScrollBar.vue

@@ -93,7 +93,9 @@ const scrollBy = (delta: number) => {
   position: absolute;
   background-color: transparent;
   opacity: 0.3;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
 
   .m-editor-scroll-bar-thumb {
     background-color: #aaa;
@@ -108,7 +110,9 @@ const scrollBy = (delta: number) => {
 
     .m-editor-scroll-bar-thumb {
       height: 6px;
-      transition: background-color 0.2s linear, height 0.2s ease-in-out;
+      transition:
+        background-color 0.2s linear,
+        height 0.2s ease-in-out;
       bottom: 2px;
     }
   }
@@ -120,7 +124,9 @@ const scrollBy = (delta: number) => {
 
     .m-editor-scroll-bar-thumb {
       width: 6px;
-      transition: background-color 0.2s linear, width 0.2s ease-in-out;
+      transition:
+        background-color 0.2s linear,
+        width 0.2s ease-in-out;
       right: 2px;
     }
   }

package/src/components/SearchInput.vue

@@ -27,7 +27,7 @@ const emit = defineEmits(['search']);
 
 const filterText = ref('');
 
-let timer: NodeJS.Timeout | null = null;
+let timer: ReturnType<typeof setTimeout> | null = null;
 const filterTextChangeHandler = () => {
   timer && clearTimeout(timer);
   timer = setTimeout(() => {

package/src/components/Tree.vue

@@ -38,9 +38,9 @@ import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import TreeNode from './TreeNode.vue';
 
 defineSlots<{
-  'tree-node-content'(props: { data: TreeNodeData }): any;
-  'tree-node-label'(props: { data: TreeNodeData }): any;
-  'tree-node-tool'(props: { data: TreeNodeData }): any;
+  'tree-node-content'(_props: { data: TreeNodeData }): any;
+  'tree-node-label'(_props: { data: TreeNodeData }): any;
+  'tree-node-tool'(_props: { data: TreeNodeData }): any;
 }>();
 
 defineOptions({

package/src/components/TreeNode.vue

@@ -72,9 +72,9 @@ import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
 
 defineSlots<{
-  'tree-node-label'(props: { data: TreeNodeData }): any;
-  'tree-node-tool'(props: { data: TreeNodeData }): any;
-  'tree-node-content'(props: { data: TreeNodeData }): any;
+  'tree-node-label'(_props: { data: TreeNodeData }): any;
+  'tree-node-tool'(_props: { data: TreeNodeData }): any;
+  'tree-node-content'(_props: { data: TreeNodeData }): any;
 }>();
 
 defineOptions({

package/src/fields/CodeSelect.vue

@@ -80,13 +80,11 @@ const codeConfig = computed<GroupListConfig>(() => ({
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
           ],
           defaultValue: 'code',
-          onChange: (mForm, v: HookCodeType, { model, prop, changeRecords }) => {
+          onChange: (_mForm, v: HookCodeType, { setModel }) => {
             if (v === HookCodeType.DATA_SOURCE_METHOD) {
-              model.codeId = [];
-              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: [] });
+              setModel('codeId', []);
             } else {
-              model.codeId = '';
-              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: '' });
+              setModel('codeId', '');
             }
 
             return v;
@@ -97,7 +95,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !codeBlockService.getEditStatus(),
         },
         {
@@ -105,7 +103,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !dataSourceService.get('editable'),
         },
       ],

package/src/fields/CodeSelectCol.vue

@@ -121,24 +121,28 @@ const selectConfig = {
     }
     return [];
   },
-  onChange: (formState: any, codeId: Id, { model }: any) => {
+  onChange: (formState: any, codeId: Id, { setModel, model }: any) => {
     // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
     paramsConfig.value = getParamItemsConfig(codeId);
 
     if (paramsConfig.value.length) {
-      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+      setModel('params', createValues(formState, paramsConfig.value, {}, model.params));
     } else {
-      model.params = {};
+      setModel('params', {});
     }
 
     return codeId;
   },
 };
 
-const onCodeIdChangeHandler = (value: any) => {
+const onCodeIdChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
   props.model.params = value.params;
+
   emit('change', props.model, {
-    changeRecords: [
+    changeRecords: eventData.changeRecords?.map((item) => ({
+      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
+      value: item.value,
+    })) || [
       {
         propPath: props.prop,
         value: value[props.name],

package/src/fields/DataSourceFields.vue

@@ -65,6 +65,7 @@ import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';
 import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
 import { useServices } from '@editor/hooks/use-services';
+import { error } from '@editor/utils/logger';
 
 defineOptions({
   name: 'MFieldsDataSourceFields',
@@ -144,6 +145,7 @@ const fieldColumns: ColumnConfig[] = [
       try {
         return JSON.stringify(row.defaultValue);
       } catch (e) {
+        error(e);
         return row.defaultValue;
       }
     },
@@ -193,9 +195,9 @@ const dataSourceFieldsConfig: FormConfig = [
       { text: 'null', value: 'null' },
       { text: 'any', value: 'any' },
     ],
-    onChange: (formState, v: string, { model }) => {
+    onChange: (_formState, v: string, { setModel }) => {
       if (!['any', 'array', 'object'].includes(v)) {
-        model.fields = [];
+        setModel('fields', []);
       }
       return v;
     },

package/src/fields/DataSourceInput.vue

@@ -179,7 +179,11 @@ const curCharIsDot = (dotIndex: number) => dotIndex > -1 && dotIndex === getSele
  * @param leftCurlyBracketIndex 左大括号字符索引
  * @param cb 建议的方法
  */
-const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (data: { value: string }[]) => void) => {
+const dsQuerySearch = (
+  queryString: string,
+  leftCurlyBracketIndex: number,
+  cb: (_data: { value: string }[]) => void,
+) => {
   let result: DataSourceSchema[] = [];
 
   if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
@@ -211,7 +215,7 @@ const fieldQuerySearch = (
   queryString: string,
   leftAngleIndex: number,
   dotIndex: number,
-  cb: (data: { value: string }[]) => void,
+  cb: (_data: { value: string }[]) => void,
 ) => {
   let result: DataSchema[] = [];
 
@@ -272,7 +276,7 @@ const fieldQuerySearch = (
  * @param queryString 当前输入框内的字符串
  * @param cb 建议回调
  */
-const querySearch = (queryString: string, cb: (data: { value: string }[]) => void) => {
+const querySearch = (queryString: string, cb: (_data: { value: string }[]) => void) => {
   inputText = queryString;
 
   const selectionStart = getSelectionStart();

package/src/fields/DataSourceMethodSelect.vue

@@ -37,7 +37,14 @@ import { Edit, View } from '@element-plus/icons-vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import {
+  createValues,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MContainer,
+  type OnChangeHandlerData,
+} from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -92,14 +99,18 @@ const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']
 
 const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name || 'dataSourceMethod']));
 
-const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) => {
+const setParamsConfig = (
+  dataSourceMethod: [Id, string],
+  formState: any = {},
+  setModel: OnChangeHandlerData['setModel'],
+) => {
   // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
   paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
 
   if (paramsConfig.value.length) {
-    props.model.params = createValues(formState, paramsConfig.value, {}, props.model.params);
+    setModel('params', createValues(formState, paramsConfig.value, {}, props.model.params));
   } else {
-    props.model.params = {};
+    setModel('params', {});
   }
 };
 
@@ -125,8 +136,8 @@ const cascaderConfig = computed(() => ({
   name: props.name,
   options: methodsOptions.value,
   disable: props.disabled,
-  onChange: (formState: any, dataSourceMethod: [Id, string]) => {
-    setParamsConfig(dataSourceMethod, formState);
+  onChange: (formState: any, dataSourceMethod: [Id, string], { setModel }: OnChangeHandlerData) => {
+    setParamsConfig(dataSourceMethod, formState, setModel);
 
     return dataSourceMethod;
   },

package/src/fields/DataSourceMethods.vue

@@ -80,7 +80,7 @@ const methodColumns: ColumnConfig[] = [
       {
         text: '编辑',
         handler: (method: CodeBlockContent, index: number) => {
-          let codeContent = method.content || `({ params, dataSource, app }) => {\n  // place your code here\n}`;
+          let codeContent = method.content || '({ params, dataSource, app }) => {\n  // place your code here\n}';
 
           if (typeof codeContent !== 'string') {
             codeContent = codeContent.toString();
@@ -114,7 +114,7 @@ const methodColumns: ColumnConfig[] = [
 const createCodeHandler = () => {
   codeConfig.value = {
     name: '',
-    content: `({ params, dataSource, app, flowState }) => {\n  // place your code here\n}`,
+    content: '({ params, dataSource, app, flowState }) => {\n  // place your code here\n}',
     params: [],
   };
 
@@ -130,7 +130,7 @@ const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventDa
     // 在保存的时候转换代码内容
     const parseDSL = getEditorConfig('parseDSL');
     if (typeof value.content === 'string') {
-      value.content = parseDSL<(...args: any[]) => any>(value.content);
+      value.content = parseDSL<(..._args: any[]) => any>(value.content);
     }
   }
   if (editIndex > -1) {

package/src/fields/EventSelect.vue

@@ -63,6 +63,7 @@ import type {
   ContainerChangeEventData,
   FieldProps,
   FormState,
+  OnChangeHandlerData,
   PanelConfig,
 } from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
@@ -202,8 +203,8 @@ const targetCompConfig = computed(() => {
     text: '联动组件',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
-    onChange: (MForm: FormState, v: string, { model }: any) => {
-      model.method = '';
+    onChange: (MForm: FormState, v: string, { setModel }: OnChangeHandlerData) => {
+      setModel('method', '');
       return v;
     },
   };

package/src/fields/UISelect.vue

@@ -70,7 +70,7 @@ const uiSelectMode = ref(false);
 const cancelHandler = () => {
   uiService.set('uiSelectMode', false);
   uiSelectMode.value = false;
-  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
+  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as any);
 };
 
 const clickHandler = ({ detail }: Event & { detail: HTMLElement | MNode }) => {
@@ -97,7 +97,7 @@ const toName = computed(() => {
 const startSelect = () => {
   uiService.set('uiSelectMode', true);
   uiSelectMode.value = true;
-  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
+  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as any);
 };
 
 const deleteHandler = () => {

package/src/hooks/use-code-block-edit.ts

@@ -16,7 +16,7 @@ export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService'])
   const createCodeBlock = async () => {
     codeConfig.value = {
       name: '',
-      content: `({app, params, flowState}) => {\n  // place your code here\n}`,
+      content: '({app, params, flowState}) => {\n  // place your code here\n}',
       params: [],
     };
 

package/src/index.ts

@@ -122,7 +122,6 @@ export default {
     app.use(formPlugin, opt || {});
     app.use(tablePlugin);
 
-    // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);