@tmagic/editor 1.4.3 → 1.4.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.3",
+  "version": "1.4.5",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -40,16 +40,7 @@
     "typescript"
   ],
   "dependencies": {
-    "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.4.3",
-    "@tmagic/dep": "1.4.3",
-    "@tmagic/design": "1.4.3",
-    "@tmagic/form": "1.4.3",
-    "@tmagic/schema": "1.4.3",
-    "@tmagic/stage": "1.4.3",
-    "@tmagic/table": "1.4.3",
-    "@tmagic/utils": "1.4.3",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -57,37 +48,41 @@
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.47.0",
-    "moveable": "^0.51.1",
+    "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.4.21"
+    "@tmagic/dep": "1.4.5",
+    "@tmagic/table": "1.4.5"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.4.3",
-    "@tmagic/form": "1.4.3",
-    "monaco-editor": "^0.47.0",
-    "vue": "^3.4.21"
+    "monaco-editor": "^0.48.0",
+    "vue": "^3.4.27",
+    "@tmagic/design": "1.4.5",
+    "@tmagic/form": "1.4.5",
+    "@tmagic/schema": "1.4.5",
+    "@tmagic/stage": "1.4.5",
+    "@tmagic/utils": "1.4.5",
+    "@tmagic/core": "1.4.5"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.4.21",
-    "@vue/test-utils": "^2.4.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.35.1",
+    "sass": "^1.77.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
     "typescript": "^5.4.2",
-    "vite": "^5.1.6",
-    "vue-tsc": "^2.0.6"
+    "vite": "^5.2.11",
+    "vue-tsc": "^2.0.16"
   },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "clear:type": "rimraf ./types",
-    "type:check": "vue-tsc --noEmit"
+    "check:type": "vue-tsc --noEmit --project tsconfig.build.json"
   }
 }

package/src/Editor.vue

@@ -81,6 +81,7 @@
       <slot name="props-panel">
         <PropsPanel
           :extend-state="extendFormState"
+          :disabled-show-src="disabledShowSrc"
           @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
           @form-error="(e: any) => $emit('props-form-error', e)"
           @submit-error="(e: any) => $emit('props-submit-error', e)"
@@ -109,6 +110,8 @@
 </template>
 
 <script lang="ts" setup>
+import { EventEmitter } from 'events';
+
 import { provide } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
@@ -133,7 +136,7 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type { FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
 
 defineSlots<
   FrameworkSlots &
@@ -202,5 +205,7 @@ provide('services', services);
 provide('codeOptions', props.codeOptions);
 provide('stageOptions', stageOptions);
 
+provide<EventBus>('eventBus', new EventEmitter());
+
 defineExpose(services);
 </script>

package/src/editorProps.ts

@@ -80,6 +80,8 @@ export interface EditorProps {
   disabledPageFragment?: boolean;
   /** 禁用双击在浮层中单独编辑选中组件 */
   disabledStageOverlay?: boolean;
+  /** 禁用属性配置面板右下角显示源码的按钮 */
+  disabledShowSrc?: boolean;
   /** 中间工作区域中画布渲染的内容 */
   render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
@@ -101,6 +103,7 @@ export const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  disabledShowSrc: false,
   componentGroupList: () => [],
   datasourceList: () => [],
   menu: () => ({ left: [], right: [] }),

package/src/fields/CodeSelectCol.vue

@@ -2,15 +2,23 @@
   <div class="m-fields-code-select-col">
     <div class="code-select-container">
       <!-- 代码块下拉框 -->
-      <m-form-container
+      <MContainer
         class="select"
         :config="selectConfig"
         :model="model"
         :size="size"
         @change="onParamsChangeHandler"
-      ></m-form-container>
+      ></MContainer>
+
       <!-- 查看/编辑按钮 -->
-      <Icon v-if="model[name]" class="icon" :icon="!notEditable ? Edit : View" @click="editCode(model[name])"></Icon>
+      <TMagicButton
+        v-if="model[name] && hasCodeBlockSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
+        @click="editCode(model[name])"
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
     </div>
 
     <!-- 参数填写框 -->
@@ -23,14 +31,6 @@
       :params-config="paramsConfig"
       @change="onParamsChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +39,14 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
+import { TMagicButton } from '@tmagic/design';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
-import Icon from '@editor/components/Icon.vue';
-import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
+import MIcon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, CodeSelectColConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsCodeSelectCol',
@@ -54,13 +54,19 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasCodeBlockSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
+);
+
 /**
  * 根据代码块id获取代码块参数配置
  * @param codeId 代码块ID
@@ -127,5 +133,7 @@ const onParamsChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
+const editCode = (id: string) => {
+  eventBus?.emit('edit-code', id);
+};
 </script>

package/src/fields/DataSourceFieldSelect.vue

@@ -1,7 +1,6 @@
 <template>
-  <div style="width: 100%; display: flex; align-items: center">
+  <div class="m-fields-data-source-field-select">
     <component
-      style="width: 100%"
       :is="tagName"
       :config="showDataSourceFieldSelect || !config.fieldConfig ? cascaderConfig : config.fieldConfig"
       :model="model"
@@ -14,13 +13,15 @@
       :prop="`${prop}${prop ? '.' : ''}${name}`"
       @change="onChangeHandler"
     ></component>
+
     <TMagicButton
-      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId"
-      style="margin-left: 5px"
+      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
       :size="size"
       @click="editHandler(selectedDataSourceId)"
-      ><MIcon :icon="Edit"></MIcon
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
     ></TMagicButton>
+
     <TMagicButton
       v-if="config.fieldConfig"
       style="margin-left: 5px"
@@ -29,43 +30,41 @@
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
       ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
-
-    <DataSourceConfigPanel
-      ref="editDialog"
-      :disabled="!editable"
-      :values="dataSourceValues"
-      :title="dialogTitle"
-      @submit="submitDataSourceHandler"
-    ></DataSourceConfigPanel>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, resolveComponent, watch } from 'vue';
-import { Coin, Edit } from '@element-plus/icons-vue';
+import { Coin, Edit, View } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
-import { MCascader } from '@tmagic/form';
-import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
+import type { CascaderConfig, FieldProps, FormState } from '@tmagic/form';
+import { filterFunction, MCascader } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
-import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsDataSourceFieldSelect',
 });
 
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
 const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const selectedDataSourceId = computed(() => {
   const value = props.model[props.name];
   if (!Array.isArray(value) || !value.length) {
@@ -77,43 +76,6 @@ const selectedDataSourceId = computed(() => {
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
-const getOptionChildren = (
-  fields: DataSchema[] = [],
-  dataSourceFieldType: DataSourceFieldType[] = ['any'],
-): CascaderOption[] => {
-  const child: CascaderOption[] = [];
-  fields.forEach((field) => {
-    if (!dataSourceFieldType.length) {
-      dataSourceFieldType.push('any');
-    }
-
-    const children = getOptionChildren(field.fields, dataSourceFieldType);
-
-    const item = {
-      label: field.title || field.name,
-      value: field.name,
-      children,
-    };
-
-    const fieldType = field.type || 'any';
-    if (dataSourceFieldType.includes('any') || dataSourceFieldType.includes(fieldType)) {
-      child.push(item);
-      return;
-    }
-
-    if (!dataSourceFieldType.includes(fieldType) && !['array', 'object', 'any'].includes(fieldType)) {
-      return;
-    }
-
-    if (!children.length && ['object', 'array', 'any'].includes(field.type || '')) {
-      return;
-    }
-
-    child.push(item);
-  });
-  return child;
-};
-
 const cascaderConfig = computed<CascaderConfig>(() => {
   const valueIsKey = props.config.value === 'key';
 
@@ -126,7 +88,7 @@ const cascaderConfig = computed<CascaderConfig>(() => {
         dataSources.value?.map((ds) => ({
           label: ds.title || ds.id,
           value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-          children: getOptionChildren(ds.fields, props.config.dataSourceFieldType),
+          children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType),
         })) || [];
       return options.filter((option) => option.children.length);
     },
@@ -181,7 +143,7 @@ const onChangeHandler = (value: any) => {
   emit('change', value);
 };
 
-const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
-  services?.dataSourceService,
-);
+const editHandler = (id: string) => {
+  eventBus?.emit('edit-data-source', id);
+};
 </script>

package/src/fields/DataSourceMethodSelect.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="m-fields-data-source-method-select">
     <div class="data-source-method-select-container">
-      <m-form-container
+      <MContainer
         class="select"
         :config="cascaderConfig"
         :model="model"
+        :size="size"
         @change="onChangeHandler"
-      ></m-form-container>
-      <Icon
-        v-if="model[name] && isCustomMethod"
-        class="icon"
-        :icon="!notEditable ? Edit : View"
+      ></MContainer>
+
+      <TMagicButton
+        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
         @click="editCodeHandler"
-      ></Icon>
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
     </div>
 
     <CodeParams
@@ -24,14 +28,6 @@
       :params-config="paramsConfig"
       @change="onChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +35,14 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
-import type { CodeBlockContent, Id } from '@tmagic/schema';
+import { TMagicButton } from '@tmagic/design';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
-import Icon from '@editor/components/Icon.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
+import MIcon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceMethodSelect',
@@ -54,6 +50,8 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
+
 const emit = defineEmits(['change']);
 
 const dataSourceService = services?.dataSourceService;
@@ -62,6 +60,10 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>
   disabled: false,
 });
 
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
 const dataSources = computed(() => dataSourceService?.get('dataSources'));
@@ -139,21 +141,13 @@ const onChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
-
 const editCodeHandler = () => {
-  const [id, name] = props.model[props.name];
+  const [id] = props.model[props.name];
 
   const dataSource = dataSourceService?.getDataSourceById(id);
 
   if (!dataSource) return;
 
-  editCode(dataSource, name);
-
-  setParamsConfig([id, name]);
-};
-
-const submitCodeBlockHandler = (value: CodeBlockContent) => {
-  submitCode(value);
+  eventBus?.emit('edit-data-source', id);
 };
 </script>

package/src/fields/DataSourceSelect.vue

@@ -1,22 +1,36 @@
 <template>
-  <MSelect
-    :model="model"
-    :name="name"
-    :size="size"
-    :prop="prop"
-    :disabled="disabled"
-    :config="selectConfig"
-    :last-values="lastValues"
-    @change="changeHandler"
-  ></MSelect>
+  <div class="m-fields-data-source-select">
+    <MSelect
+      :model="model"
+      :name="name"
+      :size="size"
+      :prop="prop"
+      :disabled="disabled"
+      :config="selectConfig"
+      :last-values="lastValues"
+      @change="changeHandler"
+    ></MSelect>
+
+    <TMagicButton
+      v-if="model[name] && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
 
-import { type FieldProps, MSelect, type SelectConfig } from '@tmagic/form';
+import { TMagicButton } from '@tmagic/design';
+import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
 
-import type { DataSourceSelect, Services } from '../type';
+import MIcon from '@editor/components/Icon.vue';
+import type { DataSourceSelect, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceSelect',
@@ -28,10 +42,18 @@ const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
   disabled: false,
 });
 
-const { dataSourceService } = inject<Services>('services') || {};
+const mForm = inject<FormState | undefined>('mForm');
+const { dataSourceService, uiService } = inject<Services>('services') || {};
+const eventBus = inject<EventBus>('eventBus');
 
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const selectConfig = computed<SelectConfig>(() => {
   const { type, dataSourceType, value, ...config } = props.config;
 
@@ -59,4 +81,18 @@ const selectConfig = computed<SelectConfig>(() => {
 const changeHandler = (value: any) => {
   emit('change', value);
 };
+
+const editHandler = () => {
+  const value = props.model[props.name];
+
+  if (!value) return;
+
+  const id = typeof value === 'string' ? value : value.dataSourceId;
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  eventBus?.emit('edit-data-source', id);
+};
 </script>