@tmagic/editor 1.1.1 → 1.1.2

package/dist/tmagic-editor.umd.js

@@ -30,13 +30,6 @@
   const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
-  if (typeof global === "undefined") {
-    window.global = window;
-  }
-  if (typeof globalThis === "undefined") {
-    window.globalThis = window;
-  }
-
   const _sfc_main$o = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
@@ -63,7 +56,7 @@
     return target;
   };
 
-  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
       style: vue.normalizeStyle(`height: ${_ctx.height}`),
@@ -72,7 +65,7 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$b]]);
+  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$a]]);
 
   const _sfc_main$n = vue.defineComponent({
     name: "m-fields-code-link",
@@ -130,7 +123,7 @@
     }
   });
 
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_link = vue.resolveComponent("m-fields-link");
     return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
       config: _ctx.formConfig,
@@ -139,9 +132,9 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$a]]);
+  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$9]]);
 
-  const _hoisted_1$b = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "UISelect",
     props: {
@@ -207,7 +200,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$b
+              _hoisted_1$c
             ]),
             _: 1
           }, 8, ["icon"])
@@ -378,14 +371,14 @@
     }
   });
 
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     ref: "codeEditor",
     class: "magic-code-editor"
   };
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, null, 512);
+  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, null, 512);
   }
-  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$9]]);
+  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$8]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -1901,7 +1894,8 @@
     columnWidth: defaultColumnWidth,
     showGuides: true,
     showRule: true,
-    propsPanelSize: "small"
+    propsPanelSize: "small",
+    showAddPageButton: true
   });
   class Ui extends BaseService {
     constructor() {
@@ -2081,13 +2075,13 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "m-editor-empty-panel" };
+  const _hoisted_1$a = { class: "m-editor-empty-panel" };
   const _hoisted_2$4 = { class: "m-editor-empty-content" };
   const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
       vue.createElementVNode("div", _hoisted_2$4, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
@@ -2106,7 +2100,7 @@
       ])
     ]);
   }
-  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$8]]);
+  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$7]]);
 
   const _sfc_main$j = vue.defineComponent({
     name: "m-editor-resize",
@@ -2151,16 +2145,16 @@
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     ref: "target",
     class: "m-editor-resizer"
   };
-  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, [
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$9, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$7]]);
+  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$6]]);
 
   const _sfc_main$i = vue.defineComponent({
     components: {
@@ -2192,17 +2186,17 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "m-editor" };
+  const _hoisted_1$8 = { class: "m-editor" };
   const _hoisted_2$3 = {
     key: 1,
     class: "m-editor-content"
   };
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     const _component_add_page_box = vue.resolveComponent("add-page-box");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
       vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
       _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
         key: 0,
@@ -2243,9 +2237,9 @@
       ]))
     ]);
   }
-  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$6]]);
+  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$5]]);
 
-  const _hoisted_1$6 = ["src"];
+  const _hoisted_1$7 = ["src"];
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "Icon",
     props: {
@@ -2254,20 +2248,29 @@
     setup(__props) {
       return (_ctx, _cache) => {
         const _component_el_icon = vue.resolveComponent("el-icon");
-        return !__props.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
+        return !__props.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+          key: 0,
+          class: "magic-editor-icon"
+        }, {
           default: vue.withCtx(() => [
             vue.createVNode(vue.unref(iconsVue.Edit))
           ]),
           _: 1
-        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
+        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+          key: 1,
+          class: "magic-editor-icon"
+        }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$6)
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$7)
           ]),
           _: 1
         })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
           key: 2,
-          class: vue.normalizeClass(__props.icon)
-        }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
+          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
+        }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
+          key: 3,
+          class: "magic-editor-icon"
+        }, {
           default: vue.withCtx(() => [
             (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
           ]),
@@ -2277,7 +2280,7 @@
     }
   });
 
-  const _hoisted_1$5 = {
+  const _hoisted_1$6 = {
     key: 1,
     class: "menu-item-text"
   };
@@ -2365,7 +2368,7 @@
           __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
             key: 0,
             direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             __props.data.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
               key: 0,
               effect: "dark",
@@ -2608,7 +2611,7 @@
     }
   });
 
-  const _hoisted_1$4 = { class: "`m-editor-props-panel" };
+  const _hoisted_1$5 = { class: "`m-editor-props-panel" };
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "PropsPanel",
     emits: ["mounted"],
@@ -2658,7 +2661,7 @@
       expose({ submit });
       return (_ctx, _cache) => {
         const _component_m_form = vue.resolveComponent("m-form");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(_component_m_form, {
             ref_key: "configForm",
@@ -2675,10 +2678,11 @@
     }
   });
 
-  const _sfc_main$d = vue.defineComponent({
-    name: "ui-component-panel",
-    components: { MIcon: _sfc_main$h },
-    setup() {
+  const _hoisted_1$4 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+  const _hoisted_2$1 = ["onClick", "onDragstart"];
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+    __name: "ComponentListPanel",
+    setup(__props) {
       const searchText = vue.ref("");
       const services = vue.inject("services");
       const stageOptions = vue.inject("stageOptions");
@@ -2691,132 +2695,124 @@
       let timeout;
       let clientX;
       let clientY;
-      return {
-        searchText,
-        collapseValue,
-        list,
-        appendComponent({ text, type, data = {} }) {
-          services?.editorService.add({
+      const appendComponent = ({ text, type, data = {} }) => {
+        services?.editorService.add({
+          name: text,
+          type,
+          ...data
+        });
+      };
+      const dragstartHandler = ({ text, type, data = {} }, e) => {
+        if (e.dataTransfer) {
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("data", serialize__default.default({
             name: text,
             type,
             ...data
-          });
-        },
-        dragstartHandler({ text, type, data = {} }, e) {
-          if (e.dataTransfer) {
-            e.dataTransfer.effectAllowed = "move";
-            e.dataTransfer.setData("data", serialize__default.default({
-              name: text,
-              type,
-              ...data
-            }).replace(/"(\w+)":\s/g, "$1: "));
-          }
-        },
-        dragendHandler() {
+          }).replace(/"(\w+)":\s/g, "$1: "));
+        }
+      };
+      const dragendHandler = () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
+        const doc = stage.value?.renderer.contentWindow?.document;
+        if (doc && stageOptions) {
+          utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+        }
+        clientX = 0;
+        clientY = 0;
+      };
+      const dragHandler = (e) => {
+        if (e.clientX !== clientX || e.clientY !== clientY) {
+          clientX = e.clientX;
+          clientY = e.clientY;
           if (timeout) {
             globalThis.clearTimeout(timeout);
             timeout = void 0;
           }
-          const doc = stage.value?.renderer.contentWindow?.document;
-          if (doc && stageOptions) {
-            utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-          }
-          clientX = 0;
-          clientY = 0;
-        },
-        dragHandler(e) {
-          if (e.clientX !== clientX || e.clientY !== clientY) {
-            clientX = e.clientX;
-            clientY = e.clientY;
-            if (timeout) {
-              globalThis.clearTimeout(timeout);
-              timeout = void 0;
-            }
-            return;
-          }
-          if (timeout || !stage.value)
-            return;
-          timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+          return;
         }
+        if (timeout || !stage.value)
+          return;
+        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
       };
-    }
-  });
-
-  const _hoisted_1$3 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-  const _hoisted_2$1 = ["onClick", "onDragstart"];
-  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_el_input = vue.resolveComponent("el-input");
-    const _component_m_icon = vue.resolveComponent("m-icon");
-    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-    const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
-    const _component_el_collapse = vue.resolveComponent("el-collapse");
-    const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-    return vue.openBlock(), vue.createBlock(_component_el_scrollbar, null, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
-        vue.createVNode(_component_el_collapse, {
-          class: "ui-component-panel",
-          "model-value": _ctx.collapseValue
-        }, {
+      return (_ctx, _cache) => {
+        const _component_el_input = vue.resolveComponent("el-input");
+        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+        const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
+        const _component_el_collapse = vue.resolveComponent("el-collapse");
+        const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
+        return vue.openBlock(), vue.createBlock(_component_el_scrollbar, null, {
           default: vue.withCtx(() => [
-            vue.createVNode(_component_el_input, {
-              "prefix-icon": "el-icon-search",
-              placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
-              class: "search-input",
-              size: "small",
-              clearable: "",
-              modelValue: _ctx.searchText,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.searchText = $event)
-            }, null, 8, ["modelValue"]),
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.list, (group, index) => {
-              return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                group.items && group.items.length ? (vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
-                  key: index,
-                  name: index
-                }, {
-                  title: vue.withCtx(() => [
-                    _hoisted_1$3,
-                    vue.createTextVNode(vue.toDisplayString(group.title), 1)
-                  ]),
-                  default: vue.withCtx(() => [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
-                      return vue.openBlock(), vue.createElementBlock("div", {
-                        class: "component-item",
-                        draggable: "true",
-                        key: item.type,
-                        onClick: ($event) => _ctx.appendComponent(item),
-                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event),
-                        onDragend: _cache[1] || (_cache[1] = (...args) => _ctx.dragendHandler && _ctx.dragendHandler(...args)),
-                        onDrag: _cache[2] || (_cache[2] = (...args) => _ctx.dragHandler && _ctx.dragHandler(...args))
-                      }, [
-                        vue.createVNode(_component_m_icon, {
-                          icon: item.icon
-                        }, null, 8, ["icon"]),
-                        vue.createVNode(_component_el_tooltip, {
-                          effect: "dark",
-                          placement: "bottom",
-                          content: item.text
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createElementVNode("span", null, vue.toDisplayString(item.text), 1)
-                          ]),
-                          _: 2
-                        }, 1032, ["content"])
-                      ], 40, _hoisted_2$1);
-                    }), 128))
-                  ]),
-                  _: 2
-                }, 1032, ["name"])) : vue.createCommentVNode("", true)
-              ], 64);
-            }), 256))
+            vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
+            vue.createVNode(_component_el_collapse, {
+              class: "ui-component-panel",
+              "model-value": vue.unref(collapseValue)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_el_input, {
+                  "prefix-icon": "el-icon-search",
+                  placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+                  class: "search-input",
+                  size: "small",
+                  clearable: "",
+                  modelValue: searchText.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
+                }, null, 8, ["modelValue"]),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (group, index) => {
+                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                    group.items && group.items.length ? (vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
+                      key: index,
+                      name: index
+                    }, {
+                      title: vue.withCtx(() => [
+                        _hoisted_1$4,
+                        vue.createTextVNode(vue.toDisplayString(group.title), 1)
+                      ]),
+                      default: vue.withCtx(() => [
+                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
+                          return vue.openBlock(), vue.createElementBlock("div", {
+                            class: "component-item",
+                            draggable: "true",
+                            key: item.type,
+                            onClick: ($event) => appendComponent(item),
+                            onDragstart: ($event) => dragstartHandler(item, $event),
+                            onDragend: dragendHandler,
+                            onDrag: dragHandler
+                          }, [
+                            vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
+                              vue.createVNode(_sfc_main$h, {
+                                icon: item.icon
+                              }, null, 8, ["icon"]),
+                              vue.createVNode(_component_el_tooltip, {
+                                effect: "dark",
+                                placement: "bottom",
+                                content: item.text
+                              }, {
+                                default: vue.withCtx(() => [
+                                  vue.createElementVNode("span", null, vue.toDisplayString(item.text), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["content"])
+                            ])
+                          ], 40, _hoisted_2$1);
+                        }), 128))
+                      ]),
+                      _: 2
+                    }, 1032, ["name"])) : vue.createCommentVNode("", true)
+                  ], 64);
+                }), 256))
+              ]),
+              _: 3
+            }, 8, ["model-value"])
           ]),
-          _: 1
-        }, 8, ["model-value"])
-      ]),
-      _: 3
-    });
-  }
-  const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$5]]);
+          _: 3
+        });
+      };
+    }
+  });
 
   const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "ContentMenu",
@@ -3198,7 +3194,7 @@
     }
   });
 
-  const _hoisted_1$2 = ["id", "onMouseenter"];
+  const _hoisted_1$3 = ["id", "onMouseenter"];
   function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
@@ -3252,7 +3248,7 @@
               }, () => [
                 vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
               ])
-            ], 42, _hoisted_1$2)
+            ], 42, _hoisted_1$3)
           ]),
           _: 3
         }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd", "onNodeCollapse", "onNodeExpand"])) : vue.createCommentVNode("", true),
@@ -3284,7 +3280,7 @@
                 type: "component",
                 icon: iconsVue.Coin,
                 text: "\u7EC4\u4EF6",
-                component: ComponentListPanel,
+                component: _sfc_main$d,
                 slots: {}
               };
             case "layer":
@@ -3303,7 +3299,7 @@
     }
   });
 
-  const _hoisted_1$1 = {
+  const _hoisted_1$2 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
@@ -3322,7 +3318,7 @@
             key: 0,
             icon: _ctx.config.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
+          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
         ]))
       ]),
       default: vue.withCtx(() => [
@@ -3333,6 +3329,18 @@
               _ctx.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
             ])
           } : void 0,
+          _ctx.data === "component-list" || _ctx.config.slots?.componentListItem ? {
+            name: "component-list-item",
+            fn: vue.withCtx(({ component }) => [
+              _ctx.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
+                key: 0,
+                component
+              }) : _ctx.config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.componentListItem), {
+                key: 1,
+                component
+              }, null, 8, ["component"])) : vue.createCommentVNode("", true)
+            ])
+          } : void 0,
           _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
             name: "layer-panel-header",
             fn: vue.withCtx(() => [
@@ -3403,6 +3411,12 @@
               fn: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "component-list-panel-header")
               ])
+            } : void 0,
+            item === "component-list" ? {
+              name: "component-list-item",
+              fn: vue.withCtx(({ component }) => [
+                vue.renderSlot(_ctx.$slots, "component-list-item", { component })
+              ])
             } : void 0
           ]), 1032, ["data"]);
         }), 128))
@@ -3412,16 +3426,22 @@
   }
   const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
 
+  const _hoisted_1$1 = {
+    key: 1,
+    style: { "width": "21px" }
+  };
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBarScrollContainer",
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
+      const uiService = services?.uiService;
       const pageBar = vue.ref();
       const itemsContainer = vue.ref();
       const pageBarWidth = vue.ref(0);
       const canScroll = vue.ref(false);
-      const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 105);
+      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
+      const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
       let translateLeft = 0;
       const resizeObserver = new ResizeObserver((entries) => {
         for (const { contentRect } of entries) {
@@ -3432,7 +3452,7 @@
       });
       const setCanScroll = () => {
         if (itemsContainer.value) {
-          canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+          canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
         }
       };
       const scroll = (type) => {
@@ -3489,7 +3509,8 @@
           ref_key: "pageBar",
           ref: pageBar
         }, [
-          vue.createElementVNode("div", {
+          vue.unref(showAddPageButton) ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
             id: "m-editor-page-bar-add-icon",
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
@@ -3500,9 +3521,9 @@
               ]),
               _: 1
             })
-          ]),
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
+            key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
@@ -3514,7 +3535,7 @@
             })
           ])) : vue.createCommentVNode("", true),
           vue.unref(root) ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
+            key: 3,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
             ref: itemsContainer,
@@ -3523,7 +3544,7 @@
             vue.renderSlot(_ctx.$slots, "default")
           ], 4)) : vue.createCommentVNode("", true),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 2,
+            key: 4,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
@@ -4179,8 +4200,8 @@
           config.style = {
             ...style,
             position,
-            top,
-            left
+            top: top / zoom.value,
+            left: left / zoom.value
           };
           config.inputEvent = e;
           services?.editorService.add(config, parent);
@@ -4559,6 +4580,9 @@
             "component-list-panel-header": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "component-list-panel-header")
             ]),
+            "component-list-item": vue.withCtx(({ component }) => [
+              vue.renderSlot(_ctx.$slots, "component-list-item", { component })
+            ]),
             _: 3
           }, 8, ["data"])
         ])
@@ -4620,7 +4644,7 @@
 
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = ComponentListPanel;
+  exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;