@tmagic/editor 1.4.14 → 1.4.16

package/dist/tmagic-editor.umd.cjs

@@ -433,7 +433,7 @@
               {
                 type: "select",
                 name: "codeType",
-                span: 8,
+                span: 6,
                 options: [
                   { value: schema.HookCodeType.CODE, text: "代码块" },
                   { value: schema.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
@@ -451,7 +451,7 @@
               {
                 type: "code-select-col",
                 name: "codeId",
-                span: 16,
+                span: 18,
                 labelWidth: 0,
                 display: (mForm, { model }) => model.codeType !== schema.HookCodeType.DATA_SOURCE_METHOD,
                 notEditable: () => !services?.codeBlockService.getEditStatus()
@@ -459,7 +459,7 @@
               {
                 type: "data-source-method-select",
                 name: "codeId",
-                span: 16,
+                span: 18,
                 labelWidth: 0,
                 display: (mForm, { model }) => model.codeType === schema.HookCodeType.DATA_SOURCE_METHOD,
                 notEditable: () => !services?.dataSourceService.get("editable")
@@ -2420,9 +2420,17 @@
       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 = utils.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) {
@@ -3765,20 +3773,46 @@
     const showingBoxKeys = vue.computed(
       () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
     );
-    const isDragging = vue.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);
+    vue.onBeforeUnmount(() => {
+      globalThis.document.body.removeEventListener("dragover", dragoverHandler);
+      globalThis.removeEventListener("blur", blurHandler);
     });
     vue.watch(
       () => slideKeys.value,
@@ -4336,19 +4370,26 @@
             },
             onChange: onChangeHandler
           }, null, 8, ["model-value", "disabled", "size", "options", "props"])),
-          selectDataSourceId.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          selectDataSourceId.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$Y, {
-                icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
-              }, null, 8, ["icon"])
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                class: "m-fields-select-action-button",
+                size: _ctx.size,
+                onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$Y, {
+                    icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
+                  }, null, 8, ["icon"])
+                ]),
+                _: 1
+              }, 8, ["size"])
             ]),
             _: 1
-          }, 8, ["size"])) : vue.createCommentVNode("", true)
+          }, 8, ["content"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -4479,18 +4520,26 @@
             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 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          _ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                style: { "margin-left": "5px" },
+                type: showDataSourceFieldSelect.value ? "primary" : "default",
+                size: _ctx.size,
+                onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+                ]),
+                _: 1
+              }, 8, ["type", "size"])
             ]),
             _: 1
-          }, 8, ["type", "size"])) : vue.createCommentVNode("", true)
+          }, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -5193,7 +5242,7 @@
           ...paramState
         }));
       };
-      const paramsConfig = vue.ref(getParamItemsConfig(props.model.dataSourceMethod));
+      const paramsConfig = vue.ref(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
       const setParamsConfig = (dataSourceMethod, formState = {}) => {
         paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
         if (paramsConfig.value.length) {
@@ -5245,19 +5294,26 @@
               size: _ctx.size,
               onChange: onChangeHandler
             }, null, 8, ["config", "model", "size"]),
-            _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
-              class: "m-fields-select-action-button",
-              size: _ctx.size,
-              onClick: editCodeHandler
+              content: notEditable.value ? "查看" : "编辑"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Y, {
-                  icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
-                }, null, 8, ["icon"])
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  class: "m-fields-select-action-button",
+                  size: _ctx.size,
+                  onClick: editCodeHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_sfc_main$Y, {
+                      icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
+                    }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                }, 8, ["size"])
               ]),
               _: 1
-            }, 8, ["size"])) : vue.createCommentVNode("", true)
+            }, 8, ["content"])) : vue.createCommentVNode("", true)
           ]),
           paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
             key: 0,
@@ -5595,19 +5651,26 @@
             "last-values": _ctx.lastValues,
             onChange: changeHandler
           }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]),
-          _ctx.model[_ctx.name] && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          _ctx.model[_ctx.name] && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
             key: 0,
-            class: "m-fields-select-action-button",
-            size: _ctx.size,
-            onClick: editHandler
+            content: notEditable.value ? "查看" : "编辑"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$Y, {
-                icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
-              }, null, 8, ["icon"])
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                class: "m-fields-select-action-button",
+                size: _ctx.size,
+                onClick: editHandler
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$Y, {
+                    icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
+                  }, null, 8, ["icon"])
+                ]),
+                _: 1
+              }, 8, ["size"])
             ]),
             _: 1
-          }, 8, ["size"])) : vue.createCommentVNode("", true)
+          }, 8, ["content"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -7867,7 +7930,7 @@
     });
   };
 
-  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 = {
@@ -7881,6 +7944,8 @@
     __name: "TreeNode",
     props: {
       data: {},
+      parent: {},
+      parentsId: { default: () => [] },
       nodeStatusMap: {},
       indent: { default: 0 }
     },
@@ -7932,6 +7997,8 @@
           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,
@@ -7970,6 +8037,8 @@
               return vue.openBlock(), vue.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
               }, {
@@ -7983,7 +8052,7 @@
                   vue.renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
                 ]),
                 _: 2
-              }, 1032, ["data", "node-status-map", "indent"]);
+              }, 1032, ["data", "parent", "parentsId", "node-status-map", "indent"]);
             }), 128))
           ])) : vue.createCommentVNode("", true)
         ], 40, _hoisted_1$9)), [
@@ -8723,13 +8792,16 @@
       const subMenu = vue.ref();
       const visible = vue.ref(false);
       const subMenuData = vue.ref([]);
+      const zIndex = design.useZIndex();
+      const curZIndex = vue.ref(0);
       const menuPosition = vue.ref({
         left: 0,
         top: 0
       });
       const menuStyle = vue.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 = () => {
@@ -8769,6 +8841,7 @@
           visible.value = true;
           vue.nextTick(() => {
             e && setPosition(e);
+            curZIndex.value = zIndex.nextZIndex();
             emit("show");
           });
         }, 300);
@@ -9122,6 +9195,9 @@
       }
     };
     const multiSelect = async (data) => {
+      if (utils.isPage(data) || utils.isPageFragment(data)) {
+        return;
+      }
       const nodes = services?.editorService.get("nodes") || [];
       const newNodes = [];
       let isCancel = false;
@@ -9130,6 +9206,9 @@
           isCancel = true;
           return;
         }
+        if (utils.isPage(node) || utils.isPageFragment(node)) {
+          return;
+        }
         newNodes.push(node.id);
       });
       if (!isCancel || newNodes.length === 0) {
@@ -9209,6 +9288,7 @@
       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",
@@ -9225,26 +9305,42 @@
       if (!targetEl?.draggable) return;
       const labelEl = targetEl.children[0];
       if (!labelEl) return;
+      utils.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";
         utils.addClassName(labelEl, globalThis.document, "drag-before");
-        utils.removeClassName(labelEl, "drag-after", "drag-inner");
       } else if (distance > targetHeight * 2 / 3) {
         dragState.dropType = "after";
         utils.addClassName(labelEl, globalThis.document, "drag-after");
-        utils.removeClassName(labelEl, "drag-before", "drag-inner");
       } else if (isContainer) {
         dragState.dropType = "inner";
         utils.addClassName(labelEl, globalThis.document, "drag-inner");
-        utils.removeClassName(labelEl, "drag-before", "drag-after");
       }
       if (!dragState.dropType) {
         return;
       }
-      dragState.dragOverNodeId = targetEl.dataset.nodeId || "";
+      dragState.dragOverNodeId = targetNodeId;
       dragState.container = event.currentTarget;
       event.preventDefault();
     };
@@ -9655,7 +9751,7 @@
       const stageOptions = vue.inject("stageOptions");
       const stage = vue.computed(() => services?.editorService.get("stage"));
       const list = vue.computed(
-        () => services?.componentListService.getList().map((group) => ({
+        () => (services?.componentListService.getList() || []).map((group) => ({
           ...group,
           items: group.items.filter((item) => item.text.includes(searchText.value))
         }))
@@ -9715,60 +9811,62 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), null, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
-            vue.createVNode(vue.unref(design.TMagicCollapse), {
-              class: "ui-component-panel",
-              "model-value": collapseValue.value
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
-                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                    group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
-                      key: index,
-                      name: `${index}`
-                    }, {
-                      title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
-                        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(vue.unref(design.TMagicTooltip), {
-                                placement: "right",
-                                disabled: !Boolean(item.desc),
-                                content: item.desc
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$Y, {
-                                    icon: item.icon
-                                  }, null, 8, ["icon"])
-                                ]),
-                                _: 2
-                              }, 1032, ["disabled", "content"]),
-                              vue.createElementVNode("span", {
-                                title: item.text
-                              }, vue.toDisplayString(item.text), 9, _hoisted_2$3)
-                            ])
-                          ], 40, _hoisted_1$4);
-                        }), 128))
-                      ]),
-                      _: 2
-                    }, 1032, ["name"])) : vue.createCommentVNode("", true)
-                  ], 64);
-                }), 256))
-              ]),
-              _: 3
-            }, 8, ["model-value"])
+            vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            vue.renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [
+              vue.createVNode(vue.unref(design.TMagicCollapse), {
+                class: "ui-component-panel",
+                "model-value": collapseValue.value
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
+                    return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                      group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
+                        key: index,
+                        name: `${index}`
+                      }, {
+                        title: vue.withCtx(() => [
+                          vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                          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(vue.unref(design.TMagicTooltip), {
+                                  placement: "right",
+                                  disabled: !Boolean(item.desc),
+                                  content: item.desc
+                                }, {
+                                  default: vue.withCtx(() => [
+                                    vue.createVNode(_sfc_main$Y, {
+                                      icon: item.icon
+                                    }, null, 8, ["icon"])
+                                  ]),
+                                  _: 2
+                                }, 1032, ["disabled", "content"]),
+                                vue.createElementVNode("span", {
+                                  title: item.text
+                                }, vue.toDisplayString(item.text), 9, _hoisted_2$3)
+                              ])
+                            ], 40, _hoisted_1$4);
+                          }), 128))
+                        ]),
+                        _: 2
+                      }, 1032, ["name"])) : vue.createCommentVNode("", true)
+                    ], 64);
+                  }), 256))
+                ]),
+                _: 3
+              }, 8, ["model-value"])
+            ])
           ]),
           _: 3
         });
@@ -9781,7 +9879,7 @@
     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"
@@ -9883,6 +9981,14 @@
           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
       });
@@ -9893,10 +9999,10 @@
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
-                  draggable: "true",
+                  draggable: config.draggable ?? true,
                   key: config.$key ?? index,
                   style: vue.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) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
@@ -9916,16 +10022,26 @@
                 class: "m-editor-sidebar-content",
                 key: config.$key ?? index
               }, [
-                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
+                config?.component && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
                   key: 0,
                   ref_for: true
                 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                  config.$key === "component-list" || config.slots?.componentList ? {
+                    name: "component-list",
+                    fn: vue.withCtx(({ componentGroupList }) => [
+                      config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list", {
+                        key: 0,
+                        componentGroupList
+                      }) : config.slots?.componentList ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentList), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "0"
+                  } : void 0,
                   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"
+                    key: "1"
                   } : void 0,
                   config.$key === "component-list" || config.slots?.componentListItem ? {
                     name: "component-list-item",
@@ -9938,21 +10054,21 @@
                         component
                       }, null, 8, ["component"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "1"
+                    key: "2"
                   } : 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"
+                    key: "3"
                   } : 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"
+                    key: "4"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
                     name: "code-block-panel-tool",
@@ -9963,14 +10079,14 @@
                         data
                       }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
                     ]),
-                    key: "4"
+                    key: "5"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockPanelSearch ? {
                     name: "code-block-panel-search",
                     fn: vue.withCtx(() => [
                       config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-search", { key: 0 }) : config.slots?.codeBlockPanelSearch ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : vue.createCommentVNode("", true)
                     ]),
-                    key: "5"
+                    key: "6"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeContent ? {
                     name: "layer-node-content",
@@ -9983,7 +10099,7 @@
                         data: nodeData
                       }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "6"
+                    key: "7"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeLabel ? {
                     name: "layer-node-label",
@@ -9996,7 +10112,7 @@
                         data: nodeData
                       }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "7"
+                    key: "8"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeTool ? {
                     name: "layer-node-tool",
@@ -10009,7 +10125,7 @@
                         data: nodeData
                       }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "8"
+                    key: "9"
                   } : void 0,
                   config.$key === "data-source" || config.slots?.dataSourcePanelTool ? {
                     name: "data-source-panel-tool",
@@ -10019,14 +10135,14 @@
                         data
                       }) : config.slots?.DataSourcePanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : vue.createCommentVNode("", true)
                     ]),
-                    key: "9"
+                    key: "10"
                   } : void 0,
                   config.$key === "data-source" || config.slots?.dataSourcePanelSearch ? {
                     name: "data-source-panel-search",
                     fn: vue.withCtx(() => [
                       config.$key === "data-source" ? vue.renderSlot(_ctx.$slots, "data-source-panel-search", { key: 0 }) : config.slots?.dataSourcePanelSearch ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : vue.createCommentVNode("", true)
                     ]),
-                    key: "10"
+                    key: "11"
                   } : void 0
                 ]), 1040)) : vue.createCommentVNode("", true)
               ])), [
@@ -12426,6 +12542,9 @@
                 "layer-node-tool": vue.withCtx(({ data }) => [
                   vue.renderSlot(_ctx.$slots, "layer-node-tool", { data })
                 ]),
+                "component-list": vue.withCtx(({ componentGroupList }) => [
+                  vue.renderSlot(_ctx.$slots, "component-list", { componentGroupList })
+                ]),
                 "component-list-panel-header": vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "component-list-panel-header")
                 ]),