@opentiny/tiny-engine-setting-events 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/index.js

@@ -1,38 +1,32 @@
 import "./style.css";
-import { ref as F, reactive as Z, provide as Oe, resolveComponent as E, withDirectives as ne, openBlock as f, createBlock as w, withCtx as _, createElementVNode as t, createVNode as c, createTextVNode as A, resolveDynamicComponent as ge, vShow as oe, nextTick as Le, unref as P, computed as K, watchEffect as Ee, createElementBlock as D, Fragment as q, withModifiers as Te, renderList as te, normalizeClass as R, toDisplayString as B, createCommentVNode as H, watch as _e, inject as xe } from "vue";
-import { Button as Y, DialogBox as ke, Form as Ue, FormItem as fe, Input as ie, Popover as Ce, Tooltip as ze, Collapse as je, CollapseItem as he, Switch as Re, Search as Fe } from "@opentiny/vue";
-import { getMergeMeta as Ve, useLayout as De, useCanvas as Q, getMetaApi as G, META_APP as W, useHistory as Je, useBlock as Xe, useMaterial as He, useModal as $e, useProperties as V } from "@opentiny/tiny-engine-meta-register";
-import { BlockLinkEvent as qe, SvgButton as Ke, VueMonaco as Ye } from "@opentiny/tiny-engine-common";
-import { iconHelpQuery as Ie, iconChevronDown as Qe, iconYes as Ze } from "@opentiny/vue-icon";
+import { ref as j, reactive as q, provide as we, resolveComponent as E, openBlock as _, createBlock as w, withCtx as y, createElementVNode as t, createVNode as m, createTextVNode as S, resolveDynamicComponent as ue, nextTick as Se, unref as P, computed as K, watchEffect as ye, createElementBlock as N, Fragment as $, renderList as ee, normalizeClass as z, toDisplayString as B, withDirectives as fe, createCommentVNode as X, vShow as ge, watch as ve, inject as xe } from "vue";
+import { Button as H, DialogBox as ke, Form as Oe, FormItem as _e, Input as ne, Popover as Le, Tooltip as Te, Collapse as Ue, CollapseItem as he, Checkbox as ze, Search as je } from "@opentiny/vue";
+import { getMergeMeta as Ve, useLayout as Ce, useCanvas as Y, getMetaApi as Z, META_APP as G, getOptions as Re, useHistory as Je, useBlock as Fe, useMaterial as Xe, useModal as $e, useProperties as D } from "@opentiny/tiny-engine-meta-register";
+import { BlockLinkEvent as Ke, SvgButton as He, VueMonaco as Ye } from "@opentiny/tiny-engine-common";
+import { iconChevronDown as qe, iconYes as Ze } from "@opentiny/vue-icon";
 import { string2Ast as be, ast2String as Ge } from "@opentiny/tiny-engine-common/js/ast";
-import { SwitchConfigurator as We, VariableConfigurator as en, InputConfigurator as nn, CodeConfigurator as on } from "@opentiny/tiny-engine-configurator";
-import { PROP_DATA_TYPE as X } from "@opentiny/tiny-engine-common/js/constants";
-import { constants as tn, utils as sn } from "@opentiny/tiny-engine-utils";
-const Ne = "newMethod", an = /[^0-9a-zA-Z_$]/, ln = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/, j = {
-  default: "选择已有方法或者添加新方法(点击 确定 之后将在JS面板中创建一个该名称的新方法)",
-  exist: "方法名称已存在",
-  ruleInvalid: "请输入有效的方法名，可以由字母、数字、下划线、$ 符号组成，不能以数字开头",
-  empty: "方法名称不能为空"
-}, Ae = {
+import { SwitchConfigurator as We, VariableConfigurator as Qe, InputConfigurator as en, CodeConfigurator as nn } from "@opentiny/tiny-engine-configurator";
+import { PROP_DATA_TYPE as F } from "@opentiny/tiny-engine-common/js/constants";
+import { constants as on, utils as tn } from "@opentiny/tiny-engine-utils";
+const oe = {
   id: "engine.setting.event",
   title: "高级",
   type: "setting",
   align: "left",
   name: "event",
   icon: ""
-};
-const J = (m, n) => {
-  const l = m.__vccOpts || m;
-  for (const [e, s] of n)
-    l[e] = s;
-  return l;
-}, se = F(!1), dn = () => {
-  se.value = !0;
-}, ye = () => {
-  se.value = !1;
-}, rn = {
+}, R = (p, o) => {
+  const a = p.__vccOpts || p;
+  for (const [e, s] of o)
+    a[e] = s;
+  return a;
+}, te = j(!1), sn = () => {
+  te.value = !0;
+}, Ee = () => {
+  te.value = !1;
+}, an = {
   components: {
-    TinyButton: Y,
+    TinyButton: H,
     TinyDialogBox: ke
   },
   inheritAttrs: !1,
@@ -42,36 +36,36 @@ const J = (m, n) => {
       default: () => ({})
     }
   },
-  setup(m) {
-    const { BindEventsDialogSidebar: n, BindEventsDialogContent: l } = Ve(Ae.id).components, { PLUGIN_NAME: e, activePlugin: s } = De(), { pageState: h } = Q(), { getMethods: b, saveMethod: v, highlightMethod: a } = G(W.Page), i = Z({
+  setup(p) {
+    const { BindEventsDialogSidebar: o, BindEventsDialogContent: a } = Ve(oe.id).components, { PLUGIN_NAME: e, activePlugin: s } = Ce(), { pageState: h } = Y(), { getMethods: b, saveMethod: g, highlightMethod: l } = Z(G.Page), i = q({
       editorContent: "",
       bindMethodInfo: {},
-      tip: j.default,
+      tip: "",
       tipError: !1,
       enableExtraParams: !1,
       isValidParams: !0
     });
-    Oe("context", i);
-    const p = (d) => {
+    we("context", i);
+    const u = (d) => {
       i.bindMethodInfo = d;
-    }, o = (d) => {
-      var O, N;
+    }, n = (d) => {
+      var A, C;
       if (!d)
         return;
-      const g = (O = m.eventBinding) == null ? void 0 : O.eventName;
-      if (!g)
+      const v = (A = p.eventBinding) == null ? void 0 : A.eventName;
+      if (!v)
         return;
-      const C = (N = h == null ? void 0 : h.currentSchema) == null ? void 0 : N.props;
-      if (!C)
+      const k = (C = h == null ? void 0 : h.currentSchema) == null ? void 0 : C.props;
+      if (!k)
         return;
-      const { name: M, extra: S } = d;
-      m[g] || (C[g] = {
+      const { name: M, extra: I } = d;
+      p[v] || (k[v] = {
         type: "JSExpression",
         value: ""
-      }), S && i.enableExtraParams && (C[g].params = S), C[g].value = `this.${M}`, Je().addHistory();
+      }), I && i.enableExtraParams && (k[v].params = I), k[v].value = `this.${M}`, Je().addHistory();
     }, r = () => {
-      i.tipError = !1, i.tip = j.default, i.isValidParams = !0;
-    }, u = () => {
+      i.tipError = !1, i.tip = "", i.isValidParams = !0;
+    }, f = () => {
       let d = "";
       if (i.enableExtraParams)
         try {
@@ -80,100 +74,105 @@ const J = (m, n) => {
           i.isValidParams = !1;
         }
       return d;
-    }, k = (d) => Array.from({ length: d.length }, (g, C) => `args${C}`).join(","), y = () => {
-      var C, M, S, O;
-      let d = (M = (C = b()) == null ? void 0 : C[i.bindMethodInfo.name]) == null ? void 0 : M.value, g = "{}";
+    }, c = (d) => Array.from({ length: d.length }, (v, k) => `args${k}`).join(","), V = () => {
+      var k, M, I, A;
+      let d = (M = (k = b()) == null ? void 0 : k[i.bindMethodInfo.name]) == null ? void 0 : M.value, v = "{}";
       if (d) {
-        let N = {};
+        let C = {};
         try {
-          N = be(d);
+          C = be(d);
         } catch {
-          d = d.replace("function", `function ${i.bindMethodInfo.name}`), N = be(d);
+          d = d.replace("function", `function ${i.bindMethodInfo.name}`), C = be(d);
         }
-        (O = (S = N == null ? void 0 : N.program) == null ? void 0 : S.body[0]) != null && O.body && (g = Ge(N.program.body[0].body));
+        (A = (I = C == null ? void 0 : C.program) == null ? void 0 : I.body[0]) != null && A.body && (v = Ge(C.program.body[0].body));
       }
-      return g || `{
+      return v || `{
 }`;
-    }, I = () => {
+    }, J = () => {
       s(e.Page).then(() => {
-        Le(() => {
+        Se(() => {
           var d;
-          a && a((d = i.bindMethodInfo) == null ? void 0 : d.name);
+          l && l((d = i.bindMethodInfo) == null ? void 0 : d.name);
         });
       });
     };
     return {
-      BindEventsDialogSidebar: n,
-      BindEventsDialogContent: l,
+      BindEventsDialogSidebar: o,
+      BindEventsDialogContent: a,
       state: i,
-      dialogVisible: se,
-      confirm: () => {
+      dialogVisible: te,
+      confirm: async () => {
         if (i.tipError)
           return;
-        let d = "event", g = u(), C = d;
+        let d = "event", v = f(), k = d;
         if (!i.isValidParams)
           return;
-        g && (d = g.join(","), C = k(g)), o({ ...i.bindMethodInfo, params: d, extra: g });
-        const M = y();
-        v == null || v({
-          name: i.bindMethodInfo.name,
-          content: i.enableExtraParams ? `function ${i.bindMethodInfo.name}(eventArgs,${C}) ${M}` : `function ${i.bindMethodInfo.name}(${C})  ${M}`
-        }), I(), ye();
+        v && (d = v.join(","), k = c(v)), n({ ...i.bindMethodInfo, params: d, extra: v });
+        const M = V(), { name: I } = i.bindMethodInfo, A = {
+          name: I,
+          content: i.enableExtraParams ? `function ${I}(eventArgs,${k}) ${M}` : `function ${I}(${k})  ${M}`
+        }, { beforeSaveMethod: C } = Re(oe.id);
+        typeof C == "function" && await C(A, i.bindMethodInfo), g == null || g(A), J(), Ee();
       },
       closeDialog: () => {
-        r(), ye();
+        r(), Ee();
       },
       openedDialog: () => {
-        var d, g, C;
-        i.enableExtraParams = !!((g = (d = m.eventBinding) == null ? void 0 : d.params) != null && g.length), i.editorContent = JSON.stringify(((C = m.eventBinding) == null ? void 0 : C.params) || [], null, 2), r();
+        var d, v, k;
+        i.enableExtraParams = !!((v = (d = p.eventBinding) == null ? void 0 : d.params) != null && v.length), i.editorContent = JSON.stringify(((k = p.eventBinding) == null ? void 0 : k.params) || [], null, 2), r();
       },
-      selectMethod: p
+      selectMethod: u
     };
   }
-}, cn = { class: "bind-event-dialog-content" }, pn = { class: "bind-dialog-footer" };
-function mn(m, n, l, e, s, h) {
-  const b = E("tiny-button"), v = E("tiny-dialog-box");
-  return ne((f(), w(v, {
+}, ln = { class: "bind-event-dialog-content" }, dn = { class: "bind-dialog-footer" };
+function rn(p, o, a, e, s, h) {
+  const b = E("tiny-button"), g = E("tiny-dialog-box");
+  return _(), w(g, {
+    visible: e.dialogVisible,
     title: "事件绑定",
     width: "50%",
+    "dialog-class": "bind-event-dialog",
+    draggable: "",
     "append-to-body": !0,
     onClose: e.closeDialog,
     onOpened: e.openedDialog
   }, {
-    footer: _(() => [
-      t("div", pn, [
-        c(b, {
-          type: "info",
-          onClick: e.confirm
-        }, {
-          default: _(() => n[0] || (n[0] = [
-            A("确 定")
+    footer: y(() => [
+      t("div", dn, [
+        m(b, { onClick: e.closeDialog }, {
+          default: y(() => o[0] || (o[0] = [
+            S("取 消")
           ])),
           _: 1
         }, 8, ["onClick"]),
-        c(b, { onClick: e.closeDialog }, {
-          default: _(() => n[1] || (n[1] = [
-            A("取 消")
+        m(b, {
+          type: "info",
+          onClick: e.confirm
+        }, {
+          default: y(() => o[1] || (o[1] = [
+            S("确 定")
           ])),
           _: 1
         }, 8, ["onClick"])
       ])
     ]),
-    default: _(() => [
-      t("div", cn, [
-        (f(), w(ge(e.BindEventsDialogSidebar), { eventBinding: l.eventBinding }, null, 8, ["eventBinding"])),
-        (f(), w(ge(e.BindEventsDialogContent), { dialogVisible: e.dialogVisible }, null, 8, ["dialogVisible"]))
+    default: y(() => [
+      o[2] || (o[2] = t("div", { class: "bind-event-dialog-tip" }, " 选择已有方法或者添加新方法（点击 确定 之后将在JS面板中创建一个该名称的新方法）。 ", -1)),
+      t("div", ln, [
+        (_(), w(ue(e.BindEventsDialogSidebar), {
+          dialogVisible: e.dialogVisible,
+          eventBinding: a.eventBinding
+        }, null, 8, ["dialogVisible", "eventBinding"])),
+        (_(), w(ue(e.BindEventsDialogContent), { dialogVisible: e.dialogVisible }, null, 8, ["dialogVisible"]))
       ])
     ]),
     _: 1
-  }, 8, ["onClose", "onOpened"])), [
-    [oe, e.dialogVisible]
-  ]);
+  }, 8, ["visible", "onClose", "onOpened"]);
 }
-const un = /* @__PURE__ */ J(rn, [["render", mn], ["__scopeId", "data-v-4b0930ec"]]), vn = {
+const cn = /* @__PURE__ */ R(an, [["render", rn], ["__scopeId", "data-v-d94a26d5"]]), mn = {
   onClick: {
     label: {
-      zh_CN: "鼠标单击时触发"
+      zh_CN: "点击事件"
     },
     description: {
       zh_CN: "鼠标单击时触发的回调函数"
@@ -227,7 +226,7 @@ const un = /* @__PURE__ */ J(rn, [["render", mn], ["__scopeId", "data-v-4b0930ec
     },
     defaultValue: ""
   }
-}, gn = [
+}, pn = [
   "onabort",
   "onafterprint",
   "onanimationend",
@@ -337,11 +336,10 @@ const un = /* @__PURE__ */ J(rn, [["render", mn], ["__scopeId", "data-v-4b0930ec
   "onwebkitanimationstart",
   "onwebkittransitionend",
   "onwheel"
-], _n = (m) => !!gn.map((l) => {
-  let e = l[2].toUpperCase();
-  return `${l.substring(0, 2)}${e}${l.substring(3)}`;
-}).includes(m);
-const fn = { class: "footer" }, hn = {
+], un = (p) => !!pn.map((a) => {
+  let e = a[2].toUpperCase();
+  return `${a.substring(0, 2)}${e}${a.substring(3)}`;
+}).includes(p), fn = { class: "footer" }, gn = {
   __name: "AddEventsDialog",
   props: {
     visible: {
@@ -354,11 +352,11 @@ const fn = { class: "footer" }, hn = {
     }
   },
   emits: ["closeDialog", "addEvent"],
-  setup(m, { emit: n }) {
-    const l = m, e = n, s = Z({
+  setup(p, { emit: o }) {
+    const a = p, e = o, s = q({
       eventDescription: "",
       eventName: ""
-    }), h = F(null), v = {
+    }), h = j(null), g = {
       eventDescription: [
         {
           required: !0,
@@ -368,12 +366,12 @@ const fn = { class: "footer" }, hn = {
       eventName: [
         { required: !0, message: "必填" },
         {
-          validator: (p, o, r) => {
-            if (l.componentEvents[s.eventName]) {
+          validator: (u, n, r) => {
+            if (a.componentEvents[s.eventName]) {
               r(new Error("事件名已存在"));
               return;
             }
-            if (!_n(s.eventName)) {
+            if (!un(s.eventName)) {
               r(new Error("请输入正确的浏览器事件名"));
               return;
             }
@@ -381,79 +379,79 @@ const fn = { class: "footer" }, hn = {
           }
         }
       ]
-    }, a = () => {
+    }, l = () => {
       e("closeDialog");
     }, i = () => {
-      h.value && h.value.validate((p) => {
-        if (!p)
+      h.value && h.value.validate((u) => {
+        if (!u)
           return;
-        const { eventName: o, eventDescription: r } = s;
-        e("addEvent", { eventName: o, eventDescription: r });
+        const { eventName: n, eventDescription: r } = s;
+        e("addEvent", { eventName: n, eventDescription: r });
       });
     };
-    return (p, o) => (f(), w(P(ke), {
-      visible: m.visible,
-      title: "添加自定义事件",
+    return (u, n) => (_(), w(P(ke), {
+      visible: p.visible,
+      title: "添加新事件",
       width: "400px",
       "append-to-body": !0,
       "close-on-click-modal": !1,
-      onClose: a
+      onClose: l
     }, {
-      footer: _(() => [
+      footer: y(() => [
         t("div", fn, [
-          c(P(Y), { onClick: a }, {
-            default: _(() => o[2] || (o[2] = [
-              A(" 取消")
+          m(P(H), { onClick: l }, {
+            default: y(() => n[2] || (n[2] = [
+              S(" 取消")
             ])),
             _: 1
           }),
-          c(P(Y), {
+          m(P(H), {
             type: "primary",
             onClick: i
           }, {
-            default: _(() => o[3] || (o[3] = [
-              A(" 确定")
+            default: y(() => n[3] || (n[3] = [
+              S(" 确定")
             ])),
             _: 1
           })
         ])
       ]),
-      default: _(() => [
-        c(P(Ue), {
+      default: y(() => [
+        m(P(Oe), {
           ref_key: "ruleForm",
           ref: h,
           model: s,
-          rules: v,
+          rules: g,
           "label-width": "100px",
           "inline-message": !0,
           "validate-type": "text",
           "label-position": "left",
           class: "add-custom-event-form"
         }, {
-          default: _(() => [
-            c(P(fe), {
+          default: y(() => [
+            m(P(_e), {
               label: "事件函数名",
               prop: "eventName",
               required: ""
             }, {
-              default: _(() => [
-                c(P(ie), {
+              default: y(() => [
+                m(P(ne), {
                   modelValue: s.eventName,
-                  "onUpdate:modelValue": o[0] || (o[0] = (r) => s.eventName = r),
+                  "onUpdate:modelValue": n[0] || (n[0] = (r) => s.eventName = r),
                   placeholder: "小驼峰格式，如：onDrag"
                 }, null, 8, ["modelValue"])
               ]),
               _: 1
             }),
-            c(P(fe), {
+            m(P(_e), {
               label: "事件描述",
               prop: "eventDescription",
               required: ""
             }, {
-              default: _(() => [
-                c(P(ie), {
+              default: y(() => [
+                m(P(ne), {
                   modelValue: s.eventDescription,
-                  "onUpdate:modelValue": o[1] || (o[1] = (r) => s.eventDescription = r)
+                  "onUpdate:modelValue": n[1] || (n[1] = (r) => s.eventDescription = r)
                 }, null, 8, ["modelValue"])
               ]),
               _: 1
@@ -465,21 +463,19 @@ const fn = { class: "footer" }, hn = {
       _: 1
     }, 8, ["visible"]));
   }
-}, bn = /* @__PURE__ */ J(hn, [["__scopeId", "data-v-932b189c"]]);
-const yn = {
+}, vn = /* @__PURE__ */ R(gn, [["__scopeId", "data-v-46f7fc7a"]]), _n = {
   components: {
-    BlockLinkEvent: qe,
-    BindEventsDialog: un,
-    TinyPopover: Ce,
-    TinyButton: Y,
-    IconHelpQuery: Ie(),
-    IconChevronDown: Qe(),
-    SvgButton: Ke,
-    AddEventsDialog: bn
+    BlockLinkEvent: Ke,
+    BindEventsDialog: cn,
+    TinyPopover: Le,
+    TinyButton: H,
+    IconChevronDown: qe(),
+    SvgButton: He,
+    AddEventsDialog: vn
   },
   inheritAttrs: !1,
   setup() {
-    const { PLUGIN_NAME: m, activePlugin: n } = De(), { pageState: l } = Q(), { getBlockEvents: e, getCurrentBlock: s, removeEventLink: h } = Xe(), { getMaterial: b } = He(), { confirm: v } = $e(), { highlightMethod: a } = G(W.Page), { commonEvents: i = {} } = Ve("engine.setting.event").options, p = Z({
+    const { PLUGIN_NAME: p, activePlugin: o } = Ce(), { pageState: a } = Y(), { getBlockEvents: e, getCurrentBlock: s, removeEventLink: h } = Fe(), { getMaterial: b } = Xe(), { confirm: g } = $e(), { highlightMethod: l } = Z(G.Page), { commonEvents: i = {} } = Ve("engine.setting.event").options, u = q({
       eventName: "",
       // 事件名称
       eventBinding: null,
@@ -488,67 +484,67 @@ const yn = {
       componentEvents: i,
       bindActions: {},
       showBindEventDialog: !1
-    }), o = K(() => !!l.isBlock), r = K(() => Object.keys(p.bindActions).length === 0);
-    Ee(() => {
-      var M, S, O, N, ee;
-      const x = (M = l == null ? void 0 : l.currentSchema) == null ? void 0 : M.componentName, d = b(x);
-      p.componentEvent = ((O = (S = d == null ? void 0 : d.content) == null ? void 0 : S.schema) == null ? void 0 : O.events) || ((N = d == null ? void 0 : d.schema) == null ? void 0 : N.events) || {}, p.componentEvents = { ...i, ...p.componentEvent };
-      const g = ((ee = l == null ? void 0 : l.currentSchema) == null ? void 0 : ee.props) || {}, C = Object.keys(g);
-      p.bindActions = {}, Object.entries(p.componentEvents).forEach(([z, Pe]) => {
-        var le, de, re;
-        if (C.indexOf(z) > -1) {
-          const Be = g[z], { value: Me, params: ce } = Be, we = !ce && ((de = (le = Me.match(/\((.+)\)$/)) == null ? void 0 : le[1]) == null ? void 0 : de.split(",")) || ce, L = {
-            eventName: z,
+    }), n = K(() => !!a.isBlock), r = K(() => Object.keys(u.bindActions).length === 0);
+    ye(() => {
+      var M, I, A, C, W;
+      const x = (M = a == null ? void 0 : a.currentSchema) == null ? void 0 : M.componentName, d = b(x);
+      u.componentEvent = ((A = (I = d == null ? void 0 : d.content) == null ? void 0 : I.schema) == null ? void 0 : A.events) || ((C = d == null ? void 0 : d.schema) == null ? void 0 : C.events) || {}, u.componentEvents = { ...i, ...u.componentEvent };
+      const v = ((W = a == null ? void 0 : a.currentSchema) == null ? void 0 : W.props) || {}, k = Object.keys(v);
+      u.bindActions = {}, Object.entries(u.componentEvents).forEach(([U, Ie]) => {
+        var se, ae, le;
+        if (k.indexOf(U) > -1) {
+          const Ae = v[U], { value: Pe, params: de } = Ae, Be = !de && ((ae = (se = Pe.match(/\((.+)\)$/)) == null ? void 0 : se[1]) == null ? void 0 : ae.split(",")) || de, O = {
+            eventName: U,
             ref: "",
-            event: g[z],
-            params: we
+            event: v[U],
+            params: Be
           };
-          if (L.event.type === "JSExpression" && (L.ref = L.event.value.replace("this.", "").replace(/\(.*\)$/, "")), l.isBlock) {
-            L.metaEvent = Pe;
-            const pe = e(s()), me = (re = l == null ? void 0 : l.currentSchema) == null ? void 0 : re.id;
-            me && pe && Object.entries(pe).forEach(([Se, T]) => {
-              var ue, ve;
-              me === ((ue = T == null ? void 0 : T.linked) == null ? void 0 : ue.id) && z === ((ve = T == null ? void 0 : T.linked) == null ? void 0 : ve.event) && (L.linked = T.linked, L.linkedEventName = Se);
+          if (O.event.type === "JSExpression" && (O.ref = O.event.value.replace("this.", "").replace(/\(.*\)$/, "")), a.isBlock) {
+            O.metaEvent = Ie;
+            const re = e(s()), ce = (le = a == null ? void 0 : a.currentSchema) == null ? void 0 : le.id;
+            ce && re && Object.entries(re).forEach(([Me, L]) => {
+              var me, pe;
+              ce === ((me = L == null ? void 0 : L.linked) == null ? void 0 : me.id) && U === ((pe = L == null ? void 0 : L.linked) == null ? void 0 : pe.event) && (O.linked = L.linked, O.linkedEventName = Me);
             });
           }
-          p.bindActions[z] = L;
+          u.bindActions[U] = O;
         }
       });
     });
-    const u = (x, d) => {
-      d && p.bindActions[x.eventName] || (p.eventBinding = x, dn());
-    }, k = (x) => {
-      var g;
-      Object.keys(((g = l == null ? void 0 : l.currentSchema) == null ? void 0 : g.props) || {}).indexOf(x.eventName) > -1 && delete l.currentSchema.props[x.eventName];
+    const f = (x, d) => {
+      d && u.bindActions[x.eventName] || (u.eventBinding = x, sn());
+    }, c = (x) => {
+      var v;
+      Object.keys(((v = a == null ? void 0 : a.currentSchema) == null ? void 0 : v.props) || {}).indexOf(x.eventName) > -1 && delete a.currentSchema.props[x.eventName];
     };
     return {
-      state: p,
-      isBlock: o,
+      state: u,
+      isBlock: n,
       isEmpty: r,
       delEvent: (x) => {
-        v({
+        g({
           title: "提示",
           message: `您确定要删除事件 ${x.eventName} 吗?`,
           exec() {
-            l.isBlock && h({ linked: x.linked }), k(x);
+            a.isBlock && h({ linked: x.linked }), c(x);
           }
         });
       },
       openCodePanel: (x) => {
-        x && n(m.Page).then(() => {
-          a && a(x.ref);
+        x && o(p.Page).then(() => {
+          l && l(x.ref);
         });
       },
-      openActionDialog: u,
+      openActionDialog: f,
       handleAddEvent: (x) => {
-        const { eventName: d, eventDescription: g } = x;
-        Object.assign(p.componentEvents, {
+        const { eventName: d, eventDescription: v } = x;
+        Object.assign(u.componentEvents, {
           [d]: {
             label: {
-              zh_CN: g
+              zh_CN: v
             },
             description: {
-              zh_CN: `${g}的回调函数`
+              zh_CN: `${v}的回调函数`
             },
             type: "event",
             functionInfo: {
@@ -557,326 +553,307 @@ const yn = {
             },
             defaultValue: ""
           }
-        }), p.showBindEventDialog = !1;
+        }), u.showBindEventDialog = !1;
       },
       handleToggleAddEventDialog: (x) => {
-        p.showBindEventDialog = x;
+        u.showBindEventDialog = x;
       }
     };
   }
-}, En = { class: "bind-action-list" }, xn = { class: "popover-head" }, kn = { class: "head-left" }, Cn = { class: "bind-event-list" }, Vn = ["onClick"], Dn = { class: "bind-actions" }, In = { class: "action-item bind-action-item" }, Nn = ["onClick"], An = { class: "event-bind" }, Pn = { class: "action-buttons" }, Bn = { class: "empty-action" }, Mn = { class: "icon" };
-function wn(m, n, l, e, s, h) {
-  const b = E("icon-help-query"), v = E("tiny-popover"), a = E("tiny-button"), i = E("icon-chevron-down"), p = E("block-link-event"), o = E("svg-button"), r = E("svg-icon"), u = E("bind-events-dialog"), k = E("add-events-dialog");
-  return f(), D(q, null, [
-    t("div", En, [
-      t("div", xn, [
-        t("span", kn, [
-          c(a, {
-            class: "title add-custom-event-button",
-            "reset-time": 0,
-            onClick: n[0] || (n[0] = Te((y) => e.handleToggleAddEventDialog(!0), ["stop"]))
-          }, {
-            default: _(() => [
-              n[3] || (n[3] = t("span", { class: "custom-event-button-text" }, "添加自定义事件", -1)),
-              c(v, {
-                placement: "bottom-start",
-                trigger: "hover",
-                popperClass: "setting-advanced-add-custom-event-tip"
-              }, {
-                reference: _(() => [
-                  c(b, { class: "icon-help" })
-                ]),
-                default: _(() => [
-                  n[2] || (n[2] = t("div", { class: "add-custom-event-tip" }, [
-                    A(" 支持添加原生 DOM 事件，添加后点击 "),
-                    t("span", { class: "event-tip-highlight" }, " 绑定事件 "),
-                    A(" 为画布中所选元素增加事件 ")
-                  ], -1))
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        c(v, {
+}, hn = { class: "bind-action-list" }, bn = { class: "popover-head" }, En = { class: "bind-event-list" }, yn = ["onClick"], xn = { class: "bind-actions" }, kn = { class: "action-item bind-action-item" }, Vn = ["onClick"], Cn = { class: "event-bind" }, Dn = { class: "action-buttons" }, Nn = { class: "empty-action" }, In = { class: "icon" };
+function An(p, o, a, e, s, h) {
+  const b = E("icon-chevron-down"), g = E("tiny-button"), l = E("tiny-popover"), i = E("svg-icon"), u = E("block-link-event"), n = E("svg-button"), r = E("bind-events-dialog"), f = E("add-events-dialog");
+  return _(), N($, null, [
+    t("div", hn, [
+      t("div", bn, [
+        m(l, {
           popperClass: "option-popper setting-advanced-bind-event-list",
-          placement: "bottom-end",
-          trigger: "hover"
+          placement: "bottom-start",
+          trigger: "hover",
+          class: "bind-action-button-item",
+          width: "256",
+          "visible-arrow": !1
         }, {
-          reference: _(() => [
-            c(a, { class: "bind-event-btn" }, {
-              default: _(() => [
-                n[4] || (n[4] = t("span", null, "绑定事件", -1)),
-                c(i, { class: "icon-chevron-down" })
+          reference: y(() => [
+            m(g, { class: "bind-event-btn" }, {
+              default: y(() => [
+                o[2] || (o[2] = t("span", null, "绑定事件", -1)),
+                m(b, { class: "icon-chevron-down" })
               ]),
               _: 1
             })
           ]),
-          default: _(() => [
-            t("ul", Cn, [
-              (f(!0), D(q, null, te(e.state.componentEvents, (y, I) => {
-                var $;
-                return f(), D("li", {
-                  key: I,
-                  class: R(["bind-event-list-item", { "bind-event-list-item-notallow": e.state.bindActions[I] }]),
-                  onClick: (ae) => e.openActionDialog({ eventName: I }, !0)
+          default: y(() => [
+            t("ul", En, [
+              (_(!0), N($, null, ee(e.state.componentEvents, (c, V) => {
+                var J;
+                return _(), N("li", {
+                  key: V,
+                  class: z(["bind-event-list-item", { "bind-event-list-item-notallow": e.state.bindActions[V] }]),
+                  onClick: (ie) => e.openActionDialog({ eventName: V }, !0)
                 }, [
-                  t("div", null, B(I) + "  " + B((($ = y == null ? void 0 : y.label) == null ? void 0 : $.zh_CN) || I), 1)
-                ], 10, Vn);
+                  t("div", null, B(V) + "  |  " + B(((J = c == null ? void 0 : c.label) == null ? void 0 : J.zh_CN) || V), 1)
+                ], 10, yn);
               }), 128))
             ])
           ]),
           _: 1
+        }),
+        m(g, {
+          class: "title add-custom-event-button bind-action-button-item",
+          onClick: o[0] || (o[0] = (c) => e.handleToggleAddEventDialog(!0))
+        }, {
+          default: y(() => [
+            m(i, {
+              name: "add",
+              class: "custom-event-button-icon"
+            }),
+            o[3] || (o[3] = t("span", { class: "custom-event-button-text" }, "添加新事件", -1))
+          ]),
+          _: 1
         })
       ]),
-      ne(t("ul", Dn, [
-        (f(!0), D(q, null, te(e.state.bindActions, (y) => (f(), D("li", {
-          key: y.eventName
+      fe(t("ul", xn, [
+        (_(!0), N($, null, ee(e.state.bindActions, (c) => (_(), N("li", {
+          key: c.eventName
         }, [
-          t("div", In, [
+          t("div", kn, [
             t("div", {
               class: "binding-name",
-              onClick: (I) => e.openActionDialog(y)
+              onClick: (V) => e.openActionDialog(c)
             }, [
               t("div", null, [
-                A(B(y.eventName), 1),
-                t("span", null, B(e.state.componentEvents[y.eventName].label.zh_CN), 1)
+                S(B(c.eventName), 1),
+                t("span", null, B(e.state.componentEvents[c.eventName].label.zh_CN), 1)
               ]),
               t("div", {
-                class: R({ linked: y.linked })
-              }, B(y.linkedEventName), 3),
-              t("span", An, B(y.ref), 1)
-            ], 8, Nn),
-            t("div", Pn, [
-              e.isBlock ? (f(), w(p, {
+                class: z({ linked: c.linked })
+              }, B(c.linkedEventName), 3),
+              t("span", Cn, B(c.ref), 1)
+            ], 8, Vn),
+            t("div", Dn, [
+              e.isBlock ? (_(), w(u, {
                 key: 0,
-                data: y
-              }, null, 8, ["data"])) : H("", !0),
-              c(o, {
+                data: c
+              }, null, 8, ["data"])) : X("", !0),
+              m(n, {
                 name: "plugin-icon-page-schema",
                 tips: "定位到代码",
                 placement: "top",
-                onClick: (I) => e.openCodePanel(y)
+                onClick: (V) => e.openCodePanel(c)
               }, null, 8, ["onClick"]),
-              c(o, {
+              m(n, {
                 name: "setting",
                 tips: "设置",
                 placement: "top",
-                onClick: (I) => e.openActionDialog(y, !1)
+                onClick: (V) => e.openActionDialog(c, !1)
               }, null, 8, ["onClick"]),
-              c(o, {
+              m(n, {
                 name: "delete",
                 tips: "删除",
                 placement: "top",
-                onClick: (I) => e.delEvent(y)
+                onClick: (V) => e.delEvent(c)
               }, null, 8, ["onClick"])
             ])
           ])
         ]))), 128))
       ], 512), [
-        [oe, !e.isEmpty]
+        [ge, !e.isEmpty]
       ]),
-      ne(t("div", Bn, [
-        t("div", Mn, [
-          c(r, {
+      fe(t("div", Nn, [
+        t("div", In, [
+          m(i, {
             name: "empty-action",
             class: "empty-action-icon"
           })
         ]),
-        n[5] || (n[5] = t("div", { class: "center" }, "元素事件绑定", -1)),
-        n[6] || (n[6] = t("span", { class: "text" }, [
-          A(" 点击 "),
-          t("span", { class: "empty-bind-event-tip" }, "绑定事件"),
-          A("为画布中所选元素增加事件")
-        ], -1))
+        o[4] || (o[4] = t("div", { class: "center" }, "支持添加原生DOM事件，然后点击 绑定事件 为画布所选元素增加事件", -1))
       ], 512), [
-        [oe, e.isEmpty]
+        [ge, e.isEmpty]
       ])
     ]),
-    c(u, {
+    m(r, {
       eventBinding: e.state.eventBinding
     }, null, 8, ["eventBinding"]),
-    c(k, {
+    m(f, {
       visible: e.state.showBindEventDialog,
       componentEvents: e.state.componentEvents,
-      onCloseDialog: n[1] || (n[1] = (y) => e.handleToggleAddEventDialog(!1)),
+      onCloseDialog: o[1] || (o[1] = (c) => e.handleToggleAddEventDialog(!1)),
       onAddEvent: e.handleAddEvent
     }, null, 8, ["visible", "componentEvents", "onAddEvent"])
   ], 64);
 }
-const Sn = /* @__PURE__ */ J(yn, [["render", wn], ["__scopeId", "data-v-3b65f9b0"]]);
-const { DEFAULT_LOOP_NAME: U } = tn, { string2Obj: On } = sn, Ln = {
+const Pn = /* @__PURE__ */ R(_n, [["render", An], ["__scopeId", "data-v-590058c8"]]), { DEFAULT_LOOP_NAME: T } = on, { string2Obj: Bn } = tn, Mn = {
   components: {
     SwitchConfigurator: We,
-    TinyTooltip: ze,
-    VariableConfigurator: en,
-    InputConfigurator: nn,
-    CodeConfigurator: on
+    TinyTooltip: Te,
+    VariableConfigurator: Qe,
+    InputConfigurator: en,
+    CodeConfigurator: nn
   },
   inheritAttrs: !1,
   setup() {
-    const { pageState: m } = Q(), n = F(!1), l = K(() => {
-      var o;
-      return ((o = n.value) == null ? void 0 : o.type) === X.JSEXPRESSION;
+    const { pageState: p } = Y(), o = j(!1), a = K(() => {
+      var n;
+      return ((n = o.value) == null ? void 0 : n.type) === F.JSEXPRESSION;
     }), e = () => {
-      var o, r;
-      return ((r = (o = V().getSchema()) == null ? void 0 : o.loopArgs) == null ? void 0 : r[1]) || U.INDEX;
-    }, s = Z({
+      var n, r;
+      return ((r = (n = D().getSchema()) == null ? void 0 : n.loopArgs) == null ? void 0 : r[1]) || T.INDEX;
+    }, s = q({
       loopData: {
-        type: X.JSEXPRESSION,
+        type: F.JSEXPRESSION,
         value: "[]"
       },
       loopItem: "item",
       loopIndex: "index",
       isLoop: K(() => {
-        var o;
-        return ((o = s.loopData) == null ? void 0 : o.type) === X.JSEXPRESSION;
+        var n;
+        return ((n = s.loopData) == null ? void 0 : n.type) === F.JSEXPRESSION;
       }),
       loopKey: "",
       shouldUpdate: !1
     });
-    _e(
-      () => [m == null ? void 0 : m.currentSchema, s.shouldUpdate],
-      ([o]) => {
-        var r, u, k, y;
-        n.value = (o == null ? void 0 : o.condition) === void 0 ? !0 : o == null ? void 0 : o.condition, s.loopData = o == null ? void 0 : o.loop, s.loopItem = ((r = o == null ? void 0 : o.loopArgs) == null ? void 0 : r[0]) || "", s.loopIndex = ((u = o == null ? void 0 : o.loopArgs) == null ? void 0 : u[1]) || "", s.loopKey = ((y = (k = o == null ? void 0 : o.props) == null ? void 0 : k.key) == null ? void 0 : y.value) || "";
+    ve(
+      () => [p == null ? void 0 : p.currentSchema, s.shouldUpdate],
+      ([n]) => {
+        var r, f, c, V;
+        o.value = (n == null ? void 0 : n.condition) === void 0 ? !0 : n == null ? void 0 : n.condition, s.loopData = n == null ? void 0 : n.loop, s.loopItem = ((r = n == null ? void 0 : n.loopArgs) == null ? void 0 : r[0]) || "", s.loopIndex = ((f = n == null ? void 0 : n.loopArgs) == null ? void 0 : f[1]) || "", s.loopKey = ((V = (c = n == null ? void 0 : n.props) == null ? void 0 : c.key) == null ? void 0 : V.value) || "";
       }
     );
-    const h = (o = "") => {
-      o = o.replace(/\s*/g, "");
-      const r = V().getSchema();
+    const h = (n = "") => {
+      n = n.replace(/\s*/g, "");
+      const r = D().getSchema();
       if (!r)
         return;
-      const u = Number(o).toString() !== "NaN";
+      const f = Number(n).toString() !== "NaN";
       r.props = r.props || {};
-      const k = r.props;
-      o && !u && (k.key = {
-        type: X.JSEXPRESSION,
-        value: o
-      }), o || (s.isLoop ? k.key = {
-        type: X.JSEXPRESSION,
+      const c = r.props;
+      n && !f && (c.key = {
+        type: F.JSEXPRESSION,
+        value: n
+      }), n || (s.isLoop ? c.key = {
+        type: F.JSEXPRESSION,
         value: e()
-      } : delete k.key);
+      } : delete c.key);
     };
-    _e([() => s.isLoop, () => s.loopIndex], () => {
+    ve([() => s.isLoop, () => s.loopIndex], () => {
       !s.loopKey && s.isLoop && h(e()), s.isLoop || h("");
     });
     const b = () => {
-      var o;
-      s.loopData = (o = V().getSchema()) == null ? void 0 : o.loop;
-    }, v = (o) => {
-      V().getSchema() && (o === !1 || o != null && o.type ? V().getSchema().condition = o : delete V().getSchema().condition, Q().canvasApi.value.updateRect(), n.value = o);
-    }, a = (o) => {
-      V().getSchema().loopArgs ? V().getSchema().loopArgs[1] = o || U.INDEX : V().getSchema().loopArgs = [U.ITEM, o];
+      var n;
+      s.loopData = (n = D().getSchema()) == null ? void 0 : n.loop;
+    }, g = (n) => {
+      D().getSchema() && (n === !1 || n != null && n.type ? D().getSchema().condition = n : delete D().getSchema().condition, Y().canvasApi.value.updateRect(), o.value = n);
+    }, l = (n) => {
+      D().getSchema().loopArgs ? D().getSchema().loopArgs[1] = n || T.INDEX : D().getSchema().loopArgs = [T.ITEM, n];
     };
     return {
-      condition: n,
-      setConfig: v,
-      isBind: l,
+      condition: o,
+      setConfig: g,
+      isBind: a,
       state: s,
-      setLoop: (o) => {
-        o ? (V().getSchema().loop = o != null && o.type ? o : On(o), a(U.INDEX)) : (h(), delete V().getSchema().loop, delete V().getSchema().loopArgs), s.shouldUpdate = !s.shouldUpdate;
+      setLoop: (n) => {
+        n ? (D().getSchema().loop = n != null && n.type ? n : Bn(n), l(T.INDEX)) : (h(), delete D().getSchema().loop, delete D().getSchema().loopArgs), s.shouldUpdate = !s.shouldUpdate;
       },
-      setLoopItem: (o) => {
-        V().getSchema().loopArgs ? V().getSchema().loopArgs[0] = o || U.ITEM : V().getSchema().loopArgs = [o, U.INDEX];
+      setLoopItem: (n) => {
+        D().getSchema().loopArgs ? D().getSchema().loopArgs[0] = n || T.ITEM : D().getSchema().loopArgs = [n, T.INDEX];
       },
-      DEFAULT_LOOP_NAME: U,
+      DEFAULT_LOOP_NAME: T,
       openEditor: b,
-      setLoopIndex: a,
+      setLoopIndex: l,
       setLoopKey: h,
       getIndexName: e
     };
   }
-}, Tn = { class: "advanced-config-container" }, Un = { class: "advnce-config" }, zn = { class: "advanced-config-form-item" }, jn = ["title"], Rn = { class: "advnce-config" }, Fn = { class: "advanced-config-form-item" }, Jn = ["title"], Xn = { class: "advnce-config" }, Hn = { class: "advanced-config-form-item" }, $n = { class: "advnce-config" }, qn = { class: "advanced-config-form-item" }, Kn = { class: "advnce-config" }, Yn = { class: "advanced-config-form-item" };
-function Qn(m, n, l, e, s, h) {
-  var o, r;
-  const b = E("switch-configurator"), v = E("variable-configurator"), a = E("code-configurator"), i = E("input-configurator"), p = E("tiny-tooltip");
-  return f(), D("div", Tn, [
-    t("div", Un, [
-      n[6] || (n[6] = t("label", { class: "text-ellipsis-multiple" }, "是否渲染", -1)),
-      t("div", zn, [
-        e.isBind ? (f(), D("div", {
+}, wn = { class: "advanced-config-container" }, Sn = { class: "advnce-config" }, On = { class: "advanced-config-form-item" }, Ln = ["title"], Tn = { class: "advnce-config" }, Un = { class: "advanced-config-form-item" }, zn = ["title"], jn = { class: "advnce-config" }, Rn = { class: "advanced-config-form-item" }, Jn = { class: "advnce-config" }, Fn = { class: "advanced-config-form-item" }, Xn = { class: "advnce-config" }, $n = { class: "advanced-config-form-item" };
+function Kn(p, o, a, e, s, h) {
+  var n, r;
+  const b = E("switch-configurator"), g = E("variable-configurator"), l = E("code-configurator"), i = E("input-configurator"), u = E("tiny-tooltip");
+  return _(), N("div", wn, [
+    t("div", Sn, [
+      o[6] || (o[6] = t("label", { class: "text-ellipsis-multiple" }, "是否渲染", -1)),
+      t("div", On, [
+        e.isBind ? (_(), N("div", {
           key: 1,
           class: "binding-state text-ellipsis-multiple",
           title: e.condition.value
-        }, " 已绑定：" + B(e.condition.value), 9, jn)) : (f(), w(b, {
+        }, " 已绑定：" + B(e.condition.value), 9, Ln)) : (_(), w(b, {
           key: 0,
           modelValue: e.condition,
           "onUpdate:modelValue": e.setConfig
         }, null, 8, ["modelValue", "onUpdate:modelValue"])),
-        c(v, {
+        m(g, {
           modelValue: e.condition,
           "onUpdate:modelValue": [
-            n[0] || (n[0] = (u) => e.condition = u),
+            o[0] || (o[0] = (f) => e.condition = f),
             e.setConfig
           ],
           name: "advance"
         }, null, 8, ["modelValue", "onUpdate:modelValue"])
       ])
     ]),
-    t("div", Rn, [
-      n[7] || (n[7] = t("label", { class: "text-ellipsis-multiple" }, "循环数据", -1)),
-      t("div", Fn, [
-        e.state.isLoop ? (f(), D("div", {
+    t("div", Tn, [
+      o[7] || (o[7] = t("label", { class: "text-ellipsis-multiple" }, "循环数据", -1)),
+      t("div", Un, [
+        e.state.isLoop ? (_(), N("div", {
           key: 1,
           class: "binding-state text-ellipsis-multiple",
-          title: (o = e.state.loopData) == null ? void 0 : o.value
-        }, " 已绑定：" + B((r = e.state.loopData) == null ? void 0 : r.value), 9, Jn)) : (f(), w(a, {
+          title: (n = e.state.loopData) == null ? void 0 : n.value
+        }, " 已绑定：" + B((r = e.state.loopData) == null ? void 0 : r.value), 9, zn)) : (_(), w(l, {
           key: 0,
           modelValue: e.state.loopData,
           "onUpdate:modelValue": [
-            n[1] || (n[1] = (u) => e.state.loopData = u),
+            o[1] || (o[1] = (f) => e.state.loopData = f),
             e.setLoop
           ],
           "data-type": "JSExpression",
           onOpen: e.openEditor
         }, null, 8, ["modelValue", "onUpdate:modelValue", "onOpen"])),
-        c(v, {
+        m(g, {
           modelValue: e.state.loopData,
           "onUpdate:modelValue": [
-            n[2] || (n[2] = (u) => e.state.loopData = u),
+            o[2] || (o[2] = (f) => e.state.loopData = f),
             e.setLoop
           ],
           name: "advance"
         }, null, 8, ["modelValue", "onUpdate:modelValue"])
       ])
     ]),
-    t("div", Xn, [
-      n[8] || (n[8] = t("label", { class: "text-ellipsis-multiple" }, "迭代变量名", -1)),
-      t("div", Hn, [
-        c(i, {
+    t("div", jn, [
+      o[8] || (o[8] = t("label", { class: "text-ellipsis-multiple" }, "迭代变量名", -1)),
+      t("div", Rn, [
+        m(i, {
           modelValue: e.state.loopItem,
           "onUpdate:modelValue": [
-            n[3] || (n[3] = (u) => e.state.loopItem = u),
+            o[3] || (o[3] = (f) => e.state.loopItem = f),
             e.setLoopItem
           ],
           placeholder: `默认值为：${e.DEFAULT_LOOP_NAME.ITEM}`
         }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
       ])
     ]),
-    t("div", $n, [
-      n[9] || (n[9] = t("label", { class: "text-ellipsis-multiple" }, "索引变量名", -1)),
-      t("div", qn, [
-        c(i, {
+    t("div", Jn, [
+      o[9] || (o[9] = t("label", { class: "text-ellipsis-multiple" }, "索引变量名", -1)),
+      t("div", Fn, [
+        m(i, {
           modelValue: e.state.loopIndex,
           "onUpdate:modelValue": [
-            n[4] || (n[4] = (u) => e.state.loopIndex = u),
+            o[4] || (o[4] = (f) => e.state.loopIndex = f),
             e.setLoopIndex
           ],
           placeholder: `默认值为：${e.DEFAULT_LOOP_NAME.INDEX}`
         }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
       ])
     ]),
-    t("div", Kn, [
-      n[10] || (n[10] = t("label", { class: "text-ellipsis-multiple" }, "key", -1)),
-      t("div", Yn, [
-        c(p, { content: "建议填写循环项中的唯一值（如item.id），如果填写为数字将不保存" }, {
-          default: _(() => [
-            c(i, {
+    t("div", Xn, [
+      o[10] || (o[10] = t("label", { class: "text-ellipsis-multiple" }, "key", -1)),
+      t("div", $n, [
+        m(u, { content: "建议填写循环项中的唯一值（如item.id），如果填写为数字将不保存" }, {
+          default: y(() => [
+            m(i, {
               modelValue: e.state.loopKey,
               "onUpdate:modelValue": [
-                n[5] || (n[5] = (u) => e.state.loopKey = u),
+                o[5] || (o[5] = (f) => e.state.loopKey = f),
                 e.setLoopKey
               ],
               placeholder: `默认为索引名：${e.getIndexName()}`
@@ -888,30 +865,30 @@ function Qn(m, n, l, e, s, h) {
     ])
   ]);
 }
-const Zn = /* @__PURE__ */ J(Ln, [["render", Qn], ["__scopeId", "data-v-d8b5ad1a"]]), Gn = {
+const Hn = /* @__PURE__ */ R(Mn, [["render", Kn], ["__scopeId", "data-v-df21aa0f"]]), Yn = {
   __name: "Main",
-  setup(m) {
-    const n = F(["bindEvent", "advancedConfig"]);
-    return (l, e) => (f(), w(P(je), {
-      modelValue: n.value,
-      "onUpdate:modelValue": e[0] || (e[0] = (s) => n.value = s)
+  setup(p) {
+    const o = j(["bindEvent", "advancedConfig"]);
+    return (a, e) => (_(), w(P(Ue), {
+      modelValue: o.value,
+      "onUpdate:modelValue": e[0] || (e[0] = (s) => o.value = s)
     }, {
-      default: _(() => [
-        c(P(he), {
+      default: y(() => [
+        m(P(he), {
           title: "事件绑定",
           name: "bindEvent"
         }, {
-          default: _(() => [
-            c(Sn)
+          default: y(() => [
+            m(Pn)
           ]),
           _: 1
         }),
-        c(P(he), {
+        m(P(he), {
           title: "高级配置",
           name: "advancedConfig"
         }, {
-          default: _(() => [
-            c(Zn)
+          default: y(() => [
+            m(Hn)
           ]),
           _: 1
         })
@@ -919,131 +896,114 @@ const Zn = /* @__PURE__ */ J(Ln, [["render", Qn], ["__scopeId", "data-v-d8b5ad1a
       _: 1
     }, 8, ["modelValue"]));
   }
-};
-const Wn = {
+}, De = "newMethod", qn = /[^0-9a-zA-Z_$]/, Zn = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/, Q = {
+  default: "选择已有方法或者添加新方法(点击 确定 之后将在JS面板中创建一个该名称的新方法)",
+  exist: "方法名称已存在",
+  ruleInvalid: "请输入有效的方法名，可以由字母、数字、下划线、$ 符号组成，不能以数字开头",
+  empty: "方法名称不能为空"
+}, Gn = {
   components: {
     MonacoEditor: Ye,
-    TinyInput: ie,
-    TinyPopover: Ce,
-    IconHelpQuery: Ie(),
-    TinySwitch: Re
+    TinyInput: ne,
+    TinyCheckbox: ze
   },
   props: {
     dialogVisible: Boolean
   },
   setup() {
-    const { getMethodNameList: m } = G(W.Page), n = xe("context"), l = {
+    const { getMethodNameList: p } = Z(G.Page), o = xe("context"), a = {
       language: "json",
       lineNumbers: !1,
       minimap: {
         enabled: !1
       }
-    }, e = (a) => {
-      n.editorContent = a;
-    }, s = (a) => !a, h = (a) => m == null ? void 0 : m().includes(a), b = (a) => !ln.test(a);
+    }, e = (l) => {
+      o.editorContent = l;
+    }, s = (l) => !l, h = (l) => p == null ? void 0 : p().includes(l), b = (l) => !Zn.test(l);
     return {
-      NEW_METHOD_TYPE: Ne,
-      context: n,
-      editorOptions: l,
-      change: (a) => {
+      NEW_METHOD_TYPE: De,
+      context: o,
+      editorOptions: a,
+      change: (l) => {
         const i = [
-          { validator: s, tip: j.empty },
-          { validator: h, tip: j.exist },
-          { validator: b, tip: j.ruleInvalid }
+          { validator: s, tip: Q.empty },
+          { validator: h, tip: Q.exist },
+          { validator: b, tip: Q.ruleInvalid }
         ];
-        for (let p = 0; p < i.length; p++) {
-          const o = i[p];
-          if (o.validator(a)) {
-            n.tipError = !0, n.tip = o.tip;
+        for (let u = 0; u < i.length; u++) {
+          const n = i[u];
+          if (n.validator(l)) {
+            o.tipError = !0, o.tip = n.tip;
             return;
           }
         }
-        n.tipError = !1, n.tip = j.default;
+        o.tipError = !1, o.tip = "";
       },
       editorContentChange: e
     };
   }
-}, eo = { class: "content-right" }, no = { class: "new-action-tip" }, oo = { class: "content-right-title" }, to = { class: "content-right-monaco" }, io = {
+}, Wn = { class: "content-right" }, Qn = { class: "new-action-tip" }, eo = { class: "content-right-title" }, no = { class: "set-params-tip" }, oo = { class: "content-right-monaco" }, to = {
   key: 1,
   class: "mark"
-}, so = {
+}, io = {
   key: 0,
   class: "params-tip"
 };
-function ao(m, n, l, e, s, h) {
-  const b = E("tiny-input"), v = E("icon-help-query"), a = E("tiny-popover"), i = E("tiny-switch"), p = E("monaco-editor");
-  return f(), D("div", eo, [
+function so(p, o, a, e, s, h) {
+  const b = E("tiny-input"), g = E("tiny-checkbox"), l = E("monaco-editor");
+  return _(), N("div", Wn, [
     t("div", {
-      class: R(["content-right-top", { "tip-error": e.context.tipError }])
+      class: z(["content-right-top", { "tip-error": e.context.tipError }])
     }, [
-      n[2] || (n[2] = t("div", { class: "content-right-title" }, "方法名称", -1)),
-      c(b, {
+      o[2] || (o[2] = t("div", { class: "content-right-title" }, "方法名称", -1)),
+      m(b, {
         modelValue: e.context.bindMethodInfo.name,
         "onUpdate:modelValue": [
-          n[0] || (n[0] = (o) => e.context.bindMethodInfo.name = o),
+          o[0] || (o[0] = (i) => e.context.bindMethodInfo.name = i),
           e.change
         ],
         disabled: e.context.bindMethodInfo.type !== e.NEW_METHOD_TYPE,
-        class: R([{ "status-error": e.context.tipError }]),
+        class: z([{ "status-error": e.context.tipError }]),
         placeholder: "请从左侧选择一个方法进行绑定，或者选择添加新方法，输入自定义方法名称。"
       }, null, 8, ["modelValue", "disabled", "class", "onUpdate:modelValue"]),
-      t("div", no, B(e.context.tip), 1)
+      t("div", Qn, B(e.context.tip), 1)
     ], 2),
     t("div", {
-      class: R(["content-right-bottom", { "tip-error": !e.context.isValidParams }])
+      class: z(["content-right-bottom", { "tip-error": !e.context.isValidParams }])
     }, [
-      t("div", oo, [
-        n[7] || (n[7] = t("span", { class: "set-params-tip" }, "扩展参数设置", -1)),
-        c(a, {
-          placement: "top-start",
-          width: "350",
-          trigger: "hover"
-        }, {
-          reference: _(() => [
-            c(v)
-          ]),
-          default: _(() => [
-            t("p", null, [
-              n[3] || (n[3] = A(" 扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后")),
-              n[4] || (n[4] = t("br", null, null, -1)),
-              A(" 如: " + B(e.context.bindMethodInfo.name) + "(eventArgs, extParam1, extParam2, ...) ", 1)
-            ])
-          ]),
-          _: 1
-        }),
-        c(i, {
+      t("div", eo, [
+        m(g, {
           modelValue: e.context.enableExtraParams,
-          "onUpdate:modelValue": n[1] || (n[1] = (o) => e.context.enableExtraParams = o),
-          class: "set-switch",
-          "show-text": !0
+          "onUpdate:modelValue": o[1] || (o[1] = (i) => e.context.enableExtraParams = i),
+          name: "tiny-checkbox"
         }, {
-          open: _(() => n[5] || (n[5] = [
-            t("span", null, "开启", -1)
-          ])),
-          close: _(() => n[6] || (n[6] = [
-            t("span", null, "关闭", -1)
+          default: y(() => o[3] || (o[3] = [
+            S("扩展参数设置")
           ])),
           _: 1
-        }, 8, ["modelValue"])
+        }, 8, ["modelValue"]),
+        t("div", no, [
+          o[4] || (o[4] = t("div", null, "扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后", -1)),
+          S(" 如: " + B(e.context.bindMethodInfo.name) + "(eventArgs, extParam1, extParam2, ...) ", 1)
+        ])
       ]),
-      t("div", to, [
-        l.dialogVisible ? (f(), w(p, {
+      t("div", oo, [
+        a.dialogVisible ? (_(), w(l, {
           key: 0,
           value: e.context.editorContent,
           options: e.editorOptions,
           onChange: e.editorContentChange,
           class: "monaco-editor"
-        }, null, 8, ["value", "options", "onChange"])) : H("", !0),
-        e.context.enableExtraParams ? H("", !0) : (f(), D("div", io))
+        }, null, 8, ["value", "options", "onChange"])) : X("", !0),
+        e.context.enableExtraParams ? X("", !0) : (_(), N("div", to))
       ]),
-      !e.context.isValidParams && e.context.enableExtraParams ? (f(), D("div", so, ' 请输入数组格式的参数，参数可以为表达式。例如：["extParam1", "item.status", 1, "getNames()"] ')) : H("", !0)
+      !e.context.isValidParams && e.context.enableExtraParams ? (_(), N("div", io, ' 请输入数组格式的参数，参数可以为表达式。例如：["extParam1", "item.status", 1, "getNames()"] ')) : X("", !0)
     ], 2)
   ]);
 }
-const lo = /* @__PURE__ */ J(Wn, [["render", ao], ["__scopeId", "data-v-771b2387"]]);
-const ro = {
+const ao = /* @__PURE__ */ R(Gn, [["render", so], ["__scopeId", "data-v-6d82db74"]]), lo = {
   components: {
-    TinySearch: Fe,
+    TinySearch: je,
     IconYes: Ze()
   },
   props: {
@@ -1052,77 +1012,77 @@ const ro = {
       default: () => ({})
     }
   },
-  setup(m) {
-    const { getMethodNameList: n } = G(W.Page), l = F(""), e = F([]), s = xe("context"), h = (v, a) => {
-      const i = v.map((r) => {
-        var u;
-        return Number.parseInt((u = r.match(/\d+$/)) == null ? void 0 : u[0]) || 0;
-      }).sort((r, u) => r - u).pop();
-      let o = `${(a == null ? void 0 : a.replace(an, "_")) || ""}New`;
-      return i > -1 && (o += `${i + 1}`), o;
-    }, b = (v) => {
-      s.bindMethodInfo = v;
+  setup(p) {
+    const { getMethodNameList: o } = Z(G.Page), a = j(""), e = j([]), s = xe("context"), h = (g, l) => {
+      const i = g.map((r) => {
+        var f;
+        return Number.parseInt((f = r.match(/\d+$/)) == null ? void 0 : f[0]) || 0;
+      }).sort((r, f) => r - f).pop();
+      let n = `${(l == null ? void 0 : l.replace(qn, "_")) || ""}New`;
+      return i > -1 && (n += `${i + 1}`), n;
+    }, b = (g) => {
+      s.bindMethodInfo = g;
     };
-    return Ee(() => {
-      var r, u;
-      const v = (r = m.eventBinding) == null ? void 0 : r.eventName, a = (n == null ? void 0 : n().filter((k) => k.includes(v))) || [], p = {
+    return ye(() => {
+      var r, f;
+      const g = (r = p.eventBinding) == null ? void 0 : r.eventName, l = (o == null ? void 0 : o().filter((c) => c.includes(g))) || [], u = {
         title: "添加新方法",
-        name: h(a, v),
-        type: Ne
+        name: h(l, g),
+        type: De
       };
-      (u = m.eventBinding) != null && u.ref ? b({ name: m.eventBinding.ref }) : b(p);
-      const o = (n == null ? void 0 : n().filter((k) => k.includes(l.value)).map((k) => ({ name: k }))) || [];
-      e.value = [p, ...o];
+      (f = p.eventBinding) != null && f.ref ? b({ name: p.eventBinding.ref }) : b(u);
+      const n = (o == null ? void 0 : o().filter((c) => c.includes(a.value)).map((c) => ({ name: c }))) || [];
+      e.value = [u, ...n];
     }), {
       context: s,
-      searchValue: l,
+      searchValue: a,
       filteredMethodList: e,
       selectMethod: b
     };
   }
-}, co = { class: "dialog-content-left" }, po = { class: "left-list-wrap" }, mo = { class: "left-action-list" }, uo = { class: "action-list-wrap" }, vo = ["onClick"];
-function go(m, n, l, e, s, h) {
-  const b = E("tiny-search"), v = E("icon-yes");
-  return f(), D("div", co, [
-    n[1] || (n[1] = t("div", { class: "left-title" }, "响应方法", -1)),
-    t("div", po, [
+}, ro = { class: "dialog-content-left" }, co = { class: "left-list-wrap" }, mo = { class: "left-action-list" }, po = { class: "action-list-wrap" }, uo = ["onClick"];
+function fo(p, o, a, e, s, h) {
+  const b = E("tiny-search"), g = E("icon-yes");
+  return _(), N("div", ro, [
+    o[1] || (o[1] = t("div", { class: "left-title" }, "响应方法", -1)),
+    t("div", co, [
       t("div", mo, [
-        c(b, {
+        m(b, {
           modelValue: e.searchValue,
-          "onUpdate:modelValue": n[0] || (n[0] = (a) => e.searchValue = a),
+          "onUpdate:modelValue": o[0] || (o[0] = (l) => e.searchValue = l),
           placeholder: "搜索"
         }, null, 8, ["modelValue"]),
-        t("ul", uo, [
-          (f(!0), D(q, null, te(e.filteredMethodList, (a) => (f(), D("li", {
-            key: a.name,
-            onClick: (i) => e.selectMethod(a)
+        t("ul", po, [
+          (_(!0), N($, null, ee(e.filteredMethodList, (l) => (_(), N("li", {
+            key: l.name,
+            onClick: (i) => e.selectMethod(l)
           }, [
             t("div", {
-              class: R(["action-name", { active: a.name === e.context.bindMethodInfo.name }])
+              class: z(["action-name", { active: l.name === e.context.bindMethodInfo.name }])
             }, [
-              A(B(a.title || a.name) + " ", 1),
-              a.name === e.context.bindMethodInfo.name ? (f(), w(v, {
+              S(B(l.title || l.name) + " ", 1),
+              l.name === e.context.bindMethodInfo.name ? (_(), w(g, {
                 key: 0,
                 class: "action-selected-icon"
-              })) : H("", !0)
+              })) : X("", !0)
             ], 2)
-          ], 8, vo))), 128))
+          ], 8, uo))), 128))
         ])
       ])
     ])
   ]);
 }
-const _o = /* @__PURE__ */ J(ro, [["render", go], ["__scopeId", "data-v-b9da83b9"]]), Io = {
-  ...Ae,
-  entry: Gn,
+const go = /* @__PURE__ */ R(lo, [["render", fo], ["__scopeId", "data-v-e68cb765"]]), Do = {
+  ...oe,
+  entry: Yn,
   options: {
-    commonEvents: vn
+    commonEvents: mn
   },
   components: {
-    BindEventsDialogSidebar: _o,
-    BindEventsDialogContent: lo
+    BindEventsDialogSidebar: go,
+    BindEventsDialogContent: ao
   }
 };
 export {
-  Io as default
+  Do as default
 };