@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.1

package/types/services/props.d.ts

@@ -7,120 +7,15 @@ declare class Props extends BaseService {
     setPropsConfigs(configs: Record<string, FormConfig>): void;
     fillConfig(config: FormConfig): Promise<{
         type: string;
-        items: ({
+        items: {
+            [x: string]: any;
+            status?: string | undefined;
             title: string;
-            labelWidth: string;
-            items: import("@tmagic/form").ChildConfig[];
-            lazy?: undefined;
-        } | {
-            title: string;
-            labelWidth: string;
-            items: {
-                name: string;
-                items: ({
-                    type: string;
-                    legend: string;
-                    items: ({
-                        name: string;
-                        type: string;
-                        activeValue: string; /**
-                         * 为指定类型组件设置组件属性表单配置
-                         * @param type 组件类型
-                         * @param config 组件属性表单配置
-                         */
-                        inactiveValue: string;
-                        defaultValue: string;
-                        text: string;
-                        disabled?: undefined;
-                    } | {
-                        name: string;
-                        text: string;
-                        type?: undefined;
-                        activeValue?: undefined; /**
-                         * 为指定类型组件设置组件属性表单配置
-                         * @param type 组件类型
-                         * @param config 组件属性表单配置
-                         */
-                        inactiveValue?: undefined;
-                        defaultValue?: undefined;
-                        disabled?: undefined;
-                    } | {
-                        name: string;
-                        text: string;
-                        disabled: (vm: import("@tmagic/form").FormState, { model }: any) => boolean;
-                        type?: undefined;
-                        activeValue?: undefined; /**
-                         * 为指定类型组件设置组件属性表单配置
-                         * @param type 组件类型
-                         * @param config 组件属性表单配置
-                         */
-                        inactiveValue?: undefined;
-                        defaultValue?: undefined;
-                    })[];
-                    name?: undefined;
-                } | {
-                    type: string;
-                    legend: string;
-                    items: ({
-                        name: string;
-                        text: string;
-                        type?: undefined;
-                        defaultValue?: undefined;
-                        options?: undefined;
-                    } | {
-                        name: string;
-                        text: string;
-                        type: string;
-                        defaultValue?: undefined;
-                        options?: undefined;
-                    } | {
-                        name: string;
-                        text: string;
-                        type: string;
-                        defaultValue: string;
-                        options: {
-                            text: string;
-                            value: string;
-                        }[];
-                    } | {
-                        name: string;
-                        text: string;
-                        defaultValue: string;
-                        type?: undefined;
-                        options?: undefined;
-                    })[];
-                    name?: undefined;
-                } | {
-                    type: string;
-                    legend: string;
-                    name: string;
-                    items: {
-                        name: string;
-                        text: string;
-                    }[];
-                })[];
-            }[];
-            lazy?: undefined;
-        } | {
-            title: string;
-            items: {
-                name: string;
-                type: string;
-                labelWidth: number;
-            }[];
-            labelWidth?: undefined;
-            lazy?: undefined;
-        } | {
-            title: string;
-            lazy: boolean;
-            items: {
-                name: string;
-                text: string;
-                labelWidth: string;
-                type: string;
-            }[];
-            labelWidth?: undefined;
-        })[];
+            lazy?: boolean | undefined;
+            labelWidth?: string | undefined;
+            items: FormConfig;
+            onTabClick?: ((mForm: import("@tmagic/form").FormState | undefined, tab: any, data: any) => void) | undefined;
+        }[];
     }[]>;
     /**
      * 为指定类型组件设置组件属性表单配置
@@ -134,13 +29,13 @@ declare class Props extends BaseService {
      * @returns 组件属性表单配置
      */
     getPropsConfig(type: string): Promise<FormConfig>;
-    setPropsValues(values: Record<string, MNode>): void;
+    setPropsValues(values: Record<string, Partial<MNode>>): void;
     /**
      * 为指点类型组件设置组件初始值
      * @param type 组件类型
      * @param value 组件初始值
      */
-    setPropsValue(type: string, value: MNode): Promise<void>;
+    setPropsValue(type: string, value: Partial<MNode>): Promise<void>;
     /**
      * 获取指定类型的组件初始值
      * @param type 组件类型

package/types/type.d.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'vue';
-import type { FormConfig, FormItem } from '@tmagic/form';
+import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, MoveableOptions, UpdateDragEl } from '@tmagic/stage';
@@ -18,7 +18,7 @@ import type { UndoRedo } from './utils/undo-redo';
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 export interface InstallOptions {
-    parseDSL: (dsl: string) => MApp;
+    parseDSL: <T = any>(dsl: string) => T;
     [key: string]: any;
 }
 export interface Services {
@@ -61,7 +61,7 @@ export interface StoreState {
 export type StoreStateKey = keyof StoreState;
 export interface PropsState {
     propsConfigMap: Record<string, FormConfig>;
-    propsValueMap: Record<string, MNode>;
+    propsValueMap: Record<string, Partial<MNode>>;
 }
 export interface ComponentGroupState {
     list: ComponentGroup[];
@@ -159,6 +159,8 @@ export interface MenuButton {
     className?: string;
     /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
     items?: MenuButton[];
+    /** 唯一标识，用于高亮 */
+    id?: string | number;
 }
 export interface MenuComponent {
     type: 'component';
@@ -263,18 +265,15 @@ export interface ScrollViewerEvent {
     scrollWidth: number;
 }
 export type CodeState = {
-    /** 是否展示代码块编辑区 */
-    isShowCodeEditor: boolean;
     /** 代码块DSL数据源 */
     codeDsl: CodeBlockDSL | null;
-    /** 当前选中的代码块id */
-    id: Id;
     /** 代码块是否可编辑 */
     editable: boolean;
     /** list模式下左侧展示的代码列表 */
     combineIds: string[];
     /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
     undeletableList: Id[];
+    paramsColConfig?: ColumnConfig;
 };
 export type HookData = {
     /** 代码块id */
@@ -346,6 +345,8 @@ export interface EventSelectConfig {
     compActionConfig?: FormItem;
     /** 联动代码配置 */
     codeActionConfig?: FormItem;
+    /** 联动数据源配置 */
+    dataSourceActionConfig?: FormItem;
 }
 export declare enum KeyBindingCommand {
     /** 复制 */
@@ -399,3 +400,39 @@ export interface KeyBindingCacheItem {
     eventType: 'keyup' | 'keydown';
     binded: boolean;
 }
+export interface CodeSelectColConfig {
+    type: 'code-select-col';
+    name: string;
+    labelWidth?: number | string;
+    disabled?: boolean | FilterFunction;
+    display?: boolean | FilterFunction;
+}
+export interface DataSourceMethodSelectConfig {
+    type: 'data-source-method-select';
+    name: string;
+    labelWidth?: number | string;
+    disabled?: boolean | FilterFunction;
+    display?: boolean | FilterFunction;
+}
+export interface DataSourceFieldSelectConfig {
+    type: 'data-source-field-select';
+    name: string;
+    labelWidth?: number | string;
+    disabled?: boolean | FilterFunction;
+    display?: boolean | FilterFunction;
+}
+export declare enum DepTargetType {
+    DEFAULT = "default",
+    /** 代码块 */
+    CODE_BLOCK = "code-block",
+    /** 数据源 */
+    DATA_SOURCE = "data-source",
+    /** 数据源方法 */
+    DATA_SOURCE_METHOD = "data-source-method",
+    /** 数据源条件 */
+    DATA_SOURCE_COND = "data-source-cond"
+}
+export interface DatasourceTypeOption {
+    type: string;
+    text: string;
+}

package/types/utils/content-menu.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import ContentMenu from '../components/ContentMenu.vue';
+import type { MenuButton, Services } from '../type';
+export declare const useDeleteMenu: () => MenuButton;
+export declare const useCopyMenu: () => MenuButton;
+export declare const usePasteMenu: (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>) => MenuButton;
+export declare const useMoveToMenu: (services?: Services) => MenuButton;

package/types/utils/data-source/formConfigs/base.d.ts

@@ -1,3 +1,2 @@
 import type { FormConfig } from '@tmagic/form';
-declare const _default: FormConfig;
-export default _default;
+export default function (): FormConfig;

package/types/utils/data-source/index.d.ts

@@ -1,2 +1,7 @@
 import { FormConfig } from '@tmagic/form';
+import { DataSourceSchema } from '@tmagic/schema';
 export declare const getFormConfig: (type: string, configs: Record<string, FormConfig>) => FormConfig;
+export declare const getDisplayField: (dataSources: DataSourceSchema[], key: string) => {
+    value: string;
+    type: 'var' | 'text';
+}[];

package/types/utils/dep.d.ts

@@ -1,4 +1,6 @@
-import { CodeBlockContent, DataSourceSchema, Id } from '@tmagic/schema';
+import { CodeBlockContent, Id } from '@tmagic/schema';
 import { Target } from '../services/dep';
 export declare const createCodeBlockTarget: (id: Id, codeBlock: CodeBlockContent) => Target;
-export declare const createDataSourceTarget: (id: Id, ds: DataSourceSchema) => Target;
+export declare const createDataSourceTarget: (id: Id) => Target;
+export declare const createDataSourceCondTarget: (id: string) => Target;
+export declare const createDataSourceMethodTarget: (id: string) => Target;

package/types/utils/index.d.ts

@@ -2,5 +2,5 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
-export * from './stage';
 export * from './operator';
+export * from './data-source';

package/types/utils/props.d.ts

@@ -1,4 +1,8 @@
-import { FormConfig, FormState } from '@tmagic/form';
+import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
+export declare const styleTabConfig: TabPaneConfig;
+export declare const eventTabConfig: TabPaneConfig;
+export declare const advancedTabConfig: TabPaneConfig;
+export declare const displayTabConfig: TabPaneConfig;
 /**
  * 统一为组件属性表单加上事件、高级、样式配置
  * @param config 组件属性配置
@@ -6,106 +10,13 @@ import { FormConfig, FormState } from '@tmagic/form';
  */
 export declare const fillConfig: (config?: FormConfig) => {
     type: string;
-    items: ({
+    items: {
+        [x: string]: any;
+        status?: string | undefined;
         title: string;
-        labelWidth: string;
-        items: import("@tmagic/form").ChildConfig[];
-        lazy?: undefined;
-    } | {
-        title: string;
-        labelWidth: string;
-        items: {
-            name: string;
-            items: ({
-                type: string;
-                legend: string;
-                items: ({
-                    name: string;
-                    type: string;
-                    activeValue: string;
-                    inactiveValue: string;
-                    defaultValue: string;
-                    text: string;
-                    disabled?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    type?: undefined;
-                    activeValue?: undefined;
-                    inactiveValue?: undefined;
-                    defaultValue?: undefined;
-                    disabled?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    disabled: (vm: FormState, { model }: any) => boolean;
-                    type?: undefined;
-                    activeValue?: undefined;
-                    inactiveValue?: undefined;
-                    defaultValue?: undefined;
-                })[];
-                name?: undefined;
-            } | {
-                type: string;
-                legend: string;
-                items: ({
-                    name: string;
-                    text: string;
-                    type?: undefined;
-                    defaultValue?: undefined;
-                    options?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    type: string;
-                    defaultValue?: undefined;
-                    options?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    type: string;
-                    defaultValue: string;
-                    options: {
-                        text: string;
-                        value: string;
-                    }[];
-                } | {
-                    name: string;
-                    text: string;
-                    defaultValue: string;
-                    type?: undefined;
-                    options?: undefined;
-                })[];
-                name?: undefined;
-            } | {
-                type: string;
-                legend: string;
-                name: string;
-                items: {
-                    name: string;
-                    text: string;
-                }[];
-            })[];
-        }[];
-        lazy?: undefined;
-    } | {
-        title: string;
-        items: {
-            name: string;
-            type: string;
-            labelWidth: number;
-        }[];
-        labelWidth?: undefined;
-        lazy?: undefined;
-    } | {
-        title: string;
-        lazy: boolean;
-        items: {
-            name: string;
-            text: string;
-            labelWidth: string;
-            type: string;
-        }[];
-        labelWidth?: undefined;
-    })[];
+        lazy?: boolean | undefined;
+        labelWidth?: string | undefined;
+        items: FormConfig;
+        onTabClick?: ((mForm: FormState | undefined, tab: any, data: any) => void) | undefined;
+    }[];
 }[];

package/src/components/CodeDraftEditor.vue

@@ -1,148 +0,0 @@
-<template>
-  <div class="m-editor-wrapper" :class="isFullScreen ? 'fullScreen' : 'normal'">
-    <magic-code-editor
-      ref="codeEditor"
-      class="m-editor-container"
-      :init-values="`${codeContent}`"
-      @save="saveCodeDraft"
-      :language="language"
-      :options="codeOptions"
-    ></magic-code-editor>
-    <div class="m-editor-content-bottom" v-if="editable">
-      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
-        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
-      >
-      <TMagicButton type="primary" class="button" @click="saveAndClose">确认</TMagicButton>
-      <TMagicButton class="button" @click="close">关闭</TMagicButton>
-    </div>
-    <div class="m-editor-content-bottom" v-else>
-      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
-        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
-      >
-      <TMagicButton class="button" @click="close">关闭</TMagicButton>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, inject, ref, watchEffect } from 'vue';
-import type * as monaco from 'monaco-editor';
-
-import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { Id } from '@tmagic/schema';
-import { datetimeFormatter } from '@tmagic/utils';
-
-import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services } from '@editor/type';
-
-defineOptions({
-  name: 'MEditorCodeDraftEditor',
-});
-
-const props = withDefaults(
-  defineProps<{
-    /** 代码id */
-    id: Id;
-    /** 代码内容 */
-    content: string;
-    /** 是否可编辑 */
-    editable?: boolean;
-    /** 是否自动保存草稿 */
-    autoSaveDraft?: boolean;
-    /** 编辑器参数 */
-    codeOptions?: Object;
-    /** 编辑器语言 */
-    language?: string;
-  }>(),
-  {
-    editable: true,
-    autoSaveDraft: true,
-  },
-);
-const emit = defineEmits(['close', 'saveAndClose']);
-
-const services = inject<Services>('services');
-
-const codeContent = ref<string>('');
-const editorContent = ref<string>('');
-const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
-// 原始代码内容
-const originCodeContent = ref<string>('');
-const isFullScreen = ref<boolean>(false);
-
-const codeOptions = computed(() => ({
-  ...props.codeOptions,
-  readOnly: !props.editable,
-}));
-
-watchEffect(() => {
-  codeContent.value = props.content;
-  if (!originCodeContent.value) {
-    // 暂存原始的代码内容
-    originCodeContent.value = codeContent.value;
-  }
-  // 有草稿时展示上次保存的草稿内容
-  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
-  if (codeDraft) {
-    codeContent.value = codeDraft;
-  }
-});
-
-// 保存草稿
-const saveCodeDraft = async (codeValue: string) => {
-  if (!props.autoSaveDraft) return;
-  if (originCodeContent.value === codeValue) {
-    // 没修改或改回原样 有草稿的话删除草稿
-    services?.codeBlockService.removeCodeDraft(props.id);
-    return;
-  }
-  services?.codeBlockService.setCodeDraft(props.id, codeValue);
-  tMagicMessage.success(`代码草稿成功保存到本地 ${datetimeFormatter(new Date())}`);
-};
-
-// 保存并关闭
-const saveAndClose = (): void => {
-  if (!codeEditor.value || !props.editable) return;
-  // 代码内容
-  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
-  emit('saveAndClose', editorContent.value);
-};
-
-// 关闭弹窗
-const close = async (): Promise<void> => {
-  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
-  if (codeDraft) {
-    try {
-      await tMagicMessageBox.confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
-        confirmButtonText: '保存并关闭',
-        cancelButtonText: '直接关闭',
-        type: 'warning',
-        distinguishCancelAndClose: true,
-      });
-
-      // 保存之后再关闭
-      saveAndClose();
-    } catch (action: any) {
-      if (action === 'cancel') {
-        // 删除草稿 直接关闭
-        services?.codeBlockService.removeCodeDraft(props.id);
-        emit('close');
-      }
-    }
-  } else {
-    emit('close');
-  }
-};
-
-// 切换全屏
-const toggleFullScreen = (): void => {
-  isFullScreen.value = !isFullScreen.value;
-  if (codeEditor.value) {
-    codeEditor.value.focus();
-  }
-};
-
-defineExpose({
-  saveAndClose,
-  close,
-});
-</script>