@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
959 lines (958 loc) • 28.5 kB
JavaScript
import { ref as f, computed as _, createVNode as n, Fragment as U, watch as ne, withModifiers as Se, withDirectives as Ie, vModelText as be, defineComponent as ae, createTextVNode as Q } from "vue";
import { getCustomStyle as Z, getCustomClass as X } from "../common/index.esm.js";
import { useFilter as ke, useIdentify as Ve, useHierarchy as Fe, useGroupData as Te, useDataView as De, useSelection as Me, usePagination as Re, useRow as Oe, useEdit as Ae, useVisualDataBound as Be, useVisualDataCell as He, useVisualDataRow as xe, useVisualGroupRow as _e, useVisualSummaryRow as Pe, useVisualData as je, useSidebar as Le, useColumn as Ee, useVirtualScroll as Ge } from "../data-view/index.esm.js";
import { LocaleService as Ne } from "../locale/index.esm.js";
import oe, { FCheckbox as $ } from "../checkbox/index.esm.js";
const se = {
/**
* 列集合
*/
columns: {
type: Array,
default: [
{ field: "name", title: "", dataType: "string" }
]
},
customClass: { type: String, default: "" },
/**
* 列表数组数据
* @default []
*/
data: { type: Array, default: [] },
/**
* 是否可拖拽
* @default false
*/
draggable: { type: Boolean, default: !1 },
/**
* 是否支持多选
* @default false
*/
multiSelect: { type: Boolean, default: !1 },
// multiSelectMode: { type: String as PropType<MultiSelectMode>, default: 'OnCheck' },
/**
* 定义列表的唯一标识字段
* @default 'id'
*/
idField: { type: String, default: "id" },
/**
* 值字段
* @default 'id'
*/
valueField: { type: String, default: "id" },
/**
* 文本字段
* @default 'name'
*/
textField: { type: String, default: "name" },
/**
* 标题字段
* @default 'name'
*/
titleField: { type: String, default: "name" },
/**
* 视图
* @default 'ContentView'
*/
view: { type: String, default: "ContentView" },
/**
* 尺寸
* @default 'default'
*/
size: { type: String, default: "default" },
/**
* 占位符
* @default ''
*/
placeholder: { type: String, default: "" },
/**
* 列表头
* @default 'ContentHeader'
*/
header: { type: String, default: "ContentHeader" },
/**
* 列表头类
* @default ''
*/
headerClass: { type: String, default: "" },
/**
* 项目类
* @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: "" },
/**
* 已选列
* @default []
*/
selectionValues: { type: Array, default: [] },
/**
* 分组配置
*/
group: { type: Object },
/**
* 选择配置
*/
selection: {
type: Object,
default: {
enableSelectRow: !0,
multiSelect: !1,
multiSelectMode: "DependOnCheck",
showCheckbox: !1,
showSelectAll: !1,
showSelection: !0
}
},
/**
* 是否保持排序
* @default false
*/
keepOrder: { type: Boolean, default: !1 },
/**
* 不可操作字段
* @default 'disabled'
*/
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 ze(e, i) {
function b(c) {
const u = [];
let o = c.nextNode();
for (; o; )
u.push(o), o = c.nextNode();
return u;
}
function k(c, u) {
const o = document.createTreeWalker(c, NodeFilter.SHOW_TEXT);
return b(o).map((r) => ({ textNode: r, text: (r.textContent || "").toLocaleLowerCase() })).map(({ textNode: r, text: F }) => {
const C = [];
let v = 0;
for (; v < F.length; ) {
const p = F.indexOf(u, v);
if (p === -1)
break;
C.push(p), v = p + u.length;
}
return C.map((p) => {
const y = new Range();
return y.setStart(r, p), y.setEnd(r, p + u.length), y;
});
}).flat();
}
function h(c) {
if (!CSS.highlights || (CSS.highlights.clear(), !c || !i))
return;
const u = k(i.value, c.toLocaleLowerCase()), o = new Highlight(...u);
CSS.highlights.set("search-result", o);
}
return { search: h };
}
function ee(e, i, b, k, h, c, u, o, V, D) {
const T = f(e.size), r = f(e.textField), F = f(e.titleField), C = f(e.disableField), v = _(() => {
var s, S;
return ((s = e.selection) == null ? void 0 : s.multiSelect) && ((S = e.selection) == null ? void 0 : S.showCheckbox);
}), {
onMouseenterItem: p,
onMouseoverItem: y,
onMouseoutItem: m
} = c, {
getKey: g,
listViewItemClass: A,
listViewItemStyle: M,
onCheckItem: I,
onClickItem: x
} = u, B = _(() => {
const s = {
"text-overflow": "ellipsis",
overflow: "hidden",
"white-space": "nowrap"
};
return e.itemClass ? s : {
margin: T.value === "small" ? "0.25rem 0" : "8px 0",
...s
};
});
function w(s, S, O) {
return s.checked = o.findIndexInSelectedItems(s) > -1, n("li", {
class: A(s, S),
id: g(s, S),
key: g(s, S),
style: M(s, S),
onClick: (H) => x(s, S, H),
onMouseenter: (H) => p(H, s, S),
onMouseover: (H) => y(H, s, S),
onMouseout: (H) => m(H, s, S)
}, [v.value && n("div", {
class: "f-list-select",
onClick: (H) => H.stopPropagation()
}, [n($, {
id: "list-" + g(s, S),
customClass: "listview-checkbox float-left",
disabled: s[C.value],
checked: s.checked,
"onUpdate:checked": (H) => s.checked = H,
onChange: (H) => {
I(s, S, !H.checked);
}
}, null)]), n("div", {
class: "f-list-content"
}, [n("div", {
class: e.itemContentClass,
style: B.value,
title: s.raw[F.value] || s.raw[r.value]
}, [s.raw[r.value]])])]);
}
return {
renderItem: w
};
}
function We(e, i, b, k, h, c, u, o, V, D) {
const T = f(e.multiSelect), r = f(e.disableField), F = f(e.textField), {
onMouseenterItem: C,
onMouseoverItem: v,
onMouseoutItem: p
} = c, {
getKey: y,
listViewItemClass: m,
listViewItemStyle: g,
onCheckItem: A,
onClickItem: M,
updateSelectedItems: I
} = u;
function x(w, s, S) {
return e.contentTemplate ? n(U, null, [e.contentTemplate({
item: w.raw,
index: s,
selectedItem: S
})]) : i.slots.content ? n(U, null, [i.slots.content && i.slots.content({
item: w.raw,
index: s,
selectedItem: S
})]) : n("div", {
style: "margin: 10px 0;"
}, [w.raw[F.value || "name"]]);
}
function B(w, s, S) {
return n("li", {
class: m(w, s),
id: y(w, s),
key: y(w, s),
style: g(w, s),
onClick: (O) => M(w, s, O),
onMouseenter: (O) => C(O, w, s),
onMouseover: (O) => v(O, w, s),
onMouseout: (O) => p(O, w, s)
}, [T.value && n("div", {
class: "f-list-select",
onClick: (O) => O.stopPropagation()
}, [n($, {
id: "list-" + y(w, s),
customClass: "listview-checkbox",
disabled: w[r.value],
checked: w.checked,
"onUpdate:checked": (O) => w.checked = O,
onChange: (O) => {
A(w, s, !O.checked), I();
}
}, null)]), n("div", {
class: "f-list-content"
}, [x(w, s, S)])]);
}
return {
renderItem: B
};
}
function Ue(e, i, b, k, h, c, u, o, V, D) {
const T = f(e.multiSelect), r = f(e.disableField), F = f(e.textField), {
onMouseenterItem: C,
onMouseoverItem: v,
onMouseoutItem: p
} = c, {
getKey: y,
listViewItemClass: m,
onCheckItem: g,
onClickItem: A
} = u, {
dragstart: M,
dragenter: I,
dragover: x,
dragend: B
} = k, {
removeItem: w
} = V, s = _(() => ({
margin: T.value ? "10px 0" : "10px 0px 10px 14px"
}));
function S(a, l = "") {
const d = a.target;
d.title = d.scrollWidth > d.clientWidth ? l : "";
}
function O(a) {
return n("div", {
style: s.value,
onMouseenter: (l) => S(l, a.raw[F.value || "name"])
}, [a.raw[F.value || "name"]]);
}
function H() {
return i.slots.itemContent ? i.slots.itemContent : O;
}
const G = H();
function L(a, l, d) {
return n("li", {
class: m(a, l),
id: y(a, l),
key: y(a, l),
onClick: (t) => A(a, l, t),
onMouseenter: (t) => C(t, a, l),
onMouseover: (t) => v(t, a, l),
onMouseout: (t) => p(t, a, l),
draggable: "true",
onDragstart: (t) => M(t, a, l),
onDragenter: (t) => I(t, l),
onDragend: (t) => B(t, a),
onDragover: (t) => x(t)
}, [T.value && n("div", {
class: "f-list-select",
onClick: (t) => t.stopPropagation()
}, [n($, {
id: "list-" + y(a, l),
customClass: "listview-checkbox",
disabled: a[r.value],
checked: a.checked,
"onUpdate:checked": (t) => a.checked = t,
onChange: (t) => g(a, l, !t.checked)
}, null)]), n("div", {
class: "f-list-content"
}, [G(a)]), e.allowDelete && n("div", {
class: "f-list-remove",
onClick: (t) => {
t.stopPropagation(), w(l);
}
}, [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: L
};
}
function Ye(e, i, b, k, h, c, u, o, V, D) {
var y;
const T = f(((y = e.group) == null ? void 0 : y.groupFields) || []), {
collpaseGroupIconClass: r
} = h, {
toggleGroupRow: F
} = D;
function C(m, g) {
m.stopPropagation(), g.collapse = !g.collapse, b.value = F(g.collapse ? "collapse" : "expand", g, b.value);
}
function v(m, g, A) {
return i.slots.group ? n(U, null, [i.slots.content && i.slots.group({
item: m.raw,
index: g,
selectedItem: A
})]) : n("div", {
class: "f-navlookup-recentHeader",
onClick: (M) => C(M, m)
}, [n("div", {
class: "fv-grid-group-row-icon"
}, [n("span", {
class: r(m)
}, null)]), n("div", {
class: "f-navlookup-recommandLabel"
}, [m.raw[T.value[m.layer]]])]);
}
function p(m, g, A) {
return m.layer > -1 && v(m, g, A);
}
return {
renderItem: p
};
}
function Ke(e, i, b, k) {
const { dataView: h } = b, { updateSelectedItems: c } = k;
function u(o) {
if (o > -1 && o < h.value.length) {
if (e != null && e.checkBeforeRemoveItem && !e.checkBeforeRemoveItem(h.value[o]))
return;
const V = h.value.splice(o, 1);
c(), i.emit("removeItem", V[0]);
}
}
return { removeItem: u };
}
function Xe(e, i, b, k, h, c, u, o, V, D) {
const T = f(e.view), r = f(e.view === "CardView"), F = f({}), C = Ke(e, i, k, V), v = _(() => ({
"f-list-view-group": !0,
"f-list-view-group-multiselect": e.multiSelect,
"d-flex": r.value,
"flex-wrap": r.value
})), p = _(() => !!b.value && b.value.length > 0), y = _(() => b.value.length === 0);
_(() => y.value && !i.slots.empty);
function m() {
return T.value === "SingleView" ? ee : T.value === "DraggableView" ? Ue : (T.value === "ContentView" || T.value === "CardView") && (e.contentTemplate || i.slots.content) ? We : ee;
}
const g = m(), {
renderItem: A
} = g(e, i, b, D, h, c, V, u, C, o), {
renderItem: M
} = Ye(e, i, b, D, h, c, V, u, C, o), I = [A, M];
function x() {
return b.value.filter((s) => s.visible !== !1).map((s, S) => I[s.type](s, S, F));
}
function B() {
return n("div", {
class: "f-list-view-emptydata",
style: "margin: 0 auto;"
}, [n("p", {
class: "f-empty-title"
}, [e.emptyTemplate ? e.emptyTemplate() : i.slots.empty ? i.slots.empty() : Ne.getLocaleValue("listView.emptyMessage")])]);
}
function w() {
return n("ul", {
class: v.value,
style: "list-style: none;"
}, [p.value && x(), y.value && B()]);
}
return {
renderListArea: w
};
}
function $e(e, i, b, k, h) {
const {
showSelectAll: c,
selectAll: u,
unSelectAll: o,
selectAllStatus: V,
indeterminateStatus: D
} = k;
function T(C) {
C ? u() : o();
}
const r = _(() => "f-list-view-group-item f-combo-list-item f-un-select");
function F() {
return n("div", {
class: "f-list-view-header"
}, [c.value && h.dataView.value.length > 0 && n("ul", {
class: "f-list-view-group f-list-view-group-multiselect",
style: "list-style: none;"
}, [n("li", {
class: r.value
}, [n("div", {
class: "f-list-select"
}, [n(oe, {
customClass: "listview-checkbox float-left",
modelValue: V.value,
indeterminate: D.value,
"onUpdate:modelValue": (C) => T(C)
}, null)])])]), i.slots.header && i.slots.header()]);
}
return {
renderHeader: F
};
}
function te(e, i, b, k, h) {
const c = f(e.headerClass), u = f(e.placeholder), o = f(""), V = _(() => !o.value), D = _(() => !!o.value), {
showSelectAll: T,
selectAll: r,
unSelectAll: F,
selectAllStatus: C,
indeterminateStatus: v
} = k, p = _(() => "f-list-view-group-item f-combo-list-item f-un-select");
function y(I) {
o.value = "";
}
function m(I) {
I ? r() : F();
}
ne(o, (I) => {
e.enableHighlightSearch && b.search(I), i.emit("afterSearch", I);
});
const g = _(() => {
const I = {
"form-group": !0,
"farris-form-group": !0
};
return c.value && c.value.split(" ").reduce((B, w) => (B[w] = !0, B), I), I;
});
function A(I) {
}
function M() {
return n("div", {
class: "f-list-view-header",
onClick: Se(() => A, ["prevent", "stop"])
}, [T.value && h.dataView.value.length > 0 && n("ul", {
class: "f-list-view-group f-list-view-group-multiselect",
style: "list-style: none;"
}, [n("li", {
class: p.value
}, [n("div", {
class: "f-list-select"
}, [n(oe, {
customClass: "listview-checkbox float-left",
modelValue: C.value,
indeterminate: v.value,
"onUpdate:modelValue": (I) => m(I)
}, null)])])]), n("div", {
class: g.value
}, [n("div", {
class: "farris-input-wrap"
}, [n("div", {
class: "f-cmp-inputgroup"
}, [n("div", {
class: "input-group f-state-editable"
}, [Ie(n("input", {
class: "form-control f-utils-fill text-left",
"onUpdate:modelValue": (I) => o.value = I,
name: "input-group-value",
type: "text",
placeholder: u.value,
autocomplete: "off"
}, null), [[be, o.value]]), n("div", {
class: "input-group-append"
}, [D.value && n("span", {
class: "input-group-text input-group-clear",
onClick: (I) => y()
}, [n("i", {
class: "f-icon f-icon-close-circle"
}, null)]), V.value && n("span", {
class: "input-group-text"
}, [n("span", {
class: "f-icon f-icon-search"
}, null)])])])])])])]);
}
return {
renderHeader: M
};
}
function qe() {
const e = f(""), i = f(-1), b = f(""), k = f(-1), h = f(!1);
function c(r, F, C) {
k.value = C;
}
function u(r, F, C) {
h.value || (k.value = C);
}
function o(r, F, C) {
k.value = -1;
}
function V() {
h.value = !0;
}
function D() {
h.value = !1;
}
function T() {
i.value = -1, e.value = "";
}
return {
activeIndex: i,
focusedItemId: b,
hoverIndex: k,
clearActiveItem: T,
onMouseenterItem: c,
onMouseoverItem: u,
onMouseoutItem: o,
resumeHover: D,
suspendHover: V
};
}
function Je(e, i, b, k, h) {
const c = f(e.idField), { dataView: u } = b, o = f(-1), V = f(!1), { activeIndex: D, focusedItemId: T, hoverIndex: r, resumeHover: F, suspendHover: C } = k;
let v, p = 0, y = 0, m = null, g = null;
const A = 10, M = 50;
function I(a) {
if (!a)
return null;
const { overflowY: l } = getComputedStyle(a);
return l === "auto" || l === "scroll" ? a : I(a.parentElement);
}
function x(a, l) {
g && clearInterval(g), g = window.setInterval(() => {
l === "up" ? a.scrollTop -= A : a.scrollTop += A;
}, 16);
}
function B() {
g && (clearInterval(g), g = null);
}
function w(a) {
const l = a.target;
if (m || (m = I(l)), !m) {
B();
return;
}
const d = m.getBoundingClientRect(), t = a.clientY, P = t - d.top, j = d.bottom - t;
P < M && m.scrollTop > 0 ? x(m, "up") : j < M && m.scrollTop < m.scrollHeight - m.clientHeight ? x(m, "down") : B();
}
function s(a, l) {
const d = a - p, t = l - y;
v.style.left = parseInt(v.style.left) + d + "px", v.style.top = parseInt(v.style.top) + t + "px", p = a, y = l;
}
function S(a) {
const { left: l, top: d } = a.getBoundingClientRect(), t = a.cloneNode(!0);
return t.className = t.className + " f-listview-drag-moving", t.style.cssText = `
position:absolute;
left:${l}px;
top:${document.documentElement.scrollTop ? d + document.documentElement.scrollTop : d}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(a).width};
height:${getComputedStyle(a).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 O(a, l, d) {
if (a.stopPropagation(), C(), l) {
if (v = S(a.target), a.dataTransfer) {
const t = new Image();
t.src = "", a.dataTransfer.setDragImage(t, 0, 0);
}
p = a.pageX, y = a.pageY, setTimeout(() => {
o.value = d, V.value = !0, l.moving = !0;
});
}
}
function H(a, l) {
if (a.preventDefault(), o.value !== l && o.value !== -1) {
const d = u.value[o.value], t = h.value[o.value];
d && t && (u.value.splice(o.value, 1), u.value.splice(l, 0, d), h.value.splice(o.value, 1), h.value.splice(l, 0, t), h.value.forEach((P, j) => {
P.index = j, P.raw.__fv_index__ = j;
}), o.value = l, s(a.pageX, a.pageY));
}
}
function G(a) {
a.preventDefault(), a.dataTransfer && (a.dataTransfer.dropEffect = "move"), s(a.pageX, a.pageY), w(a);
}
function L(a, l) {
var t, P;
B(), m = null, l && (l.moving = !1, v && (document.body.removeChild(v), v = null)), u.value.forEach((j, N) => {
j.__fv_index__ = N;
}), h.value.forEach((j, N) => {
j.index = N, j.raw && (j.raw.__fv_index__ = N);
}), V.value = !1, F();
const d = ((t = l.raw) == null ? void 0 : t.__fv_index__) ?? 0;
r.value = d, D.value = d, T.value = (P = l.raw) == null ? void 0 : P[c.value], i.emit("change", u.value), i.emit("activeChange", [l.raw]);
}
return {
dragstart: O,
dragenter: H,
dragover: G,
dragend: L,
isDragging: V
};
}
function Qe(e, i, b, k, h, c) {
var L, a;
const u = f(e.idField), o = f(e.disableField), V = f(e.draggable);
f(e.itemClass);
const D = f(((L = e.selection) == null ? void 0 : L.multiSelect) ?? !1), T = f(((a = e.selection) == null ? void 0 : a.multiSelectMode) || "DependOnCheck"), { isDragging: r } = k, { activeIndex: F, focusedItemId: C, hoverIndex: v } = h, { clearSelection: p, getSelectedItems: y, toggleSelectItem: m, currentSelectedDataId: g, multiSelectOnlyOnCheck: A } = c, M = f(y()), I = (l) => M.value.length === 0 ? !1 : M.value.some((d) => {
let t = "";
return d.data ? t = d.data[u.value] : t = d[u.value], t === l;
});
function x() {
M.value = y();
}
function B(l, d) {
return l.raw[u.value] != null ? l.raw[u.value] + "_" + d : "";
}
function w(l, d) {
const t = {
"f-list-view-group-item": !0,
"f-list-view-draggable-item": V.value,
"f-un-click": !l.checked,
"f-un-select": !!l.raw[o.value],
"f-listview-active": (
// 多选
D.value && I(B(l, d)) && e.showActiveWhenMultiSelect || // 单选
!D.value && l.raw[u.value] === g.value || D.value && !e.showActiveWhenMultiSelect && l.raw[u.value] === g.value
),
"f-listview-hover": !r.value && d === v.value,
moving: !!l.moving
};
if (typeof e.itemClass == "string")
return X(t, e.itemClass);
if (typeof e.itemClass == "function") {
const P = e.itemClass(l);
return X(t, P);
}
return t;
}
function s(l, d) {
const t = {};
if (typeof e.itemStyle == "string")
return Z(t, e.itemStyle);
if (typeof e.itemStyle == "function") {
const P = e.itemStyle(l);
return Z(t, P);
}
return t;
}
const S = _(() => !D.value);
function O(l, d, t) {
l.checked = t, !l.raw[o.value] && (S.value && (C.value = l.raw[u.value]), m(l));
}
const H = _(() => !D.value || D.value && T.value === "OnCheckAndClick");
function G(l, d, t) {
if (l.raw[o.value]) {
t == null || t.preventDefault(), t == null || t.stopPropagation();
return;
}
g.value = l.raw[u.value], C.value = l.raw[u.value], F.value = d, H.value && (m(l), x()), i.emit("clickItem", { data: M.value, index: d, dataItem: l.raw }), i.emit("activeChange", M.value);
}
return {
getKey: B,
selectedItems: M,
listViewItemClass: w,
listViewItemStyle: s,
updateSelectedItems: x,
onCheckItem: O,
onClickItem: G
};
}
const K = /* @__PURE__ */ ae({
name: "FListView",
props: se,
emits: ["afterSearch", "checkValuesChange", "clickItem", "selectItem", "unSelectItem", "selectionChange", "removeItem", "change", "activeChange", "pageIndexChanged", "pageSizeChanged", "changed", "selectionUpdate"],
setup(e, i) {
var J;
const b = f(!1), k = f(), h = f(!0), c = f(((J = e.rowOption) == null ? void 0 : J.rowHeight) || 28), u = f(!1), o = f([]), V = 0, D = f(e.columns), T = ke(e, i), r = Ve(e), F = Fe(e), C = Te(e, r), v = De(e, /* @__PURE__ */ new Map(), T, F, r), p = Me(e, v, r, o, i), y = ze(e, k), m = Re(e, v), g = _(() => v.dataView.value.length), A = Oe(e, i, p, r), M = Ae(e, i, r, A, o), I = Be(e, v, c), x = He(e, M, I), B = xe(e, v, M, F, r, I, x, c), w = _e(e, r, x, B), s = Pe(e, r, x, B), S = je(e, D, v, g, V, B, w, s), {
getVisualData: O
} = S;
o.value = O(0, g.value + V - 1);
const H = _(() => {
const R = {
"f-list-view": !0,
"f-list-view-multiple": e.multiSelect
};
return e.size !== "default" && (R[`${e.size}-item`] = !0), X(R, e.customClass);
}), G = _(() => !!i.slots.footer || h.value);
function L() {
return e.header === "SearchBar" ? te : e.header === "ContentHeader" ? $e : te;
}
const a = L(), {
renderHeader: l
} = a(e, i, y, p, v), d = qe(), t = Je(e, i, v, d, o), P = Qe(e, i, o, t, d, p), {
renderListArea: j
} = Xe(e, i, o, v, C, d, p, S, P, t);
function N(R) {
y.search(R);
}
function ie(R) {
R && (v.load(R), o.value = O(0, g.value + V - 1));
}
function ue() {
p.clearSelection(), d.clearActiveItem();
}
function ce() {
return P.selectedItems.value;
}
function re() {
return P.selectedItems.value.map((R) => R[r.idField.value]);
}
function q(R) {
p.selectedValues.value = R, P.updateSelectedItems();
}
function de() {
return p.currentSelectedDataId.value;
}
function fe(R) {
A.activeRowById(R);
}
function ve(R) {
const E = r.idField.value, z = o.value.find((Y) => Y.raw[E] === R), W = o.value.findIndex((Y) => Y.raw[E] === R);
z && W > -1 && P.onClickItem(z, W);
}
function me(R) {
const E = r.idField.value, z = o.value.find((W) => W.raw[E] === R);
z && A.changeRow(z);
}
function ge(R) {
m.updatePagination(R);
}
function he(R) {
return o.value.filter((E) => R.includes(E.raw[e.idField]));
}
i.expose({
search: N,
updateDataSource: ie,
clearSelection: ue,
getSelections: ce,
updateSelectionByIds: q,
getSelectionIds: re,
activeRowById: fe,
getCurrentRowId: de,
clickRowItemById: ve,
updatePagination: ge,
getVisibleDataByIds: he,
selectRowById: me
}), ne(() => e.selectionValues, (R, E) => {
R !== E && q(R);
});
const pe = Le(e, p), {
sidebarWidth: we,
showSidebarCheckBox: Ze
} = pe, Ce = Ee(e, i), {
applyColumnSorter: et,
columnContext: ye,
updateColumnRenderContext: tt
} = Ce;
return Ge(e, v, o, ye, S, g, V, we, c, b, M), () => n("div", {
class: H.value
}, [l(), n("div", {
ref: k,
class: "f-list-view-content",
onMouseover: () => {
u.value || (u.value = !0);
},
onMouseleave: () => {
u.value && (u.value = !1);
}
}, [j()]), G.value && n("div", {
class: "f-list-view-footer"
}, [e.footerTemplate ? e.footerTemplate() : i.slots.footer && i.slots.footer()])]);
}
}), le = /* @__PURE__ */ ae({
name: "FListViewTable",
props: se,
emits: ["outputValue", "currentEvent", "selectionChanged"],
setup(e, i) {
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"
}], k = _(() => e.data.length > 0 ? e.data : b);
return () => {
var h;
return n(U, null, [(h = k.value) == null ? void 0 : h.map((c) => n("div", {
class: "f-template-listview-row"
}, [n("div", {
class: "list-view-item-title"
}, [n("div", {
class: "item-title-img"
}, [n("img", {
src: c.avatar,
alt: "",
style: "width: 44px;"
}, null)]), n("div", {
class: "item-title"
}, [n("p", {
class: "item-title-heading"
}, [c.code]), n("p", {
class: "item-title-text"
}, [c.desc])])]), n("div", {
class: "list-view-item-content"
}, [n("div", {
class: "content-message"
}, [n("div", {
class: "ower"
}, [n("p", null, [Q("创建人")]), n("p", {
class: "con"
}, [c.name])]), n("div", {
class: "date"
}, [n("p", null, [Q("创建时间")]), n("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,
se as listViewProps
};