@farris/ui-vue/components/combo-list/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as $, ref as v, 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 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 { FormSchemaEntityFieldType$Type as M, 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]
]), ue = "https://json-schema.org/draft/2020-12/schema", re = "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"
  },
  type: {
    description: "The type string of number combo list component",
    type: "string",
    default: "combo-list"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disabled: {
    description: "",
    type: "boolean",
    default: !1
  },
  enableClear: {
    description: "",
    type: "boolean",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !1
  },
  enableLinkLabel: {
    description: "",
    type: "boolean",
    default: !1
  },
  label: {
    description: "",
    type: "string",
    default: ""
  },
  lableWidth: {
    description: "",
    type: "number"
  },
  placeholder: {
    description: "",
    type: "string",
    default: "请选择"
  },
  idField: {
    description: "",
    type: "string",
    default: "id"
  },
  valueField: {
    description: "",
    type: "string",
    default: "id"
  },
  titleField: {
    description: "",
    type: "string",
    default: "name"
  },
  textField: {
    description: "",
    type: "string",
    default: "name"
  },
  dataSourceType: {
    description: "",
    type: "string",
    default: "static"
  },
  data: {
    description: "",
    type: "array"
  },
  dataSource: {
    description: "",
    type: "string"
  },
  remote: {
    description: "",
    type: "string"
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  required: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  textAlign: {
    description: "",
    type: "string",
    enum: [
      "left",
      "middle",
      "right"
    ],
    default: "left"
  },
  multiSelect: {
    description: "",
    type: "boolean",
    default: !1
  },
  maxLength: {
    description: "",
    type: "number",
    default: null
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  onBlur: {
    description: "",
    type: "string",
    default: ""
  },
  onClickLinkLabel: {
    description: "",
    type: "string",
    default: ""
  },
  maxHeight: {
    description: "",
    type: "number",
    default: 350
  },
  minPanelWidth: {
    description: "",
    type: "number",
    default: 160
  },
  popupOnClick: {
    description: "",
    type: "boolean",
    default: !0
  },
  separator: {
    description: "",
    type: "string",
    default: ","
  },
  viewType: {
    description: "",
    type: "string",
    default: "tag"
  },
  enableSearch: {
    description: "启用搜索",
    type: "boolean",
    default: !0
  },
  enableHighlightSearch: {
    description: "启用高亮搜索",
    type: "boolean",
    default: !1
  },
  beforeOpen: {
    description: "打卡面板前回调",
    type: "string"
  },
  onChange: {
    description: "值变化事件",
    type: "string",
    default: ""
  },
  onInput: {
    description: "输入事件",
    type: "string",
    default: ""
  },
  onClear: {
    description: "清空事件",
    type: "string",
    default: ""
  },
  onDataChanged: {
    description: "清空事件",
    type: "string",
    default: ""
  }
}, he = [
  "type"
], ge = [
  "id",
  "appearance",
  "binding",
  "visible"
], ve = {
  onClear: "清空事件",
  onChange: "值变化事件",
  beforeOpen: "打开下拉面板前事件"
}, j = {
  $schema: ue,
  $id: re,
  title: ce,
  description: se,
  type: fe,
  properties: me,
  required: he,
  ignore: ge,
  events: ve
};
function J(e, t, n) {
  return t;
}
function ye() {
  function e(t, n, a) {
    const d = {};
    return d.beforeOpen = (c) => n.call("beforeOpen", t, [c, t], a), d;
  }
  return {
    resolve: e
  };
}
var be = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.auto = "auto", e))(be || {});
const A = {
  /**
   * 组件标识
   */
  id: { type: String },
  /**
   * 下拉数据源
   */
  data: { type: Array, default: [] },
  /**
   * 可选，展示文本
   * 默认为空字符串 -----内部需要根据value重新生成展示文本，此属性不生效
   * displayText: { type: String, default: '' },
  */
  /**
   * 可选，是否禁用
   * 默认为`false`
   */
  disabled: { default: !1, type: Boolean },
  /**
   * 可选，下拉图标
   * 默认为'<span class="f-icon f-icon-arrow-60-down"></span>'
   */
  dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-chevron-down"></span>' },
  /**
   * 可选，是否可编辑
   * 默认`false`
   */
  editable: { default: !1, type: Boolean },
  /**
   * 可选，是否启用清空
   * 默认启用
   */
  enableClear: { default: !0, type: Boolean },
  /**
   * 可选，启用搜索
   * 默认为`false`
   */
  enableSearch: { type: Boolean, default: !1 },
  /**
   * 可选，鼠标悬停时是否显示控件值
   * 默认显示
   */
  enableTitle: { default: !0, type: Boolean },
  fitEditor: { default: !1, type: Boolean },
  /**
   * 可选，强制显示占位符
   * 默认`false`
   */
  forcePlaceholder: { default: !1, type: Boolean },
  /**
   * 可选，清空值时隐藏面板
   * 默认`true`
   */
  hidePanelOnClear: { default: !0, type: Boolean },
  /**
   * 可选，数据源id字段
   * 默认为`id`
   */
  idField: { default: "id", type: String },
  /**
   * 可选，字段映射
   */
  mapFields: { type: Object },
  /**
   * 可选，最大高度
   * 默认`350`
   */
  maxHeight: { default: 350, type: Number },
  /**
   * 最大输入长度
   */
  maxLength: { type: Number },
  /**
   * 可选，是否支持多选
   * 默认`false`
   */
  multiSelect: { type: Boolean, default: !1 },
  /**
   * 绑定值
   */
  modelValue: {},
  /**
   * 占位符
   */
  placeholder: { type: String, default: "请选择" },
  /**
   * 可选，下拉面板展示位置
   * 默认为`auto`
   */
  placement: {
    type: String,
    default: "auto"
    /* auto */
  },
  /**
   * 可选，是否只读
   * 默认为`false`
   */
  readonly: { default: !1, type: Boolean },
  /**
   * 远端数据源信息
   */
  remote: { default: null, type: Object },
  /**
   * 可选，是否支持远端过滤
   * 默认`false`
   */
  remoteSearch: { default: !1, type: Boolean },
  /**
   * 可选，分隔符
   * 默认`,`
   */
  separator: { default: ",", type: String },
  /**
   * tabIndex
   */
  tabIndex: { type: Number, default: -1 },
  /**
   * 可选，数据源显示字段
   * 默认为`name`
   */
  textField: { default: "name", type: String },
  /**
   * 可选，数据源的title
   * 默认为`name`
   */
  titleField: { default: "name", type: String },
  /**
   * 可选，数据源值字段
   * 默认为`id`
   */
  valueField: { default: "id", type: String },
  /**
   * 可选，启用多选下，下拉列表值在输入框中的展示方式
   * 支持text | tag
   * 因为ButtonEdit内部处理类型只有在批量的情况下才会有展示类型区分
   */
  viewType: { default: "tag", type: String },
  /**
   * 值变化事件
   */
  change: { type: Function, default: () => {
  } },
  /**
   * 作为内嵌编辑器被创建后默认获得焦点
   */
  focusOnCreated: { type: Boolean, default: !1 },
  /**
   * 作为内嵌编辑器被创建后默认选中文本
   */
  selectOnCreated: { type: Boolean, default: !1 },
  /**
   * 此属性废弃
   */
  autoHeight: { type: Boolean, default: !0 },
  /**
   * 打开前
   */
  beforeOpen: { type: Function, default: null },
  load: { type: Function },
  searchOption: {
    type: [Boolean, Function],
    default: !1
  },
  // 搜索启用高亮
  enableHighlightSearch: { type: Boolean, default: !0 },
  minPanelWidth: { type: Number, default: 160 },
  popupOnClick: { type: Boolean, default: !0 }
}, Se = Object.assign({}, A, {
  readonly: {}
}), He = ee(A, j, W, J), z = te(
  A,
  j,
  W,
  J
), Ce = ye(), pe = {
  dataSource: { type: Array, default: [] },
  enableSearch: { type: Boolean, default: !1 },
  idField: { type: String, default: "id" },
  multiSelect: { type: Boolean, default: !1 },
  selectedValues: { type: String, default: "" },
  separator: { type: String, default: "," },
  textField: { type: String, default: "name" },
  titleField: { type: String, default: "name" },
  width: { type: Number },
  maxHeight: { type: Number },
  valueField: { type: String, default: "id" },
  /** 值变化事件 */
  onSelectionChange: { type: Function, default: () => {
  } },
  searchOption: {
    type: [Boolean, Function],
    default: !1
  },
  // 搜索启用高亮
  enableHighlightSearch: { type: Boolean, default: !0 }
}, Fe = /* @__PURE__ */ $({
  name: "FComboListContainer",
  props: pe,
  emits: ["selectionChange"],
  setup(e, t) {
    const n = v(), a = v(e.dataSource), d = v([]), c = v(e.separator), h = v(e.width), C = v(e.maxHeight), p = B(() => e.multiSelect), g = v(e.multiSelect ? String(e.selectedValues).split(c.value) : [e.selectedValues]), S = B(() => ({
      enableSelectRow: !0,
      multiSelect: e.multiSelect,
      multiSelectMode: "OnCheckAndClick",
      showCheckbox: p.value,
      showSelectAll: !1,
      showSelection: !0
    }));
    L(e.dataSource, () => {
      a.value = e.dataSource;
    }), B(() => e.enableSearch ? "SearchBar" : "ContentHeader");
    const s = B(() => {
      const i = {};
      return h.value !== void 0 && (i.width = `${h.value}px`), C.value !== void 0 && C.value > 0 && (i.maxHeight = `${C.value}px`), i;
    });
    function y(i) {
      n.value.search(i);
    }
    function F(i) {
      d.value = i.map((l) => Object.assign({}, l)), g.value = i.map((l) => l[e.idField]), t.emit("selectionChange", d.value);
    }
    function P(i) {
      if (e.enableHighlightSearch)
        return;
      let l = [];
      const {
        searchOption: r
      } = e;
      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);
    }
    L([() => e.selectedValues], ([i]) => {
      e.multiSelect ? g.value = i.split(c.value) : g.value = [i];
    });
    function V(i) {
      n.value.activeRowById(i);
    }
    return q(() => {
      var i, l;
      if (!e.multiSelect) {
        const r = (i = g.value) == null ? void 0 : i[0];
        let f = r;
        const T = a.value.map((u) => u[e.valueField || e.idField]);
        if (!ie(r) && T.includes(r)) {
          const u = typeof r, o = typeof ((l = a.value[0]) == null ? void 0 : l[e.valueField || e.idField]);
          o === "number" && u !== o && (f = Number(r)), o === "boolean" && u !== o && (f = r === "true" ? !0 : r === "false" ? !1 : r), V(f);
        }
      }
    }), t.expose({
      search: y,
      activeRowById: V
    }), () => E("div", {
      class: "f-combo-list-container",
      style: s.value
    }, [E(le, {
      ref: n,
      size: "small",
      itemClass: "f-combo-list-item",
      itemContentClass: "text-truncate",
      header: "ContentHeader",
      headerClass: "f-combo-list-search-box",
      data: a.value,
      idField: e.idField,
      textField: e.textField,
      titleField: e.titleField,
      multiSelect: e.multiSelect,
      selection: S.value,
      enableHighlightSearch: e.enableHighlightSearch,
      selectionValues: g.value,
      onSelectionUpdate: F,
      onAfterSearch: P
    }, null)]);
  }
});
function Ve(e, t) {
  const n = v(""), a = v(e.modelValue), d = v(e.data || []), c = v(e.editable);
  function h(i) {
    const l = e.multiSelect ? String(i).split(e.separator) : [String(i)], r = l.map((u) => [u, !0]), f = new Map(r);
    return d.value.filter((u) => f.has(String(u[e.valueField]))).sort((u, o) => {
      const w = l.indexOf(u[e.valueField]), I = l.indexOf(o[e.valueField]);
      return w - I;
    });
  }
  function C(i) {
    const l = h(i).map((r) => r[e.textField]).join(e.separator);
    n.value = c.value ? l || i : l;
  }
  function p(i) {
    if (e.multiSelect) {
      const l = i.split(e.separator).map((f) => [f, !0]), r = new Map(l);
      return d.value.filter((f) => r.has(f[e.textField]));
    }
    return d.value.filter((l) => "" + l[e.textField] === i);
  }
  function g(i) {
    const l = {};
    return l[e.idField] = i, l[e.textField] = i, [l];
  }
  function S(i) {
    let l = p(i);
    const r = l && l.length > 0;
    return c.value && !r && (l = g(i)), l;
  }
  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 T = l.toLowerCase() === "get" ? { method: l, headers: r } : { method: l, headers: r, body: f };
    let u = !1;
    fetch(new Request(i, T)).then((o) => {
      var I, R;
      if (o.status === 200)
        return u = !!((R = (I = o.headers) == null ? void 0 : I.get("content-type")) != null && R.includes("application/json")), u ? o.text() : o.json();
      throw o.status === 405 ? new Error(U.getLocaleValue("comboList.remoteError")) : new Error(o.statusText);
    }).then((o) => {
      o.length && (d.value = u ? JSON.parse(o) : o, a.value && C(a.value));
    }).catch((o) => {
      console.warn(o);
    });
  }
  e.remote && (e.load ? e.load().then((i) => {
    d.value = i;
  }).catch((i) => {
    console.log(i);
  }) : s()), L(() => e.data, () => {
    d.value = e.data;
  }), L([d], ([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", [], ""));
    }
  }), L(() => e.modelValue, (i, l) => {
    l !== i && (a.value = i, C(i));
  });
  function y(i) {
    d.value = i, t.emit("dataChanged", i);
  }
  function F() {
    return d.value;
  }
  function P() {
    return n.value;
  }
  function V() {
    const i = typeof e.beforeOpen == "function";
    return !e.beforeOpen || !i ? Promise.resolve(!0) : Promise.resolve().then(() => e.beforeOpen({ instance: { updateDataSource: y, getData: F, getDisplayText: P } })).then((l) => typeof (l == null ? void 0 : l.canOpen) == "boolean" ? l == null ? void 0 : l.canOpen : !0);
  }
  return C(e.modelValue), {
    dataSource: d,
    displayText: n,
    editable: c,
    modelValue: a,
    beforeOpenList: V,
    getItemsByDisplayText: p,
    getItemsByValue: h,
    getSelectedItemsByDisplayText: S
  };
}
const k = /* @__PURE__ */ $({
  name: "FComboList",
  props: A,
  emits: ["clear", "update:modelValue", "change", "input", "dataChanged"],
  setup(e, t) {
    const n = v(), a = v(), d = v(e.disabled || e.readonly), c = v(e.enableClear), h = v(e.enableSearch), C = v(e.readonly), {
      dataSource: p,
      displayText: g,
      editable: S,
      modelValue: s,
      getItemsByDisplayText: y,
      getItemsByValue: F,
      beforeOpenList: P
    } = Ve(e, t), V = v(e.dropDownIcon);
    V.value === '<span class="f-icon f-icon-arrow-chevron-down"></span>' && (V.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 f(m) {
      g.value = m.map((x) => x[e.textField]).join(e.separator) || s.value;
      let b = "";
      m.length === 1 ? b = m[0][e.valueField] : b = m.map((x) => x[e.valueField]).join(e.separator), s.value !== b && (s.value = b, t.emit("update:modelValue", s.value), t.emit("change", m, s.value));
    }
    function T() {
      const m = F(s.value);
      f(m);
    }
    function u() {
      C.value || g.value;
    }
    function o(m) {
      var b;
      s.value = "", (b = n.value) == null || b.activeRowById(""), t.emit("clear");
    }
    function w(m) {
      var b, x;
      e.enableSearch && e.enableHighlightSearch && ((b = n.value) == null || b.search(m)), (x = n.value) == null || x.activeRowById(m), t.emit("change", [s.value], s.value);
    }
    function I(m) {
      if (e.multiSelect) {
        const b = y(m);
        e.viewType;
        const O = b.map((H) => H[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 R() {
      return g.value;
    }
    function K(m) {
      const {
        value: b
      } = m.target;
      w(b), t.emit("input", b);
    }
    function Q() {
      a.value.hidePopup();
    }
    function X(m) {
      p.value = m;
    }
    function Y() {
      return p.value;
    }
    const Z = {
      getDisplayText: R,
      hidePopup: Q,
      updateDataSource: X,
      getData: Y
    };
    return t.expose(Z), L([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([m, b, x, O, H]) => {
      d.value = m, S.value = b, c.value = x, h.value = O, C.value = H;
    }), () => E(_, {
      ref: a,
      id: e.id,
      disable: d.value,
      readonly: C.value,
      forcePlaceholder: e.forcePlaceholder,
      editable: S.value,
      buttonContent: V.value,
      placeholder: e.placeholder === "请选择" ? U.getLocaleValue("comboList.placeholder") : e.placeholder,
      enableClear: c.value,
      maxLength: e.maxLength,
      tabIndex: e.tabIndex,
      enableTitle: e.enableTitle,
      multiSelect: e.multiSelect,
      inputType: e.multiSelect ? e.viewType : "text",
      modelValue: g.value,
      "onUpdate:modelValue": (m) => g.value = m,
      focusOnCreated: e.focusOnCreated,
      selectOnCreated: e.selectOnCreated,
      onClear: o,
      onClick: u,
      onChange: I,
      onBlur: T,
      onInput: K,
      beforeOpen: P,
      placement: e.placement,
      popupMinWidth: e.minPanelWidth,
      popupClass: "f-combo-list-wrapper",
      popupOnClick: e.popupOnClick,
      limitContentBySpace: !0
    }, {
      default: () => [E(Fe, {
        ref: n,
        idField: e.idField,
        valueField: e.valueField,
        textField: e.textField,
        titleField: e.titleField,
        dataSource: p.value,
        selectedValues: s.value,
        separator: e.separator,
        multiSelect: e.multiSelect,
        enableSearch: h.value,
        maxHeight: e.maxHeight,
        enableHighlightSearch: e.enableHighlightSearch,
        width: e.fitEditor ? l.value : void 0,
        onSelectionChange: (m) => {
          f(m), r();
        }
      }, null)]
    });
  }
}), G = {
  convertFrom: (e, t) => (e.editor.remote || {})[t],
  convertTo: (e, t, n) => {
    e.editor.remote = e.editor.remote || {}, e.editor.remote[t] = n;
  }
};
class Te extends de {
  constructor(t, n) {
    super(t, n);
  }
  getCommonEditorProperties(t) {
    var n, a, d;
    return {
      viewType: {
        visible: !!((n = t.editor) != null && n.multiSelect),
        description: "数据展示类型，有标签和文本两种方式",
        title: "数据展示类型",
        type: "enum",
        editor: {
          data: [
            { id: "tag", name: "标签" },
            { id: "text", name: "文本" }
          ]
        },
        refreshPanelAfterChanged: !0
      },
      separator: {
        visible: !!((a = t.editor) != null && a.multiSelect) && ((d = t.editor) == null ? void 0 : d.viewType) === "text",
        description: "下拉列表启用多选且数据展示类型为文本时的分隔符",
        title: "分隔符",
        type: "enum",
        editor: {
          data: [
            { id: ",", name: "逗号（,）" },
            { id: "#", name: "井号（#）" },
            { id: ".", name: "句号（.）" },
            { id: "|", name: "竖线（|）" }
          ]
        }
      },
      editable: {
        description: "",
        title: "允许编辑",
        type: "boolean",
        refreshPanelAfterChanged: !0,
        readonly: !0
        // readonly: !!propertyData.editor?.multiSelect && (propertyData.editor?.viewType === 'tag' || !propertyData.editor!.viewType)
      }
      // enableHighlightSearch: {
      //     visible: !!propertyData.editor?.editable,
      //     description: "编辑状态下启用高亮搜索",
      //     title: "启用高亮搜索",
      //     type: "boolean"
      // },
    };
  }
  getEditorProperties(t) {
    var p, g, S, s, y, F, P, V, i, l, r, f, T;
    const n = this;
    let a = "";
    if (((p = t == null ? void 0 : t.binding) == null ? void 0 : p.type) === "Form") {
      const u = this.schemaService.getFieldByIDAndVMID(t.binding.field, this.viewModelId);
      (g = u == null ? void 0 : u.schemaField) != null && g.type && (a = u.schemaField.type.$type);
    }
    const d = this.getPropertyEditorParams(t, ["Variable"]), c = !t.editor.dataSourceType || t.editor.dataSourceType === "static", h = (((s = (S = this.designViewModelField) == null ? void 0 : S.type) == null ? void 0 : s.$type) === M.StringType || !!this.formRule && ((y = this.designerHostService.schemaService.getFieldByID(t.binding.field)) == null ? void 0 : y.type.$type) === M.StringType) && ((F = t.editor) == null ? void 0 : F.type) === "combo-list" && ((P = t.editor) == null ? void 0 : P.dataSourceType) === "dynamic" && !((i = (V = t.editor) == null ? void 0 : V.remote) != null && i.url) && !((l = t.editor) != null && l.multiSelect);
    return n.getComponentConfig(t, { type: "combo-list" }, {
      // enableSearch: {
      //     description: "编辑状态下启用搜索",
      //     title: "允许编辑",
      //     type: "boolean",
      // },
      enableClear: {
        description: "",
        title: "启用清空",
        type: "boolean"
      },
      dataSourceType: {
        description: "",
        title: "数据源类型",
        type: "enum",
        editor: {
          default: "static",
          data: [
            { id: "static", name: "静态" },
            { id: "dynamic", name: "动态" }
          ]
        },
        refreshPanelAfterChanged: !0
      },
      dataSource: {
        description: "动态数据源绑定变量",
        visible: h,
        title: "数据",
        editor: {
          ...d,
          controlName: "",
          enableClear: !0
        },
        refreshPanelAfterChanged: !0
      },
      data: {
        description: "",
        title: "数据",
        type: "array",
        visible: c,
        ...n.getItemCollectionEditor(t, t.editor.valueField, t.editor.textField),
        // 这个属性，标记当属性变更得时候触发重新更新属性
        refreshPanelAfterChanged: !0
      },
      url: {
        visible: t.editor.dataSourceType === "dynamic" && !((r = t.editor) != null && r.dataSource),
        $converter: G,
        description: "",
        title: "服务端API",
        type: "string",
        refreshPanelAfterChanged: !0
      },
      // method: {
      //     visible: propertyData.editor.dataSourceType === "dynamic",
      //     $converter: comboListRemoteConverter,
      //     description: "",
      //     title: "服务端API类型",
      //     type: "enum",
      //     editor: {
      //         default: "GET",
      //         data: [
      //             { id: "GET", name: "GET" },
      //             { id: "PUT", name: "PUT" },
      //             { id: "POST", name: "POST" }
      //         ]
      //     },
      // },
      body: {
        visible: !1,
        $converter: G,
        description: "",
        title: "服务端API参数",
        type: "string"
      },
      textField: {
        description: "",
        title: "数据源显示字段",
        type: "string",
        readonly: t.editor.dataSourceType !== "dynamic"
      },
      valueField: {
        description: "",
        title: "数据源值字段",
        type: "string",
        readonly: t.editor.dataSourceType !== "dynamic"
      },
      multiSelect: {
        description: "",
        title: "启用多选",
        visible: !a || a === "StringType",
        readonly: ((f = t.editor) == null ? void 0 : f.dataSourceType) === "dynamic" && !!((T = t.editor) != null && T.dataSource),
        type: "boolean",
        refreshPanelAfterChanged: !0
      },
      maxLength: {
        description: "",
        title: "最大输入长度",
        type: "number",
        editor: {
          nullable: !0,
          min: 0,
          useThousands: !1,
          needValid: !0
        }
      },
      ...this.getCommonEditorProperties(t)
    }, (u, o) => {
      if (!u || !o.editor)
        return;
      const w = this;
      switch (u.propertyID) {
        case "dataSourceType": {
          u.propertyValue === "static" ? (o.editor.valueField = "value", o.editor.textField = "name", o.editor.remote = null) : u.propertyValue === "dynamic" && (o.editor.remote = { method: "GET" }, o.editor.valueField = "value", o.editor.textField = "name");
          break;
        }
        case "data": {
          !w.checkEnumDataReadonly(o) && o.formatter && (o.formatter.data = [...u.propertyValue]);
          break;
        }
        case "viewType": {
          u.propertyValue === "tag" && (o.editor.editable = !1);
          break;
        }
        case "dataSource":
          w.afterMutilEditorChanged(o, u);
      }
    });
  }
  getGridFieldEdtiorProperties(t, n) {
    var p, g, S, s, y, F, P, V, i, l, r, f, T;
    const a = this;
    let d = "";
    if (((p = t == null ? void 0 : t.binding) == null ? void 0 : p.type) === "Form") {
      const u = this.schemaService.getFieldByIDAndVMID(t.binding.field, this.viewModelId);
      (g = u == null ? void 0 : u.schemaField) != null && g.type && (d = u.schemaField.type.$type);
    }
    const c = ((s = (S = this.designViewModelField) == null ? void 0 : S.type) == null ? void 0 : s.$type) === M.StringType && ((y = t.editor) == null ? void 0 : y.type) === "combo-list" && ((F = t.editor) == null ? void 0 : F.dataSourceType) === "dynamic" && !((P = t.editor) != null && P.multiSelect), h = this.getPropertyEditorParams(t, ["Variable"]);
    return a.getComponentConfig(t, { type: "combo-list" }, {
      // editable: {
      //     description: "",
      //     title: "允许编辑",
      //     type: "boolean",
      //     readonly: propertyData.editor?.type === 'combo-list'
      // },
      enableClear: {
        description: "",
        title: "启用清空",
        type: "boolean"
      },
      dataSourceType: {
        description: "",
        title: "数据源类型",
        type: "enum",
        editor: {
          default: "static",
          data: [
            { id: "static", name: "静态" },
            { id: "dynamic", name: "动态" }
          ]
        },
        refreshPanelAfterChanged: !0
      },
      dataSource: {
        description: "动态数据源绑定变量",
        visible: c,
        title: "数据",
        editor: {
          ...h,
          controlName: "",
          enableClear: !0
        },
        refreshPanelAfterChanged: !0
      },
      data: {
        description: "",
        title: "数据",
        type: "array",
        visible: !((V = t.editor) != null && V.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
      },
      textField: {
        description: "",
        title: "数据源显示字段",
        type: "string",
        readonly: !0
      },
      valueField: {
        description: "",
        title: "数据源值字段",
        type: "string",
        readonly: !0
      },
      multiSelect: {
        description: "",
        title: "启用多选",
        visible: d === "StringType",
        readonly: ((f = t.editor) == null ? void 0 : f.dataSourceType) === "dynamic" && !!((T = t.editor) != null && T.dataSource),
        type: "boolean",
        refreshPanelAfterChanged: !0
      },
      maxLength: {
        description: "",
        title: "最大输入长度",
        type: "number",
        editor: {
          nullable: !0,
          min: 0,
          useThousands: !1,
          needValid: !0
        }
      },
      ...this.getCommonEditorProperties(t)
    }, (u, o) => {
      if (!u || !o.editor)
        return;
      const w = this;
      switch (u.propertyID) {
        case "dataSourceType": {
          u.propertyValue === "static" ? (o.editor.valueField = "value", o.editor.textField = "name", o.editor.remote = null) : u.propertyValue === "dynamic" && (o.editor.remote = { method: "GET" }, o.editor.valueField = "value", o.editor.textField = "name");
          break;
        }
        case "data": {
          !w.checkEnumDataReadonly(o) && o.formatter && (o.formatter.data = [...u.propertyValue]);
          break;
        }
        case "dataSource":
          w.afterMutilEditorChanged(o, u);
      }
    });
  }
  setEditorPropertyRelates(t, n, a) {
    if (!t || !n.editor)
      return;
    const d = this;
    switch (t.propertyID) {
      case "dataSourceType": {
        t.propertyValue === "static" && (n.editor.valueField = "value", n.editor.textField = "name", n.editor.remote = {});
        break;
      }
      case "data": {
        !d.checkEnumDataReadonly(n) && n.formatter && (n.formatter.data = [...t.propertyValue]);
        break;
      }
    }
  }
  /**
   * 切换绑定属性 
   */
  changeBindingField(t, n, a) {
    var c;
    super.changeBindingField(t, n);
    const d = a;
    t.editor && ((c = d == null ? void 0 : d.type) == null ? void 0 : c.$type) === M.EnumType && (t.editor.data = d.type.enumValues || []);
  }
  /**
  * 组装输入类控件的交互面板：包含标签超链、绑定字段值变化前后事件等。
  * @param propertyData 属性值
  * @param viewModelId 视图模型id
  * @param showPosition 面板展示位置
  * @param customEvent 输入控件特有的事件配置
  */
  getEventPropertyConfig(t, n = "card", a, d) {
    const c = this;
    let h = [
      {
        label: "onChange",
        name: "值变化事件"
      },
      // {
      //     label: 'onClear',
      //     name: '清空事件'
      // },
      {
        label: "beforeOpen",
        name: "下拉面板前事件"
      }
    ];
    h = [...h, ...this.getInputCommonEvents(t)], a && (h = h.concat(a)), this.formRule && (h = h.filter((S) => S.label !== "onChange")), this.appendFieldValueChangeEvents(t, h);
    const C = c.eventsEditorUtils.formProperties(t, c.viewModelId, h);
    return {
      title: "事件",
      hideTitle: !0,
      properties: c.createBaseEventProperty(C),
      tabId: "commands",
      tabName: "交互",
      setPropertyRelates(S, s) {
        const y = S.propertyValue;
        delete t[c.viewModelId], y && (y.setPropertyRelates = this.setPropertyRelates, c.eventsEditorUtils.saveRelatedParameters(t, c.viewModelId, y.events, y), c.updateLinkedLabel(y, s)), d && d(S, s, y);
        const F = c.designViewModelUtils.getDgViewModel(c.viewModelId);
        F && c.designViewModelField && F.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) {
  const n = e.schema;
  function a(d, c) {
    return new Te(d, t).getPropertyConfig(n, c);
  }
  return {
    getPropsConfig: a
  };
}
const we = /* @__PURE__ */ $({
  name: "FComboListDesign",
  props: Se,
  emits: ["clear", "update:modelValue", "change"],
  setup(e, t) {
    const n = v(), a = N("designer-host-service"), d = N("design-item-context"), c = Pe(d, a), h = ae(n, d, c);
    return q(() => {
      n.value.componentInstance = h;
    }), t.expose(h.value), () => E(ne, {
      ref: n,
      buttonContent: e.dropDownIcon,
      readonly: !0,
      editable: !1,
      forcePlaceholder: !0,
      placeholder: e.placeholder,
      enableClear: !0
    }, null);
  }
});
k.register = (e, t, n, a, d) => {
  e["combo-list"] = k, t["combo-list"] = z(d), a["combo-list"] = { callbackResolver: Ce };
};
k.registerDesigner = (e, t, n, a) => {
  e["combo-list"] = we, t["combo-list"] = z(a);
};
const $e = oe(k);
export {
  k as FComboList,
  Fe as FComboListContainer,
  be as Placement,
  Ce as callbackResolver,
  Se as comboListDesignProps,
  A as comboListProps,
  $e as default,
  He as propsResolver,
  z as propsResolverGenerator,
  Ve as useDataSource
};