@tmagic/editor 1.3.15 → 1.4.0-beta.1

package/src/fields/DataSourceInput.vue

@@ -48,7 +48,7 @@ import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
@@ -56,16 +56,16 @@ import type { Services } from '@editor/type';
 import { getDisplayField } from '@editor/utils/data-source';
 
 defineOptions({
-  name: 'MEditorDataSourceInput',
+  name: 'MFieldsDataSourceInput',
 });
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      type: 'data-source-input';
-      name: string;
-      text: string;
-    }>
+    FieldProps<
+      {
+        type: 'data-source-input';
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

package/src/fields/DataSourceMethodSelect.vue

@@ -49,7 +49,7 @@ import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMethodSelect',
+  name: 'MFieldsDataSourceMethodSelect',
 });
 
 const mForm = inject<FormState | undefined>('mForm');

package/src/fields/DataSourceMethods.vue

@@ -24,14 +24,14 @@
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMethods',
+  name: 'MFieldsDataSourceMethods',
 });
 
 const props = withDefaults(
@@ -49,7 +49,7 @@ const emit = defineEmits(['change']);
 
 const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
 
-const methodColumns = [
+const methodColumns: ColumnConfig[] = [
   {
     label: '名称',
     prop: 'name',

package/src/fields/DataSourceMocks.vue

@@ -26,14 +26,14 @@ import { computed, inject, ref } from 'vue';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import type { MockSchema } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import { Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMocks',
+  name: 'MFieldsDataSourceMocks',
 });
 
 const props = withDefaults(
@@ -117,7 +117,7 @@ const formConfig: FormConfig = [
   },
 ];
 
-const columns = [
+const columns: ColumnConfig[] = [
   {
     type: 'expand',
     component: CodeEditor,

package/src/fields/DataSourceSelect.vue

@@ -14,31 +14,19 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
+import { type FieldProps, MSelect, type SelectConfig } from '@tmagic/form';
 
-import { Services } from '../type';
+import type { DataSourceSelect, Services } from '../type';
 
 defineOptions({
-  name: 'MEditorDataSourceSelect',
+  name: 'MFieldsDataSourceSelect',
 });
 
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-select';
-      name: string;
-      text?: string;
-      placeholder?: string;
-      dataSourceType?: string;
-      value?: 'id' | 'value';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
+  disabled: false,
+});
 
 const { dataSourceService } = inject<Services>('services') || {};
 

package/src/fields/EventSelect.vue

@@ -61,7 +61,7 @@ import { ActionType } from '@tmagic/schema';
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorEventSelect',
+  name: 'MFieldsEventSelect',
 });
 
 const props = defineProps<FieldProps<EventSelectConfig>>();

package/src/fields/KeyValue.vue

@@ -63,23 +63,23 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
-  name: 'MEditorKeyValue',
+  name: 'MFieldsKeyValue',
 });
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      type: 'key-value';
-      name: string;
-      text: string;
-      advanced?: boolean;
-    }>
+    FieldProps<
+      {
+        type: 'key-value';
+        advanced?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

package/src/fields/PageFragmentSelect.vue

@@ -26,7 +26,7 @@ import Icon from '@editor/components/Icon.vue';
 import type { PageFragmentSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorPageFragmentSelect',
+  name: 'MFieldsPageFragmentSelect',
 });
 
 const services = inject<Services>('services');

package/src/fields/UISelect.vue

@@ -26,7 +26,7 @@
           :size="size"
           @click="selectNode(val)"
           @mouseenter="highlight(val)"
-          @mouseleave="unhightlight"
+          @mouseleave="unhighlight"
           >{{ `${toName}_${val}` }}</TMagicButton
         >
       </TMagicTooltip>
@@ -46,16 +46,16 @@ import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorUISelect',
+  name: 'MFieldsUISelect',
 });
 
-const props = defineProps<FieldProps<any>>();
+const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
 
 const emit = defineEmits(['change']);
 
@@ -115,7 +115,7 @@ const highlight = throttle((id: Id) => {
   services?.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
-const unhightlight = () => {
+const unhighlight = () => {
   services?.editorService.set('highlightNode', null);
   services?.editorService.get('stage')?.clearHighlight();
   services?.stageOverlayService.get('stage')?.clearHighlight();

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

@@ -54,7 +54,6 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     codeId.value = id;
 
     await nextTick();
-
     codeBlockEditor.value?.show();
   };
 

package/src/index.ts

@@ -73,6 +73,7 @@ export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
+export { default as DataSourceConfigPanel } from './layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
@@ -95,11 +96,11 @@ export default {
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
-    app.component(Editor.name, Editor);
+    app.component(`${Editor.name || 'MEditor'}`, Editor);
+    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-ui-select', uiSelect);
     app.component('m-fields-code-link', CodeLink);
     app.component('m-fields-vs-code', Code);
-    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-code-select', CodeSelect);
     app.component('m-fields-code-select-col', CodeSelectCol);
     app.component('m-fields-event-select', EventSelect);

package/src/layouts/NavMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
+  <div class="m-editor-nav-menu" :style="{ height: `${height}px` }" ref="navMenu">
     <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <ToolButton :data="item" v-for="(item, index) in buttons[key]" :key="index"></ToolButton>
     </div>
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw } from 'vue';
+import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
@@ -178,4 +178,23 @@ const buttons = computed(() => {
   });
   return data;
 });
+
+const resizeObserver = new ResizeObserver(() => {
+  const rect = navMenu.value?.getBoundingClientRect();
+  if (rect) {
+    uiService?.set('navMenuRect', {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+    });
+  }
+});
+const navMenu = ref<HTMLDivElement>();
+onMounted(() => {
+  navMenu.value && resizeObserver.observe(navMenu.value);
+});
+onBeforeUnmount(() => {
+  resizeObserver.disconnect();
+});
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -66,6 +66,11 @@
           <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
         </template>
 
+        <template #code-block-panel-search v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelSearch">
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-search"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelSearch" :is="config.slots.codeBlockPanelSearch" />
+        </template>
+
         <template
           #layer-node-content="{ data: nodeData }"
           v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
@@ -86,11 +91,16 @@
 
         <template
           #data-source-panel-tool="{ data }"
-          v-if="config.$key === 'data-source' || config.slots?.codeBlockPanelTool"
+          v-if="config.$key === 'data-source' || config.slots?.dataSourcePanelTool"
         >
           <slot v-if="config.$key === 'data-source'" name="data-source-panel-tool" :data="data"></slot>
           <component v-else-if="config.slots?.DataSourcePanelTool" :is="config.slots.DataSourcePanelTool" />
         </template>
+
+        <template #data-source-panel-search v-if="config.$key === 'data-source' || config.slots?.dataSourcePanelSearch">
+          <slot v-if="config.$key === 'data-source'" name="data-source-panel-search"></slot>
+          <component v-else-if="config.slots?.dataSourcePanelSearch" :is="config.slots.dataSourcePanelSearch" />
+        </template>
       </component>
     </div>
   </div>
@@ -194,6 +204,11 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '代码编辑',
       component: CodeBlockListPanel,
       slots: {},
+      boxComponentConfig: {
+        props: {
+          slideType: 'box',
+        },
+      },
     },
     'data-source': {
       $key: 'data-source',

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

@@ -18,7 +18,6 @@
     </CodeBlockList>
   </TMagicScrollbar>
 
-  <!-- 代码块编辑区 -->
   <CodeBlockEditor
     v-if="codeConfig"
     ref="codeBlockEditor"

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

@@ -20,11 +20,14 @@
           ></ToolButton>
         </div>
       </TMagicPopover>
+
+      <slot name="data-source-panel-search"></slot>
     </div>
 
     <!-- 数据源列表 -->
     <DataSourceList @edit="editHandler" @remove="removeHandler"></DataSourceList>
   </TMagicScrollbar>
+
   <DataSourceConfigPanel
     ref="editDialog"
     :disabled="!editable"

package/src/services/BaseService.ts

@@ -103,7 +103,7 @@ const doAsyncAction = async (
  * 例如：
  *   Class EditorService extends BaseService {
  *     constructor() {
- *       super(['add']);
+ *       super([ { name: 'add', isAsync: true },]);
  *     }
  *     add(value) { return result; }
  *   };
@@ -131,7 +131,7 @@ const doAsyncAction = async (
  * 例如：
  *   Class EditorService extends BaseService {
  *     constructor() {
- *       super(['add']);
+ *       super([ { name: 'add', isAsync: true },]);
  *     }
  *     add(value) { return result; }
  *   };
@@ -194,6 +194,9 @@ export default class extends EventEmitter {
     });
   }
 
+  /**
+   * @deprecated 请使用usePlugin代替
+   */
   public use(options: Record<string, Function>) {
     Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
       if (typeof method === 'function') this.middleware[methodName].push(method);

package/src/services/codeBlock.ts

@@ -18,16 +18,24 @@
 
 import { reactive } from 'vue';
 import { keys, pick } from 'lodash-es';
+import type { Writable } from 'type-fest';
 
 import type { ColumnConfig } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
-import type { CodeState } from '@editor/type';
+import type { AsyncHookPlugin, CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 import BaseService from './BaseService';
 
+const canUsePluginMethods = {
+  async: ['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds'] as const,
+  sync: [],
+};
+
+type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
+
 class CodeBlock extends BaseService {
   private state = reactive<CodeState>({
     codeDsl: null,
@@ -38,13 +46,7 @@ class CodeBlock extends BaseService {
   });
 
   constructor() {
-    super([
-      { name: 'setCodeDslById', isAsync: true },
-      { name: 'setEditStatus', isAsync: true },
-      { name: 'setCombineIds', isAsync: true },
-      { name: 'setUndeleteableList', isAsync: true },
-      { name: 'deleteCodeDslByIds', isAsync: true },
-    ]);
+    super(canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })));
   }
 
   /**
@@ -243,6 +245,10 @@ class CodeBlock extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+
+  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, CodeBlock>): void {
+    super.usePlugin(options);
+  }
 }
 
 export type CodeBlockService = CodeBlock;

package/src/services/dataSource.ts

@@ -1,12 +1,13 @@
 import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
+import { Writable } from 'type-fest';
 
 import type { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema } from '@tmagic/schema';
-import { guid } from '@tmagic/utils';
+import { guid, toLine } from '@tmagic/utils';
 
-import type { DatasourceTypeOption } from '@editor/type';
+import type { DatasourceTypeOption, SyncHookPlugin } from '@editor/type';
 import { getFormConfig, getFormValue } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
@@ -22,6 +23,27 @@ interface State {
 }
 
 type StateKey = keyof State;
+
+const canUsePluginMethods = {
+  async: [],
+  sync: [
+    'getFormConfig',
+    'setFormConfig',
+    'getFormValue',
+    'setFormValue',
+    'getFormEvent',
+    'setFormEvent',
+    'getFormMethod',
+    'setFormMethod',
+    'add',
+    'update',
+    'remove',
+    'createId',
+  ] as const,
+};
+
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
+
 class DataSource extends BaseService {
   private state = reactive<State>({
     datasourceTypeList: [],
@@ -34,20 +56,7 @@ class DataSource extends BaseService {
   });
 
   constructor() {
-    super([
-      { name: 'getFormConfig', isAsync: false },
-      { name: 'setFormConfig', isAsync: false },
-      { name: 'getFormValue', isAsync: false },
-      { name: 'setFormValue', isAsync: false },
-      { name: 'getFormEvent', isAsync: false },
-      { name: 'setFormEvent', isAsync: false },
-      { name: 'getFormMethod', isAsync: false },
-      { name: 'setFormMethod', isAsync: false },
-      { name: 'add', isAsync: false },
-      { name: 'update', isAsync: false },
-      { name: 'remove', isAsync: false },
-      { name: 'createId', isAsync: false },
-    ]);
+    super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
   }
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -59,35 +68,35 @@ class DataSource extends BaseService {
   }
 
   public getFormConfig(type = 'base') {
-    return getFormConfig(type, this.get('configs'));
+    return getFormConfig(toLine(type), this.get('configs'));
   }
 
   public setFormConfig(type: string, config: FormConfig) {
-    this.get('configs')[type] = config;
+    this.get('configs')[toLine(type)] = config;
   }
 
   public getFormValue(type = 'base') {
-    return getFormValue(type, this.get('values')[type]);
+    return getFormValue(toLine(type), this.get('values')[type]);
   }
 
   public setFormValue(type: string, value: Partial<DataSourceSchema>) {
-    this.get('values')[type] = value;
+    this.get('values')[toLine(type)] = value;
   }
 
   public getFormEvent(type = 'base') {
-    return this.get('events')[type] || [];
+    return this.get('events')[toLine(type)] || [];
   }
 
   public setFormEvent(type: string, value: EventOption[] = []) {
-    this.get('events')[type] = value;
+    this.get('events')[toLine(type)] = value;
   }
 
   public getFormMethod(type = 'base') {
-    return this.get('methods')[type] || [];
+    return this.get('methods')[toLine(type)] || [];
   }
 
   public setFormMethod(type: string, value: EventOption[] = []) {
-    this.get('methods')[type] = value;
+    this.get('methods')[toLine(type)] = value;
   }
 
   public add(config: DataSourceSchema) {
@@ -123,6 +132,10 @@ class DataSource extends BaseService {
     this.emit('remove', id);
   }
 
+  public createId(): string {
+    return `ds_${guid()}`;
+  }
+
   public getDataSourceById(id: string) {
     return this.get('dataSources').find((ds) => ds.id === id);
   }
@@ -137,8 +150,8 @@ class DataSource extends BaseService {
     this.removeAllPlugins();
   }
 
-  private createId(): string {
-    return `ds_${guid()}`;
+  public usePlugin(options: SyncHookPlugin<SyncMethodName, DataSource>): void {
+    super.usePlugin(options);
   }
 }