@tmagic/editor 1.5.0-beta.0 → 1.5.0-beta.1

package/dist/tmagic-editor.umd.cjs

@@ -3234,7 +3234,7 @@
   });
 
   const _hoisted_1$u = { class: "m-fields-code-select-col" };
-  const _hoisted_2$k = { class: "code-select-container" };
+  const _hoisted_2$j = { class: "code-select-container" };
   const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
@@ -3315,7 +3315,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
-          vue.createElementVNode("div", _hoisted_2$k, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createVNode(vue.unref(form.MContainer), {
               class: "select",
               config: selectConfig,
@@ -4065,6 +4065,68 @@
     };
   };
 
+  const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
+    const filterIsMatch = (value, data) => {
+      const string = !Array.isArray(value) ? [value] : value;
+      if (!string.length) {
+        return true;
+      }
+      return string.some((v) => filterNodeMethod(v, data));
+    };
+    const filter = (text) => {
+      if (!nodeData.value.length) return;
+      nodeData.value.forEach((node) => {
+        traverseNode(node, (node2, parents) => {
+          if (!nodeStatusMap.value) return;
+          const visible = filterIsMatch(text, node2);
+          if (visible && parents.length) {
+            parents.forEach((parent) => {
+              updateStatus(nodeStatusMap.value, parent.id, {
+                visible,
+                expand: true
+              });
+            });
+          }
+          updateStatus(nodeStatusMap.value, node2.id, {
+            visible
+          });
+        });
+      });
+    };
+    return {
+      filterText: vue.ref(""),
+      filterTextChangeHandler(text) {
+        filter(text);
+      }
+    };
+  };
+
+  const useGetSo = (target, emit) => {
+    let getso;
+    const isDraging = vue.ref(false);
+    vue.onMounted(() => {
+      if (!target.value) return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true
+      }).on("drag", (e) => {
+        if (!target.value) return;
+        emit("change", e);
+      }).on("dragStart", () => {
+        isDraging.value = true;
+      }).on("dragEnd", () => {
+        isDraging.value = false;
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      getso?.unset();
+      isDraging.value = false;
+    });
+    return {
+      isDraging
+    };
+  };
+
   const useNextFloatBoxPosition = (uiService, parent) => {
     const boxPosition = vue.ref({
       left: 0,
@@ -4089,8 +4151,42 @@
     };
   };
 
+  const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
+    const map = /* @__PURE__ */ new Map();
+    nodeData.forEach(
+      (node) => traverseNode(node, (node2) => {
+        map.set(
+          node2.id,
+          initialLayerNodeStatus?.get(node2.id) || {
+            visible: true,
+            expand: false,
+            selected: false,
+            draggable: false
+          }
+        );
+      })
+    );
+    return map;
+  };
+  const useNodeStatus$1 = (nodeData) => {
+    const nodeStatusMap = vue.ref(/* @__PURE__ */ new Map());
+    vue.watch(
+      nodeData,
+      (nodeData2) => {
+        nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      nodeStatusMap
+    };
+  };
+
   const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
@@ -4347,7 +4443,7 @@
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$j, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4735,7 +4831,7 @@
   });
 
   const _hoisted_1$q = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-  const _hoisted_2$i = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$8 = { class: "el-input__inner t-input__inner" };
   const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -4942,7 +5038,7 @@
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$q, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$i, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$h, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -4984,7 +5080,7 @@
   });
 
   const _hoisted_1$p = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$h = { style: { "flex": "1" } };
+  const _hoisted_2$g = { style: { "flex": "1" } };
   const _hoisted_3$7 = { style: { "flex": "1" } };
   const _hoisted_4$7 = { class: "dialog-footer" };
   const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
@@ -5238,7 +5334,7 @@
               ]),
               default: vue.withCtx(() => [
                 vue.createElementVNode("div", _hoisted_1$p, [
-                  vue.createElementVNode("div", _hoisted_2$h, [
+                  vue.createElementVNode("div", _hoisted_2$g, [
                     vue.createVNode(vue.unref(design.TMagicTag), {
                       size: "small",
                       type: "info"
@@ -5281,7 +5377,7 @@
   });
 
   const _hoisted_1$o = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
+  const _hoisted_2$f = { class: "m-editor-data-source-methods-footer" };
   const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
@@ -5357,7 +5453,7 @@
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5387,7 +5483,7 @@
   });
 
   const _hoisted_1$n = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$f = { class: "data-source-method-select-container" };
+  const _hoisted_2$e = { class: "data-source-method-select-container" };
   const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
@@ -5475,7 +5571,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
-          vue.createElementVNode("div", _hoisted_2$f, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(vue.unref(form.MContainer), {
               class: "select",
               config: cascaderConfig.value,
@@ -5519,7 +5615,7 @@
   });
 
   const _hoisted_1$m = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
@@ -5729,7 +5825,7 @@
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$e, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5994,7 +6090,7 @@
   });
 
   const _hoisted_1$k = { class: "m-fields-event-select" };
-  const _hoisted_2$d = {
+  const _hoisted_2$c = {
     key: 1,
     class: "fullWidth"
   };
@@ -6282,7 +6378,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -6338,9 +6434,9 @@
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$c = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_2$b = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
   const _hoisted_4$6 = [
-    _hoisted_2$c
+    _hoisted_2$b
   ];
   const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -6355,7 +6451,7 @@
   });
 
   const _hoisted_1$i = { class: "m-fields-key-value" };
-  const _hoisted_2$b = { key: 0 };
+  const _hoisted_2$a = { key: 0 };
   const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -6416,7 +6512,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "m-fields-key-value-item",
@@ -6490,7 +6586,7 @@
   });
 
   const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-  const _hoisted_2$a = { class: "page-fragment-select-container" };
+  const _hoisted_2$9 = { class: "page-fragment-select-container" };
   const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
@@ -6538,7 +6634,7 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+          vue.createElementVNode("div", _hoisted_2$9, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6725,32 +6821,6 @@
     }
   });
 
-  const useGetSo = (target, emit) => {
-    let getso;
-    const isDraging = vue.ref(false);
-    vue.onMounted(() => {
-      if (!target.value) return;
-      getso = new Gesto(target.value, {
-        container: window,
-        pinchOutside: true
-      }).on("drag", (e) => {
-        if (!target.value) return;
-        emit("change", e);
-      }).on("dragStart", () => {
-        isDraging.value = true;
-      }).on("dragEnd", () => {
-        isDraging.value = false;
-      });
-    });
-    vue.onBeforeUnmount(() => {
-      getso?.unset();
-      isDraging.value = false;
-    });
-    return {
-      isDraging
-    };
-  };
-
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
@@ -6937,7 +7007,7 @@
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -7074,7 +7144,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$9, [
+              vue.createElementVNode("span", _hoisted_2$8, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -7398,7 +7468,7 @@
   });
 
   const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
-  const _hoisted_2$8 = ["page-id", "onClick"];
+  const _hoisted_2$7 = ["page-id", "onClick"];
   const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$5 = ["title"];
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
@@ -7552,7 +7622,7 @@
                     ]),
                     _: 2
                   }, 1024)
-                ], 10, _hoisted_2$8);
+                ], 10, _hoisted_2$7);
               }), 128))
             ]),
             _: 3
@@ -7563,7 +7633,7 @@
   });
 
   const _hoisted_1$b = { class: "m-editor-empty-panel" };
-  const _hoisted_2$7 = { class: "m-editor-empty-content" };
+  const _hoisted_2$6 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
@@ -7589,7 +7659,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createElementVNode("div", _hoisted_2$7, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
@@ -8114,7 +8184,7 @@
   });
 
   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_2$5 = { class: "tree-node-label" };
   const _hoisted_3$3 = { class: "tree-node-tool" };
   const _hoisted_4$3 = {
     key: 0,
@@ -8204,7 +8274,7 @@
               onClick: nodeClickHandler
             }, [
               vue.renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-                vue.createElementVNode("div", _hoisted_2$6, [
+                vue.createElementVNode("div", _hoisted_2$5, [
                   vue.renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
                     vue.createTextVNode(vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
                   ])
@@ -8298,76 +8368,6 @@
     }
   });
 
-  const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
-    const filterIsMatch = (value, data) => {
-      const string = !Array.isArray(value) ? [value] : value;
-      if (!string.length) {
-        return true;
-      }
-      return string.some((v) => filterNodeMethod(v, data));
-    };
-    const filter = (text) => {
-      if (!nodeData.value.length) return;
-      nodeData.value.forEach((node) => {
-        traverseNode(node, (node2, parents) => {
-          if (!nodeStatusMap.value) return;
-          const visible = filterIsMatch(text, node2);
-          if (visible && parents.length) {
-            parents.forEach((parent) => {
-              updateStatus(nodeStatusMap.value, parent.id, {
-                visible,
-                expand: true
-              });
-            });
-          }
-          updateStatus(nodeStatusMap.value, node2.id, {
-            visible
-          });
-        });
-      });
-    };
-    return {
-      filterText: vue.ref(""),
-      filterTextChangeHandler(text) {
-        filter(text);
-      }
-    };
-  };
-
-  const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
-    const map = /* @__PURE__ */ new Map();
-    nodeData.forEach(
-      (node) => traverseNode(node, (node2) => {
-        map.set(
-          node2.id,
-          initialLayerNodeStatus?.get(node2.id) || {
-            visible: true,
-            expand: false,
-            selected: false,
-            draggable: false
-          }
-        );
-      })
-    );
-    return map;
-  };
-  const useNodeStatus$1 = (nodeData) => {
-    const nodeStatusMap = vue.ref(/* @__PURE__ */ new Map());
-    vue.watch(
-      nodeData,
-      (nodeData2) => {
-        nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    );
-    return {
-      nodeStatusMap
-    };
-  };
-
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
@@ -8851,7 +8851,6 @@
   });
 
   const _hoisted_1$6 = { class: "search-wrapper" };
-  const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
@@ -8900,7 +8899,9 @@
                 vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
-                  placement: "right"
+                  placement: "right",
+                  trigger: "hover",
+                  "popper-class": "data-source-list-panel-add-menu"
                 }, {
                   reference: vue.withCtx(() => [
                     vue.createVNode(vue.unref(design.TMagicButton), {
@@ -8914,20 +8915,18 @@
                     })
                   ]),
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_2$5, [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                        return vue.openBlock(), vue.createBlock(_sfc_main$y, {
-                          data: {
-                            type: "button",
-                            text: item.text,
-                            handler: () => {
-                              addHandler(item.type);
-                            }
-                          },
-                          key: index
-                        }, null, 8, ["data"]);
-                      }), 128))
-                    ])
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                        data: {
+                          type: "button",
+                          text: item.text,
+                          handler: () => {
+                            addHandler(item.type);
+                          }
+                        },
+                        key: index
+                      }, null, 8, ["data"]);
+                    }), 128))
                   ]),
                   _: 1
                 })) : vue.createCommentVNode("", true),
@@ -10086,7 +10085,22 @@
       const props = __props;
       const services = vue.inject("services");
       const columnLeftWidth = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
-      const { height: columnLeftHeight } = useEditorContentHeight();
+      const { height: editorContentHeight } = useEditorContentHeight();
+      const columnLeftHeight = vue.ref(0);
+      const unWatchEditorContentHeight = vue.watch(
+        editorContentHeight,
+        (height) => {
+          if (height) {
+            columnLeftHeight.value = height * 0.5;
+            vue.nextTick().then(() => {
+              unWatchEditorContentHeight();
+            });
+          }
+        },
+        {
+          immediate: true
+        }
+      );
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -10340,8 +10354,8 @@
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
-                  height: vue.unref(columnLeftHeight),
-                  "onUpdate:height": _cache[1] || (_cache[1] = ($event) => vue.isRef(columnLeftHeight) ? columnLeftHeight.value = $event : null),
+                  height: columnLeftHeight.value,
+                  "onUpdate:height": _cache[1] || (_cache[1] = ($event) => columnLeftHeight.value = $event),
                   width: columnLeftWidth.value,
                   title: config.text,
                   position: {
@@ -12723,6 +12737,8 @@
   exports.TMagicCodeEditor = _sfc_main$X;
   exports.TMagicEditor = _sfc_main;
   exports.ToolButton = _sfc_main$y;
+  exports.Tree = _sfc_main$m;
+  exports.TreeNode = _sfc_main$n;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.UndoRedo = UndoRedo;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
@@ -12782,7 +12798,11 @@
   exports.useCodeBlockEdit = useCodeBlockEdit;
   exports.useDataSourceMethod = useDataSourceMethod;
   exports.useEditorContentHeight = useEditorContentHeight;
+  exports.useFilter = useFilter;
   exports.useFloatBox = useFloatBox;
+  exports.useGetSo = useGetSo;
+  exports.useNextFloatBoxPosition = useNextFloatBoxPosition;
+  exports.useNodeStatus = useNodeStatus$1;
   exports.useStage = useStage;
   exports.useWindowRect = useWindowRect;
   exports.warn = warn;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.0",
+  "version": "1.5.0-beta.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -55,8 +55,8 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/dep": "1.5.0-beta.0",
-    "@tmagic/table": "1.5.0-beta.0"
+    "@tmagic/table": "1.5.0-beta.1",
+    "@tmagic/dep": "1.5.0-beta.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -77,12 +77,12 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": "^3.4.35",
-    "@tmagic/form": "1.5.0-beta.0",
-    "@tmagic/core": "1.5.0-beta.0",
-    "@tmagic/schema": "1.5.0-beta.0",
-    "@tmagic/stage": "1.5.0-beta.0",
-    "@tmagic/design": "1.5.0-beta.0",
-    "@tmagic/utils": "1.5.0-beta.0"
+    "@tmagic/core": "1.5.0-beta.1",
+    "@tmagic/design": "1.5.0-beta.1",
+    "@tmagic/form": "1.5.0-beta.1",
+    "@tmagic/schema": "1.5.0-beta.1",
+    "@tmagic/stage": "1.5.0-beta.1",
+    "@tmagic/utils": "1.5.0-beta.1"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/hooks/index.ts

@@ -22,3 +22,10 @@ export * from './use-stage';
 export * from './use-float-box';
 export * from './use-window-rect';
 export * from './use-editor-content-height';
+export * from './use-filter';
+export * from './use-float-box';
+export * from './use-getso';
+export * from './use-next-float-box-position';
+export * from './use-node-status';
+export * from './use-stage';
+export * from './use-window-rect';

package/src/index.ts

@@ -85,6 +85,8 @@ export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
 export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 export { default as FloatingBox } from './components/FloatingBox.vue';
+export { default as Tree } from './components/Tree.vue';
+export { default as TreeNode } from './components/TreeNode.vue';
 export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';

package/src/layouts/sidebar/Sidebar.vue

@@ -148,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
@@ -196,7 +196,23 @@ const props = withDefaults(
 const services = inject<Services>('services');
 
 const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
-const { height: columnLeftHeight } = useEditorContentHeight();
+const { height: editorContentHeight } = useEditorContentHeight();
+const columnLeftHeight = ref(0);
+
+const unWatchEditorContentHeight = watch(
+  editorContentHeight,
+  (height) => {
+    if (height) {
+      columnLeftHeight.value = height * 0.5;
+      nextTick().then(() => {
+        unWatchEditorContentHeight();
+      });
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const activeTabName = ref(props.data?.status);