@farris/ui-vue 1.7.1 → 1.7.2-beta.2

package/components/combo-list/index.esm.js

@@ -1,17 +1,16 @@
-import { defineComponent as H, ref as p, computed as I, watch as B, onMounted as q, createVNode as L, inject as G } from "vue";
-import D from "../button-edit/index.esm.js";
+import { defineComponent as $, ref as y, computed as B, watch as L, onMounted as q, createVNode as E, inject as N } from "vue";
+import _ from "../button-edit/index.esm.js";
 import { LocaleService as U } from "../locale/index.esm.js";
-import { resolveAppearance as ee, createPropsResolver as W, getPropsResolverGenerator as te } from "../dynamic-resolver/index.esm.js";
+import { resolveAppearance as D, createPropsResolver as ee, getPropsResolverGenerator as te } from "../dynamic-resolver/index.esm.js";
 import { isUndefined as ie } from "lodash-es";
 import le from "../list-view/index.esm.js";
 import ne from "../../designer/button-edit/index.esm.js";
 import { useDesignerComponent as ae } from "../designer-canvas/index.esm.js";
-import { comboListProps as J } from "../combo-list/index.esm.js";
-import { FormSchemaEntityFieldType$Type as oe, withInstall as de } from "../common/index.esm.js";
-import { InputBaseProperty as re } from "../property-panel/index.esm.js";
-const A = /* @__PURE__ */ new Map([
-  ["appearance", ee]
-]), ue = "https://json-schema.org/draft/2020-12/schema", se = "https://farris-design.gitee.io/combo-list.schema.json", ce = "combo-list", fe = "A Farris Input Component", me = "object", he = {
+import { FormSchemaEntityFieldType$Type as H, withInstall as oe } from "../common/index.esm.js";
+import { InputBaseProperty as de } from "../property-panel/index.esm.js";
+const W = /* @__PURE__ */ new Map([
+  ["appearance", D]
+]), re = "https://json-schema.org/draft/2020-12/schema", ue = "https://farris-design.gitee.io/combo-list.schema.json", ce = "combo-list", se = "A Farris Input Component", fe = "object", me = {
   id: {
     description: "The unique identifier for a combo list",
     type: "string"
@@ -102,6 +101,10 @@ const A = /* @__PURE__ */ new Map([
     description: "",
     type: "array"
   },
+  dataSource: {
+    description: "",
+    type: "string"
+  },
   remote: {
     description: "",
     type: "string"
@@ -209,42 +212,47 @@ const A = /* @__PURE__ */ new Map([
     description: "清空事件",
     type: "string",
     default: ""
+  },
+  onDataChanged: {
+    description: "清空事件",
+    type: "string",
+    default: ""
   }
-}, ge = [
+}, he = [
   "type"
-], ve = [
+], ge = [
   "id",
   "appearance",
   "binding",
   "visible"
-], be = {
+], ve = {
   onClear: "清空事件",
   onChange: "值变化事件",
   beforeOpen: "打开下拉面板前事件"
-}, $ = {
-  $schema: ue,
-  $id: se,
+}, j = {
+  $schema: re,
+  $id: ue,
   title: ce,
-  description: fe,
-  type: me,
-  properties: he,
-  required: ge,
-  ignore: ve,
-  events: be
+  description: se,
+  type: fe,
+  properties: me,
+  required: he,
+  ignore: ge,
+  events: ve
 };
-function N(e, t, n) {
+function J(e, t, n) {
   return t;
 }
 function ye() {
-  function e(t, n, l) {
+  function e(t, n, a) {
     const o = {};
-    return o.beforeOpen = (d) => n.call("beforeOpen", t, [d, t], l), o;
+    return o.beforeOpen = (c) => n.call("beforeOpen", t, [c, t], a), o;
   }
   return {
     resolve: e
   };
 }
-var pe = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.auto = "auto", e))(pe || {});
+var be = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.auto = "auto", e))(be || {});
 const k = {
   /**
    * 组件标识
@@ -414,14 +422,14 @@ const k = {
   enableHighlightSearch: { type: Boolean, default: !0 },
   minPanelWidth: { type: Number, default: 160 },
   popupOnClick: { type: Boolean, default: !0 }
-}, Ne = Object.assign({}, k, {
+}, Se = Object.assign({}, k, {
   readonly: {}
-}), Ge = W(k, $, A, N), z = te(
+}), He = ee(k, j, W, J), z = te(
   k,
-  $,
-  A,
-  N
-), Ce = ye(), Se = {
+  j,
+  W,
+  J
+), Ce = ye(), pe = {
   dataSource: { type: Array, default: [] },
   enableSearch: { type: Boolean, default: !1 },
   idField: { type: String, default: "id" },
@@ -442,308 +450,304 @@ const k = {
   },
   // 搜索启用高亮
   enableHighlightSearch: { type: Boolean, default: !0 }
-}, Fe = /* @__PURE__ */ H({
+}, Fe = /* @__PURE__ */ $({
   name: "FComboListContainer",
-  props: Se,
+  props: pe,
   emits: ["selectionChange"],
   setup(e, t) {
-    const n = p(), l = p(e.dataSource), o = p([]), d = p(e.separator), f = p(e.width), r = p(e.maxHeight), m = I(() => e.multiSelect), b = p(e.multiSelect ? String(e.selectedValues).split(d.value) : [e.selectedValues]), x = I(() => ({
+    const n = y(), a = y(e.dataSource), o = y([]), c = y(e.separator), g = y(e.width), F = y(e.maxHeight), C = B(() => e.multiSelect), v = y(e.multiSelect ? String(e.selectedValues).split(c.value) : [e.selectedValues]), p = B(() => ({
       enableSelectRow: !0,
       multiSelect: e.multiSelect,
       multiSelectMode: "OnCheckAndClick",
-      showCheckbox: m.value,
+      showCheckbox: C.value,
       showSelectAll: !1,
       showSelection: !0
     }));
-    B(e.dataSource, () => {
-      l.value = e.dataSource;
-    }), I(() => e.enableSearch ? "SearchBar" : "ContentHeader");
-    const s = I(() => {
+    L(e.dataSource, () => {
+      a.value = e.dataSource;
+    }), B(() => e.enableSearch ? "SearchBar" : "ContentHeader");
+    const s = B(() => {
       const i = {};
-      return f.value !== void 0 && (i.width = `${f.value}px`), r.value !== void 0 && r.value > 0 && (i.maxHeight = `${r.value}px`), i;
+      return g.value !== void 0 && (i.width = `${g.value}px`), F.value !== void 0 && F.value > 0 && (i.maxHeight = `${F.value}px`), i;
     });
-    function h(i) {
+    function S(i) {
       n.value.search(i);
     }
-    function y(i) {
-      o.value = i.map((c) => Object.assign({}, c)), b.value = i.map((c) => c[e.idField]), t.emit("selectionChange", o.value);
+    function V(i) {
+      o.value = i.map((l) => Object.assign({}, l)), v.value = i.map((l) => l[e.idField]), t.emit("selectionChange", o.value);
     }
-    function P(i) {
+    function T(i) {
       if (e.enableHighlightSearch)
         return;
-      let c = [];
+      let l = [];
       const {
-        searchOption: g
+        searchOption: r
       } = e;
-      typeof g == "function" ? c = l.value.filter((S) => g(i, S)) : c = l.value.filter((S) => S[e.valueField].indexOf(i) > -1 || S[e.textField].indexOf(i) > -1), n.value.updateDataSource(c);
+      typeof r == "function" ? l = a.value.filter((f) => r(i, f)) : l = a.value.filter((f) => f[e.valueField].indexOf(i) > -1 || f[e.textField].indexOf(i) > -1), n.value.updateDataSource(l);
     }
-    B([() => e.selectedValues], ([i]) => {
-      e.multiSelect ? b.value = i.split(d.value) : b.value = [i];
+    L([() => e.selectedValues], ([i]) => {
+      e.multiSelect ? v.value = i.split(c.value) : v.value = [i];
     });
-    function a(i) {
+    function P(i) {
       n.value.activeRowById(i);
     }
     return q(() => {
-      var i, c;
+      var i, l;
       if (!e.multiSelect) {
-        const g = (i = b.value) == null ? void 0 : i[0];
-        let S = g;
-        const F = l.value.map((v) => v[e.valueField || e.idField]);
-        if (!ie(g) && F.includes(g)) {
-          const v = typeof g, w = typeof ((c = l.value[0]) == null ? void 0 : c[e.valueField || e.idField]);
-          w === "number" && v !== w && (S = Number(g)), w === "boolean" && v !== w && (S = g === "true" ? !0 : g === "false" ? !1 : g), a(S);
+        const r = (i = v.value) == null ? void 0 : i[0];
+        let f = r;
+        const h = a.value.map((d) => d[e.valueField || e.idField]);
+        if (!ie(r) && h.includes(r)) {
+          const d = typeof r, u = typeof ((l = a.value[0]) == null ? void 0 : l[e.valueField || e.idField]);
+          u === "number" && d !== u && (f = Number(r)), u === "boolean" && d !== u && (f = r === "true" ? !0 : r === "false" ? !1 : r), P(f);
         }
       }
     }), t.expose({
-      search: h,
-      activeRowById: a
-    }), () => L("div", {
+      search: S,
+      activeRowById: P
+    }), () => E("div", {
       class: "f-combo-list-container",
       style: s.value
-    }, [L(le, {
+    }, [E(le, {
       ref: n,
       size: "small",
       itemClass: "f-combo-list-item",
       itemContentClass: "text-truncate",
       header: "ContentHeader",
       headerClass: "f-combo-list-search-box",
-      data: l.value,
+      data: a.value,
       idField: e.idField,
       textField: e.textField,
       titleField: e.titleField,
       multiSelect: e.multiSelect,
-      selection: x.value,
+      selection: p.value,
       enableHighlightSearch: e.enableHighlightSearch,
-      selectionValues: b.value,
-      onSelectionUpdate: y,
-      onAfterSearch: P
+      selectionValues: v.value,
+      onSelectionUpdate: V,
+      onAfterSearch: T
     }, null)]);
   }
 });
-function xe(e) {
-  const t = p(""), n = p(e.modelValue), l = p(e.data || []), o = p(e.editable);
-  function d(a) {
-    const i = e.multiSelect ? String(a).split(e.separator) : [String(a)], c = i.map((F) => [F, !0]), g = new Map(c);
-    return l.value.filter((F) => g.has(String(F[e.valueField]))).sort((F, v) => {
-      const w = i.indexOf(F[e.valueField]), T = i.indexOf(v[e.valueField]);
-      return w - T;
+function Ve(e, t) {
+  const n = y(""), a = y(e.modelValue), o = y(e.data || []), c = y(e.editable);
+  function g(i) {
+    const l = e.multiSelect ? String(i).split(e.separator) : [String(i)], r = l.map((d) => [d, !0]), f = new Map(r);
+    return o.value.filter((d) => f.has(String(d[e.valueField]))).sort((d, u) => {
+      const x = l.indexOf(d[e.valueField]), I = l.indexOf(u[e.valueField]);
+      return x - I;
     });
   }
-  function f(a) {
-    const i = d(a).map((c) => c[e.textField]).join(e.separator);
-    t.value = o.value ? i || a : i;
+  function F(i) {
+    const l = g(i).map((r) => r[e.textField]).join(e.separator);
+    n.value = c.value ? l || i : l;
   }
-  function r(a) {
+  function C(i) {
     if (e.multiSelect) {
-      const i = a.split(e.separator).map((g) => [g, !0]), c = new Map(i);
-      return l.value.filter((g) => c.has(g[e.textField]));
+      const l = i.split(e.separator).map((f) => [f, !0]), r = new Map(l);
+      return o.value.filter((f) => r.has(f[e.textField]));
     }
-    return l.value.filter((i) => "" + i[e.textField] === a);
+    return o.value.filter((l) => "" + l[e.textField] === i);
   }
-  function m(a) {
-    const i = {};
-    return i[e.idField] = a, i[e.textField] = a, [i];
+  function v(i) {
+    const l = {};
+    return l[e.idField] = i, l[e.textField] = i, [l];
   }
-  function b(a) {
-    let i = r(a);
-    const c = i && i.length > 0;
-    return o.value && !c && (i = m(a)), i;
+  function p(i) {
+    let l = C(i);
+    const r = l && l.length > 0;
+    return c.value && !r && (l = v(i)), l;
   }
-  function x() {
-    const { url: a, method: i = "GET", headers: c = { "Content-Type": "application/json;charset=utf-8;" }, body: g = null } = e.remote;
-    if (!a)
+  function s() {
+    const { url: i, method: l = "GET", headers: r = { "Content-Type": "application/json;charset=utf-8;" }, body: f = null } = e.remote;
+    if (!i)
       return;
-    const S = i.toLowerCase() === "get" ? { method: i, headers: c } : { method: i, headers: c, body: g };
-    let F = !1;
-    fetch(new Request(a, S)).then((v) => {
-      var T, O;
-      if (v.status === 200)
-        return F = !!((O = (T = v.headers) == null ? void 0 : T.get("content-type")) != null && O.includes("application/json")), F ? v.text() : v.json();
-      throw v.status === 405 ? new Error(U.getLocaleValue("comboList.remoteError")) : new Error(v.statusText);
-    }).then((v) => {
-      v.length && (l.value = F ? JSON.parse(v) : v);
-    }).catch((v) => {
-      console.warn(v);
+    const h = l.toLowerCase() === "get" ? { method: l, headers: r } : { method: l, headers: r, body: f };
+    let d = !1;
+    fetch(new Request(i, h)).then((u) => {
+      var I, R;
+      if (u.status === 200)
+        return d = !!((R = (I = u.headers) == null ? void 0 : I.get("content-type")) != null && R.includes("application/json")), d ? u.text() : u.json();
+      throw u.status === 405 ? new Error(U.getLocaleValue("comboList.remoteError")) : new Error(u.statusText);
+    }).then((u) => {
+      u.length && (o.value = d ? JSON.parse(u) : u);
+    }).catch((u) => {
+      console.warn(u);
     });
   }
-  e.remote && (e.load ? e.load().then((a) => {
-    l.value = a;
-  }).catch((a) => {
-    console.log(a);
-  }) : x()), B(() => e.data, () => {
-    l.value = e.data;
-  }), B([l], ([a]) => {
-    if (e.modelValue != null) {
-      const i = a.find((c) => c[e.valueField] === e.modelValue);
-      i && (t.value = i[e.textField]);
+  e.remote && (e.load ? e.load().then((i) => {
+    o.value = i;
+  }).catch((i) => {
+    console.log(i);
+  }) : s()), L(() => e.data, () => {
+    o.value = e.data;
+  }), L([o], ([i], [l]) => {
+    if (e.modelValue != null && !e.multiSelect) {
+      const r = i.find((f) => f[e.valueField] === a.value);
+      r ? r[e.valueField] !== a.value ? (a.value = r[e.valueField], n.value = r[e.textField], t.emit("update:modelValue", r[e.valueField]), t.emit("change", [r], r[e.valueField])) : n.value !== r[e.textField] && (n.value = r[e.textField]) : a.value !== "" && (a.value = "", n.value = "", t.emit("update:modelValue", ""), t.emit("change", [], ""));
     }
-  }), B(() => e.modelValue, (a) => {
-    n.value = a, f(a);
+  }), L(() => e.modelValue, (i, l) => {
+    l !== i && (a.value = i, F(i));
   });
-  function s(a) {
-    l.value = a;
+  function S(i) {
+    o.value = i, t.emit("dataChanged", i);
   }
-  function h() {
-    return l.value;
+  function V() {
+    return o.value;
   }
-  function y() {
-    return t.value;
+  function T() {
+    return n.value;
   }
   function P() {
-    const a = typeof e.beforeOpen == "function";
-    return !e.beforeOpen || !a ? Promise.resolve(!0) : Promise.resolve().then(() => e.beforeOpen({ instance: { updateDataSource: s, getData: h, getDisplayText: y } })).then((i) => typeof (i == null ? void 0 : i.canOpen) == "boolean" ? i == null ? void 0 : i.canOpen : !0);
+    const i = typeof e.beforeOpen == "function";
+    return !e.beforeOpen || !i ? Promise.resolve(!0) : Promise.resolve().then(() => e.beforeOpen({ instance: { updateDataSource: S, getData: V, getDisplayText: T } })).then((l) => typeof (l == null ? void 0 : l.canOpen) == "boolean" ? l == null ? void 0 : l.canOpen : !0);
   }
-  return f(e.modelValue), {
-    dataSource: l,
-    displayText: t,
-    editable: o,
-    modelValue: n,
+  return F(e.modelValue), {
+    dataSource: o,
+    displayText: n,
+    editable: c,
+    modelValue: a,
     beforeOpenList: P,
-    getItemsByDisplayText: r,
-    getItemsByValue: d,
-    getSelectedItemsByDisplayText: b
+    getItemsByDisplayText: C,
+    getItemsByValue: g,
+    getSelectedItemsByDisplayText: p
   };
 }
-const E = /* @__PURE__ */ H({
+const M = /* @__PURE__ */ $({
   name: "FComboList",
   props: k,
-  emits: ["clear", "update:modelValue", "change", "input"],
+  emits: ["clear", "update:modelValue", "change", "input", "dataChanged"],
   setup(e, t) {
-    const n = p(), l = p(), o = p(e.disabled || e.readonly), d = p(e.enableClear), f = p(e.enableSearch), r = p(e.readonly), {
-      dataSource: m,
-      displayText: b,
-      editable: x,
+    const n = y(), a = y(), o = y(e.disabled || e.readonly), c = y(e.enableClear), g = y(e.enableSearch), F = y(e.readonly), {
+      dataSource: C,
+      displayText: v,
+      editable: p,
       modelValue: s,
-      getItemsByDisplayText: h,
-      getItemsByValue: y,
-      beforeOpenList: P
-    } = xe(e), a = p(e.dropDownIcon);
-    a.value === '<span class="f-icon f-icon-arrow-chevron-down"></span>' && (a.value = '<span id="' + e.id + '-icon-dropdown" class="f-icon f-icon-arrow-chevron-down"></span>');
-    const i = I(() => e.multiSelect), c = I(() => l.value ? l.value.elementRef.getBoundingClientRect().width : 0);
-    function g() {
-      !i.value && l.value && l.value.hidePopup();
+      getItemsByDisplayText: S,
+      getItemsByValue: V,
+      beforeOpenList: T
+    } = Ve(e, t), P = y(e.dropDownIcon);
+    P.value === '<span class="f-icon f-icon-arrow-chevron-down"></span>' && (P.value = '<span id="' + e.id + '-icon-dropdown" class="f-icon f-icon-arrow-chevron-down"></span>');
+    const i = B(() => e.multiSelect), l = B(() => a.value ? a.value.elementRef.getBoundingClientRect().width : 0);
+    function r() {
+      !i.value && a.value && a.value.hidePopup();
     }
-    function S(u) {
-      b.value = u.map((V) => V[e.textField]).join(e.separator) || s.value;
-      let C = "";
-      u.length === 1 ? C = u[0][e.valueField] : C = u.map((V) => V[e.valueField]).join(e.separator), s.value !== C && (s.value = C, t.emit("update:modelValue", s.value), t.emit("change", u, s.value));
+    function f(m) {
+      v.value = m.map((w) => w[e.textField]).join(e.separator) || s.value;
+      let b = "";
+      m.length === 1 ? b = m[0][e.valueField] : b = m.map((w) => w[e.valueField]).join(e.separator), s.value !== b && (s.value = b, t.emit("update:modelValue", s.value), t.emit("change", m, s.value));
     }
-    function F() {
-      const u = y(s.value);
-      S(u);
+    function h() {
+      const m = V(s.value);
+      f(m);
     }
-    function v() {
-      r.value || b.value;
+    function d() {
+      F.value || v.value;
     }
-    function w(u) {
-      var C;
-      s.value = "", (C = n.value) == null || C.activeRowById(""), t.emit("clear");
+    function u(m) {
+      var b;
+      s.value = "", (b = n.value) == null || b.activeRowById(""), t.emit("clear");
     }
-    function T(u) {
-      var C, V;
-      e.enableSearch && e.enableHighlightSearch && ((C = n.value) == null || C.search(u)), (V = n.value) == null || V.activeRowById(u), t.emit("change", [s.value], s.value);
+    function x(m) {
+      var b, w;
+      e.enableSearch && e.enableHighlightSearch && ((b = n.value) == null || b.search(m)), (w = n.value) == null || w.activeRowById(m), t.emit("change", [s.value], s.value);
     }
-    function O(u) {
+    function I(m) {
       if (e.multiSelect) {
-        const C = h(u);
+        const b = S(m);
         e.viewType;
-        const R = C.map((M) => M[e.idField || e.valueField]).join(e.separator);
-        s.value !== R && (s.value = R, t.emit("update:modelValue", s.value), t.emit("change", C, s.value));
-      } else u !== s.value && (s.value = u, t.emit("update:modelValue", s.value), t.emit("change", [], u));
+        const O = b.map((A) => A[e.idField || e.valueField]).join(e.separator);
+        s.value !== O && (s.value = O, t.emit("update:modelValue", s.value), t.emit("change", b, s.value));
+      } else m !== s.value && (s.value = m, t.emit("update:modelValue", s.value), t.emit("change", [], m));
     }
-    function K() {
-      return b.value;
+    function R() {
+      return v.value;
     }
-    function Q(u) {
+    function K(m) {
       const {
-        value: C
-      } = u.target;
-      T(C), t.emit("input", C);
+        value: b
+      } = m.target;
+      x(b), t.emit("input", b);
     }
-    function X() {
-      l.value.hidePopup();
+    function Q() {
+      a.value.hidePopup();
     }
-    function Y(u) {
-      m.value = u;
+    function X(m) {
+      C.value = m;
     }
-    function Z() {
-      return m.value;
+    function Y() {
+      return C.value;
     }
-    const _ = {
-      getDisplayText: K,
-      hidePopup: X,
-      updateDataSource: Y,
-      getData: Z
+    const Z = {
+      getDisplayText: R,
+      hidePopup: Q,
+      updateDataSource: X,
+      getData: Y
     };
-    return t.expose(_), B([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([u, C, V, R, M]) => {
-      o.value = u, x.value = C, d.value = V, f.value = R, r.value = M;
-    }), () => L(D, {
-      ref: l,
+    return t.expose(Z), L([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([m, b, w, O, A]) => {
+      o.value = m, p.value = b, c.value = w, g.value = O, F.value = A;
+    }), () => E(_, {
+      ref: a,
       id: e.id,
       disable: o.value,
-      readonly: r.value,
+      readonly: F.value,
       forcePlaceholder: e.forcePlaceholder,
-      editable: x.value,
-      buttonContent: a.value,
+      editable: p.value,
+      buttonContent: P.value,
       placeholder: e.placeholder === "请选择" ? U.getLocaleValue("comboList.placeholder") : e.placeholder,
-      enableClear: d.value,
+      enableClear: c.value,
       maxLength: e.maxLength,
       tabIndex: e.tabIndex,
       enableTitle: e.enableTitle,
       multiSelect: e.multiSelect,
       inputType: e.multiSelect ? e.viewType : "text",
-      modelValue: b.value,
-      "onUpdate:modelValue": (u) => b.value = u,
+      modelValue: v.value,
+      "onUpdate:modelValue": (m) => v.value = m,
       focusOnCreated: e.focusOnCreated,
       selectOnCreated: e.selectOnCreated,
-      onClear: w,
-      onClick: v,
-      onChange: O,
-      onBlur: F,
-      onInput: Q,
-      beforeOpen: P,
+      onClear: u,
+      onClick: d,
+      onChange: I,
+      onBlur: h,
+      onInput: K,
+      beforeOpen: T,
       placement: e.placement,
       popupMinWidth: e.minPanelWidth,
       popupClass: "f-combo-list-wrapper",
       popupOnClick: e.popupOnClick,
       limitContentBySpace: !0
     }, {
-      default: () => [L(Fe, {
+      default: () => [E(Fe, {
         ref: n,
         idField: e.idField,
         valueField: e.valueField,
         textField: e.textField,
         titleField: e.titleField,
-        dataSource: m.value,
+        dataSource: C.value,
         selectedValues: s.value,
         separator: e.separator,
         multiSelect: e.multiSelect,
-        enableSearch: f.value,
+        enableSearch: g.value,
         maxHeight: e.maxHeight,
         enableHighlightSearch: e.enableHighlightSearch,
-        width: e.fitEditor ? c.value : void 0,
-        onSelectionChange: (u) => {
-          S(u), g();
+        width: e.fitEditor ? l.value : void 0,
+        onSelectionChange: (m) => {
+          f(m), r();
         }
       }, null)]
     });
   }
-}), we = Object.assign({}, J, {
-  readonly: {}
-});
-W(J, $, A, N);
-const j = {
+}), G = {
   convertFrom: (e, t) => (e.editor.remote || {})[t],
   convertTo: (e, t, n) => {
     e.editor.remote = e.editor.remote || {}, e.editor.remote[t] = n;
   }
 };
-class Ve extends re {
+class Pe extends de {
   constructor(t, n) {
     super(t, n);
   }
   getCommonEditorProperties(t) {
-    var n, l, o;
+    var n, a, o;
     return {
       viewType: {
         visible: !!((n = t.editor) != null && n.multiSelect),
@@ -759,7 +763,7 @@ class Ve extends re {
         refreshPanelAfterChanged: !0
       },
       separator: {
-        visible: !!((l = t.editor) != null && l.multiSelect) && ((o = t.editor) == null ? void 0 : o.viewType) === "text",
+        visible: !!((a = t.editor) != null && a.multiSelect) && ((o = t.editor) == null ? void 0 : o.viewType) === "text",
         description: "下拉列表启用多选且数据展示类型为文本时的分隔符",
         title: "分隔符",
         type: "enum",
@@ -789,13 +793,14 @@ class Ve extends re {
     };
   }
   getEditorProperties(t) {
-    var d, f;
+    var C, v, p, s, S, V, T, P, i, l, r, f;
     const n = this;
-    let l = "";
-    if (((d = t == null ? void 0 : t.binding) == null ? void 0 : d.type) === "Form") {
-      const r = this.schemaService.getFieldByIDAndVMID(t.binding.field, this.viewModelId);
-      (f = r == null ? void 0 : r.schemaField) != null && f.type && (l = r.schemaField.type.$type);
+    let a = "";
+    if (((C = t == null ? void 0 : t.binding) == null ? void 0 : C.type) === "Form") {
+      const h = this.schemaService.getFieldByIDAndVMID(t.binding.field, this.viewModelId);
+      (v = h == null ? void 0 : h.schemaField) != null && v.type && (a = h.schemaField.type.$type);
     }
+    const o = this.getPropertyEditorParams(t, ["Variable"]), c = !t.editor.dataSourceType || t.editor.dataSourceType === "static", g = ((s = (p = this.designViewModelField) == null ? void 0 : p.type) == null ? void 0 : s.$type) === H.StringType && ((S = t.editor) == null ? void 0 : S.type) === "combo-list" && ((V = t.editor) == null ? void 0 : V.dataSourceType) === "dynamic" && !((P = (T = t.editor) == null ? void 0 : T.remote) != null && P.url) && !((i = t.editor) != null && i.multiSelect);
     return n.getComponentConfig(t, { type: "combo-list" }, {
       // enableSearch: {
       //     description: "编辑状态下启用搜索",
@@ -820,21 +825,33 @@ class Ve extends re {
         },
         refreshPanelAfterChanged: !0
       },
+      dataSource: {
+        description: "动态数据源绑定变量",
+        visible: g,
+        title: "数据",
+        editor: {
+          ...o,
+          controlName: "",
+          enableClear: !0
+        },
+        refreshPanelAfterChanged: !0
+      },
       data: {
         description: "",
         title: "数据",
         type: "array",
-        visible: !t.editor.dataSourceType || t.editor.dataSourceType === "static",
+        visible: c,
         ...n.getItemCollectionEditor(t, t.editor.valueField, t.editor.textField),
         // 这个属性，标记当属性变更得时候触发重新更新属性
         refreshPanelAfterChanged: !0
       },
       url: {
-        visible: t.editor.dataSourceType === "dynamic",
-        $converter: j,
+        visible: t.editor.dataSourceType === "dynamic" && !((l = t.editor) != null && l.dataSource),
+        $converter: G,
         description: "",
         title: "服务端API",
-        type: "string"
+        type: "string",
+        refreshPanelAfterChanged: !0
       },
       // method: {
       //     visible: propertyData.editor.dataSourceType === "dynamic",
@@ -853,7 +870,7 @@ class Ve extends re {
       // },
       body: {
         visible: !1,
-        $converter: j,
+        $converter: G,
         description: "",
         title: "服务端API参数",
         type: "string"
@@ -873,7 +890,8 @@ class Ve extends re {
       multiSelect: {
         description: "",
         title: "启用多选",
-        visible: !l || l === "StringType",
+        visible: !a || a === "StringType",
+        readonly: ((r = t.editor) == null ? void 0 : r.dataSourceType) === "dynamic" && !!((f = t.editor) != null && f.dataSource),
         type: "boolean",
         refreshPanelAfterChanged: !0
       },
@@ -889,33 +907,38 @@ class Ve extends re {
         }
       },
       ...this.getCommonEditorProperties(t)
-    }, (r, m) => {
-      if (!r || !m.editor)
+    }, (h, d) => {
+      if (!h || !d.editor)
         return;
-      const b = this;
-      switch (r.propertyID) {
+      const u = this;
+      switch (h.propertyID) {
         case "dataSourceType": {
-          r.propertyValue === "static" ? (m.editor.valueField = "value", m.editor.textField = "name", m.editor.remote = null) : r.propertyValue === "dynamic" && (m.editor.remote = { method: "GET" }, m.editor.valueField = "value", m.editor.textField = "name");
+          h.propertyValue === "static" ? (d.editor.valueField = "value", d.editor.textField = "name", d.editor.remote = null) : h.propertyValue === "dynamic" && (d.editor.remote = { method: "GET" }, d.editor.valueField = "value", d.editor.textField = "name");
           break;
         }
         case "data": {
-          !b.checkEnumDataReadonly(m) && m.formatter && (m.formatter.data = [...r.propertyValue]);
+          !u.checkEnumDataReadonly(d) && d.formatter && (d.formatter.data = [...h.propertyValue]);
+          break;
+        }
+        case "viewType": {
+          h.propertyValue === "tag" && (d.editor.editable = !1);
           break;
         }
-        case "viewType":
-          r.propertyValue === "tag" && (m.editor.editable = !1);
+        case "dataSource":
+          u.afterMutilEditorChanged(d, h);
       }
     });
   }
   getGridFieldEdtiorProperties(t, n) {
-    var f, r, m, b, x, s;
-    const l = this;
+    var C, v, p, s, S, V, T, P, i, l, r, f, h;
+    const a = this;
     let o = "";
-    if (((f = t == null ? void 0 : t.binding) == null ? void 0 : f.type) === "Form") {
-      const h = this.schemaService.getFieldByIDAndVMID(t.binding.field, this.viewModelId);
-      (r = h == null ? void 0 : h.schemaField) != null && r.type && (o = h.schemaField.type.$type);
+    if (((C = t == null ? void 0 : t.binding) == null ? void 0 : C.type) === "Form") {
+      const d = this.schemaService.getFieldByIDAndVMID(t.binding.field, this.viewModelId);
+      (v = d == null ? void 0 : d.schemaField) != null && v.type && (o = d.schemaField.type.$type);
     }
-    return l.getComponentConfig(t, { type: "combo-list" }, {
+    const c = ((s = (p = this.designViewModelField) == null ? void 0 : p.type) == null ? void 0 : s.$type) === H.StringType && ((S = t.editor) == null ? void 0 : S.type) === "combo-list" && ((V = t.editor) == null ? void 0 : V.dataSourceType) === "dynamic" && !((T = t.editor) != null && T.multiSelect), g = this.getPropertyEditorParams(t, ["Variable"]);
+    return a.getComponentConfig(t, { type: "combo-list" }, {
       // editable: {
       //     description: "",
       //     title: "允许编辑",
@@ -927,25 +950,36 @@ class Ve extends re {
         title: "启用清空",
         type: "boolean"
       },
-      // dataSourceType: {
-      //     description: "",
-      //     title: "数据源类型",
-      //     type: "enum",
-      //     editor: {
-      //         default: "static",
-      //         data: [
-      //             { id: "static", name: "静态" },
-      //             { id: "dynamic", name: "动态" }
-      //         ]
-      //     },
-      //     refreshPanelAfterChanged: true
-      // },
+      dataSourceType: {
+        description: "",
+        title: "数据源类型",
+        type: "enum",
+        editor: {
+          default: "static",
+          data: [
+            { id: "static", name: "静态" },
+            { id: "dynamic", name: "动态" }
+          ]
+        },
+        refreshPanelAfterChanged: !0
+      },
+      dataSource: {
+        description: "动态数据源绑定变量",
+        visible: c,
+        title: "数据",
+        editor: {
+          ...g,
+          controlName: "",
+          enableClear: !0
+        },
+        refreshPanelAfterChanged: !0
+      },
       data: {
         description: "",
         title: "数据",
         type: "array",
-        visible: !((m = t.editor) != null && m.dataSourceType) || ((b = t.editor) == null ? void 0 : b.dataSourceType) === "static",
-        ...l.getItemCollectionEditor(t, (x = t.editor) == null ? void 0 : x.valueField, (s = t.editor) == null ? void 0 : s.textField),
+        visible: !((P = t.editor) != null && P.dataSourceType) || ((i = t.editor) == null ? void 0 : i.dataSourceType) === "static",
+        ...a.getItemCollectionEditor(t, (l = t.editor) == null ? void 0 : l.valueField, (r = t.editor) == null ? void 0 : r.textField),
         // 这个属性，标记当属性变更得时候触发重新更新属性
         refreshPanelAfterChanged: !0
       },
@@ -965,6 +999,7 @@ class Ve extends re {
         description: "",
         title: "启用多选",
         visible: o === "StringType",
+        readonly: ((f = t.editor) == null ? void 0 : f.dataSourceType) === "dynamic" && !!((h = t.editor) != null && h.dataSource),
         type: "boolean",
         refreshPanelAfterChanged: !0
       },
@@ -980,23 +1015,25 @@ class Ve extends re {
         }
       },
       ...this.getCommonEditorProperties(t)
-    }, (h, y) => {
-      if (!h || !y.editor)
+    }, (d, u) => {
+      if (!d || !u.editor)
         return;
-      const P = this;
-      switch (h.propertyID) {
+      const x = this;
+      switch (d.propertyID) {
         case "dataSourceType": {
-          h.propertyValue === "static" ? (y.editor.valueField = "value", y.editor.textField = "name", y.editor.remote = null) : h.propertyValue === "dynamic" && (y.editor.remote = { method: "GET" }, y.editor.valueField = "value", y.editor.textField = "name");
+          d.propertyValue === "static" ? (u.editor.valueField = "value", u.editor.textField = "name", u.editor.remote = null) : d.propertyValue === "dynamic" && (u.editor.remote = { method: "GET" }, u.editor.valueField = "value", u.editor.textField = "name");
           break;
         }
         case "data": {
-          !P.checkEnumDataReadonly(y) && y.formatter && (y.formatter.data = [...h.propertyValue]);
+          !x.checkEnumDataReadonly(u) && u.formatter && (u.formatter.data = [...d.propertyValue]);
           break;
         }
+        case "dataSource":
+          x.afterMutilEditorChanged(u, d);
       }
     });
   }
-  setEditorPropertyRelates(t, n, l) {
+  setEditorPropertyRelates(t, n, a) {
     if (!t || !n.editor)
       return;
     const o = this;
@@ -1014,11 +1051,11 @@ class Ve extends re {
   /**
    * 切换绑定属性 
    */
-  changeBindingField(t, n, l) {
-    var d;
+  changeBindingField(t, n, a) {
+    var c;
     super.changeBindingField(t, n);
-    const o = l;
-    t.editor && ((d = o == null ? void 0 : o.type) == null ? void 0 : d.$type) === oe.EnumType && (t.editor.data = o.type.enumValues || []);
+    const o = a;
+    t.editor && ((c = o == null ? void 0 : o.type) == null ? void 0 : c.$type) === H.EnumType && (t.editor.data = o.type.enumValues || []);
   }
   /**
   * 组装输入类控件的交互面板：包含标签超链、绑定字段值变化前后事件等。
@@ -1027,9 +1064,9 @@ class Ve extends re {
   * @param showPosition 面板展示位置
   * @param customEvent 输入控件特有的事件配置
   */
-  getEventPropertyConfig(t, n = "card", l, o) {
-    const d = this;
-    let f = [
+  getEventPropertyConfig(t, n = "card", a, o) {
+    const c = this;
+    let g = [
       {
         label: "onChange",
         name: "值变化事件"
@@ -1043,41 +1080,41 @@ class Ve extends re {
         name: "下拉面板前事件"
       }
     ];
-    l && (f = f.concat(l)), this.appendFieldValueChangeEvents(t, f);
-    const r = d.eventsEditorUtils.formProperties(t, d.viewModelId, f);
+    a && (g = g.concat(a)), this.appendFieldValueChangeEvents(t, g);
+    const F = c.eventsEditorUtils.formProperties(t, c.viewModelId, g);
     return {
       title: "事件",
       hideTitle: !0,
-      properties: d.createBaseEventProperty(r),
+      properties: c.createBaseEventProperty(F),
       tabId: "commands",
       tabName: "交互",
-      setPropertyRelates(x, s) {
-        const h = x.propertyValue;
-        delete t[d.viewModelId], h && (h.setPropertyRelates = this.setPropertyRelates, d.eventsEditorUtils.saveRelatedParameters(t, d.viewModelId, h.events, h)), o && o(x, s, h);
-        const y = d.designViewModelUtils.getDgViewModel(d.viewModelId);
-        y && d.designViewModelField && y.changeField(d.designViewModelField.id, { valueChanging: t.fieldValueChanging, valueChanged: t.fieldValueChanged }), t.editor.beforeOpen !== t.beforeOpen && (t.editor.beforeOpen = t.beforeOpen), t.editor.onChange !== t.onChange && (t.editor.onChange = t.onChange), t.editor.onClear !== t.onClear && (t.editor.onClear = t.onClear);
+      setPropertyRelates(p, s) {
+        const S = p.propertyValue;
+        delete t[c.viewModelId], S && (S.setPropertyRelates = this.setPropertyRelates, c.eventsEditorUtils.saveRelatedParameters(t, c.viewModelId, S.events, S)), o && o(p, s, S);
+        const V = c.designViewModelUtils.getDgViewModel(c.viewModelId);
+        V && c.designViewModelField && V.changeField(c.designViewModelField.id, { valueChanging: t.fieldValueChanging, valueChanged: t.fieldValueChanged }), t.editor.beforeOpen !== t.beforeOpen && (t.editor.beforeOpen = t.beforeOpen), t.editor.onChange !== t.onChange && (t.editor.onChange = t.onChange), t.editor.onClear !== t.onClear && (t.editor.onClear = t.onClear);
       }
     };
   }
 }
-function Pe(e, t) {
+function Te(e, t) {
   const n = e.schema;
-  function l(o, d) {
-    return new Ve(o, t).getPropertyConfig(n, d);
+  function a(o, c) {
+    return new Pe(o, t).getPropertyConfig(n, c);
   }
   return {
-    getPropsConfig: l
+    getPropsConfig: a
   };
 }
-const Te = /* @__PURE__ */ H({
+const we = /* @__PURE__ */ $({
   name: "FComboListDesign",
-  props: we,
+  props: Se,
   emits: ["clear", "update:modelValue", "change"],
   setup(e, t) {
-    const n = p(), l = G("designer-host-service"), o = G("design-item-context"), d = Pe(o, l), f = ae(n, o, d);
+    const n = y(), a = N("designer-host-service"), o = N("design-item-context"), c = Te(o, a), g = ae(n, o, c);
     return q(() => {
-      n.value.componentInstance = f;
-    }), t.expose(f.value), () => L(ne, {
+      n.value.componentInstance = g;
+    }), t.expose(g.value), () => E(ne, {
       ref: n,
       buttonContent: e.dropDownIcon,
       readonly: !0,
@@ -1088,22 +1125,22 @@ const Te = /* @__PURE__ */ H({
     }, null);
   }
 });
-E.register = (e, t, n, l, o) => {
-  e["combo-list"] = E, t["combo-list"] = z(o), l["combo-list"] = { callbackResolver: Ce };
+M.register = (e, t, n, a, o) => {
+  e["combo-list"] = M, t["combo-list"] = z(o), a["combo-list"] = { callbackResolver: Ce };
 };
-E.registerDesigner = (e, t, n, l) => {
-  e["combo-list"] = Te, t["combo-list"] = z(l);
+M.registerDesigner = (e, t, n, a) => {
+  e["combo-list"] = we, t["combo-list"] = z(a);
 };
-const je = de(E);
+const $e = oe(M);
 export {
-  E as FComboList,
+  M as FComboList,
   Fe as FComboListContainer,
-  pe as Placement,
+  be as Placement,
   Ce as callbackResolver,
-  Ne as comboListDesignProps,
+  Se as comboListDesignProps,
   k as comboListProps,
-  je as default,
-  Ge as propsResolver,
+  $e as default,
+  He as propsResolver,
   z as propsResolverGenerator,
-  xe as useDataSource
+  Ve as useDataSource
 };