@tmagic/editor 1.3.0-alpha.12 → 1.3.0-alpha.13

package/dist/tmagic-editor.umd.cjs

@@ -201,7 +201,7 @@
     }
   });
 
-  const _hoisted_1$p = ["src"];
+  const _hoisted_1$q = ["src"];
   const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
@@ -225,7 +225,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$p)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -244,7 +244,7 @@
     }
   });
 
-  const _hoisted_1$o = { class: "m-fields-code-select-col" };
+  const _hoisted_1$p = { class: "m-fields-code-select-col" };
   const _hoisted_2$f = { class: "code-select-container" };
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -338,7 +338,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
           vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -362,7 +362,7 @@
     }
   });
 
-  const _hoisted_1$n = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$o = { class: "m-editor-data-source-fields" };
   const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -510,7 +510,7 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: filedColumns
@@ -543,7 +543,7 @@
     }
   });
 
-  const _hoisted_1$m = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$d = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$6 = { class: "el-input__inner" };
   const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
@@ -768,7 +768,7 @@
             vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$m, [
+            vue.createElementVNode("div", _hoisted_1$n, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$d, vue.toDisplayString(item.value), 1)
             ])
@@ -864,7 +864,7 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-fields-event-select" };
+  const _hoisted_1$m = { class: "m-fields-event-select" };
   const _hoisted_2$c = {
     key: 1,
     class: "fullWidth"
@@ -1031,7 +1031,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -1082,7 +1082,7 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-fields-key-value" };
+  const _hoisted_1$l = { class: "m-fields-key-value" };
   const _hoisted_2$b = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -1127,7 +1127,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           (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",
@@ -1178,6 +1178,11 @@
     }
   });
 
+  const _hoisted_1$k = {
+    key: 1,
+    class: "m-fields-ui-select",
+    style: { "display": "flex" }
+  };
   const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
@@ -1231,6 +1236,18 @@
           mForm?.$emit("field-change", props.prop, "");
         }
       };
+      const selectNode = async (id) => {
+        await services?.editorService.select(id);
+        services?.editorService.get("stage")?.select(id);
+      };
+      const highlight = lodashEs.throttle((id) => {
+        services?.editorService.highlight(id);
+        services?.editorService.get("stage")?.highlight(id);
+      }, 150);
+      const unhightlight = () => {
+        services?.editorService.set("highlightNode", null);
+        services?.editorService.get("stage")?.clearHighlight();
+      };
       return (_ctx, _cache) => {
         return uiSelectMode.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
@@ -1248,43 +1265,62 @@
             ]),
             _: 1
           }, 8, ["icon"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "m-fields-ui-select",
-          onClick: startSelect,
-          style: { "display": "flex" }
-        }, [
-          val.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-            key: 0,
-            content: "清除"
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
-                style: { "padding": "0" },
-                type: "danger",
-                icon: vue.unref(iconsVue.Close),
-                text: "",
-                onClick: vue.withModifiers(deleteHandler, ["stop"])
-              }, null, 8, ["icon", "onClick"])
-            ]),
-            _: 1
-          })) : vue.createCommentVNode("", true),
-          vue.createVNode(vue.unref(design.TMagicTooltip), {
-            content: val.value ? toName.value + "_" + val.value : "点击此处选择"
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+          val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.createVNode(vue.unref(design.TMagicTooltip), {
+              content: "清除",
+              placement: "top"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  style: { "padding": "0" },
+                  type: "danger",
+                  icon: vue.unref(iconsVue.Close),
+                  text: "",
+                  onClick: vue.withModifiers(deleteHandler, ["stop"])
+                }, null, 8, ["icon", "onClick"])
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(design.TMagicTooltip), {
+              content: "点击选中组件",
+              placement: "top"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  text: "",
+                  style: { "padding": "0", "margin": "0" },
+                  onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
+                  onMouseenter: _cache[1] || (_cache[1] = ($event) => vue.unref(highlight)(val.value)),
+                  onMouseleave: unhightlight
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(`${toName.value}_${val.value}`), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            key: 1,
+            content: "点击此处选择",
+            placement: "top"
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 text: "",
-                style: { "padding": "0", "margin": "0" }
+                style: { "padding": "0", "margin": "0" },
+                onClick: startSelect
               }, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(val.value ? toName.value + "_" + val.value : "点击此处选择"), 1)
+                  vue.createTextVNode("点击此处选择")
                 ]),
                 _: 1
               })
             ]),
             _: 1
-          }, 8, ["content"])
+          }))
         ]));
       };
     }
@@ -4669,11 +4705,16 @@
       const editCode = async (key) => {
         codeBlockService?.setCodeEditorContent(true, key);
       };
-      const deleteCode = (key) => {
+      const deleteCode = async (key) => {
         const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
         const existBinds = Boolean(currentCode?.children.length);
         const undeleteableList = codeBlockService?.getUndeletableList() || [];
         if (!existBinds && !undeleteableList.includes(key)) {
+          await design.tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          });
           codeBlockService?.deleteCodeDslByIds([key]);
         } else {
           if (typeof props.customError === "function") {