@farris/ui-vue/components/transfer/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as g, computed as P, createVNode as o, Fragment as G, watch as Q, withModifiers as he, withDirectives as ge, vModelText as me, defineComponent as q, onMounted as Z, inject as ye, createTextVNode as U } from "vue";
import we from "../tree-view/index.esm.js";
import { isPlainObject as X, cloneDeep as K } from "lodash-es";
import { getCustomClass as Se, withInstall as be } from "../common/index.esm.js";
import { useFilter as Ce, useIdentify as ke, useHierarchy as Te, useGroupData as Me, useDataView as Ve, useSelection as De, useRow as Oe, useEdit as Fe, useVisualDataBound as Ie, useVisualDataCell as Re, useVisualDataRow as je, useVisualGroupRow as $e, useVisualSummaryRow as Ae, useVisualData as Pe } from "../data-view/index.esm.js";
import { FCheckbox as z } from "../checkbox/index.esm.js";
const ee = {}, te = {};
function x(t) {
  const { properties: e, title: s, ignore: u } = t, f = u && Array.isArray(u), i = Object.keys(e).reduce((r, y) => ((!f || !u.find((T) => T === y)) && (r[y] = e[y].type === "object" && e[y].properties ? x(e[y]) : K(e[y].default)), r), {});
  if (s && (!f || !u.find((r) => r === "id"))) {
    const r = s.toLowerCase().replace(/-/g, "_");
    i.id = `${r}_${Math.random().toString().slice(2, 6)}`;
  }
  return i;
}
function Le(t) {
  const { properties: e, title: s, required: u } = t;
  if (u && Array.isArray(u)) {
    const f = u.reduce((i, r) => (i[r] = e[r].type === "object" && e[r].properties ? x(e[r]) : K(e[r].default), i), {});
    if (s && u.find((i) => i === "id")) {
      const i = s.toLowerCase().replace(/-/g, "_");
      f.id = `${i}_${Math.random().toString().slice(2, 6)}`;
    }
    return f;
  }
  return {
    type: s
  };
}
function ne(t, e = {}, s) {
  const u = ee[t];
  if (u) {
    let f = Le(u);
    const i = te[t];
    return f = i ? i({ getSchemaByType: ne }, f, e, s) : f, f;
  }
  return null;
}
function Be(t, e) {
  const s = x(e);
  return Object.keys(s).reduce((u, f) => (Object.prototype.hasOwnProperty.call(t, f) && (u[f] && X(u[f]) && X(t[f] || !t[f]) ? Object.assign(u[f], t[f] || {}) : u[f] = t[f]), u), s), s;
}
function le(t, e) {
  return Object.keys(t).filter((u) => t[u] != null).reduce((u, f) => {
    if (e.has(f)) {
      const i = e.get(f);
      if (typeof i == "string")
        u[i] = t[f];
      else {
        const r = i(f, t[f], t);
        Object.assign(u, r);
      }
    } else
      u[f] = t[f];
    return u;
  }, {});
}
function Ee(t, e, s = /* @__PURE__ */ new Map()) {
  const u = Be(t, e);
  return le(u, s);
}
function _e(t = {}) {
  function e(n, p, d, c) {
    if (typeof d == "number")
      return c[n].length === d;
    if (typeof d == "object") {
      const m = Object.keys(d)[0], M = d[m];
      if (m === "not")
        return Number(c[n].length) !== Number(M);
      if (m === "moreThan")
        return Number(c[n].length) >= Number(M);
      if (m === "lessThan")
        return Number(c[n].length) <= Number(M);
    }
    return !1;
  }
  function s(n, p, d, c) {
    return c[n] && c[n].propertyValue && String(c[n].propertyValue.value) === String(d);
  }
  const u = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", s]
  ]);
  Object.keys(t).reduce((n, p) => (n.set(p, t[p]), n), u);
  function f(n, p) {
    const d = n;
    return typeof p == "number" ? [{ target: d, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: d, operator: "getProperty", param: n, value: !!p }] : typeof p == "object" ? Object.keys(p).map((c) => {
      if (c === "length")
        return { target: d, operator: "length", param: null, value: p[c] };
      const m = c, M = p[c];
      return { target: d, operator: "getProperty", param: m, value: M };
    }) : [];
  }
  function i(n) {
    return Object.keys(n).reduce((d, c) => {
      const m = f(c, n[c]);
      return d.push(...m), d;
    }, []);
  }
  function r(n, p) {
    if (u.has(n.operator)) {
      const d = u.get(n.operator);
      return d && d(n.target, n.param, n.value, p) || !1;
    }
    return !1;
  }
  function y(n, p) {
    return i(n).reduce((m, M) => m && r(M, p), !0);
  }
  function T(n, p) {
    const d = Object.keys(n), c = d.includes("allOf"), m = d.includes("anyOf"), M = c || m, O = (M ? n[M ? c ? "allOf" : "anyOf" : "allOf"] : [n]).map((A) => y(A, p));
    return c ? !O.includes(!1) : O.includes(!0);
  }
  return { parseValueSchema: T };
}
const He = {}, Ne = {};
_e();
function ae(t, e, s = /* @__PURE__ */ new Map(), u = (r, y, T, n) => y, f = {}, i = (r) => r) {
  return ee[e.title] = e, te[e.title] = u, He[e.title] = f, Ne[e.title] = i, (r = {}, y = !0) => {
    if (!y)
      return le(r, s);
    const T = Ee(r, e, s), n = Object.keys(t).reduce((p, d) => (p[d] = t[d].default, p), {});
    return Object.assign(n, T);
  };
}
function se(t, e) {
  return { customClass: e.class, customStyle: e.style };
}
const Ge = /* @__PURE__ */ new Map([
  ["appearance", se]
]);
function qe(t, e, s) {
  return e;
}
const ze = "transfer", xe = "A Farris Component", We = "object", Ue = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, Xe = {
  title: ze,
  description: xe,
  type: We,
  categories: Ue
}, Ye = "https://json-schema.org/draft/2020-12/schema", Je = "https://farris-design.gitee.io/transfer.schema.json", Qe = "transfer", Ze = "A Farris Component", Ke = "object", et = {
  id: {
    description: "The unique identifier for transfer",
    type: "string"
  },
  type: {
    description: "The type string of transfer",
    type: "string",
    default: "transfer"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, tt = [
  "id",
  "type"
], nt = {
  $schema: Ye,
  $id: Je,
  title: Qe,
  description: Ze,
  type: Ke,
  properties: et,
  required: tt
}, W = {
  dataSource: {
    type: Array,
    default: []
  },
  displayType: { type: String, default: "List" },
  enableSearch: { type: Boolean, default: !0 },
  identifyField: { type: String, default: "id" },
  textField: { type: String, default: "name" },
  placeholder: { type: String, default: "" },
  selections: { type: Array, default: [] },
  selectionValues: { type: Array, default: [] },
  virtualized: { type: Boolean, default: !1 },
  rowOption: { type: Object },
  columns: {
    type: Array,
    default: [
      { field: "name", title: "", dataType: "string", width: "100%" }
    ]
  }
}, oe = ae(W, nt, Ge, qe, Xe), lt = /* @__PURE__ */ new Map([
  ["appearance", se]
]);
function at(t, e, s) {
  return e;
}
const st = "https://json-schema.org/draft/2020-12/schema", ot = "https://farris-design.gitee.io/list-view.schema.json", it = "list-view", rt = "A Farris Component", ct = "object", ut = {
  id: {
    description: "The unique identifier for list-view",
    type: "string"
  },
  type: {
    description: "The type string of list-view",
    type: "string",
    default: "list-view"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, ft = [
  "id",
  "type"
], dt = {
  $schema: st,
  $id: ot,
  title: it,
  description: rt,
  type: ct,
  properties: ut,
  required: ft
}, pt = "list-view", vt = "A Farris Component", ht = "object", gt = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, mt = {
  title: pt,
  description: vt,
  type: ht,
  categories: gt
}, ie = {
  /** 列集合 */
  columns: {
    type: Array,
    default: [
      { field: "name", title: "", dataType: "string" }
    ]
  },
  customClass: { type: String, default: "" },
  data: { type: Array, default: [] },
  draggable: { type: Boolean, default: !1 },
  multiSelect: { Type: Boolean, default: !1 },
  multiSelectMode: { Type: String, default: "OnCheck" },
  idField: { Type: String, default: "id" },
  valueField: { Type: String, default: "id" },
  textField: { Type: String, default: "name" },
  titleField: { Type: String, default: "name" },
  view: { Type: String, default: "ContentView" },
  size: { Type: String, default: "default" },
  placeholder: { type: String, default: "" },
  header: { Type: String, default: "ContentHeader" },
  headerClass: { Type: String, default: "" },
  itemClass: { Type: String, default: "" },
  itemContentClass: { Type: String, default: "" },
  selectionValues: { type: Array, default: [] },
  /** 分组配置 */
  group: { type: Object },
  /** 选择配置 */
  selection: {
    type: Object,
    default: {
      enableSelectRow: !0,
      multiSelect: !1,
      multiSelectMode: "DependOnCheck",
      showCheckbox: !1,
      showSelectAll: !1,
      showSelection: !0
    }
  },
  keepOrder: { type: Boolean, default: !1 },
  disableField: { type: String, default: "disabled" },
  // 搜索启用高亮
  enableHighlightSearch: { type: Boolean, default: !0 },
  /** 虚拟化渲染数据 */
  virtualized: { type: Boolean, default: !0 }
};
ae(ie, dt, lt, at, mt);
function yt(t, e) {
  function s(i) {
    const r = [];
    let y = i.nextNode();
    for (; y; )
      r.push(y), y = i.nextNode();
    return r;
  }
  function u(i, r) {
    const y = document.createTreeWalker(i, NodeFilter.SHOW_TEXT);
    return s(y).map((d) => ({ textNode: d, text: (d.textContent || "").toLocaleLowerCase() })).map(({ textNode: d, text: c }) => {
      const m = [];
      let M = 0;
      for (; M < c.length; ) {
        const D = c.indexOf(r, M);
        if (D === -1)
          break;
        m.push(D), M = D + r.length;
      }
      return m.map((D) => {
        const I = new Range();
        return I.setStart(d, D), I.setEnd(d, D + r.length), I;
      });
    }).flat();
  }
  function f(i) {
    if (!CSS.highlights || (CSS.highlights.clear(), !i || !e))
      return;
    const r = u(e.value, i.toLocaleLowerCase()), y = new Highlight(...r);
    CSS.highlights.set("search-result", y);
  }
  return { search: f };
}
function Y(t, e, s, u, f, i, r, y, T, n) {
  const p = g(t.size), d = g(t.textField), c = g(t.titleField), m = g(t.disableField), M = P(() => {
    var l, a;
    return ((l = t.selection) == null ? void 0 : l.multiSelect) && ((a = t.selection) == null ? void 0 : a.showCheckbox);
  }), {
    onMouseenterItem: D,
    onMouseoverItem: I,
    onMouseoutItem: O
  } = i, {
    getKey: F,
    listViewItemClass: A,
    onCheckItem: $,
    onClickItem: L
  } = r, v = P(() => {
    const l = {
      "text-overflow": "ellipsis",
      overflow: "hidden",
      "white-space": "nowrap"
    };
    return t.itemClass ? l : {
      margin: p.value === "small" ? "0.25rem 0" : "8px 0",
      ...l
    };
  });
  function C(l, a, V) {
    return l.checked = y.findIndexInSelectedItems(l) > -1, o("li", {
      class: A(l, a),
      id: F(l, a),
      key: F(l, a),
      onClick: (w) => L(w, l, a),
      onMouseenter: (w) => D(w, l, a),
      onMouseover: (w) => I(w, l, a),
      onMouseout: (w) => O(w, l, a)
    }, [M.value && o("div", {
      class: "f-list-select",
      onClick: (w) => w.stopPropagation()
    }, [o(z, {
      id: "list-" + F(l, a),
      customClass: "listview-checkbox",
      disabled: l[m.value],
      checked: l.checked,
      "onUpdate:checked": (w) => l.checked = w,
      onChange: (w) => {
        $(l, a, !w.checked);
      }
    }, null)]), o("div", {
      class: "f-list-content"
    }, [o("div", {
      class: t.itemContentClass,
      style: v.value,
      title: l.raw[c.value] || l.raw[d.value]
    }, [l.raw[d.value]])])]);
  }
  return {
    renderItem: C
  };
}
function wt(t, e, s, u, f, i, r, y, T, n) {
  const p = g(t.multiSelect), d = g(t.disableField), c = g(t.textField), {
    onMouseenterItem: m,
    onMouseoverItem: M,
    onMouseoutItem: D
  } = i, {
    getKey: I,
    listViewItemClass: O,
    onCheckItem: F,
    onClickItem: A
  } = r;
  function $(v, C, l) {
    return e.slots.content ? o(G, null, [e.slots.content && e.slots.content({
      item: v.raw,
      index: C,
      selectedItem: l
    })]) : o("div", {
      style: "margin: 10px 0;"
    }, [v.raw[c.value || "name"]]);
  }
  function L(v, C, l) {
    return o("li", {
      class: O(v, C),
      id: I(v, C),
      key: I(v, C),
      onClick: (a) => A(a, v, C),
      onMouseenter: (a) => m(a, v, C),
      onMouseover: (a) => M(a, v, C),
      onMouseout: (a) => D(a, v, C)
    }, [p.value && o("div", {
      class: "f-list-select",
      onClick: (a) => a.stopPropagation()
    }, [o(z, {
      id: "list-" + I(v, C),
      customClass: "listview-checkbox",
      disabled: v[d.value] || !v.checked,
      checked: v.checked,
      "onUpdate:checked": (a) => v.checked = a,
      onChange: (a) => F(v, C, !a.checked)
    }, null)]), o("div", {
      class: "f-list-content"
    }, [$(v, C, l)])]);
  }
  return {
    renderItem: L
  };
}
function St(t, e, s, u, f, i, r, y, T, n) {
  const p = g(t.multiSelect), d = g(t.disableField), c = g(t.textField), {
    onMouseenterItem: m,
    onMouseoverItem: M,
    onMouseoutItem: D
  } = i, {
    getKey: I,
    listViewItemClass: O,
    onCheckItem: F,
    onClickItem: A
  } = r, {
    dragstart: $,
    dragenter: L,
    dragover: v,
    dragend: C
  } = u, {
    removeItem: l
  } = T, a = P(() => ({
    margin: p.value ? "10px 0" : "10px 0px 10px 14px"
  }));
  function V(h, b = "") {
    const E = h.target;
    E.title = E.scrollWidth > E.clientWidth ? b : "";
  }
  function w(h) {
    return o("div", {
      style: a.value,
      onMouseenter: (b) => V(b, h.raw[c.value || "name"])
    }, [h.raw[c.value || "name"]]);
  }
  function R() {
    return e.slots.itemContent ? e.slots.itemContent : w;
  }
  const S = R();
  function k(h, b, E) {
    return o("li", {
      class: O(h, b),
      id: I(h, b),
      key: I(h, b),
      onClick: (j) => A(j, h, b),
      onMouseenter: (j) => m(j, h, b),
      onMouseover: (j) => M(j, h, b),
      onMouseout: (j) => D(j, h, b),
      draggable: "true",
      onDragstart: (j) => $(j, h, b),
      onDragenter: (j) => L(j, b),
      onDragend: (j) => C(j, h),
      onDragover: (j) => v(j)
    }, [p.value && o("div", {
      class: "f-list-select",
      onClick: (j) => j.stopPropagation()
    }, [o(z, {
      id: "list-" + I(h, b),
      customClass: "listview-checkbox",
      disabled: h[d.value] || !h.checked,
      checked: h.checked,
      "onUpdate:checked": (j) => h.checked = j,
      onChange: (j) => F(h, b, !j.checked)
    }, null)]), o("div", {
      class: "f-list-content"
    }, [S(h)]), o("div", {
      class: "f-list-remove",
      onClick: (j) => l(b)
    }, [o("div", {
      class: "f-list-remove-icon"
    }, [o("i", {
      class: "f-icon f-icon-remove_face"
    }, null)])]), o("div", {
      class: "f-list-handle"
    }, [o("div", null, [o("i", {
      class: "f-icon f-icon-drag-vertical"
    }, null)])])]);
  }
  return {
    renderItem: k
  };
}
function bt(t, e, s, u, f, i, r, y, T, n) {
  var I;
  const p = g(((I = t.group) == null ? void 0 : I.groupFields) || []), {
    collpaseGroupIconClass: d
  } = f, {
    toggleGroupRow: c
  } = n;
  function m(O, F) {
    F.collapse = !F.collapse, s.value = c(F.collapse ? "collapse" : "expand", F, s.value);
  }
  function M(O, F, A) {
    return e.slots.group ? o(G, null, [e.slots.content && e.slots.group({
      item: O.raw,
      index: F,
      selectedItem: A
    })]) : o("div", {
      class: "f-navlookup-recentHeader",
      onClick: ($) => m($, O)
    }, [o("div", {
      class: "fv-grid-group-row-icon"
    }, [o("span", {
      class: d(O)
    }, null)]), o("div", {
      class: "f-navlookup-recommandLabel"
    }, [O.raw[p.value[O.layer]]])]);
  }
  function D(O, F, A) {
    return O.layer > -1 && M(O, F, A);
  }
  return {
    renderItem: D
  };
}
function Ct(t, e, s, u) {
  const { dataView: f } = s, { updateSelectedItems: i } = u;
  function r(y) {
    if (y > -1 && y < f.value.length) {
      const T = f.value.splice(y, 1);
      i(), e.emit("removeItem", T[0]);
    }
  }
  return { removeItem: r };
}
function kt(t, e, s, u, f, i, r, y, T, n) {
  const p = g(t.view), d = g(t.view === "CardView"), c = g({}), m = g("暂无数据"), M = Ct(t, e, u, T), D = P(() => ({
    "f-list-view-group": !0,
    "f-list-view-group-multiselect": t.multiSelect,
    "d-flex": d.value,
    "flex-wrap": d.value
  })), I = P(() => !!s.value && s.value.length > 0), O = P(() => s.value.length === 0);
  P(() => O.value && !e.slots.empty);
  function F() {
    return p.value === "SingleView" ? Y : p.value === "DraggableView" ? St : (p.value === "ContentView" || p.value === "CardView") && e.slots.content ? wt : Y;
  }
  const A = F(), {
    renderItem: $
  } = A(t, e, s, n, f, i, T, r, M, y), {
    renderItem: L
  } = bt(t, e, s, n, f, i, T, r, M, y), v = [$, L];
  function C() {
    return s.value.filter((V) => V.visible !== !1).map((V, w) => v[V.type](V, w, c));
  }
  function l() {
    return o("div", {
      class: "f-list-view-emptydata",
      style: "margin: 0 auto;"
    }, [o("p", {
      class: "f-empty-title"
    }, [e.slots.empty ? e.slots.empty() : m.value])]);
  }
  function a() {
    return o("ul", {
      class: D.value,
      style: "list-style: none;"
    }, [I.value && C(), O.value && l()]);
  }
  return {
    renderListArea: a
  };
}
function Tt(t, e, s) {
  function u() {
    return e.slots.header && o("div", {
      class: "f-list-view-header"
    }, [e.slots.header()]);
  }
  return {
    renderHeader: u
  };
}
function J(t, e, s) {
  const u = g(t.headerClass), f = g(t.placeholder), i = g(""), r = P(() => !i.value), y = P(() => !!i.value);
  function T(c) {
    i.value = "";
  }
  Q(i, (c) => {
    t.enableHighlightSearch && s.search(c), e.emit("afterSearch", c);
  });
  const n = P(() => {
    const c = {
      "form-group": !0,
      "farris-form-group": !0
    };
    return u.value && u.value.split(" ").reduce((M, D) => (M[D] = !0, M), c), c;
  });
  function p(c) {
  }
  function d() {
    return o("div", {
      class: "f-list-view-header",
      onClick: he(() => p, ["prevent", "stop"])
    }, [o("div", {
      class: n.value
    }, [o("div", {
      class: "farris-input-wrap"
    }, [o("div", {
      class: "f-cmp-inputgroup"
    }, [o("div", {
      class: "input-group f-state-editable"
    }, [ge(o("input", {
      class: "form-control f-utils-fill text-left",
      "onUpdate:modelValue": (c) => i.value = c,
      name: "input-group-value",
      type: "text",
      placeholder: f.value,
      autocomplete: "off"
    }, null), [[me, i.value]]), o("div", {
      class: "input-group-append"
    }, [y.value && o("span", {
      class: "input-group-text input-group-clear",
      onClick: (c) => T()
    }, [o("i", {
      class: "f-icon f-icon-close-circle"
    }, null)]), r.value && o("span", {
      class: "input-group-text"
    }, [o("span", {
      class: "f-icon f-icon-search"
    }, null)])])])])])])]);
  }
  return {
    renderHeader: d
  };
}
function Mt() {
  const t = g(""), e = g(-1), s = g(""), u = g(-1), f = g(!1);
  function i(d, c, m) {
    u.value = m;
  }
  function r(d, c, m) {
    f.value || (u.value = m);
  }
  function y(d, c, m) {
    u.value = -1;
  }
  function T() {
    f.value = !0;
  }
  function n() {
    f.value = !1;
  }
  function p() {
    e.value = -1, t.value = "";
  }
  return {
    activeIndex: e,
    focusedItemId: s,
    hoverIndex: u,
    clearActiveItem: p,
    onMouseenterItem: i,
    onMouseoverItem: r,
    onMouseoutItem: y,
    resumeHover: n,
    suspendHover: T
  };
}
function Vt(t, e, s, u) {
  const f = g(t.idField), { dataView: i } = s, r = g(-1), y = g(!1), { activeIndex: T, focusedItemId: n, hoverIndex: p, resumeHover: d, suspendHover: c } = u;
  let m, M = 0, D = 0;
  function I(v, C) {
    const l = v - M, a = C - D;
    m.style.left = parseInt(m.style.left) + l + "px", m.style.top = parseInt(m.style.top) + a + "px", M = v, D = C;
  }
  function O(v) {
    const { left: C, top: l } = v.getBoundingClientRect(), a = v.cloneNode(!0);
    return a.style.cssText = `
        position:absolute;
        left:${C}px;
        top:${l}px;
        z-index: 999999;
        border: 1px solid #e2e3e5;
        pointer-events: none;
        background-color: #edf5ff;
        border-radius: 10px;
        margin: 4px 2px;    
        display: flex;
        align-items: center;
        float: none;
        text-align: initial;
        width:${getComputedStyle(v).width};
        height:${getComputedStyle(v).height};
        `, a.children[0].style.cssText = "overflow: hidden;flex: 1 1 auto;width: 100%;", a.children[0].children[0].style.cssText = `
        margin: 10px 0px 10px 14px;
        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
        `, a.children[1].style.cssText = "width: 30px;color: #f4625f;padding: 0 14px 0 0", a.children[2].style.cssText = "padding: 0 14px 0 0;", document.body.appendChild(a), a;
  }
  function F(v, C, l) {
    if (v.stopPropagation(), c(), C) {
      if (m = O(v.target), v.dataTransfer) {
        const a = new Image();
        a.src = "", v.dataTransfer.setDragImage(a, 0, 0);
      }
      M = v.pageX, D = v.pageY, setTimeout(() => {
        r.value = l, y.value = !0, C.moving = !0;
      });
    }
  }
  function A(v, C) {
    if (v.preventDefault(), r.value !== C) {
      const l = i.value[r.value], a = i.value;
      a.splice(r.value, 1), a.splice(C, 0, l), r.value = C, I(v.pageX, v.pageY);
    }
  }
  function $(v) {
    v.preventDefault(), v.dataTransfer && (v.dataTransfer.dropEffect = "move"), I(v.pageX, v.pageY);
  }
  function L(v, C) {
    C && (C.moving = !1, m && (document.body.removeChild(m), m = null)), i.value.forEach((l, a) => {
      l.__fv_index__ = a;
    }), y.value = !1, d(), p.value = C.raw.__fv_index__, T.value = C.raw.__fv_index__, n.value = C.raw[f.value], e.emit("change", i.value), e.emit("activeChange", [C.raw]);
  }
  return {
    dragstart: F,
    dragenter: A,
    dragover: $,
    dragend: L,
    isDragging: y
  };
}
function Dt(t, e, s, u, f, i) {
  const r = g(t.idField), y = g(t.disableField), T = g(t.draggable), n = g(t.itemClass), p = g(t.selection.multiSelect ?? !1), d = g(t.selection.multiSelectMode), { isDragging: c } = u, { activeIndex: m, focusedItemId: M, hoverIndex: D } = f, { clearSelection: I, getSelectedItems: O, toggleSelectItem: F, currentSelectedDataId: A } = i, $ = g(O()), L = (k) => $.value.length === 0 ? !1 : $.value.some((h) => {
    let b = "";
    return h.data ? b = h.data[r.value] : b = h[r.value], b === k;
  });
  function v() {
    $.value = O();
  }
  function C(k, h) {
    return k.raw[r.value] != null ? k.raw[r.value] : "";
  }
  function l(k, h) {
    const b = {
      "f-list-view-group-item": !0,
      "f-list-view-draggable-item": T.value,
      "f-un-click": !k.checked,
      "f-un-select": !!k.raw[y.value],
      "f-listview-active": (
        // 多选
        p.value && L(C(k)) || // 单选
        k.raw[r.value] === A.value
      ),
      "f-listview-hover": !c.value && h === D.value,
      moving: !!k.moving
    };
    return n.value.split(" ").reduce((j, N) => (j[N] = !0, j), b), b;
  }
  const a = P(() => !p.value);
  function V(k, h, b) {
    k.checked = b, !k.raw[y.value] && (a.value && (M.value = k.raw[r.value]), F(k));
  }
  const w = P(() => p.value && d.value === "OnCheckClearByClick"), R = P(() => !p.value || p.value && (d.value === "OnCheckAndClick" || d.value === "OnClick"));
  function S(k, h, b) {
    if (h.raw[y.value]) {
      k.preventDefault(), k.stopPropagation();
      return;
    }
    M.value = h.raw[r.value], m.value = b, w.value && I(), R.value && (F(h), v()), e.emit("clickItem", { data: $.value, index: b }), e.emit("activeChange", $.value);
  }
  return {
    getKey: C,
    selectedItems: $,
    listViewItemClass: l,
    updateSelectedItems: v,
    onCheckItem: V,
    onClickItem: S
  };
}
const _ = /* @__PURE__ */ q({
  name: "FListView",
  props: ie,
  emits: ["afterSearch", "checkValuesChange", "clickItem", "selectionChange", "removeItem", "change", "activeChange"],
  setup(t, e) {
    const s = g(), u = g(!0), f = g(!1), i = g([]), r = 0, y = g(t.columns), T = Ce(), n = ke(t), p = Te(t), d = Me(t, n), c = Ve(t, /* @__PURE__ */ new Map(), T, p, n), m = De(t, c, n, i, e), M = yt(t, s), D = P(() => c.dataView.value.length), I = Oe(t, e, m, n), O = Fe(t, e, n, I, i), F = Ie(t), A = Re(t, {}, F), $ = je(t, c, O, p, n, F, A), L = $e(t, n, A, $), v = Ae(t, n, A, $), C = Pe(t, y, c, D, r, $, L, v), {
      getVisualData: l
    } = C;
    i.value = l(0, D.value + r - 1);
    const a = P(() => {
      const B = {
        "f-list-view": !0,
        "f-list-view-multiple": t.multiSelect
      };
      return t.size !== "default" && (B[`${t.size}-item`] = !0), Se(B, t.customClass);
    }), V = P(() => !!e.slots.footer || u.value);
    function w() {
      return t.header === "SearchBar" ? J : t.header === "ContentHeader" ? Tt : J;
    }
    const R = w(), {
      renderHeader: S
    } = R(t, e, M), k = Mt(), h = Vt(t, e, c, k), b = Dt(t, e, i, h, k, m), {
      renderListArea: E
    } = kt(t, e, i, c, d, k, m, C, b, h);
    function j(B) {
      M.search(B);
    }
    function N(B) {
      B && (c.load(B), i.value = l(0, D.value + r - 1));
    }
    function re() {
      m.clearSelection(), k.clearActiveItem();
    }
    function ce() {
      return b.selectedItems.value;
    }
    function ue() {
      return b.selectedItems.value.map((B) => B[n.idField.value]);
    }
    function fe(B) {
      m.selectedValues.value = B, b.updateSelectedItems();
    }
    function de() {
      return m.currentSelectedDataId.value;
    }
    function pe(B) {
      I.activeRowById(B);
    }
    e.expose({
      search: j,
      updateDataSource: N,
      clearSelection: re,
      getSelections: ce,
      updateSelectionByIds: fe,
      getSelectionIds: ue,
      activeRowById: pe,
      getCurrentRowId: de
    });
    function ve(B) {
      t.multiSelect && (B.preventDefault(), B.stopPropagation());
    }
    return () => o("div", {
      class: a.value,
      onClick: ve
    }, [S(), o("div", {
      ref: s,
      class: "f-list-view-content",
      onMouseover: () => {
        f.value = !0;
      },
      onMouseleave: () => {
        f.value = !1;
      }
    }, [E()]), V.value && o("div", {
      class: "f-list-view-footer"
    }, [e.slots.footer && e.slots.footer()])]);
  }
}), H = /* @__PURE__ */ q({
  name: "FTransfer",
  props: W,
  emits: ["change", "activeChange"],
  setup(t, e) {
    const s = g(t.identifyField), u = g("已选："), f = g("项数据"), i = g(t.displayType), r = g(!1), y = g(t.dataSource), T = g(t.textField), n = g(t.selections || []), p = P(() => n.value.map((S) => S[s.value])), d = /* @__PURE__ */ new Map(), c = g(), m = g();
    let M;
    function D() {
      const S = /* @__PURE__ */ new Map(), k = t.selectionValues || [];
      k.length && k.reduce((b, E) => (b.set(E, !0), b), S);
      const h = t.selections || [];
      h.length && (S.clear(), h.reduce((b, E) => (b.set(E[s.value], !0), b), S)), n.value.length || (n.value = y.value.filter((b) => S.has(b[s.value])).map((b) => Object.assign({}, b))), y.value.forEach((b) => {
        const E = b[s.value], j = S.has(E);
        b.checked = j, j && d.set(E, b);
      });
    }
    D();
    const I = P(() => i.value === "List"), O = P(() => i.value === "Tree");
    function F(S) {
      n.value = S.map((k) => Object.assign({}, k)), e.emit("change", n.value);
    }
    function A() {
      return o(_, {
        class: "f-utils-fill",
        data: y.value,
        multiSelect: !0,
        itemClass: "f-transfer-list-item",
        textField: T.value,
        selection: {
          enableSelectRow: !0,
          multiSelect: !0,
          multiSelectMode: "OnCheckAndClick",
          showCheckbox: !0,
          showSelectAll: !1,
          showSelection: !0
        },
        draggable: !1,
        header: "Search",
        headerClass: "transfer-search-box",
        selectionValues: p.value,
        onSelectionChange: F
      }, null);
    }
    function $() {
      return o(we, {
        data: y.value,
        columns: t.columns,
        virtualized: t.virtualized,
        rowOption: t.rowOption,
        textField: T.value,
        selection: {
          enableSelectRow: !0,
          multiSelect: !0,
          multiSelectMode: "OnCheckAndClick",
          showCheckbox: !0,
          showSelectAll: !1,
          showSelection: !0
        },
        selectionValues: p.value,
        onSelectionChange: F
      }, null);
    }
    function L() {
      return o("div", {
        class: "f-utils-fill option-pane d-flex flex-column"
      }, [o("div", {
        class: "f-utils-flex-column option-pane-content f-utils-fill"
      }, [o("div", {
        class: "container columns-box d-flex f-utils-fill"
      }, [I.value && A(), O.value && $()])])]);
    }
    function v(S) {
      const k = S[s.value];
      if (k !== null || k !== void 0) {
        n.value = n.value.filter((b) => b[s.value] !== k);
        const h = d.get(k);
        h && (h.checked = !1, d.delete(k)), e.emit("change", n.value);
      }
    }
    function C(S) {
      S.forEach((k) => {
        Object.keys(k).forEach((h) => {
          h.indexOf("__fv") > -1 && delete k[h];
        });
      });
    }
    Q(n, (S) => {
      C(S), c.value.updateDataSource(S);
      const k = M == null ? void 0 : M[s.value], h = S.find((b) => k === b[s.value]);
      h ? c.value.activeRowById(h[s.value]) : (M = null, c.value.activeRowById(""));
    });
    function l(S) {
      const k = /* @__PURE__ */ new Map();
      n.value.reduce((h, b) => (h.set(b[s.value], b), h), k), n.value = S.map((h) => k.get(h[s.value])), e.emit("change", n.value);
    }
    function a(S) {
      M = S[0], e.emit("activeChange", S);
    }
    function V() {
      var S;
      return C(n.value), o(_, {
        ref: c,
        columns: t.columns,
        style: "flex:1",
        data: n.value,
        draggable: !0,
        view: "DraggableView",
        "keep-order": !0,
        textField: T.value,
        itemClass: "draggable-item--text-truncate",
        onChange: l,
        onRemoveItem: v,
        onActiveChange: a
      }, {
        itemContent: (S = e.slots) != null && S.text ? (k) => {
          var h;
          return ((h = e.slots) == null ? void 0 : h.text) && e.slots.text(k);
        } : null
      });
    }
    function w() {
      return o("div", {
        class: "f-utils-fill selection-pane d-flex flex-column"
      }, [o("div", {
        class: "f-utils-flex-column selection-pane-content f-utils-fill"
      }, [o("div", {
        class: "selection-pane-title"
      }, [o("span", {
        class: "selection-title"
      }, [u.value]), o("span", {
        class: "selection-count"
      }, [n.value && n.value.length]), o("span", {
        class: "selection-item-title"
      }, [f.value])]), o("div", {
        class: "container columns-box f-utils-fill d-flex"
      }, [V()])])]);
    }
    const R = P(() => ({
      "f-transfer": !0,
      row: !0,
      "f-utils-fill": r.value
    }));
    return Z(() => {
      m.value && m.value.parentElement && getComputedStyle(m.value.parentElement).display === "flex" && (r.value = !0);
    }), () => o("div", {
      ref: m,
      class: R.value,
      style: "height:480px"
    }, [L(), w()]);
  }
});
function Ot(t, e, s) {
  var C;
  const u = "", f = "", i = g();
  function r() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function y() {
    return !1;
  }
  function T() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function n() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function p(l) {
    if (!l || !l.value)
      return null;
    if (l.value.schema && l.value.schema.type === "component")
      return l.value;
    const a = g(l == null ? void 0 : l.value.parent), V = p(a);
    return V || null;
  }
  function d(l = e) {
    var R;
    const { componentInstance: a, designerItemElementRef: V } = l;
    if (!a || !a.value)
      return null;
    const { getCustomButtons: w } = a.value;
    return a.value.canMove || w && ((R = w()) != null && R.length) ? V : d(l.parent);
  }
  function c(l) {
    return !!s;
  }
  function m() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function M() {
  }
  function D(l, a) {
    var V;
    !l || !a || (V = e == null ? void 0 : e.setupContext) == null || V.emit("dragEnd");
  }
  function I(l, a) {
    const { componentType: V } = l;
    let w = ne(V, l, a);
    const R = V.toLowerCase().replace(/-/g, "_");
    return w && !w.id && w.type === V && (w.id = `${R}_${Math.random().toString().slice(2, 6)}`), w;
  }
  function O(l) {
  }
  function F(...l) {
  }
  function A(l) {
    if (!l)
      return;
    const a = e == null ? void 0 : e.schema, { formSchemaUtils: V } = l;
    if (a && V.getExpressions().length) {
      const w = V.getExpressions().findIndex((R) => R.target === a.id);
      w > -1 && V.getExpressions().splice(w, 1);
    }
  }
  function $(l) {
    A(l), e != null && e.schema.contents && e.schema.contents.map((a) => {
      let V = a.id;
      a.type === "component-ref" && (V = a.component);
      const w = t.value.querySelectorAll(`#${V}-design-item`);
      w != null && w.length && Array.from(w).map((R) => {
        var S;
        (S = R == null ? void 0 : R.componentInstance) != null && S.value.onRemoveComponent && R.componentInstance.value.onRemoveComponent(l);
      });
    });
  }
  function L() {
  }
  function v(l) {
  }
  return i.value = {
    canMove: r(),
    canSelectParent: y(),
    canDelete: T(),
    canNested: !n(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: t,
    parent: (C = e == null ? void 0 : e.parent) == null ? void 0 : C.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: u,
    designerClass: f,
    canAccepts: c,
    getBelongedComponentInstance: p,
    getDraggableDesignItemElement: d,
    getDraggingDisplayText: m,
    getPropConfig: F,
    getDragScopeElement: M,
    onAcceptMovedChildElement: D,
    onChildElementMovedOut: O,
    addNewChildComponentSchema: I,
    triggerBelongedComponentToMoveWhenMoved: g(!1),
    triggerBelongedComponentToDeleteWhenDeleted: g(!1),
    onRemoveComponent: $,
    getCustomButtons: L,
    onPropertyChanged: v
  }, i;
}
const Ft = /* @__PURE__ */ q({
  name: "FTransferDesign",
  props: W,
  emits: ["change"],
  setup(t, e) {
    const s = g(t.identifyField), u = g("已选："), f = g("项数据"), i = g(t.displayType), r = g(!1), y = g(t.dataSource), T = g(t.selections || []), n = P(() => T.value.map((V) => V[s.value])), p = /* @__PURE__ */ new Map();
    function d() {
      const V = /* @__PURE__ */ new Map(), w = t.selectionValues || [];
      w.length && w.reduce((S, k) => (S.set(k, !0), S), V);
      const R = t.selections || [];
      R.length && (V.clear(), R.reduce((S, k) => (S.set(k[s.value], !0), S), V)), T.value.length || (T.value = y.value.filter((S) => V.has(S[s.value])).map((S) => Object.assign({}, S))), y.value.forEach((S) => {
        const k = S[s.value], h = V.has(k);
        S.checked = h, h && p.set(k, S);
      });
    }
    d();
    const c = P(() => i.value === "List"), m = P(() => i.value === "Tree");
    function M(V) {
      T.value = V.map((w) => Object.assign({}, w)), e.emit("change", T.value);
    }
    function D() {
      return o(_, {
        class: "f-utils-fill",
        data: y.value,
        "multi-select": !0,
        draggable: !1,
        header: "Search",
        headerClass: "transfer-search-box",
        "selection-values": n.value,
        onSelectionChange: M
      }, {
        default: () => [U(" ")]
      });
    }
    function I() {
      return o(G, null, null);
    }
    function O() {
      return o("div", {
        class: "f-utils-fill option-pane d-flex flex-column"
      }, [o("div", {
        class: "f-utils-flex-column option-pane-content f-utils-fill"
      }, [o("div", {
        class: "container columns-box d-flex f-utils-fill"
      }, [c.value && D(), m.value && I()])])]);
    }
    function F(V) {
      const w = V[s.value];
      if (w !== null || w !== void 0) {
        T.value = T.value.filter((S) => S[s.value] !== w);
        const R = p.get(w);
        R && (R.checked = !1, p.delete(w)), e.emit("change", T.value);
      }
    }
    function A(V) {
      const w = /* @__PURE__ */ new Map();
      T.value.reduce((R, S) => (R.set(S[s.value], S), R), w), T.value = V.map((R) => w.get(R[s.value])), e.emit("change", T.value);
    }
    function $() {
      return o(_, {
        style: "flex:1",
        data: T.value,
        draggable: !0,
        view: "DraggableView",
        "keep-order": !0,
        onChange: A,
        onRemoveItem: F
      }, {
        default: () => [U(" ")]
      });
    }
    function L() {
      return o("div", {
        class: "f-utils-fill selection-pane d-flex flex-column"
      }, [o("div", {
        class: "f-utils-flex-column selection-pane-content f-utils-fill"
      }, [o("div", {
        class: "selection-pane-title"
      }, [o("span", {
        class: "selection-title"
      }, [u.value]), o("span", {
        class: "selection-count"
      }, [T.value && T.value.length]), o("span", {
        class: "selection-item-title"
      }, [f.value])]), o("div", {
        class: "container columns-box f-utils-fill d-flex"
      }, [$()])])]);
    }
    const v = P(() => ({
      transfer: !0,
      row: !0,
      "f-utils-fill": r.value
    })), C = g(), l = ye("design-item-context"), a = Ot(C, l);
    return Z(() => {
      C.value.componentInstance = a;
    }), e.expose(a.value), () => o("div", {
      ref: C,
      class: v.value,
      style: "height:480px"
    }, [O(), L()]);
  }
});
H.register = (t, e, s) => {
  t.transfer = H, e.transfer = oe;
};
H.registerDesigner = (t, e, s) => {
  t.transfer = Ft, e.transfer = oe;
};
const Lt = be(H);
export {
  H as FTransfer,
  Lt as default,
  oe as propsResolver,
  W as transferProps
};