@tmagic/editor 1.2.0-beta.14 → 1.2.0-beta.16

package/dist/style.css

@@ -655,9 +655,7 @@
   align-items: center;
 }
 .m-editor-code-block-list .list-container .list-item .right-tool {
-  position: absolute;
-  right: 15px;
-  padding-left: 5px;
+  width: fit-content !important;
   display: flex;
   align-items: center;
 }
@@ -670,7 +668,8 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   padding: 10px 15px;
-  margin-right: 60px;
+  width: 0 !important;
+  flex: 1;
 }
 .m-editor-code-block-list .list-container .code-comp-map-wrapper {
   display: flex;

package/dist/tmagic-editor.mjs

@@ -10,6 +10,7 @@ import Gesto from 'gesto';
 import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+import { MForm } from '@tmagic/form';
 import KeyController from 'keycon';
 
 const __default__$t = defineComponent({
@@ -910,11 +911,14 @@ class CodeBlock extends BaseService {
   }
   async setCodeDslById(id, codeConfig) {
     let codeDsl = await this.getCodeDsl();
+    const codeConfigProcessed = codeConfig;
+    if (codeConfig.content) {
+      codeConfigProcessed.content = eval(codeConfig.content);
+    }
     if (!codeDsl) {
       codeDsl = {
         [id]: {
-          ...codeConfig,
-          content: eval(codeConfig.content)
+          ...codeConfigProcessed
         }
       };
     } else {
@@ -923,8 +927,7 @@ class CodeBlock extends BaseService {
         ...codeDsl,
         [id]: {
           ...existContent,
-          ...codeConfig,
-          content: eval(codeConfig.content)
+          ...codeConfigProcessed
         }
       };
     }
@@ -3106,7 +3109,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
-    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
+    const propsPanelSize = computed(
+      () => services?.uiService.get("propsPanelSize") || "small"
+    );
     const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
       if (!node.value) {
@@ -3139,19 +3144,19 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
     expose({ submit });
     return (_ctx, _cache) => {
-      const _component_m_form = resolveComponent("m-form");
       return openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "props-panel-header"),
-        createVNode(_component_m_form, {
+        (openBlock(), createBlock(unref(MForm), {
           ref_key: "configForm",
           ref: configForm,
+          key: unref(node)?.type,
           class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
           "popper-class": `m-editor-props-panel-popper ${unref(propsPanelSize)}`,
           size: unref(propsPanelSize),
           "init-values": values.value,
           config: curFormConfig.value,
           onChange: submit
-        }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
+        }, null, 8, ["class", "popper-class", "size", "init-values", "config"]))
       ]);
     };
   }
@@ -3652,7 +3657,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
       const codeConfig = {
         name: "\u4EE3\u7801\u5757",
-        content: `() => {
+        content: `({app, params}) => {
   // place your code here
 }`,
         params: []
@@ -4354,35 +4359,27 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       await expandNodes();
       setTreeKeyStatus();
     });
-    const layerPanel = ref();
     const mouseenterHandler = () => {
-      layerPanel.value?.focus();
+      tree.value?.$el.focus();
     };
     const mouseleaveHandler = () => {
-      layerPanel.value?.blur();
-      if (selectedIds.value.length === 1)
-        isMultiSelectStatus.value = false;
+      tree.value?.$el.blur();
+      isMultiSelectStatus.value = false;
     };
     let keycon;
     onMounted(() => {
-      layerPanel.value?.addEventListener("mouseenter", mouseenterHandler);
-      layerPanel.value?.addEventListener("mouseleave", mouseleaveHandler);
-      keycon = new KeyController(layerPanel.value);
+      keycon = new KeyController(tree.value?.$el);
       const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
       const ctrl = isMac ? "meta" : "ctrl";
       keycon.keydown(ctrl, (e) => {
         e.inputEvent.preventDefault();
         isMultiSelectStatus.value = true;
-      }).on("blur", () => {
-        isMultiSelectStatus.value = false;
       }).keyup(ctrl, (e) => {
         e.inputEvent.preventDefault();
         isMultiSelectStatus.value = false;
       });
     });
     onUnmounted(() => {
-      layerPanel.value?.removeEventListener("mouseenter", mouseenterHandler);
-      layerPanel.value?.removeEventListener("mouseleave", mouseleaveHandler);
       keycon.destroy();
     });
     const clicked = ref(false);
@@ -4439,78 +4436,77 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       menu.value?.show(event);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "layerPanel",
-        ref: layerPanel
-      }, [
-        createVNode(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "layer-panel-header"),
-            createVNode(unref(TMagicInput), {
-              modelValue: filterText.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
-              class: "search-input",
-              size: "small",
-              placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
-              clearable: "",
-              "prefix-icon": unref(Search),
-              onChange: filterTextChangeHandler
-            }, null, 8, ["modelValue", "prefix-icon"]),
-            unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
-              key: 0,
-              class: "magic-editor-layer-tree",
-              ref_key: "tree",
-              ref: tree,
-              "node-key": "id",
-              "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
-              draggable: "",
-              "default-expanded-keys": unref(defaultExpandedKeys),
-              load: loadItems,
-              data: unref(values),
-              "expand-on-click-node": false,
-              "highlight-current": true,
-              props: {
-                children: "items"
-              },
-              "filter-node-method": filterNode,
-              "allow-drop": allowDrop,
-              "show-checkbox": isMultiSelectStatus.value || unref(selectedIds).length > 1,
-              onNodeClick: clickHandler,
-              onNodeContextmenu: contextmenu,
-              onNodeDragEnd: handleDragEnd,
-              onNodeCollapse: handleCollapse,
-              onNodeExpand: handleExpand,
-              onCheck: multiClickHandler,
-              onMousedown: toggleClickFlag,
-              onMouseup: toggleClickFlag
-            }, {
-              default: withCtx(({ node, data }) => [
-                createElementVNode("div", {
-                  id: data.id,
-                  class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
-                  onMouseenter: ($event) => unref(highlightHandler)(data)
-                }, [
-                  renderSlot(_ctx.$slots, "layer-node-content", {
-                    node,
-                    data
-                  }, () => [
-                    createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
-                  ])
-                ], 42, _hoisted_1$4)
-              ]),
-              _: 3
-            }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : createCommentVNode("", true),
-            (openBlock(), createBlock(Teleport, { to: "body" }, [
-              createVNode(_sfc_main$b, {
-                ref_key: "menu",
-                ref: menu,
-                "layer-content-menu": __props.layerContentMenu
-              }, null, 8, ["layer-content-menu"])
-            ]))
-          ]),
-          _: 3
-        })
-      ], 512);
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "layer-panel-header"),
+          createVNode(unref(TMagicInput), {
+            modelValue: filterText.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
+            class: "search-input",
+            size: "small",
+            placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+            clearable: "",
+            "prefix-icon": unref(Search),
+            onChange: filterTextChangeHandler
+          }, null, 8, ["modelValue", "prefix-icon"]),
+          unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
+            key: 0,
+            tabindex: "-1",
+            class: "magic-editor-layer-tree",
+            ref_key: "tree",
+            ref: tree,
+            "node-key": "id",
+            "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
+            draggable: "",
+            "default-expanded-keys": unref(defaultExpandedKeys),
+            load: loadItems,
+            data: unref(values),
+            "default-expand-all": true,
+            "expand-on-click-node": false,
+            "highlight-current": true,
+            props: {
+              children: "items"
+            },
+            "filter-node-method": filterNode,
+            "allow-drop": allowDrop,
+            "show-checkbox": isMultiSelectStatus.value || unref(selectedIds).length > 1,
+            onNodeClick: clickHandler,
+            onNodeContextmenu: contextmenu,
+            onNodeDragEnd: handleDragEnd,
+            onNodeCollapse: handleCollapse,
+            onNodeExpand: handleExpand,
+            onCheck: multiClickHandler,
+            onMousedown: toggleClickFlag,
+            onMouseup: toggleClickFlag,
+            onMouseenter: mouseenterHandler,
+            onMouseleave: mouseleaveHandler
+          }, {
+            default: withCtx(({ node, data }) => [
+              createElementVNode("div", {
+                id: data.id,
+                class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
+                onMouseenter: ($event) => unref(highlightHandler)(data)
+              }, [
+                renderSlot(_ctx.$slots, "layer-node-content", {
+                  node,
+                  data
+                }, () => [
+                  createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+                ])
+              ], 42, _hoisted_1$4)
+            ]),
+            _: 3
+          }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : createCommentVNode("", true),
+          (openBlock(), createBlock(Teleport, { to: "body" }, [
+            createVNode(_sfc_main$b, {
+              ref_key: "menu",
+              ref: menu,
+              "layer-content-menu": __props.layerContentMenu
+            }, null, 8, ["layer-content-menu"])
+          ]))
+        ]),
+        _: 3
+      });
     };
   }
 });