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

package/dist/index.js

@@ -1,39 +1,39 @@
 import "./style.css";
-import { ref as K, reactive as te, watchEffect as Ce, resolveComponent as v, withDirectives as ce, openBlock as h, createBlock as U, withCtx as _, createElementVNode as o, createVNode as p, createTextVNode as M, createElementBlock as S, Fragment as G, renderList as de, normalizeClass as J, toDisplayString as L, createCommentVNode as H, vShow as re, nextTick as Be, pushScopeId as me, popScopeId as _e, unref as O, computed as W, withModifiers as Oe, watch as Ee } from "vue";
-import { Input as pe, Button as ee, Search as Le, Popover as De, DialogBox as Ae, Switch as Te, Form as Ue, FormItem as ke, Tooltip as ze, Collapse as je, CollapseItem as xe } from "@opentiny/vue";
-import { useLayout as Pe, useCanvas as ue, useHistory as $e, useBlock as Fe, useResource as Je, useModal as Re, useProperties as I } from "@opentiny/tiny-engine-controller";
-import { VueMonaco as Xe, BlockLinkEvent as qe, SvgButton as He, MetaSwitch as Ke, MetaBindVariable as Ye, MetaInput as Qe, MetaCodeEditor as Ze } from "@opentiny/tiny-engine-common";
-import { iconYes as Ge, iconHelpQuery as we, iconChevronDown as We } from "@opentiny/vue-icon";
-import { theme as et, string2Obj as tt } from "@opentiny/tiny-engine-controller/adapter";
-import { string2Ast as Ve, ast2String as ot } from "@opentiny/tiny-engine-common/js/ast";
-import { PROP_DATA_TYPE as q } from "@opentiny/tiny-engine-controller/utils";
-import { updateRect as nt } from "@opentiny/tiny-engine-canvas";
-import { constants as it } from "@opentiny/tiny-engine-utils";
-const oe = (l, i) => {
-  const b = l.__vccOpts || l;
-  for (const [e, c] of i)
-    b[e] = c;
-  return b;
-}, ve = K(!1), st = () => {
-  ve.value = !0;
-}, Ie = () => {
-  ve.value = !1;
-}, Ne = "newMethod", at = /[^0-9a-zA-Z_$]/, lt = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/, F = {
+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 { 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: "方法名称不能为空"
-}, ct = {
+}, Ae = {
+  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 = {
   components: {
-    MonacoEditor: Xe,
-    TinyInput: pe,
-    TinyButton: ee,
-    TinySearch: Le,
-    TinyPopover: De,
-    TinyDialogBox: Ae,
-    IconYes: Ge(),
-    IconHelpQuery: we(),
-    TinySwitch: Te
+    TinyButton: Y,
+    TinyDialogBox: ke
   },
   inheritAttrs: !1,
   props: {
@@ -42,155 +42,98 @@ const oe = (l, i) => {
       default: () => ({})
     }
   },
-  setup(l) {
-    const { PLUGIN_NAME: i, getPluginApi: b, activePlugin: e } = Pe(), { pageState: c } = ue(), { getMethodNameList: u, getMethods: w, saveMethod: y, highlightMethod: E } = b(i.PageController), x = K(null), n = te({
-      searchValue: "",
+  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({
       editorContent: "",
       bindMethodInfo: {},
-      filterMethodList: [],
-      tip: F.default,
+      tip: j.default,
       tipError: !1,
       enableExtraParams: !1,
       isValidParams: !0
-    }), t = {
-      roundedSelection: !0,
-      automaticLayout: !0,
-      autoIndent: !0,
-      language: "json",
-      formatOnPaste: !0,
-      tabSize: 2,
-      theme: et(),
-      lineNumbers: !1,
-      minimap: {
-        enabled: !1
-      }
-    }, a = (s, r) => {
-      const m = s.map((V) => {
-        var g;
-        return Number.parseInt((g = V.match(/\d+$/)) == null ? void 0 : g[0]) || 0;
-      }).sort((V, g) => V - g).pop();
-      let P = `${(r == null ? void 0 : r.replace(at, "_")) || ""}New`;
-      return m > -1 && (P += `${m + 1}`), P;
-    };
-    Ce(() => {
-      var V, g;
-      const s = (V = l.eventBinding) == null ? void 0 : V.eventName, r = (u == null ? void 0 : u().filter((T) => T.indexOf(s) > -1)) || [], k = {
-        title: "添加新方法",
-        name: a(r, s),
-        type: Ne
-      };
-      (g = l.eventBinding) != null && g.ref ? n.bindMethodInfo = {
-        name: l.eventBinding.ref
-      } : n.bindMethodInfo = k;
-      const P = (u == null ? void 0 : u().filter((T) => T.indexOf(n.searchValue) > -1).map((T) => ({ name: T }))) || [];
-      n.filterMethodList = [k, ...P];
     });
-    const C = (s) => {
-      n.bindMethodInfo = s;
-    }, N = (s) => {
-      var V, g;
-      if (!s)
+    Oe("context", i);
+    const p = (d) => {
+      i.bindMethodInfo = d;
+    }, o = (d) => {
+      var O, N;
+      if (!d)
         return;
-      const r = (V = l.eventBinding) == null ? void 0 : V.eventName;
-      if (!r)
+      const g = (O = m.eventBinding) == null ? void 0 : O.eventName;
+      if (!g)
         return;
-      const m = (g = c == null ? void 0 : c.currentSchema) == null ? void 0 : g.props;
-      if (!m)
+      const C = (N = h == null ? void 0 : h.currentSchema) == null ? void 0 : N.props;
+      if (!C)
         return;
-      const { name: k, extra: P } = s;
-      l[r] || (m[r] = {
+      const { name: M, extra: S } = d;
+      m[g] || (C[g] = {
         type: "JSExpression",
         value: ""
-      }), P && n.enableExtraParams && (m[r].params = P), m[r].value = `this.${k}`, $e().addHistory();
-    }, d = () => {
-      n.tipError = !1, n.tip = F.default;
-    }, D = (s) => !s, X = (s) => u == null ? void 0 : u().includes(s), ne = (s) => !lt.test(s), f = (s) => {
-      const r = [
-        { validator: D, tip: F.empty },
-        { validator: X, tip: F.exist },
-        { validator: ne, tip: F.ruleInvalid }
-      ];
-      for (let m = 0; m < r.length; m++) {
-        const k = r[m];
-        if (k.validator(s)) {
-          n.tipError = !0, n.tip = k.tip;
-          return;
-        }
-      }
-      n.tipError = !1, n.tip = F.default;
-    }, A = () => {
-      var r;
-      let s = "";
-      if (n.enableExtraParams)
+      }), S && i.enableExtraParams && (C[g].params = S), C[g].value = `this.${M}`, Je().addHistory();
+    }, r = () => {
+      i.tipError = !1, i.tip = j.default, i.isValidParams = !0;
+    }, u = () => {
+      let d = "";
+      if (i.enableExtraParams)
         try {
-          const m = (r = x.value) == null ? void 0 : r.getEditor().getValue();
-          s = JSON.parse(m), n.isValidParams = Array.isArray(s);
+          d = JSON.parse(i.editorContent), i.isValidParams = Array.isArray(d);
         } catch {
-          n.isValidParams = !1;
+          i.isValidParams = !1;
         }
-      return s;
-    }, B = (s) => Array.from({ length: s.length }, (r, m) => `args${m}`).join(","), ie = () => {
-      var m, k, P, V;
-      let s = (k = (m = w()) == null ? void 0 : m[n.bindMethodInfo.name]) == null ? void 0 : k.value, r = "{}";
-      if (s) {
-        let g = {};
+      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 = "{}";
+      if (d) {
+        let N = {};
         try {
-          g = Ve(s);
+          N = be(d);
         } catch {
-          s = s.replace("function", `function ${n.bindMethodInfo.name}`), g = Ve(s);
+          d = d.replace("function", `function ${i.bindMethodInfo.name}`), N = be(d);
         }
-        (V = (P = g == null ? void 0 : g.program) == null ? void 0 : P.body[0]) != null && V.body && (r = ot(g.program.body[0].body));
+        (O = (S = N == null ? void 0 : N.program) == null ? void 0 : S.body[0]) != null && O.body && (g = Ge(N.program.body[0].body));
       }
-      return r || `{
+      return g || `{
 }`;
-    }, Z = () => {
-      e(i.PageController).then(() => {
-        Be(() => {
-          var s;
-          E && E((s = n.bindMethodInfo) == null ? void 0 : s.name);
+    }, I = () => {
+      s(e.Page).then(() => {
+        Le(() => {
+          var d;
+          a && a((d = i.bindMethodInfo) == null ? void 0 : d.name);
         });
       });
     };
     return {
-      NEW_METHOD_TYPE: Ne,
-      state: n,
-      editor: x,
-      editorOptions: t,
-      dialogVisible: ve,
-      change: f,
+      BindEventsDialogSidebar: n,
+      BindEventsDialogContent: l,
+      state: i,
+      dialogVisible: se,
       confirm: () => {
-        if (n.tipError)
+        if (i.tipError)
           return;
-        let s = "event", r = A(), m = s;
-        if (!n.isValidParams)
+        let d = "event", g = u(), C = d;
+        if (!i.isValidParams)
           return;
-        r && (s = r.join(","), m = B(r)), N({ ...n.bindMethodInfo, params: s, extra: r });
-        const k = ie();
-        y == null || y({
-          name: n.bindMethodInfo.name,
-          content: n.enableExtraParams ? `function (eventArgs,${m}) ${k}` : `function (${m})  ${k}`
-        }), Z(), Ie();
+        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();
       },
       closeDialog: () => {
-        d(), Ie();
+        r(), ye();
       },
       openedDialog: () => {
-        var s, r, m;
-        n.enableExtraParams = !!((r = (s = l.eventBinding) == null ? void 0 : s.params) != null && r.length), n.editorContent = JSON.stringify(((m = l.eventBinding) == null ? void 0 : m.params) || [], null, 2), d();
+        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();
       },
-      selectMethod: C
+      selectMethod: p
     };
   }
-}, R = (l) => (me("data-v-6a54279c"), l = l(), _e(), l), dt = { class: "bind-event-dialog-content" }, rt = { class: "dialog-content-left" }, pt = /* @__PURE__ */ R(() => /* @__PURE__ */ o("div", { class: "left-title" }, "响应方法", -1)), mt = { class: "left-list-wrap" }, _t = { class: "left-action-list" }, ut = { class: "action-list-wrap" }, vt = ["onClick"], ft = { class: "content-right" }, ht = /* @__PURE__ */ R(() => /* @__PURE__ */ o("div", { class: "content-right-title" }, "方法名称", -1)), gt = { class: "new-action-tip" }, bt = { class: "content-right-title" }, yt = /* @__PURE__ */ R(() => /* @__PURE__ */ o("span", { class: "set-params-tip" }, "扩展参数设置", -1)), Et = /* @__PURE__ */ R(() => /* @__PURE__ */ o("br", null, null, -1)), kt = /* @__PURE__ */ R(() => /* @__PURE__ */ o("span", null, "开启", -1)), xt = /* @__PURE__ */ R(() => /* @__PURE__ */ o("span", null, "关闭", -1)), Vt = { class: "content-right-monaco" }, It = {
-  key: 1,
-  class: "mark"
-}, Nt = {
-  key: 0,
-  class: "params-tip"
-}, Ct = { class: "bind-dialog-footer" };
-function Dt(l, i, b, e, c, u) {
-  const w = v("tiny-search"), y = v("icon-yes"), E = v("tiny-input"), x = v("icon-help-query"), n = v("tiny-popover"), t = v("tiny-switch"), a = v("monaco-editor"), C = v("tiny-button"), N = v("tiny-dialog-box");
-  return ce((h(), U(N, {
+}, 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, {
     title: "事件绑定",
     width: "50%",
     "append-to-body": !0,
@@ -198,129 +141,36 @@ function Dt(l, i, b, e, c, u) {
     onOpened: e.openedDialog
   }, {
     footer: _(() => [
-      o("div", Ct, [
-        p(C, {
+      t("div", pn, [
+        c(b, {
           type: "info",
           onClick: e.confirm
         }, {
-          default: _(() => [
-            M("确 定")
-          ]),
+          default: _(() => n[0] || (n[0] = [
+            A("确 定")
+          ])),
           _: 1
         }, 8, ["onClick"]),
-        p(C, { onClick: e.closeDialog }, {
-          default: _(() => [
-            M("取 消")
-          ]),
+        c(b, { onClick: e.closeDialog }, {
+          default: _(() => n[1] || (n[1] = [
+            A("取 消")
+          ])),
           _: 1
         }, 8, ["onClick"])
       ])
     ]),
     default: _(() => [
-      o("div", dt, [
-        o("div", rt, [
-          pt,
-          o("div", mt, [
-            o("div", _t, [
-              p(w, {
-                modelValue: e.state.searchValue,
-                "onUpdate:modelValue": i[0] || (i[0] = (d) => e.state.searchValue = d),
-                placeholder: "搜索"
-              }, null, 8, ["modelValue"]),
-              o("ul", ut, [
-                (h(!0), S(G, null, de(e.state.filterMethodList, (d) => (h(), S("li", {
-                  key: d.name,
-                  onClick: (D) => e.selectMethod(d)
-                }, [
-                  o("div", {
-                    class: J(["action-name", { active: d.name === e.state.bindMethodInfo.name }])
-                  }, [
-                    M(L(d.title || d.name) + " ", 1),
-                    d.name === e.state.bindMethodInfo.name ? (h(), U(y, {
-                      key: 0,
-                      class: "action-selected-icon"
-                    })) : H("", !0)
-                  ], 2)
-                ], 8, vt))), 128))
-              ])
-            ])
-          ])
-        ]),
-        o("div", ft, [
-          o("div", {
-            class: J(["content-right-top", { "tip-error": e.state.tipError }])
-          }, [
-            ht,
-            p(E, {
-              modelValue: e.state.bindMethodInfo.name,
-              "onUpdate:modelValue": [
-                i[1] || (i[1] = (d) => e.state.bindMethodInfo.name = d),
-                e.change
-              ],
-              disabled: e.state.bindMethodInfo.type !== e.NEW_METHOD_TYPE,
-              class: J([{ "status-error": e.state.tipError }]),
-              placeholder: "请从左侧选择一个方法进行绑定，或者选择添加新方法，输入自定义方法名称。"
-            }, null, 8, ["modelValue", "disabled", "class", "onUpdate:modelValue"]),
-            o("div", gt, L(e.state.tip), 1)
-          ], 2),
-          o("div", {
-            class: J(["content-right-bottom", { "tip-error": !e.state.isValidParams }])
-          }, [
-            o("div", bt, [
-              yt,
-              p(n, {
-                placement: "top-start",
-                width: "350",
-                trigger: "hover"
-              }, {
-                reference: _(() => [
-                  p(x)
-                ]),
-                default: _(() => [
-                  o("p", null, [
-                    M(" 扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后"),
-                    Et,
-                    M(" 如: " + L(e.state.bindMethodInfo.name) + "(eventArgs, extParam1, extParam2, ...) ", 1)
-                  ])
-                ]),
-                _: 1
-              }),
-              p(t, {
-                modelValue: e.state.enableExtraParams,
-                "onUpdate:modelValue": i[2] || (i[2] = (d) => e.state.enableExtraParams = d),
-                class: "set-switch",
-                "show-text": !0
-              }, {
-                open: _(() => [
-                  kt
-                ]),
-                close: _(() => [
-                  xt
-                ]),
-                _: 1
-              }, 8, ["modelValue"])
-            ]),
-            o("div", Vt, [
-              e.dialogVisible ? (h(), U(a, {
-                key: 0,
-                ref: "editor",
-                value: e.state.editorContent,
-                options: e.editorOptions,
-                class: "monaco-editor"
-              }, null, 8, ["value", "options"])) : H("", !0),
-              e.state.enableExtraParams ? H("", !0) : (h(), S("div", It))
-            ]),
-            !e.state.isValidParams && e.state.enableExtraParams ? (h(), S("div", Nt, ' 请输入数组格式的参数，参数可以为表达式。例如：["extParam1", "item.status", 1, "getNames()"] ')) : H("", !0)
-          ], 2)
-        ])
+      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"]))
       ])
     ]),
     _: 1
   }, 8, ["onClose", "onOpened"])), [
-    [re, e.dialogVisible]
+    [oe, e.dialogVisible]
   ]);
 }
-const At = /* @__PURE__ */ oe(ct, [["render", Dt], ["__scopeId", "data-v-6a54279c"]]), Pt = {
+const un = /* @__PURE__ */ J(rn, [["render", mn], ["__scopeId", "data-v-4b0930ec"]]), vn = {
   onClick: {
     label: {
       zh_CN: "鼠标单击时触发"
@@ -377,7 +227,7 @@ const At = /* @__PURE__ */ oe(ct, [["render", Dt], ["__scopeId", "data-v-6a54279
     },
     defaultValue: ""
   }
-}, wt = [
+}, gn = [
   "onabort",
   "onafterprint",
   "onanimationend",
@@ -487,11 +337,11 @@ const At = /* @__PURE__ */ oe(ct, [["render", Dt], ["__scopeId", "data-v-6a54279
   "onwebkitanimationstart",
   "onwebkittransitionend",
   "onwheel"
-], Mt = (l) => !!wt.map((b) => {
-  let e = b[2].toUpperCase();
-  return `${b.substring(0, 2)}${e}${b.substring(3)}`;
-}).includes(l);
-const St = { class: "footer" }, Bt = {
+], _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 = {
   __name: "AddEventsDialog",
   props: {
     visible: {
@@ -504,11 +354,11 @@ const St = { class: "footer" }, Bt = {
     }
   },
   emits: ["closeDialog", "addEvent"],
-  setup(l, { emit: i }) {
-    const b = l, e = i, c = te({
+  setup(m, { emit: n }) {
+    const l = m, e = n, s = Z({
       eventDescription: "",
       eventName: ""
-    }), u = K(null), y = {
+    }), h = F(null), v = {
       eventDescription: [
         {
           required: !0,
@@ -518,62 +368,62 @@ const St = { class: "footer" }, Bt = {
       eventName: [
         { required: !0, message: "必填" },
         {
-          validator: (n, t, a) => {
-            if (b.componentEvents[c.eventName]) {
-              a(new Error("事件名已存在"));
+          validator: (p, o, r) => {
+            if (l.componentEvents[s.eventName]) {
+              r(new Error("事件名已存在"));
               return;
             }
-            if (!Mt(c.eventName)) {
-              a(new Error("请输入正确的浏览器事件名"));
+            if (!_n(s.eventName)) {
+              r(new Error("请输入正确的浏览器事件名"));
               return;
             }
-            a();
+            r();
           }
         }
       ]
-    }, E = () => {
+    }, a = () => {
       e("closeDialog");
-    }, x = () => {
-      u.value && u.value.validate((n) => {
-        if (!n)
+    }, i = () => {
+      h.value && h.value.validate((p) => {
+        if (!p)
           return;
-        const { eventName: t, eventDescription: a } = c;
-        e("addEvent", { eventName: t, eventDescription: a });
+        const { eventName: o, eventDescription: r } = s;
+        e("addEvent", { eventName: o, eventDescription: r });
       });
     };
-    return (n, t) => (h(), U(O(Ae), {
-      visible: l.visible,
+    return (p, o) => (f(), w(P(ke), {
+      visible: m.visible,
       title: "添加自定义事件",
       width: "400px",
       "append-to-body": !0,
       "close-on-click-modal": !1,
-      onClose: E
+      onClose: a
     }, {
       footer: _(() => [
-        o("div", St, [
-          p(O(ee), { onClick: E }, {
-            default: _(() => [
-              M(" 取消")
-            ]),
+        t("div", fn, [
+          c(P(Y), { onClick: a }, {
+            default: _(() => o[2] || (o[2] = [
+              A(" 取消")
+            ])),
             _: 1
           }),
-          p(O(ee), {
+          c(P(Y), {
             type: "primary",
-            onClick: x
+            onClick: i
           }, {
-            default: _(() => [
-              M(" 确定")
-            ]),
+            default: _(() => o[3] || (o[3] = [
+              A(" 确定")
+            ])),
             _: 1
           })
         ])
       ]),
       default: _(() => [
-        p(O(Ue), {
+        c(P(Ue), {
           ref_key: "ruleForm",
-          ref: u,
-          model: c,
-          rules: y,
+          ref: h,
+          model: s,
+          rules: v,
           "label-width": "100px",
           "inline-message": !0,
           "validate-type": "text",
@@ -581,29 +431,29 @@ const St = { class: "footer" }, Bt = {
           class: "add-custom-event-form"
         }, {
           default: _(() => [
-            p(O(ke), {
+            c(P(fe), {
               label: "事件函数名",
               prop: "eventName",
               required: ""
             }, {
               default: _(() => [
-                p(O(pe), {
-                  modelValue: c.eventName,
-                  "onUpdate:modelValue": t[0] || (t[0] = (a) => c.eventName = a),
+                c(P(ie), {
+                  modelValue: s.eventName,
+                  "onUpdate:modelValue": o[0] || (o[0] = (r) => s.eventName = r),
                   placeholder: "小驼峰格式，如：onDrag"
                 }, null, 8, ["modelValue"])
               ]),
               _: 1
             }),
-            p(O(ke), {
+            c(P(fe), {
               label: "事件描述",
               prop: "eventDescription",
               required: ""
             }, {
               default: _(() => [
-                p(O(pe), {
-                  modelValue: c.eventDescription,
-                  "onUpdate:modelValue": t[1] || (t[1] = (a) => c.eventDescription = a)
+                c(P(ie), {
+                  modelValue: s.eventDescription,
+                  "onUpdate:modelValue": o[1] || (o[1] = (r) => s.eventDescription = r)
                 }, null, 8, ["modelValue"])
               ]),
               _: 1
@@ -615,90 +465,90 @@ const St = { class: "footer" }, Bt = {
       _: 1
     }, 8, ["visible"]));
   }
-}, Ot = /* @__PURE__ */ oe(Bt, [["__scopeId", "data-v-932b189c"]]);
-const Lt = {
+}, bn = /* @__PURE__ */ J(hn, [["__scopeId", "data-v-932b189c"]]);
+const yn = {
   components: {
     BlockLinkEvent: qe,
-    BindEventsDialog: At,
-    TinyPopover: De,
-    TinyButton: ee,
-    IconHelpQuery: we(),
-    IconChevronDown: We(),
-    SvgButton: He,
-    AddEventsDialog: Ot
+    BindEventsDialog: un,
+    TinyPopover: Ce,
+    TinyButton: Y,
+    IconHelpQuery: Ie(),
+    IconChevronDown: Qe(),
+    SvgButton: Ke,
+    AddEventsDialog: bn
   },
   inheritAttrs: !1,
   setup() {
-    const { PLUGIN_NAME: l, activePlugin: i, getPluginApi: b } = Pe(), { pageState: e } = ue(), { getBlockEvents: c, getCurrentBlock: u, removeEventLink: w } = Fe(), { getMaterial: y } = Je(), { confirm: E } = Re(), { highlightMethod: x } = b(l.PageController), n = te({
+    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({
       eventName: "",
       // 事件名称
       eventBinding: null,
       // 事件绑定的处理方法对象
       componentEvent: {},
-      componentEvents: Pt,
+      componentEvents: i,
       bindActions: {},
       showBindEventDialog: !1
-    }), t = W(() => !!e.isBlock), a = W(() => Object.keys(n.bindActions).length === 0);
-    Ce(() => {
-      var Z, se, ae, le, s;
-      const f = (Z = e == null ? void 0 : e.currentSchema) == null ? void 0 : Z.componentName, A = y(f);
-      n.componentEvent = ((ae = (se = A == null ? void 0 : A.content) == null ? void 0 : se.schema) == null ? void 0 : ae.events) || ((le = A == null ? void 0 : A.schema) == null ? void 0 : le.events) || {}, Object.assign(n.componentEvents, n.componentEvent);
-      const B = ((s = e == null ? void 0 : e.currentSchema) == null ? void 0 : s.props) || {}, ie = Object.keys(B);
-      n.bindActions = {}, Object.entries(n.componentEvents).forEach(([r, m]) => {
-        var k, P, V;
-        if (ie.indexOf(r) > -1) {
-          const g = B[r], { value: T, params: fe } = g, Me = !fe && ((P = (k = T.match(/\((.+)\)$/)) == null ? void 0 : k[1]) == null ? void 0 : P.split(",")) || fe, z = {
-            eventName: r,
+    }), 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,
             ref: "",
-            event: B[r],
-            params: Me
+            event: g[z],
+            params: we
           };
-          if (z.event.type === "JSExpression" && (z.ref = z.event.value.replace("this.", "").replace(/\(.*\)$/, "")), e.isBlock) {
-            z.metaEvent = m;
-            const he = c(u()), ge = (V = e == null ? void 0 : e.currentSchema) == null ? void 0 : V.id;
-            ge && he && Object.entries(he).forEach(([Se, j]) => {
-              var be, ye;
-              ge === ((be = j == null ? void 0 : j.linked) == null ? void 0 : be.id) && r === ((ye = j == null ? void 0 : j.linked) == null ? void 0 : ye.event) && (z.linked = j.linked, z.linkedEventName = Se);
+          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);
             });
           }
-          n.bindActions[r] = z;
+          p.bindActions[z] = L;
         }
       });
     });
-    const C = (f, A) => {
-      A && n.bindActions[f.eventName] || (n.eventBinding = f, st());
-    }, N = (f) => {
-      var B;
-      Object.keys(((B = e == null ? void 0 : e.currentSchema) == null ? void 0 : B.props) || {}).indexOf(f.eventName) > -1 && delete e.currentSchema.props[f.eventName];
+    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];
     };
     return {
-      state: n,
-      isBlock: t,
-      isEmpty: a,
-      delEvent: (f) => {
-        E({
+      state: p,
+      isBlock: o,
+      isEmpty: r,
+      delEvent: (x) => {
+        v({
           title: "提示",
-          message: `您确定要删除事件 ${f.eventName} 吗?`,
+          message: `您确定要删除事件 ${x.eventName} 吗?`,
           exec() {
-            e.isBlock && w({ linked: f.linked }), N(f);
+            l.isBlock && h({ linked: x.linked }), k(x);
           }
         });
       },
-      openCodePanel: (f) => {
-        f && i(l.PageController).then(() => {
-          x && x(f.ref);
+      openCodePanel: (x) => {
+        x && n(m.Page).then(() => {
+          a && a(x.ref);
         });
       },
-      openActionDialog: C,
-      handleAddEvent: (f) => {
-        const { eventName: A, eventDescription: B } = f;
-        Object.assign(n.componentEvents, {
-          [A]: {
+      openActionDialog: u,
+      handleAddEvent: (x) => {
+        const { eventName: d, eventDescription: g } = x;
+        Object.assign(p.componentEvents, {
+          [d]: {
             label: {
-              zh_CN: B
+              zh_CN: g
             },
             description: {
-              zh_CN: `${B}的回调函数`
+              zh_CN: `${g}的回调函数`
             },
             type: "event",
             functionInfo: {
@@ -707,45 +557,41 @@ const Lt = {
             },
             defaultValue: ""
           }
-        }), n.showBindEventDialog = !1;
+        }), p.showBindEventDialog = !1;
       },
-      handleToggleAddEventDialog: (f) => {
-        n.showBindEventDialog = f;
+      handleToggleAddEventDialog: (x) => {
+        p.showBindEventDialog = x;
       }
     };
   }
-}, Y = (l) => (me("data-v-e09a30b7"), l = l(), _e(), l), Tt = { class: "bind-action-list" }, Ut = { class: "popover-head" }, zt = { class: "head-left" }, jt = /* @__PURE__ */ Y(() => /* @__PURE__ */ o("span", { class: "custom-event-button-text" }, "添加自定义事件", -1)), $t = /* @__PURE__ */ Y(() => /* @__PURE__ */ o("div", { class: "add-custom-event-tip" }, [
-  /* @__PURE__ */ M(" 支持添加原生 DOM 事件，添加后点击 "),
-  /* @__PURE__ */ o("span", { class: "event-tip-highlight" }, " 绑定事件 "),
-  /* @__PURE__ */ M(" 为画布中所选元素增加事件 ")
-], -1)), Ft = /* @__PURE__ */ Y(() => /* @__PURE__ */ o("span", null, "绑定事件", -1)), Jt = { class: "bind-event-list" }, Rt = ["onClick"], Xt = { class: "bind-actions" }, qt = { class: "action-item bind-action-item" }, Ht = ["onClick"], Kt = { class: "event-bind" }, Yt = { class: "action-buttons" }, Qt = { class: "empty-action" }, Zt = { class: "icon" }, Gt = /* @__PURE__ */ Y(() => /* @__PURE__ */ o("div", { class: "center" }, "元素事件绑定", -1)), Wt = /* @__PURE__ */ Y(() => /* @__PURE__ */ o("span", { class: "text" }, [
-  /* @__PURE__ */ M(" 点击 "),
-  /* @__PURE__ */ o("span", { class: "empty-bind-event-tip" }, "绑定事件"),
-  /* @__PURE__ */ M("为画布中所选元素增加事件")
-], -1));
-function eo(l, i, b, e, c, u) {
-  const w = v("icon-help-query"), y = v("tiny-popover"), E = v("tiny-button"), x = v("icon-chevron-down"), n = v("block-link-event"), t = v("svg-button"), a = v("svg-icon"), C = v("bind-events-dialog"), N = v("add-events-dialog");
-  return h(), S(G, null, [
-    o("div", Tt, [
-      o("div", Ut, [
-        o("span", zt, [
-          p(E, {
+}, 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: i[0] || (i[0] = Oe((d) => e.handleToggleAddEventDialog(!0), ["stop"]))
+            onClick: n[0] || (n[0] = Te((y) => e.handleToggleAddEventDialog(!0), ["stop"]))
           }, {
             default: _(() => [
-              jt,
-              p(y, {
+              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: _(() => [
-                  p(w, { class: "icon-help" })
+                  c(b, { class: "icon-help" })
                 ]),
                 default: _(() => [
-                  $t
+                  n[2] || (n[2] = t("div", { class: "add-custom-event-tip" }, [
+                    A(" 支持添加原生 DOM 事件，添加后点击 "),
+                    t("span", { class: "event-tip-highlight" }, " 绑定事件 "),
+                    A(" 为画布中所选元素增加事件 ")
+                  ], -1))
                 ]),
                 _: 1
               })
@@ -753,278 +599,284 @@ function eo(l, i, b, e, c, u) {
             _: 1
           })
         ]),
-        p(y, {
+        c(v, {
           popperClass: "option-popper setting-advanced-bind-event-list",
           placement: "bottom-end",
           trigger: "hover"
         }, {
           reference: _(() => [
-            p(E, { class: "bind-event-btn" }, {
+            c(a, { class: "bind-event-btn" }, {
               default: _(() => [
-                Ft,
-                p(x, { class: "icon-chevron-down" })
+                n[4] || (n[4] = t("span", null, "绑定事件", -1)),
+                c(i, { class: "icon-chevron-down" })
               ]),
               _: 1
             })
           ]),
           default: _(() => [
-            o("ul", Jt, [
-              (h(!0), S(G, null, de(e.state.componentEvents, (d, D) => {
-                var X;
-                return h(), S("li", {
-                  key: D,
-                  class: J(["bind-event-list-item", { "bind-event-list-item-notallow": e.state.bindActions[D] }]),
-                  onClick: (ne) => e.openActionDialog({ eventName: D }, !0)
+            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)
                 }, [
-                  o("div", null, L(D) + "  " + L(((X = d == null ? void 0 : d.label) == null ? void 0 : X.zh_CN) || D), 1)
-                ], 10, Rt);
+                  t("div", null, B(I) + "  " + B((($ = y == null ? void 0 : y.label) == null ? void 0 : $.zh_CN) || I), 1)
+                ], 10, Vn);
               }), 128))
             ])
           ]),
           _: 1
         })
       ]),
-      ce(o("ul", Xt, [
-        (h(!0), S(G, null, de(e.state.bindActions, (d) => (h(), S("li", {
-          key: d.eventName
+      ne(t("ul", Dn, [
+        (f(!0), D(q, null, te(e.state.bindActions, (y) => (f(), D("li", {
+          key: y.eventName
         }, [
-          o("div", qt, [
-            o("div", {
+          t("div", In, [
+            t("div", {
               class: "binding-name",
-              onClick: (D) => e.openActionDialog(d)
+              onClick: (I) => e.openActionDialog(y)
             }, [
-              o("div", null, [
-                M(L(d.eventName), 1),
-                o("span", null, L(e.state.componentEvents[d.eventName].label.zh_CN), 1)
+              t("div", null, [
+                A(B(y.eventName), 1),
+                t("span", null, B(e.state.componentEvents[y.eventName].label.zh_CN), 1)
               ]),
-              o("div", {
-                class: J({ linked: d.linked })
-              }, L(d.linkedEventName), 3),
-              o("span", Kt, L(d.ref), 1)
-            ], 8, Ht),
-            o("div", Yt, [
-              e.isBlock ? (h(), U(n, {
+              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, {
                 key: 0,
-                data: d
+                data: y
               }, null, 8, ["data"])) : H("", !0),
-              p(t, {
+              c(o, {
                 name: "plugin-icon-page-schema",
                 tips: "定位到代码",
                 placement: "top",
-                onClick: (D) => e.openCodePanel(d)
+                onClick: (I) => e.openCodePanel(y)
               }, null, 8, ["onClick"]),
-              p(t, {
+              c(o, {
                 name: "setting",
                 tips: "设置",
                 placement: "top",
-                onClick: (D) => e.openActionDialog(d, !1)
+                onClick: (I) => e.openActionDialog(y, !1)
               }, null, 8, ["onClick"]),
-              p(t, {
+              c(o, {
                 name: "delete",
                 tips: "删除",
                 placement: "top",
-                onClick: (D) => e.delEvent(d)
+                onClick: (I) => e.delEvent(y)
               }, null, 8, ["onClick"])
             ])
           ])
         ]))), 128))
       ], 512), [
-        [re, !e.isEmpty]
+        [oe, !e.isEmpty]
       ]),
-      ce(o("div", Qt, [
-        o("div", Zt, [
-          p(a, {
+      ne(t("div", Bn, [
+        t("div", Mn, [
+          c(r, {
             name: "empty-action",
             class: "empty-action-icon"
           })
         ]),
-        Gt,
-        Wt
+        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))
       ], 512), [
-        [re, e.isEmpty]
+        [oe, e.isEmpty]
       ])
     ]),
-    p(C, {
+    c(u, {
       eventBinding: e.state.eventBinding
     }, null, 8, ["eventBinding"]),
-    p(N, {
+    c(k, {
       visible: e.state.showBindEventDialog,
       componentEvents: e.state.componentEvents,
-      onCloseDialog: i[1] || (i[1] = (d) => e.handleToggleAddEventDialog(!1)),
+      onCloseDialog: n[1] || (n[1] = (y) => e.handleToggleAddEventDialog(!1)),
       onAddEvent: e.handleAddEvent
     }, null, 8, ["visible", "componentEvents", "onAddEvent"])
   ], 64);
 }
-const to = /* @__PURE__ */ oe(Lt, [["render", eo], ["__scopeId", "data-v-e09a30b7"]]);
-const { DEFAULT_LOOP_NAME: $ } = it, oo = {
+const Sn = /* @__PURE__ */ J(yn, [["render", wn], ["__scopeId", "data-v-3b65f9b0"]]);
+const { DEFAULT_LOOP_NAME: U } = tn, { string2Obj: On } = sn, Ln = {
   components: {
-    MetaSwitch: Ke,
+    SwitchConfigurator: We,
     TinyTooltip: ze,
-    MetaBindVariable: Ye,
-    MetaInput: Qe,
-    MetaCodeEditor: Ze
+    VariableConfigurator: en,
+    InputConfigurator: nn,
+    CodeConfigurator: on
   },
   inheritAttrs: !1,
   setup() {
-    const { pageState: l } = ue(), i = K(!1), b = W(() => {
-      var t;
-      return ((t = i.value) == null ? void 0 : t.type) === q.JSEXPRESSION;
+    const { pageState: m } = Q(), n = F(!1), l = K(() => {
+      var o;
+      return ((o = n.value) == null ? void 0 : o.type) === X.JSEXPRESSION;
     }), e = () => {
-      var t, a;
-      return ((a = (t = I().getSchema()) == null ? void 0 : t.loopArgs) == null ? void 0 : a[1]) || $.INDEX;
-    }, c = te({
+      var o, r;
+      return ((r = (o = V().getSchema()) == null ? void 0 : o.loopArgs) == null ? void 0 : r[1]) || U.INDEX;
+    }, s = Z({
       loopData: {
-        type: q.JSEXPRESSION,
+        type: X.JSEXPRESSION,
         value: "[]"
       },
       loopItem: "item",
       loopIndex: "index",
-      isLoop: W(() => {
-        var t;
-        return ((t = c.loopData) == null ? void 0 : t.type) === q.JSEXPRESSION;
+      isLoop: K(() => {
+        var o;
+        return ((o = s.loopData) == null ? void 0 : o.type) === X.JSEXPRESSION;
       }),
       loopKey: "",
       shouldUpdate: !1
     });
-    Ee(
-      () => [l == null ? void 0 : l.currentSchema, c.shouldUpdate],
-      ([t]) => {
-        var a, C, N, d;
-        i.value = (t == null ? void 0 : t.condition) === void 0 ? !0 : t == null ? void 0 : t.condition, c.loopData = t == null ? void 0 : t.loop, c.loopItem = ((a = t == null ? void 0 : t.loopArgs) == null ? void 0 : a[0]) || "", c.loopIndex = ((C = t == null ? void 0 : t.loopArgs) == null ? void 0 : C[1]) || "", c.loopKey = ((d = (N = t == null ? void 0 : t.props) == null ? void 0 : N.key) == null ? void 0 : d.value) || "";
+    _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) || "";
       }
     );
-    const u = (t = "") => {
-      t = t.replace(/\s*/g, "");
-      const a = I().getSchema();
-      if (!a)
+    const h = (o = "") => {
+      o = o.replace(/\s*/g, "");
+      const r = V().getSchema();
+      if (!r)
         return;
-      const C = Number(t).toString() !== "NaN";
-      a.props = a.props || {};
-      const N = a.props;
-      t && !C && (N.key = {
-        type: q.JSEXPRESSION,
-        value: t
-      }), t || (c.isLoop ? N.key = {
-        type: q.JSEXPRESSION,
+      const u = Number(o).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,
         value: e()
-      } : delete N.key);
+      } : delete k.key);
     };
-    Ee([() => c.isLoop, () => c.loopIndex], () => {
-      !c.loopKey && c.isLoop && u(e()), c.isLoop || u("");
+    _e([() => s.isLoop, () => s.loopIndex], () => {
+      !s.loopKey && s.isLoop && h(e()), s.isLoop || h("");
     });
-    const w = () => {
-      var t;
-      c.loopData = (t = I().getSchema()) == null ? void 0 : t.loop;
-    }, y = (t) => {
-      I().getSchema() && (t === !1 || t != null && t.type ? I().getSchema().condition = t : delete I().getSchema().condition, nt(), i.value = t);
-    }, E = (t) => {
-      I().getSchema().loopArgs ? I().getSchema().loopArgs[1] = t || $.INDEX : I().getSchema().loopArgs = [$.ITEM, t];
+    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];
     };
     return {
-      condition: i,
-      setConfig: y,
-      isBind: b,
-      state: c,
-      setLoop: (t) => {
-        t ? (I().getSchema().loop = t != null && t.type ? t : tt(t), E($.INDEX)) : (u(), delete I().getSchema().loop, delete I().getSchema().loopArgs), c.shouldUpdate = !c.shouldUpdate;
+      condition: n,
+      setConfig: v,
+      isBind: l,
+      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;
       },
-      setLoopItem: (t) => {
-        I().getSchema().loopArgs ? I().getSchema().loopArgs[0] = t || $.ITEM : I().getSchema().loopArgs = [t, $.INDEX];
+      setLoopItem: (o) => {
+        V().getSchema().loopArgs ? V().getSchema().loopArgs[0] = o || U.ITEM : V().getSchema().loopArgs = [o, U.INDEX];
       },
-      DEFAULT_LOOP_NAME: $,
-      openEditor: w,
-      setLoopIndex: E,
-      setLoopKey: u,
+      DEFAULT_LOOP_NAME: U,
+      openEditor: b,
+      setLoopIndex: a,
+      setLoopKey: h,
       getIndexName: e
     };
   }
-}, Q = (l) => (me("data-v-ef405cbc"), l = l(), _e(), l), no = { class: "advanced-config-container" }, io = { class: "advnce-config" }, so = /* @__PURE__ */ Q(() => /* @__PURE__ */ o("label", { class: "text-ellipsis-multiple" }, "是否渲染", -1)), ao = { class: "advanced-config-form-item" }, lo = {
-  key: 1,
-  class: "binding-state"
-}, co = { class: "advnce-config" }, ro = /* @__PURE__ */ Q(() => /* @__PURE__ */ o("label", { class: "text-ellipsis-multiple" }, "循环数据", -1)), po = { class: "advanced-config-form-item" }, mo = {
-  key: 1,
-  class: "binding-state text-ellipsis-multiple"
-}, _o = { class: "advnce-config" }, uo = /* @__PURE__ */ Q(() => /* @__PURE__ */ o("label", { class: "text-ellipsis-multiple" }, "迭代变量名", -1)), vo = { class: "advanced-config-form-item" }, fo = { class: "advnce-config" }, ho = /* @__PURE__ */ Q(() => /* @__PURE__ */ o("label", { class: "text-ellipsis-multiple" }, "索引变量名", -1)), go = { class: "advanced-config-form-item" }, bo = { class: "advnce-config" }, yo = /* @__PURE__ */ Q(() => /* @__PURE__ */ o("label", { class: "text-ellipsis-multiple" }, "key", -1)), Eo = { class: "advanced-config-form-item" };
-function ko(l, i, b, e, c, u) {
-  var t;
-  const w = v("meta-switch"), y = v("meta-bind-variable"), E = v("meta-code-editor"), x = v("meta-input"), n = v("tiny-tooltip");
-  return h(), S("div", no, [
-    o("div", io, [
-      so,
-      o("div", ao, [
-        e.isBind ? (h(), S("div", lo, "已绑定：" + L(e.condition.value), 1)) : (h(), U(w, {
+}, 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", {
+          key: 1,
+          class: "binding-state text-ellipsis-multiple",
+          title: e.condition.value
+        }, " 已绑定：" + B(e.condition.value), 9, jn)) : (f(), w(b, {
           key: 0,
           modelValue: e.condition,
           "onUpdate:modelValue": e.setConfig
         }, null, 8, ["modelValue", "onUpdate:modelValue"])),
-        p(y, {
+        c(v, {
           modelValue: e.condition,
           "onUpdate:modelValue": [
-            i[0] || (i[0] = (a) => e.condition = a),
+            n[0] || (n[0] = (u) => e.condition = u),
             e.setConfig
           ],
           name: "advance"
         }, null, 8, ["modelValue", "onUpdate:modelValue"])
       ])
     ]),
-    o("div", co, [
-      ro,
-      o("div", po, [
-        e.state.isLoop ? (h(), S("div", mo, "已绑定：" + L((t = e.state.loopData) == null ? void 0 : t.value), 1)) : (h(), U(E, {
+    t("div", Rn, [
+      n[7] || (n[7] = t("label", { class: "text-ellipsis-multiple" }, "循环数据", -1)),
+      t("div", Fn, [
+        e.state.isLoop ? (f(), D("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, {
           key: 0,
           modelValue: e.state.loopData,
           "onUpdate:modelValue": [
-            i[1] || (i[1] = (a) => e.state.loopData = a),
+            n[1] || (n[1] = (u) => e.state.loopData = u),
             e.setLoop
           ],
           "data-type": "JSExpression",
           onOpen: e.openEditor
         }, null, 8, ["modelValue", "onUpdate:modelValue", "onOpen"])),
-        p(y, {
+        c(v, {
           modelValue: e.state.loopData,
           "onUpdate:modelValue": [
-            i[2] || (i[2] = (a) => e.state.loopData = a),
+            n[2] || (n[2] = (u) => e.state.loopData = u),
             e.setLoop
           ],
           name: "advance"
         }, null, 8, ["modelValue", "onUpdate:modelValue"])
       ])
     ]),
-    o("div", _o, [
-      uo,
-      o("div", vo, [
-        p(x, {
+    t("div", Xn, [
+      n[8] || (n[8] = t("label", { class: "text-ellipsis-multiple" }, "迭代变量名", -1)),
+      t("div", Hn, [
+        c(i, {
           modelValue: e.state.loopItem,
           "onUpdate:modelValue": [
-            i[3] || (i[3] = (a) => e.state.loopItem = a),
+            n[3] || (n[3] = (u) => e.state.loopItem = u),
             e.setLoopItem
           ],
           placeholder: `默认值为：${e.DEFAULT_LOOP_NAME.ITEM}`
         }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
       ])
     ]),
-    o("div", fo, [
-      ho,
-      o("div", go, [
-        p(x, {
+    t("div", $n, [
+      n[9] || (n[9] = t("label", { class: "text-ellipsis-multiple" }, "索引变量名", -1)),
+      t("div", qn, [
+        c(i, {
           modelValue: e.state.loopIndex,
           "onUpdate:modelValue": [
-            i[4] || (i[4] = (a) => e.state.loopIndex = a),
+            n[4] || (n[4] = (u) => e.state.loopIndex = u),
             e.setLoopIndex
           ],
           placeholder: `默认值为：${e.DEFAULT_LOOP_NAME.INDEX}`
         }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
       ])
     ]),
-    o("div", bo, [
-      yo,
-      o("div", Eo, [
-        p(n, { content: "建议填写循环项中的唯一值（如item.id），如果填写为数字将不保存" }, {
+    t("div", Kn, [
+      n[10] || (n[10] = t("label", { class: "text-ellipsis-multiple" }, "key", -1)),
+      t("div", Yn, [
+        c(p, { content: "建议填写循环项中的唯一值（如item.id），如果填写为数字将不保存" }, {
           default: _(() => [
-            p(x, {
+            c(i, {
               modelValue: e.state.loopKey,
               "onUpdate:modelValue": [
-                i[5] || (i[5] = (a) => e.state.loopKey = a),
+                n[5] || (n[5] = (u) => e.state.loopKey = u),
                 e.setLoopKey
               ],
               placeholder: `默认为索引名：${e.getIndexName()}`
@@ -1036,30 +888,30 @@ function ko(l, i, b, e, c, u) {
     ])
   ]);
 }
-const xo = /* @__PURE__ */ oe(oo, [["render", ko], ["__scopeId", "data-v-ef405cbc"]]), Vo = {
+const Zn = /* @__PURE__ */ J(Ln, [["render", Qn], ["__scopeId", "data-v-d8b5ad1a"]]), Gn = {
   __name: "Main",
-  setup(l) {
-    const i = K(["bindEvent", "advancedConfig"]);
-    return (b, e) => (h(), U(O(je), {
-      modelValue: i.value,
-      "onUpdate:modelValue": e[0] || (e[0] = (c) => i.value = c)
+  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)
     }, {
       default: _(() => [
-        p(O(xe), {
+        c(P(he), {
           title: "事件绑定",
           name: "bindEvent"
         }, {
           default: _(() => [
-            p(to)
+            c(Sn)
           ]),
           _: 1
         }),
-        p(O(xe), {
+        c(P(he), {
           title: "高级配置",
           name: "advancedConfig"
         }, {
           default: _(() => [
-            p(xo)
+            c(Zn)
           ]),
           _: 1
         })
@@ -1067,14 +919,210 @@ const xo = /* @__PURE__ */ oe(oo, [["render", ko], ["__scopeId", "data-v-ef405cb
       _: 1
     }, 8, ["modelValue"]));
   }
-}, Lo = {
-  id: "SettingEvents",
-  name: "event",
-  title: "高级",
-  icon: "",
-  align: "left",
-  component: Vo
+};
+const Wn = {
+  components: {
+    MonacoEditor: Ye,
+    TinyInput: ie,
+    TinyPopover: Ce,
+    IconHelpQuery: Ie(),
+    TinySwitch: Re
+  },
+  props: {
+    dialogVisible: Boolean
+  },
+  setup() {
+    const { getMethodNameList: m } = G(W.Page), n = xe("context"), l = {
+      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);
+    return {
+      NEW_METHOD_TYPE: Ne,
+      context: n,
+      editorOptions: l,
+      change: (a) => {
+        const i = [
+          { validator: s, tip: j.empty },
+          { validator: h, tip: j.exist },
+          { validator: b, tip: j.ruleInvalid }
+        ];
+        for (let p = 0; p < i.length; p++) {
+          const o = i[p];
+          if (o.validator(a)) {
+            n.tipError = !0, n.tip = o.tip;
+            return;
+          }
+        }
+        n.tipError = !1, n.tip = j.default;
+      },
+      editorContentChange: e
+    };
+  }
+}, eo = { class: "content-right" }, no = { class: "new-action-tip" }, oo = { class: "content-right-title" }, to = { class: "content-right-monaco" }, io = {
+  key: 1,
+  class: "mark"
+}, so = {
+  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, [
+    t("div", {
+      class: R(["content-right-top", { "tip-error": e.context.tipError }])
+    }, [
+      n[2] || (n[2] = t("div", { class: "content-right-title" }, "方法名称", -1)),
+      c(b, {
+        modelValue: e.context.bindMethodInfo.name,
+        "onUpdate:modelValue": [
+          n[0] || (n[0] = (o) => e.context.bindMethodInfo.name = o),
+          e.change
+        ],
+        disabled: e.context.bindMethodInfo.type !== e.NEW_METHOD_TYPE,
+        class: R([{ "status-error": e.context.tipError }]),
+        placeholder: "请从左侧选择一个方法进行绑定，或者选择添加新方法，输入自定义方法名称。"
+      }, null, 8, ["modelValue", "disabled", "class", "onUpdate:modelValue"]),
+      t("div", no, B(e.context.tip), 1)
+    ], 2),
+    t("div", {
+      class: R(["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, {
+          modelValue: e.context.enableExtraParams,
+          "onUpdate:modelValue": n[1] || (n[1] = (o) => e.context.enableExtraParams = o),
+          class: "set-switch",
+          "show-text": !0
+        }, {
+          open: _(() => n[5] || (n[5] = [
+            t("span", null, "开启", -1)
+          ])),
+          close: _(() => n[6] || (n[6] = [
+            t("span", null, "关闭", -1)
+          ])),
+          _: 1
+        }, 8, ["modelValue"])
+      ]),
+      t("div", to, [
+        l.dialogVisible ? (f(), w(p, {
+          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))
+      ]),
+      !e.context.isValidParams && e.context.enableExtraParams ? (f(), D("div", so, ' 请输入数组格式的参数，参数可以为表达式。例如：["extParam1", "item.status", 1, "getNames()"] ')) : H("", !0)
+    ], 2)
+  ]);
+}
+const lo = /* @__PURE__ */ J(Wn, [["render", ao], ["__scopeId", "data-v-771b2387"]]);
+const ro = {
+  components: {
+    TinySearch: Fe,
+    IconYes: Ze()
+  },
+  props: {
+    eventBinding: {
+      type: Object,
+      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;
+    };
+    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 = {
+        title: "添加新方法",
+        name: h(a, v),
+        type: Ne
+      };
+      (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];
+    }), {
+      context: s,
+      searchValue: l,
+      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, [
+      t("div", mo, [
+        c(b, {
+          modelValue: e.searchValue,
+          "onUpdate:modelValue": n[0] || (n[0] = (a) => e.searchValue = a),
+          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("div", {
+              class: R(["action-name", { active: a.name === e.context.bindMethodInfo.name }])
+            }, [
+              A(B(a.title || a.name) + " ", 1),
+              a.name === e.context.bindMethodInfo.name ? (f(), w(v, {
+                key: 0,
+                class: "action-selected-icon"
+              })) : H("", !0)
+            ], 2)
+          ], 8, vo))), 128))
+        ])
+      ])
+    ])
+  ]);
+}
+const _o = /* @__PURE__ */ J(ro, [["render", go], ["__scopeId", "data-v-b9da83b9"]]), Io = {
+  ...Ae,
+  entry: Gn,
+  options: {
+    commonEvents: vn
+  },
+  components: {
+    BindEventsDialogSidebar: _o,
+    BindEventsDialogContent: lo
+  }
 };
 export {
-  Lo as default
+  Io as default
 };