@tmagic/editor 1.3.0-beta.1 → 1.3.0-beta.2

package/dist/style.css

@@ -584,29 +584,29 @@
 .magic-editor-content-menu .menu-item.divider .el-divider {
   margin: 0;
 }
-.magic-editor-content-menu .menu-item.active {
-  background-color: #2882e0;
-}
-.magic-editor-content-menu .menu-item.active .tmagic-design-button,
-.magic-editor-content-menu .menu-item.active .tmagic-design-button:active,
-.magic-editor-content-menu .menu-item.active .tmagic-design-button:focus {
-  color: #fff;
-  background-color: #2882e0;
-}
-.magic-editor-content-menu .menu-item.active.menu-item i {
-  color: #fff;
-}
-.magic-editor-content-menu .menu-item:hover {
+.magic-editor-content-menu .menu-item.button:hover {
   background-color: #f3f5f9;
 }
-.magic-editor-content-menu .menu-item:hover .tmagic-design-button,
-.magic-editor-content-menu .menu-item:hover .tmagic-design-button:active,
-.magic-editor-content-menu .menu-item:hover .tmagic-design-button:focus {
+.magic-editor-content-menu .menu-item.button:hover .tmagic-design-button,
+.magic-editor-content-menu .menu-item.button:hover .tmagic-design-button:active,
+.magic-editor-content-menu .menu-item.button:hover .tmagic-design-button:focus {
   color: #070303;
 }
-.magic-editor-content-menu .menu-item:hover.menu-item i {
+.magic-editor-content-menu .menu-item.button:hover.menu-item i {
   color: #070303;
 }
+.magic-editor-content-menu .menu-item.button.active {
+  background-color: #2882e0;
+}
+.magic-editor-content-menu .menu-item.button.active .tmagic-design-button,
+.magic-editor-content-menu .menu-item.button.active .tmagic-design-button:active,
+.magic-editor-content-menu .menu-item.button.active .tmagic-design-button:focus {
+  color: #fff;
+  background-color: transparent;
+}
+.magic-editor-content-menu .menu-item.button.active.menu-item i {
+  color: #fff;
+}
 .m-editor-stage {
   position: relative;
   width: 100%;

package/dist/tmagic-editor.js

@@ -786,6 +786,18 @@ const fillConfig$1 = (config) => [
         defaultValue: () => []
       }
     ]
+  },
+  {
+    type: "panel",
+    title: "事件配置",
+    display: false,
+    items: [
+      {
+        name: "events",
+        src: "datasource",
+        type: "event-select"
+      }
+    ]
   }
 ];
 const getFormConfig = (type, configs) => {
@@ -966,7 +978,8 @@ class DataSource extends BaseService {
     dataSources: [],
     editable: true,
     configs: {},
-    values: {}
+    values: {},
+    events: {}
   });
   set(name, value) {
     this.state[name] = value;
@@ -986,6 +999,12 @@ class DataSource extends BaseService {
   setFormValue(type, value) {
     this.get("values")[type] = value;
   }
+  getFormEvent(type = "base") {
+    return this.get("events")[type] || [];
+  }
+  setFormEvent(type, value = []) {
+    this.get("events")[type] = value;
+  }
   add(config) {
     const newConfig = {
       ...config,
@@ -1202,6 +1221,7 @@ const eventTabConfig = {
   items: [
     {
       name: "events",
+      src: "component",
       type: "event-select"
     }
   ]
@@ -3178,7 +3198,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             return "number";
           if (model.type === "boolean")
             return "select";
-          return "string";
+          return "text";
         },
         options: [
           { text: "true", value: true },
@@ -3900,10 +3920,20 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         text: "事件",
         type: "select",
         labelWidth: "40px",
-        options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
-          text: option.label,
-          value: option.value
-        }))
+        options: (mForm, { formValue }) => {
+          let events = [];
+          if (!services)
+            return events;
+          if (props.config.src === "component") {
+            events = services.eventsService.getEvent(formValue.type);
+          } else if (props.config.src === "datasource") {
+            events = services.dataSourceService.getFormEvent(formValue.type);
+          }
+          return events.map((option) => ({
+            text: option.label,
+            value: option.value
+          }));
+        }
       };
       return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
     });
@@ -4852,7 +4882,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             key: 1,
             size: "small",
             text: "",
-            disabled: disabled.value
+            disabled: disabled.value,
+            title: _ctx.data.text
           }, {
             default: withCtx(() => [
               _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
@@ -4862,7 +4893,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
             ]),
             _: 1
-          }, 8, ["disabled"]))
+          }, 8, ["disabled", "title"]))
         ], 64)) : _ctx.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
           key: 3,
           trigger: "click",
@@ -7493,6 +7524,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       nodeList.value = [];
       menu.value?.hide();
     };
+    const clearTimeoutLazy = () => {
+      globalThis.setTimeout(() => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+        }
+      }, 300);
+    };
     const unWatch = watch(
       stage,
       (stage2) => {
@@ -7522,7 +7560,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }, 1500);
         });
         stage2.on("mouseleave", () => {
-          cancel();
+          clearTimeoutLazy();
         });
         unWatch();
       },
@@ -7561,11 +7599,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       })
     );
     const mouseenterHandler = () => {
-      globalThis.setTimeout(() => {
-        if (timeout) {
-          globalThis.clearTimeout(timeout);
-        }
-      }, 300);
+      clearTimeoutLazy();
     };
     const dragMenuHandler = ({ deltaY, deltaX }) => {
       if (!menu.value)
@@ -7583,6 +7617,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$j, {
         ref_key: "menu",
         ref: menu,
+        class: "magic-editor-node-list-menu",
+        style: { "max-width": "280px" },
         "menu-data": menuData.value,
         active: node.value?.id,
         "auto-hide": !pinned.value,