@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
827 lines (826 loc) • 26.2 kB
JavaScript
import { ref as r, computed as x, createVNode as n, 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, o) {
function k(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 k(i).map((d) => ({ textNode: d, text: (d.textContent || "").toLocaleLowerCase() })).map(({ textNode: d, text: m }) => {
const F = [];
let f = 0;
for (; f < m.length; ) {
const p = m.indexOf(u, f);
if (p === -1)
break;
F.push(p), f = p + u.length;
}
return F.map((p) => {
const I = new Range();
return I.setStart(d, p), I.setEnd(d, p + u.length), I;
});
}).flat();
}
function h(c) {
if (!CSS.highlights || (CSS.highlights.clear(), !c || !o))
return;
const u = S(o.value, c.toLocaleLowerCase()), i = new Highlight(...u);
CSS.highlights.set("search-result", i);
}
return { search: h };
}
function ee(e, o, k, S, h, c, u, i, V, M) {
const D = r(e.size), d = r(e.textField), m = r(e.titleField), F = r(e.disableField), f = x(() => {
var a, C;
return ((a = e.selection) == null ? void 0 : a.multiSelect) && ((C = e.selection) == null ? void 0 : C.showCheckbox);
}), {
onMouseenterItem: p,
onMouseoverItem: I,
onMouseoutItem: v
} = c, {
getKey: g,
listViewItemClass: H,
listViewItemStyle: O,
onCheckItem: P,
onClickItem: A
} = u, _ = x(() => {
const a = {
"text-overflow": "ellipsis",
overflow: "hidden",
"white-space": "nowrap"
};
return e.itemClass ? a : {
margin: D.value === "small" ? "0.25rem 0" : "8px 0",
...a
};
});
function y(a, C, R) {
return a.checked = i.findIndexInSelectedItems(a) > -1, n("li", {
class: H(a, C),
id: g(a, C),
key: g(a, C),
style: O(a, C),
onClick: (B) => A(a, C, B),
onMouseenter: (B) => p(B, a, C),
onMouseover: (B) => I(B, a, C),
onMouseout: (B) => v(B, a, C)
}, [f.value && n("div", {
class: "f-list-select",
onClick: (B) => B.stopPropagation()
}, [n(q, {
id: "list-" + g(a, C),
customClass: "listview-checkbox float-left",
disabled: a[F.value],
checked: a.checked,
"onUpdate:checked": (B) => a.checked = B,
onChange: (B) => {
P(a, C, !B.checked);
}
}, null)]), n("div", {
class: "f-list-content"
}, [n("div", {
class: e.itemContentClass,
style: _.value,
title: a.raw[m.value] || a.raw[d.value]
}, [a.raw[d.value]])])]);
}
return {
renderItem: y
};
}
function ze(e, o, k, S, h, c, u, i, V, M) {
const D = r(e.multiSelect), d = r(e.disableField), m = r(e.textField), {
onMouseenterItem: F,
onMouseoverItem: f,
onMouseoutItem: p
} = c, {
getKey: I,
listViewItemClass: v,
listViewItemStyle: g,
onCheckItem: H,
onClickItem: O,
updateSelectedItems: P
} = u;
function A(y, a, C) {
return e.contentTemplate ? n(Y, null, [e.contentTemplate({
item: y.raw,
index: a,
selectedItem: C
})]) : o.slots.content ? n(Y, null, [o.slots.content && o.slots.content({
item: y.raw,
index: a,
selectedItem: C
})]) : n("div", {
style: "margin: 10px 0;"
}, [y.raw[m.value || "name"]]);
}
function _(y, a, C) {
return n("li", {
class: v(y, a),
id: I(y, a),
key: I(y, a),
style: g(y, a),
onClick: (R) => O(y, a, R),
onMouseenter: (R) => F(R, y, a),
onMouseover: (R) => f(R, y, a),
onMouseout: (R) => p(R, y, a)
}, [D.value && n("div", {
class: "f-list-select",
onClick: (R) => R.stopPropagation()
}, [n(q, {
id: "list-" + I(y, a),
customClass: "listview-checkbox",
disabled: y[d.value],
checked: y.checked,
"onUpdate:checked": (R) => y.checked = R,
onChange: (R) => {
H(y, a, !R.checked), P();
}
}, null)]), n("div", {
class: "f-list-content"
}, [A(y, a, C)])]);
}
return {
renderItem: _
};
}
function We(e, o, k, S, h, c, u, i, V, M) {
const D = r(e.multiSelect), d = r(e.disableField), m = r(e.textField), {
onMouseenterItem: F,
onMouseoverItem: f,
onMouseoutItem: p
} = c, {
getKey: I,
listViewItemClass: v,
onCheckItem: g,
onClickItem: H
} = u, {
dragstart: O,
dragenter: P,
dragover: A,
dragend: _
} = S, {
removeItem: y
} = V, a = x(() => ({
margin: D.value ? "10px 0" : "10px 0px 10px 14px"
}));
function C(t, l = "") {
const b = t.target;
b.title = b.scrollWidth > b.clientWidth ? l : "";
}
function R(t) {
return n("div", {
style: a.value,
onMouseenter: (l) => C(l, t.raw[m.value || "name"])
}, [t.raw[m.value || "name"]]);
}
function B() {
return o.slots.itemContent ? o.slots.itemContent : R;
}
const G = B();
function w(t, l, b) {
return n("li", {
class: v(t, l),
id: I(t, l),
key: I(t, l),
onClick: (s) => H(t, l, s),
onMouseenter: (s) => F(s, t, l),
onMouseover: (s) => f(s, t, l),
onMouseout: (s) => p(s, t, l),
draggable: "true",
onDragstart: (s) => O(s, t, l),
onDragenter: (s) => P(s, l),
onDragend: (s) => _(s, t),
onDragover: (s) => A(s)
}, [D.value && n("div", {
class: "f-list-select",
onClick: (s) => s.stopPropagation()
}, [n(q, {
id: "list-" + I(t, l),
customClass: "listview-checkbox",
disabled: t[d.value],
checked: t.checked,
"onUpdate:checked": (s) => t.checked = s,
onChange: (s) => g(t, l, !s.checked)
}, null)]), n("div", {
class: "f-list-content"
}, [G(t)]), e.allowDelete && n("div", {
class: "f-list-remove",
onClick: (s) => {
s.stopPropagation(), y(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: w
};
}
function Ye(e, o, k, S, h, c, u, i, V, M) {
var I;
const D = r(((I = e.group) == null ? void 0 : I.groupFields) || []), {
collpaseGroupIconClass: d
} = h, {
toggleGroupRow: m
} = M;
function F(v, g) {
v.stopPropagation(), g.collapse = !g.collapse, k.value = m(g.collapse ? "collapse" : "expand", g, k.value);
}
function f(v, g, H) {
return o.slots.group ? n(Y, null, [o.slots.content && o.slots.group({
item: v.raw,
index: g,
selectedItem: H
})]) : n("div", {
class: "f-navlookup-recentHeader",
onClick: (O) => F(O, v)
}, [n("div", {
class: "fv-grid-group-row-icon"
}, [n("span", {
class: d(v)
}, null)]), n("div", {
class: "f-navlookup-recommandLabel"
}, [v.raw[D.value[v.layer]]])]);
}
function p(v, g, H) {
return v.layer > -1 && f(v, g, H);
}
return {
renderItem: p
};
}
function Ue(e, o, k, S) {
const { dataView: h } = k, { updateSelectedItems: c } = S;
function u(i) {
if (i > -1 && i < h.value.length) {
if (e != null && e.checkBeforeRemoveItem && !e.checkBeforeRemoveItem(h.value[i]))
return;
const V = h.value.splice(i, 1);
c(), o.emit("removeItem", V[0]);
}
}
return { removeItem: u };
}
function Ke(e, o, k, S, h, c, u, i, V, M) {
const D = r(e.view), d = r(e.view === "CardView"), m = r({}), F = Ue(e, o, S, V), f = x(() => ({
"f-list-view-group": !0,
"f-list-view-group-multiselect": e.multiSelect,
"d-flex": d.value,
"flex-wrap": d.value
})), p = x(() => !!k.value && k.value.length > 0), I = x(() => k.value.length === 0);
x(() => I.value && !o.slots.empty);
function v() {
return D.value === "SingleView" ? ee : D.value === "DraggableView" ? We : (D.value === "ContentView" || D.value === "CardView") && (e.contentTemplate || o.slots.content) ? ze : ee;
}
const g = v(), {
renderItem: H
} = g(e, o, k, M, h, c, V, u, F, i), {
renderItem: O
} = Ye(e, o, k, M, h, c, V, u, F, i), P = [H, O];
function A() {
return k.value.filter((a) => a.visible !== !1).map((a, C) => P[a.type](a, C, m));
}
function _() {
return n("div", {
class: "f-list-view-emptydata",
style: "margin: 0 auto;"
}, [n("p", {
class: "f-empty-title"
}, [e.emptyTemplate ? e.emptyTemplate() : o.slots.empty ? o.slots.empty() : Ge.getLocaleValue("listView.emptyMessage")])]);
}
function y() {
return n("ul", {
class: f.value,
style: "list-style: none;"
}, [p.value && A(), I.value && _()]);
}
return {
renderListArea: y
};
}
function Xe(e, o, k) {
function S() {
return o.slots.header && n("div", {
class: "f-list-view-header"
}, [o.slots.header()]);
}
return {
renderHeader: S
};
}
function te(e, o, k) {
const S = r(e.headerClass), h = r(e.placeholder), c = r(""), u = x(() => !c.value), i = x(() => !!c.value);
function V(m) {
c.value = "";
}
ne(c, (m) => {
e.enableHighlightSearch && k.search(m), o.emit("afterSearch", m);
});
const M = x(() => {
const m = {
"form-group": !0,
"farris-form-group": !0
};
return S.value && S.value.split(" ").reduce((f, p) => (f[p] = !0, f), m), m;
});
function D(m) {
}
function d() {
return n("div", {
class: "f-list-view-header",
onClick: ye(() => D, ["prevent", "stop"])
}, [n("div", {
class: M.value
}, [n("div", {
class: "farris-input-wrap"
}, [n("div", {
class: "f-cmp-inputgroup"
}, [n("div", {
class: "input-group f-state-editable"
}, [Se(n("input", {
class: "form-control f-utils-fill text-left",
"onUpdate:modelValue": (m) => c.value = m,
name: "input-group-value",
type: "text",
placeholder: h.value,
autocomplete: "off"
}, null), [[Ie, c.value]]), n("div", {
class: "input-group-append"
}, [i.value && n("span", {
class: "input-group-text input-group-clear",
onClick: (m) => V()
}, [n("i", {
class: "f-icon f-icon-close-circle"
}, null)]), u.value && n("span", {
class: "input-group-text"
}, [n("span", {
class: "f-icon f-icon-search"
}, null)])])])])])])]);
}
return {
renderHeader: d
};
}
function qe() {
const e = r(""), o = r(-1), k = r(""), S = r(-1), h = r(!1);
function c(d, m, F) {
S.value = F;
}
function u(d, m, F) {
h.value || (S.value = F);
}
function i(d, m, F) {
S.value = -1;
}
function V() {
h.value = !0;
}
function M() {
h.value = !1;
}
function D() {
o.value = -1, e.value = "";
}
return {
activeIndex: o,
focusedItemId: k,
hoverIndex: S,
clearActiveItem: D,
onMouseenterItem: c,
onMouseoverItem: u,
onMouseoutItem: i,
resumeHover: M,
suspendHover: V
};
}
function Je(e, o, k, S, h) {
const c = r(e.idField), { dataView: u } = k, i = r(-1), V = r(!1), { activeIndex: M, focusedItemId: D, hoverIndex: d, resumeHover: m, suspendHover: F } = S;
let f, p = 0, I = 0, v = null, g = null;
const H = 10, O = 50;
function P(t) {
if (!t)
return null;
const { overflowY: l } = getComputedStyle(t);
return l === "auto" || l === "scroll" ? t : P(t.parentElement);
}
function A(t, l) {
g && clearInterval(g), g = window.setInterval(() => {
l === "up" ? t.scrollTop -= H : t.scrollTop += H;
}, 16);
}
function _() {
g && (clearInterval(g), g = null);
}
function y(t) {
const l = t.target;
if (v || (v = P(l)), !v) {
_();
return;
}
const b = v.getBoundingClientRect(), s = t.clientY, j = s - b.top, L = b.bottom - s;
j < O && v.scrollTop > 0 ? A(v, "up") : L < O && v.scrollTop < v.scrollHeight - v.clientHeight ? A(v, "down") : _();
}
function a(t, l) {
const b = t - p, s = l - I;
f.style.left = parseInt(f.style.left) + b + "px", f.style.top = parseInt(f.style.top) + s + "px", p = t, I = l;
}
function C(t) {
const { left: l, top: b } = t.getBoundingClientRect(), s = t.cloneNode(!0);
return s.className = s.className + " f-listview-drag-moving", s.style.cssText = `
position:absolute;
left:${l}px;
top:${document.documentElement.scrollTop ? b + document.documentElement.scrollTop : b}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(t).width};
height:${getComputedStyle(t).height};
`, s.children[0].style.cssText = "padding: 0 0 0 14px", s.children[0].children[0].style.cssText = `
margin: 10px 0px 10px 14px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
`, s.children[1].style.cssText = "flex:1 1 auto; width:100%", s.children[2].style.cssText = "padding: 0 14px 0 0", s.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(s), s;
}
function R(t, l, b) {
if (t.stopPropagation(), F(), l) {
if (f = C(t.target), t.dataTransfer) {
const s = new Image();
s.src = "", t.dataTransfer.setDragImage(s, 0, 0);
}
p = t.pageX, I = t.pageY, setTimeout(() => {
i.value = b, V.value = !0, l.moving = !0;
});
}
}
function B(t, l) {
if (t.preventDefault(), i.value !== l && i.value !== -1) {
const b = u.value[i.value], s = h.value[i.value];
b && s && (u.value.splice(i.value, 1), u.value.splice(l, 0, b), h.value.splice(i.value, 1), h.value.splice(l, 0, s), h.value.forEach((j, L) => {
j.index = L, j.raw.__fv_index__ = L;
}), i.value = l, a(t.pageX, t.pageY));
}
}
function G(t) {
t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), a(t.pageX, t.pageY), y(t);
}
function w(t, l) {
var s, j;
_(), v = null, l && (l.moving = !1, f && (document.body.removeChild(f), f = null)), u.value.forEach((L, N) => {
L.__fv_index__ = N;
}), h.value.forEach((L, N) => {
L.index = N, L.raw && (L.raw.__fv_index__ = N);
}), V.value = !1, m();
const b = ((s = l.raw) == null ? void 0 : s.__fv_index__) ?? 0;
d.value = b, M.value = b, D.value = (j = l.raw) == null ? void 0 : j[c.value], o.emit("change", u.value), o.emit("activeChange", [l.raw]);
}
return {
dragstart: R,
dragenter: B,
dragover: G,
dragend: w,
isDragging: V
};
}
function Qe(e, o, k, S, h, c) {
const u = r(e.idField), i = r(e.disableField), V = r(e.draggable);
r(e.itemClass);
const M = r(e.selection.multiSelect ?? !1), D = r(e.selection.multiSelectMode), { isDragging: d } = S, { activeIndex: m, focusedItemId: F, hoverIndex: f } = h, { clearSelection: p, getSelectedItems: I, toggleSelectItem: v, currentSelectedDataId: g, multiSelectOnlyOnCheck: H } = c, O = r(I()), P = (w) => O.value.length === 0 ? !1 : O.value.some((t) => {
let l = "";
return t.data ? l = t.data[u.value] : l = t[u.value], l === w;
});
function A() {
O.value = I();
}
function _(w, t) {
return w.raw[u.value] != null ? w.raw[u.value] + "_" + t : "";
}
function y(w, t) {
const l = {
"f-list-view-group-item": !0,
"f-list-view-draggable-item": V.value,
"f-un-click": !w.checked,
"f-un-select": !!w.raw[i.value],
"f-listview-active": (
// 多选
M.value && P(_(w, t)) && e.showActiveWhenMultiSelect || // 单选
!M.value && w.raw[u.value] === g.value || M.value && !e.showActiveWhenMultiSelect && w.raw[u.value] === g.value
),
"f-listview-hover": !d.value && t === f.value,
moving: !!w.moving
};
if (typeof e.itemClass == "string")
return X(l, e.itemClass);
if (typeof e.itemClass == "function") {
const b = e.itemClass(w);
return X(l, b);
}
return l;
}
function a(w, t) {
const l = {};
if (typeof e.itemStyle == "string")
return $(l, e.itemStyle);
if (typeof e.itemStyle == "function") {
const b = e.itemStyle(w);
return $(l, b);
}
return l;
}
const C = x(() => !M.value);
function R(w, t, l) {
w.checked = l, !w.raw[i.value] && (C.value && (F.value = w.raw[u.value]), v(w));
}
const B = x(() => !M.value || M.value && D.value === "OnCheckAndClick");
function G(w, t, l) {
if (w.raw[i.value]) {
l == null || l.preventDefault(), l == null || l.stopPropagation();
return;
}
g.value = w.raw[u.value], F.value = w.raw[u.value], m.value = t, B.value && (v(w), A()), o.emit("clickItem", { data: O.value, index: t, dataItem: w.raw }), o.emit("activeChange", O.value);
}
return {
getKey: _,
selectedItems: O,
listViewItemClass: y,
listViewItemStyle: a,
updateSelectedItems: A,
onCheckItem: R,
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, o) {
var Q;
const k = r(!1), S = r(), h = r(!0), c = r(((Q = e.rowOption) == null ? void 0 : Q.rowHeight) || 28), u = r(!1), i = r([]), V = 0, M = r(e.columns), D = be(e, o), d = ke(e), m = Ve(e), F = Fe(e, d), f = Te(e, /* @__PURE__ */ new Map(), D, m, d), p = De(e, f, d, i, o), I = Ne(e, S), v = Me(e, f), g = x(() => f.dataView.value.length), H = Re(e, o, p, d), O = Oe(e, o, d, H, i), P = Be(e, f, c), A = He(e, {}, P), _ = _e(e, f, O, m, d, P, A, c), y = Ae(e, d, A, _), a = xe(e, d, A, _), C = Pe(e, M, f, g, V, _, y, a), {
getVisualData: R
} = C;
i.value = R(0, g.value + V - 1);
const B = x(() => {
const T = {
"f-list-view": !0,
"f-list-view-multiple": e.multiSelect
};
return e.size !== "default" && (T[`${e.size}-item`] = !0), X(T, e.customClass);
}), G = x(() => !!o.slots.footer || h.value);
function w() {
return e.header === "SearchBar" ? te : e.header === "ContentHeader" ? Xe : te;
}
const t = w(), {
renderHeader: l
} = t(e, o, I), b = qe(), s = Je(e, o, f, b, i), j = Qe(e, o, i, s, b, p), {
renderListArea: L
} = Ke(e, o, i, f, F, b, p, C, j, s);
function N(T) {
I.search(T);
}
function se(T) {
T && (f.load(T), i.value = R(0, g.value + V - 1));
}
function ie() {
p.clearSelection(), b.clearActiveItem();
}
function ue() {
return j.selectedItems.value;
}
function ce() {
return j.selectedItems.value.map((T) => T[d.idField.value]);
}
function J(T) {
p.selectedValues.value = T, j.updateSelectedItems();
}
function re() {
return p.currentSelectedDataId.value;
}
function de(T) {
H.activeRowById(T);
}
function fe(T) {
const E = d.idField.value, z = i.value.find((U) => U.raw[E] === T), W = i.value.findIndex((U) => U.raw[E] === T);
z && W > -1 && j.onClickItem(z, W);
}
function ve(T) {
const E = d.idField.value, z = i.value.find((W) => W.raw[E] === T);
z && H.changeRow(z);
}
function me(T) {
v.updatePagination(T);
}
function ge(T) {
return i.value.filter((E) => T.includes(E.raw[e.idField]));
}
o.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, (T, E) => {
T !== E && J(T);
});
const he = je(e, p), {
sidebarWidth: pe,
showSidebarCheckBox: Ze
} = he, Ce = Le(e, o), {
applyColumnSorter: $e,
columnContext: we,
updateColumnRenderContext: et
} = Ce;
return Ee(e, f, i, we, C, g, V, pe, c, k, O), () => n("div", {
class: B.value
}, [l(), n("div", {
ref: S,
class: "f-list-view-content",
onMouseover: () => {
u.value || (u.value = !0);
},
onMouseleave: () => {
u.value && (u.value = !1);
}
}, [L()]), G.value && n("div", {
class: "f-list-view-footer"
}, [e.footerTemplate ? e.footerTemplate() : o.slots.footer && o.slots.footer()])]);
}
}), le = /* @__PURE__ */ ae({
name: "FListViewTable",
props: oe,
emits: ["outputValue", "currentEvent", "selectionChanged"],
setup(e, o) {
const k = [{
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 : k);
return () => {
var h;
return n(Y, null, [(h = S.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, [Z("创建人")]), n("p", {
class: "con"
}, [c.name])]), n("div", {
class: "date"
}, [n("p", null, [Z("创建时间")]), 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,
oe as listViewProps
};