@tmagic/editor 1.3.0-alpha.13 → 1.3.0-alpha.14

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 {
@@ -263,18 +263,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 +343,8 @@ export interface EventSelectConfig {
     compActionConfig?: FormItem;
     /** 联动代码配置 */
     codeActionConfig?: FormItem;
+    /** 联动数据源配置 */
+    dataSourceActionConfig?: FormItem;
 }
 export declare enum KeyBindingCommand {
     /** 复制 */
@@ -399,3 +398,17 @@ 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;
+}

package/types/{components/FunctionEditor.vue.d.ts → utils/use-code-block-edit.d.ts}

@@ -1,30 +1,13 @@
-import { ColumnConfig } from '@tmagic/form';
-import { Id } from '@tmagic/schema';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /** 代码块id */
-    id: Id;
-    /** 代码块名称 */
-    name: string;
-    /** 代码内容 */
-    content: string;
-    /** 是否可编辑 */
-    editable?: boolean | undefined;
-    /** 是否自动保存草稿 */
-    autoSaveDraft?: boolean | undefined;
-    /** 编辑器扩展参数 */
-    codeOptions?: object | undefined;
-    /** 代码参数扩展配置 */
-    paramsColConfig?: ColumnConfig | undefined;
-}>, {
-    editable: boolean;
-    autoSaveDraft: boolean;
-}>, {
-    codeDraftEditor: import("vue").Ref<({
+import { nextTick } from 'vue';
+import type { CodeBlockContent } from '@tmagic/schema';
+import type { CodeBlockService } from '../services/codeBlock';
+export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) => {
+    codeId: import("vue").Ref<string | undefined>;
+    codeConfig: import("vue").Ref<CodeBlockContent | undefined>;
+    codeBlockEditor: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
-            editable?: boolean | undefined;
-            autoSaveDraft?: boolean | undefined;
             key?: string | number | symbol | undefined;
             ref?: import("vue").VNodeRef | undefined;
             ref_for?: boolean | undefined;
@@ -69,12 +52,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             }>) => void)[] | undefined;
             class?: unknown;
             style?: unknown;
-            readonly id: Id;
-            readonly content: string;
-            readonly language?: string | undefined;
-            readonly codeOptions?: Object | undefined;
-            onClose?: ((...args: any[]) => any) | undefined;
-            onSaveAndClose?: ((...args: any[]) => any) | undefined;
+            readonly content: CodeBlockContent;
+            readonly disabled?: boolean | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -87,42 +66,20 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $emit: (event: "close" | "saveAndClose", ...args: any[]) => void;
+        $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            id: {
-                type: import("vue").PropType<Id>;
-                required: true;
-            };
-            editable: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             content: {
-                type: import("vue").PropType<string>;
+                type: import("vue").PropType<CodeBlockContent>;
                 required: true;
             };
-            language: {
-                type: import("vue").PropType<string>;
-            };
-            codeOptions: {
-                type: import("vue").PropType<Object>;
-            };
-            autoSaveDraft: {
+            disabled: {
                 type: import("vue").PropType<boolean>;
-                default: boolean;
             };
-        }>> & {
-            onClose?: ((...args: any[]) => any) | undefined;
-            onSaveAndClose?: ((...args: any[]) => any) | undefined;
-        }, {
-            /** 代码块id */
-            saveAndClose: () => void;
-            close: () => Promise<void>;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "saveAndClose")[], string, {
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }, {}, string, {}> & {
+        }>>, {
+            show(): void;
+            hide(): void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -140,76 +97,22 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
+        $nextTick: typeof nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
-        id: {
-            type: import("vue").PropType<Id>;
-            required: true;
-        };
-        editable: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
         content: {
-            type: import("vue").PropType<string>;
+            type: import("vue").PropType<CodeBlockContent>;
             required: true;
         };
-        language: {
-            type: import("vue").PropType<string>;
-        };
-        codeOptions: {
-            type: import("vue").PropType<Object>;
-        };
-        autoSaveDraft: {
+        disabled: {
             type: import("vue").PropType<boolean>;
-            default: boolean;
         };
-    }>> & {
-        onClose?: ((...args: any[]) => any) | undefined;
-        onSaveAndClose?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{
-        /** 代码块id */
-        saveAndClose: () => void;
-        close: () => Promise<void>;
+    }>> & import("vue").ShallowUnwrapRef<{
+        show(): void;
+        hide(): void;
     }> & {} & import("vue").ComponentCustomProperties & {}) | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /** 代码块id */
-    id: Id;
-    /** 代码块名称 */
-    name: string;
-    /** 代码内容 */
-    content: string;
-    /** 是否可编辑 */
-    editable?: boolean | undefined;
-    /** 是否自动保存草稿 */
-    autoSaveDraft?: boolean | undefined;
-    /** 编辑器扩展参数 */
-    codeOptions?: object | undefined;
-    /** 代码参数扩展配置 */
-    paramsColConfig?: ColumnConfig | undefined;
-}>, {
-    editable: boolean;
-    autoSaveDraft: boolean;
-}>>>, {
-    editable: boolean;
-    autoSaveDraft: boolean;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
+    createCodeBlock: () => Promise<void>;
+    editCode: (id: string) => Promise<void>;
+    deleteCode: (key: string) => Promise<void>;
+    submitCodeBlockHandler: (values: CodeBlockContent) => Promise<void>;
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/types/utils/use-data-source-method.d.ts

@@ -0,0 +1,116 @@
+import { nextTick } from 'vue';
+import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
+export declare const useDataSourceMethod: () => {
+    codeConfig: import("vue").Ref<CodeBlockContent | undefined>;
+    codeBlockEditor: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            key?: string | number | symbol | undefined;
+            ref?: import("vue").VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            class?: unknown;
+            style?: unknown;
+            readonly content: CodeBlockContent;
+            readonly disabled?: boolean | undefined;
+        };
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            content: {
+                type: import("vue").PropType<CodeBlockContent>;
+                required: true;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean>;
+            };
+        }>>, {
+            show(): void;
+            hide(): void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        content: {
+            type: import("vue").PropType<CodeBlockContent>;
+            required: true;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean>;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{
+        show(): void;
+        hide(): void;
+    }> & {} & import("vue").ComponentCustomProperties & {}) | undefined>;
+    createCode: (model: DataSourceSchema) => Promise<void>;
+    editCode: (model: DataSourceSchema, methodName: string) => Promise<void>;
+    deleteCode: (model: DataSourceSchema, methodName: string) => Promise<void>;
+    submitCode: (values: CodeBlockContent) => void;
+};

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>