@tmagic/editor 1.4.14 → 1.4.16

package/dist/tmagic-editor.js

@@ -2,13 +2,13 @@ import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, c
 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, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+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, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
-import { isPage, isPageFragment, isPop, getNodePath, isNumber, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { isPage, isPageFragment, isPop, getNodePath, isNumber, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
 import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
@@ -429,7 +429,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             {
               type: "select",
               name: "codeType",
-              span: 8,
+              span: 6,
               options: [
                 { value: HookCodeType.CODE, text: "代码块" },
                 { value: HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
@@ -447,7 +447,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             {
               type: "code-select-col",
               name: "codeId",
-              span: 16,
+              span: 18,
               labelWidth: 0,
               display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
               notEditable: () => !services?.codeBlockService.getEditStatus()
@@ -455,7 +455,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             {
               type: "data-source-method-select",
               name: "codeId",
-              span: 16,
+              span: 18,
               labelWidth: 0,
               display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
               notEditable: () => !services?.dataSourceService.get("editable")
@@ -2416,9 +2416,17 @@ class Editor extends BaseService {
     const sourceIndicesInTargetParent = [];
     const sourceOutTargetParent = [];
     const newLayout = await this.getLayout(targetParent);
-    for (const config2 of configs) {
+    forConfigs: for (const config2 of configs) {
       const { parent, node: curNode } = this.getNodeInfo(config2.id, false);
-      if (!parent || !curNode) throw new Error("找不要删除的节点");
+      if (!parent || !curNode) {
+        continue;
+      }
+      const path = getNodePath(curNode.id, parent.items);
+      for (const node of path) {
+        if (targetParent.id === node.id) {
+          continue forConfigs;
+        }
+      }
       const index = getNodeIndex(curNode.id, parent);
       if (parent.id === targetParent.id) {
         if (typeof index !== "number" || index === -1) {
@@ -3761,20 +3769,46 @@ const useFloatBox = (slideKeys) => {
   const showingBoxKeys = computed(
     () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
   );
-  const isDragging = ref(false);
-  const dragstartHandler = () => isDragging.value = true;
+  const dragState = {
+    startOffset: {
+      x: 0,
+      y: 0
+    },
+    isDragging: false
+  };
+  const dragstartHandler = (e) => {
+    dragState.isDragging = true;
+    dragState.startOffset.x = e.clientX;
+    dragState.startOffset.y = e.clientY;
+  };
+  const effectiveDistance = 20;
   const dragendHandler = (key, e) => {
-    const navMenuRect = services?.uiService?.get("navMenuRect");
-    floatBoxStates.value[key] = {
-      left: e.clientX,
-      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
-      status: true
-    };
-    isDragging.value = false;
+    if (!dragState.isDragging) return;
+    const { startOffset } = dragState;
+    if (Math.abs(startOffset.x - e.clientX) > effectiveDistance || Math.abs(startOffset.y - e.clientY) > effectiveDistance) {
+      const navMenuRect = services?.uiService?.get("navMenuRect");
+      floatBoxStates.value[key] = {
+        left: e.clientX,
+        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+        status: true
+      };
+    }
+    dragState.isDragging = false;
   };
-  document.body.addEventListener("dragover", (e) => {
-    if (!isDragging.value) return;
+  const dragoverHandler = (e) => {
+    if (!dragState.isDragging) return;
     e.preventDefault();
+  };
+  const blurHandler = () => {
+    dragState.startOffset.x = 0;
+    dragState.startOffset.y = 0;
+    dragState.isDragging = false;
+  };
+  globalThis.document.body.addEventListener("dragover", dragoverHandler);
+  globalThis.addEventListener("blur", blurHandler);
+  onBeforeUnmount(() => {
+    globalThis.document.body.removeEventListener("dragover", dragoverHandler);
+    globalThis.removeEventListener("blur", blurHandler);
   });
   watch(
     () => slideKeys.value,
@@ -4332,19 +4366,26 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           },
           onChange: onChangeHandler
         }, null, 8, ["model-value", "disabled", "size", "options", "props"])),
-        selectDataSourceId.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
+        selectDataSourceId.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 2,
-          class: "m-fields-select-action-button",
-          size: _ctx.size,
-          onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
+          content: notEditable.value ? "查看" : "编辑"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Y, {
-              icon: !notEditable.value ? unref(Edit) : unref(View)
-            }, null, 8, ["icon"])
+            createVNode(unref(TMagicButton), {
+              class: "m-fields-select-action-button",
+              size: _ctx.size,
+              onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$Y, {
+                  icon: !notEditable.value ? unref(Edit) : unref(View)
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }, 8, ["size"])
           ]),
           _: 1
-        }, 8, ["size"])) : createCommentVNode("", true)
+        }, 8, ["content"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -4475,18 +4516,26 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
           onChange: onChangeHandler
         }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
-        _ctx.config.fieldConfig ? (openBlock(), createBlock(unref(TMagicButton), {
+        _ctx.config.fieldConfig ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 2,
-          style: { "margin-left": "5px" },
-          type: showDataSourceFieldSelect.value ? "primary" : "default",
-          size: _ctx.size,
-          onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+          disabled: showDataSourceFieldSelect.value,
+          content: "选择数据源"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Y, { icon: unref(Coin) }, null, 8, ["icon"])
+            createVNode(unref(TMagicButton), {
+              style: { "margin-left": "5px" },
+              type: showDataSourceFieldSelect.value ? "primary" : "default",
+              size: _ctx.size,
+              onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$Y, { icon: unref(Coin) }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }, 8, ["type", "size"])
           ]),
           _: 1
-        }, 8, ["type", "size"])) : createCommentVNode("", true)
+        }, 8, ["disabled"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -5189,7 +5238,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         ...paramState
       }));
     };
-    const paramsConfig = ref(getParamItemsConfig(props.model.dataSourceMethod));
+    const paramsConfig = ref(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
     const setParamsConfig = (dataSourceMethod, formState = {}) => {
       paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
       if (paramsConfig.value.length) {
@@ -5241,19 +5290,26 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: onChangeHandler
           }, null, 8, ["config", "model", "size"]),
-          _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
+          _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
-            class: "m-fields-select-action-button",
-            size: _ctx.size,
-            onClick: editCodeHandler
+            content: notEditable.value ? "查看" : "编辑"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Y, {
-                icon: !notEditable.value ? unref(Edit) : unref(View)
-              }, null, 8, ["icon"])
+              createVNode(unref(TMagicButton), {
+                class: "m-fields-select-action-button",
+                size: _ctx.size,
+                onClick: editCodeHandler
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$Y, {
+                    icon: !notEditable.value ? unref(Edit) : unref(View)
+                  }, null, 8, ["icon"])
+                ]),
+                _: 1
+              }, 8, ["size"])
             ]),
             _: 1
-          }, 8, ["size"])) : createCommentVNode("", true)
+          }, 8, ["content"])) : createCommentVNode("", true)
         ]),
         paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$T, {
           key: 0,
@@ -5591,19 +5647,26 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "last-values": _ctx.lastValues,
           onChange: changeHandler
         }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]),
-        _ctx.model[_ctx.name] && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
+        _ctx.model[_ctx.name] && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 0,
-          class: "m-fields-select-action-button",
-          size: _ctx.size,
-          onClick: editHandler
+          content: notEditable.value ? "查看" : "编辑"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Y, {
-              icon: !notEditable.value ? unref(Edit) : unref(View)
-            }, null, 8, ["icon"])
+            createVNode(unref(TMagicButton), {
+              class: "m-fields-select-action-button",
+              size: _ctx.size,
+              onClick: editHandler
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$Y, {
+                  icon: !notEditable.value ? unref(Edit) : unref(View)
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }, 8, ["size"])
           ]),
           _: 1
-        }, 8, ["size"])) : createCommentVNode("", true)
+        }, 8, ["content"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -7863,7 +7926,7 @@ const updateStatus = (nodeStatusMap, id, status) => {
   });
 };
 
-const _hoisted_1$9 = ["draggable", "data-node-id", "data-is-container"];
+const _hoisted_1$9 = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
 const _hoisted_2$6 = { class: "tree-node-label" };
 const _hoisted_3$3 = { class: "tree-node-tool" };
 const _hoisted_4$3 = {
@@ -7877,6 +7940,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "TreeNode",
   props: {
     data: {},
+    parent: {},
+    parentsId: { default: () => [] },
     nodeStatusMap: {},
     indent: { default: 0 }
   },
@@ -7928,6 +7993,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         class: "m-editor-tree-node",
         draggable: draggable.value,
         "data-node-id": _ctx.data.id,
+        "data-parent-id": _ctx.parent?.id,
+        "data-parents-id": _ctx.parentsId,
         "data-is-container": Array.isArray(_ctx.data.items),
         onDragstart: handleDragStart,
         onDragleave: handleDragLeave,
@@ -7966,6 +8033,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             return openBlock(), createBlock(_component_TreeNode, {
               key: item.id,
               data: item,
+              parent: _ctx.data,
+              parentsId: [..._ctx.parentsId, _ctx.data.id],
               "node-status-map": _ctx.nodeStatusMap,
               indent: _ctx.indent + 11
             }, {
@@ -7979,7 +8048,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
               ]),
               _: 2
-            }, 1032, ["data", "node-status-map", "indent"]);
+            }, 1032, ["data", "parent", "parentsId", "node-status-map", "indent"]);
           }), 128))
         ])) : createCommentVNode("", true)
       ], 40, _hoisted_1$9)), [
@@ -8719,13 +8788,16 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const subMenu = ref();
     const visible = ref(false);
     const subMenuData = ref([]);
+    const zIndex = useZIndex();
+    const curZIndex = ref(0);
     const menuPosition = ref({
       left: 0,
       top: 0
     });
     const menuStyle = computed(() => ({
       top: `${menuPosition.value.top}px`,
-      left: `${menuPosition.value.left}px`
+      left: `${menuPosition.value.left}px`,
+      zIndex: curZIndex.value
     }));
     const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
     const hide = () => {
@@ -8765,6 +8837,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         visible.value = true;
         nextTick(() => {
           e && setPosition(e);
+          curZIndex.value = zIndex.nextZIndex();
           emit("show");
         });
       }, 300);
@@ -9118,6 +9191,9 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     }
   };
   const multiSelect = async (data) => {
+    if (isPage(data) || isPageFragment(data)) {
+      return;
+    }
     const nodes = services?.editorService.get("nodes") || [];
     const newNodes = [];
     let isCancel = false;
@@ -9126,6 +9202,9 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
         isCancel = true;
         return;
       }
+      if (isPage(node) || isPageFragment(node)) {
+        return;
+      }
       newNodes.push(node.id);
     });
     if (!isCancel || newNodes.length === 0) {
@@ -9205,6 +9284,7 @@ const useDrag = (services) => {
     const targetEl = getNodeEl(event.target);
     if (!targetEl || targetEl !== event.currentTarget) return;
     event.dataTransfer.effectAllowed = "move";
+    dragState.nodeId = targetEl.dataset.nodeId;
     try {
       event.dataTransfer.setData(
         "text/json",
@@ -9221,26 +9301,42 @@ const useDrag = (services) => {
     if (!targetEl?.draggable) return;
     const labelEl = targetEl.children[0];
     if (!labelEl) return;
+    removeClassName(labelEl, "drag-before", "drag-after", "drag-inner");
     const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
     const distance = event.clientY - targetTop;
     const isContainer = targetEl.dataset.isContainer === "true";
+    const targetNodeId = targetEl.dataset.nodeId;
+    const { nodeId } = dragState;
+    const parentsId = targetEl.dataset.parentsId?.split(",");
+    if (!targetNodeId) {
+      return;
+    }
+    if (parentsId) {
+      let targetIdIndex = -1;
+      for (let i = 0, l = parentsId.length; i < l; i++) {
+        const id = parentsId[i];
+        if (nodeId === id) {
+          targetIdIndex = i;
+        }
+        if (parentsId.includes(`${nodeId}`) && i >= targetIdIndex) {
+          return;
+        }
+      }
+    }
     if (distance < targetHeight / 3) {
       dragState.dropType = "before";
       addClassName(labelEl, globalThis.document, "drag-before");
-      removeClassName(labelEl, "drag-after", "drag-inner");
     } else if (distance > targetHeight * 2 / 3) {
       dragState.dropType = "after";
       addClassName(labelEl, globalThis.document, "drag-after");
-      removeClassName(labelEl, "drag-before", "drag-inner");
     } else if (isContainer) {
       dragState.dropType = "inner";
       addClassName(labelEl, globalThis.document, "drag-inner");
-      removeClassName(labelEl, "drag-before", "drag-after");
     }
     if (!dragState.dropType) {
       return;
     }
-    dragState.dragOverNodeId = targetEl.dataset.nodeId || "";
+    dragState.dragOverNodeId = targetNodeId;
     dragState.container = event.currentTarget;
     event.preventDefault();
   };
@@ -9651,7 +9747,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const stageOptions = inject("stageOptions");
     const stage = computed(() => services?.editorService.get("stage"));
     const list = computed(
-      () => services?.componentListService.getList().map((group) => ({
+      () => (services?.componentListService.getList() || []).map((group) => ({
         ...group,
         items: group.items.filter((item) => item.text.includes(searchText.value))
       }))
@@ -9711,60 +9807,62 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), null, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "component-list-panel-header"),
-          createVNode(unref(TMagicCollapse), {
-            class: "ui-component-panel",
-            "model-value": collapseValue.value
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
-                    key: index,
-                    name: `${index}`
-                  }, {
-                    title: withCtx(() => [
-                      createVNode(_sfc_main$Y, { icon: unref(Grid) }, null, 8, ["icon"]),
-                      createTextVNode(toDisplayString(group.title), 1)
-                    ]),
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
-                        return openBlock(), createElementBlock("div", {
-                          class: "component-item",
-                          draggable: "true",
-                          key: item.type,
-                          onClick: ($event) => appendComponent(item),
-                          onDragstart: ($event) => dragstartHandler(item, $event),
-                          onDragend: dragendHandler,
-                          onDrag: dragHandler
-                        }, [
-                          renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(unref(TMagicTooltip), {
-                              placement: "right",
-                              disabled: !Boolean(item.desc),
-                              content: item.desc
-                            }, {
-                              default: withCtx(() => [
-                                createVNode(_sfc_main$Y, {
-                                  icon: item.icon
-                                }, null, 8, ["icon"])
-                              ]),
-                              _: 2
-                            }, 1032, ["disabled", "content"]),
-                            createElementVNode("span", {
-                              title: item.text
-                            }, toDisplayString(item.text), 9, _hoisted_2$3)
-                          ])
-                        ], 40, _hoisted_1$4);
-                      }), 128))
-                    ]),
-                    _: 2
-                  }, 1032, ["name"])) : createCommentVNode("", true)
-                ], 64);
-              }), 256))
-            ]),
-            _: 3
-          }, 8, ["model-value"])
+          createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+          renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [
+            createVNode(unref(TMagicCollapse), {
+              class: "ui-component-panel",
+              "model-value": collapseValue.value
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
+                  return openBlock(), createElementBlock(Fragment, null, [
+                    group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
+                      key: index,
+                      name: `${index}`
+                    }, {
+                      title: withCtx(() => [
+                        createVNode(_sfc_main$Y, { icon: unref(Grid) }, null, 8, ["icon"]),
+                        createTextVNode(toDisplayString(group.title), 1)
+                      ]),
+                      default: withCtx(() => [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+                          return openBlock(), createElementBlock("div", {
+                            class: "component-item",
+                            draggable: "true",
+                            key: item.type,
+                            onClick: ($event) => appendComponent(item),
+                            onDragstart: ($event) => dragstartHandler(item, $event),
+                            onDragend: dragendHandler,
+                            onDrag: dragHandler
+                          }, [
+                            renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
+                              createVNode(unref(TMagicTooltip), {
+                                placement: "right",
+                                disabled: !Boolean(item.desc),
+                                content: item.desc
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_sfc_main$Y, {
+                                    icon: item.icon
+                                  }, null, 8, ["icon"])
+                                ]),
+                                _: 2
+                              }, 1032, ["disabled", "content"]),
+                              createElementVNode("span", {
+                                title: item.text
+                              }, toDisplayString(item.text), 9, _hoisted_2$3)
+                            ])
+                          ], 40, _hoisted_1$4);
+                        }), 128))
+                      ]),
+                      _: 2
+                    }, 1032, ["name"])) : createCommentVNode("", true)
+                  ], 64);
+                }), 256))
+              ]),
+              _: 3
+            }, 8, ["model-value"])
+          ])
         ]),
         _: 3
       });
@@ -9777,7 +9875,7 @@ const _hoisted_1$3 = {
   class: "m-editor-sidebar"
 };
 const _hoisted_2$2 = { class: "m-editor-sidebar-header" };
-const _hoisted_3$1 = ["onClick", "onDragend"];
+const _hoisted_3$1 = ["draggable", "onClick", "onDragend"];
 const _hoisted_4$1 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
@@ -9879,6 +9977,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         activeTabName.value = nextSlideBarItem?.text;
       }
     );
+    const headerItemClickHandler = async (config, index) => {
+      if (typeof config.beforeClick === "function") {
+        if (await config.beforeClick(config) === false) {
+          return;
+        }
+      }
+      activeTabName.value = config.text || config.$key || `${index}`;
+    };
     __expose({
       activeTabName
     });
@@ -9889,10 +9995,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
               return withDirectives((openBlock(), createElementBlock("div", {
                 class: normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
-                draggable: "true",
+                draggable: config.draggable ?? true,
                 key: config.$key ?? index,
                 style: normalizeStyle(config.tabStyle || {}),
-                onClick: ($event) => activeTabName.value = config.text || config.$key || `${index}`,
+                onClick: ($event) => headerItemClickHandler(config, index),
                 onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
@@ -9912,16 +10018,26 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               class: "m-editor-sidebar-content",
               key: config.$key ?? index
             }, [
-              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+              config?.component && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
                 key: 0,
                 ref_for: true
               }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+                config.$key === "component-list" || config.slots?.componentList ? {
+                  name: "component-list",
+                  fn: withCtx(({ componentGroupList }) => [
+                    config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list", {
+                      key: 0,
+                      componentGroupList
+                    }) : config.slots?.componentList ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentList), { key: 1 })) : createCommentVNode("", true)
+                  ]),
+                  key: "0"
+                } : void 0,
                 config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                   name: "component-list-panel-header",
                   fn: withCtx(() => [
                     config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "0"
+                  key: "1"
                 } : void 0,
                 config.$key === "component-list" || config.slots?.componentListItem ? {
                   name: "component-list-item",
@@ -9934,21 +10050,21 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       component
                     }, null, 8, ["component"])) : createCommentVNode("", true)
                   ]),
-                  key: "1"
+                  key: "2"
                 } : void 0,
                 config.$key === "layer" || config.slots?.layerPanelHeader ? {
                   name: "layer-panel-header",
                   fn: withCtx(() => [
                     config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "2"
+                  key: "3"
                 } : void 0,
                 config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
                   name: "code-block-panel-header",
                   fn: withCtx(() => [
                     config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "3"
+                  key: "4"
                 } : void 0,
                 config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
                   name: "code-block-panel-tool",
@@ -9959,14 +10075,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       data
                     }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "4"
+                  key: "5"
                 } : void 0,
                 config.$key === "code-block" || config.slots?.codeBlockPanelSearch ? {
                   name: "code-block-panel-search",
                   fn: withCtx(() => [
                     config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-search", { key: 0 }) : config.slots?.codeBlockPanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "5"
+                  key: "6"
                 } : void 0,
                 config.$key === "layer" || config.slots?.layerNodeContent ? {
                   name: "layer-node-content",
@@ -9979,7 +10095,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       data: nodeData
                     }, null, 8, ["data"])) : createCommentVNode("", true)
                   ]),
-                  key: "6"
+                  key: "7"
                 } : void 0,
                 config.$key === "layer" || config.slots?.layerNodeLabel ? {
                   name: "layer-node-label",
@@ -9992,7 +10108,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       data: nodeData
                     }, null, 8, ["data"])) : createCommentVNode("", true)
                   ]),
-                  key: "7"
+                  key: "8"
                 } : void 0,
                 config.$key === "layer" || config.slots?.layerNodeTool ? {
                   name: "layer-node-tool",
@@ -10005,7 +10121,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       data: nodeData
                     }, null, 8, ["data"])) : createCommentVNode("", true)
                   ]),
-                  key: "8"
+                  key: "9"
                 } : void 0,
                 config.$key === "data-source" || config.slots?.dataSourcePanelTool ? {
                   name: "data-source-panel-tool",
@@ -10015,14 +10131,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       data
                     }) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "9"
+                  key: "10"
                 } : void 0,
                 config.$key === "data-source" || config.slots?.dataSourcePanelSearch ? {
                   name: "data-source-panel-search",
                   fn: withCtx(() => [
                     config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-search", { key: 0 }) : config.slots?.dataSourcePanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "10"
+                  key: "11"
                 } : void 0
               ]), 1040)) : createCommentVNode("", true)
             ])), [
@@ -12422,6 +12538,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "layer-node-tool": withCtx(({ data }) => [
                 renderSlot(_ctx.$slots, "layer-node-tool", { data })
               ]),
+              "component-list": withCtx(({ componentGroupList }) => [
+                renderSlot(_ctx.$slots, "component-list", { componentGroupList })
+              ]),
               "component-list-panel-header": withCtx(() => [
                 renderSlot(_ctx.$slots, "component-list-panel-header")
               ]),