UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,037 lines (1,036 loc) 32 kB
import { getCustomClass as ul, withInstall as rl } from "../common/index.esm.js"; import { createVNode as f, defineComponent as sl, ref as S, computed as w, onMounted as cl, nextTick as xe, onUnmounted as Ne, watch as _e, Fragment as dl, createTextVNode as fl } from "vue"; import { useResizeObserver as vl } from "@vueuse/core"; import { debounce as ml, isUndefined as V } from "lodash-es"; import { LocaleService as Y } from "../locale/index.esm.js"; import { getHierarchyRow as yl, useIdentify as hl, useGroupData as gl, useFilter as pl, useHierarchy as Cl, useLoading as Sl, useDataView as wl, useSelection as bl, useSelectHierarchyItem as Il, usePagination as xl, useDataViewContainerStyle as _l, useCommandColumn as Fl, useSettingColumn as Bl, useColumn as Dl, useSort as Ol, useGroupColumn as Rl, useRow as Tl, useEdit as Vl, useVisualDataBound as Pl, useVisualDataCell as Ll, useVisualDataRow as kl, useVisualData as El, useCellPosition as Gl, useSidebar as Al, useVirtualScroll as Hl, useFitColumn as jl, useFilterHistory as Nl, useColumnFilter as Ml, useDragColumn as zl, getColumnHeader as Wl, getSidebar as Ul, getDisableMask as Yl, getHorizontalScrollbar as ql, getVerticalScrollbar as Kl, getEmpty as $l, getPagination as Xl, getSummary as Jl, ColumnSettingSolution as Ql, refreshScrollAfterDataSourceLoad as Zl, COMMAND_COLUMN_DATA_TYPE as Fe, SETTING_COLUMN_DATA_TYPE as Be } from "../data-view/index.esm.js"; import { resolveField as ea } from "../common/index.esm.js/utils/resolve-field"; import ta from "../input-group/index.esm.js"; import ue from "../button/index.esm.js"; const wa = { /** 启用分页 */ enable: { type: Boolean, default: !1 }, /** 当前页码 */ index: { type: Number, default: 1 }, /** 分页交互模式 */ mode: { type: String, default: "server" }, /** 显示页码输入框 */ showGoto: { type: Boolean, default: !1 }, /** 显示页码 */ showIndex: { type: Boolean, default: !0 }, /** 显示每页记录数 */ showLimits: { type: Boolean, default: !1 }, /** 显示分页汇总信息 */ showPageInfo: { type: Boolean, default: !0 }, /** 默认每页记录数 */ size: { type: Number, default: 20 }, /** 可选择的没有记录数据 */ sizeLimits: { type: Array, default: [10, 20, 30, 50, 100] }, /** 总记录数 */ total: { type: Number, default: 0 }, /** 禁用分页 */ disabled: { type: Boolean, default: !1 } }, ba = { /** 启用排序 */ enable: { type: Boolean, default: !1 }, /** 排序字段集合 */ fields: { type: Array, default: [] }, /** 排序交互模式 */ mode: { type: String, default: "client" }, /** 多列排序 */ multiSort: { type: Boolean, default: !1 } }, Ia = { /** 自定义分组合计内容 */ customGroupRow: { type: Function, default: () => { } }, /** 自定义分组行样式 */ customGroupRowStyle: { type: Function, default: () => { } }, /** 自行分组合计行样式 */ customSummaryStyle: { type: Function, default: () => { } }, /** 启用行数据分组 */ enable: { type: Boolean, default: !1 }, /** 分组行合并列数 */ groupColSpan: { type: Number, default: 1 }, /** 行数据分组字段;多字段分组以英文逗号分隔 */ groupFields: { type: Array, default: [] }, /** 在DataGrid中显示被分组的列 */ showGroupedColumn: { type: Boolean, default: !0 }, /** 显示分组面板 */ showGroupPanel: { type: Boolean, default: !1 }, /** 启用合计行 */ showSummary: { type: Boolean, default: !1 }, /** 显示合计行位置; */ summaryPosition: { type: String, default: "separate" } }, xa = { /** 启用筛选 */ enable: { type: Boolean, default: !1 }, /** DataGrid筛选风格 */ filterStyle: { type: String, default: "filter-column" }, /** 筛选交互模式 */ mode: { type: String, default: "server" }, /** 显示过滤条件工具条 */ showSummary: { type: Boolean, default: !0 } }, _a = { /** 允许折行显示列标题 */ wrapHeadings: { type: Boolean, default: !1 } }, Fa = { /** 自定义行样式 */ customRowStyle: { type: Function, default: () => { } }, customCellStyle: { type: Function, default: () => { } }, /** 禁止行选中表达式 */ disable: { type: Function, default: () => { } }, /** 默认行高度为 29px */ height: { type: Number, default: 28 }, /** 鼠标滑过行效果 */ showHovering: { type: Boolean, default: !0 }, /** 禁止数据折行 */ wrapContent: { type: Boolean, default: !1 } }, Ba = { /** 显示合计信息 */ enable: { type: Boolean, default: !1 }, /** 合计行自定义样式,对启用合计行模板无效 */ customSummaryStyle: { type: Function, default: () => { } }, /** 分组合计字段 */ groupFields: { type: Array, default: [] }, /** 合计交互模式 */ mode: { type: String, default: "client" }, /** 合计行显示位置, top: 顶部 bottom: 底部, both: 顶部与底部同时显示 */ position: { type: String, default: "bottom" } }, Da = { /** 自动列宽。设为true后,所有列将填满表格并不会出现横向滚动条。 */ fitColumns: { type: Boolean, default: !1 }, /** 自动适配列宽度模式 */ fitMode: { type: String, default: "average" }, groups: { type: Array, default: [] }, /** 允许拖动表头改变列显示顺序 */ reorderColumn: { type: Boolean, default: !1 }, /** 允许拖动改变列宽度 */ resizeColumn: { type: Boolean, default: !0 }, /** 双击表头列自适应内容宽度 */ resizeColumnOnDoubleClick: { type: Boolean, default: !0 } }, Oa = { /** 编辑时选中文本 */ selectOnEditing: { type: Boolean, default: !1 }, /** 编辑模式; row:整行编辑,cell: 单元格编辑 */ editMode: { type: String, default: "cell" } }, Ra = { /** show loading */ show: { type: Boolean, default: !1 }, /** message on display when loading */ message: { type: String, default: `${Y.getLocaleValue("datagrid.loadingMessage")}...` } }, la = { /** * 自定义样式 */ customClass: { type: String, default: "" }, /** * 排序配置 */ sort: { type: Object }, /** * 筛选配置 */ filter: { type: Object }, /** * 自动勾选子节点 */ autoCheckChildren: { type: Boolean, default: !1 }, /** * 列集合 */ columns: { type: Array, default: [] }, /** * 列配置 */ columnOption: { type: Object }, /** * 命令列配置选项 */ commandOption: { type: Object, default: { enable: !1, commands: [] } }, /** * 被绑定数据 */ data: { type: Array, default: [] }, /** * 禁用组件 */ disabled: { type: Boolean, default: !1 }, /** * 用于控制节点禁用状态的字段 */ disabledField: { type: String, default: "disabled" }, /** * 用于显示信息的字段 */ displayField: { type: String, default: "name" }, /** * 允许编辑 */ editable: { type: Boolean, default: !1 }, /** * 编辑配置 */ editOption: { type: Object, default: { selectOnEditing: !1, editMode: "cell" } }, /** * 适配父组件尺寸 */ fit: { type: Boolean, default: !1 }, /** * 列标题配置 */ header: { type: Object }, /** * 高度 */ height: { type: Number, default: -1 }, /** * 层级关系配置对象 */ hierarchy: { type: Object, default: { cascadeOption: { autoCancelParent: !0, autoCheckChildren: !1, autoCheckParent: !1, selectionRange: "All" }, parentIdField: "parent" } }, /** * DataGrid组件唯一标识 */ id: { type: String, default: "" }, /** * 被绑定数据的标识字段 */ idField: { type: String, default: "id", required: !0 }, /** * async loading data */ loadData: { type: Function }, // 是否展示 loading loading: { type: Boolean, default: !1 }, /** * 最小高度 */ minHeight: { type: Number, default: 300 }, /** * 最小宽度 */ minWidth: { type: Number, default: 400 }, /** * 新建数据 */ newDataItem: { type: Function, default: () => { } }, /** * 分页配置 */ pagination: { type: Object, default: { enable: !1, mode: "server", size: -1 } }, /** * 行号配置 */ rowNumber: { type: Object, default: { enable: !0, width: 36, heading: "序号" } }, /** * 行配置 */ rowOption: { type: Object, default: { wrapContent: !1 } }, /** * 选择配置 */ selection: { type: Object, default: { enableSelectRow: !0, multiSelect: !1, multiSelectMode: "DependOnCheck", showCheckbox: !1, showSelectAll: !1, showSelection: !1 } }, /** * 已选数据标识 */ selectionValues: { type: Array, default: [] }, /** * 显示边框 */ showBorder: { type: Boolean, default: !1 }, /** * 显示列头 */ showHeader: { type: Boolean, default: !0 }, /** * 显示横向行分割线 */ showHorizontalLines: { type: Boolean, default: !0 }, /** * 显示节点连接线 */ showLines: { type: Boolean, default: !1 }, /** * 显示配置按钮 */ showOptions: { type: Boolean, default: !1 }, /** * 显示滚动条 */ showScrollBar: { type: String, default: "auto" }, /** * 显示设置按钮 */ showSetting: { type: Boolean, default: !1 }, /** * 显示条纹 */ showStripe: { type: Boolean, default: !0 }, /** * 显示树节点图标 */ showTreeNodeIcons: { type: Boolean, default: !1 }, /** * 显示纵向列分割线 */ showVerticallLines: { type: Boolean, default: !1 }, /** * 树节点图标数据 */ treeNodeIconsData: { type: [Object, String], default: {} }, /** * 列宽度 * @default -1 */ width: { type: Number, default: -1 }, /** * 启用虚拟渲染 */ virtualized: { type: Boolean, default: !1 }, /** * 空数据模板 */ emptyTemplate: { type: Object }, /** * 合计配置 */ summary: { type: Object, default: { // 默认合计行开启后,后面不展示值,所以默认不开启 enable: !1, groupFields: ["numericField1", "numericField2"] } }, /** * 自动高度 * */ autoHeight: { type: Boolean, default: !1 }, /** * 是否显示 * @default true */ visible: { type: Boolean, default: !0 }, /** * 复选框位置 */ checkboxPosition: { type: String, default: "after-expand" }, enableColumnSettingSolution: { type: Boolean, default: !1 }, /** * 搜索配置 */ searchable: { type: Boolean, default: !1 }, /** * 搜索框占位文本,不传时使用国际化默认值 */ searchPlaceholder: { type: String, default: "" }, customSearch: { type: Function }, /** * 编辑单元格前事件 */ beforeEditCell: { type: Function, default: (l) => !0 }, /** * 编辑单元格时默认获得焦点 */ focusOnEditingCell: { type: Boolean, default: !0 } }, aa = "enum", na = "boolean"; function ia(l) { const { formatter: c } = l; return !c || typeof c == "function" ? null : c; } function oa(l, c) { const v = c.options || c, { data: h } = v; if (!h || !h.length) return ""; const I = Object.prototype.hasOwnProperty.call(v, "valueField") && v.valueField || "value", F = Object.prototype.hasOwnProperty.call(v, "textField") && v.textField || "name"; if (typeof l == "string" && l.includes(",")) { const G = l.split(","), L = h.reduce((m, _) => (m[_[I]] = _, m), {}), p = G.map((m) => { var _; return (_ = L[m]) == null ? void 0 : _[F]; }).filter((m) => m != null); return p.length ? p.join(",") : ""; } const P = h.find((G) => G[I] === l); return (P == null ? void 0 : P[F]) ?? (l == null ? "" : String(l)); } function ua(l, c) { if (l == null) return ""; const v = c.options || c, h = l ? v == null ? void 0 : v.trueText : v == null ? void 0 : v.falseText; return h == null ? "" : String(h); } function ra(l, c) { const v = ea(c, l.field), h = ia(l), I = h == null ? void 0 : h.type; return I === aa ? oa(v, h) : I === na || l.dataType === "boolean" ? ua(v, h || {}) : v == null ? "" : String(v); } function sa(l, c, v, h, I, F, P, G, L, p, m, _, J, s, k, Q, j, d, T) { const { calculateCellPositionInRow: re } = F, { columnContext: N, hasLeftFixedColumn: Z, hasRightFixedColumn: D } = P, { gridDataStyle: ee, leftFixedGridDataStyle: se, rightFixedGridDataStyle: ce } = s, { renderDataRow: i } = yl(l, c, N, j, G, L, p, m, _, J, s, k, Q, d, T), de = [i]; function y(g, te) { const le = re(g); return j.value.filter((z) => z.visible !== !1).map((z, x) => de[z.type](z, le, te, x)); } function M() { return f("div", { ref: h, class: "fv-grid-content-left-fixed" }, [f("div", { class: "fv-grid-data", style: se.value }, [y(N.value.leftColumns.filter((g) => g.visible), "left")])]); } function fe() { return f("div", { ref: v, class: "fv-grid-content-primary" }, [f("div", { class: "fv-grid-data", style: ee.value }, [y(N.value.primaryColumns.filter((g) => g.visible), "primary")])]); } function A() { return f("div", { ref: I, class: "fv-grid-content-right-fixed" }, [f("div", { class: "fv-grid-data", style: ce.value }, [y(N.value.rightColumns.filter((g) => g.visible), "right")])]); } function ve() { const g = []; return Z.value && g.push(M()), g.push(fe()), D.value && g.push(A()), g; } return { renderDataArea: ve }; } const ca = /* @__PURE__ */ sl({ name: "FTreeGrid", props: la, emits: ["selectionChange", "clickRow", "expandNode", "unSelectItem", "dblclickNode", "doubleClickRow", "selectItem", "filterChanged", "unSelectAll", "selectAll", "sortChanged", "selectionUpdate", "beginEditCell", "endEditCell"], setup(l, c) { var He, je; const v = S(!1), h = S(!1), I = 0, F = S(((He = l.rowOption) == null ? void 0 : He.height) || 28); let P = [], G = []; const L = S(20), p = S(l.columns), m = hl(l), { idField: _ } = m, J = S(), s = S(), k = S(), Q = S(), j = S(), d = S([]), T = S(!1), re = S(((je = l.rowOption) == null ? void 0 : je.wrapContent) || !1), N = gl(l, m), Z = pl(l, c), D = Cl(l), { collapseField: ee } = D, { showLoading: se, renderLoading: ce } = Sl(l, J), i = wl(l, /* @__PURE__ */ new Map(), Z, D, m), { dataView: de } = i, y = bl(l, i, m, d, c), { showSelection: M, selectedValues: fe } = y, A = Il(l, d, i, m, y, c), ve = w(() => l.disabled), g = w(() => l.virtualized ? Math.min(i.dataView.value.length, L.value) : i.dataView.value.length), te = xl(l, i), { shouldRenderPagination: le } = te, { containerStyleObject: z } = _l(l, d), x = S(""), b = S([]), Me = w(() => l.searchable || !1), O = S(0), De = w(() => b.value.length ? `${O.value + 1}/${b.value.length}` : ""), ze = w(() => Y.getRealPropertyValue(l.searchPlaceholder, "", "datagrid.search.placeholder")), We = w(() => Y.getLocaleValue("datagrid.search.search")), Ue = w(() => Y.getLocaleValue("datagrid.search.prev")), Ye = w(() => Y.getLocaleValue("datagrid.search.next")), qe = w(() => Y.getLocaleValue("datagrid.search.clear")), Ke = Fl(l), { applyCommands: Oe } = Ke; Oe(p); const { applyColumnSetting: me, removeColumnSetting: $e } = Bl(l); l.showSetting && me(p); const q = Dl(l, c), ye = Ol(l), { applyColumnSorter: Re, columnContext: ae, updateColumnRenderContext: Xe } = q; Re(i, ye); const he = Rl(l, ae), W = Tl(l, c, y, m), H = Vl(l, c, m, W, d), ge = Pl(l, i, F), Je = Ll(l, H, ge), Qe = kl(l, i, H, D, m, ge, Je, F), pe = El(l, p, i, g, I, Qe), { getVisualData: ne } = pe, Ze = Gl(l, ae, F, v), Ce = Al(l, y), { sidebarWidth: et } = Ce, C = Hl(l, i, d, ae, pe, g, I, et, F, v), { onWheel: tt, dataGridWidth: Te, viewPortHeight: Ve, viewPortWidth: ie, resetScroll: Se, updateVisibleRowsOnLatestVisibleScope: lt } = C, Pe = jl(l, ae, s, ie, he), { calculateColumnsSize: oe } = Pe, Le = Nl(), at = Ml(s, j, i, Le, C), nt = zl(l, c, q, i, he, N, C), it = w(() => { const e = { "fv-grid": !0, "fv-grid-bordered": l.showBorder, "fv-grid-horizontal-bordered": l.showHorizontalLines, "fv-datagrid-strip": l.showStripe }; return ul(e, l.customClass); }), ot = w(() => ({ "fv-grid-content": !0, "fv-grid-content-hover": T.value, "fv-grid-wrap-content": re.value, "fv-grid-scrollbar-visible": C.shouldShowVirticalScrollbar.value && T.value })), { renderDataArea: ut } = sa(l, c, k, Q, j, Ze, q, i, H, D, W, y, A, C, pe, ge, d, F, v), { renderGridHeader: rt, renderGridColumnResizeOverlay: st, shouldShowHeader: ct } = Wl(l, c, s, Q, j, q, i, nt, at, Z, Le, Pe, he, y, Ce, ye, C, ie, d, h), { renderDataGridSidebar: dt } = Ul(l, W, y, Ce, C), { renderDisableMask: ft } = Yl(), { renderHorizontalScrollbar: vt } = ql(l, s, C), { renderVerticalScrollbar: mt } = Kl(l, s, C); let U = null; function yt() { var e, t, a; if (s.value && s.value.clientHeight > 0 && ((e = s.value) == null ? void 0 : e.clientWidth) > 0) { const u = Math.ceil(s.value.clientHeight / F.value); u > L.value && (L.value = u, lt()), Ve.value = ((t = k.value) == null ? void 0 : t.clientHeight) || 0, Te.value = ((a = s.value) == null ? void 0 : a.clientWidth) || 0, k.value && (ie.value = k.value.clientWidth); } s.value && (s.value.clientHeight > 0 || s.value.clientWidth > 0) && oe(); } function ht() { U !== null && cancelAnimationFrame(U), U = requestAnimationFrame(() => { U = null, yt(); }); } cl(() => { s.value && (L.value = Math.max(Math.ceil(s.value.clientHeight / F.value), L.value), d.value = ne(0, g.value + I - 1), vl(s.value, ht), oe(), xe(() => { s.value && (Te.value = s.value.clientWidth), k.value && (ie.value = k.value.clientWidth, Ve.value = k.value.clientHeight); })), se.value && ce(); }), Ne(() => { U !== null && cancelAnimationFrame(U); }); function gt(e) { i.collapseTo(e), i.reOrderVisibleIndex(), Se(); } function pt(e) { i.expandTo(e), i.reOrderVisibleIndex(), Se(); } function we() { const e = y.getSelectionRow(); return e ? e.dataIndex - 1 : -1; } function Ct(e) { const t = e !== void 0 ? e : we(), a = i.insertNewDataItem(t === -1 ? 0 : t); return d.value = ne(0, g.value + I - 1), a; } function St() { const e = we(); i.insertNewChildDataItem(e), d.value = ne(0, g.value + I - 1); } function wt(e, t) { const a = d.value.find((o) => o.raw[_.value] === t), u = a ? a.dataIndex - 1 : -1; i.insertNewChildDataItems(e, u); } function bt() { const e = we(), t = A.getNextSelectableHierarchyItemId(e); i.removeHierarchyDataItem(e), d.value = ne(0, g.value + I - 1), t && A.selectItemById(t); } function It(e) { H.onEditingRow(e); } function xt(e) { H.acceptEditingRow(e); } function _t(e) { H.cancelEditingRow(e); } function K(e) { e && (p.value = e, Oe(p), l.showSetting && me(p), Xe(p.value), Re(i, ye), oe()); } _e(() => l.columns, (e) => { if (l.showSetting && l.enableColumnSettingSolution) { K(p.value); return; } K(e); }); function Ft(e, t) { if (e) { const a = !!(t != null && t.keepScrollTop || t != null && t.keepScrollPosition), u = a ? C.offsetY.value : 0; i.load(e), i.reOrderVisibleIndex(), Zl({ keepScroll: a, savedOffsetY: u, resetScroll: Se, scrollTo: C.scrollTo }); } } function be(e) { W.activeRowById(e); } function Bt(e, t = { isCurrent: !0 }) { t != null && t.isCurrent && be(e), A.selectItemById(e); } function Dt(e) { const t = d.value.find((a) => a.raw[m.idField.value] === e); t && W.clickRowItem(t); } function Ot(e) { A.selectItemByIds(e); } function Rt() { return y.getSelectedItems(); } function ke() { y.clearSelection(); } function Tt() { y.emptyCurrentRowId(); } const Vt = w(() => !d.value || !d.value.length), { renderEmpty: Pt } = $l(l, c); function Lt() { return y.getSelectionRow(); } function kt(e, t = { clearCurrent: !0 }) { t != null && t.clearCurrent && be(""), A.unSelectItemByIds(e); } function Et() { return y.currentSelectedDataId.value; } function Gt(e, t, a) { const u = de.value.find((o) => o[_.value] === e); if (u) { if (Object.keys(u).forEach((r) => { Object.prototype.hasOwnProperty.call(t, r) && (u[r] = t[r]); }), a) { const { collapseField: r, disabledField: B, checkedField: E, visibleField: R, hasChildren: X } = a; r && !V(t[r]) && (u.__fv_collapse__ = t[r]), E && !V(t[E]) && (u.__fv_checked__ = t[E]), B && !V(t[B]) && (u.__fv_disabled__ = t[B]), R && !V(t[R]) && (u.__fv_visible__ = t[R]), V(X) || (u.__fv_hasChildren__ = X); } const o = d.value.find((r) => r.raw[_.value] === e), n = d.value.findIndex((r) => r.raw[_.value] === e); if (o) { if (o.raw = u, Object.keys(o.data).forEach((r) => { o.data[r].updateData(u); }), a) { const { collapseField: r, disabledField: B, checkedField: E, visibleField: R, hasChildren: X } = a; r && !V(t[r]) && (o.collapse = t[r]), E && !V(t[E]) && (o.checked = t[E]), B && !V(t[B]) && (o.disabled = t[B]), R && !V(t[R]) && (o.visible = t[R]), V(X) || (o.raw.__fv_hasChildren__ = X); } d.value = [...d.value.slice(0, n), o, ...d.value.slice(n + 1)], i.updateSummary(); } } } function At(e) { return Object.prototype.hasOwnProperty.call(e, "raw") ? i.hasRealChildren(e.raw) : i.hasRealChildren(e); } function Ht(e) { const t = i.dataView.value.find((a) => a[_.value] === e); return t ? t[ee.value] : ""; } function jt() { return ee.value; } _e(() => l.showSetting, (e, t) => { e !== t && (e ? me(p) : $e(p), K(p.value)); }); function Nt(e) { return d.value.filter((t) => e.includes(t.raw[l.idField])); } function Ee(e) { const t = m.idField.value, a = d.value.find((u) => u.raw[t] === e); a && W.changeRow(a); } function Mt() { y.keepSelectingOnPaging.value || ke(), i.updateVisibleDataSummary(d.value); } function zt() { H.endEditCell(); } function Wt(e) { y.updateSelectedValues(e); } function Ut(e) { y.removeSelectedValues(e); } const Yt = 100; function qt(e, t) { const a = t[e].__fv_layer__ || 0; let u = e + 1; for (; u < t.length && (t[u].__fv_layer__ || 0) > a; ) u++; return u - 1; } function Kt(e) { const t = i.dataView.value, a = D.collapseField.value, u = e.__fv_index__, o = e.__fv_layer__ || 0; if (typeof u != "number" || e.__fv_visible__ === !1 || e[a]) return; let n = u + 1; for (; n < t.length; ) { const r = t[n]; if ((r.__fv_layer__ || 0) <= o) break; if (r.__fv_visible__ = !0, r[a]) { n = qt(n, t) + 1; continue; } n++; } } function $t(e) { let t = e; const a = []; let u = 0; for (; t && t[D.parentIdField.value] && u < Yt; ) { u++; const o = i.rawView.value.find((n) => n[m.idField.value] === t[D.parentIdField.value]); if (o) o[D.collapseField.value] && a.push(o), t = o; else break; } a.reverse().forEach((o) => { o[D.collapseField.value] = !1, i.toggleChildrenVisibiltyByCollapseStatus(o), Kt(o); }); } function Xt(e, t) { if (e.length !== t.length) return !1; const a = e.map((o) => o[m.idField.value]).sort(), u = t.map((o) => o[m.idField.value]).sort(); return a.every((o, n) => o === u[n]); } function Ie() { const e = b.value[O.value]; e && ($t(e), xe(() => { i.reOrderVisibleIndex(); const t = e[m.idField.value], a = e.__fv_visible_index__; a !== void 0 && a !== "" && a >= 0 ? (C.scrollToRowByIndex(a), xe(() => { Ee(t); })) : console.warn("搜索结果的节点不在当前可见范围内,无法定位", t); })); } function Ge() { !x.value.trim() || !b.value.length || (O.value = (O.value + 1) % b.value.length, Ie()); } function Jt() { if (!x.value.trim()) { b.value = [], O.value = 0; return; } const e = [], t = x.value.toLowerCase().trim(); i.rawView.value.forEach((u) => { let o = !1; l.customSearch ? o = l.customSearch(t, u, l.columns) : l.columns.forEach((n) => { if (!o && n.field) { const r = ra(n, u); r && r.toLowerCase().includes(t) && (o = !0); } }), o && e.push(u); }); const a = !Xt(e, b.value); e.length > 0 ? a ? (b.value = e, O.value = 0, Ie()) : Ge() : (b.value = [], O.value = 0); } function Qt() { if (!x.value.trim() || !b.value.length) return; const e = b.value.length; O.value = (O.value - 1 + e) % e, Ie(); } const $ = ml(Jt, 300); function Ae() { $.cancel(), x.value = "", b.value = [], O.value = 0; } _e(x, (e) => { e.trim() || ($.cancel(), b.value = [], O.value = 0); }), Ne(() => { $.cancel(); }); function Zt(e) { if (e.key === "Enter") { if (!x.value.trim()) return; $(); } } function el() { x.value.trim() && $(); } c.expose({ activeRowById: be, addNewDataItem: Ct, addNewChildDataItem: St, addChildrenToNode: wt, collapseTo: gt, expandTo: pt, removeDataItem: bt, editDataItem: It, acceptDataItem: xt, cancelDataItem: _t, updateColumns: K, updateDataSource: Ft, selectItemById: Bt, selectItemByIds: Ot, getSelectedItems: Rt, clearSelection: ke, getSelectionRow: Lt, clickRowItemById: Dt, unSelectItemByIds: kt, getCurrentRowId: Et, reassignRowData: Gt, hasChildren: At, getCollapseField: jt, getCollapseStatusById: Ht, getVisibleDataByIds: Nt, selectRowById: Ee, updateDerivedData: Mt, emptyCurrentRowId: Tt, calculateColumnsSize: oe, endEditCell: zt, updateSelectedValues: Wt, removeSelectedValues: Ut }); const tl = w(() => { const e = {}; return C.shouldShowHorizontalScrollbar.value && T.value && (e.paddingBottom = "10px"), C.shouldShowVirticalScrollbar.value && T.value, e; }), ll = w(() => ({ ...z.value, borderRadius: "5px" })), { renderDataGridPagination: da } = Xl(l, c, i, C, te, y), al = w(() => ({ "d-flex": !0, "justify-content-between": le.value && M.value, "justify-content-end": le.value && !M.value, "position-relative": !0 })), nl = w(() => ({ "d-flex": !0, "align-items-center": !0 })); function il(e) { const t = e.map((n) => n.id), a = [...p.value, ...P, ...G]; a.filter((n) => n.dataType !== Fe && n.dataType !== Be).forEach((n) => { const r = e.find((B) => B.id === n.id); r && (n.width = r.actualWidth || n.width || 120, r.actualWidth !== void 0 && (n.actualWidth = r.actualWidth), n.title = r.title, n.halign = r.halign, n.align = r.align, n.fixed = r.fixed); }), G = a.filter((n) => n.dataType === Fe || n.dataType === Be); const u = a.filter((n) => n.dataType !== Fe && n.dataType !== Be), o = u.filter((n) => t.includes(n.id)); P = u.filter((n) => !t.includes(n.id)), o.sort((n, r) => { const B = e.findIndex((R) => R.id === n.id), E = e.findIndex((R) => R.id === r.id); return B - E; }), K(o); } const { renderDataGridSummary: ol } = Jl(l, i, q); return () => l.visible && f(dl, null, [Me.value && f("div", { class: "fv-grid-search", style: { padding: "8px 12px", border: "1px solid #e0e0e0", borderBottom: "none", borderRadius: "4px 4px 0 0" } }, [f("div", { style: { display: "flex", alignItems: "center" } }, [f(ta, { value: x.value, onInput: (e) => x.value = e, "onUpdate:value": (e) => x.value = e || "", onClear: Ae, onKeydown: Zt, placeholder: ze.value, style: { flex: 1 } }, null), De.value && f("span", { class: "fv-grid-search-count", style: { marginLeft: "8px", fontSize: "12px", color: "#888", whiteSpace: "nowrap" } }, [De.value]), f(ue, { type: "link", title: Ue.value, disabled: !b.value.length, onClick: Qt, style: { cursor: "pointer", marginLeft: "4px" } }, { default: () => [f("i", { class: "f-icon f-icon-arrow-chevron-up" }, null)] }), f(ue, { type: "link", title: Ye.value, disabled: !b.value.length, onClick: Ge, style: { cursor: "pointer", marginLeft: "4px" } }, { default: () => [f("i", { class: "f-icon f-icon-arrow-chevron-down" }, null)] }), f(ue, { type: "link", title: We.value, onClick: el, style: { cursor: "pointer", marginLeft: "4px" } }, { default: () => [f("i", { class: "f-icon f-icon-search" }, null)] }), x.value && f(ue, { type: "link", title: qe.value, onClick: Ae, style: { cursor: "pointer", marginLeft: "4px" } }, { default: () => [f("i", { class: "f-icon f-icon-close" }, null)] })])]), f("div", { ref: J, class: it.value, style: ll.value, onWheel: tt }, [s.value && ct.value && rt(), f("div", { ref: s, class: ot.value, onMouseover: () => T.value = !0, onMouseleave: () => T.value = !1, onTouchstart: (e) => { e.stopPropagation(), T.value = !0, C.onTouchstartScrollThumb(e, s); }, onTouchend: (e) => { T.value = !1; }, style: tl.value }, [s.value && dt(d), s.value && ut(), s.value && Vt.value && Pt(), s.value && vt(), s.value && mt()]), s.value && ol(), M.value && f("div", { class: al.value }, [M.value && f("div", { class: nl.value }, [f("div", null, ["已选:" + fe.value.length, fl(" 条")])])]), st(), ve.value && ft()]), l.enableColumnSettingSolution && f(Ql, { columns: [...p.value, ...P], componentId: l.id, modelValue: h.value, "onUpdate:modelValue": (e) => h.value = e, onChangeColumnSetting: il }, null)]); } }), Ta = rl(ca); export { ca as FTreeGrid, Da as columnOptions, Ta as default, Oa as editOptions, xa as filterOptions, Ia as groupOptions, _a as headerOptions, Ra as loadingOptions, wa as paginationOptions, Fa as rowOptions, ba as sortOptions, Ba as summaryOptions, la as treeGridProps };