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

Farris Vue, a Farris Design based Vue3 component library.

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