@tmagic/editor 1.3.0-alpha.22 → 1.3.0-alpha.23

package/dist/tmagic-editor.umd.cjs

@@ -2310,12 +2310,14 @@
       const doc = stage?.renderer.contentWindow?.document;
       if (doc) {
         const el = doc.getElementById(`${node.id}`);
-        const parentEl = el?.offsetParent;
+        const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
         if (parentEl && el) {
           node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+          node.style.right = "";
         }
       } else if (parent.style && utils.isNumber(parent.style?.width) && utils.isNumber(node.style?.width)) {
         node.style.left = (parent.style.width - node.style.width) / 2;
+        node.style.right = "";
       }
       return node;
     }
@@ -2427,21 +2429,43 @@
       if (!node || utils.isPage(node))
         return;
       const { style, id, type } = node;
-      if (!style || style.position !== "absolute")
+      if (!style || !["absolute", "fixed"].includes(style.position))
         return;
-      if (top && !utils.isNumber(style.top))
-        return;
-      if (left && !utils.isNumber(style.left))
-        return;
-      this.update({
+      const update = (style2) => this.update({
         id,
         type,
-        style: {
-          ...style,
-          left: Number(style.left) + left,
-          top: Number(style.top) + top
-        }
+        style: style2
       });
+      if (top) {
+        if (utils.isNumber(style.top)) {
+          update({
+            ...style,
+            top: Number(style.top) + Number(top),
+            bottom: ""
+          });
+        } else if (utils.isNumber(style.bottom)) {
+          update({
+            ...style,
+            bottom: Number(style.bottom) - Number(top),
+            top: ""
+          });
+        }
+      }
+      if (left) {
+        if (utils.isNumber(style.left)) {
+          update({
+            ...style,
+            left: Number(style.left) + Number(left),
+            right: ""
+          });
+        } else if (utils.isNumber(style.right)) {
+          update({
+            ...style,
+            right: Number(style.right) - Number(left),
+            left: ""
+          });
+        }
+      }
     }
     resetState() {
       this.set("root", null);
@@ -2752,7 +2776,7 @@
   };
 
   const _hoisted_1$p = { class: "m-fields-code-select-col" };
-  const _hoisted_2$h = { class: "code-select-container" };
+  const _hoisted_2$i = { class: "code-select-container" };
   const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
@@ -2820,7 +2844,7 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$h, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -2856,7 +2880,7 @@
   });
 
   const _hoisted_1$o = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$g = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
@@ -3013,7 +3037,7 @@
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3092,8 +3116,8 @@
   });
 
   const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-  const _hoisted_2$f = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-  const _hoisted_3$5 = { class: "el-input__inner" };
+  const _hoisted_2$g = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_3$6 = { class: "el-input__inner" };
   const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
@@ -3288,7 +3312,7 @@
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$n, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$f, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$g, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -3300,7 +3324,7 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
-            vue.createElementVNode("div", _hoisted_3$5, [
+            vue.createElementVNode("div", _hoisted_3$6, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
                 return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                   item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -3402,7 +3426,7 @@
   };
 
   const _hoisted_1$m = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$e = { class: "m-editor-data-source-methods-footer" };
+  const _hoisted_2$f = { class: "m-editor-data-source-methods-footer" };
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
@@ -3477,7 +3501,7 @@
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$e, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3506,7 +3530,7 @@
   });
 
   const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$d = { class: "data-source-method-select-container" };
+  const _hoisted_2$e = { class: "data-source-method-select-container" };
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
@@ -3586,7 +3610,7 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
-          vue.createElementVNode("div", _hoisted_2$d, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: cascaderConfig,
@@ -3678,7 +3702,7 @@
   });
 
   const _hoisted_1$k = { class: "m-fields-event-select" };
-  const _hoisted_2$c = {
+  const _hoisted_2$d = {
     key: 1,
     class: "fullWidth"
   };
@@ -3882,7 +3906,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -3932,7 +3956,7 @@
   });
 
   const _hoisted_1$j = { class: "m-fields-key-value" };
-  const _hoisted_2$b = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _hoisted_2$c = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
@@ -3992,7 +4016,7 @@
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_2$b,
+              _hoisted_2$c,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -4371,8 +4395,8 @@
   });
 
   const _hoisted_1$h = { class: "m-editor-empty-panel" };
-  const _hoisted_2$a = { class: "m-editor-empty-content" };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
+  const _hoisted_2$b = { class: "m-editor-empty-content" };
+  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
@@ -4394,7 +4418,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+          vue.createElementVNode("div", _hoisted_2$b, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
@@ -4402,7 +4426,7 @@
               vue.createElementVNode("div", null, [
                 vue.createVNode(_sfc_main$F, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$4
+              _hoisted_3$5
             ])
           ])
         ]);
@@ -4545,7 +4569,7 @@
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$a = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -4689,7 +4713,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$9, [
+              vue.createElementVNode("span", _hoisted_2$a, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -4990,7 +5014,7 @@
   });
 
   const _hoisted_1$e = { xmlns: "http://www.w3.org/2000/svg" };
-  const _hoisted_2$8 = /* @__PURE__ */ vue.createElementVNode("g", {
+  const _hoisted_2$9 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
@@ -5000,8 +5024,8 @@
     }),
     /* @__PURE__ */ vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
   ], -1);
-  const _hoisted_3$3 = [
-    _hoisted_2$8
+  const _hoisted_3$4 = [
+    _hoisted_2$9
   ];
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5010,7 +5034,7 @@
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _hoisted_3$3);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _hoisted_3$4);
       };
     }
   });
@@ -5021,9 +5045,9 @@
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$7 = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-  const _hoisted_4$1 = [
-    _hoisted_2$7
+  const _hoisted_2$8 = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_4$2 = [
+    _hoisted_2$8
   ];
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5032,14 +5056,14 @@
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _hoisted_4$1);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _hoisted_4$2);
       };
     }
   });
 
   const _hoisted_1$c = ["id"];
-  const _hoisted_2$6 = { class: "list-item" };
-  const _hoisted_3$2 = {
+  const _hoisted_2$7 = { class: "list-item" };
+  const _hoisted_3$3 = {
     key: 2,
     class: "right-tool"
   };
@@ -5144,7 +5168,7 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$6, [
+              vue.createElementVNode("div", _hoisted_2$7, [
                 data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
                   key: 0,
                   class: "codeIcon"
@@ -5156,7 +5180,7 @@
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                 }, vue.toDisplayString(data.name) + " (" + vue.toDisplayString(data.id) + ")", 3),
-                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
                   vue.createVNode(vue.unref(design.TMagicTooltip), {
                     effect: "dark",
                     content: editable.value ? "编辑" : "查看",
@@ -5340,8 +5364,8 @@
   });
 
   const _hoisted_1$a = ["id"];
-  const _hoisted_2$5 = { class: "list-item" };
-  const _hoisted_3$1 = {
+  const _hoisted_2$6 = { class: "list-item" };
+  const _hoisted_3$2 = {
     key: 2,
     class: "right-tool"
   };
@@ -5440,7 +5464,7 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$5, [
+              vue.createElementVNode("div", _hoisted_2$6, [
                 data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                   key: 0,
                   class: "codeIcon",
@@ -5454,7 +5478,7 @@
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
                 }, vue.toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
                   vue.createVNode(vue.unref(design.TMagicTooltip), {
                     effect: "dark",
                     content: editable.value ? "编辑" : "查看",
@@ -5499,7 +5523,7 @@
   });
 
   const _hoisted_1$9 = { class: "search-wrapper" };
-  const _hoisted_2$4 = { class: "data-source-list-panel-add-menu" };
+  const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
@@ -5572,7 +5596,7 @@
                   })
                 ]),
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_2$4, [
+                  vue.createElementVNode("div", _hoisted_2$5, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
                       return vue.openBlock(), vue.createBlock(_sfc_main$q, {
                         data: {
@@ -5610,7 +5634,7 @@
   });
 
   const _hoisted_1$8 = ["onClick", "onDragstart"];
-  const _hoisted_2$3 = ["title"];
+  const _hoisted_2$4 = ["title"];
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
@@ -5719,7 +5743,7 @@
                               }, null, 8, ["title", "icon"]),
                               vue.createElementVNode("span", {
                                 title: item.text
-                              }, vue.toDisplayString(item.text), 9, _hoisted_2$3)
+                              }, vue.toDisplayString(item.text), 9, _hoisted_2$4)
                             ])
                           ], 40, _hoisted_1$8);
                         }), 128))
@@ -6387,6 +6411,12 @@
   });
 
   const _hoisted_1$5 = {
+    key: 0,
+    class: "m-editor-sidebar"
+  };
+  const _hoisted_2$3 = { class: "m-editor-sidebar-header" };
+  const _hoisted_3$1 = ["onClick"];
+  const _hoisted_4$1 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
@@ -6401,8 +6431,6 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const tabPaneComponent = design.getConfig("components")?.tabPane;
-      const tabsComponent = design.getConfig("components")?.tabs;
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -6455,98 +6483,94 @@
         activeTabName
       });
       return (_ctx, _cache) => {
-        return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent)?.component || "el-tabs"), vue.mergeProps({
-          key: 0,
-          modelValue: activeTabName.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
-          class: "m-editor-sidebar tmagic-design-tabs"
-        }, vue.unref(tabsComponent)?.props({ type: "card", tabPosition: "left" }) || {}), {
-          default: vue.withCtx(() => [
+        return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+          vue.createElementVNode("div", _hoisted_2$3, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
-              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabPaneComponent)?.component || "el-tab-pane"), vue.mergeProps(vue.unref(tabPaneComponent)?.props({ name: config.text, lazy: config.lazy }) || {}, {
-                key: config.$key || index
-              }), {
-                label: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createElementBlock("div", {
-                    key: config.text
-                  }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
-                      key: 0,
-                      icon: config.icon
-                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
-                  ]))
-                ]),
-                default: vue.withCtx(() => [
-                  config ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
-                    config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
-                      name: "component-list-panel-header",
-                      fn: vue.withCtx(() => [
-                        config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ]),
-                      key: "0"
-                    } : void 0,
-                    config.$key === "component-list" || config.slots?.componentListItem ? {
-                      name: "component-list-item",
-                      fn: vue.withCtx(({ component }) => [
-                        config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
-                          key: 0,
-                          component
-                        }) : config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListItem), {
-                          key: 1,
-                          component
-                        }, null, 8, ["component"])) : vue.createCommentVNode("", true)
-                      ]),
-                      key: "1"
-                    } : void 0,
-                    config.$key === "layer" || config.slots?.layerPanelHeader ? {
-                      name: "layer-panel-header",
-                      fn: vue.withCtx(() => [
-                        config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ]),
-                      key: "2"
-                    } : void 0,
-                    config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
-                      name: "code-block-panel-header",
-                      fn: vue.withCtx(() => [
-                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ]),
-                      key: "3"
-                    } : void 0,
-                    config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
-                      name: "code-block-panel-tool",
-                      fn: vue.withCtx(({ id, data }) => [
-                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                          key: 0,
-                          id,
-                          data
-                        }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
-                      ]),
-                      key: "4"
-                    } : void 0,
-                    config.$key === "layer" || config.slots?.layerNodeContent ? {
-                      name: "layer-node-content",
-                      fn: vue.withCtx(({ data: nodeData, node }) => [
-                        config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                          key: 0,
-                          data: nodeData,
-                          node
-                        }) : config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeContent), {
-                          key: 1,
-                          data: nodeData,
-                          node
-                        }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
-                      ]),
-                      key: "5"
-                    } : void 0
-                  ]), 1040)) : vue.createCommentVNode("", true)
-                ]),
-                _: 2
-              }, 1040);
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
+                key: config.$key ?? index,
+                onClick: ($event) => activeTabName.value = config.text || `${index}`
+              }, [
+                config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+                  key: 0,
+                  icon: config.icon
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+              ], 10, _hoisted_3$1);
             }), 128))
           ]),
-          _: 3
-        }, 16, ["modelValue"])) : vue.createCommentVNode("", true);
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
+            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+              class: "m-editor-sidebar-content",
+              key: config.$key ?? index
+            }, [
+              config ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                  name: "component-list-panel-header",
+                  fn: vue.withCtx(() => [
+                    config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "0"
+                } : void 0,
+                config.$key === "component-list" || config.slots?.componentListItem ? {
+                  name: "component-list-item",
+                  fn: vue.withCtx(({ component }) => [
+                    config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
+                      key: 0,
+                      component
+                    }) : config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListItem), {
+                      key: 1,
+                      component
+                    }, null, 8, ["component"])) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "1"
+                } : void 0,
+                config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                  name: "layer-panel-header",
+                  fn: vue.withCtx(() => [
+                    config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "2"
+                } : void 0,
+                config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                  name: "code-block-panel-header",
+                  fn: vue.withCtx(() => [
+                    config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "3"
+                } : void 0,
+                config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                  name: "code-block-panel-tool",
+                  fn: vue.withCtx(({ id, data }) => [
+                    config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                      key: 0,
+                      id,
+                      data
+                    }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "4"
+                } : void 0,
+                config.$key === "layer" || config.slots?.layerNodeContent ? {
+                  name: "layer-node-content",
+                  fn: vue.withCtx(({ data: nodeData, node }) => [
+                    config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                      key: 0,
+                      data: nodeData,
+                      node
+                    }) : config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeContent), {
+                      key: 1,
+                      data: nodeData,
+                      node
+                    }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "5"
+                } : void 0
+              ]), 1040)) : vue.createCommentVNode("", true)
+            ])), [
+              [vue.vShow, activeTabName.value === config.text]
+            ]);
+          }), 128))
+        ])) : vue.createCommentVNode("", true);
       };
     }
   });