@tmagic/editor 1.3.0-beta.2 → 1.3.0-beta.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-beta.2",
-    "@tmagic/design": "1.3.0-beta.2",
-    "@tmagic/form": "1.3.0-beta.2",
-    "@tmagic/schema": "1.3.0-beta.2",
-    "@tmagic/stage": "1.3.0-beta.2",
-    "@tmagic/table": "1.3.0-beta.2",
-    "@tmagic/utils": "1.3.0-beta.2",
+    "@tmagic/core": "1.3.0-beta.4",
+    "@tmagic/design": "1.3.0-beta.4",
+    "@tmagic/form": "1.3.0-beta.4",
+    "@tmagic/schema": "1.3.0-beta.4",
+    "@tmagic/stage": "1.3.0-beta.4",
+    "@tmagic/table": "1.3.0-beta.4",
+    "@tmagic/utils": "1.3.0-beta.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-beta.2",
-    "@tmagic/form": "1.3.0-beta.2",
+    "@tmagic/design": "1.3.0-beta.4",
+    "@tmagic/form": "1.3.0-beta.4",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/Editor.vue

@@ -21,8 +21,8 @@
             <slot name="layer-panel-header"></slot>
           </template>
 
-          <template #layer-node-content="{ node, data }">
-            <slot name="layer-node-content" :data="data" :node="node"></slot>
+          <template #layer-node-content="{ data }">
+            <slot name="layer-node-content" :data="data"></slot>
           </template>
 
           <template #component-list-panel-header>
@@ -80,11 +80,13 @@
   </Framework>
 </template>
 
-<script lang="ts">
-import { defineComponent, provide, reactive } from 'vue';
+<script lang="ts" setup>
+import { provide, reactive } from 'vue';
+
+import type { MApp } from '@tmagic/schema';
 
 import Framework from './layouts/Framework.vue';
-import NavMenu from './layouts/NavMenu.vue';
+import TMagicNavMenu from './layouts/NavMenu.vue';
 import PropsPanel from './layouts/PropsPanel.vue';
 import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
@@ -92,7 +94,7 @@ import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
 import dataSourceService from './services/dataSource';
 import depService from './services/dep';
-import editorService from './services/editor';
+import editorService, { type EditorService } from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
 import keybindingService from './services/keybinding';
@@ -100,66 +102,69 @@ import propsService from './services/props';
 import storageService from './services/storage';
 import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
-import editorProps from './editorProps';
+import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type { Services } from './type';
-
-export default defineComponent({
+import type { FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+
+defineSlots<
+  FrameworkSlots &
+    WorkspaceSlots &
+    SidebarSlots &
+    PropsPanelSlots & {
+      workspace(props: { editorService: EditorService }): any;
+      'workspace-content'(props: { editorService: EditorService }): any;
+    }
+>();
+
+defineOptions({
   name: 'MEditor',
-
-  components: {
-    TMagicNavMenu: NavMenu,
-    Sidebar,
-    Workspace,
-    PropsPanel,
-    Framework,
-  },
-
-  props: editorProps,
-
-  emits: ['props-panel-mounted', 'update:modelValue'],
-
-  setup(props, { emit }) {
-    const services: Services = {
-      componentListService,
-      eventsService,
-      historyService,
-      propsService,
-      editorService,
-      uiService,
-      storageService,
-      codeBlockService,
-      depService,
-      dataSourceService,
-      keybindingService,
-    };
-
-    initServiceEvents(props, emit, services);
-    initServiceState(props, services);
-    keybindingService.registe(keybindingConfig);
-    keybindingService.registeEl('global');
-
-    provide('services', services);
-
-    provide('codeOptions', props.codeOptions);
-    provide(
-      'stageOptions',
-      reactive({
-        runtimeUrl: props.runtimeUrl,
-        autoScrollIntoView: props.autoScrollIntoView,
-        render: props.render,
-        moveableOptions: props.moveableOptions,
-        canSelect: props.canSelect,
-        updateDragEl: props.updateDragEl,
-        isContainer: props.isContainer,
-        containerHighlightClassName: props.containerHighlightClassName,
-        containerHighlightDuration: props.containerHighlightDuration,
-        containerHighlightType: props.containerHighlightType,
-        disabledDragStart: props.disabledDragStart,
-      }),
-    );
-
-    return services;
-  },
 });
+
+const emit = defineEmits<{
+  'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
+  'update:modelValue': [value: MApp | null];
+}>();
+
+const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);
+
+const services: Services = {
+  componentListService,
+  eventsService,
+  historyService,
+  propsService,
+  editorService,
+  uiService,
+  storageService,
+  codeBlockService,
+  depService,
+  dataSourceService,
+  keybindingService,
+};
+
+initServiceEvents(props, emit, services);
+initServiceState(props, services);
+keybindingService.registe(keybindingConfig);
+keybindingService.registeEl('global');
+
+provide('services', services);
+
+provide('codeOptions', props.codeOptions);
+provide(
+  'stageOptions',
+  reactive({
+    runtimeUrl: props.runtimeUrl,
+    autoScrollIntoView: props.autoScrollIntoView,
+    render: props.render,
+    moveableOptions: props.moveableOptions,
+    canSelect: props.canSelect,
+    updateDragEl: props.updateDragEl,
+    isContainer: props.isContainer,
+    containerHighlightClassName: props.containerHighlightClassName,
+    containerHighlightDuration: props.containerHighlightDuration,
+    containerHighlightType: props.containerHighlightType,
+    disabledDragStart: props.disabledDragStart,
+  }),
+);
+
+defineExpose(services);
 </script>

package/src/components/ContentMenu.vue

@@ -145,12 +145,16 @@ const show = (e?: MouseEvent) => {
 
 const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
   const menuItem = item as MenuButton;
-  if (typeof item !== 'object' || !menuItem.items?.length) {
+  if (typeof item !== 'object') {
     return;
   }
 
   subMenuData.value = menuItem.items || [];
   setTimeout(() => {
+    if (!visible.value) {
+      return;
+    }
+
     if (menu.value) {
       // 将子菜单放置在按钮右侧，与按钮齐平
       let y = menu.value.offsetTop;

package/src/components/SearchInput.vue

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

package/src/editorProps.ts

@@ -1,8 +1,6 @@
-import type { PropType } from 'vue';
-
 import type { EventOption } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
-import type { DataSourceSchema, MApp, MNode } from '@tmagic/schema';
+import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
@@ -21,145 +19,69 @@ import type {
   StageRect,
 } from './type';
 
-export default {
+export interface EditorProps {
   /** 页面初始值 */
-  modelValue: {
-    type: Object as PropType<MApp>,
-    default: () => ({}),
-    require: true,
-  },
-
-  /** 左侧面板中的组件列表 */
-  componentGroupList: {
-    type: Array as PropType<ComponentGroup[]>,
-    default: () => [],
-  },
-
-  /** 左侧面板中的组件列表 */
-  datasourceList: {
-    type: Array as PropType<DatasourceTypeOption[]>,
-    default: () => [],
-  },
-
+  modelValue?: MApp;
+  /** 左侧面板中的组件类型列表 */
+  componentGroupList?: ComponentGroup[];
+  /** 左侧面板中的数据源类型列表 */
+  datasourceList?: DatasourceTypeOption[];
   /** 左侧面板配置 */
-  sidebar: {
-    type: Object as PropType<SideBarData>,
-  },
-
+  sidebar?: SideBarData;
   /** 顶部工具栏配置 */
-  menu: {
-    type: Object as PropType<MenuBarData>,
-    default: () => ({ left: [], right: [] }),
-  },
-
+  menu?: MenuBarData;
   /** 组件树右键菜单 */
-  layerContentMenu: {
-    type: Array as PropType<(MenuButton | MenuComponent)[]>,
-    default: () => [],
-  },
-
+  layerContentMenu?: (MenuButton | MenuComponent)[];
   /** 画布右键菜单 */
-  stageContentMenu: {
-    type: Array as PropType<(MenuButton | MenuComponent)[]>,
-    default: () => [],
-  },
-
+  stageContentMenu?: (MenuButton | MenuComponent)[];
   /** 中间工作区域中画布渲染的内容 */
-  render: {
-    type: Function as PropType<(stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>>,
-  },
-
+  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 中间工作区域中画布通过iframe渲染时的页面url */
-  runtimeUrl: String,
-
+  runtimeUrl?: string;
   /** 选中时是否自动滚动到可视区域 */
-  autoScrollIntoView: Boolean,
-
+  autoScrollIntoView?: boolean;
   /** 组件的属性配置表单的dsl */
-  propsConfigs: {
-    type: Object as PropType<Record<string, FormConfig>>,
-    default: () => ({}),
-  },
-
+  propsConfigs?: Record<string, FormConfig>;
   /** 添加组件时的默认值 */
-  propsValues: {
-    type: Object as PropType<Record<string, Partial<MNode>>>,
-    default: () => ({}),
-  },
-
+  propsValues?: Record<string, Partial<MNode>>;
   /** 组件联动事件选项列表 */
-  eventMethodList: {
-    type: Object as PropType<Record<string, { events: EventOption[]; methods: EventOption[] }>>,
-    default: () => ({}),
-  },
-
+  eventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
   /** 添加数据源时的默认值 */
-  datasourceValues: {
-    type: Object as PropType<Record<string, Partial<DataSourceSchema>>>,
-    default: () => ({}),
-  },
-
+  datasourceValues?: Record<string, Partial<DataSourceSchema>>;
   /** 数据源的属性配置表单的dsl */
-  datasourceConfigs: {
-    type: Object as PropType<Record<string, FormConfig>>,
-    default: () => ({}),
-  },
-
+  datasourceConfigs?: Record<string, FormConfig>;
+  datasourceEventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
   /** 画布中组件选中框的移动范围 */
-  moveableOptions: {
-    type: [Object, Function] as PropType<
-      MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
-    >,
-  },
-
+  moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   /** 编辑器初始化时默认选中的组件ID */
-  defaultSelected: {
-    type: [Number, String],
-  },
-
-  canSelect: {
-    type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-    default: (el: HTMLElement) => Boolean(el.id),
-  },
-
-  isContainer: {
-    type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-    default: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
-  },
-
-  containerHighlightClassName: {
-    type: String,
-    default: CONTAINER_HIGHLIGHT_CLASS_NAME,
-  },
-
-  containerHighlightDuration: {
-    type: Number,
-    default: 800,
-  },
-
-  containerHighlightType: {
-    type: String as PropType<ContainerHighlightType>,
-    default: ContainerHighlightType.DEFAULT,
-  },
-
-  stageRect: {
-    type: [String, Object] as PropType<StageRect>,
-  },
-
-  codeOptions: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  updateDragEl: {
-    type: Function as PropType<UpdateDragEl>,
-  },
-
-  disabledDragStart: {
-    type: Boolean,
-  },
-
-  extendFormState: {
-    type: Function as PropType<(state: FormState) => Record<string, any> | Promise<Record<string, any>>>,
-  },
+  defaultSelected?: Id;
+  canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
+  isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+  containerHighlightClassName?: string;
+  containerHighlightDuration?: number;
+  containerHighlightType?: ContainerHighlightType;
+  stageRect?: StageRect;
+  codeOptions?: { [key: string]: any };
+  updateDragEl?: UpdateDragEl;
+  disabledDragStart?: boolean;
+  extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}
+
+export const defaultEditorProps = {
+  componentGroupList: () => [],
+  datasourceList: () => [],
+  menu: () => ({ left: [], right: [] }),
+  layerContentMenu: () => [],
+  stageContentMenu: () => [],
+  propsConfigs: () => ({}),
+  propsValues: () => ({}),
+  eventMethodList: () => ({}),
+  datasourceValues: () => ({}),
+  datasourceConfigs: () => ({}),
+  canSelect: (el: HTMLElement) => Boolean(el.id),
+  isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
+  containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
+  containerHighlightDuration: 800,
+  containerHighlightType: ContainerHighlightType.DEFAULT,
+  codeOptions: () => ({}),
 };

package/src/fields/Code.vue

@@ -7,6 +7,7 @@
       ...config.options,
       readOnly: disabled,
     }"
+    :parse="config.parse"
     @save="save"
   ></MagicCodeEditor>
 </template>
@@ -20,14 +21,19 @@ defineOptions({
   name: 'MEditorCode',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string | any];
+}>();
 
 const props = withDefaults(
   defineProps<
     FieldProps<{
       language?: string;
-      options?: Object;
+      options?: {
+        [key: string]: any;
+      };
       height?: string;
+      parse?: boolean;
     }>
   >(),
   {
@@ -35,7 +41,7 @@ const props = withDefaults(
   },
 );
 
-const save = (v: string) => {
+const save = (v: string | any) => {
   props.model[props.name] = v;
   emit('change', v);
 };

package/src/fields/DataSourceFieldSelect.vue

@@ -12,7 +12,9 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import type { FieldProps } from '@tmagic/form';
+import type { CascaderOption, FieldProps } from '@tmagic/form';
+import type { DataSchema } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
@@ -25,21 +27,31 @@ const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
-const cascaderConfig = {
-  type: 'cascader',
-  name: props.name,
-  options: () =>
-    dataSources.value
-      ?.filter((ds) => ds.fields?.length)
-      ?.map((ds) => ({
-        label: ds.title || ds.id,
-        value: ds.id,
-        children: ds.fields?.map((field) => ({
-          label: field.title,
-          value: field.name,
-        })),
-      })) || [],
-};
+const getOptionChildren = (fields: DataSchema[] = []): CascaderOption[] =>
+  fields.map((field) => ({
+    label: field.title || field.name,
+    value: field.name,
+    children: field.type === 'array' ? [] : getOptionChildren(field.fields),
+  }));
+
+const cascaderConfig = computed(() => {
+  const valueIsKey = props.config.value === 'key';
+
+  return {
+    type: 'cascader',
+    name: props.name,
+    checkStrictly: !valueIsKey,
+    text: '',
+    options: () =>
+      dataSources.value
+        ?.filter((ds) => ds.fields?.length)
+        ?.map((ds) => ({
+          label: ds.title || ds.id,
+          value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+          children: getOptionChildren(ds.fields),
+        })) || [],
+  };
+});
 
 const onChangeHandler = (value: any) => {
   emit('change', value);