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

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/design'), require('monaco-editor'), require('@tmagic/stage'), require('gesto'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/design', 'monaco-editor', '@tmagic/stage', 'gesto', '@tmagic/utils', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.schema, global.iconsVue, global.design, global.monaco, global.StageCore, global.Gesto, global.utils, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, serialize, lodashEs, schema, iconsVue, design, monaco, StageCore, Gesto, utils, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/design'), require('monaco-editor'), require('@tmagic/stage'), require('gesto'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('@tmagic/form'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/design', 'monaco-editor', '@tmagic/stage', 'gesto', '@tmagic/utils', 'events', '@tmagic/core', '@tmagic/form', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.schema, global.iconsVue, global.design, global.monaco, global.StageCore, global.Gesto, global.utils, global.events, global.core, global.form, global.KeyController));
+})(this, (function (exports, vue, serialize, lodashEs, schema, iconsVue, design, monaco, StageCore, Gesto, utils, events, core, form, KeyController) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
@@ -3126,7 +3126,9 @@
       const curFormConfig = vue.ref([]);
       const services = vue.inject("services");
       const node = vue.computed(() => services?.editorService.get("node"));
-      const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
+      const propsPanelSize = vue.computed(
+        () => services?.uiService.get("propsPanelSize") || "small"
+      );
       const stage = vue.computed(() => services?.editorService.get("stage"));
       const init = async () => {
         if (!node.value) {
@@ -3159,19 +3161,19 @@
       };
       expose({ submit });
       return (_ctx, _cache) => {
-        const _component_m_form = vue.resolveComponent("m-form");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
-          vue.createVNode(_component_m_form, {
+          (vue.openBlock(), vue.createBlock(vue.unref(form.MForm), {
             ref_key: "configForm",
             ref: configForm,
+            key: vue.unref(node)?.type,
             class: vue.normalizeClass(`m-editor-props-panel ${vue.unref(propsPanelSize)}`),
             "popper-class": `m-editor-props-panel-popper ${vue.unref(propsPanelSize)}`,
             size: vue.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"]))
         ]);
       };
     }
@@ -4374,35 +4376,27 @@
         await expandNodes();
         setTreeKeyStatus();
       });
-      const layerPanel = vue.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;
       vue.onMounted(() => {
-        layerPanel.value?.addEventListener("mouseenter", mouseenterHandler);
-        layerPanel.value?.addEventListener("mouseleave", mouseleaveHandler);
-        keycon = new KeyController__default.default(layerPanel.value);
+        keycon = new KeyController__default.default(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;
         });
       });
       vue.onUnmounted(() => {
-        layerPanel.value?.removeEventListener("mouseenter", mouseenterHandler);
-        layerPanel.value?.removeEventListener("mouseleave", mouseleaveHandler);
         keycon.destroy();
       });
       const clicked = vue.ref(false);
@@ -4459,79 +4453,77 @@
         menu.value?.show(event);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "layerPanel",
-          ref: layerPanel
-        }, [
-          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
-            default: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-              vue.createVNode(vue.unref(design.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": vue.unref(iconsVue.Search),
-                onChange: filterTextChangeHandler
-              }, null, 8, ["modelValue", "prefix-icon"]),
-              vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.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": vue.unref(defaultExpandedKeys),
-                load: loadItems,
-                data: vue.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 || vue.unref(selectedIds).length > 1,
-                onNodeClick: clickHandler,
-                onNodeContextmenu: contextmenu,
-                onNodeDragEnd: handleDragEnd,
-                onNodeCollapse: handleCollapse,
-                onNodeExpand: handleExpand,
-                onCheck: multiClickHandler,
-                onMousedown: toggleClickFlag,
-                onMouseup: toggleClickFlag
-              }, {
-                default: vue.withCtx(({ node, data }) => [
-                  vue.createElementVNode("div", {
-                    id: data.id,
-                    class: vue.normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
-                    onMouseenter: ($event) => vue.unref(highlightHandler)(data)
-                  }, [
-                    vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                      node,
-                      data
-                    }, () => [
-                      vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
-                    ])
-                  ], 42, _hoisted_1$4)
-                ]),
-                _: 3
-              }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : vue.createCommentVNode("", true),
-              (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-                vue.createVNode(_sfc_main$b, {
-                  ref_key: "menu",
-                  ref: menu,
-                  "layer-content-menu": __props.layerContentMenu
-                }, null, 8, ["layer-content-menu"])
-              ]))
-            ]),
-            _: 3
-          })
-        ], 512);
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "layer-panel-header"),
+            vue.createVNode(vue.unref(design.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": vue.unref(iconsVue.Search),
+              onChange: filterTextChangeHandler
+            }, null, 8, ["modelValue", "prefix-icon"]),
+            vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.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": vue.unref(defaultExpandedKeys),
+              load: loadItems,
+              data: vue.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 || vue.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: vue.withCtx(({ node, data }) => [
+                vue.createElementVNode("div", {
+                  id: data.id,
+                  class: vue.normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
+                  onMouseenter: ($event) => vue.unref(highlightHandler)(data)
+                }, [
+                  vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                    node,
+                    data
+                  }, () => [
+                    vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
+                  ])
+                ], 42, _hoisted_1$4)
+              ]),
+              _: 3
+            }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : vue.createCommentVNode("", true),
+            (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+              vue.createVNode(_sfc_main$b, {
+                ref_key: "menu",
+                ref: menu,
+                "layer-content-menu": __props.layerContentMenu
+              }, null, 8, ["layer-content-menu"])
+            ]))
+          ]),
+          _: 3
+        });
       };
     }
   });