@farris/ui-vue 1.0.0-beta.6 → 1.0.1

package/transfer/index.esm.js

@@ -0,0 +1,642 @@
+import { ref as l, computed as D, watch as L, defineComponent as P, createVNode as n, withDirectives as $, vModelCheckbox as W, Fragment as K, withModifiers as X, vModelText as q, createTextVNode as B } from "vue";
+const J = {
+  dataSource: { type: Array, default: [] },
+  displayType: { type: String, default: "List" },
+  enableSearch: { type: Boolean, default: !0 },
+  identifyField: { type: String, default: "id" },
+  placeholder: { type: String, default: "" },
+  selections: { type: Array, default: [] },
+  selectionValues: { type: Array, default: [] }
+}, Q = {
+  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" },
+  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: "" },
+  selectionValues: { type: Array, default: [] },
+  keepOrder: { type: Boolean, default: !1 },
+  disableField: { type: String, default: "disabled" }
+};
+function Y(e, s, i, d, m) {
+  const a = l(e.idField), t = l(e.disableField), h = l(e.draggable), r = l(e.itemClass), v = l(e.multiSelect), u = l(e.multiSelectMode);
+  l(!0);
+  const { isDragging: c } = i, { activeIndex: o, focusedItemId: w, hoverIndex: f } = d, { clearSelection: I, selectedItems: H, toggleSelectItem: T } = m;
+  function M(y, C) {
+    const g = {
+      "f-list-view-group-item": !0,
+      "f-list-view-draggable-item": h.value,
+      "f-un-click": !!y.unClick,
+      "f-un-select": !!y[t.value],
+      "f-listview-active": y.__fv_index__ === o.value,
+      "f-listview-hover": !c.value && C === f.value,
+      moving: !!y.moving
+    };
+    return r.value.split(" ").reduce((R, F) => (R[F] = !0, R), g), g;
+  }
+  function p(y, C) {
+    return y[a.value] || "";
+  }
+  const k = D(() => !v.value);
+  function b(y, C) {
+    y.unClick || y[t.value] || (k.value && (w.value = y[a.value]), T(y, C));
+  }
+  const V = D(() => v.value && u.value === "OnCheckClearByClick"), _ = D(() => !v.value || v.value && (u.value === "OnCheckAndClick" || u.value === "OnClick"));
+  function S(y, C, g) {
+    if (C.unClick || C[t.value]) {
+      y.preventDefault(), y.stopPropagation();
+      return;
+    }
+    w.value = C[a.value], o.value = g, V.value && I(), _.value && T(C, g), s.emit("clickItem", { data: H.value, index: g });
+  }
+  return {
+    getKey: p,
+    listViewItemClass: M,
+    onCheckItem: b,
+    onClickItem: S
+  };
+}
+function Z(e, s, i) {
+  const d = l(e.idField), m = l(e.multiSelect);
+  l(e.multiSelectMode);
+  const { getSelectionItems: a } = i, t = l(a(e.selectionValues));
+  L(() => e.selectionValues, (o) => {
+    t.value = l(a(o)).value;
+  });
+  const h = D(() => !m.value);
+  function r(o) {
+    return o[d.value] || "";
+  }
+  function v(o) {
+    return t.value.findIndex((f) => r(f) === r(o));
+  }
+  function u() {
+    t.value.forEach((o) => {
+      o.checked = !1;
+    }), t.value = [];
+  }
+  function c(o, w) {
+    h.value && u();
+    const f = v(o);
+    f > -1 ? (t.value.splice(f, 1), o.checked = !1) : (t.value.push(o), o.checked = !0), s.emit("selectionChange", t.value);
+  }
+  return { clearSelection: u, findIndexInSelectedItems: v, selectedItems: t, toggleSelectItem: c };
+}
+function ee(e, s) {
+  function i(a) {
+    const t = [];
+    let h = a.nextNode();
+    for (; h; )
+      t.push(h), h = a.nextNode();
+    return t;
+  }
+  function d(a, t) {
+    const h = document.createTreeWalker(a, NodeFilter.SHOW_TEXT);
+    return i(h).map((c) => ({ textNode: c, text: (c.textContent || "").toLocaleLowerCase() })).map(({ textNode: c, text: o }) => {
+      const w = [];
+      let f = 0;
+      for (; f < o.length; ) {
+        const I = o.indexOf(t, f);
+        if (I === -1)
+          break;
+        w.push(I), f = I + t.length;
+      }
+      return w.map((I) => {
+        const H = new Range();
+        return H.setStart(c, I), H.setEnd(c, I + t.length), H;
+      });
+    }).flat();
+  }
+  function m(a) {
+    if (!CSS.highlights || (CSS.highlights.clear(), !a || !s))
+      return;
+    const t = d(s.value, a.toLocaleLowerCase()), h = new Highlight(...t);
+    CSS.highlights.set("search-result", h);
+  }
+  return { search: m };
+}
+const te = {
+  checked: { Type: Boolean, default: !1 },
+  id: { Type: String, default: "" },
+  disabled: { Type: Boolean, default: !1 },
+  /**
+   * 组件值，字符串或者数组
+   */
+  modelValue: { Type: Boolean, default: !1 }
+}, j = /* @__PURE__ */ P({
+  name: "FListViewCheckBox",
+  props: te,
+  emits: ["change", "update:modelValue"],
+  setup(e, s) {
+    const i = l(e.checked), d = l(e.disabled), m = l(e.id);
+    function a(t) {
+      t.stopPropagation(), t.preventDefault(), d.value || (i.value = !i.value, s.emit("change", {
+        originalEvent: t,
+        checked: i.value
+      }));
+    }
+    return L(() => e.checked, (t) => {
+      i.value = t;
+    }), () => n("div", {
+      class: "custom-control custom-checkbox  custom-control-inline listview-checkbox"
+    }, [$(n("input", {
+      id: m.value,
+      title: m.value,
+      type: "checkbox",
+      class: "custom-control-input",
+      "onUpdate:modelValue": (t) => i.value = t,
+      onChange: (t) => console.log(t)
+    }, null), [[W, i.value]]), n("label", {
+      for: m.value,
+      class: "custom-control-label",
+      onClick: (t) => a(t)
+    }, null)]);
+  }
+});
+function A(e, s, i, d, m, a, t, h) {
+  const r = l(e.size), v = l(e.textField), u = l(e.multiSelect), c = l(e.disableField), {
+    onMouseenterItem: o,
+    onMouseoverItem: w,
+    onMouseoutItem: f
+  } = m, {
+    getKey: I,
+    listViewItemClass: H,
+    onCheckItem: T,
+    onClickItem: M
+  } = a, p = D(() => ({
+    margin: r.value === "small" ? "0.25rem 0" : "10px 0"
+  }));
+  function k(b, V, _) {
+    return b.checked = t.findIndexInSelectedItems(b) > -1, n("li", {
+      class: H(b, V),
+      id: I(b, V),
+      key: I(b, V),
+      onClick: (S) => M(S, b, V),
+      onMouseenter: (S) => o(S, b, V),
+      onMouseover: (S) => w(S, b, V),
+      onMouseout: (S) => f(S, b, V)
+    }, [u.value && n("div", {
+      class: "f-list-select",
+      onClick: (S) => S.stopPropagation()
+    }, [n(j, {
+      id: "list-" + I(b, V),
+      disabled: b[c.value] || b.unClick,
+      checked: b.checked,
+      onChange: (S) => T(b, V)
+    }, null)]), n("div", {
+      class: "f-list-content"
+    }, [n("div", {
+      style: p.value
+    }, [b[v.value]])])]);
+  }
+  return {
+    renderItem: k
+  };
+}
+function ne(e, s, i, d, m, a, t, h) {
+  const r = l(e.multiSelect), v = l(e.disableField), {
+    onMouseenterItem: u,
+    onMouseoverItem: c,
+    onMouseoutItem: o
+  } = m, {
+    getKey: w,
+    listViewItemClass: f,
+    onCheckItem: I,
+    onClickItem: H
+  } = a;
+  function T(p, k, b) {
+    return s.slots.content ? n(K, null, [s.slots.content && s.slots.content({
+      item: p,
+      index: k,
+      selectedItem: b
+    })]) : n("div", {
+      style: "margin: 10px 0;"
+    }, [p.name]);
+  }
+  function M(p, k, b) {
+    return n("li", {
+      class: f(p, k),
+      id: w(p, k),
+      key: w(p, k),
+      onClick: (V) => H(V, p, k),
+      onMouseenter: (V) => u(V, p, k),
+      onMouseover: (V) => c(V, p, k),
+      onMouseout: (V) => o(V, p, k)
+    }, [r.value && n("div", {
+      class: "f-list-select",
+      onClick: (V) => V.stopPropagation()
+    }, [n(j, {
+      id: "list-" + w(p, k),
+      disabled: p[v.value] || p.unClick,
+      checked: p.checked,
+      onChange: (V) => I(p, k)
+    }, null)]), n("div", {
+      class: "f-list-content"
+    }, [T(p, k, b)])]);
+  }
+  return {
+    renderItem: M
+  };
+}
+function le(e, s, i, d, m, a, t, h) {
+  const r = l(e.multiSelect), v = l(e.disableField), {
+    onMouseenterItem: u,
+    onMouseoverItem: c,
+    onMouseoutItem: o
+  } = m, {
+    getKey: w,
+    listViewItemClass: f,
+    onCheckItem: I,
+    onClickItem: H
+  } = a, {
+    dragstart: T,
+    dragenter: M,
+    dragover: p,
+    dragend: k
+  } = d, {
+    removeItem: b
+  } = h, V = D(() => ({
+    margin: r.value ? "10px 0" : "10px 0px 10px 14px"
+  }));
+  function _(g) {
+    return n("div", {
+      style: V.value
+    }, [g.name]);
+  }
+  function S() {
+    return s.slots.itemContent ? s.slots.itemContent : _;
+  }
+  const y = S();
+  function C(g, O, R) {
+    return n("li", {
+      class: f(g, O),
+      id: w(g, O),
+      key: w(g, O),
+      onClick: (F) => H(F, g, O),
+      onMouseenter: (F) => u(F, g, O),
+      onMouseover: (F) => c(F, g, O),
+      onMouseout: (F) => o(F, g, O),
+      draggable: "true",
+      onDragstart: (F) => T(F, g, O),
+      onDragenter: (F) => M(F, O),
+      onDragend: (F) => k(F, g),
+      onDragover: (F) => p(F, O)
+    }, [r.value && n("div", {
+      class: "f-list-select",
+      onClick: (F) => F.stopPropagation()
+    }, [n(j, {
+      id: "list-" + w(g, O),
+      disabled: g[v.value] || g.unClick,
+      checked: g.checked,
+      onChange: (F) => I(g, O)
+    }, null)]), n("div", {
+      class: "f-list-content"
+    }, [y(g)]), n("div", {
+      class: "f-list-remove",
+      onClick: (F) => b(O)
+    }, [n("div", {
+      class: "f-list-remove-icon"
+    }, [n("i", {
+      class: "f-icon f-icon-remove_face"
+    }, null)])]), n("div", {
+      class: "f-list-handle"
+    }, [n("div", null, [n("i", {
+      class: "f-icon f-icon-drag-vertical"
+    }, null)])])]);
+  }
+  return {
+    renderItem: C
+  };
+}
+function ae(e, s, i) {
+  function d() {
+    return s.slots.header && n("div", {
+      class: "f-list-view-header"
+    }, [s.slots.header()]);
+  }
+  return {
+    renderHeader: d
+  };
+}
+function E(e, s, i) {
+  const d = l(e.headerClass), m = l(e.placeholder), a = l(""), t = D(() => !a.value), h = D(() => !!a.value);
+  function r(o) {
+    a.value = "";
+  }
+  L(a, (o) => {
+    i.search(o);
+  });
+  const v = D(() => {
+    const o = {
+      "form-group": !0,
+      "farris-form-group": !0
+    };
+    return d.value && d.value.split(" ").reduce((f, I) => (f[I] = !0, f), o), o;
+  });
+  function u(o) {
+  }
+  function c() {
+    return n("div", {
+      class: "f-list-view-header",
+      onClick: X(u, ["prevent", "stop"])
+    }, [n("div", {
+      class: v.value
+    }, [n("div", {
+      class: "farris-input-wrap"
+    }, [n("div", {
+      class: "f-cmp-inputgroup"
+    }, [n("div", {
+      class: "input-group f-state-editable"
+    }, [$(n("input", {
+      class: "form-control f-utils-fill text-left",
+      "onUpdate:modelValue": (o) => a.value = o,
+      name: "input-group-value",
+      type: "text",
+      placeholder: m.value,
+      autocomplete: "off"
+    }, null), [[q, a.value]]), n("div", {
+      class: "input-group-append"
+    }, [h.value && n("span", {
+      class: "input-group-text input-group-clear",
+      onClick: (o) => r()
+    }, [n("i", {
+      class: "f-icon f-icon-close-circle"
+    }, null)]), t.value && n("span", {
+      class: "input-group-text"
+    }, [n("span", {
+      class: "f-icon f-icon-search"
+    }, null)])])])])])])]);
+  }
+  return {
+    renderHeader: c
+  };
+}
+function se(e, s) {
+  const i = l(e.idField), d = l(e.data), m = l(e.data), a = l(e.keepOrder);
+  function t() {
+    const v = d.value.map((u, c) => typeof u != "object" ? { __fv_index__: c, name: u } : (u.__fv_index__ = c, u));
+    return m.value = v, v;
+  }
+  const h = l(t());
+  L(
+    () => e.data,
+    (v) => {
+      if (a.value) {
+        const u = v.reduce((f, I) => (f.set(I.id, !0), f), /* @__PURE__ */ new Map()), c = d.value.reduce((f, I) => (f.set(I.id, !0), f), /* @__PURE__ */ new Map()), o = h.value.filter((f) => u.has(f.id)), w = v.filter((f) => !c.has(f.id));
+        d.value = [...o, ...w];
+      } else
+        d.value = v;
+      h.value = t();
+    }
+  );
+  function r(v) {
+    return v.map((c) => {
+      const o = m.value.findIndex((w) => w[i.value] === c);
+      return o > -1 ? m.value[o] : null;
+    }).filter((c) => c != null);
+  }
+  return {
+    dataView: h,
+    getSelectionItems: r
+  };
+}
+function oe(e, s, i, d) {
+  const m = l(e.idField), { dataView: a } = i, t = l(-1), h = l(!1), { activeIndex: r, focusedItemId: v, hoverIndex: u, resumeHover: c, suspendHover: o } = d;
+  function w(T, M, p) {
+    T.stopPropagation(), o(), M && setTimeout(() => {
+      t.value = p, h.value = !0, M.moving = !0;
+    });
+  }
+  function f(T, M) {
+    if (T.preventDefault(), t.value !== M) {
+      const p = a.value[t.value], k = a.value;
+      k.splice(t.value, 1), k.splice(M, 0, p), t.value = M;
+    }
+  }
+  function I(T, M) {
+    T.preventDefault(), T.dataTransfer && (T.dataTransfer.dropEffect = "move");
+  }
+  function H(T, M) {
+    M && (M.moving = !1), a.value.forEach((p, k) => {
+      p.__fv_index__ = k;
+    }), h.value = !1, c(), u.value = M.__fv_index__, r.value = M.__fv_index__, v.value = M[m.value], s.emit("change", a.value);
+  }
+  return {
+    dragstart: w,
+    dragenter: f,
+    dragover: I,
+    dragend: H,
+    isDragging: h
+  };
+}
+function ie(e, s, i) {
+  const { dataView: d } = i;
+  function m(a) {
+    if (a > -1 && a < d.value.length) {
+      const t = d.value.splice(a, 1);
+      s.emit("removeItem", t[0]);
+    }
+  }
+  return { removeItem: m };
+}
+function ce() {
+  const e = l(-1), s = l(""), i = l(-1), d = l(!1);
+  function m(v, u, c) {
+    i.value = c;
+  }
+  function a(v, u, c) {
+    d.value || (i.value = c);
+  }
+  function t(v, u, c) {
+    i.value = -1;
+  }
+  function h() {
+    d.value = !0;
+  }
+  function r() {
+    d.value = !1;
+  }
+  return {
+    activeIndex: e,
+    focusedItemId: s,
+    hoverIndex: i,
+    onMouseenterItem: m,
+    onMouseoverItem: a,
+    onMouseoutItem: t,
+    resumeHover: r,
+    suspendHover: h
+  };
+}
+const N = /* @__PURE__ */ P({
+  name: "FListView",
+  props: Q,
+  emits: ["checkValuesChange", "clickItem", "selectionChange", "removeItem", "change"],
+  setup(e, s) {
+    const i = l(), d = l(e.view), m = l(e.header), a = l(e.multiSelect), t = l(e.view === "CardView"), h = l(!0), r = l({}), v = l("暂无数据");
+    l(!0), l(!1), l("id");
+    const u = se(e), {
+      dataView: c
+    } = u, o = D(() => {
+      const x = {
+        "f-list-view": !0,
+        "f-list-view-multiple": a.value
+      };
+      return e.size !== "default" && (x[`${e.size}-item`] = !0), x;
+    }), w = D(() => ({
+      "f-list-view-group": !0,
+      "d-flex": t.value,
+      "flex-wrap": t.value
+    })), f = D(() => !!c.value && c.value.length > 0), I = ce(), H = Z(e, s, u), T = oe(e, s, u, I), M = ie(e, s, u), p = Y(e, s, T, I, H), k = ee(e, i), b = D(() => c.value.length === 0), V = D(() => b.value && !s.slots.empty), _ = D(() => !!s.slots.footer || h.value);
+    function S() {
+      return d.value === "SingleView" ? A : d.value === "DraggableView" ? le : d.value === "ContentView" && s.slots.content ? ne : A;
+    }
+    const y = S(), {
+      renderItem: C
+    } = y(e, s, u, T, I, p, H, M);
+    function g() {
+      return m.value === "SearchBar" ? E : m.value === "ContentHeader" ? ae : E;
+    }
+    const O = g(), {
+      renderHeader: R
+    } = O(e, s, k);
+    function F(x) {
+      k.search(x);
+    }
+    s.expose({
+      search: F
+    });
+    function G(x) {
+      a.value && (x.preventDefault(), x.stopPropagation());
+    }
+    return () => n("div", {
+      class: o.value,
+      onClick: G
+    }, [R(), n("div", {
+      ref: i,
+      class: "f-list-view-content"
+    }, [n("ul", {
+      class: w.value,
+      style: "list-style: none;"
+    }, [f.value && c.value.map((x, U) => C(x, U, r)), V.value && n("div", {
+      class: "f-list-view-emptydata"
+    }, [n("p", {
+      class: "f-empty-title"
+    }, [v.value])]), s.slots.empty && s.slots.empty()])]), _.value && n("div", {
+      class: "f-list-view-footer"
+    }, [s.slots.footer && s.slots.footer()])]);
+  }
+});
+const z = /* @__PURE__ */ P({
+  name: "FTransfer",
+  props: J,
+  emits: ["change"],
+  setup(e, s) {
+    const i = l(e.identifyField), d = l("已选："), m = l("项数据"), a = l(e.displayType), t = l(!1), h = l(e.dataSource), r = l(e.selections || []), v = D(() => r.value.map((_) => _[i.value])), u = /* @__PURE__ */ new Map();
+    function c() {
+      const _ = /* @__PURE__ */ new Map(), S = e.selectionValues || [];
+      S.length && S.reduce((C, g) => (C.set(g, !0), C), _);
+      const y = e.selections || [];
+      y.length && (_.clear(), y.reduce((C, g) => (C.set(g[i.value], !0), C), _)), r.value.length || (r.value = h.value.filter((C) => _.has(C[i.value])).map((C) => Object.assign({}, C))), h.value.forEach((C) => {
+        const g = C[i.value], O = _.has(g);
+        C.checked = O, O && u.set(g, C);
+      });
+    }
+    c();
+    const o = D(() => a.value === "List"), w = D(() => a.value === "Tree");
+    function f(_) {
+      r.value = _.map((S) => Object.assign({}, S)), s.emit("change", r.value);
+    }
+    function I() {
+      return n(N, {
+        class: "f-utils-fill",
+        data: h.value,
+        "multi-select": !0,
+        draggable: !1,
+        header: "Search",
+        headerClass: "transfer-search-box",
+        "selection-values": v.value,
+        onSelectionChange: f
+      }, {
+        default: () => [B(" ")]
+      });
+    }
+    function H() {
+      return n(K, null, null);
+    }
+    function T() {
+      return n("div", {
+        class: "f-utils-fill option-pane d-flex flex-column"
+      }, [n("div", {
+        class: "f-utils-flex-column option-pane-content f-utils-fill"
+      }, [n("div", {
+        class: "container columns-box d-flex f-utils-fill"
+      }, [o.value && I(), w.value && H()])])]);
+    }
+    function M(_) {
+      const S = _[i.value];
+      if (S !== null || S !== void 0) {
+        r.value = r.value.filter((C) => C[i.value] !== S);
+        const y = u.get(S);
+        y && (y.checked = !1, u.delete(S)), s.emit("change", r.value);
+      }
+    }
+    function p(_) {
+      const S = /* @__PURE__ */ new Map();
+      r.value.reduce((y, C) => (y.set(C[i.value], C), y), S), r.value = _.map((y) => S.get(y[i.value])), s.emit("change", r.value);
+    }
+    function k() {
+      return n(N, {
+        style: "flex:1",
+        data: r.value,
+        draggable: !0,
+        view: "DraggableView",
+        "keep-order": !0,
+        onChange: p,
+        onRemoveItem: M
+      }, {
+        default: () => [B(" ")]
+      });
+    }
+    function b() {
+      return n("div", {
+        class: "f-utils-fill selection-pane d-flex flex-column"
+      }, [n("div", {
+        class: "f-utils-flex-column selection-pane-content f-utils-fill"
+      }, [n("div", {
+        class: "selection-pane-title"
+      }, [n("span", {
+        class: "selection-title"
+      }, [d.value]), n("span", {
+        class: "selection-count"
+      }, [r.value && r.value.length]), n("span", {
+        class: "selection-item-title"
+      }, [m.value])]), n("div", {
+        class: "container columns-box f-utils-fill d-flex"
+      }, [k()])])]);
+    }
+    const V = D(() => ({
+      transfer: !0,
+      row: !0,
+      "f-utils-fill": t.value
+    }));
+    return () => n("div", {
+      class: V.value
+    }, [T(), b()]);
+  }
+}), re = {
+  install(e) {
+    e.component(z.name, z);
+  }
+};
+export {
+  z as Transfer,
+  re as default,
+  J as transferProps
+};

package/transfer/index.umd.js

@@ -0,0 +1 @@
+(function(D,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(D=typeof globalThis<"u"?globalThis:D||self,e(D.transfer={},D.Vue))})(this,function(D,e){"use strict";const R={dataSource:{type:Array,default:[]},displayType:{type:String,default:"List"},enableSearch:{type:Boolean,default:!0},identifyField:{type:String,default:"id"},placeholder:{type:String,default:""},selections:{type:Array,default:[]},selectionValues:{type:Array,default:[]}},A={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"},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:""},selectionValues:{type:Array,default:[]},keepOrder:{type:Boolean,default:!1},disableField:{type:String,default:"disabled"}};function E(t,a,s,u,h){const l=e.ref(t.idField),n=e.ref(t.disableField),g=e.ref(t.draggable),i=e.ref(t.itemClass),f=e.ref(t.multiSelect),r=e.ref(t.multiSelectMode);e.ref(!0);const{isDragging:c}=s,{activeIndex:o,focusedItemId:y,hoverIndex:d}=u,{clearSelection:C,selectedItems:_,toggleSelectItem:M}=h;function b(I,v){const m={"f-list-view-group-item":!0,"f-list-view-draggable-item":g.value,"f-un-click":!!I.unClick,"f-un-select":!!I[n.value],"f-listview-active":I.__fv_index__===o.value,"f-listview-hover":!c.value&&v===d.value,moving:!!I.moving};return i.value.split(" ").reduce((H,N)=>(H[N]=!0,H),m),m}function p(I,v){return I[l.value]||""}const S=e.computed(()=>!f.value);function w(I,v){I.unClick||I[n.value]||(S.value&&(y.value=I[l.value]),M(I,v))}const k=e.computed(()=>f.value&&r.value==="OnCheckClearByClick"),F=e.computed(()=>!f.value||f.value&&(r.value==="OnCheckAndClick"||r.value==="OnClick"));function V(I,v,m){if(v.unClick||v[n.value]){I.preventDefault(),I.stopPropagation();return}y.value=v[l.value],o.value=m,k.value&&C(),F.value&&M(v,m),a.emit("clickItem",{data:_.value,index:m})}return{getKey:p,listViewItemClass:b,onCheckItem:w,onClickItem:V}}function z(t,a,s){const u=e.ref(t.idField),h=e.ref(t.multiSelect);e.ref(t.multiSelectMode);const{getSelectionItems:l}=s,n=e.ref(l(t.selectionValues));e.watch(()=>t.selectionValues,o=>{n.value=e.ref(l(o)).value});const g=e.computed(()=>!h.value);function i(o){return o[u.value]||""}function f(o){return n.value.findIndex(d=>i(d)===i(o))}function r(){n.value.forEach(o=>{o.checked=!1}),n.value=[]}function c(o,y){g.value&&r();const d=f(o);d>-1?(n.value.splice(d,1),o.checked=!1):(n.value.push(o),o.checked=!0),a.emit("selectionChange",n.value)}return{clearSelection:r,findIndexInSelectedItems:f,selectedItems:n,toggleSelectItem:c}}function $(t,a){function s(l){const n=[];let g=l.nextNode();for(;g;)n.push(g),g=l.nextNode();return n}function u(l,n){const g=document.createTreeWalker(l,NodeFilter.SHOW_TEXT);return s(g).map(c=>({textNode:c,text:(c.textContent||"").toLocaleLowerCase()})).map(({textNode:c,text:o})=>{const y=[];let d=0;for(;d<o.length;){const C=o.indexOf(n,d);if(C===-1)break;y.push(C),d=C+n.length}return y.map(C=>{const _=new Range;return _.setStart(c,C),_.setEnd(c,C+n.length),_})}).flat()}function h(l){if(!CSS.highlights||(CSS.highlights.clear(),!l||!a))return;const n=u(a.value,l.toLocaleLowerCase()),g=new Highlight(...n);CSS.highlights.set("search-result",g)}return{search:h}}const K={checked:{Type:Boolean,default:!1},id:{Type:String,default:""},disabled:{Type:Boolean,default:!1},modelValue:{Type:Boolean,default:!1}},x=e.defineComponent({name:"FListViewCheckBox",props:K,emits:["change","update:modelValue"],setup(t,a){const s=e.ref(t.checked),u=e.ref(t.disabled),h=e.ref(t.id);function l(n){n.stopPropagation(),n.preventDefault(),u.value||(s.value=!s.value,a.emit("change",{originalEvent:n,checked:s.value}))}return e.watch(()=>t.checked,n=>{s.value=n}),()=>e.createVNode("div",{class:"custom-control custom-checkbox  custom-control-inline listview-checkbox"},[e.withDirectives(e.createVNode("input",{id:h.value,title:h.value,type:"checkbox",class:"custom-control-input","onUpdate:modelValue":n=>s.value=n,onChange:n=>console.log(n)},null),[[e.vModelCheckbox,s.value]]),e.createVNode("label",{for:h.value,class:"custom-control-label",onClick:n=>l(n)},null)])}});function j(t,a,s,u,h,l,n,g){const i=e.ref(t.size),f=e.ref(t.textField),r=e.ref(t.multiSelect),c=e.ref(t.disableField),{onMouseenterItem:o,onMouseoverItem:y,onMouseoutItem:d}=h,{getKey:C,listViewItemClass:_,onCheckItem:M,onClickItem:b}=l,p=e.computed(()=>({margin:i.value==="small"?"0.25rem 0":"10px 0"}));function S(w,k,F){return w.checked=n.findIndexInSelectedItems(w)>-1,e.createVNode("li",{class:_(w,k),id:C(w,k),key:C(w,k),onClick:V=>b(V,w,k),onMouseenter:V=>o(V,w,k),onMouseover:V=>y(V,w,k),onMouseout:V=>d(V,w,k)},[r.value&&e.createVNode("div",{class:"f-list-select",onClick:V=>V.stopPropagation()},[e.createVNode(x,{id:"list-"+C(w,k),disabled:w[c.value]||w.unClick,checked:w.checked,onChange:V=>M(w,k)},null)]),e.createVNode("div",{class:"f-list-content"},[e.createVNode("div",{style:p.value},[w[f.value]])])])}return{renderItem:S}}function G(t,a,s,u,h,l,n,g){const i=e.ref(t.multiSelect),f=e.ref(t.disableField),{onMouseenterItem:r,onMouseoverItem:c,onMouseoutItem:o}=h,{getKey:y,listViewItemClass:d,onCheckItem:C,onClickItem:_}=l;function M(p,S,w){return a.slots.content?e.createVNode(e.Fragment,null,[a.slots.content&&a.slots.content({item:p,index:S,selectedItem:w})]):e.createVNode("div",{style:"margin: 10px 0;"},[p.name])}function b(p,S,w){return e.createVNode("li",{class:d(p,S),id:y(p,S),key:y(p,S),onClick:k=>_(k,p,S),onMouseenter:k=>r(k,p,S),onMouseover:k=>c(k,p,S),onMouseout:k=>o(k,p,S)},[i.value&&e.createVNode("div",{class:"f-list-select",onClick:k=>k.stopPropagation()},[e.createVNode(x,{id:"list-"+y(p,S),disabled:p[f.value]||p.unClick,checked:p.checked,onChange:k=>C(p,S)},null)]),e.createVNode("div",{class:"f-list-content"},[M(p,S,w)])])}return{renderItem:b}}function U(t,a,s,u,h,l,n,g){const i=e.ref(t.multiSelect),f=e.ref(t.disableField),{onMouseenterItem:r,onMouseoverItem:c,onMouseoutItem:o}=h,{getKey:y,listViewItemClass:d,onCheckItem:C,onClickItem:_}=l,{dragstart:M,dragenter:b,dragover:p,dragend:S}=u,{removeItem:w}=g,k=e.computed(()=>({margin:i.value?"10px 0":"10px 0px 10px 14px"}));function F(m){return e.createVNode("div",{style:k.value},[m.name])}function V(){return a.slots.itemContent?a.slots.itemContent:F}const I=V();function v(m,T,H){return e.createVNode("li",{class:d(m,T),id:y(m,T),key:y(m,T),onClick:N=>_(N,m,T),onMouseenter:N=>r(N,m,T),onMouseover:N=>c(N,m,T),onMouseout:N=>o(N,m,T),draggable:"true",onDragstart:N=>M(N,m,T),onDragenter:N=>b(N,T),onDragend:N=>S(N,m),onDragover:N=>p(N,T)},[i.value&&e.createVNode("div",{class:"f-list-select",onClick:N=>N.stopPropagation()},[e.createVNode(x,{id:"list-"+y(m,T),disabled:m[f.value]||m.unClick,checked:m.checked,onChange:N=>C(m,T)},null)]),e.createVNode("div",{class:"f-list-content"},[I(m)]),e.createVNode("div",{class:"f-list-remove",onClick:N=>w(T)},[e.createVNode("div",{class:"f-list-remove-icon"},[e.createVNode("i",{class:"f-icon f-icon-remove_face"},null)])]),e.createVNode("div",{class:"f-list-handle"},[e.createVNode("div",null,[e.createVNode("i",{class:"f-icon f-icon-drag-vertical"},null)])])])}return{renderItem:v}}function W(t,a,s){function u(){return a.slots.header&&e.createVNode("div",{class:"f-list-view-header"},[a.slots.header()])}return{renderHeader:u}}function L(t,a,s){const u=e.ref(t.headerClass),h=e.ref(t.placeholder),l=e.ref(""),n=e.computed(()=>!l.value),g=e.computed(()=>!!l.value);function i(o){l.value=""}e.watch(l,o=>{s.search(o)});const f=e.computed(()=>{const o={"form-group":!0,"farris-form-group":!0};return u.value&&u.value.split(" ").reduce((d,C)=>(d[C]=!0,d),o),o});function r(o){}function c(){return e.createVNode("div",{class:"f-list-view-header",onClick:e.withModifiers(r,["prevent","stop"])},[e.createVNode("div",{class:f.value},[e.createVNode("div",{class:"farris-input-wrap"},[e.createVNode("div",{class:"f-cmp-inputgroup"},[e.createVNode("div",{class:"input-group f-state-editable"},[e.withDirectives(e.createVNode("input",{class:"form-control f-utils-fill text-left","onUpdate:modelValue":o=>l.value=o,name:"input-group-value",type:"text",placeholder:h.value,autocomplete:"off"},null),[[e.vModelText,l.value]]),e.createVNode("div",{class:"input-group-append"},[g.value&&e.createVNode("span",{class:"input-group-text input-group-clear",onClick:o=>i()},[e.createVNode("i",{class:"f-icon f-icon-close-circle"},null)]),n.value&&e.createVNode("span",{class:"input-group-text"},[e.createVNode("span",{class:"f-icon f-icon-search"},null)])])])])])])])}return{renderHeader:c}}const te="";function q(t,a){const s=e.ref(t.idField),u=e.ref(t.data),h=e.ref(t.data),l=e.ref(t.keepOrder);function n(){const f=u.value.map((r,c)=>typeof r!="object"?{__fv_index__:c,name:r}:(r.__fv_index__=c,r));return h.value=f,f}const g=e.ref(n());e.watch(()=>t.data,f=>{if(l.value){const r=f.reduce((d,C)=>(d.set(C.id,!0),d),new Map),c=u.value.reduce((d,C)=>(d.set(C.id,!0),d),new Map),o=g.value.filter(d=>r.has(d.id)),y=f.filter(d=>!c.has(d.id));u.value=[...o,...y]}else u.value=f;g.value=n()});function i(f){return f.map(c=>{const o=h.value.findIndex(y=>y[s.value]===c);return o>-1?h.value[o]:null}).filter(c=>c!=null)}return{dataView:g,getSelectionItems:i}}function X(t,a,s,u){const h=e.ref(t.idField),{dataView:l}=s,n=e.ref(-1),g=e.ref(!1),{activeIndex:i,focusedItemId:f,hoverIndex:r,resumeHover:c,suspendHover:o}=u;function y(M,b,p){M.stopPropagation(),o(),b&&setTimeout(()=>{n.value=p,g.value=!0,b.moving=!0})}function d(M,b){if(M.preventDefault(),n.value!==b){const p=l.value[n.value],S=l.value;S.splice(n.value,1),S.splice(b,0,p),n.value=b}}function C(M,b){M.preventDefault(),M.dataTransfer&&(M.dataTransfer.dropEffect="move")}function _(M,b){b&&(b.moving=!1),l.value.forEach((p,S)=>{p.__fv_index__=S}),g.value=!1,c(),r.value=b.__fv_index__,i.value=b.__fv_index__,f.value=b[h.value],a.emit("change",l.value)}return{dragstart:y,dragenter:d,dragover:C,dragend:_,isDragging:g}}function J(t,a,s){const{dataView:u}=s;function h(l){if(l>-1&&l<u.value.length){const n=u.value.splice(l,1);a.emit("removeItem",n[0])}}return{removeItem:h}}function Q(){const t=e.ref(-1),a=e.ref(""),s=e.ref(-1),u=e.ref(!1);function h(f,r,c){s.value=c}function l(f,r,c){u.value||(s.value=c)}function n(f,r,c){s.value=-1}function g(){u.value=!0}function i(){u.value=!1}return{activeIndex:t,focusedItemId:a,hoverIndex:s,onMouseenterItem:h,onMouseoverItem:l,onMouseoutItem:n,resumeHover:i,suspendHover:g}}const B=e.defineComponent({name:"FListView",props:A,emits:["checkValuesChange","clickItem","selectionChange","removeItem","change"],setup(t,a){const s=e.ref(),u=e.ref(t.view),h=e.ref(t.header),l=e.ref(t.multiSelect),n=e.ref(t.view==="CardView"),g=e.ref(!0),i=e.ref({}),f=e.ref("暂无数据");e.ref(!0),e.ref(!1),e.ref("id");const r=q(t),{dataView:c}=r,o=e.computed(()=>{const O={"f-list-view":!0,"f-list-view-multiple":l.value};return t.size!=="default"&&(O[`${t.size}-item`]=!0),O}),y=e.computed(()=>({"f-list-view-group":!0,"d-flex":n.value,"flex-wrap":n.value})),d=e.computed(()=>!!c.value&&c.value.length>0),C=Q(),_=z(t,a,r),M=X(t,a,r,C),b=J(t,a,r),p=E(t,a,M,C,_),S=$(t,s),w=e.computed(()=>c.value.length===0),k=e.computed(()=>w.value&&!a.slots.empty),F=e.computed(()=>!!a.slots.footer||g.value);function V(){return u.value==="SingleView"?j:u.value==="DraggableView"?U:u.value==="ContentView"&&a.slots.content?G:j}const I=V(),{renderItem:v}=I(t,a,r,M,C,p,_,b);function m(){return h.value==="SearchBar"?L:h.value==="ContentHeader"?W:L}const T=m(),{renderHeader:H}=T(t,a,S);function N(O){S.search(O)}a.expose({search:N});function Z(O){l.value&&(O.preventDefault(),O.stopPropagation())}return()=>e.createVNode("div",{class:o.value,onClick:Z},[H(),e.createVNode("div",{ref:s,class:"f-list-view-content"},[e.createVNode("ul",{class:y.value,style:"list-style: none;"},[d.value&&c.value.map((O,ee)=>v(O,ee,i)),k.value&&e.createVNode("div",{class:"f-list-view-emptydata"},[e.createVNode("p",{class:"f-empty-title"},[f.value])]),a.slots.empty&&a.slots.empty()])]),F.value&&e.createVNode("div",{class:"f-list-view-footer"},[a.slots.footer&&a.slots.footer()])])}}),ne="",P=e.defineComponent({name:"FTransfer",props:R,emits:["change"],setup(t,a){const s=e.ref(t.identifyField),u=e.ref("已选："),h=e.ref("项数据"),l=e.ref(t.displayType),n=e.ref(!1),g=e.ref(t.dataSource),i=e.ref(t.selections||[]),f=e.computed(()=>i.value.map(F=>F[s.value])),r=new Map;function c(){const F=new Map,V=t.selectionValues||[];V.length&&V.reduce((v,m)=>(v.set(m,!0),v),F);const I=t.selections||[];I.length&&(F.clear(),I.reduce((v,m)=>(v.set(m[s.value],!0),v),F)),i.value.length||(i.value=g.value.filter(v=>F.has(v[s.value])).map(v=>Object.assign({},v))),g.value.forEach(v=>{const m=v[s.value],T=F.has(m);v.checked=T,T&&r.set(m,v)})}c();const o=e.computed(()=>l.value==="List"),y=e.computed(()=>l.value==="Tree");function d(F){i.value=F.map(V=>Object.assign({},V)),a.emit("change",i.value)}function C(){return e.createVNode(B,{class:"f-utils-fill",data:g.value,"multi-select":!0,draggable:!1,header:"Search",headerClass:"transfer-search-box","selection-values":f.value,onSelectionChange:d},{default:()=>[e.createTextVNode(" ")]})}function _(){return e.createVNode(e.Fragment,null,null)}function M(){return e.createVNode("div",{class:"f-utils-fill option-pane d-flex flex-column"},[e.createVNode("div",{class:"f-utils-flex-column option-pane-content f-utils-fill"},[e.createVNode("div",{class:"container columns-box d-flex f-utils-fill"},[o.value&&C(),y.value&&_()])])])}function b(F){const V=F[s.value];if(V!==null||V!==void 0){i.value=i.value.filter(v=>v[s.value]!==V);const I=r.get(V);I&&(I.checked=!1,r.delete(V)),a.emit("change",i.value)}}function p(F){const V=new Map;i.value.reduce((I,v)=>(I.set(v[s.value],v),I),V),i.value=F.map(I=>V.get(I[s.value])),a.emit("change",i.value)}function S(){return e.createVNode(B,{style:"flex:1",data:i.value,draggable:!0,view:"DraggableView","keep-order":!0,onChange:p,onRemoveItem:b},{default:()=>[e.createTextVNode(" ")]})}function w(){return e.createVNode("div",{class:"f-utils-fill selection-pane d-flex flex-column"},[e.createVNode("div",{class:"f-utils-flex-column selection-pane-content f-utils-fill"},[e.createVNode("div",{class:"selection-pane-title"},[e.createVNode("span",{class:"selection-title"},[u.value]),e.createVNode("span",{class:"selection-count"},[i.value&&i.value.length]),e.createVNode("span",{class:"selection-item-title"},[h.value])]),e.createVNode("div",{class:"container columns-box f-utils-fill d-flex"},[S()])])])}const k=e.computed(()=>({transfer:!0,row:!0,"f-utils-fill":n.value}));return()=>e.createVNode("div",{class:k.value},[M(),w()])}}),Y={install(t){t.component(P.name,P)}};D.Transfer=P,D.default=Y,D.transferProps=R,Object.defineProperties(D,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/transfer/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "transfer",
+    "version": "1.0.2",
+    "main": "index.umd.js",
+    "module": "index.esm.js",
+    "style": "style.css",
+    "types": "../types/transfer/index.d.ts"
+}

package/transfer/style.css

@@ -0,0 +1 @@
+.f-listview-fill{flex-grow:1;flex-shrink:1;flex-basis:0;overflow:hidden}.f-listview-fill .f-list-view{height:100%}.f-listview-fill .f-list-view .f-list-view-header,.f-listview-fill .f-list-view .f-list-view-footer{flex-shrink:0}.f-listview-fill .f-list-view .f-list-view-content{overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0}.f-list-view{display:flex;flex-direction:column;overflow:hidden}.f-list-view .f-list-view-content{flex:1;overflow:auto}.f-list-view .f-list-view-group{padding:0}.f-list-view .f-paging-wrapper{padding:14px 0}.f-list-view-group-item{display:flex;align-items:center;float:none;text-align:initial}.f-list-view-group-item.f-none-border{border-bottom:0}.f-list-view-group-item.f-listview-hover,.f-list-view-group-item.f-listview-active{cursor:pointer;color:#424347;background:#edf5ff!important}.f-list-view-group-item.f-listview-active{border-color:#529dff}.f-list-view-group-item.f-un-select{color:#848c9a}.f-list-view-group-item .f-list-content{flex:1 1 auto;width:100%}.f-list-view-draggable-item{border:1px solid;border-color:#e2e3e5;background-color:#fafbfd;border-radius:10px;margin:4px 2px}.f-list-view-draggable-item.f-listview-hover{cursor:pointer;color:#424347;background:#edf5ff!important}.f-list-view-draggable-item.f-listview-hover .f-list-remove-icon{display:initial}.f-list-view-draggable-item.f-listview-active{border-color:#529dff}.f-list-view-draggable-item.moving{opacity:0}.f-list-select{padding:0 0 0 14px}.f-list-select .listview-checkbox{margin:.25rem 0}.f-list-pin{color:#2986ff;padding:0 14px 0 0}.f-list-remove{width:30px;color:#f4625f;padding:0 14px 0 0}.f-list-remove-icon{display:none}.f-list-handle{padding:0 14px 0 0}.f-list-view-emptydata .f-empty-title{font-size:14px;line-height:22px;color:#999;padding:20px 0;text-align:center}.f-list-view.small-item .f-list-select{padding:initial}::highlight(search-result){background-color:#f06;color:#fff}.transfer{padding:.125rem}.transfer .option-pane{border:1px solid #e6e9f0;border-radius:10px 0 0 10px;background-color:#fff;padding:0}.transfer-search-box{margin:.875rem .875rem .25rem}.transfer .transfer-search-box .f-cmp-inputgroup .input-group{border-radius:6px}.transfer .transfer-search-box .f-cmp-inputgroup .input-group>.form-control:not(:last-child){border-radius:6px}.transfer .transfer-search-box .f-cmp-inputgroup .input-group>.input-group-append{border-radius:0 6px 6px 0}.transfer .transfer-search-box .f-cmp-inputgroup .input-group>.input-group-append>.input-group-clear{border-radius:6px!important}.transfer .option-pane-content .columns-box{padding:0}.transfer .option-pane .option-pane-group{padding:.375rem 0}.transfer .option-pane .option-pane-group-item{padding:.25rem .875rem;line-height:1.25rem;cursor:default;margin:0;border-radius:0}.transfer .option-pane .option-pane-group-item .custom-checkbox{padding:0;margin:0;width:100%;overflow:hidden}.transfer .option-pane .option-pane-group-item .custom-control-label{color:#2d2f33;padding-left:1.375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transfer .selection-pane{border:1px solid #e6e9f0;border-radius:0 10px 10px 0;border-left-color:transparent;background-color:#fff;padding:0}.transfer .selection-pane .selection-pane-title{margin:.875rem .875rem .375rem;font-size:14px;display:flex;line-height:1.5rem}.transfer .selection-pane .selection-pane-title>.selection-count{font-size:18px;margin:0 .25rem}.transfer .selection-pane .selection-pane-title>.selection-title-action{font-size:13px;color:#2a87ff;flex:1;text-align:right}.transfer .selection-pane .selection-pane-title>.selection-title-action>i{margin:0 .5rem}