@farris/ui-vue 1.7.0-beta.3 → 1.7.0-beta.4

package/components/filter-bar/index.esm.js

@@ -1,26 +1,26 @@
-var Ue = Object.defineProperty;
-var Re = (i, t, e) => t in i ? Ue(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var x = (i, t, e) => Re(i, typeof t != "symbol" ? t + "" : t, e);
-import { ref as I, createVNode as b, computed as U, defineComponent as z, inject as Q, mergeProps as Ae, createTextVNode as q, Fragment as re, provide as oe, watch as se, onMounted as le, nextTick as ae } from "vue";
-import { resolveAppearance as $e, getSchemaByType as ee, createPropsResolver as je } from "../dynamic-resolver/index.esm.js";
-import { DgControl as h, canvasChanged as _, refreshCanvas as qe, useDesignerComponent as We } from "../designer-canvas/index.esm.js";
-import { useGuid as te, FormSchemaEntityField$Type as ie, FormSchemaEntityFieldType$Type as Ge } from "../common/index.esm.js";
-import { useConditionValue as De, useConditionUtils as Z, FConditionFields as ze } from "../condition/index.esm.js";
-import { useCondition as Qe, useSolutionUtils as de } from "../query-solution/index.esm.js";
-import { FNotifyService as _e } from "../notify/index.esm.js";
-import { FDrawer as Xe } from "../drawer/index.esm.js";
-import { cloneDeep as D, isPlainObject as ne } from "lodash-es";
-import { LocaleService as ce } from "../locale/index.esm.js";
-import { FDynamicFormGroup as Je, useTypeResolver as ue } from "../dynamic-form/index.esm.js";
-import { radioGroupProps as Ye } from "../radio-group/index.esm.js";
-import { useDataSource as Ze, FComboListContainer as He } from "../combo-list/index.esm.js";
-const fe = /* @__PURE__ */ new Map([
-  ["appearance", $e]
+var Re = Object.defineProperty;
+var Ae = (i, t, e) => t in i ? Re(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var x = (i, t, e) => Ae(i, typeof t != "symbol" ? t + "" : t, e);
+import { ref as I, createVNode as C, computed as U, defineComponent as D, inject as Q, onMounted as H, mergeProps as $e, createTextVNode as W, Fragment as le, Teleport as je, nextTick as Z, provide as se, watch as ae } from "vue";
+import { resolveAppearance as We, getSchemaByType as ie, createPropsResolver as qe } from "../dynamic-resolver/index.esm.js";
+import { DgControl as h, canvasChanged as _, refreshCanvas as Ge, useDesignerComponent as ze } from "../designer-canvas/index.esm.js";
+import { useGuid as ne, getCustomStyle as de, FormSchemaEntityField$Type as re, FormSchemaEntityFieldType$Type as De } from "../common/index.esm.js";
+import { useConditionValue as Qe, useConditionUtils as K, FConditionFields as _e } from "../condition/index.esm.js";
+import { useCondition as Xe, useSolutionUtils as ce } from "../query-solution/index.esm.js";
+import { FNotifyService as Je } from "../notify/index.esm.js";
+import { FDrawer as He } from "../drawer/index.esm.js";
+import { cloneDeep as z, isPlainObject as oe } from "lodash-es";
+import { LocaleService as ue } from "../locale/index.esm.js";
+import { FDynamicFormGroup as Ye, useTypeResolver as fe } from "../dynamic-form/index.esm.js";
+import { radioGroupProps as Ze } from "../radio-group/index.esm.js";
+import { useDataSource as Ke, FComboListContainer as et } from "../combo-list/index.esm.js";
+const pe = /* @__PURE__ */ new Map([
+  ["appearance", We]
 ]);
-function Ke(i, t) {
+function tt(i, t) {
   const e = t == null ? void 0 : t.formSchemaUtils, n = i.parentComponentInstance, r = "54bddc89-5f7e-4b91-9c45-80dd6606cfe9";
-  function s() {
-    const u = ee(h["content-container"].type), f = ee(h["filter-bar"].type);
+  function l() {
+    const u = ie(h["content-container"].type), f = ie(h["filter-bar"].type);
     if (!u || !f)
       return;
     const o = Math.random().toString(36).substr(2, 4);
@@ -37,7 +37,7 @@ function Ke(i, t) {
     const d = n.belongedComponentId, g = e.getViewModelIdByComponentId(d), a = e.getViewModelById(g);
     return a != null && a.states && (a.states.find((p) => p.code === "originalFilterConditionList") || a.states.push(
       {
-        id: te().guid(),
+        id: ne().guid(),
         category: "locale",
         code: "originalFilterConditionList",
         name: "筛选条过滤条件",
@@ -45,14 +45,14 @@ function Ke(i, t) {
       }
     )), { filterBar: f, filterBarContainer: u };
   }
-  function l() {
+  function s() {
     const u = e.getViewModelIdByComponentId(n.belongedComponentId), f = e.getViewModelById(u);
     let o;
     if (f && f.commands) {
       const d = f.commands.find((g) => g.handlerName === "Filter" && g.cmpId === r);
       if (!d)
         o = {
-          id: te().guid(),
+          id: ne().guid(),
           code: `${f.id.replace(/-/g, "").replace("component", "").replace("viewmodel", "")}Filter1`,
           name: "过滤并加载数据1",
           params: [
@@ -97,22 +97,22 @@ function Ke(i, t) {
     );
   }
   function c() {
-    const { filterBar: u, filterBarContainer: f } = s(), { filterInGridViewModel: o } = l();
+    const { filterBar: u, filterBarContainer: f } = l(), { filterInGridViewModel: o } = s();
     u && o && (u.onQuery = o.code), m(o);
     const d = t == null ? void 0 : t.useFormCommand;
     return d && d.checkCommands(), f;
   }
   return { createFilterBar: c };
 }
-function pe(i, t, e, n) {
+function me(i, t, e, n) {
   if (e.parentComponentInstance && n) {
-    const l = Ke(e, n).createFilterBar();
-    if (l)
-      return l;
+    const s = tt(e, n).createFilterBar();
+    if (s)
+      return s;
   }
   return t;
 }
-const et = "https://json-schema.org/draft/2020-12/schema", tt = "https://farris-design.gitee.io/filter-bar.schema.json", it = "filter-bar", nt = "A Farris Component", rt = "object", ot = {
+const it = "https://json-schema.org/draft/2020-12/schema", nt = "https://farris-design.gitee.io/filter-bar.schema.json", rt = "filter-bar", ot = "A Farris Component", lt = "object", st = {
   id: {
     description: "The unique identifier for filter-bar",
     type: "string"
@@ -156,21 +156,21 @@ const et = "https://json-schema.org/draft/2020-12/schema", tt = "https://farris-
     description: "",
     type: "string"
   }
-}, st = [
+}, at = [
   "id",
   "type"
-], lt = {
+], dt = {
   onQuery: "查询事件"
-}, me = {
-  $schema: et,
-  $id: tt,
-  title: it,
-  description: nt,
-  type: rt,
-  properties: ot,
-  required: st,
-  events: lt
-}, H = {
+}, ge = {
+  $schema: it,
+  $id: nt,
+  title: rt,
+  description: ot,
+  type: lt,
+  properties: st,
+  required: at,
+  events: dt
+}, ee = {
   /** 指定已设的筛选条件列表 */
   defaultValues: {
     type: Array,
@@ -185,90 +185,94 @@ const et = "https://json-schema.org/draft/2020-12/schema", tt = "https://farris-
   /** 是否禁用 */
   disabled: { type: Boolean, default: !1 },
   /** 清空值文字 */
-  resetText: { type: String, default: "清空筛选" }
-}, at = je(H, me, fe, pe);
-function dt(i, t, e, n) {
-  const r = I([]), s = I([]), l = I([]), m = I("");
+  resetText: { type: String, default: "清空筛选" },
+  customClass: { type: String, default: "" },
+  customStyle: { type: String, default: "" }
+}, ct = qe(ee, ge, pe, me);
+function ut(i, t, e, n) {
+  const r = I([]), l = I([]), s = I([]), m = I("");
   I(i.mode);
-  const c = /* @__PURE__ */ new Map(), { createConditionValue: u } = De(), { convertToControls: f } = Z("filter-bar"), o = Qe(i, t), { getFilterConditions: d } = o, { fieldToCondition: g, judgeLoadNewValue: a } = de(), p = new _e();
+  const c = /* @__PURE__ */ new Map(), { createConditionValue: u } = Qe(), { convertToControls: f } = K("filter-bar"), o = Xe(i, t), { getFilterConditions: d } = o, { fieldToCondition: g, judgeLoadNewValue: a } = ce(), p = new Je();
   let v = "[]";
-  function y(w) {
-    return !i.disabled && !w.value.isEmpty() && !!w.value.getDisplayText();
-  }
-  function C(w) {
-    s.value = f(w), s.value.reduce((T, B) => (T.set(B.labelCode, B), T), c);
-  }
-  function k(w) {
-    const T = Array.isArray(w) ? w : [];
-    l.value = s.value.map((B) => {
-      const L = T.find((P) => P.id === B.id);
-      if (L) {
-        const P = g(B, L.value);
+  function y(F) {
+    return !i.disabled && !F.value.isEmpty();
+  }
+  function w(F) {
+    l.value = f(F), l.value.reduce((E, B) => (E.set(B.labelCode, B), E), c);
+  }
+  function T(F) {
+    const E = Array.isArray(F) ? F : [];
+    s.value = l.value.map((B) => {
+      const R = E.find((P) => P.id === B.id);
+      if (R) {
+        const P = g(B, R.value);
         return a(P, B) && P.value.clear(), P;
       }
       return g(B);
     });
   }
-  function E(w) {
-    l.value = l.value.filter((T) => T.id !== w.id), r.value = r.value.filter((T) => T.fieldCode !== w.fieldCode), s.value = s.value.filter((T) => T.id !== w.id), t.emit("remove", w.fieldCode);
+  function V(F) {
+    s.value = s.value.filter((E) => E.id !== F.id), r.value = r.value.filter((E) => E.fieldCode !== F.fieldCode), l.value = l.value.filter((E) => E.id !== F.id), t.emit("remove", F.fieldCode);
   }
-  function S() {
-    var w;
-    i.disabled ? e.value = !1 : e.value = ((w = l.value) == null ? void 0 : w.findIndex((T) => {
+  function M() {
+    var F;
+    i.disabled ? e.value = !1 : e.value = ((F = s.value) == null ? void 0 : F.findIndex((E) => {
       var B;
-      return T.value && !((B = T.value) != null && B.isEmpty());
+      return E.value && !((B = E.value) != null && B.isEmpty());
     })) > -1;
   }
-  function M(w) {
-    const T = JSON.stringify(w || []);
-    T !== v && (t.emit("conditionChange", w), v = T, t.emit("query", w));
+  function k(F, E = []) {
+    const B = JSON.stringify(F || []);
+    B !== v && (t.emit("conditionChange", F), v = B, E.length === 0 && t.emit("query", F));
   }
-  function V() {
-    var B;
-    try {
-      S(), (l.value || []).map((L) => {
-        if (L.required && (!L.value || L.value.isEmpty()))
-          throw "请填写{fields}再进行筛选".replace("{fields}", L.fieldName || "");
-      });
-    } catch (L) {
-      p.warning({ message: L, position: "top-center" });
+  function N() {
+    var R;
+    M();
+    const F = [];
+    (s.value || []).map((P) => {
+      P.required && (!P.value || P.value.isEmpty()) && F.push(P.fieldName || "");
+    });
+    const E = (R = s.value) == null ? void 0 : R.filter((P) => {
+      var A;
+      return P.value && !((A = P.value) != null && A.isEmpty());
+    });
+    if (E.length && F.length > 0) {
+      p.warning({ message: "请填写{fields}再进行筛选".replace("{fields}", F.join(",")), position: "top-center" });
+      return;
     }
-    const w = (B = l.value) == null ? void 0 : B.filter((L) => {
-      var P;
-      return L.value && !((P = L.value) != null && P.isEmpty());
-    }), T = d(w, s.value);
-    M(T);
+    const B = d(E, l.value);
+    k(B, F);
   }
-  function O(w, T) {
-    C(w), k(T), V();
+  function L(F, E) {
+    w(F), T(E), N();
   }
-  function F(w) {
-    w.value.clear(), r.value = r.value.filter((T) => T.fieldCode !== w.fieldCode), t.emit("clear", w.fieldCode), V();
+  function b(F) {
+    F.value.clear(), r.value = r.value.filter((E) => E.fieldCode !== F.fieldCode), t.emit("clear", F.fieldCode), N();
   }
-  function N() {
-    l.value.forEach((w) => w.value.clear());
+  function S() {
+    s.value.forEach((F) => F.value.clear());
   }
-  function R() {
-    l.value.forEach((w) => {
-      w.value.clear();
-    }), t.emit("reset"), V(), n.resizeFilerBar();
+  function O() {
+    s.value.forEach((F) => {
+      F.value.clear();
+    }), t.emit("reset"), N(), n.resizeFilerBar();
   }
   return {
-    clearAll: N,
-    clearFilterItem: F,
+    clearAll: S,
+    clearFilterItem: b,
     currentFilterId: m,
-    filterFields: s,
-    filterItems: l,
+    filterFields: l,
+    filterItems: s,
     fieldMap: c,
-    loadFilterItems: O,
-    removeFilterItem: E,
-    reset: R,
+    loadFilterItems: L,
+    removeFilterItem: V,
+    reset: O,
     shouldShowClearButtonInFilterItem: y,
-    handleQuery: V
+    handleQuery: N
   };
 }
 function Y() {
-  const { getLocaleValue: i } = ce;
+  const { getLocaleValue: i } = ue;
   return {
     confirm: i("filterBar.confirm"),
     cancel: i("filterBar.cancel"),
@@ -278,36 +282,36 @@ function Y() {
     fold: i("filterBar.fold")
   };
 }
-function ct(i) {
-  return ce.getRealPropertyValue(i, "清空筛选", "filterBar.reset");
+function ft(i) {
+  return ue.getRealPropertyValue(i, "清空筛选", "filterBar.reset");
 }
-function ut(i, t, e, n, r) {
+function pt(i, t, e, n, r) {
   const {
-    filterFields: s,
-    handleQuery: l
-  } = r, m = I(D(n.value)), c = Y(), u = I(c.advancedFilter);
+    filterFields: l,
+    handleQuery: s
+  } = r, m = I(z(n.value)), c = Y(), u = I(c.advancedFilter);
   function f() {
-    e.value = !1, m.value = D(n.value);
+    e.value = !1, m.value = z(n.value);
   }
   function o() {
     e.value = !1, n.value.forEach((g) => {
       const a = m.value.find((p) => p.id === g.id);
       a != null && a.value && (g.value = a.value);
-    }), l();
+    }), s();
   }
   function d() {
-    return b("div", null, [b(ze, {
-      fields: s.value,
+    return C("div", null, [C(_e, {
+      fields: l.value,
       conditions: m.value
-    }, null), b("div", null, [b("button", {
+    }, null), C("div", null, [C("button", {
       class: "btn btn-secondary",
       onClick: f
-    }, [c.cancel]), b("button", {
+    }, [c.cancel]), C("button", {
       class: "btn btn-primary",
       onClick: o
     }, [c.confirm])])]);
   }
-  return () => b(Xe, {
+  return () => C(He, {
     modelValue: e.value,
     "onUpdate:modelValue": (g) => e.value = g,
     showClose: !1,
@@ -318,8 +322,8 @@ function ut(i, t, e, n, r) {
     content: d
   });
 }
-function ft(i, t, e, n) {
-  const r = I([]), s = Y(), l = I(s.advancedFilter), m = I(ct(i.resetText));
+function mt(i, t, e, n) {
+  const r = I([]), l = Y(), s = I(l.advancedFilter), m = I(ft(i.resetText));
   I(i.showReset);
   const c = I(!1), {
     clearAll: u,
@@ -337,36 +341,42 @@ function ft(i, t, e, n) {
   function p(y) {
     i.mode === "display-only" ? u() : f();
   }
-  const v = ut(i, t, c, r, e);
-  return () => b("div", {
+  const v = pt(i, t, c, r, e);
+  return () => C("div", {
     class: "f-filter-toolbars"
-  }, [g.value && b("button", {
+  }, [g.value && C("button", {
     class: "btn btn-link",
     onClick: (y) => a()
-  }, [l.value]), n.value && b("button", {
+  }, [s.value]), n.value && C("button", {
     class: "btn btn-link",
     onClick: (y) => p()
   }, [m.value]), v()]);
 }
-const pt = {
+const gt = {
   filterItem: { type: Object, default: null },
-  position: { type: Object, default: null }
-}, mt = Object.assign({}, Ye), gt = /* @__PURE__ */ z({
+  position: { type: Object, default: null },
+  /**
+   * 位置参照元素
+   */
+  reference: {
+    type: Object
+  }
+}, vt = Object.assign({}, Ze), ht = /* @__PURE__ */ D({
   name: "FFilterRadioGroup",
-  props: mt,
+  props: vt,
   emits: ["update:modelValue", "change"],
   setup(i, t) {
     const e = I(), {
       dataSource: n,
       displayText: r,
-      modelValue: s
-    } = Ze(i);
-    function l(m) {
+      modelValue: l
+    } = Ke(i);
+    function s(m) {
       r.value = m.map((u) => u[i.textField]).join(i.separator);
       let c = "";
-      m.length === 1 ? c = m[0][i.valueField] : c = m.map((u) => u[i.valueField]).join(i.separator), s.value !== c && (s.value = c, t.emit("update:modelValue", s.value), t.emit("change", s.value));
+      m.length === 1 ? c = m[0][i.valueField] : c = m.map((u) => u[i.valueField]).join(i.separator), l.value !== c && (l.value = c, t.emit("update:modelValue", l.value), t.emit("change", l.value));
     }
-    return () => b(He, {
+    return () => C(et, {
       style: "margin: -2px -15px;padding: 0;",
       ref: e,
       idField: i.valueField,
@@ -374,219 +384,241 @@ const pt = {
       textField: i.textField,
       titleField: i.titleField,
       dataSource: n.value,
-      selectedValues: s.value,
+      selectedValues: l.value,
       multiSelect: !1,
       enableSearch: !1,
       onSelectionChange: (m) => {
-        l(m);
+        s(m);
       }
     }, null);
   }
-}), vt = /* @__PURE__ */ z({
-  name: "FFilterBarItem",
-  props: pt,
+}), yt = /* @__PURE__ */ D({
+  name: "FFilterBarItemCondition",
+  props: gt,
   emits: ["cancel", "confirm", "clearFilter"],
   setup(i, t) {
-    const e = I(D(i.filterItem)), n = Y(), r = I(i.position), s = {
-      left: r.value.left,
-      top: r.value.top
-    }, {
-      useFilterItemsComposition: l,
-      resolveEditorProps: m
+    const e = I(z(i.filterItem)), n = Y(), r = I("0px"), l = I("0px"), s = I("0px"), m = I("auto"), c = U(() => ({
+      left: m.value === "auto" ? "26px" : "auto",
+      right: m.value
+    })), u = U(() => ({
+      left: r.value,
+      top: l.value,
+      width: s.value === "0px" ? null : s.value,
+      maxWidth: s.value === "0px" ? null : s.value
+    })), f = I(), {
+      useFilterItemsComposition: o,
+      resolveEditorProps: d
     } = Q("useFilterItemsComposition"), {
-      fieldMap: c
-    } = l, {
-      renderFieldConditionEditor: u,
-      conditionChangeHandler: f
-    } = Z(), o = I(!0), d = I(!0);
-    function g() {
-      o.value = e.value.value.isEmpty();
+      fieldMap: g
+    } = o, {
+      renderFieldConditionEditor: a,
+      conditionChangeHandler: p
+    } = K("filter-bar"), v = I(""), y = I(!0);
+    function w() {
+      var F, E;
+      if (!i.reference || !f.value)
+        return;
+      const b = (F = i.reference) == null ? void 0 : F.getBoundingClientRect();
+      let S = (E = f.value) == null ? void 0 : E.getBoundingClientRect().width;
+      const O = document.body.clientWidth - b.left - 30;
+      S > O && (S = O), b.left > document.body.clientWidth - S - 20 ? (r.value = b.left + b.width - S + "px", l.value = b.top + b.height + "px", m.value = "26px") : (r.value = b.left + "px", l.value = b.top + b.height + "px", m.value = "auto"), s.value = S + "px";
     }
-    function a(E, S, M, V) {
-      f(E, S, M, V);
+    function T(b, S, O, F) {
+      p(b, S, O, F);
     }
-    function p(E, S, M, V) {
-      a(E, S, M, V), t.emit("confirm", e.value);
+    function V(b, S, O, F) {
+      T(b, S, O, F), t.emit("confirm", e.value);
     }
-    function v() {
+    function M() {
       const {
-        id: E,
+        id: b,
         editor: S,
-        needEmitChange: M
-      } = u(c, e.value, a);
-      if (S.type === "radio-group") {
-        const V = m(S.type, S);
-        return d.value = !1, b(gt, Ae(V, {
+        needEmitChange: O
+      } = a(g, e.value, T);
+      if (v.value = "filter-panel--" + S.type, S.type === "radio-group") {
+        const F = d(S.type, S);
+        return y.value = !1, C(ht, $e(F, {
           modelValue: e.value.value.value,
-          "onUpdate:modelValue": (O) => e.value.value.value = O,
-          onChange: (O) => {
-            p(e.value, O, S);
+          "onUpdate:modelValue": (E) => e.value.value.value = E,
+          onChange: (E) => {
+            V(e.value, E, S);
           }
         }), {
-          default: () => [q(" ")]
+          default: () => [W(" ")]
         });
       }
-      return b(Je, {
+      return C(Ye, {
         showLabelType: "force-none",
-        id: E,
-        key: E,
+        id: b,
+        key: b,
         editor: S,
         modelValue: e.value.value.value,
-        "onUpdate:modelValue": (V) => e.value.value.value = V,
-        onChange: (V, O) => {
-          M && a(e.value, V, S, O);
+        "onUpdate:modelValue": (F) => e.value.value.value = F,
+        onChange: (F, E) => {
+          O && T(e.value, F, S, E);
         }
       }, null);
     }
-    function y(E) {
+    H(() => {
+      w();
+    });
+    function k(b) {
       t.emit("cancel");
     }
-    function C(E) {
-      E.stopPropagation(), t.emit("confirm", e.value);
+    function N(b) {
+      b.stopPropagation(), t.emit("confirm", e.value);
     }
-    function k(E) {
-      e.value.value.clear(), E.stopPropagation(), t.emit("confirm", e);
+    function L(b) {
+      e.value.value.clear(), b.stopPropagation(), t.emit("confirm", e.value);
     }
-    return g(), () => b("div", {
+    return () => C("div", {
       class: "f-filter-panel-wrapper can-close",
-      onClick: y
-    }, [b("div", {
-      class: "f-filter-panel",
-      style: s
-    }, [b("div", {
+      onClick: k
+    }, [C("div", {
+      class: "f-filter-panel " + v.value,
+      ref: f,
+      style: u.value
+    }, [C("div", {
       class: "f-filter-panel-inner",
-      onClick: (E) => E.stopPropagation()
-    }, [b("div", {
+      onClick: (b) => b.stopPropagation()
+    }, [C("div", {
       class: "f-filter-panel-arrow",
-      style: {
-        left: r.value.arrowLeft,
-        right: r.value.arrowRight
-      }
-    }, null), v(), d.value && b("div", {
+      style: c.value
+    }, null), M(), y.value && C("div", {
       class: "f-filter-panel-footer"
-    }, [b("div", {
+    }, [C("div", {
       class: "filter-panel-clear"
-    }, [b("button", {
+    }, [C("button", {
       class: "btn btn-link",
-      onClick: k
-    }, [n.clearAll])]), b("div", {
+      onClick: L,
+      style: "padding-left:0;"
+    }, [n.clearAll])]), C("div", {
       class: "filter-panel-btns"
-    }, [b("button", {
+    }, [C("button", {
       class: "btn btn-secondary can-close",
-      onClick: y
-    }, [n.cancel]), b("button", {
+      onClick: k
+    }, [n.cancel]), C("button", {
       class: "filter-panel-submit btn btn-primary",
-      onClick: C
+      onClick: N
     }, [n.confirm])])])])])]);
   }
-}), ge = {
+}), ve = {
   filterItem: { type: Object, default: null },
   disabled: { type: Boolean, default: !1 }
-}, ht = /* @__PURE__ */ z({
+}, bt = /* @__PURE__ */ D({
   name: "FFilterBarItem",
-  props: ge,
+  props: ve,
   emits: ["confirm"],
   setup(i, t) {
     const e = I(i.filterItem), {
       useFilterItemsComposition: n
     } = Q("useFilterItemsComposition"), {
       clearFilterItem: r,
-      currentFilterId: s,
-      removeFilterItem: l,
+      currentFilterId: l,
+      removeFilterItem: s,
       shouldShowClearButtonInFilterItem: m
-    } = n, c = I(), u = I(!1), f = function() {
+    } = n, c = I(!1), u = I(!1), f = I(), o = I(""), d = I(), g = function() {
       return {
         "f-filter-item": !0,
+        "f-state-disabled": i.disabled,
         "f-filter-item-actived": !e.value.value.isEmpty(),
         // 'f-filter-item-last': index === filterItems.value.length - 1,
-        "f-filter-item-edit": e.value.id === s.value
+        "f-filter-item-edit": e.value.id === l.value || c.value
       };
     };
     U(() => !i.disabled && i.mode === "editable");
-    function o(p) {
-      i.disabled || (i.mode === "display-only" ? l(e.value) : r(e.value));
+    function a(M) {
+      i.disabled || (i.mode === "display-only" ? s(e.value) : r(e.value));
     }
-    function d(p) {
-      var C;
-      if (i.disabled)
-        return;
-      const v = (C = p.currentTarget) == null ? void 0 : C.getBoundingClientRect(), y = 380;
-      v.left > document.body.clientWidth - y - 20 ? c.value = {
-        left: v.left + v.width - y + "px",
-        top: v.top + v.height + "px",
-        arrowLeft: "auto",
-        arrowRight: "26px"
-      } : c.value = {
-        left: v.left + "px",
-        top: v.top + v.height + "px",
-        arrowLeft: "26px",
-        arrowRight: "auto"
-      }, u.value = !0;
+    function p(M) {
+      i.disabled || (c.value = !0);
     }
-    function g() {
-      u.value = !1;
+    function v() {
+      c.value = !1;
+    }
+    function y() {
+      d.value && d.value.scrollWidth > d.value.clientWidth ? o.value = d.value.innerHTML : o.value = "";
+    }
+    function w(M) {
+      c.value = !1, e.value.value = M.value, t.emit("confirm", M), Z(() => {
+        y();
+      });
+    }
+    function T() {
+      u.value = i.disabled ? !1 : m(e.value);
     }
-    function a(p) {
-      u.value = !1, e.value.value = p.value, t.emit("confirm", p);
+    function V() {
+      u.value = !1;
     }
-    return () => b("div", {
+    return H(() => {
+      y();
+    }), () => C("div", {
       key: e.value.id,
       id: e.value.id,
-      class: f()
-    }, [b("div", {
+      class: g(),
+      onMouseenter: () => T(),
+      onMouseleave: () => V()
+    }, [C("div", {
       class: "f-filter-item-inner",
-      onClick: (p) => d(p)
-    }, [e.value.required && b("span", {
+      ref: f,
+      onClick: (M) => p()
+    }, [e.value.required && C("span", {
       class: "f-filter-item-required text-danger"
-    }, [q("*")]), b("span", {
+    }, [W("*")]), C("span", {
       class: "f-filter-item-text"
-    }, [e.value.fieldName]), e.value.value.getDisplayText() && b(re, null, [b("span", {
+    }, [e.value.fieldName]), !e.value.value.isEmpty() && C(le, null, [C("span", {
       class: "f-filter-item-tip"
-    }, [q(":")]), b("span", {
-      class: "f-filter-item-content"
-    }, [e.value.value.getDisplayText()])]), !i.disabled && b("span", {
+    }, [W(":")]), C("span", {
+      class: "f-filter-item-content",
+      ref: d,
+      title: o.value
+    }, [e.value.value.getDisplayText()])]), !i.disabled && C("span", {
       class: "f-filter-item-arrow f-icon f-icon-arrow-chevron-down"
-    }, null)]), m(e.value) && b("span", {
+    }, null)]), u.value && C("span", {
       class: "mr-3 f-filter-item-clear",
-      onClick: (p) => o()
-    }, [b("span", {
+      onClick: (M) => a()
+    }, [C("span", {
       class: "f-icon f-icon-close-circle"
-    }, null)]), u.value && b(vt, {
-      position: c.value,
-      filterItem: e.value,
-      onConfirm: a,
-      onCancel: g
-    }, null)]);
+    }, null)]), c.value && C(je, {
+      to: "body"
+    }, {
+      default: () => [C(yt, {
+        filterItem: e.value,
+        reference: f.value,
+        onConfirm: w,
+        onCancel: v
+      }, null)]
+    })]);
   }
 });
-function ve(i, t, e) {
+function he(i, t, e) {
   const n = I(null), r = 20;
-  let s = 0, l = -1;
+  let l = 0, s = -1;
   function m() {
     var g, a, p, v, y;
-    if (t.value && l < 0) {
-      const C = (g = i.value) == null ? void 0 : g.querySelector(".f-filter-list-wrapper");
-      l = C ? parseFloat(getComputedStyle(C).marginRight) : 0;
+    if (t.value && s < 0) {
+      const w = (g = i.value) == null ? void 0 : g.querySelector(".f-filter-list-wrapper");
+      s = w ? parseFloat(getComputedStyle(w).marginRight) : 0;
     }
     const o = ((p = (a = i.value) == null ? void 0 : a.querySelector(".f-filter-list-ellipsis")) == null ? void 0 : p.clientWidth) || 0, d = ((y = (v = i.value) == null ? void 0 : v.querySelector(".f-filter-toolbars")) == null ? void 0 : y.clientWidth) || 0;
-    return l + o + d;
+    return s + o + d;
   }
   function c(o = -1, d = -1) {
-    var C;
+    var w;
     let g = !1;
-    const a = (C = t.value) == null ? void 0 : C.children;
-    if (!t.value || !i.value || !a || a.length === 0 || (o < 0 && (o = i.value.clientWidth), s = d < 0 ? s : d, Math.abs(o - s) < r))
+    const a = (w = t.value) == null ? void 0 : w.children;
+    if (!t.value || !i.value || !a || a.length === 0 || (o < 0 && (o = i.value.clientWidth), l = d < 0 ? l : d, Math.abs(o - l) < r))
       return;
     const p = m();
     let v = 0, y = 0;
-    Array.from(a).forEach((k) => {
-      k.style.display = "flex";
+    Array.from(a).forEach((T) => {
+      T.style.display = "flex";
     });
-    for (let k = 0; k < a.length; k++) {
-      const E = a[k], S = E.offsetWidth;
-      !g && v + S <= o - p ? (v += S, y++) : (E.style.display = "none", g = !0);
+    for (let T = 0; T < a.length; T++) {
+      const V = a[T], M = V.offsetWidth;
+      !g && v + M <= o - p ? (v += M, y++) : (V.style.display = "none", g = !0);
     }
-    return e.value = g, s = o, y;
+    return e.value = g, l = o, y;
   }
   function u() {
     var d;
@@ -596,7 +628,7 @@ function ve(i, t, e) {
     const o = t.value.children;
     Array.from(o).forEach((g) => {
       g.style.display = "flex";
-    }), s = 0;
+    }), l = 0;
   }
   function f() {
     if (!t.value || !i.value)
@@ -613,107 +645,110 @@ function ve(i, t, e) {
     handleVisibleChildren: c
   };
 }
-const G = /* @__PURE__ */ z({
+const G = /* @__PURE__ */ D({
   name: "FFilterBar",
-  props: H,
+  props: ee,
   emits: ["clear", "remove", "reset", "conditionChange", "change", "query"],
   setup(i, t) {
-    const e = I(!0), n = I(!1), r = I(!1), s = I(null), l = I(null), m = I(!1), c = I(0), u = ve(l, s, r), {
+    const e = I(!0), n = I(!1), r = I(!1), l = I(null), s = I(null), m = I(!1), c = I(0), u = he(s, l, r), {
       cancelWidthObserver: f,
       setupWidthObserver: o,
       handleVisibleChildren: d
     } = u, g = {
       resizeFilerBar: () => {
-        n.value || ae(() => {
+        n.value || Z(() => {
           d(-1, 0);
         });
       }
-    }, a = dt(i, t, m, g), {
+    }, a = ut(i, t, m, g), {
       filterFields: p,
       filterItems: v,
       loadFilterItems: y,
-      handleQuery: C
+      handleQuery: w
     } = a, {
-      resolveEditorProps: k
-    } = ue();
-    oe("useFilterItemsComposition", {
+      resolveEditorProps: T
+    } = fe();
+    se("useFilterItemsComposition", {
       useFilterItemsComposition: a,
-      resolveEditorProps: k
+      resolveEditorProps: T
     });
-    const E = Y(), S = U(() => ({
-      display: p.value && p.value.length ? "" : "none"
-    }));
-    y(i.fields, i.defaultValues), se([() => i.defaultValues, () => i.fields], ([P, j]) => {
-      y(j, P), c.value++, g.resizeFilerBar();
-    }), le(() => {
+    const V = Y(), M = U(() => {
+      const P = {
+        display: p.value && p.value.length ? "" : "none"
+      };
+      return de(P, i == null ? void 0 : i.customStyle);
+    });
+    y(i.fields, i.defaultValues), ae([() => i.defaultValues, () => i.fields], ([P, A]) => {
+      y(A, P), c.value++, g.resizeFilerBar();
+    }), H(() => {
       o();
     });
-    const M = U(() => n.value && e.value), V = U(() => ({
+    const k = U(() => n.value && e.value), N = U(() => ({
       "f-filter-list": !0,
-      "f-filter-list-extend": M.value
+      "f-filter-list-extend": k.value
       // 'f-utils-overflow-hidden': true
-    })), O = U(() => ({
+    })), L = U(() => ({
       "extend-btn-arrow": !0,
       "f-icon": !0,
       "f-icon-arrow-chevron-up": n.value,
       "f-icon-arrow-chevron-down": !n.value
-    })), F = U(() => v.value.length > 0), N = U(() => !n.value && r.value);
-    function R() {
+    })), b = U(() => v.value.length > 0), S = U(() => !n.value && r.value);
+    function O() {
       n.value = !n.value, n.value ? f() : o();
     }
-    const w = ft(i, t, a, m);
-    function T(P) {
-      t.emit("change", P), C(), g.resizeFilerBar();
+    const F = mt(i, t, a, m);
+    function E(P) {
+      t.emit("change", P), w(), g.resizeFilerBar();
     }
     function B() {
-      return b("div", {
-        class: V.value,
-        ref: s
-      }, [v.value.map((P, j) => !P.isExtend && b(ht, {
+      return C("div", {
+        class: N.value,
+        ref: l
+      }, [v.value.map((P, A) => !P.isExtend && C(bt, {
         filterItem: P,
-        onConfirm: T,
+        onConfirm: E,
         disabled: i.disabled || P.disabled
-      }, null)), n.value && w()]);
+      }, null)), n.value && F()]);
     }
-    function L() {
-      return b("div", {
+    function R() {
+      return C("div", {
         class: "f-filter-list-ellipsis",
-        onClick: (P) => R()
-      }, [q("...")]);
+        onClick: (P) => O()
+      }, [W("...")]);
     }
-    return () => b("div", {
-      class: "f-filter-wrapper",
-      style: S.value
-    }, [b("div", {
+    return () => C("div", {
+      class: "f-filter-wrapper " + i.customClass,
+      style: M.value
+    }, [C("div", {
       class: "f-filter-wrapper-inner f-utils-fill"
-    }, [b("div", {
+    }, [C("div", {
       class: "f-filter-main f-utils-fill",
-      ref: l
-    }, [b("div", {
+      ref: s
+    }, [C("div", {
       class: "f-filter-list-wrapper",
       key: i.id + "-main-" + c.value
-    }, [F.value && B()]), N.value && L(), !n.value && w()]), r.value && b("div", {
+    }, [b.value && B()]), S.value && R(), !n.value && F()]), r.value && C("div", {
       class: "f-filter-extend-btn"
-    }, [b("button", {
+    }, [C("button", {
       class: "btn btn-link",
-      onClick: R
-    }, [b("span", {
+      onClick: O
+    }, [C("span", {
       class: "extend-btn-text"
-    }, [n.value ? E.fold : E.expand]), b("span", {
-      class: O.value
+    }, [n.value ? V.fold : V.expand]), C("span", {
+      class: L.value
     }, null)])])])]);
   }
 });
-function yt(i, t) {
+function Ct(i, t) {
   I([]);
   const e = I([]), n = I([]), r = I("");
   I(!1), I(i.mode);
-  const s = /* @__PURE__ */ new Map(), { convertToControls: l } = Z(), { fieldToCondition: m } = de();
+  const l = /* @__PURE__ */ new Map(), { convertToControls: s } = K("filter-bar"), { fieldToCondition: m } = ce();
   function c(d) {
-    return !d.value.isEmpty() && !!d.value.getDisplayText();
+    return !d.value.isEmpty();
   }
   function u(d) {
-    e.value = l(d), e.value.reduce((g, a) => (g.set(a.labelCode, a), g), s);
+    e.value = s(d), e.value.reduce((g, a) => (g.set(a.labelCode, a), g), l);
   }
   function f(d) {
     n.value = e.value.map((g) => m(g));
@@ -725,39 +760,39 @@ function yt(i, t) {
     currentFilterId: r,
     filterFields: e,
     filterItems: n,
-    fieldMap: s,
+    fieldMap: l,
     loadFilterItems: o,
     shouldShowClearButtonInFilterItem: c
   };
 }
-function bt(i, t, e) {
-  const n = I([]), r = I("更多筛选"), s = I(i.resetText), l = I(i.showReset), {
+function Ft(i, t, e) {
+  const n = I([]), r = I("更多筛选"), l = I(i.resetText), s = I(i.showReset), {
     filterItems: m
   } = e;
   function c() {
     n.value = m.value.filter((o) => o.isExtend);
   }
   c();
-  const u = U(() => n.value && n.value.length > 0), f = U(() => l.value);
-  return () => b("div", {
+  const u = U(() => n.value && n.value.length > 0), f = U(() => s.value);
+  return () => C("div", {
     class: "f-filter-toolbars"
-  }, [u.value && b("button", {
+  }, [u.value && C("button", {
     class: "btn btn-link"
-  }, [r.value]), f.value && b("button", {
+  }, [r.value]), f.value && C("button", {
     class: "btn btn-link"
-  }, [s.value])]);
+  }, [l.value])]);
 }
-const Ct = /* @__PURE__ */ z({
+const wt = /* @__PURE__ */ D({
   name: "FFilterBarItemDesign",
-  props: ge,
+  props: ve,
   emits: ["confirm"],
   setup(i, t) {
     const e = I(i.filterItem), {
       useFilterItemsComposition: n
     } = Q("useFilterItemsComposition"), {
       currentFilterId: r,
-      shouldShowClearButtonInFilterItem: s
-    } = n, l = I(i.disabled), m = function() {
+      shouldShowClearButtonInFilterItem: l
+    } = n, s = I(i.disabled), m = function() {
       return {
         "f-filter-item": !0,
         "f-filter-item-actived": !e.value.value.isEmpty(),
@@ -765,30 +800,30 @@ const Ct = /* @__PURE__ */ z({
         "f-filter-item-edit": e.value.id === r.value
       };
     };
-    return () => b("div", {
+    return () => C("div", {
       key: e.value.id,
       id: e.value.id,
       class: m()
-    }, [b("div", {
+    }, [C("div", {
       class: "f-filter-item-inner"
-    }, [e.value.required && b("span", {
+    }, [e.value.required && C("span", {
       class: "f-filter-item-required text-danger"
-    }, [q("*")]), b("span", {
+    }, [W("*")]), C("span", {
       class: "f-filter-item-text"
-    }, [e.value.fieldName]), e.value.value.getDisplayText() && b(re, null, [b("span", {
+    }, [e.value.fieldName]), e.value.value.getDisplayText() && C(le, null, [C("span", {
       class: "f-filter-item-tip"
-    }, [q(":")]), b("span", {
+    }, [W(":")]), C("span", {
       class: "f-filter-item-content"
-    }, [e.value.value.getDisplayText()])]), !l.value && b("span", {
+    }, [e.value.value.getDisplayText()])]), !s.value && C("span", {
       class: "f-filter-item-arrow f-icon f-icon-arrow-chevron-down"
-    }, null)]), s(e.value) && b("span", {
+    }, null)]), l(e.value) && C("span", {
       class: "mr-3 f-filter-item-clear"
-    }, [b("span", {
+    }, [C("span", {
       class: "f-icon f-icon-close-circle"
     }, null)])]);
   }
 });
-function Ft(i) {
+function It(i) {
   const { formSchemaUtils: t, formStateMachineUtils: e } = i;
   function n(c, u = "") {
     return {
@@ -800,22 +835,22 @@ function Ft(i) {
   function r(c, u = "") {
     return t.getViewModelById(c).states.map((o) => n(o, u));
   }
-  function s(c) {
+  function l(c) {
     const u = t.getRootViewModelId(), f = r(c);
     if (c === u)
       return f;
     const o = r(u, "root-component.");
     return [...f, ...o];
   }
-  function l(c) {
+  function s(c) {
     return c.binding && c.binding.path || c.id || "";
   }
   function m() {
     return e && e.getRenderStates() || [];
   }
-  return { getVariables: s, getControlName: l, getStateMachines: m };
+  return { getVariables: l, getControlName: s, getStateMachines: m };
 }
-class he {
+class ye {
   constructor(t) {
     x(this, "sessionVariables", [
       {
@@ -864,19 +899,19 @@ class he {
       required: "必填表达式"
     });
     x(this, "getExpressionConverter", (t, e) => ({
-      convertFrom: (n, r, s, l) => {
-        const m = s.getExpressionRuleValue(t, e || r);
+      convertFrom: (n, r, l, s) => {
+        const m = l.getExpressionRuleValue(t, e || r);
         return m && m.value || "";
       },
-      convertTo: (n, r, s, l, m) => {
+      convertTo: (n, r, l, s, m) => {
         var c;
-        if (r === "dataPicking" && (s != null && s.target)) {
-          const u = `${s.target}_dataPicking`;
-          ((c = s.rules) == null ? void 0 : c.some(
+        if (r === "dataPicking" && (l != null && l.target)) {
+          const u = `${l.target}_dataPicking`;
+          ((c = l.rules) == null ? void 0 : c.some(
             (o) => o.id === u && o.value
           )) ? n.dictPickingExpressionId = u : delete n.dictPickingExpressionId;
         }
-        l.updateExpression(s);
+        s.updateExpression(l);
       }
     }));
     this.formSchemaService = t;
@@ -885,11 +920,11 @@ class he {
     const n = this.formSchemaService.getExpressions();
     if (!n)
       return "";
-    const r = n.find((l) => l.target === t);
+    const r = n.find((s) => s.target === t);
     if (!r)
       return "";
-    const s = r.rules.find((l) => l.type === e);
-    return s || "";
+    const l = r.rules.find((s) => s.type === e);
+    return l || "";
   }
   // 获取上下文表单变量
   getContextFormVariables() {
@@ -900,12 +935,12 @@ class he {
     if (!n || !n.states || n.states.length === 0)
       return [];
     const r = [];
-    return n.states.filter((s) => s.category === "remote").forEach((s) => {
+    return n.states.filter((l) => l.category === "remote").forEach((l) => {
       r.push({
-        key: s.code,
-        name: s.name,
-        description: s.name,
-        category: s.category
+        key: l.code,
+        name: l.name,
+        description: l.name,
+        category: l.category
       });
     }), r;
   }
@@ -922,11 +957,11 @@ class he {
     const n = [];
     return t == null || t.forEach((r) => {
       var m;
-      const s = this.createTreeNode(r, e);
-      let l = [];
-      (m = r.type) != null && m.fields && (l = this.buildEntityFieldsTreeData(r.type.fields, [...e, r.label])), n.push({
-        data: s,
-        children: l,
+      const l = this.createTreeNode(r, e);
+      let s = [];
+      (m = r.type) != null && m.fields && (s = this.buildEntityFieldsTreeData(r.type.fields, [...e, r.label])), n.push({
+        data: l,
+        children: s,
         expanded: !0
       });
     }), n;
@@ -935,12 +970,12 @@ class he {
     const n = [];
     return t == null || t.forEach((r) => {
       var c, u;
-      const s = this.createTreeNode(r, e);
-      s.type = "entity";
-      const l = this.buildEntityFieldsTreeData((c = r.type) == null ? void 0 : c.fields, [...e, r.label]), m = this.buildChildEntityTreeData((u = r.type) == null ? void 0 : u.entities, [...e, r.label]);
-      m != null && m.length && (l == null || l.push(...m)), n.push({
-        data: s,
-        children: l || [],
+      const l = this.createTreeNode(r, e);
+      l.type = "entity";
+      const s = this.buildEntityFieldsTreeData((c = r.type) == null ? void 0 : c.fields, [...e, r.label]), m = this.buildChildEntityTreeData((u = r.type) == null ? void 0 : u.entities, [...e, r.label]);
+      m != null && m.length && (s == null || s.push(...m)), n.push({
+        data: l,
+        children: s || [],
         // 空值回退
         expanded: !0
       });
@@ -980,86 +1015,86 @@ class he {
     };
   }
   onBeforeOpenExpression(t, e, n) {
-    const r = n === "Field" ? t.binding.field : t.id, s = this.getExpressionRule(r, e), l = this.getEntitiesAndVariables(), m = {
-      message: ["validate", "required", "dataPicking"].includes(e) && s ? s.message : "",
-      ...l
+    const r = n === "Field" ? t.binding.field : t.id, l = this.getExpressionRule(r, e), s = this.getEntitiesAndVariables(), m = {
+      message: ["validate", "required", "dataPicking"].includes(e) && l ? l.message : "",
+      ...s
     };
-    return s.messageType != null && (m.messageType = s.messageType), m;
+    return l.messageType != null && (m.messageType = l.messageType), m;
   }
   buildRule(t, e, n, r) {
-    const { expression: s, message: l, messageType: m } = e, c = {
+    const { expression: l, message: s, messageType: m } = e, c = {
       id: `${t}_${n}`,
       type: n,
-      value: s
+      value: l
     };
-    return (n === "validate" || n === "dataPicking" || n === "required") && (c.message = l), n === "dataPicking" && (c.messageType = m), n === "validate" && r && (c.elementId = r), c;
+    return (n === "validate" || n === "dataPicking" || n === "required") && (c.message = s), n === "dataPicking" && (c.messageType = m), n === "validate" && r && (c.elementId = r), c;
   }
   getExpressionData() {
     const { expressions: t } = this.formSchemaService.getFormSchema().module;
     return t || [];
   }
   updateExpression(t, e, n, r) {
-    const s = e === "Field" ? t.binding.field : t.id, l = this.buildRule(s, n, r, t.type === "form-group" ? t.id : "");
-    let c = this.getExpressionData().find((f) => f.targetType === e && f.target === s);
+    const l = e === "Field" ? t.binding.field : t.id, s = this.buildRule(l, n, r, t.type === "form-group" ? t.id : "");
+    let c = this.getExpressionData().find((f) => f.targetType === e && f.target === l);
     const u = (f) => f.value.trim() === "";
     if (c) {
-      const f = c.rules.find((o) => o.id === l.id);
+      const f = c.rules.find((o) => o.id === s.id);
       if (f)
-        u(l) ? c.rules = c.rules.filter((o) => o.id !== l.id) : (Object.assign(f, l), r === "validate" && t.type === "form-group" && (f.elementId = t.id));
+        u(s) ? c.rules = c.rules.filter((o) => o.id !== s.id) : (Object.assign(f, s), r === "validate" && t.type === "form-group" && (f.elementId = t.id));
       else {
-        if (u(l))
+        if (u(s))
           return null;
-        c.rules = c.rules || [], c.rules.push(l);
+        c.rules = c.rules || [], c.rules.push(s);
       }
     } else {
-      if (u(l))
+      if (u(s))
         return null;
       c = {
-        target: `${s}`,
-        rules: [l],
+        target: `${l}`,
+        rules: [s],
         targetType: e
       };
     }
     return c;
   }
   getExpressionEditorOptions(t, e, n, r) {
-    return n.reduce((s, l) => {
+    return n.reduce((l, s) => {
       var c, u;
       const m = e === "Field" ? (c = t == null ? void 0 : t.binding) == null ? void 0 : c.field : t.id;
-      return s[l] = {
+      return l[s] = {
         hide: e === "Field" ? !!((u = t == null ? void 0 : t.binding) != null && u.field) : !1,
         description: "",
-        title: this.expressionNames[l],
+        title: this.expressionNames[s],
         type: "string",
         $converter: this.getExpressionConverter(m),
         refreshPanelAfterChanged: !0,
         editor: {
           type: "expression-editor",
           singleExpand: !1,
-          dialogTitle: `${this.expressionNames[l]}编辑器`,
-          showMessage: l === "validate" || l === "dataPicking" || l === "required",
-          showMessageType: l === "dataPicking",
-          beforeOpen: () => this.onBeforeOpenExpression(t, l, e),
+          dialogTitle: `${this.expressionNames[s]}编辑器`,
+          showMessage: s === "validate" || s === "dataPicking" || s === "required",
+          showMessageType: s === "dataPicking",
+          beforeOpen: () => this.onBeforeOpenExpression(t, s, e),
           onSubmitModal: (f) => {
-            const o = this.updateExpression(t, e, f, l);
+            const o = this.updateExpression(t, e, f, s);
             if (r) {
-              const d = this.buildRule(m, f, l);
+              const d = this.buildRule(m, f, s);
               r(d);
             }
             return o;
           }
         }
-      }, s;
+      }, l;
     }, {});
   }
   getExpressionInfo(t, e, n) {
-    const r = e === "Field" ? t.binding.field : t.id, s = this.getExpressionRule(r, n), l = {
-      value: s && s.value,
+    const r = e === "Field" ? t.binding.field : t.id, l = this.getExpressionRule(r, n), s = {
+      value: l && l.value,
       targetId: r,
       targetType: e,
       expressionType: n
     };
-    return s && s.message && (l.message = s.message), l;
+    return l && l.message && (s.message = l.message), s;
   }
   getExpressionConfig(t, e, n = ["compute", "dependency", "validate"], r) {
     return {
@@ -1082,7 +1117,7 @@ class he {
     };
   }
 }
-class wt {
+class Et {
   constructor(t, e) {
     x(this, "componentId");
     x(this, "viewModelId");
@@ -1117,7 +1152,7 @@ class wt {
     if (e) {
       if (!this.designViewModelField) {
         const r = this.designViewModelUtils.getDgViewModel(this.viewModelId);
-        this.designViewModelField = r.fields.find((s) => s.id === e);
+        this.designViewModelField = r.fields.find((l) => l.id === e);
       }
       t.updateOn = (n = this.designViewModelField) == null ? void 0 : n.updateOn;
     }
@@ -1153,7 +1188,7 @@ class wt {
     const r = {
       title: "外观",
       description: "Appearance"
-    }, s = {
+    }, l = {
       class: {
         title: "class样式",
         type: "string",
@@ -1169,21 +1204,21 @@ class wt {
         parentPropertyID: "appearance"
       }
     };
-    for (const l in e)
-      s[l] = Object.assign(s[l] || {}, e[l]);
+    for (const s in e)
+      l[s] = Object.assign(l[s] || {}, e[s]);
     return {
       ...r,
-      properties: { ...s },
-      setPropertyRelates(l, m) {
-        if (l) {
-          switch (l && l.propertyID) {
+      properties: { ...l },
+      setPropertyRelates(s, m) {
+        if (s) {
+          switch (s && s.propertyID) {
             case "class":
             case "style": {
               _.value++;
               break;
             }
           }
-          n && n(l, t, m);
+          n && n(s, t, m);
         }
       }
     };
@@ -1198,8 +1233,8 @@ class wt {
    * @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
    * @returns 
    */
-  getPropertyEditorParams(t, e = [], n = "visible", r = {}, s = {}, l = "") {
-    const { getVariables: m, getControlName: c, getStateMachines: u } = Ft(this.designerHostService), f = this.getRealTargetType(t), o = e && e.length > 0 ? e : ["Const", "Variable", "StateMachine", "Expression"], d = {
+  getPropertyEditorParams(t, e = [], n = "visible", r = {}, l = {}, s = "") {
+    const { getVariables: m, getControlName: c, getStateMachines: u } = It(this.designerHostService), f = this.getRealTargetType(t), o = e && e.length > 0 ? e : ["Const", "Variable", "StateMachine", "Expression"], d = {
       type: "property-editor",
       propertyTypes: o
     };
@@ -1212,7 +1247,7 @@ class wt {
           }, r);
           break;
         case "Expression":
-          d.expressionConfig = this.getExpressionOptions(t, f, l || n);
+          d.expressionConfig = this.getExpressionOptions(t, f, s || n);
           break;
         case "StateMachine":
           d.stateMachines = u();
@@ -1227,15 +1262,15 @@ class wt {
             onBeforeOpenVariables: (a) => {
               a.value = m(this.viewModelId);
             }
-          }, s), this.designerContext.designerMode === "PC_RTC" && (d.newVariablePrefix = "ext_" + d.newVariablePrefix);
+          }, l), this.designerContext.designerMode === "PC_RTC" && (d.newVariablePrefix = "ext_" + d.newVariablePrefix);
           break;
       }
     }), d;
   }
   getVisibleProperty(t, e = "") {
-    var s;
+    var l;
     let n = ["Const", "Variable", "StateMachine", "Expression"];
-    return e === "gridFieldEditor" ? n = ["Const", "Expression"] : e === "form-group" && !((s = t.binding) != null && s.field) && (n = ["Const", "Variable", "StateMachine"]), {
+    return e === "gridFieldEditor" ? n = ["Const", "Expression"] : e === "form-group" && !((l = t.binding) != null && l.field) && (n = ["Const", "Variable", "StateMachine"]), {
       visible: {
         title: "是否可见",
         type: "boolean",
@@ -1251,16 +1286,16 @@ class wt {
    * @returns 
    */
   getBehaviorConfig(t, e = "", n = {}, r) {
-    const s = {
+    const l = {
       title: "行为",
       description: ""
-    }, l = this.getVisibleProperty(t, e);
+    }, s = this.getVisibleProperty(t, e);
     for (const c in n)
-      l[c] = Object.assign(l[c] || {}, n[c]);
+      s[c] = Object.assign(s[c] || {}, n[c]);
     const m = this;
     return {
-      ...s,
-      properties: { ...l },
+      ...l,
+      properties: { ...s },
       setPropertyRelates(c, u) {
         if (c) {
           switch (c.propertyID) {
@@ -1293,8 +1328,8 @@ class wt {
     const n = e && e.parent && e.parent.schema;
     if (!n)
       return;
-    const r = n.contents.findIndex((l) => l.id === t), s = D(n.contents[r]);
-    n.contents.splice(r, 1), n.contents.splice(r, 0, s), qe();
+    const r = n.contents.findIndex((s) => s.id === t), l = z(n.contents[r]);
+    n.contents.splice(r, 1), n.contents.splice(r, 0, l), Ge();
   }
   /**
    * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
@@ -1306,7 +1341,7 @@ class wt {
     const n = t.propertyValue;
     if (!(n && typeof n == "object") || !(n.type === "Variable" && n.isNewVariable))
       return;
-    const l = {
+    const s = {
       id: n.field,
       category: "locale",
       code: n.fullPath,
@@ -1314,7 +1349,7 @@ class wt {
       type: n.newVariableType || "String",
       isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
     };
-    delete n.newVariableType, delete n.isNewVariable, this.formSchemaUtils.getVariableByCode(l.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(l);
+    delete n.newVariableType, delete n.isNewVariable, this.formSchemaUtils.getVariableByCode(s.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(s);
   }
   /**
    * 更新表达式到expressions节点
@@ -1324,7 +1359,7 @@ class wt {
     const e = t.propertyValue;
     if (!((e && e.type) === "Expression" && e.expressionInfo))
       return;
-    const { expressionId: s, expressionInfo: l } = e, { targetId: m, targetType: c, expressionType: u, value: f, message: o } = l, d = this.formSchemaUtils.getModule();
+    const { expressionId: l, expressionInfo: s } = e, { targetId: m, targetType: c, expressionType: u, value: f, message: o } = s, d = this.formSchemaUtils.getModule();
     d.expressions = d.expressions || [];
     const { expressions: g } = d;
     let a = g.find((v) => v.target === m);
@@ -1333,7 +1368,7 @@ class wt {
     if (p)
       p.value = f, p.message = o;
     else {
-      const v = { id: s, type: u, value: f, message: o };
+      const v = { id: l, type: u, value: f, message: o };
       a.rules.push(v);
     }
     delete e.expressionInfo;
@@ -1348,11 +1383,11 @@ class wt {
     const n = t.propertyValue;
     if (n && n.type === "Expression")
       return;
-    const s = t.propertyID, l = this.formSchemaUtils.getExpressions(), m = e.binding ? e.binding.field : e.id, c = l.find((u) => u.target === m);
-    !c || !c.rules || (c.rules = c.rules.filter((u) => u.type !== s));
+    const l = t.propertyID, s = this.formSchemaUtils.getExpressions(), m = e.binding ? e.binding.field : e.id, c = s.find((u) => u.target === m);
+    !c || !c.rules || (c.rules = c.rules.filter((u) => u.type !== l));
   }
   getExpressionOptions(t, e, n) {
-    return new he(this.formSchemaUtils).getExpressionOptions(t, e, n);
+    return new ye(this.formSchemaUtils).getExpressionOptions(t, e, n);
   }
   getRealTargetType(t) {
     return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item"].indexOf(t.type) > -1 ? "Button" : t.binding && t.binding.field ? "Field" : "Container";
@@ -1371,17 +1406,17 @@ class wt {
     }, e;
   }
 }
-const W = class W {
+const q = class q {
   /**
    * 根据绑定字段类型获取可用的输入类控件
    */
   static getEditorTypesByMDataType(t, e = !1, n = "") {
     if (e)
       return [{ key: h["language-textbox"].type, value: h["language-textbox"].name }];
-    let r = W.fieldControlTypeMapping[t];
+    let r = q.fieldControlTypeMapping[t];
     if (n === "data-grid-column" && (r != null && r.length)) {
-      const s = [h["check-group"].type, h["radio-group"].type, h.image.type];
-      r = r.filter((l) => !s.includes(l.key));
+      const l = [h["check-group"].type, h["radio-group"].type, h.image.type];
+      r = r.filter((s) => !l.includes(s.key));
     }
     return r;
   }
@@ -1390,8 +1425,8 @@ const W = class W {
    */
   static getAllInputTypes() {
     const t = [];
-    for (const e in W.fieldControlTypeMapping)
-      W.fieldControlTypeMapping[e].forEach((n) => {
+    for (const e in q.fieldControlTypeMapping)
+      q.fieldControlTypeMapping[e].forEach((n) => {
         t.find((r) => r.key === n.key && r.value === n.value) || t.push({ key: n.key, value: n.value });
       });
     return t;
@@ -1401,15 +1436,15 @@ const W = class W {
    * @param control 控件元数据
    */
   static mappingDomPropAndSchemaProp(t, e) {
-    var s;
-    const n = (s = t.editor) == null ? void 0 : s.type, r = [];
+    var l;
+    const n = (l = t.editor) == null ? void 0 : l.type, r = [];
     return (t.type === h["data-grid-column"].type || t.type === h["tree-grid-column"].type) && e && e.categoryId && e.categoryId.indexOf("gridFieldEditor") < 0 && r.push({ domField: "title", schemaField: "name" }), r.push({ domField: "label", schemaField: "name" }), r.push({ domField: "editor.required", schemaField: "require" }), r.push({ domField: "editor.readonly", schemaField: "readonly" }), (n === h["input-group"].type || n === h.textarea.type || n === h["number-spinner"].type) && r.push({ domField: "editor.maxLength", schemaField: "type.length" }), n === h["number-spinner"].type && r.push({ domField: "editor.precision", schemaField: "type.precision" }), (t.type === h["data-grid-column"].type || t.type === h["tree-grid-column"].type) && r.push({ domField: "formatter.precision", schemaField: "type.precision" }), (n === h["combo-list"].type || n === h["radio-group"].type) && r.push({ domField: "editor.data", schemaField: "type.enumValues" }), (t.type === h["data-grid-column"].type || t.type === h["tree-grid-column"].type) && r.push({ domField: "formatter.data", schemaField: "type.enumValues" }), n === h["date-picker"].type && (r.push({ domField: "editor.displayFormat", schemaField: "editor.format" }), r.push({ domField: "editor.fieldType", schemaField: "type.name" })), n === h["number-spinner"].type && (r.push({ domField: "editor.max", schemaField: "editor.maxValue" }), r.push({ domField: "editor.min", schemaField: "editor.minValue" })), n === h.lookup.type && (r.push({ domField: "editor.dataSource", schemaField: "editor.dataSource" }), r.push({ domField: "editor.valueField", schemaField: "editor.valueField" }), r.push({ domField: "editor.textField", schemaField: "editor.textField" }), r.push({ domField: "editor.displayType", schemaField: "editor.displayType" }), r.push({ domField: "editor.mapFields", schemaField: "editor.mapFields" }), r.push({ domField: "editor.helpId", schemaField: "editor.helpId" })), r.push({ domField: "path", schemaField: "bindingPath" }), r.push({ domField: "binding.path", schemaField: "bindingField" }), r.push({ domField: "binding.fullPath", schemaField: "path" }), (t.type === h["data-grid-column"].type || t.type === h["tree-grid-column"].type) && r.push({ domField: "field", schemaField: "bindingPath" }), r;
   }
 };
 /**
  * <字段类型,可配置的控件类型列表>的映射
  */
-x(W, "fieldControlTypeMapping", {
+x(q, "fieldControlTypeMapping", {
   String: [
     { key: h["input-group"].type, value: h["input-group"].name },
     { key: h.lookup.type, value: h.lookup.name },
@@ -1463,9 +1498,9 @@ x(W, "fieldControlTypeMapping", {
     { key: h["radio-group"].type, value: h["radio-group"].name }
   ]
 });
-let J = W;
+let J = q;
 var X = /* @__PURE__ */ ((i) => (i.Form = "Form", i.Variable = "Variable", i))(X || {});
-class It {
+class St {
   constructor() {
     /** 控件标题 */
     x(this, "label", "");
@@ -1495,29 +1530,29 @@ class It {
     x(this, "fieldSetId", "");
   }
 }
-function Et(i) {
+function xt(i) {
   let t, e;
   const n = /* @__PURE__ */ new Map();
   let r = [];
-  function s(f, o) {
-    const g = f.split(" ").filter((C) => C.startsWith("col-"));
+  function l(f, o) {
+    const g = f.split(" ").filter((w) => w.startsWith("col-"));
     if (g.length === 0) {
       o.isSupportedClass = !1;
       return;
     }
-    let a = g.find((C) => /^col-([1-9]|10|11|12)$/.test(C)), p = g.find((C) => /^col-md-([1-9]|10|11|12)$/.test(C)), v = g.find((C) => /^col-xl-([1-9]|10|11|12)$/.test(C)), y = g.find((C) => /^col-el-([1-9]|10|11|12)$/.test(C));
+    let a = g.find((w) => /^col-([1-9]|10|11|12)$/.test(w)), p = g.find((w) => /^col-md-([1-9]|10|11|12)$/.test(w)), v = g.find((w) => /^col-xl-([1-9]|10|11|12)$/.test(w)), y = g.find((w) => /^col-el-([1-9]|10|11|12)$/.test(w));
     a = a || "col-12", o.columnInSM = parseInt(a.replace("col-", ""), 10), o.displayWidthInSM = o.columnInSM / 12, o.displayWidthInSM !== 1 && (o.isSupportedClass = !1), p = p || "col-md-" + o.columnInSM, o.columnInMD = parseInt(p.replace("col-md-", ""), 10), o.displayWidthInMD = o.columnInMD / 6, [1, 2].includes(o.displayWidthInMD) || (o.isSupportedClass = !1), v = v || "col-xl-" + o.columnInMD, o.columnInLG = parseInt(v.replace("col-xl-", ""), 10), o.displayWidthInLG = o.columnInLG / 3, [1, 2, 3, 4].includes(o.displayWidthInLG) || (o.isSupportedClass = !1), y = y || "col-el-" + o.columnInLG, o.columnInEL = parseInt(y.replace("col-el-", ""), 10), o.displayWidthInEL = o.columnInEL / 2, [1, 2, 3, 4, 5, 6].includes(o.displayWidthInEL) || (o.isSupportedClass = !1);
   }
-  function l(f, o, d, g = !1) {
+  function s(f, o, d, g = !1) {
     let a = !1;
     f.contents.forEach((p) => {
       if (p.type === "fieldset") {
-        d += 1, l(p, o, d, !0), a = !0;
+        d += 1, s(p, o, d, !0), a = !0;
         return;
       }
       a && (d += 1, a = !1);
-      const v = p.appearance && p.appearance.class, y = new It();
-      v ? s(v, y) : y.isSupportedClass = !1, y.label = p.label || p.id, y.id = p.id, y.group = d, g && (y.fieldSetId = f.id), e === p.id && (t = d), n.set(p.id, p), o.push(y);
+      const v = p.appearance && p.appearance.class, y = new St();
+      v ? l(v, y) : y.isSupportedClass = !1, y.label = p.label || p.id, y.id = p.id, y.group = d, g && (y.fieldSetId = f.id), e === p.id && (t = d), n.set(p.id, p), o.push(y);
     });
   }
   function m(f) {
@@ -1534,8 +1569,8 @@ function Et(i) {
       return { result: d, message: g };
     e = f.id, r = [], n.clear();
     const p = a.contents[0].type === h.fieldset.type ? 0 : 1;
-    l(a, r, p);
-    const v = r.find((C) => !C.isSupportedClass);
+    s(a, r, p);
+    const v = r.find((w) => !w.isSupportedClass);
     return {
       defaultState: {
         defaultGroupNumber: t || 1,
@@ -1551,15 +1586,15 @@ function Et(i) {
       return "";
     const a = [];
     return f.forEach((p) => {
-      var C;
+      var w;
       const v = n.get(p.id), y = v.appearance && v.appearance.class;
       if (y) {
-        const E = y.split(" ").filter((N) => !N.startsWith("col-")), S = "col-" + p.columnInSM, M = "col-md-" + p.columnInMD, V = "col-xl-" + p.columnInLG, O = "col-el-" + p.columnInEL, F = [S, M, V, O].concat(E);
-        v.appearance.class = F.join(" ");
+        const V = y.split(" ").filter((S) => !S.startsWith("col-")), M = "col-" + p.columnInSM, k = "col-md-" + p.columnInMD, N = "col-xl-" + p.columnInLG, L = "col-el-" + p.columnInEL, b = [M, k, N, L].concat(V);
+        v.appearance.class = b.join(" ");
       }
       if (p.fieldSetId) {
-        const k = g.contents.find((S) => S.id === p.fieldSetId), E = a.find((S) => S.id === p.fieldSetId);
-        E ? (C = E.contents) == null || C.push(v) : (a.push(k), k.contents = [v]);
+        const T = g.contents.find((M) => M.id === p.fieldSetId), V = a.find((M) => M.id === p.fieldSetId);
+        V ? (w = V.contents) == null || w.push(v) : (a.push(T), T.contents = [v]);
       } else
         a.push(v);
     }), g.contents = a, g.id;
@@ -1568,10 +1603,10 @@ function Et(i) {
     checkCanFindFormNode: m,
     checkCanOpenLayoutEditor: c,
     changeFormControlsByResponseLayoutConfig: u,
-    getResonseFormLayoutConfig: l
+    getResonseFormLayoutConfig: s
   };
 }
-class St extends wt {
+class Mt extends Et {
   constructor(e, n) {
     super(e, n);
     x(this, "responseLayoutEditorFunction");
@@ -1583,7 +1618,7 @@ class St extends wt {
       keyboard: !1,
       showButton: !1
     });
-    this.responseLayoutEditorFunction = Et(this.formSchemaUtils);
+    this.responseLayoutEditorFunction = xt(this.formSchemaUtils);
   }
   getCommonPropertyConfig(e, n, r = "Card") {
     this.propertyConfig.categories.basic = this.getBasicProperties(e, n, r), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e, n), this.propertyConfig.categories.behavior = this.getBehaviorConfig(e, "form-group");
@@ -1596,9 +1631,9 @@ class St extends wt {
   }
   getBasicProperties(e, n, r = "Card") {
     var u;
-    const s = this;
+    const l = this;
     this.setDesignViewModelField(e);
-    const { canChangeControlType: l, editorTypeList: m } = this.getAvailableEditorType(e), c = {
+    const { canChangeControlType: s, editorTypeList: m } = this.getAvailableEditorType(e), c = {
       description: "Basic Information",
       title: "基本信息",
       properties: {
@@ -1621,7 +1656,7 @@ class St extends wt {
             idField: "key",
             editable: !1,
             data: m,
-            readonly: !l
+            readonly: !s
           }
         },
         label: {
@@ -1661,7 +1696,7 @@ class St extends wt {
         if (f)
           switch (f && f.propertyID) {
             case "type": {
-              s.changeControlType(e, f, n);
+              l.changeControlType(e, f, n);
               break;
             }
             case "label": {
@@ -1669,7 +1704,7 @@ class St extends wt {
               break;
             }
             case "binding": {
-              s.changeBindingField(e, f, d);
+              l.changeBindingField(e, f, d);
               break;
             }
           }
@@ -1687,7 +1722,7 @@ class St extends wt {
     if (e.binding.type === "Variable") {
       if (this.bindingVarible = this.formSchemaUtils.getVariableById(e.binding.field), !this.bindingVarible)
         return !1;
-    } else if (!this.designViewModelField || this.designViewModelField.$type !== ie.SimpleField)
+    } else if (!this.designViewModelField || this.designViewModelField.$type !== re.SimpleField)
       return !1;
     return !0;
   }
@@ -1695,18 +1730,18 @@ class St extends wt {
    * 获取可选的编辑器类型
    */
   getAvailableEditorType(e) {
-    var s;
+    var l;
     const n = this.checkCanChangeControlType(e, this.viewModelId);
     if (!n)
       return {
         canChangeControlType: !1,
         editorTypeList: [{
           key: e.editor.type,
-          value: ((s = h[e.editor.type]) == null ? void 0 : s.name) || e.editor.type
+          value: ((l = h[e.editor.type]) == null ? void 0 : l.name) || e.editor.type
         }]
       };
     let r = [];
-    return this.designViewModelField && this.designViewModelField.$type === ie.SimpleField ? r = J.getEditorTypesByMDataType(this.designViewModelField.type.name, this.designViewModelField.multiLanguage) : this.bindingVarible && (r = J.getEditorTypesByMDataType(this.bindingVarible.type, this.designViewModelField.multiLanguage)), { canChangeControlType: n, editorTypeList: r };
+    return this.designViewModelField && this.designViewModelField.$type === re.SimpleField ? r = J.getEditorTypesByMDataType(this.designViewModelField.type.name, this.designViewModelField.multiLanguage) : this.bindingVarible && (r = J.getEditorTypesByMDataType(this.bindingVarible.type, this.designViewModelField.multiLanguage)), { canChangeControlType: n, editorTypeList: r };
   }
   changeBindingField(e, n, r) {
     n.needRefreshEntityTree = !0;
@@ -1750,14 +1785,14 @@ class St extends wt {
           }
         }
       },
-      setPropertyRelates(s, l) {
-        if (s)
-          switch (s && s.propertyID) {
+      setPropertyRelates(l, s) {
+        if (l)
+          switch (l && l.propertyID) {
             case "responseLayout":
-              r.responseLayoutEditorFunction.changeFormControlsByResponseLayoutConfig(s.propertyValue, r.componentId || e.id), r.updateUnifiedLayoutAfterResponseLayoutChanged(r.componentId), r.updateElementByParentContainer(e.id, n), delete e.responseLayout;
+              r.responseLayoutEditorFunction.changeFormControlsByResponseLayoutConfig(l.propertyValue, r.componentId || e.id), r.updateUnifiedLayoutAfterResponseLayoutChanged(r.componentId), r.updateElementByParentContainer(e.id, n), delete e.responseLayout;
               break;
             case "class":
-              r.updateUnifiedLayoutAfterControlChanged(s.propertyValue, e.id, this.componentId), _.value++;
+              r.updateUnifiedLayoutAfterControlChanged(l.propertyValue, e.id, this.componentId), _.value++;
               break;
             case "style": {
               _.value++;
@@ -1776,19 +1811,19 @@ class St extends wt {
    * @param newControlType 新控件类型
    */
   changeControlType(e, n, r) {
-    const s = n.propertyValue, l = r && r.parent && r.parent.schema;
-    if (!l)
+    const l = n.propertyValue, s = r && r.parent && r.parent.schema;
+    if (!s)
       return;
-    const m = l.contents.findIndex((f) => f.id === e.id);
+    const m = s.contents.findIndex((f) => f.id === e.id);
     if (m === -1)
       return;
-    const c = l.contents[m];
+    const c = s.contents[m];
     let u;
     if (this.designViewModelField) {
       const d = this.formSchemaUtils.getViewModelById(this.viewModelId).fields.find((a) => a.id === this.designViewModelField.id).fieldSchema || {};
-      d.editor || (d.editor = {}), d.editor.$type = s, this.designViewModelUtils.getDgViewModel(this.viewModelId).changeField(this.designViewModelField.id, d, !1), u = this.controlCreatorUtils.setFormFieldProperty(this.designViewModelField, s);
+      d.editor || (d.editor = {}), d.editor.$type = l, this.designViewModelUtils.getDgViewModel(this.viewModelId).changeField(this.designViewModelField.id, d, !1), u = this.controlCreatorUtils.setFormFieldProperty(this.designViewModelField, l);
     }
-    u || (u = this.controlCreatorUtils.createFormGroupWithoutField(s)), Object.assign(u, {
+    u || (u = this.controlCreatorUtils.createFormGroupWithoutField(l)), Object.assign(u, {
       id: c.id,
       appearance: c.appearance,
       size: c.size,
@@ -1800,13 +1835,13 @@ class St extends wt {
       (f) => f.classList.remove("dgComponentSelected")
     ), Array.from(document.getElementsByClassName("dgComponentFocused")).forEach(
       (f) => f.classList.remove("dgComponentFocused")
-    ), _.value++, ae(() => {
+    ), _.value++, Z(() => {
       this.getFormDesignerInstance().reloadPropertyPanel();
     });
   }
-  getComponentConfig(e, n = {}, r = {}, s) {
+  getComponentConfig(e, n = {}, r = {}, l) {
     var d, g;
-    const l = Object.assign({
+    const s = Object.assign({
       description: "编辑器",
       title: "编辑器",
       type: "input-group",
@@ -1835,7 +1870,7 @@ class St extends wt {
       f[a] = Object.assign(f[a] || {}, r[a]);
     const o = this;
     return {
-      ...l,
+      ...s,
       properties: { ...f },
       setPropertyRelates(a, p) {
         if (a) {
@@ -1845,7 +1880,7 @@ class St extends wt {
               o.afterMutilEditorChanged(e, a);
               break;
           }
-          s && s.bind(o)(a, e, p);
+          l && l.bind(o)(a, e, p);
         }
       }
     };
@@ -1857,12 +1892,12 @@ class St extends wt {
   * @param componentId 控件所在组件id
   */
   updateUnifiedLayoutAfterControlChanged(e, n, r) {
-    const s = e.split(" ");
-    let l = s.find((o) => /^col-([1-9]|10|11|12)$/.test(o)), m = s.find((o) => /^col-md-([1-9]|10|11|12)$/.test(o)), c = s.find((o) => /^col-xl-([1-9]|10|11|12)$/.test(o)), u = s.find((o) => /^col-el-([1-9]|10|11|12)$/.test(o));
-    l = l || "col-12", m = m || "col-md-" + l.replace("col-", ""), c = c || "col-xl-" + m.replace("col-md-", ""), u = u || "col-el-" + c.replace("col-xl-", "");
+    const l = e.split(" ");
+    let s = l.find((o) => /^col-([1-9]|10|11|12)$/.test(o)), m = l.find((o) => /^col-md-([1-9]|10|11|12)$/.test(o)), c = l.find((o) => /^col-xl-([1-9]|10|11|12)$/.test(o)), u = l.find((o) => /^col-el-([1-9]|10|11|12)$/.test(o));
+    s = s || "col-12", m = m || "col-md-" + s.replace("col-", ""), c = c || "col-xl-" + m.replace("col-md-", ""), u = u || "col-el-" + c.replace("col-xl-", "");
     const f = {
       id: n,
-      columnInSM: parseInt(l.replace("col-", ""), 10),
+      columnInSM: parseInt(s.replace("col-", ""), 10),
       columnInMD: parseInt(m.replace("col-md-", ""), 10),
       columnInLG: parseInt(c.replace("col-xl-", ""), 10),
       columnInEL: parseInt(u.replace("col-el-", ""), 10)
@@ -1878,12 +1913,12 @@ class St extends wt {
     const { formNode: r } = this.responseLayoutEditorFunction.checkCanFindFormNode(e);
     if (!r || !r.unifiedLayout)
       return;
-    const s = [];
-    if (this.responseLayoutEditorFunction.getResonseFormLayoutConfig(r, s, 1), n) {
-      const a = s.find((p) => p.id === n.id);
+    const l = [];
+    if (this.responseLayoutEditorFunction.getResonseFormLayoutConfig(r, l, 1), n) {
+      const a = l.find((p) => p.id === n.id);
       Object.assign(a || {}, n);
     }
-    const l = s.map((a) => a.columnInSM), m = s.map((a) => a.columnInMD), c = s.map((a) => a.columnInLG), u = s.map((a) => a.columnInEL), f = this.checkIsUniqueColumn(l) ? l[0] : null, o = this.checkIsUniqueColumn(m) ? m[0] : null, d = this.checkIsUniqueColumn(c) ? c[0] : null, g = this.checkIsUniqueColumn(u) ? u[0] : null;
+    const s = l.map((a) => a.columnInSM), m = l.map((a) => a.columnInMD), c = l.map((a) => a.columnInLG), u = l.map((a) => a.columnInEL), f = this.checkIsUniqueColumn(s) ? s[0] : null, o = this.checkIsUniqueColumn(m) ? m[0] : null, d = this.checkIsUniqueColumn(c) ? c[0] : null, g = this.checkIsUniqueColumn(u) ? u[0] : null;
     Object.assign(r.unifiedLayout, {
       uniqueColClassInSM: f,
       uniqueColClassInMD: o,
@@ -1929,7 +1964,7 @@ class St extends wt {
   * @param propertyData 下拉框控件属性值
   */
   checkEnumDataReadonly(e) {
-    return !e.binding || e.binding.type !== "Form" ? !1 : !!(this.designViewModelField && this.designViewModelField.type && this.designViewModelField.type.$type === Ge.EnumType);
+    return !e.binding || e.binding.type !== "Form" ? !1 : !!(this.designViewModelField && this.designViewModelField.type && this.designViewModelField.type.$type === De.EnumType);
   }
   /**
   * 将字段值变化前事件、变化后事件追加到交互面板
@@ -1956,31 +1991,40 @@ class St extends wt {
   * @param showPosition 面板展示位置
   * @param customEvent 输入控件特有的事件配置
   */
-  getEventPropertyConfig(e, n = "card", r, s) {
-    const l = this;
+  getEventPropertyConfig(e, n = "card", r, l) {
+    const s = this;
     let m = [];
-    r && (m = m.concat(r)), this.appendFieldValueChangeEvents(e, m);
-    const c = l.eventsEditorUtils.formProperties(e, l.viewModelId, m);
+    if (r && (m = m.concat(r)), m.length === 0)
+      return {
+        title: "事件",
+        hideTitle: !0,
+        properties: {},
+        tabId: "commands",
+        tabName: "交互",
+        hide: !0
+      };
+    this.appendFieldValueChangeEvents(e, m);
+    const c = s.eventsEditorUtils.formProperties(e, s.viewModelId, m);
     return {
       title: "事件",
       hideTitle: !0,
-      properties: l.createBaseEventProperty(c),
+      properties: s.createBaseEventProperty(c),
       tabId: "commands",
       tabName: "交互",
       setPropertyRelates(o, d) {
         const g = o.propertyValue;
-        delete e[l.viewModelId], g && (g.setPropertyRelates = this.setPropertyRelates, g.controlInfo = { type: l.getControlMethodType(e), name: e.title }, l.eventsEditorUtils.saveRelatedParameters(e, l.viewModelId, g.events, g)), s && s(o, d, g);
-        const a = l.designViewModelUtils.getDgViewModel(l.viewModelId);
-        a && l.designViewModelField && a.changeField(l.designViewModelField.id, { valueChanging: e.fieldValueChanging, valueChanged: e.fieldValueChanged });
+        delete e[s.viewModelId], g && (g.setPropertyRelates = this.setPropertyRelates, g.controlInfo = { type: s.getControlMethodType(e), name: e.title }, s.eventsEditorUtils.saveRelatedParameters(e, s.viewModelId, g.events, g)), l && l(o, d, g);
+        const a = s.designViewModelUtils.getDgViewModel(s.viewModelId);
+        a && s.designViewModelField && a.changeField(s.designViewModelField.id, { valueChanging: e.fieldValueChanging, valueChanged: e.fieldValueChanged });
       }
     };
   }
-  getExpressionConfig(e, n, r = ["compute", "dependency", "validate"], s) {
-    return new he(this.formSchemaUtils).getExpressionConfig(
+  getExpressionConfig(e, n, r = ["compute", "dependency", "validate"], l) {
+    return new ye(this.formSchemaUtils).getExpressionConfig(
       e,
       n,
       r,
-      s
+      l
     );
   }
   getBindingDataType() {
@@ -1990,14 +2034,14 @@ class St extends wt {
     return this.getBindingDataType() === "number" ? this.numberEditorOptions : {};
   }
   updatePropertyValue(e, n, r) {
-    var s;
-    e.editor[n] !== r ? e.editor[n] = r : (s = this.getFormDesignerInstance()) == null || s.reloadPropertyPanel();
+    var l;
+    e.editor[n] !== r ? e.editor[n] = r : (l = this.getFormDesignerInstance()) == null || l.reloadPropertyPanel();
   }
   setBooleanValue(e, n, r) {
-    let s = r;
-    this.getBindingDataType() === "string" && (s = (s || "").trim() || (n === "trueValue" ? "true" : "false"));
+    let l = r;
+    this.getBindingDataType() === "string" && (l = (l || "").trim() || (n === "trueValue" ? "true" : "false"));
     const m = n === "trueValue" ? "falseValue" : "trueValue";
-    e.editor[m] === s && (s = s + 1), this.updatePropertyValue(e, n, s);
+    e.editor[m] === l && (l = l + 1), this.updatePropertyValue(e, n, l);
   }
   getBooleanValueConverter() {
     return {
@@ -2008,7 +2052,7 @@ class St extends wt {
     };
   }
 }
-class xt extends St {
+class Tt extends Mt {
   getPropertyConfig(t, e) {
     return this.propertyConfig.categories.basic = this.getBasicPropConfig(t), this.propertyConfig.categories.appearance = this.getAppearanceConfig(), this.getBehaviorConfig(t), this.getFilterBarConfig(t), this.getEventPropConfig(t), this.propertyConfig;
   }
@@ -2050,7 +2094,8 @@ class xt extends St {
             metadataService: this.metadataService,
             viewModelId: this.viewModelId,
             designViewModelUtils: this.designViewModelUtils,
-            eventsEditorUtils: this.eventsEditorUtils
+            eventsEditorUtils: this.eventsEditorUtils,
+            schemaService: this.schemaService
           }
         },
         // visible: {
@@ -2070,7 +2115,7 @@ class xt extends St {
           editor: this.getPropertyEditorParams(t, ["Variable"], "", {}, { newVariableType: "Object" })
         }
       },
-      setPropertyRelates(r, s) {
+      setPropertyRelates(r, l) {
         if (r)
           switch (r.propertyID) {
             case "visible":
@@ -2090,26 +2135,26 @@ class xt extends St {
         label: "onQuery",
         name: "查询事件"
       }
-    ], n = this, r = n.eventsEditorUtils.formProperties(t, n.viewModelId, e), s = n.createBaseEventProperty(r);
+    ], n = this, r = n.eventsEditorUtils.formProperties(t, n.viewModelId, e), l = n.createBaseEventProperty(r);
     this.propertyConfig.categories.eventsEditor = {
       title: "事件",
       hideTitle: !0,
-      properties: s,
+      properties: l,
       // 这个属性，标记当属性变更得时候触发重新更新属性
       refreshPanelAfterChanged: !0,
       tabId: "commands",
       tabName: "交互",
-      setPropertyRelates(l, m) {
-        const c = l.propertyValue;
+      setPropertyRelates(s, m) {
+        const c = s.propertyValue;
         delete t[n.viewModelId], c && (c.setPropertyRelates = this.setPropertyRelates, n.eventsEditorUtils.saveRelatedParameters(t, n.viewModelId, c.events, c)), t.remoteSort = !!t.columnSorted;
       }
     };
   }
 }
-function Mt(i, t) {
+function kt(i, t) {
   function e(m, c) {
     const u = i.schema;
-    return new xt(m, t).getPropertyConfig(u, c);
+    return new Tt(m, t).getPropertyConfig(u, c);
   }
   function n() {
     return !1;
@@ -2117,10 +2162,10 @@ function Mt(i, t) {
   function r() {
     return !1;
   }
-  function s() {
+  function l() {
     return !1;
   }
-  function l() {
+  function s() {
     var o, d, g, a, p, v;
     if ((d = (o = i == null ? void 0 : i.parent) == null ? void 0 : o.parent) != null && d.schema) {
       const y = (g = i == null ? void 0 : i.parent) == null ? void 0 : g.parent.schema;
@@ -2128,7 +2173,7 @@ function Mt(i, t) {
     }
     const { formSchemaUtils: m } = t, c = i.componentInstance.value.belongedComponentId, u = m.getViewModelIdByComponentId(c), f = m.getViewModelById(u);
     if (f && f.states) {
-      const y = f.states.findIndex((C) => C.code === "originalFilterConditionList");
+      const y = f.states.findIndex((w) => w.code === "originalFilterConditionList");
       y > -1 && f.states.splice(y, 1);
     }
   }
@@ -2136,14 +2181,14 @@ function Mt(i, t) {
     getPropsConfig: e,
     canAccepts: n,
     checkCanDeleteComponent: r,
-    checkCanMoveComponent: s,
-    onRemoveComponent: l
+    checkCanMoveComponent: l,
+    onRemoveComponent: s
   };
 }
-function ye(i, t) {
+function be(i, t) {
   let e;
   function n(o) {
-    const { properties: d, title: g, ignore: a } = o, p = a && Array.isArray(a), v = Object.keys(d).reduce((y, C) => ((!p || !a.find((k) => k === C)) && (y[C] = d[C].type === "object" && d[C].properties ? n(d[C]) : D(d[C].default)), y), {});
+    const { properties: d, title: g, ignore: a } = o, p = a && Array.isArray(a), v = Object.keys(d).reduce((y, w) => ((!p || !a.find((T) => T === w)) && (y[w] = d[w].type === "object" && d[w].properties ? n(d[w]) : z(d[w].default)), y), {});
     if (g && (!p || !a.find((y) => y === "id"))) {
       const y = g.toLowerCase().replace(/-/g, "_");
       v.id = `${y}_${Math.random().toString().slice(2, 6)}`;
@@ -2153,7 +2198,7 @@ function ye(i, t) {
   function r(o) {
     const { properties: d, title: g, required: a } = o;
     if (a && Array.isArray(a)) {
-      const p = a.reduce((v, y) => (v[y] = d[y].type === "object" && d[y].properties ? n(d[y]) : D(d[y].default), v), {});
+      const p = a.reduce((v, y) => (v[y] = d[y].type === "object" && d[y].properties ? n(d[y]) : z(d[y].default), v), {});
       if (g && a.find((v) => v === "id")) {
         const v = g.toLowerCase().replace(/-/g, "_");
         p.id = `${v}_${Math.random().toString().slice(2, 6)}`;
@@ -2164,18 +2209,18 @@ function ye(i, t) {
       type: g
     };
   }
-  function s(o, d = {}, g) {
+  function l(o, d = {}, g) {
     const a = i[o];
     if (a) {
       let p = r(a);
       const v = t[o];
-      return p = v ? v({ getSchemaByType: s }, p, d, g) : p, e != null && e.appendIdentifyForNewControl && e.appendIdentifyForNewControl(p), p;
+      return p = v ? v({ getSchemaByType: l }, p, d, g) : p, e != null && e.appendIdentifyForNewControl && e.appendIdentifyForNewControl(p), p;
     }
     return null;
   }
-  function l(o, d) {
+  function s(o, d) {
     const g = n(d);
-    return Object.keys(g).reduce((a, p) => (Object.prototype.hasOwnProperty.call(o, p) && (a[p] && ne(a[p]) && ne(o[p] || !o[p]) ? Object.assign(a[p], o[p] || {}) : a[p] = o[p]), a), g), g;
+    return Object.keys(g).reduce((a, p) => (Object.prototype.hasOwnProperty.call(o, p) && (a[p] && oe(a[p]) && oe(o[p] || !o[p]) ? Object.assign(a[p], o[p] || {}) : a[p] = o[p]), a), g), g;
   }
   function m(o, d) {
     return Object.keys(o).filter((a) => o[a] != null).reduce((a, p) => {
@@ -2193,7 +2238,7 @@ function ye(i, t) {
     }, {});
   }
   function c(o, d, g = /* @__PURE__ */ new Map()) {
-    const a = l(o, d);
+    const a = s(o, d);
     return m(a, g);
   }
   function u(o) {
@@ -2203,10 +2248,10 @@ function ye(i, t) {
       const a = i[d];
       if (!a)
         return o;
-      const p = l(o, a), v = ((g = o.editor) == null ? void 0 : g.type) || "";
+      const p = s(o, a), v = ((g = o.editor) == null ? void 0 : g.type) || "";
       if (v) {
-        const y = i[v], C = l(o.editor, y);
-        p.editor = C;
+        const y = i[v], w = s(o.editor, y);
+        p.editor = w;
       }
       return p;
     }
@@ -2215,10 +2260,10 @@ function ye(i, t) {
   function f(o) {
     e = o;
   }
-  return { getSchemaByType: s, resolveSchemaWithDefaultValue: u, resolveSchemaToProps: c, mappingSchemaToProps: m, setDesignerContext: f };
+  return { getSchemaByType: l, resolveSchemaWithDefaultValue: u, resolveSchemaToProps: c, mappingSchemaToProps: m, setDesignerContext: f };
 }
-const be = {}, Ce = {}, { resolveSchemaWithDefaultValue: Tt, resolveSchemaToProps: kt, mappingSchemaToProps: Vt } = ye(be, Ce);
-function Pt(i = {}) {
+const Ce = {}, Fe = {}, { resolveSchemaWithDefaultValue: Pt, resolveSchemaToProps: Vt, mappingSchemaToProps: Bt } = be(Ce, Fe);
+function Nt(i = {}) {
   function t(u, f, o, d) {
     if (typeof o == "number")
       return d[u].length === o;
@@ -2250,13 +2295,13 @@ function Pt(i = {}) {
       return { target: o, operator: "getProperty", param: g, value: a };
     }) : [];
   }
-  function s(u) {
+  function l(u) {
     return Object.keys(u).reduce((o, d) => {
       const g = r(d, u[d]);
       return o.push(...g), o;
     }, []);
   }
-  function l(u, f) {
+  function s(u, f) {
     if (n.has(u.operator)) {
       const o = n.get(u.operator);
       return o && o(u.target, u.param, u.value, f) || !1;
@@ -2264,27 +2309,27 @@ function Pt(i = {}) {
     return !1;
   }
   function m(u, f) {
-    return s(u).reduce((g, a) => g && l(a, f), !0);
+    return l(u).reduce((g, a) => g && s(a, f), !0);
   }
   function c(u, f) {
-    const o = Object.keys(u), d = o.includes("allOf"), g = o.includes("anyOf"), a = d || g, y = (a ? u[a ? d ? "allOf" : "anyOf" : "allOf"] : [u]).map((k) => m(k, f));
+    const o = Object.keys(u), d = o.includes("allOf"), g = o.includes("anyOf"), a = d || g, y = (a ? u[a ? d ? "allOf" : "anyOf" : "allOf"] : [u]).map((T) => m(T, f));
     return d ? !y.includes(!1) : y.includes(!0);
   }
   return { parseValueSchema: c };
 }
-const Bt = {
+const Ot = {
   convertTo: (i, t, e, n) => {
     i.appearance || (i.appearance = {}), i.appearance[t] = e;
   },
   convertFrom: (i, t, e) => i.appearance ? i.appearance[t] : i[t]
-}, Ot = {
+}, Lt = {
   convertFrom: (i, t, e) => i.buttons && i.buttons.length ? `共 ${i.buttons.length} 项` : "无"
-}, Nt = {
+}, Ut = {
   convertTo: (i, t, e, n) => {
     i.editor && (i.editor[t] = e);
   },
   convertFrom: (i, t, e) => i.editor && Object.prototype.hasOwnProperty.call(i.editor, t) ? i.editor[t] : i[t]
-}, Lt = {
+}, Rt = {
   button: { type: "button", name: "按钮" },
   "response-toolbar": { type: "response-toolbar", name: "工具栏" },
   "response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
@@ -2337,18 +2382,18 @@ const Bt = {
   comment: { type: "comment", name: "评论区" },
   "rich-text-editor": { type: "rich-text-editor", name: "富文本编辑器", icon: "rich-text-box" },
   calendar: { type: "calendar", name: "日历", icon: "date-picker" }
-}, Ut = {
+}, At = {
   convertFrom: (i, t, e) => {
     var r;
     const n = i.editor && i.editor[t] ? i.editor[t] : i[t];
-    return ((r = Lt[n]) == null ? void 0 : r.name) || n;
+    return ((r = Rt[n]) == null ? void 0 : r.name) || n;
   }
-}, Rt = {
+}, $t = {
   convertTo: (i, t, e, n) => {
     i[t] = i[t];
   },
   convertFrom: (i, t, e) => i.editor ? e.getRealEditorType(i.editor.type) : ""
-}, At = {
+}, jt = {
   convertTo: (i, t, e, n) => {
     (i.type === "data-grid-column" || i.type === "tree-grid-column") && (i.formatter ? i.formatter[t] = e : i.formatter = {
       [t]: e
@@ -2379,7 +2424,7 @@ const Bt = {
     }
     return "none";
   }
-}, $t = {
+}, Wt = {
   convertTo: (i, t, e, n) => {
     i.command ? i.command[t] = e : i.command = {
       [t]: e
@@ -2416,15 +2461,17 @@ const Bt = {
     var n, r;
     if (i.command) {
       if (t === "enableType") {
-        const s = (r = (n = i.command) == null ? void 0 : n.commands) == null ? void 0 : r.find((l) => l.command === "edit" && l.type === "primary");
-        return i.command.enable ? s ? "default" : "custom" : "unable";
+        const l = (r = (n = i.command) == null ? void 0 : n.commands) == null ? void 0 : r.find((s) => s.command === "edit" && s.type === "primary");
+        return i.command.enable ? l ? "default" : "custom" : "unable";
       }
       if (t === "commands")
         return i.command.enableType === "custom" ? i.command.commands : [];
+      if (t === "formatter")
+        return i.command.formatter;
     }
     return "";
   }
-}, jt = {
+}, qt = {
   convertTo: (i, t, e, n) => {
     i.column ? i.column[t] = e : i.column = {
       [t]: e
@@ -2439,7 +2486,7 @@ const Bt = {
     }
     return "";
   }
-}, qt = {
+}, Gt = {
   convertTo: (i, t, e, n) => {
     i.summary ? i.summary[t] = e : i.summary = {
       [t]: e
@@ -2449,7 +2496,7 @@ const Bt = {
     });
   },
   convertFrom: (i, t, e) => i.summary && t === "enable" ? i.summary.enable : i.type === "data-grid-column" ? i.enableSummary === void 0 ? !1 : i.enableSummary : ""
-}, Wt = {
+}, zt = {
   convertTo: (i, t, e, n) => {
     i.group ? i.group[t] = e : i.group = {
       [t]: e
@@ -2467,7 +2514,7 @@ const Bt = {
         return i.group.showSummary;
     }
   }
-}, Gt = {
+}, Dt = {
   convertFrom: (i, t) => i.binding ? i.binding.path : "",
   convertTo: (i, t, e) => {
     if (e && e.length > 0) {
@@ -2475,17 +2522,17 @@ const Bt = {
       i.binding || (i.binding = {}), i.binding.type = "Form", i.binding.path = n.bindingField, i.binding.field = n.id, i.binding.fullPath = n.path, i.path = n.bindingPath;
     }
   }
-}, Dt = {
+}, Qt = {
   convertTo: (i, t, e, n) => {
     i.pagination || (i.pagination = {}), i.pagination[t] = e;
   },
   convertFrom: (i, t, e) => i.pagination ? i.pagination[t] : i[t]
-}, zt = {
+}, _t = {
   convertTo: (i, t, e, n) => {
     i.rowNumber || (i.rowNumber = {}), i.rowNumber[t] = e;
   },
   convertFrom: (i, t, e) => i.rowNumber ? i.rowNumber[t] : i[t]
-}, Qt = {
+}, Xt = {
   convertTo: (i, t, e, n) => {
     i.selection || (i.selection = {}), i.selection[t] = e;
   },
@@ -2493,24 +2540,24 @@ const Bt = {
     var n, r;
     return t === "showCheckbox" ? (n = i.selection) != null && n.multiSelect ? !0 : (r = i.selection) == null ? void 0 : r.showCheckbox : i.selection ? i.selection[t] : i[t];
   }
-}, _t = {
+}, Jt = {
   convertFrom: (i, t, e) => i[t] && i[t].length ? `共 ${i[t].length} 项` : ""
-}, Xt = {
+}, Ht = {
   convertFrom: (i, t) => i[t] || "",
   convertTo: (i, t, e) => {
     i[t] = e;
   }
-}, Jt = {
+}, Yt = {
   convertTo: (i, t, e, n) => {
     i.size || (i.size = {}), i.size[t] = e;
   },
   convertFrom: (i, t, e) => i.size ? i.size[t] : i[t]
-}, Yt = {
+}, Zt = {
   convertFrom: (i, t, e) => {
     var n, r;
     return (n = i.formatter) != null && n.data && t === "formatterEnumData" && !i.formatterEnumData ? (r = i.formatter) == null ? void 0 : r.data : i.formatterEnumData;
   }
-}, Zt = {
+}, Kt = {
   convertTo: (i, t, e, n) => {
     i.sort || (i.sort = {}), i.sort[t] = e;
   },
@@ -2521,7 +2568,7 @@ const Bt = {
     if (t === "multiSort")
       return !!((r = i.sort) != null && r.multiSort);
   }
-}, Ht = {
+}, ei = {
   convertTo: (i, t, e, n) => {
     i.filter || (i.filter = {}), i.filter[t] = e;
   },
@@ -2530,7 +2577,7 @@ const Bt = {
     if (t === "mode")
       return ((n = i.filter) == null ? void 0 : n.mode) || "client";
   }
-}, Kt = {
+}, ti = {
   convertTo: (i, t, e, n) => {
     i.rowOption ? i.rowOption[t] = e : i.rowOption = {
       [t]: e
@@ -2545,7 +2592,7 @@ const Bt = {
     }
     return "";
   }
-}, ei = {
+}, ii = {
   convertTo: (i, t, e, n) => {
     (i.type === "data-grid-column" || i.type === "tree-grid-column") && (i[t] = e, t === "columnTemplateType" && e === "hyperlink" && (i.onClickLinkCommand ? i.columnTemplate = `
     <span class="f-pretend-link f-cursor-pointer"
@@ -2554,34 +2601,34 @@ const Bt = {
     </span>` : i.columnTemplate = `
                     <span class="f-pretend-link f-cursor-pointer">
                     {{rowData.${i.field}}}
-                    </span>`), t === "columnTemplateType" && e === "default" && (i.columnTemplate = ""));
+                    </span>`), t === "columnTemplateType" && e === "default" && (i.columnTemplate = ""), t === "columnTemplateType" && e === "custom" && (i.columnTemplate = ""));
   },
   convertFrom: (i, t, e) => t === "columnTemplate" ? i.columnTemplate : t === "columnTemplateType" ? i.columnTemplateType ? i.columnTemplateType || "default" : i.columnTemplate && !i.onClickLinkCommand ? "custom" : i.columnTemplate && i.onClickLinkCommand ? "hyperlink" : "default" : ""
 };
-function Fe(i, t, e) {
+function we(i, t, e) {
   const n = /* @__PURE__ */ new Map([
-    ["/converter/appearance.converter", Bt],
-    ["/converter/buttons.converter", Ot],
-    ["/converter/property-editor.converter", Nt],
-    ["/converter/items-count.converter", _t],
-    ["/converter/type.converter", Ut],
-    ["/converter/change-editor.converter", Rt],
-    ["/converter/change-formatter.converter", At],
-    ["/converter/column-command.converter", $t],
-    ["/converter/column-option.converter", jt],
-    ["/converter/summary.converter", qt],
-    ["/converter/group.converter", Wt],
-    ["/converter/form-group-label.converter", Xt],
-    ["/converter/field-selector.converter", Gt],
-    ["/converter/pagination.converter", Dt],
-    ["/converter/row-number.converter", zt],
-    ["/converter/grid-selection.converter", Qt],
-    ["/converter/size.converter", Jt],
-    ["/converter/change-formatter-enum.converter", Yt],
-    ["/converter/grid-sort.converter", Zt],
-    ["/converter/grid-filter.converter", Ht],
-    ["/converter/row-option.converter", Kt],
-    ["/converter/change-formatter-type.converter", ei]
+    ["/converter/appearance.converter", Ot],
+    ["/converter/buttons.converter", Lt],
+    ["/converter/property-editor.converter", Ut],
+    ["/converter/items-count.converter", Jt],
+    ["/converter/type.converter", At],
+    ["/converter/change-editor.converter", $t],
+    ["/converter/change-formatter.converter", jt],
+    ["/converter/column-command.converter", Wt],
+    ["/converter/column-option.converter", qt],
+    ["/converter/summary.converter", Gt],
+    ["/converter/group.converter", zt],
+    ["/converter/form-group-label.converter", Ht],
+    ["/converter/field-selector.converter", Dt],
+    ["/converter/pagination.converter", Qt],
+    ["/converter/row-number.converter", _t],
+    ["/converter/grid-selection.converter", Xt],
+    ["/converter/size.converter", Yt],
+    ["/converter/change-formatter-enum.converter", Zt],
+    ["/converter/grid-sort.converter", Kt],
+    ["/converter/grid-filter.converter", ei],
+    ["/converter/row-option.converter", ti],
+    ["/converter/change-formatter-type.converter", ii]
   ]), r = /* @__PURE__ */ new Map([
     ["string", { type: "input-group", enableClear: !1 }],
     ["boolean", {
@@ -2606,76 +2653,76 @@ function Fe(i, t, e) {
     ["array", { type: "button-edit" }],
     ["number", { type: "number-spinner", placeholder: "" }],
     ["events-editor", { type: "events-editor", hide: !0 }]
-  ]), s = Pt();
-  function l(a, p) {
-    return () => s.parseValueSchema(a, p);
+  ]), l = Nt();
+  function s(a, p) {
+    return () => l.parseValueSchema(a, p);
   }
   function m(a, p, v) {
-    return a.includes("visible") && p.visible !== void 0 ? typeof p.visible == "boolean" ? () => !!p.visible : p.visible === void 0 ? !0 : l(p.visible, v) : () => !0;
+    return a.includes("visible") && p.visible !== void 0 ? typeof p.visible == "boolean" ? () => !!p.visible : p.visible === void 0 ? !0 : s(p.visible, v) : () => !0;
   }
   function c(a, p, v) {
-    return a.includes("readonly") && p.readonly !== void 0 ? typeof p.readonly == "boolean" ? () => !!p.readonly : l(p.readonly, v) : () => !1;
+    return a.includes("readonly") && p.readonly !== void 0 ? typeof p.readonly == "boolean" ? () => !!p.readonly : s(p.readonly, v) : () => !1;
   }
   function u(a, p) {
     const v = a.$converter || p;
     return typeof v == "string" && v && n.has(v) ? n.get(v) || null : v || null;
   }
-  function f(a, p, v, y, C, k = "", E = "") {
-    return Object.keys(a).map((M) => {
-      const V = I(1), O = M, F = a[M], N = Object.keys(F), R = F.title, w = F.type, T = r.get(w) || { type: "input-group", enableClear: !1 }, B = F.editor ? Object.assign({}, T, F.editor) : Object.assign({}, T), L = m(N, F, p), P = c(N, F, p);
+  function f(a, p, v, y, w, T = "", V = "") {
+    return Object.keys(a).map((k) => {
+      const N = I(1), L = k, b = a[k], S = Object.keys(b), O = b.title, F = b.type, E = r.get(F) || { type: "input-group", enableClear: !1 }, B = b.editor ? Object.assign({}, E, b.editor) : Object.assign({}, E), R = m(S, b, p), P = c(S, b, p);
       B.readonly = B.readonly === void 0 ? P() : B.readonly;
-      const j = F.type === "cascade" ? f(F.properties, p, v, y, C, k, E) : [], ke = !0;
-      let A = u(F, E);
+      const A = b.type === "cascade" ? f(b.properties, p, v, y, w, T, V) : [], Pe = !0;
+      let $ = u(b, V);
       const Ve = U({
         get() {
-          if (V.value) {
-            if (["class", "style"].find((Le) => Le === O) && !A && (A = n.get("/converter/appearance.converter") || null), A && A.convertFrom)
-              return A.convertFrom(v, M, C, k);
-            const $ = v[M];
-            return Object.prototype.hasOwnProperty.call(F, "defaultValue") && ($ === void 0 || typeof $ == "string" && $ === "") ? F.type === "boolean" ? F.defaultValue : F.defaultValue || "" : $;
+          if (N.value) {
+            if (["class", "style"].find((Ue) => Ue === L) && !$ && ($ = n.get("/converter/appearance.converter") || null), $ && $.convertFrom)
+              return $.convertFrom(v, k, w, T);
+            const j = v[k];
+            return Object.prototype.hasOwnProperty.call(b, "defaultValue") && (j === void 0 || typeof j == "string" && j === "") ? b.type === "boolean" ? b.defaultValue : b.defaultValue || "" : j;
           }
           return null;
         },
-        set($) {
-          V.value += 1, A && A.convertTo ? (A.convertTo(y, M, $, C, k), A.convertTo(v, M, $, C, k)) : (y[M] = $, v[M] = $);
+        set(j) {
+          N.value += 1, $ && $.convertTo ? ($.convertTo(y, k, j, w, T), $.convertTo(v, k, j, w, T)) : (y[k] = j, v[k] = j);
         }
-      }), { refreshPanelAfterChanged: Pe, description: Be, isExpand: Oe, parentPropertyID: Ne } = F, K = { propertyID: O, propertyName: R, propertyType: w, propertyValue: Ve, editor: B, visible: L, readonly: P, cascadeConfig: j, hideCascadeTitle: ke, refreshPanelAfterChanged: Pe, description: Be, isExpand: Oe, parentPropertyID: Ne };
-      return p[O] = K, K;
+      }), { refreshPanelAfterChanged: Be, description: Ne, isExpand: Oe, parentPropertyID: Le } = b, te = { propertyID: L, propertyName: O, propertyType: F, propertyValue: Ve, editor: B, visible: R, readonly: P, cascadeConfig: A, hideCascadeTitle: Pe, refreshPanelAfterChanged: Be, description: Ne, isExpand: Oe, parentPropertyID: Le };
+      return p[L] = te, te;
     });
   }
   function o(a, p, v = {}) {
-    const y = {}, C = i[a];
-    return C && C.categories ? Object.keys(C.categories).map((E) => {
-      const S = C.categories[E], M = S == null ? void 0 : S.title, V = f(S.properties || {}, y, {}, v, p);
-      return { categoryId: E, categoryName: M, properties: V };
+    const y = {}, w = i[a];
+    return w && w.categories ? Object.keys(w.categories).map((V) => {
+      const M = w.categories[V], k = M == null ? void 0 : M.title, N = f(M.properties || {}, y, {}, v, p);
+      return { categoryId: V, categoryName: k, properties: N };
     }) : [];
   }
-  function d(a, p, v, y, C = "") {
-    const k = p.$ref.schema, E = p.$ref.converter, S = v[k], M = S.type, V = e(S), O = {}, F = i[M];
-    if (F && F.categories) {
-      const N = F.categories[a], R = N == null ? void 0 : N.title;
-      E && Object.keys(N.properties).forEach((B) => {
-        N.properties[B].$converter = E;
+  function d(a, p, v, y, w = "") {
+    const T = p.$ref.schema, V = p.$ref.converter, M = v[T], k = M.type, N = e(M), L = {}, b = i[k];
+    if (b && b.categories) {
+      const S = b.categories[a], O = S == null ? void 0 : S.title;
+      V && Object.keys(S.properties).forEach((B) => {
+        S.properties[B].$converter = V;
       });
-      const w = (N == null ? void 0 : N.properties) || {}, T = f(w, O, V, S, y, C);
-      return { categoryId: a, categoryName: R, properties: T };
+      const F = (S == null ? void 0 : S.properties) || {}, E = f(F, L, N, M, y, w);
+      return { categoryId: a, categoryName: O, properties: E };
     }
     return { categoryId: a, categoryName: "", properties: [] };
   }
-  function g(a, p, v, y, C) {
-    const k = a.type, E = e(a), S = {};
-    let M = C || i[k];
-    if (M && Object.keys(M).length === 0 && v && v.getPropConfig && (M = v.getPropConfig(y)), M && M.categories) {
-      const V = [];
-      return Object.keys(M.categories).map((O) => {
-        const F = M.categories[O];
-        if (F.$ref) {
-          V.push(d(O, F, a, p, y));
+  function g(a, p, v, y, w) {
+    const T = a.type, V = e(a), M = {};
+    let k = w || i[T];
+    if (k && Object.keys(k).length === 0 && v && v.getPropConfig && (k = v.getPropConfig(y)), k && k.categories) {
+      const N = [];
+      return Object.keys(k.categories).map((L) => {
+        const b = k.categories[L];
+        if (b.$ref) {
+          N.push(d(L, b, a, p, y));
           return;
         }
-        const N = F == null ? void 0 : F.title, R = F == null ? void 0 : F.tabId, w = F == null ? void 0 : F.tabName, T = F == null ? void 0 : F.hide, B = F == null ? void 0 : F.hideTitle, L = f(F.properties || {}, S, E, a, p, y, F.$converter), { setPropertyRelates: P } = F, j = F == null ? void 0 : F.parentPropertyID;
-        V.push({ categoryId: O, categoryName: N, tabId: R, tabName: w, hide: T, properties: L, hideTitle: B, setPropertyRelates: P, parentPropertyID: j });
-      }), V;
+        const S = b == null ? void 0 : b.title, O = b == null ? void 0 : b.tabId, F = b == null ? void 0 : b.tabName, E = b == null ? void 0 : b.hide, B = b == null ? void 0 : b.hideTitle, R = f(b.properties || {}, M, V, a, p, y, b.$converter), { setPropertyRelates: P } = b, A = b == null ? void 0 : b.parentPropertyID;
+        N.push({ categoryId: L, categoryName: S, tabId: O, tabName: F, hide: E, properties: R, hideTitle: B, setPropertyRelates: P, parentPropertyID: A });
+      }), N;
     }
     return [];
   }
@@ -2685,91 +2732,97 @@ function Fe(i, t, e) {
     propertyConverterMap: n
   };
 }
-const we = {}, Ie = {};
-Fe(we, Ie, Tt);
-const Ee = {}, Se = {}, { resolveSchemaWithDefaultValue: ti } = ye(Ee, Se), xe = {}, Me = {};
-Fe(xe, Me, ti);
-function ii(i, t, e = /* @__PURE__ */ new Map(), n = (l, m, c, u) => m, r = {}, s = (l) => l) {
-  return be[t.title] = t, Ce[t.title] = n, we[t.title] = r, Ie[t.title] = s, Ee[t.title] = t, Se[t.title] = n, xe[t.title] = r, Me[t.title] = s, (l = {}, m = !0) => {
+const Ie = {}, Ee = {};
+we(Ie, Ee, Pt);
+const Se = {}, xe = {}, { resolveSchemaWithDefaultValue: ni } = be(Se, xe), Me = {}, Te = {};
+we(Me, Te, ni);
+function ri(i, t, e = /* @__PURE__ */ new Map(), n = (s, m, c, u) => m, r = {}, l = (s) => s) {
+  return Ce[t.title] = t, Fe[t.title] = n, Ie[t.title] = r, Ee[t.title] = l, Se[t.title] = t, xe[t.title] = n, Me[t.title] = r, Te[t.title] = l, (s = {}, m = !0) => {
     if (!m)
-      return Vt(l, e);
-    const c = kt(l, t, e), u = Object.keys(i).reduce((f, o) => (f[o] = i[o].default, f), {});
+      return Bt(s, e);
+    const c = Vt(s, t, e), u = Object.keys(i).reduce((f, o) => (f[o] = i[o].default, f), {});
     return Object.assign(u, c);
   };
 }
-const Te = Object.assign({}, H, {
+const ke = Object.assign({}, ee, {
   componentId: { type: String, default: "" }
-}), ni = ii(Te, me, fe, pe), ri = /* @__PURE__ */ z({
+}), oi = ri(ke, ge, pe, me), li = /* @__PURE__ */ D({
   name: "FFilterBarDesign",
-  props: Te,
+  props: ke,
   emits: ["Clear", "Remove", "Reset"],
   setup(i, t) {
-    const e = I(!1), n = I(!1), r = I(!1), s = I(null), l = I(null), m = yt(i), {
+    const e = I(!1), n = I(!1), r = I(!1), l = I(null), s = I(null), m = Ct(i), {
       filterFields: c,
       filterItems: u,
       loadFilterItems: f
-    } = m, o = I(), d = Q("design-item-context"), g = Q("designer-host-service"), a = Mt(d, g), p = We(o, d, a), v = ve(l, s, r), {
-      setupWidthObserver: y
-    } = v, {
-      resolveEditorProps: C
-    } = ue();
-    oe("useFilterItemsComposition", {
+    } = m, o = I(0), d = I(), g = Q("design-item-context"), a = Q("designer-host-service"), p = kt(g, a), v = ze(d, g, p), y = he(s, l, r), {
+      setupWidthObserver: w
+    } = y, {
+      resolveEditorProps: T
+    } = fe();
+    se("useFilterItemsComposition", {
       useFilterItemsComposition: m,
-      resolveEditorProps: C
+      resolveEditorProps: T
     });
-    const k = U(() => ({
-      display: c.value && c.value.length ? "" : "none"
-    }));
-    le(() => {
-      o.value.componentInstance = p, y();
-    }), t.expose(p.value), se([() => i.fields], ([w]) => {
-      f(w, []);
+    const V = U(() => {
+      const E = {
+        display: c.value && c.value.length ? "" : "none"
+      };
+      return de(E, i == null ? void 0 : i.customStyle);
+    });
+    H(() => {
+      d.value.componentInstance = v, w();
+    }), t.expose(v.value), ae(() => i.fields, (E) => {
+      f(E, []), o.value++;
+    }, {
+      immediate: !0
     });
-    const E = U(() => n.value && e.value), S = U(() => ({
+    const M = U(() => n.value && e.value), k = U(() => ({
       "f-filter-list": !0,
-      "f-filter-list-extend": E.value
-    })), M = U(() => u.value.length > 0);
-    function V() {
-      return b("div", {
-        class: S.value,
-        ref: s
-      }, [u.value.map((w, T) => b(Ct, {
-        filterItem: w
+      "f-filter-list-extend": M.value
+    })), N = U(() => u.value.length > 0);
+    function L() {
+      return C("div", {
+        class: k.value,
+        ref: l
+      }, [u.value.map((E, B) => C(wt, {
+        filterItem: E
       }, null))]);
     }
-    const O = U(() => !n.value && r.value);
-    function F() {
-      return b("div", {
+    const b = U(() => !n.value && r.value);
+    function S() {
+      return C("div", {
         class: "f-filter-list-ellipsis"
-      }, [q("...")]);
+      }, [W("...")]);
     }
-    const N = U(() => !n.value), R = bt(i, t, m);
-    return () => b("div", {
-      ref: o,
-      class: "f-filter-wrapper",
-      style: k.value
-    }, [b("div", {
+    const O = U(() => !n.value), F = Ft(i, t, m);
+    return () => C("div", {
+      ref: d,
+      class: "f-filter-wrapper " + i.customClass,
+      style: V.value
+    }, [C("div", {
       class: "f-filter-wrapper-inner f-utils-fill"
-    }, [b("div", {
+    }, [C("div", {
       class: "f-filter-main f-utils-fill",
-      ref: l
-    }, [b("div", {
-      class: "f-filter-list-wrapper"
-    }, [M.value && V()]), O.value && F(), N.value && R()])])]);
+      ref: s
+    }, [C("div", {
+      class: "f-filter-list-wrapper",
+      key: i.id + "-main-" + o.value
+    }, [N.value && L()]), b.value && S(), O.value && F()])])]);
   }
 });
 G.install = (i) => {
   i.component(G.name, G);
 };
 G.register = (i, t, e, n) => {
-  i["filter-bar"] = G, t["filter-bar"] = at;
+  i["filter-bar"] = G, t["filter-bar"] = ct;
 };
 G.registerDesigner = (i, t, e) => {
-  i["filter-bar"] = ri, t["filter-bar"] = ni;
+  i["filter-bar"] = li, t["filter-bar"] = oi;
 };
 export {
   G as FFilterBar,
   G as default,
-  H as filterBarProps,
-  at as propsResolver
+  ee as filterBarProps,
+  ct as propsResolver
 };