@farris/ui-vue/components/list-view/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as d, computed as x, createVNode as a, Fragment as Y, watch as ne, withModifiers as ye, withDirectives as Se, vModelText as Ie, defineComponent as ae, createTextVNode as Z } from "vue";
import { getCustomStyle as $, getCustomClass as X } from "../common/index.esm.js";
import { useFilter as be, useIdentify as ke, useHierarchy as Ve, useGroupData as Fe, useDataView as Te, useSelection as De, usePagination as Me, useRow as Re, useEdit as Oe, useVisualDataBound as Be, useVisualDataCell as He, useVisualDataRow as _e, useVisualGroupRow as Ae, useVisualSummaryRow as xe, useVisualData as Pe, useSidebar as je, useColumn as Le, useVirtualScroll as Ee } from "../data-view/index.esm.js";
import { LocaleService as Ge } from "../locale/index.esm.js";
import { FCheckbox as q } from "../checkbox/index.esm.js";
const oe = {
  /** 列集合 */
  columns: {
    type: Array,
    default: [
      { field: "name", title: "", dataType: "string" }
    ]
  },
  customClass: { type: String, default: "" },
  data: { type: Array, default: [] },
  draggable: { type: Boolean, default: !1 },
  multiSelect: { type: Boolean, default: !1 },
  // multiSelectMode: { type: String as PropType<MultiSelectMode>, default: 'OnCheck' },
  idField: { type: String, default: "id" },
  valueField: { type: String, default: "id" },
  textField: { type: String, default: "name" },
  titleField: { type: String, default: "name" },
  view: { type: String, default: "ContentView" },
  size: { type: String, default: "default" },
  placeholder: { type: String, default: "" },
  header: { type: String, default: "ContentHeader" },
  headerClass: { type: String, default: "" },
  /** 可能根据数据每各项的样式不同 */
  itemClass: {
    type: [String, Function],
    default: "",
    validator: (e) => typeof e == "string" || typeof e == "function"
  },
  itemStyle: {
    type: [String, Function],
    default: "",
    validator: (e) => typeof e == "string" || typeof e == "function"
  },
  itemContentClass: { type: String, default: "" },
  selectionValues: { type: Array, default: [] },
  /** 分组配置 */
  group: { type: Object },
  /** 选择配置 */
  selection: {
    type: Object,
    default: {
      enableSelectRow: !0,
      multiSelect: !1,
      multiSelectMode: "DependOnCheck",
      showCheckbox: !1,
      showSelectAll: !1,
      showSelection: !0
    }
  },
  keepOrder: { type: Boolean, default: !1 },
  disableField: { type: String, default: "disabled" },
  // 搜索启用高亮
  enableHighlightSearch: { type: Boolean, default: !0 },
  /** 虚拟化渲染数据 */
  virtualized: { type: Boolean, default: !0 },
  /** 删除数据前的检查方法，返回值为true时可以删除当前数据 */
  checkBeforeRemoveItem: { type: Function, default: null },
  /** 头部模板 */
  headerTemplate: { type: Object },
  /** 内容模板 */
  contentTemplate: { type: Object },
  /** 底部模板 */
  footerTemplate: { type: Object },
  /** 空数据模板 */
  emptyTemplate: { type: Object },
  /** 分页 */
  pagination: { type: Object, default: { enable: !1, size: 20 } },
  /** 定义属性，开启时，当多选开启时，展示选中项的背景色等样式；不开启时，不展示选中项的背景色等样式 */
  showActiveWhenMultiSelect: { type: Boolean, default: !0 },
  /** 允许删除 */
  allowDelete: { type: Boolean, default: !0 }
};
function Ne(e, s) {
  function b(c) {
    const u = [];
    let i = c.nextNode();
    for (; i; )
      u.push(i), i = c.nextNode();
    return u;
  }
  function S(c, u) {
    const i = document.createTreeWalker(c, NodeFilter.SHOW_TEXT);
    return b(i).map((f) => ({ textNode: f, text: (f.textContent || "").toLocaleLowerCase() })).map(({ textNode: f, text: g }) => {
      const V = [];
      let v = 0;
      for (; v < g.length; ) {
        const C = g.indexOf(u, v);
        if (C === -1)
          break;
        V.push(C), v = C + u.length;
      }
      return V.map((C) => {
        const I = new Range();
        return I.setStart(f, C), I.setEnd(f, C + u.length), I;
      });
    }).flat();
  }
  function p(c) {
    if (!CSS.highlights || (CSS.highlights.clear(), !c || !s))
      return;
    const u = S(s.value, c.toLocaleLowerCase()), i = new Highlight(...u);
    CSS.highlights.set("search-result", i);
  }
  return { search: p };
}
function ee(e, s, b, S, p, c, u, i, k, D) {
  const T = d(e.size), f = d(e.textField), g = d(e.titleField), V = d(e.disableField), v = x(() => {
    var o, w;
    return ((o = e.selection) == null ? void 0 : o.multiSelect) && ((w = e.selection) == null ? void 0 : w.showCheckbox);
  }), {
    onMouseenterItem: C,
    onMouseoverItem: I,
    onMouseoutItem: m
  } = c, {
    getKey: h,
    listViewItemClass: B,
    listViewItemStyle: R,
    onCheckItem: P,
    onClickItem: _
  } = u, H = x(() => {
    const o = {
      "text-overflow": "ellipsis",
      overflow: "hidden",
      "white-space": "nowrap"
    };
    return e.itemClass ? o : {
      margin: T.value === "small" ? "0.25rem 0" : "8px 0",
      ...o
    };
  });
  function y(o, w, M) {
    return o.checked = i.findIndexInSelectedItems(o) > -1, a("li", {
      class: B(o, w),
      id: h(o, w),
      key: h(o, w),
      style: R(o, w),
      onClick: (O) => _(o, w, O),
      onMouseenter: (O) => C(O, o, w),
      onMouseover: (O) => I(O, o, w),
      onMouseout: (O) => m(O, o, w)
    }, [v.value && a("div", {
      class: "f-list-select",
      onClick: (O) => O.stopPropagation()
    }, [a(q, {
      id: "list-" + h(o, w),
      customClass: "listview-checkbox float-left",
      disabled: o[V.value],
      checked: o.checked,
      "onUpdate:checked": (O) => o.checked = O,
      onChange: (O) => {
        P(o, w, !O.checked);
      }
    }, null)]), a("div", {
      class: "f-list-content"
    }, [a("div", {
      class: e.itemContentClass,
      style: H.value,
      title: o.raw[g.value] || o.raw[f.value]
    }, [o.raw[f.value]])])]);
  }
  return {
    renderItem: y
  };
}
function ze(e, s, b, S, p, c, u, i, k, D) {
  const T = d(e.multiSelect), f = d(e.disableField), g = d(e.textField), {
    onMouseenterItem: V,
    onMouseoverItem: v,
    onMouseoutItem: C
  } = c, {
    getKey: I,
    listViewItemClass: m,
    listViewItemStyle: h,
    onCheckItem: B,
    onClickItem: R,
    updateSelectedItems: P
  } = u;
  function _(y, o, w) {
    return e.contentTemplate ? a(Y, null, [e.contentTemplate({
      item: y.raw,
      index: o,
      selectedItem: w
    })]) : s.slots.content ? a(Y, null, [s.slots.content && s.slots.content({
      item: y.raw,
      index: o,
      selectedItem: w
    })]) : a("div", {
      style: "margin: 10px 0;"
    }, [y.raw[g.value || "name"]]);
  }
  function H(y, o, w) {
    return a("li", {
      class: m(y, o),
      id: I(y, o),
      key: I(y, o),
      style: h(y, o),
      onClick: (M) => R(y, o, M),
      onMouseenter: (M) => V(M, y, o),
      onMouseover: (M) => v(M, y, o),
      onMouseout: (M) => C(M, y, o)
    }, [T.value && a("div", {
      class: "f-list-select",
      onClick: (M) => M.stopPropagation()
    }, [a(q, {
      id: "list-" + I(y, o),
      customClass: "listview-checkbox",
      disabled: y[f.value],
      checked: y.checked,
      "onUpdate:checked": (M) => y.checked = M,
      onChange: (M) => {
        B(y, o, !M.checked), P();
      }
    }, null)]), a("div", {
      class: "f-list-content"
    }, [_(y, o, w)])]);
  }
  return {
    renderItem: H
  };
}
function We(e, s, b, S, p, c, u, i, k, D) {
  const T = d(e.multiSelect), f = d(e.disableField), g = d(e.textField), {
    onMouseenterItem: V,
    onMouseoverItem: v,
    onMouseoutItem: C
  } = c, {
    getKey: I,
    listViewItemClass: m,
    onCheckItem: h,
    onClickItem: B
  } = u, {
    dragstart: R,
    dragenter: P,
    dragover: _,
    dragend: H
  } = S, {
    removeItem: y
  } = k, o = x(() => ({
    margin: T.value ? "10px 0" : "10px 0px 10px 14px"
  }));
  function w(n, l = "") {
    const r = n.target;
    r.title = r.scrollWidth > r.clientWidth ? l : "";
  }
  function M(n) {
    return a("div", {
      style: o.value,
      onMouseenter: (l) => w(l, n.raw[g.value || "name"])
    }, [n.raw[g.value || "name"]]);
  }
  function O() {
    return s.slots.itemContent ? s.slots.itemContent : M;
  }
  const G = O();
  function L(n, l, r) {
    return a("li", {
      class: m(n, l),
      id: I(n, l),
      key: I(n, l),
      onClick: (t) => B(n, l, t),
      onMouseenter: (t) => V(t, n, l),
      onMouseover: (t) => v(t, n, l),
      onMouseout: (t) => C(t, n, l),
      draggable: "true",
      onDragstart: (t) => R(t, n, l),
      onDragenter: (t) => P(t, l),
      onDragend: (t) => H(t, n),
      onDragover: (t) => _(t)
    }, [T.value && a("div", {
      class: "f-list-select",
      onClick: (t) => t.stopPropagation()
    }, [a(q, {
      id: "list-" + I(n, l),
      customClass: "listview-checkbox",
      disabled: n[f.value],
      checked: n.checked,
      "onUpdate:checked": (t) => n.checked = t,
      onChange: (t) => h(n, l, !t.checked)
    }, null)]), a("div", {
      class: "f-list-content"
    }, [G(n)]), e.allowDelete && a("div", {
      class: "f-list-remove",
      onClick: (t) => {
        t.stopPropagation(), y(l);
      }
    }, [a("div", {
      class: "f-list-remove-icon"
    }, [a("i", {
      class: "f-icon f-icon-remove_face"
    }, null)])]), a("div", {
      class: "f-list-handle"
    }, [a("div", null, [a("i", {
      class: "f-icon f-icon-drag-vertical"
    }, null)])])]);
  }
  return {
    renderItem: L
  };
}
function Ye(e, s, b, S, p, c, u, i, k, D) {
  var I;
  const T = d(((I = e.group) == null ? void 0 : I.groupFields) || []), {
    collpaseGroupIconClass: f
  } = p, {
    toggleGroupRow: g
  } = D;
  function V(m, h) {
    m.stopPropagation(), h.collapse = !h.collapse, b.value = g(h.collapse ? "collapse" : "expand", h, b.value);
  }
  function v(m, h, B) {
    return s.slots.group ? a(Y, null, [s.slots.content && s.slots.group({
      item: m.raw,
      index: h,
      selectedItem: B
    })]) : a("div", {
      class: "f-navlookup-recentHeader",
      onClick: (R) => V(R, m)
    }, [a("div", {
      class: "fv-grid-group-row-icon"
    }, [a("span", {
      class: f(m)
    }, null)]), a("div", {
      class: "f-navlookup-recommandLabel"
    }, [m.raw[T.value[m.layer]]])]);
  }
  function C(m, h, B) {
    return m.layer > -1 && v(m, h, B);
  }
  return {
    renderItem: C
  };
}
function Ue(e, s, b, S) {
  const { dataView: p } = b, { updateSelectedItems: c } = S;
  function u(i) {
    if (i > -1 && i < p.value.length) {
      if (e != null && e.checkBeforeRemoveItem && !e.checkBeforeRemoveItem(p.value[i]))
        return;
      const k = p.value.splice(i, 1);
      c(), s.emit("removeItem", k[0]);
    }
  }
  return { removeItem: u };
}
function Ke(e, s, b, S, p, c, u, i, k, D) {
  const T = d(e.view), f = d(e.view === "CardView"), g = d({}), V = Ue(e, s, S, k), v = x(() => ({
    "f-list-view-group": !0,
    "f-list-view-group-multiselect": e.multiSelect,
    "d-flex": f.value,
    "flex-wrap": f.value
  })), C = x(() => !!b.value && b.value.length > 0), I = x(() => b.value.length === 0);
  x(() => I.value && !s.slots.empty);
  function m() {
    return T.value === "SingleView" ? ee : T.value === "DraggableView" ? We : (T.value === "ContentView" || T.value === "CardView") && (e.contentTemplate || s.slots.content) ? ze : ee;
  }
  const h = m(), {
    renderItem: B
  } = h(e, s, b, D, p, c, k, u, V, i), {
    renderItem: R
  } = Ye(e, s, b, D, p, c, k, u, V, i), P = [B, R];
  function _() {
    return b.value.filter((o) => o.visible !== !1).map((o, w) => P[o.type](o, w, g));
  }
  function H() {
    return a("div", {
      class: "f-list-view-emptydata",
      style: "margin: 0 auto;"
    }, [a("p", {
      class: "f-empty-title"
    }, [e.emptyTemplate ? e.emptyTemplate() : s.slots.empty ? s.slots.empty() : Ge.getLocaleValue("listView.emptyMessage")])]);
  }
  function y() {
    return a("ul", {
      class: v.value,
      style: "list-style: none;"
    }, [C.value && _(), I.value && H()]);
  }
  return {
    renderListArea: y
  };
}
function Xe(e, s, b) {
  function S() {
    return s.slots.header && a("div", {
      class: "f-list-view-header"
    }, [s.slots.header()]);
  }
  return {
    renderHeader: S
  };
}
function te(e, s, b) {
  const S = d(e.headerClass), p = d(e.placeholder), c = d(""), u = x(() => !c.value), i = x(() => !!c.value);
  function k(g) {
    c.value = "";
  }
  ne(c, (g) => {
    e.enableHighlightSearch && b.search(g), s.emit("afterSearch", g);
  });
  const D = x(() => {
    const g = {
      "form-group": !0,
      "farris-form-group": !0
    };
    return S.value && S.value.split(" ").reduce((v, C) => (v[C] = !0, v), g), g;
  });
  function T(g) {
  }
  function f() {
    return a("div", {
      class: "f-list-view-header",
      onClick: ye(() => T, ["prevent", "stop"])
    }, [a("div", {
      class: D.value
    }, [a("div", {
      class: "farris-input-wrap"
    }, [a("div", {
      class: "f-cmp-inputgroup"
    }, [a("div", {
      class: "input-group f-state-editable"
    }, [Se(a("input", {
      class: "form-control f-utils-fill text-left",
      "onUpdate:modelValue": (g) => c.value = g,
      name: "input-group-value",
      type: "text",
      placeholder: p.value,
      autocomplete: "off"
    }, null), [[Ie, c.value]]), a("div", {
      class: "input-group-append"
    }, [i.value && a("span", {
      class: "input-group-text input-group-clear",
      onClick: (g) => k()
    }, [a("i", {
      class: "f-icon f-icon-close-circle"
    }, null)]), u.value && a("span", {
      class: "input-group-text"
    }, [a("span", {
      class: "f-icon f-icon-search"
    }, null)])])])])])])]);
  }
  return {
    renderHeader: f
  };
}
function qe() {
  const e = d(""), s = d(-1), b = d(""), S = d(-1), p = d(!1);
  function c(f, g, V) {
    S.value = V;
  }
  function u(f, g, V) {
    p.value || (S.value = V);
  }
  function i(f, g, V) {
    S.value = -1;
  }
  function k() {
    p.value = !0;
  }
  function D() {
    p.value = !1;
  }
  function T() {
    s.value = -1, e.value = "";
  }
  return {
    activeIndex: s,
    focusedItemId: b,
    hoverIndex: S,
    clearActiveItem: T,
    onMouseenterItem: c,
    onMouseoverItem: u,
    onMouseoutItem: i,
    resumeHover: D,
    suspendHover: k
  };
}
function Je(e, s, b, S, p) {
  const c = d(e.idField), { dataView: u } = b, i = d(-1), k = d(!1), { activeIndex: D, focusedItemId: T, hoverIndex: f, resumeHover: g, suspendHover: V } = S;
  let v, C = 0, I = 0, m = null, h = null;
  const B = 10, R = 50;
  function P(n) {
    if (!n)
      return null;
    const { overflowY: l } = getComputedStyle(n);
    return l === "auto" || l === "scroll" ? n : P(n.parentElement);
  }
  function _(n, l) {
    h && clearInterval(h), h = window.setInterval(() => {
      l === "up" ? n.scrollTop -= B : n.scrollTop += B;
    }, 16);
  }
  function H() {
    h && (clearInterval(h), h = null);
  }
  function y(n) {
    const l = n.target;
    if (m || (m = P(l)), !m) {
      H();
      return;
    }
    const r = m.getBoundingClientRect(), t = n.clientY, A = t - r.top, j = r.bottom - t;
    A < R && m.scrollTop > 0 ? _(m, "up") : j < R && m.scrollTop < m.scrollHeight - m.clientHeight ? _(m, "down") : H();
  }
  function o(n, l) {
    const r = n - C, t = l - I;
    v.style.left = parseInt(v.style.left) + r + "px", v.style.top = parseInt(v.style.top) + t + "px", C = n, I = l;
  }
  function w(n) {
    const { left: l, top: r } = n.getBoundingClientRect(), t = n.cloneNode(!0);
    return t.className = t.className + " f-listview-drag-moving", t.style.cssText = `
        position:absolute;
        left:${l}px;
        top:${document.documentElement.scrollTop ? r + document.documentElement.scrollTop : r}px;
        z-index: 999999;
        pointer-events: none;
        border-radius: 10px;
        margin: 4px 2px;    
        display: flex;
        align-items: center;
        float: none;
        text-align: initial;
        width:${getComputedStyle(n).width};
        height:${getComputedStyle(n).height};
        `, t.children[0].style.cssText = "padding: 0 0 0 14px", t.children[0].children[0].style.cssText = `
        margin: 10px 0px 10px 14px;
        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
        `, t.children[1].style.cssText = "flex:1 1 auto; width:100%", t.children[2].style.cssText = "padding: 0 14px 0 0", t.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(t), t;
  }
  function M(n, l, r) {
    if (n.stopPropagation(), V(), l) {
      if (v = w(n.target), n.dataTransfer) {
        const t = new Image();
        t.src = "", n.dataTransfer.setDragImage(t, 0, 0);
      }
      C = n.pageX, I = n.pageY, setTimeout(() => {
        i.value = r, k.value = !0, l.moving = !0;
      });
    }
  }
  function O(n, l) {
    if (n.preventDefault(), i.value !== l && i.value !== -1) {
      const r = u.value[i.value], t = p.value[i.value];
      r && t && (u.value.splice(i.value, 1), u.value.splice(l, 0, r), p.value.splice(i.value, 1), p.value.splice(l, 0, t), p.value.forEach((A, j) => {
        A.index = j, A.raw.__fv_index__ = j;
      }), i.value = l, o(n.pageX, n.pageY));
    }
  }
  function G(n) {
    n.preventDefault(), n.dataTransfer && (n.dataTransfer.dropEffect = "move"), o(n.pageX, n.pageY), y(n);
  }
  function L(n, l) {
    var t, A;
    H(), m = null, l && (l.moving = !1, v && (document.body.removeChild(v), v = null)), u.value.forEach((j, N) => {
      j.__fv_index__ = N;
    }), p.value.forEach((j, N) => {
      j.index = N, j.raw && (j.raw.__fv_index__ = N);
    }), k.value = !1, g();
    const r = ((t = l.raw) == null ? void 0 : t.__fv_index__) ?? 0;
    f.value = r, D.value = r, T.value = (A = l.raw) == null ? void 0 : A[c.value], s.emit("change", u.value), s.emit("activeChange", [l.raw]);
  }
  return {
    dragstart: M,
    dragenter: O,
    dragover: G,
    dragend: L,
    isDragging: k
  };
}
function Qe(e, s, b, S, p, c) {
  var L, n;
  const u = d(e.idField), i = d(e.disableField), k = d(e.draggable);
  d(e.itemClass);
  const D = d(((L = e.selection) == null ? void 0 : L.multiSelect) ?? !1), T = d(((n = e.selection) == null ? void 0 : n.multiSelectMode) || "DependOnCheck"), { isDragging: f } = S, { activeIndex: g, focusedItemId: V, hoverIndex: v } = p, { clearSelection: C, getSelectedItems: I, toggleSelectItem: m, currentSelectedDataId: h, multiSelectOnlyOnCheck: B } = c, R = d(I()), P = (l) => R.value.length === 0 ? !1 : R.value.some((r) => {
    let t = "";
    return r.data ? t = r.data[u.value] : t = r[u.value], t === l;
  });
  function _() {
    R.value = I();
  }
  function H(l, r) {
    return l.raw[u.value] != null ? l.raw[u.value] + "_" + r : "";
  }
  function y(l, r) {
    const t = {
      "f-list-view-group-item": !0,
      "f-list-view-draggable-item": k.value,
      "f-un-click": !l.checked,
      "f-un-select": !!l.raw[i.value],
      "f-listview-active": (
        // 多选
        D.value && P(H(l, r)) && e.showActiveWhenMultiSelect || // 单选
        !D.value && l.raw[u.value] === h.value || D.value && !e.showActiveWhenMultiSelect && l.raw[u.value] === h.value
      ),
      "f-listview-hover": !f.value && r === v.value,
      moving: !!l.moving
    };
    if (typeof e.itemClass == "string")
      return X(t, e.itemClass);
    if (typeof e.itemClass == "function") {
      const A = e.itemClass(l);
      return X(t, A);
    }
    return t;
  }
  function o(l, r) {
    const t = {};
    if (typeof e.itemStyle == "string")
      return $(t, e.itemStyle);
    if (typeof e.itemStyle == "function") {
      const A = e.itemStyle(l);
      return $(t, A);
    }
    return t;
  }
  const w = x(() => !D.value);
  function M(l, r, t) {
    l.checked = t, !l.raw[i.value] && (w.value && (V.value = l.raw[u.value]), m(l));
  }
  const O = x(() => !D.value || D.value && T.value === "OnCheckAndClick");
  function G(l, r, t) {
    if (l.raw[i.value]) {
      t == null || t.preventDefault(), t == null || t.stopPropagation();
      return;
    }
    h.value = l.raw[u.value], V.value = l.raw[u.value], g.value = r, O.value && (m(l), _()), s.emit("clickItem", { data: R.value, index: r, dataItem: l.raw }), s.emit("activeChange", R.value);
  }
  return {
    getKey: H,
    selectedItems: R,
    listViewItemClass: y,
    listViewItemStyle: o,
    updateSelectedItems: _,
    onCheckItem: M,
    onClickItem: G
  };
}
const K = /* @__PURE__ */ ae({
  name: "FListView",
  props: oe,
  emits: ["afterSearch", "checkValuesChange", "clickItem", "selectItem", "unSelectItem", "selectionChange", "removeItem", "change", "activeChange", "pageIndexChanged", "pageSizeChanged", "changed", "selectionUpdate"],
  setup(e, s) {
    var Q;
    const b = d(!1), S = d(), p = d(!0), c = d(((Q = e.rowOption) == null ? void 0 : Q.rowHeight) || 28), u = d(!1), i = d([]), k = 0, D = d(e.columns), T = be(e, s), f = ke(e), g = Ve(e), V = Fe(e, f), v = Te(e, /* @__PURE__ */ new Map(), T, g, f), C = De(e, v, f, i, s), I = Ne(e, S), m = Me(e, v), h = x(() => v.dataView.value.length), B = Re(e, s, C, f), R = Oe(e, s, f, B, i), P = Be(e, v, c), _ = He(e, {}, P), H = _e(e, v, R, g, f, P, _, c), y = Ae(e, f, _, H), o = xe(e, f, _, H), w = Pe(e, D, v, h, k, H, y, o), {
      getVisualData: M
    } = w;
    i.value = M(0, h.value + k - 1);
    const O = x(() => {
      const F = {
        "f-list-view": !0,
        "f-list-view-multiple": e.multiSelect
      };
      return e.size !== "default" && (F[`${e.size}-item`] = !0), X(F, e.customClass);
    }), G = x(() => !!s.slots.footer || p.value);
    function L() {
      return e.header === "SearchBar" ? te : e.header === "ContentHeader" ? Xe : te;
    }
    const n = L(), {
      renderHeader: l
    } = n(e, s, I), r = qe(), t = Je(e, s, v, r, i), A = Qe(e, s, i, t, r, C), {
      renderListArea: j
    } = Ke(e, s, i, v, V, r, C, w, A, t);
    function N(F) {
      I.search(F);
    }
    function se(F) {
      F && (v.load(F), i.value = M(0, h.value + k - 1));
    }
    function ie() {
      C.clearSelection(), r.clearActiveItem();
    }
    function ue() {
      return A.selectedItems.value;
    }
    function ce() {
      return A.selectedItems.value.map((F) => F[f.idField.value]);
    }
    function J(F) {
      C.selectedValues.value = F, A.updateSelectedItems();
    }
    function re() {
      return C.currentSelectedDataId.value;
    }
    function de(F) {
      B.activeRowById(F);
    }
    function fe(F) {
      const E = f.idField.value, z = i.value.find((U) => U.raw[E] === F), W = i.value.findIndex((U) => U.raw[E] === F);
      z && W > -1 && A.onClickItem(z, W);
    }
    function ve(F) {
      const E = f.idField.value, z = i.value.find((W) => W.raw[E] === F);
      z && B.changeRow(z);
    }
    function me(F) {
      m.updatePagination(F);
    }
    function ge(F) {
      return i.value.filter((E) => F.includes(E.raw[e.idField]));
    }
    s.expose({
      search: N,
      updateDataSource: se,
      clearSelection: ie,
      getSelections: ue,
      updateSelectionByIds: J,
      getSelectionIds: ce,
      activeRowById: de,
      getCurrentRowId: re,
      clickRowItemById: fe,
      updatePagination: me,
      getVisibleDataByIds: ge,
      selectRowById: ve
    }), ne(() => e.selectionValues, (F, E) => {
      F !== E && J(F);
    });
    const he = je(e, C), {
      sidebarWidth: pe,
      showSidebarCheckBox: Ze
    } = he, Ce = Le(e, s), {
      applyColumnSorter: $e,
      columnContext: we,
      updateColumnRenderContext: et
    } = Ce;
    return Ee(e, v, i, we, w, h, k, pe, c, b, R), () => a("div", {
      class: O.value
    }, [l(), a("div", {
      ref: S,
      class: "f-list-view-content",
      onMouseover: () => {
        u.value || (u.value = !0);
      },
      onMouseleave: () => {
        u.value && (u.value = !1);
      }
    }, [j()]), G.value && a("div", {
      class: "f-list-view-footer"
    }, [e.footerTemplate ? e.footerTemplate() : s.slots.footer && s.slots.footer()])]);
  }
}), le = /* @__PURE__ */ ae({
  name: "FListViewTable",
  props: oe,
  emits: ["outputValue", "currentEvent", "selectionChanged"],
  setup(e, s) {
    const b = [{
      name: "任芳",
      code: "1.PO20198989001",
      date: "2024-02-19",
      desc: "导游1",
      amount: 63.85,
      avatar: "./assets/avatar1.png"
    }, {
      name: "戴秀兰",
      code: "2.PO20198989002",
      date: "2024-03-17",
      desc: "导游2",
      amount: 60.13,
      avatar: "./assets/avatar2.png"
    }, {
      name: "尹磊",
      code: "3.PO20198989003",
      date: "2024-04-09",
      desc: "导游3",
      amount: 36.54,
      avatar: "./assets/avatar3.png"
    }, {
      name: "赵明",
      code: "4.PO20198989004",
      date: "2024-03-27",
      desc: "导游4",
      amount: 52.76,
      avatar: "./assets/avatar4.png"
    }, {
      name: "吕洋",
      code: "5.PO20198989005",
      date: "2024-11-17",
      desc: "导游5",
      amount: 84.13,
      avatar: "./assets/avatar5.png"
    }], S = x(() => e.data.length > 0 ? e.data : b);
    return () => {
      var p;
      return a(Y, null, [(p = S.value) == null ? void 0 : p.map((c) => a("div", {
        class: "f-template-listview-row"
      }, [a("div", {
        class: "list-view-item-title"
      }, [a("div", {
        class: "item-title-img"
      }, [a("img", {
        src: c.avatar,
        alt: "",
        style: "width: 44px;"
      }, null)]), a("div", {
        class: "item-title"
      }, [a("p", {
        class: "item-title-heading"
      }, [c.code]), a("p", {
        class: "item-title-text"
      }, [c.desc])])]), a("div", {
        class: "list-view-item-content"
      }, [a("div", {
        class: "content-message"
      }, [a("div", {
        class: "ower"
      }, [a("p", null, [Z("创建人")]), a("p", {
        class: "con"
      }, [c.name])]), a("div", {
        class: "date"
      }, [a("p", null, [Z("创建时间")]), a("p", {
        class: "con"
      }, [c.date])])])])]))]);
    };
  }
});
K.install = (e) => {
  e.component(K.name, K), e.component(le.name, le);
};
export {
  K as FListView,
  le as FListViewTable,
  K as default,
  oe as listViewProps
};