@tmagic/editor 1.5.0-beta.4 → 1.5.0-beta.5

package/dist/tmagic-editor.js

@@ -1,22 +1,29 @@
+import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, getDesignConfig, TMagicSelect, useZIndex, tMagicMessage, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+export * from '@tmagic/design';
+export { default as designPlugin } from '@tmagic/design';
+import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel } from '@tmagic/form';
+export * from '@tmagic/form';
+export { default as formPlugin } from '@tmagic/form';
+import tablePlugin__default, { MagicTable } from '@tmagic/table';
+export * from '@tmagic/table';
+export { default as tablePlugin } from '@tmagic/table';
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, Transition, mergeDefaults } from 'vue';
 import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
-import { TMagicIcon, TMagicButton, TMagicCard, getConfig as getConfig$1, TMagicSelect, useZIndex, tMagicMessage, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
-import { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel } from '@tmagic/form';
-import { HookCodeType, HookType, NODE_CONDS_KEY, NodeType, ActionType } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { HookCodeType, HookType, NODE_CONDS_KEY, Target, Watcher, NodeType, ActionType, DepTargetType, DEFAULT_EVENTS, DEFAULT_METHODS, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/core';
+export { DepTargetType } from '@tmagic/core';
 import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
+export * from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
-import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
-export { DepTargetType } from '@tmagic/dep';
+import StageCore__default, { isFixed, GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+export * from '@tmagic/stage';
+export { default as StageCore } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
 import Sortable from 'sortablejs';
-import StageCore, { GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
-import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
 const _hoisted_1$w = ["src"];
@@ -64,10 +71,10 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
 });
 
 let $TMAGIC_EDITOR = {};
-const setConfig = (option) => {
+const setEditorConfig = (option) => {
   $TMAGIC_EDITOR = option;
 };
-const getConfig = (key) => $TMAGIC_EDITOR[key];
+const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
@@ -115,14 +122,14 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       }
       return value;
     };
-    const parse = (v, language) => {
+    const parseCode = (v, language) => {
       if (typeof v !== "string") {
         return v;
       }
       if (language === "json") {
         return JSON.parse(v);
       }
-      return getConfig("parseDSL")(v);
+      return getEditorConfig("parseDSL")(v);
     };
     let vsEditor = null;
     let vsDiffEditor = null;
@@ -170,7 +177,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           e.stopPropagation();
           const newValue = getEditorValue();
           values.value = newValue;
-          emit("save", props.parse ? parse(newValue, props.language) : newValue);
+          emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
         }
       });
       if (props.type !== "diff" && props.autoSave) {
@@ -178,7 +185,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           const newValue = getEditorValue();
           if (values.value !== newValue) {
             values.value = newValue;
-            emit("save", props.parse ? parse(newValue, props.language) : newValue);
+            emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
           }
         });
       }
@@ -364,7 +371,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     const changeHandler = (v) => {
       if (!props.name || !props.model) return;
       try {
-        const parseDSL = getConfig("parseDSL");
+        const parseDSL = getEditorConfig("parseDSL");
         props.model[props.name] = parseDSL(`(${v[props.name]})`);
         emit("change", props.model[props.name]);
       } catch (e) {
@@ -994,7 +1001,6 @@ const generatePageName = (pageNameList, type) => {
   return pageName;
 };
 const generatePageNameByApp = (app, type) => generatePageName(getPageNameList(type === "page" ? getPageList(app) : getPageFragmentList(app)), type);
-const isFixed = (node) => node.style?.position === "fixed";
 const getNodeIndex = (id, parent) => {
   const items = parent?.items || [];
   return items.findIndex((item) => `${item.id}` === `${id}`);
@@ -1706,7 +1712,7 @@ class WebStorage extends BaseService {
     if (item === null) return null;
     switch (protocol) {
       case "object" /* OBJECT */:
-        return getConfig("parseDSL")(`(${item})`);
+        return getEditorConfig("parseDSL")(`(${item})`);
       case "json" /* JSON */:
         return JSON.parse(item);
       case "number" /* NUMBER */:
@@ -1918,7 +1924,7 @@ class Editor extends BaseService {
    * 只有容器拥有布局
    */
   async getLayout(parent, node) {
-    if (node && typeof node !== "function" && isFixed(node)) return Layout.FIXED;
+    if (node && typeof node !== "function" && isFixed(node.style || {})) return Layout.FIXED;
     if (parent.layout) {
       return parent.layout;
     }
@@ -2586,9 +2592,9 @@ class Editor extends BaseService {
   async toggleFixedPosition(dist, src, root) {
     const newConfig = cloneDeep(dist);
     if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig) && !isFixed(src)) {
+      if (isFixed(newConfig.style) && !isFixed(src.style || {})) {
         newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig) && isFixed(src)) {
+      } else if (!isFixed(newConfig.style) && isFixed(src.style || {})) {
         newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
       }
     }
@@ -3370,7 +3376,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const { dataSourceService } = inject("services") || {};
     const props = __props;
-    const optionComponent = getConfig$1("components")?.option;
+    const optionComponent = getDesignConfig("components")?.option;
     const options = computed(() => {
       const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field];
       const ds = dataSourceService?.getDataSourceById(id);
@@ -3721,7 +3727,7 @@ const useDataSourceMethod = () => {
         dataSource.value.methods = [];
       }
       if (values.content) {
-        const parseDSL = getConfig("parseDSL");
+        const parseDSL = getEditorConfig("parseDSL");
         if (typeof values.content === "string") {
           values.content = parseDSL(values.content);
         }
@@ -3849,7 +3855,7 @@ const zoom = computed(() => uiService.get("zoom") || 1);
 const uiSelectMode = computed(() => uiService.get("uiSelectMode"));
 const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
 const useStage = (stageOptions) => {
-  const stage = new StageCore({
+  const stage = new StageCore__default({
     render: stageOptions.render,
     runtimeUrl: stageOptions.runtimeUrl,
     zoom: stageOptions.zoom ?? zoom.value,
@@ -3940,9 +3946,6 @@ const useStage = (stageOptions) => {
       globalThis.localStorage.removeItem(storageKey);
     }
   });
-  onBeforeUnmount(() => {
-    stage.destroy();
-  });
   return stage;
 };
 
@@ -4537,7 +4540,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
-    const optionComponent = getConfig$1("components")?.option;
+    const optionComponent = getDesignConfig("components")?.option;
     const services = inject("services");
     const mForm = inject("mForm");
     const eventBus = inject("eventBus");
@@ -5011,7 +5014,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       changeHandler(state.value);
     };
     return (_ctx, _cache) => {
-      return _ctx.disabled || isFocused.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(getConfig$1)("components")?.autocomplete.component || "el-autocomplete"), mergeProps(
+      return _ctx.disabled || isFocused.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(getDesignConfig)("components")?.autocomplete.component || "el-autocomplete"), mergeProps(
         {
           key: 0,
           class: "tmagic-design-auto-complete",
@@ -5020,7 +5023,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           modelValue: state.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
         },
-        unref(getConfig$1)("components")?.autocomplete.props({
+        unref(getDesignConfig)("components")?.autocomplete.props({
           disabled: _ctx.disabled,
           size: _ctx.size,
           fetchSuggestions: querySearch,
@@ -5204,7 +5207,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         height: "500px",
         onChange: (formState, code) => {
           try {
-            getConfig("parseDSL")(code);
+            getEditorConfig("parseDSL")(code);
             return code;
           } catch (error) {
             tMagicMessage.error(error.message);
@@ -7754,7 +7757,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     });
     const saveCode = (value) => {
       try {
-        const parseDSL = getConfig("parseDSL");
+        const parseDSL = getEditorConfig("parseDSL");
         editorService?.set("root", parseDSL(value));
       } catch (e) {
         console.error(e);
@@ -8161,6 +8164,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       timer && clearTimeout(timer);
       timer = setTimeout(() => {
         emit("search", filterText.value);
+        timer = null;
       }, 300);
     };
     return (_ctx, _cache) => {
@@ -8204,7 +8208,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     parent: {},
     parentsId: { default: () => [] },
     nodeStatusMap: {},
-    indent: { default: 0 }
+    indent: { default: 0 },
+    nextLevelIndentIncrement: { default: 11 }
   },
   emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
   setup(__props, { emit: __emit }) {
@@ -8297,7 +8302,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               parent: _ctx.data,
               parentsId: [..._ctx.parentsId, _ctx.data.id],
               "node-status-map": _ctx.nodeStatusMap,
-              indent: _ctx.indent + 11
+              indent: _ctx.indent + _ctx.nextLevelIndentIncrement
             }, {
               "tree-node-content": withCtx(({ data: nodeData }) => [
                 renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
@@ -8332,6 +8337,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     data: {},
     nodeStatusMap: {},
     indent: { default: 0 },
+    nextLevelIndentIncrement: {},
     emptyText: { default: "暂无数据" }
   },
   emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
@@ -8351,6 +8357,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             key: item.id,
             data: item,
             indent: _ctx.indent,
+            "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
             "node-status-map": _ctx.nodeStatusMap
           }, {
             "tree-node-content": withCtx(({ data: nodeData }) => [
@@ -8363,7 +8370,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
             ]),
             _: 2
-          }, 1032, ["data", "indent", "node-status-map"]);
+          }, 1032, ["data", "indent", "next-level-indent-increment", "node-status-map"]);
         }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$8, [
           createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
         ]))
@@ -8378,6 +8385,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   },
   __name: "CodeBlockList",
   props: {
+    indent: {},
+    nextLevelIndentIncrement: {},
     customError: { type: Function }
   },
   emits: ["edit", "remove"],
@@ -8471,6 +8480,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$m, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
+        indent: _ctx.indent,
+        "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
         onNodeClick: clickHandler
       }, {
         "tree-node-label": withCtx(({ data }) => [
@@ -8519,7 +8530,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["data", "node-status-map"]);
+      }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment"]);
     };
   }
 });
@@ -8531,6 +8542,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   },
   __name: "CodeBlockListPanel",
   props: {
+    indent: {},
+    nextLevelIndentIncrement: {},
     customError: { type: Function }
   },
   setup(__props) {
@@ -8571,6 +8584,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
+              indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
               onEdit: unref(editCode),
               onRemove: unref(deleteCode)
             }, {
@@ -8581,7 +8596,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 3
-            }, 8, ["custom-error", "onEdit", "onRemove"])
+            }, 8, ["custom-error", "indent", "next-level-indent-increment", "onEdit", "onRemove"])
           ]),
           _: 3
         }),
@@ -8709,6 +8724,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     name: "MEditorDataSourceList"
   },
   __name: "DataSourceList",
+  props: {
+    indent: {},
+    nextLevelIndentIncrement: {}
+  },
   emits: ["edit", "remove"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
@@ -8804,6 +8823,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$m, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
+        indent: _ctx.indent,
+        "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
         onNodeClick: clickHandler
       }, {
         "tree-node-label": withCtx(({ data }) => [
@@ -8849,7 +8870,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
         ]),
         _: 3
-      }, 8, ["data", "node-status-map"]);
+      }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment"]);
     };
   }
 });
@@ -8860,6 +8881,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     name: "MEditorDataSourceListPanel"
   },
   __name: "DataSourceListPanel",
+  props: {
+    indent: {},
+    nextLevelIndentIncrement: {}
+  },
   setup(__props) {
     const eventBus = inject("eventBus");
     const { dataSourceService } = inject("services") || {};
@@ -8940,9 +8965,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$i, {
               ref_key: "dataSourceList",
               ref: dataSourceList,
+              indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
               onEdit: unref(editHandler),
               onRemove: removeHandler
-            }, null, 8, ["onEdit"])
+            }, null, 8, ["indent", "next-level-indent-increment", "onEdit"])
           ]),
           _: 3
         }),
@@ -9836,6 +9863,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "LayerPanel",
   props: {
     layerContentMenu: {},
+    indent: {},
+    nextLevelIndentIncrement: {},
     customContentMenu: { type: Function }
   },
   setup(__props) {
@@ -9885,6 +9914,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             ref: tree,
             data: nodeData.value,
             "node-status-map": unref(nodeStatusMap),
+            indent: _ctx.indent,
+            "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
             onNodeDragover: unref(handleDragOver),
             onNodeDragstart: unref(handleDragStart),
             onNodeDragleave: unref(handleDragLeave),
@@ -9905,7 +9936,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData2 })
             ]),
             _: 3
-          }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
+          }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             createVNode(_sfc_main$e, {
               ref_key: "menu",
@@ -10084,6 +10115,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE]
     }) },
     layerContentMenu: {},
+    indent: {},
+    nextLevelIndentIncrement: {},
     customContentMenu: {}
   },
   setup(__props, { expose: __expose }) {
@@ -10124,7 +10157,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           text: "已选组件",
           props: {
             layerContentMenu: props.layerContentMenu,
-            customContentMenu: props.customContentMenu
+            customContentMenu: props.customContentMenu,
+            indent: props.indent,
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement
           },
           component: _sfc_main$c,
           slots: {}
@@ -10135,6 +10170,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           icon: EditPen,
           text: "代码编辑",
           component: _sfc_main$k,
+          props: {
+            indent: props.indent,
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement
+          },
           slots: {}
         },
         [SideItemKey.DATA_SOURCE]: {
@@ -10143,6 +10182,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           icon: Coin,
           text: "数据源",
           component: _sfc_main$h,
+          props: {
+            indent: props.indent,
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement
+          },
           slots: {}
         }
       };
@@ -10719,6 +10762,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         contentWindow?.magic.onRuntimeReady({});
       }
     });
+    onBeforeUnmount(() => {
+      services?.stageOverlayService.get("stage")?.destroy();
+      services?.stageOverlayService.set("stage", null);
+    });
     const closeOverlayHandler = () => {
       services?.stageOverlayService.closeOverlay();
     };
@@ -10970,6 +11017,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         });
       });
     });
+    onBeforeUnmount(() => {
+      stage?.destroy();
+    });
     watch(zoom, (zoom2) => {
       if (!stage || !zoom2) return;
       stage.setZoom(zoom2);
@@ -11010,7 +11060,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       services?.keybindingService.unregisterEl("stage");
       services?.editorService.off("root-change", rootChangeHandler);
     });
-    const parseDSL = getConfig("parseDSL");
+    const parseDSL = getEditorConfig("parseDSL");
     const contextmenuHandler = (e) => {
       e.preventDefault();
       menu.value?.show(e);
@@ -11261,7 +11311,7 @@ class CodeBlock extends BaseService {
     if (codeDsl[id] && !force) return;
     const codeConfigProcessed = cloneDeep(codeConfig);
     if (codeConfigProcessed.content) {
-      const parseDSL = getConfig("parseDSL");
+      const parseDSL = getEditorConfig("parseDSL");
       if (typeof codeConfigProcessed.content === "string") {
         codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
       }
@@ -12485,6 +12535,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabledPageFragment: { type: Boolean },
     disabledStageOverlay: { type: Boolean },
     disabledShowSrc: { type: Boolean },
+    indent: {},
+    nextLevelIndentIncrement: {},
     render: { type: Function },
     updateDragEl: { type: Function },
     canSelect: { type: Function },
@@ -12561,7 +12613,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$a, {
               data: _ctx.sidebar,
               "layer-content-menu": _ctx.layerContentMenu,
-              "custom-content-menu": _ctx.customContentMenu
+              "custom-content-menu": _ctx.customContentMenu,
+              indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement
             }, {
               "layer-panel-header": withCtx(() => [
                 renderSlot(_ctx.$slots, "layer-panel-header")
@@ -12603,7 +12657,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "data-source-panel-search")
               ]),
               _: 3
-            }, 8, ["data", "layer-content-menu", "custom-content-menu"])
+            }, 8, ["data", "layer-content-menu", "custom-content-menu", "indent", "next-level-indent-increment"])
           ])
         ]),
         workspace: withCtx(() => [
@@ -12673,8 +12727,11 @@ const defaultInstallOpt = {
 const index = {
   install: (app, opt) => {
     const option = Object.assign(defaultInstallOpt, opt || {});
+    app.use(designPlugin__default, opt || {});
+    app.use(formPlugin__default, opt || {});
+    app.use(tablePlugin__default);
     app.config.globalProperties.$TMAGIC_EDITOR = option;
-    setConfig(option);
+    setEditorConfig(option);
     app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
     app.component("magic-code-editor", _sfc_main$X);
     app.component("m-fields-ui-select", _sfc_main$B);
@@ -12697,4 +12754,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, updateStatus, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, updateStatus, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };