@tmagic/editor 1.1.5 → 1.2.0-beta.1

package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts

@@ -0,0 +1,72 @@
+import { CodeDeleteErrorType } from '../../../type';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+            customError?: ((id: string, errorType: CodeDeleteErrorType) => any) | undefined;
+        }>>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+            customError?: ((id: string, errorType: CodeDeleteErrorType) => any) | undefined;
+        }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, 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, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+        customError?: ((id: string, errorType: CodeDeleteErrorType) => any) | undefined;
+    }>>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    customError?: ((id: string, errorType: CodeDeleteErrorType) => any) | undefined;
+}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        'code-block-panel-header': (_: {}) => any;
+        'code-block-panel-tool': (_: {
+            id: any;
+        }) => any;
+        'code-block-edit-panel-header': (_: {
+            id: string;
+        }) => any;
+    };
+});
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare 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;
+    };
+};

package/types/services/codeBlock.d.ts

@@ -0,0 +1,155 @@
+import { Id, MNode } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL } from '../type';
+import { CodeEditorMode, CodeSelectOp } from '../type';
+import BaseService from './BaseService';
+declare class CodeBlock extends BaseService {
+    private state;
+    constructor();
+    /**
+     * 设置活动的代码块dsl数据源
+     * @param {CodeBlockDSL} codeDsl 代码DSL
+     * @returns {void}
+     */
+    setCodeDsl(codeDsl: CodeBlockDSL): Promise<void>;
+    /**
+     * 获取活动的代码块dsl数据源（默认从dsl中的codeBlock字段读取）
+     * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
+     * @returns {CodeBlockDSL | null}
+     */
+    getCodeDsl(forceRefresh?: boolean): Promise<CodeBlockDSL | null>;
+    /**
+     * 根据代码块id获取代码块内容
+     * @param {string} id 代码块id
+     * @returns {CodeBlockContent | null}
+     */
+    getCodeContentById(id: string): Promise<CodeBlockContent | null>;
+    /**
+     * 设置代码块ID和代码内容到源dsl
+     * @param {string} id 代码块id
+     * @param {CodeBlockContent} codeConfig 代码块内容配置信息
+     * @returns {void}
+     */
+    setCodeDslById(id: string, codeConfig: CodeBlockContent): Promise<void>;
+    /**
+     * 根据代码块id数组获取代码dsl
+     * @param {string[]} ids 代码块id数组
+     * @returns {CodeBlockDSL}
+     */
+    getCodeDslByIds(ids: string[]): Promise<CodeBlockDSL>;
+    /**
+     * 设置代码编辑面板展示状态
+     * @param {boolean} status 是否展示代码编辑面板
+     * @returns {void}
+     */
+    setCodeEditorShowStatus(status: boolean): Promise<void>;
+    /**
+     * 获取代码编辑面板展示状态
+     * @returns {boolean} 是否展示代码编辑面板
+     */
+    getCodeEditorShowStatus(): boolean;
+    /**
+     * 设置代码编辑面板展示状态及展示内容
+     * @param {boolean} status 是否展示代码编辑面板
+     * @param {string} id 代码块id
+     * @returns {void}
+     */
+    setCodeEditorContent(status: boolean, id: string): void;
+    /**
+     * 获取当前选中的代码块内容
+     * @returns {CodeBlockContent | null}
+     */
+    getCurrentDsl(): Promise<CodeBlockContent | null>;
+    /**
+     * 获取编辑状态
+     * @returns {boolean} 是否可编辑
+     */
+    getEditStatus(): boolean;
+    /**
+     * 设置编辑状态
+     * @param {boolean} 是否可编辑
+     * @returns {void}
+     */
+    setEditStatus(status: boolean): Promise<void>;
+    /**
+     * 设置当前选中的代码块ID
+     * @param {string} id 代码块id
+     * @returns {void}
+     */
+    setId(id: string): void;
+    /**
+     * 获取当前选中的代码块ID
+     * @returns {string} id 代码块id
+     */
+    getId(): string;
+    /**
+     * 获取当前模式
+     * @returns {CodeEditorMode}
+     */
+    getMode(): CodeEditorMode;
+    /**
+     * 设置当前模式
+     * @param {CodeEditorMode} mode 模式
+     * @returns {void}
+     */
+    setMode(mode: CodeEditorMode): Promise<void>;
+    /**
+     * 设置当前选中组件已关联绑定的代码块id数组
+     * @param {string[]} ids 代码块id数组
+     * @returns {void}
+     */
+    setCombineIds(ids: string[]): Promise<void>;
+    /**
+     * 获取当前选中组件已关联绑定的代码块id数组
+     * @returns {string[]}
+     */
+    getCombineIds(): string[];
+    /**
+     * 设置绑定关系
+     * @param {Id} 组件id
+     * @param {string[]} diffCodeIds 代码块id数组
+     * @param {CodeSelectOp} opFlag 操作类型
+     * @param {string} hook 代码块挂载hook名称
+     * @returns {void}
+     */
+    setCombineRelation(compId: Id, diffCodeIds: string[], opFlag: CodeSelectOp, hook: string): Promise<void>;
+    /**
+     * 获取不可删除列表
+     * @returns {string[]}
+     */
+    getUndeletableList(): string[];
+    /**
+     * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
+     * @param {string[]} codeIds 代码块id数组
+     * @returns {void}
+     */
+    setUndeleteableList(codeIds: string[]): Promise<void>;
+    /**
+     * 在dsl数据源中删除指定id的代码块
+     * @param {string[]} codeIds 需要删除的代码块id数组
+     * @returns {CodeBlockDSL} 删除后的code dsl
+     */
+    deleteCodeDslByIds(codeIds: string[]): Promise<CodeBlockDSL>;
+    /**
+     * 生成代码块唯一id
+     * @returns {string} 代码块唯一id
+     */
+    getUniqueId(): Promise<string>;
+    /**
+     * 一对一解除绑定关系  功能隐藏，暂时注释
+     * @param {string} compId 组件id
+     * @param {string} codeId 代码块id
+     * @param {string[]} codeHooks 代码块挂载hook名称
+     * @returns {boolean} 结果
+     */
+    /**
+     * 通过组件id解除绑定关系（删除组件）
+     * @param {MNode} compId 组件节点
+     * @returns void
+     */
+    deleteCompsInRelation(node: MNode): Promise<void>;
+    destroy(): void;
+    private recurseNodes;
+}
+export declare type CodeBlockService = CodeBlock;
+declare const _default: CodeBlock;
+export default _default;

package/types/services/editor.d.ts

@@ -1,4 +1,4 @@
-import type { Id, MContainer, MNode } from '@tmagic/schema';
+import type { CodeBlockDSL, Id, MContainer, MNode } from '@tmagic/schema';
 import { StepValue } from '../services/history';
 import type { AddMNode, EditorNodeInfo, PastePosition, StoreState } from '../type';
 import { LayerOffset, Layout } from '../type';
@@ -138,6 +138,17 @@ declare class Editor extends BaseService {
     move(left: number, top: number): Promise<void>;
     destroy(): void;
     resetModifiedNodeId(): void;
+    /**
+     * 从dsl中的codeBlock字段读取活动的代码块
+     * @returns {CodeBlockDSL | null}
+     */
+    getCodeDsl(): Promise<CodeBlockDSL | null>;
+    /**
+     * 设置代码块到dsl的codeBlock字段
+     * @param {CodeBlockDSL} codeDsl 代码DSL
+     * @returns {void}
+     */
+    setCodeDsl(codeDsl: CodeBlockDSL): Promise<void>;
     private addModifiedNodeId;
     private pushHistoryState;
     private changeHistoryState;

package/types/services/props.d.ts

@@ -13,6 +13,7 @@ declare class Props extends BaseService {
             items: (import("@tmagic/form").ChildConfig & {
                 [key: string]: any;
             })[];
+            lazy?: undefined;
         } | {
             title: string;
             items: {
@@ -34,6 +35,17 @@ declare class Props extends BaseService {
                 })[];
             }[];
             labelWidth?: undefined;
+            lazy?: undefined;
+        } | {
+            title: string;
+            lazy: boolean;
+            items: {
+                name: string;
+                text: string;
+                type: string;
+                labelWidth: string;
+            }[];
+            labelWidth?: undefined;
         })[];
     }[]>;
     /**

package/types/type.d.ts

@@ -3,6 +3,7 @@ import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
+import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -23,6 +24,7 @@ export interface Services {
     propsService: PropsService;
     componentListService: ComponentListService;
     uiService: UiService;
+    codeBlockService: CodeBlockService;
 }
 export interface StageOptions {
     runtimeUrl: string;
@@ -190,7 +192,7 @@ export interface SideComponent extends MenuComponent {
  * component-list: 组件列表
  * layer: 已选组件树
  */
-export declare type SideItem = 'component-list' | 'layer' | SideComponent;
+export declare type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
 /** 工具栏 */
 export interface SideBarData {
     /** 容器类型 */
@@ -243,3 +245,77 @@ export interface ScrollViewerEvent {
     scrollHeight: number;
     scrollWidth: number;
 }
+export interface CodeBlockDSL {
+    [id: string]: CodeBlockContent;
+}
+export interface CodeBlockContent {
+    /** 代码块名称 */
+    name: string;
+    /** 代码块内容 */
+    content: string;
+    /** 代码块与组件的绑定关系 */
+    comps?: CodeRelation;
+    /** 扩展字段 */
+    [propName: string]: any;
+}
+export declare type CodeState = {
+    /** 是否展示代码块编辑区 */
+    isShowCodeEditor: boolean;
+    /** 代码块DSL数据源 */
+    codeDsl: CodeBlockDSL | null;
+    /** 当前选中的代码块id */
+    id: string;
+    /** 代码块是否可编辑 */
+    editable: boolean;
+    /** 代码编辑面板的展示模式 */
+    mode: CodeEditorMode;
+    /** list模式下左侧展示的代码列表 */
+    combineIds: string[];
+    /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
+    undeletableList: string[];
+};
+export declare type CodeRelation = {
+    /** 组件id:['created'] */
+    [compId: string | number]: string[];
+};
+export declare enum CodeEditorMode {
+    /** 左侧菜单，右侧代码 */
+    LIST = "list",
+    /** 全屏代码 */
+    EDITOR = "editor"
+}
+export interface CodeDslList {
+    /** 代码块id */
+    id: string;
+    /** 代码块名称 */
+    name: string;
+    /** 代码块函数内容 */
+    content: any;
+    /** 是否展示代码绑定关系 */
+    showRelation?: boolean;
+}
+export interface ListState {
+    /** 代码块列表 */
+    codeList: CodeDslList[];
+}
+export interface ListRelationState extends ListState {
+    /** 与代码块绑定的组件id信息 */
+    bindComps: {
+        /** 代码块id : 组件信息 */
+        [id: string]: MNode[];
+    };
+}
+export declare enum CodeDeleteErrorType {
+    /** 代码块存在于不可删除列表中 */
+    UNDELETEABLE = "undeleteable",
+    /** 代码块存在绑定关系 */
+    BIND = "bind"
+}
+export declare enum CodeSelectOp {
+    /** 增加 */
+    ADD = "add",
+    /** 删除 */
+    DELETE = "delete",
+    /** 单选修改 */
+    CHANGE = "change"
+}

package/types/utils/props.d.ts

@@ -12,6 +12,7 @@ export declare const fillConfig: (config?: FormConfig) => {
         items: (import("@tmagic/form").ChildConfig & {
             [key: string]: any;
         })[];
+        lazy?: undefined;
     } | {
         title: string;
         items: {
@@ -33,5 +34,16 @@ export declare const fillConfig: (config?: FormConfig) => {
             })[];
         }[];
         labelWidth?: undefined;
+        lazy?: undefined;
+    } | {
+        title: string;
+        lazy: boolean;
+        items: {
+            name: string;
+            text: string;
+            type: string;
+            labelWidth: string;
+        }[];
+        labelWidth?: undefined;
     })[];
 }[];