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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as u, computed as A, createVNode as o, Fragment as $, watch as U, withModifiers as ke, withDirectives as Ve, vModelText as Fe, defineComponent as Q, onMounted as ce, inject as Te, createTextVNode as ne } from "vue";
import Re from "../tree-view/index.esm.js";
import { LocaleService as X } from "../locale/index.esm.js";
import { resolveAppearance as Me, createPropsResolver as De } from "../dynamic-resolver/index.esm.js";
import { getCustomStyle as ae, getCustomClass as J, withInstall as Oe } from "../common/index.esm.js";
import { useFilter as xe, useIdentify as Be, useHierarchy as je, useGroupData as Ae, useDataView as Le, useSelection as He, usePagination as _e, useRow as Pe, useEdit as Ee, useVisualDataBound as Ge, useVisualDataCell as ze, useVisualDataRow as Ne, useVisualGroupRow as Ue, useVisualSummaryRow as We, useVisualData as $e, useSidebar as Ye, useColumn as qe, useVirtualScroll as Ke } from "../data-view/index.esm.js";
import { FCheckbox as Z } from "../checkbox/index.esm.js";
import { cloneDeep as oe } from "lodash-es";
import { useDesignerComponent as Xe } from "../designer-canvas/index.esm.js";
const Je = /* @__PURE__ */ new Map([
  ["appearance", Me]
]);
function Qe(e, n, d) {
  return n;
}
const Ze = "transfer", et = "A Farris Component", tt = "object", lt = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, nt = {
  title: Ze,
  description: et,
  type: tt,
  categories: lt
}, at = "https://json-schema.org/draft/2020-12/schema", ot = "https://farris-design.gitee.io/transfer.schema.json", st = "transfer", it = "A Farris Component", ct = "object", ut = {
  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
  }
}, rt = [
  "id",
  "type"
], dt = {
  $schema: at,
  $id: ot,
  title: st,
  description: it,
  type: ct,
  properties: ut,
  required: rt
}, ee = {
  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%" }
    ]
  },
  /** 删除右侧已选数据前的检查方法，返回值为true时可以删除当前数据 */
  checkBeforeRemoveItem: { type: Function, default: null },
  /** 已选项的样式*/
  selectedItemClass: {
    Type: [String, Function],
    default: "draggable-item--text-truncate",
    validator: (e) => typeof e == "string" || typeof e == "function"
  }
}, ue = De(ee, dt, Je, Qe, nt), ft = {
  /** 列集合 */
  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 as PropType<MultiSelectMode>, 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, Function],
    default: "",
    validator: (e) => typeof e == "string" || typeof e == "function"
  },
  itemStyle: {
    type: [String, Function],
    default: "",
    validator: (e) => typeof e == "string" || typeof e == "function"
  },
  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 },
  /** 删除数据前的检查方法，返回值为true时可以删除当前数据 */
  checkBeforeRemoveItem: { type: Function, default: null },
  /** 头部模板 */
  headerTemplate: { type: Object },
  /** 内容模板 */
  contentTemplate: { type: Object },
  /** 底部模板 */
  footerTemplate: { type: Object },
  /** 空数据模板 */
  emptyTemplate: { type: Object },
  /** 分页 */
  pagination: { type: Object, default: { enable: !1, size: 20 } },
  /** 定义属性，开启时，当多选开启时，展示选中项的背景色等样式；不开启时，不展示选中项的背景色等样式 */
  showActiveWhenMultiSelect: { type: Boolean, default: !0 },
  /** 允许删除 */
  allowDelete: { type: Boolean, default: !0 }
};
function vt(e, n) {
  function d(m) {
    const r = [];
    let s = m.nextNode();
    for (; s; )
      r.push(s), s = m.nextNode();
    return r;
  }
  function M(m, r) {
    const s = document.createTreeWalker(m, NodeFilter.SHOW_TEXT);
    return d(s).map((g) => ({ textNode: g, text: (g.textContent || "").toLocaleLowerCase() })).map(({ textNode: g, text: S }) => {
      const V = [];
      let h = 0;
      for (; h < S.length; ) {
        const b = S.indexOf(r, h);
        if (b === -1)
          break;
        V.push(b), h = b + r.length;
      }
      return V.map((b) => {
        const R = new Range();
        return R.setStart(g, b), R.setEnd(g, b + r.length), R;
      });
    }).flat();
  }
  function I(m) {
    if (!CSS.highlights || (CSS.highlights.clear(), !m || !n))
      return;
    const r = M(n.value, m.toLocaleLowerCase()), s = new Highlight(...r);
    CSS.highlights.set("search-result", s);
  }
  return { search: I };
}
function se(e, n, d, M, I, m, r, s, p, D) {
  const k = u(e.size), g = u(e.textField), S = u(e.titleField), V = u(e.disableField), h = A(() => {
    var i, v;
    return ((i = e.selection) == null ? void 0 : i.multiSelect) && ((v = e.selection) == null ? void 0 : v.showCheckbox);
  }), {
    onMouseenterItem: b,
    onMouseoverItem: R,
    onMouseoutItem: y
  } = m, {
    getKey: w,
    listViewItemClass: L,
    listViewItemStyle: x,
    onCheckItem: _,
    onClickItem: H
  } = r, j = A(() => {
    const i = {
      "text-overflow": "ellipsis",
      overflow: "hidden",
      "white-space": "nowrap"
    };
    return e.itemClass ? i : {
      margin: k.value === "small" ? "0.25rem 0" : "8px 0",
      ...i
    };
  });
  function F(i, v, C) {
    return i.checked = s.findIndexInSelectedItems(i) > -1, o("li", {
      class: L(i, v),
      id: w(i, v),
      key: w(i, v),
      style: x(i, v),
      onClick: (T) => H(i, v, T),
      onMouseenter: (T) => b(T, i, v),
      onMouseover: (T) => R(T, i, v),
      onMouseout: (T) => y(T, i, v)
    }, [h.value && o("div", {
      class: "f-list-select",
      onClick: (T) => T.stopPropagation()
    }, [o(Z, {
      id: "list-" + w(i, v),
      customClass: "listview-checkbox float-left",
      disabled: i[V.value],
      checked: i.checked,
      "onUpdate:checked": (T) => i.checked = T,
      onChange: (T) => {
        _(i, v, !T.checked);
      }
    }, null)]), o("div", {
      class: "f-list-content"
    }, [o("div", {
      class: e.itemContentClass,
      style: j.value,
      title: i.raw[S.value] || i.raw[g.value]
    }, [i.raw[g.value]])])]);
  }
  return {
    renderItem: F
  };
}
function mt(e, n, d, M, I, m, r, s, p, D) {
  const k = u(e.multiSelect), g = u(e.disableField), S = u(e.textField), {
    onMouseenterItem: V,
    onMouseoverItem: h,
    onMouseoutItem: b
  } = m, {
    getKey: R,
    listViewItemClass: y,
    listViewItemStyle: w,
    onCheckItem: L,
    onClickItem: x,
    updateSelectedItems: _
  } = r;
  function H(F, i, v) {
    return e.contentTemplate ? o($, null, [e.contentTemplate({
      item: F.raw,
      index: i,
      selectedItem: v
    })]) : n.slots.content ? o($, null, [n.slots.content && n.slots.content({
      item: F.raw,
      index: i,
      selectedItem: v
    })]) : o("div", {
      style: "margin: 10px 0;"
    }, [F.raw[S.value || "name"]]);
  }
  function j(F, i, v) {
    return o("li", {
      class: y(F, i),
      id: R(F, i),
      key: R(F, i),
      style: w(F, i),
      onClick: (C) => x(F, i, C),
      onMouseenter: (C) => V(C, F, i),
      onMouseover: (C) => h(C, F, i),
      onMouseout: (C) => b(C, F, i)
    }, [k.value && o("div", {
      class: "f-list-select",
      onClick: (C) => C.stopPropagation()
    }, [o(Z, {
      id: "list-" + R(F, i),
      customClass: "listview-checkbox",
      disabled: F[g.value],
      checked: F.checked,
      "onUpdate:checked": (C) => F.checked = C,
      onChange: (C) => {
        L(F, i, !C.checked), _();
      }
    }, null)]), o("div", {
      class: "f-list-content"
    }, [H(F, i, v)])]);
  }
  return {
    renderItem: j
  };
}
function gt(e, n, d, M, I, m, r, s, p, D) {
  const k = u(e.multiSelect), g = u(e.disableField), S = u(e.textField), {
    onMouseenterItem: V,
    onMouseoverItem: h,
    onMouseoutItem: b
  } = m, {
    getKey: R,
    listViewItemClass: y,
    onCheckItem: w,
    onClickItem: L
  } = r, {
    dragstart: x,
    dragenter: _,
    dragover: H,
    dragend: j
  } = M, {
    removeItem: F
  } = p, i = A(() => ({
    margin: k.value ? "10px 0" : "10px 0px 10px 14px"
  }));
  function v(t, l = "") {
    const f = t.target;
    f.title = f.scrollWidth > f.clientWidth ? l : "";
  }
  function C(t) {
    return o("div", {
      style: i.value,
      onMouseenter: (l) => v(l, t.raw[S.value || "name"])
    }, [t.raw[S.value || "name"]]);
  }
  function T() {
    return n.slots.itemContent ? n.slots.itemContent : C;
  }
  const O = T();
  function a(t, l, f) {
    return o("li", {
      class: y(t, l),
      id: R(t, l),
      key: R(t, l),
      onClick: (c) => L(t, l, c),
      onMouseenter: (c) => V(c, t, l),
      onMouseover: (c) => h(c, t, l),
      onMouseout: (c) => b(c, t, l),
      draggable: "true",
      onDragstart: (c) => x(c, t, l),
      onDragenter: (c) => _(c, l),
      onDragend: (c) => j(c, t),
      onDragover: (c) => H(c)
    }, [k.value && o("div", {
      class: "f-list-select",
      onClick: (c) => c.stopPropagation()
    }, [o(Z, {
      id: "list-" + R(t, l),
      customClass: "listview-checkbox",
      disabled: t[g.value],
      checked: t.checked,
      "onUpdate:checked": (c) => t.checked = c,
      onChange: (c) => w(t, l, !c.checked)
    }, null)]), o("div", {
      class: "f-list-content"
    }, [O(t)]), e.allowDelete && o("div", {
      class: "f-list-remove",
      onClick: (c) => {
        c.stopPropagation(), F(l);
      }
    }, [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: a
  };
}
function pt(e, n, d, M, I, m, r, s, p, D) {
  var R;
  const k = u(((R = e.group) == null ? void 0 : R.groupFields) || []), {
    collpaseGroupIconClass: g
  } = I, {
    toggleGroupRow: S
  } = D;
  function V(y, w) {
    y.stopPropagation(), w.collapse = !w.collapse, d.value = S(w.collapse ? "collapse" : "expand", w, d.value);
  }
  function h(y, w, L) {
    return n.slots.group ? o($, null, [n.slots.content && n.slots.group({
      item: y.raw,
      index: w,
      selectedItem: L
    })]) : o("div", {
      class: "f-navlookup-recentHeader",
      onClick: (x) => V(x, y)
    }, [o("div", {
      class: "fv-grid-group-row-icon"
    }, [o("span", {
      class: g(y)
    }, null)]), o("div", {
      class: "f-navlookup-recommandLabel"
    }, [y.raw[k.value[y.layer]]])]);
  }
  function b(y, w, L) {
    return y.layer > -1 && h(y, w, L);
  }
  return {
    renderItem: b
  };
}
function ht(e, n, d, M) {
  const { dataView: I } = d, { updateSelectedItems: m } = M;
  function r(s) {
    if (s > -1 && s < I.value.length) {
      if (e != null && e.checkBeforeRemoveItem && !e.checkBeforeRemoveItem(I.value[s]))
        return;
      const p = I.value.splice(s, 1);
      m(), n.emit("removeItem", p[0]);
    }
  }
  return { removeItem: r };
}
function yt(e, n, d, M, I, m, r, s, p, D) {
  const k = u(e.view), g = u(e.view === "CardView"), S = u({}), V = ht(e, n, M, p), h = A(() => ({
    "f-list-view-group": !0,
    "f-list-view-group-multiselect": e.multiSelect,
    "d-flex": g.value,
    "flex-wrap": g.value
  })), b = A(() => !!d.value && d.value.length > 0), R = A(() => d.value.length === 0);
  A(() => R.value && !n.slots.empty);
  function y() {
    return k.value === "SingleView" ? se : k.value === "DraggableView" ? gt : (k.value === "ContentView" || k.value === "CardView") && (e.contentTemplate || n.slots.content) ? mt : se;
  }
  const w = y(), {
    renderItem: L
  } = w(e, n, d, D, I, m, p, r, V, s), {
    renderItem: x
  } = pt(e, n, d, D, I, m, p, r, V, s), _ = [L, x];
  function H() {
    return d.value.filter((i) => i.visible !== !1).map((i, v) => _[i.type](i, v, S));
  }
  function j() {
    return o("div", {
      class: "f-list-view-emptydata",
      style: "margin: 0 auto;"
    }, [o("p", {
      class: "f-empty-title"
    }, [e.emptyTemplate ? e.emptyTemplate() : n.slots.empty ? n.slots.empty() : X.getLocaleValue("listView.emptyMessage")])]);
  }
  function F() {
    return o("ul", {
      class: h.value,
      style: "list-style: none;"
    }, [b.value && H(), R.value && j()]);
  }
  return {
    renderListArea: F
  };
}
function St(e, n, d) {
  function M() {
    return n.slots.header && o("div", {
      class: "f-list-view-header"
    }, [n.slots.header()]);
  }
  return {
    renderHeader: M
  };
}
function ie(e, n, d) {
  const M = u(e.headerClass), I = u(e.placeholder), m = u(""), r = A(() => !m.value), s = A(() => !!m.value);
  function p(S) {
    m.value = "";
  }
  U(m, (S) => {
    e.enableHighlightSearch && d.search(S), n.emit("afterSearch", S);
  });
  const D = A(() => {
    const S = {
      "form-group": !0,
      "farris-form-group": !0
    };
    return M.value && M.value.split(" ").reduce((h, b) => (h[b] = !0, h), S), S;
  });
  function k(S) {
  }
  function g() {
    return o("div", {
      class: "f-list-view-header",
      onClick: ke(() => k, ["prevent", "stop"])
    }, [o("div", {
      class: D.value
    }, [o("div", {
      class: "farris-input-wrap"
    }, [o("div", {
      class: "f-cmp-inputgroup"
    }, [o("div", {
      class: "input-group f-state-editable"
    }, [Ve(o("input", {
      class: "form-control f-utils-fill text-left",
      "onUpdate:modelValue": (S) => m.value = S,
      name: "input-group-value",
      type: "text",
      placeholder: I.value,
      autocomplete: "off"
    }, null), [[Fe, m.value]]), o("div", {
      class: "input-group-append"
    }, [s.value && o("span", {
      class: "input-group-text input-group-clear",
      onClick: (S) => p()
    }, [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: g
  };
}
function Ct() {
  const e = u(""), n = u(-1), d = u(""), M = u(-1), I = u(!1);
  function m(g, S, V) {
    M.value = V;
  }
  function r(g, S, V) {
    I.value || (M.value = V);
  }
  function s(g, S, V) {
    M.value = -1;
  }
  function p() {
    I.value = !0;
  }
  function D() {
    I.value = !1;
  }
  function k() {
    n.value = -1, e.value = "";
  }
  return {
    activeIndex: n,
    focusedItemId: d,
    hoverIndex: M,
    clearActiveItem: k,
    onMouseenterItem: m,
    onMouseoverItem: r,
    onMouseoutItem: s,
    resumeHover: D,
    suspendHover: p
  };
}
function wt(e, n, d, M, I) {
  const m = u(e.idField), { dataView: r } = d, s = u(-1), p = u(!1), { activeIndex: D, focusedItemId: k, hoverIndex: g, resumeHover: S, suspendHover: V } = M;
  let h, b = 0, R = 0, y = null, w = null;
  const L = 10, x = 50;
  function _(t) {
    if (!t)
      return null;
    const { overflowY: l } = getComputedStyle(t);
    return l === "auto" || l === "scroll" ? t : _(t.parentElement);
  }
  function H(t, l) {
    w && clearInterval(w), w = window.setInterval(() => {
      l === "up" ? t.scrollTop -= L : t.scrollTop += L;
    }, 16);
  }
  function j() {
    w && (clearInterval(w), w = null);
  }
  function F(t) {
    const l = t.target;
    if (y || (y = _(l)), !y) {
      j();
      return;
    }
    const f = y.getBoundingClientRect(), c = t.clientY, P = c - f.top, E = f.bottom - c;
    P < x && y.scrollTop > 0 ? H(y, "up") : E < x && y.scrollTop < y.scrollHeight - y.clientHeight ? H(y, "down") : j();
  }
  function i(t, l) {
    const f = t - b, c = l - R;
    h.style.left = parseInt(h.style.left) + f + "px", h.style.top = parseInt(h.style.top) + c + "px", b = t, R = l;
  }
  function v(t) {
    const { left: l, top: f } = t.getBoundingClientRect(), c = t.cloneNode(!0);
    return c.className = c.className + " f-listview-drag-moving", c.style.cssText = `
        position:absolute;
        left:${l}px;
        top:${document.documentElement.scrollTop ? f + document.documentElement.scrollTop : f}px;
        z-index: 999999;
        pointer-events: none;
        border-radius: 10px;
        margin: 4px 2px;    
        display: flex;
        align-items: center;
        float: none;
        text-align: initial;
        width:${getComputedStyle(t).width};
        height:${getComputedStyle(t).height};
        `, c.children[0].style.cssText = "padding: 0 0 0 14px", c.children[0].children[0].style.cssText = `
        margin: 10px 0px 10px 14px;
        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
        `, c.children[1].style.cssText = "flex:1 1 auto; width:100%", c.children[2].style.cssText = "padding: 0 14px 0 0", c.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(c), c;
  }
  function C(t, l, f) {
    if (t.stopPropagation(), V(), l) {
      if (h = v(t.target), t.dataTransfer) {
        const c = new Image();
        c.src = "", t.dataTransfer.setDragImage(c, 0, 0);
      }
      b = t.pageX, R = t.pageY, setTimeout(() => {
        s.value = f, p.value = !0, l.moving = !0;
      });
    }
  }
  function T(t, l) {
    if (t.preventDefault(), s.value !== l && s.value !== -1) {
      const f = r.value[s.value], c = I.value[s.value];
      f && c && (r.value.splice(s.value, 1), r.value.splice(l, 0, f), I.value.splice(s.value, 1), I.value.splice(l, 0, c), I.value.forEach((P, E) => {
        P.index = E, P.raw.__fv_index__ = E;
      }), s.value = l, i(t.pageX, t.pageY));
    }
  }
  function O(t) {
    t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), i(t.pageX, t.pageY), F(t);
  }
  function a(t, l) {
    var c, P;
    j(), y = null, l && (l.moving = !1, h && (document.body.removeChild(h), h = null)), r.value.forEach((E, z) => {
      E.__fv_index__ = z;
    }), I.value.forEach((E, z) => {
      E.index = z, E.raw && (E.raw.__fv_index__ = z);
    }), p.value = !1, S();
    const f = ((c = l.raw) == null ? void 0 : c.__fv_index__) ?? 0;
    g.value = f, D.value = f, k.value = (P = l.raw) == null ? void 0 : P[m.value], n.emit("change", r.value), n.emit("activeChange", [l.raw]);
  }
  return {
    dragstart: C,
    dragenter: T,
    dragover: O,
    dragend: a,
    isDragging: p
  };
}
function It(e, n, d, M, I, m) {
  const r = u(e.idField), s = u(e.disableField), p = u(e.draggable);
  u(e.itemClass);
  const D = u(e.selection.multiSelect ?? !1), k = u(e.selection.multiSelectMode), { isDragging: g } = M, { activeIndex: S, focusedItemId: V, hoverIndex: h } = I, { clearSelection: b, getSelectedItems: R, toggleSelectItem: y, currentSelectedDataId: w, multiSelectOnlyOnCheck: L } = m, x = u(R()), _ = (a) => x.value.length === 0 ? !1 : x.value.some((t) => {
    let l = "";
    return t.data ? l = t.data[r.value] : l = t[r.value], l === a;
  });
  function H() {
    x.value = R();
  }
  function j(a, t) {
    return a.raw[r.value] != null ? a.raw[r.value] + "_" + t : "";
  }
  function F(a, t) {
    const l = {
      "f-list-view-group-item": !0,
      "f-list-view-draggable-item": p.value,
      "f-un-click": !a.checked,
      "f-un-select": !!a.raw[s.value],
      "f-listview-active": (
        // 多选
        D.value && _(j(a, t)) && e.showActiveWhenMultiSelect || // 单选
        !D.value && a.raw[r.value] === w.value || D.value && !e.showActiveWhenMultiSelect && a.raw[r.value] === w.value
      ),
      "f-listview-hover": !g.value && t === h.value,
      moving: !!a.moving
    };
    if (typeof e.itemClass == "string")
      return J(l, e.itemClass);
    if (typeof e.itemClass == "function") {
      const f = e.itemClass(a);
      return J(l, f);
    }
    return l;
  }
  function i(a, t) {
    const l = {};
    if (typeof e.itemStyle == "string")
      return ae(l, e.itemStyle);
    if (typeof e.itemStyle == "function") {
      const f = e.itemStyle(a);
      return ae(l, f);
    }
    return l;
  }
  const v = A(() => !D.value);
  function C(a, t, l) {
    a.checked = l, !a.raw[s.value] && (v.value && (V.value = a.raw[r.value]), y(a));
  }
  const T = A(() => !D.value || D.value && k.value === "OnCheckAndClick");
  function O(a, t, l) {
    if (a.raw[s.value]) {
      l == null || l.preventDefault(), l == null || l.stopPropagation();
      return;
    }
    w.value = a.raw[r.value], V.value = a.raw[r.value], S.value = t, T.value && (y(a), H()), n.emit("clickItem", { data: x.value, index: t, dataItem: a.raw }), n.emit("activeChange", x.value);
  }
  return {
    getKey: j,
    selectedItems: x,
    listViewItemClass: F,
    listViewItemStyle: i,
    updateSelectedItems: H,
    onCheckItem: C,
    onClickItem: O
  };
}
const Y = /* @__PURE__ */ Q({
  name: "FListView",
  props: ft,
  emits: ["afterSearch", "checkValuesChange", "clickItem", "selectItem", "unSelectItem", "selectionChange", "removeItem", "change", "activeChange", "pageIndexChanged", "pageSizeChanged", "changed", "selectionUpdate"],
  setup(e, n) {
    var le;
    const d = u(!1), M = u(), I = u(!0), m = u(((le = e.rowOption) == null ? void 0 : le.rowHeight) || 28), r = u(!1), s = u([]), p = 0, D = u(e.columns), k = xe(e, n), g = Be(e), S = je(e), V = Ae(e, g), h = Le(e, /* @__PURE__ */ new Map(), k, S, g), b = He(e, h, g, s, n), R = vt(e, M), y = _e(e, h), w = A(() => h.dataView.value.length), L = Pe(e, n, b, g), x = Ee(e, n, g, L, s), _ = Ge(e, h, m), H = ze(e, {}, _), j = Ne(e, h, x, S, g, _, H, m), F = Ue(e, g, H, j), i = We(e, g, H, j), v = $e(e, D, h, w, p, j, F, i), {
      getVisualData: C
    } = v;
    s.value = C(0, w.value + p - 1);
    const T = A(() => {
      const B = {
        "f-list-view": !0,
        "f-list-view-multiple": e.multiSelect
      };
      return e.size !== "default" && (B[`${e.size}-item`] = !0), J(B, e.customClass);
    }), O = A(() => !!n.slots.footer || I.value);
    function a() {
      return e.header === "SearchBar" ? ie : e.header === "ContentHeader" ? St : ie;
    }
    const t = a(), {
      renderHeader: l
    } = t(e, n, R), f = Ct(), c = wt(e, n, h, f, s), P = It(e, n, s, c, f, b), {
      renderListArea: E
    } = yt(e, n, s, h, V, f, b, v, P, c);
    function z(B) {
      R.search(B);
    }
    function re(B) {
      B && (h.load(B), s.value = C(0, w.value + p - 1));
    }
    function de() {
      b.clearSelection(), f.clearActiveItem();
    }
    function fe() {
      return P.selectedItems.value;
    }
    function ve() {
      return P.selectedItems.value.map((B) => B[g.idField.value]);
    }
    function te(B) {
      b.selectedValues.value = B, P.updateSelectedItems();
    }
    function me() {
      return b.currentSelectedDataId.value;
    }
    function ge(B) {
      L.activeRowById(B);
    }
    function pe(B) {
      const G = g.idField.value, N = s.value.find((K) => K.raw[G] === B), W = s.value.findIndex((K) => K.raw[G] === B);
      N && W > -1 && P.onClickItem(N, W);
    }
    function he(B) {
      const G = g.idField.value, N = s.value.find((W) => W.raw[G] === B);
      N && L.changeRow(N);
    }
    function ye(B) {
      y.updatePagination(B);
    }
    function Se(B) {
      return s.value.filter((G) => B.includes(G.raw[e.idField]));
    }
    n.expose({
      search: z,
      updateDataSource: re,
      clearSelection: de,
      getSelections: fe,
      updateSelectionByIds: te,
      getSelectionIds: ve,
      activeRowById: ge,
      getCurrentRowId: me,
      clickRowItemById: pe,
      updatePagination: ye,
      getVisibleDataByIds: Se,
      selectRowById: he
    }), U(() => e.selectionValues, (B, G) => {
      B !== G && te(B);
    });
    const Ce = Ye(e, b), {
      sidebarWidth: we,
      showSidebarCheckBox: kt
    } = Ce, Ie = qe(e, n), {
      applyColumnSorter: Vt,
      columnContext: be,
      updateColumnRenderContext: Ft
    } = Ie;
    return Ke(e, h, s, be, v, w, p, we, m, d, x), () => o("div", {
      class: T.value
    }, [l(), o("div", {
      ref: M,
      class: "f-list-view-content",
      onMouseover: () => {
        r.value || (r.value = !0);
      },
      onMouseleave: () => {
        r.value && (r.value = !1);
      }
    }, [E()]), O.value && o("div", {
      class: "f-list-view-footer"
    }, [e.footerTemplate ? e.footerTemplate() : n.slots.footer && n.slots.footer()])]);
  }
}), q = /* @__PURE__ */ Q({
  name: "FTransfer",
  props: ee,
  emits: ["change", "activeChange", "selectItem", "unSelecteItem", "removeItem"],
  setup(e, n) {
    const d = u(e.identifyField), M = u(e.displayType), I = u(!1), m = u(e.dataSource), r = u(e.textField), s = u(e.selections || []), p = A(() => s.value.map((a) => a[d.value])), D = /* @__PURE__ */ new Map(), k = u(), g = u(), S = u();
    let V;
    function h() {
      const a = /* @__PURE__ */ new Map(), t = e.selectionValues || [];
      t.length && t.reduce((f, c) => (f.set(c, !0), f), a);
      const l = e.selections || [];
      l.length && (a.clear(), l.reduce((f, c) => (f.set(c[d.value], !0), f), a)), s.value.length || (s.value = m.value.filter((f) => a.has(f[d.value])).map((f) => Object.assign({}, f))), m.value.forEach((f) => {
        const c = f[d.value], P = a.has(c);
        f.checked = P, P && D.set(c, f);
      });
    }
    h(), U(() => e.selections, (a) => {
      s.value = a, h();
    }), U(() => e.dataSource, (a) => {
      var t;
      m.value = a, h(), (t = S.value) == null || t.updateDataSource(a);
    });
    const b = A(() => M.value === "List"), R = A(() => M.value === "Tree");
    function y(a) {
      const t = oe(s.value);
      s.value = a.map((l) => Object.assign({}, l)), n.emit("change", s.value, t);
    }
    function w(a) {
      n.emit("selectItem", a);
    }
    function L(a) {
      n.emit("unSelectItem", a);
    }
    function x() {
      return o(Y, {
        class: "f-utils-fill",
        data: m.value,
        multiSelect: !0,
        itemClass: "f-transfer-list-item",
        textField: r.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,
        onSelectionUpdate: y
      }, null);
    }
    function _() {
      return o(Re, {
        ref: S,
        data: m.value,
        columns: e.columns,
        virtualized: e.virtualized,
        rowOption: e.rowOption,
        textField: r.value,
        selection: {
          enableSelectRow: !0,
          multiSelect: !0,
          multiSelectMode: "OnCheckAndClick",
          showCheckbox: !0,
          showSelectAll: !1,
          showSelection: !0
        },
        selectionValues: p.value,
        onSelectionUpdate: y,
        onSelectItem: w,
        onUnSelectItem: L
      }, null);
    }
    function H() {
      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"
      }, [b.value && x(), R.value && _()])])]);
    }
    function j(a) {
      const t = a[d.value];
      if (t !== null || t !== void 0) {
        s.value = s.value.filter((f) => f[d.value] !== t);
        const l = D.get(t);
        l && (l.checked = !1, D.delete(t)), n.emit("change", s.value), n.emit("removeItem", a);
      }
    }
    U(s, (a) => {
      k.value.updateDataSource(oe(a));
      const t = V == null ? void 0 : V[d.value], l = a.find((f) => t === f[d.value]);
      l ? k.value.activeRowById(l[d.value]) : (V = null, k.value.activeRowById(""));
    });
    function F(a) {
      const t = /* @__PURE__ */ new Map();
      s.value.reduce((l, f) => (l.set(f[d.value], f), l), t), s.value = a.map((l) => t.get(l[d.value])), n.emit("change", s.value);
    }
    function i(a) {
      V = a[0], n.emit("activeChange", a);
    }
    function v() {
      var a;
      return o(Y, {
        ref: k,
        columns: e.columns,
        style: "flex:1",
        data: s.value,
        draggable: !0,
        view: "DraggableView",
        "keep-order": !0,
        textField: r.value,
        itemClass: e.selectedItemClass,
        onChange: F,
        onRemoveItem: j,
        onActiveChange: i,
        checkBeforeRemoveItem: e.checkBeforeRemoveItem
      }, {
        itemContent: (a = n.slots) != null && a.text ? (t) => {
          var l;
          return ((l = n.slots) == null ? void 0 : l.text) && n.slots.text(t);
        } : null
      });
    }
    function C() {
      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 d-flex align-items-center p-0 pl-2",
        style: "height: 36px;"
      }, [o("span", {
        class: "selection-title"
      }, [X.getLocaleValue("transfer.selectedStart")]), o("span", {
        class: "selection-count"
      }, [s.value && s.value.length]), o("span", {
        class: "selection-item-title"
      }, [X.getLocaleValue("transfer.selectedEnd")])]), o("div", {
        class: "container columns-box f-utils-fill d-flex"
      }, [v()])])]);
    }
    const T = A(() => ({
      "f-transfer": !0,
      row: !0,
      "f-utils-fill": I.value
    })), O = A(() => ({
      height: I.value ? "100%" : "480px"
    }));
    return ce(() => {
      g.value && g.value.parentElement && getComputedStyle(g.value.parentElement).display === "flex" && (I.value = !0);
    }), n.expose({
      selectRowById: (a) => {
        var t;
        (t = k.value) == null || t.clickRowItemById(a);
      }
    }), () => o("div", {
      ref: g,
      class: T.value,
      style: O.value
    }, [n.slots.children ? n.slots.children({
      selections: s.value
    }) : H(), C()]);
  }
}), bt = /* @__PURE__ */ Q({
  name: "FTransferDesign",
  props: ee,
  emits: ["change"],
  setup(e, n) {
    const d = u(e.identifyField), M = u("已选："), I = u("项数据"), m = u(e.displayType), r = u(!1), s = u(e.dataSource), p = u(e.selections || []), D = A(() => p.value.map((v) => v[d.value])), k = /* @__PURE__ */ new Map();
    function g() {
      const v = /* @__PURE__ */ new Map(), C = e.selectionValues || [];
      C.length && C.reduce((O, a) => (O.set(a, !0), O), v);
      const T = e.selections || [];
      T.length && (v.clear(), T.reduce((O, a) => (O.set(a[d.value], !0), O), v)), p.value.length || (p.value = s.value.filter((O) => v.has(O[d.value])).map((O) => Object.assign({}, O))), s.value.forEach((O) => {
        const a = O[d.value], t = v.has(a);
        O.checked = t, t && k.set(a, O);
      });
    }
    g();
    const S = A(() => m.value === "List"), V = A(() => m.value === "Tree");
    function h(v) {
      p.value = v.map((C) => Object.assign({}, C)), n.emit("change", p.value);
    }
    function b() {
      return o(Y, {
        class: "f-utils-fill",
        data: s.value,
        "multi-select": !0,
        draggable: !1,
        header: "Search",
        headerClass: "transfer-search-box",
        "selection-values": D.value,
        onSelectionChange: h
      }, {
        default: () => [ne(" ")]
      });
    }
    function R() {
      return o($, null, null);
    }
    function y() {
      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"
      }, [S.value && b(), V.value && R()])])]);
    }
    function w(v) {
      const C = v[d.value];
      if (C !== null || C !== void 0) {
        p.value = p.value.filter((O) => O[d.value] !== C);
        const T = k.get(C);
        T && (T.checked = !1, k.delete(C)), n.emit("change", p.value);
      }
    }
    function L(v) {
      const C = /* @__PURE__ */ new Map();
      p.value.reduce((T, O) => (T.set(O[d.value], O), T), C), p.value = v.map((T) => C.get(T[d.value])), n.emit("change", p.value);
    }
    function x() {
      return o(Y, {
        style: "flex:1",
        data: p.value,
        draggable: !0,
        view: "DraggableView",
        "keep-order": !0,
        onChange: L,
        onRemoveItem: w
      }, {
        default: () => [ne(" ")]
      });
    }
    function _() {
      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"
      }, [M.value]), o("span", {
        class: "selection-count"
      }, [p.value && p.value.length]), o("span", {
        class: "selection-item-title"
      }, [I.value])]), o("div", {
        class: "container columns-box f-utils-fill d-flex"
      }, [x()])])]);
    }
    const H = A(() => ({
      transfer: !0,
      row: !0,
      "f-utils-fill": r.value
    })), j = u(), F = Te("design-item-context"), i = Xe(j, F);
    return ce(() => {
      j.value.componentInstance = i;
    }), n.expose(i.value), () => o("div", {
      ref: j,
      class: H.value,
      style: "height:480px"
    }, [y(), _()]);
  }
});
q.register = (e, n, d) => {
  e.transfer = q, n.transfer = ue;
};
q.registerDesigner = (e, n, d) => {
  e.transfer = bt, n.transfer = ue;
};
const Lt = Oe(q);
export {
  q as FTransfer,
  Lt as default,
  ue as propsResolver,
  ee as transferProps
};