@farris/ui-vue 1.0.0-beta.5 → 1.0.0

package/list-view/index.esm.js

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