@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,960 lines • 61.3 kB
JavaScript
import { getCustomClass as En, excludeProperties as Mn, EVENT_PROPERTY_TAB_IDS as An, withInstall as Hn } from "../../components/common/index.esm.js";
import { createVNode as R, defineComponent as et, ref as I, computed as T, onMounted as tt, nextTick as Fe, onUnmounted as Qe, watch as Be, Fragment as Nn, createTextVNode as Ln, inject as Ze } from "vue";
import { useResizeObserver as nt } from "@vueuse/core";
import { debounce as Wn, isUndefined as W } from "lodash-es";
import { LocaleService as re } from "../../components/locale/index.esm.js";
import { getHierarchyRow as zn, useIdentify as ot, useGroupData as Un, useFilter as it, useHierarchy as lt, useLoading as $n, useDataView as at, useSelection as rt, useSelectHierarchyItem as Yn, usePagination as qn, useDataViewContainerStyle as st, useCommandColumn as dt, useSettingColumn as Kn, useColumn as Xn, useSort as ct, useGroupColumn as ut, useRow as pt, useEdit as ft, useVisualDataBound as mt, useVisualDataCell as yt, useVisualDataRow as gt, useVisualData as Jn, useCellPosition as Qn, useSidebar as ht, useVirtualScroll as vt, useFitColumn as Zn, useFilterHistory as eo, useColumnFilter as to, useDragColumn as no, getColumnHeader as oo, getSidebar as io, getDisableMask as lo, getHorizontalScrollbar as Ct, getVerticalScrollbar as ao, getEmpty as ro, getPagination as so, getSummary as co, ColumnSettingSolution as uo, refreshScrollAfterDataSourceLoad as po, COMMAND_COLUMN_DATA_TYPE as Ae, SETTING_COLUMN_DATA_TYPE as He } from "../../components/data-view/index.esm.js";
import { resolveField as fo } from "../../components/common/index.esm.js/utils/resolve-field";
import mo from "../../components/input-group/index.esm.js";
import Re from "../../components/button/index.esm.js";
import { resolveAppearance as yo, createPropsResolver as bt, createTreeGridSelectionItemResolver as go, createTreeGridBindingResolver as ho, createDataViewUpdateColumnsResolver as vo } from "../../components/dynamic-resolver/index.esm.js";
import { treeGridProps as wt } from "../../components/tree-grid/index.esm.js";
import { getColumnHeader as Co } from "../data-grid/index.esm.js";
import { DgControl as Ne, useDesignerComponent as bo } from "../../components/designer-canvas/index.esm.js";
import { BaseControlProperty as wo } from "../../components/property-panel/index.esm.js";
import { useCommandOption as So, useColumnOption as Io, useRowOption as Ro, useSummary as Fo, useAppearance as Bo, useSelection as To, useRowNumber as Oo, useDataGridEvent as Do, useDesignerColumn as Po, useDesignerVisualData as xo, useDesignerFitColumn as _o } from "../data-view/index.esm.js";
const Si = {
/** 启用分页 */
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 }
}, Ii = {
/** 启用排序 */
enable: { type: Boolean, default: !1 },
/** 排序字段集合 */
fields: { type: Array, default: [] },
/** 排序交互模式 */
mode: { type: String, default: "client" },
/** 多列排序 */
multiSort: { type: Boolean, default: !1 }
}, Ri = {
/** 自定义分组合计内容 */
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" }
}, Fi = {
/** 启用筛选 */
enable: { type: Boolean, default: !1 },
/** DataGrid筛选风格 */
filterStyle: { type: String, default: "filter-column" },
/** 筛选交互模式 */
mode: { type: String, default: "server" },
/** 显示过滤条件工具条 */
showSummary: { type: Boolean, default: !0 }
}, Bi = {
/** 允许折行显示列标题 */
wrapHeadings: { type: Boolean, default: !1 }
}, Ti = {
/** 自定义行样式 */
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 }
}, Oi = {
/** 显示合计信息 */
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" }
}, Di = {
/** 自动列宽。设为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 }
}, Pi = {
/** 编辑时选中文本 */
selectOnEditing: { type: Boolean, default: !1 },
/** 编辑模式； row：整行编辑，cell: 单元格编辑 */
editMode: { type: String, default: "cell" }
}, xi = {
/** show loading */
show: { type: Boolean, default: !1 },
/** message on display when loading */
message: { type: String, default: `${re.getLocaleValue("datagrid.loadingMessage")}...` }
}, ko = {
/**
* 自定义样式
*/
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: (e) => !0
},
/**
* 编辑单元格时默认获得焦点
*/
focusOnEditingCell: { type: Boolean, default: !0 }
}, Go = "enum", Vo = "boolean";
function jo(e) {
const { formatter: n } = e;
return !n || typeof n == "function" ? null : n;
}
function Eo(e, n) {
const i = n.options || n, { data: l } = i;
if (!l || !l.length)
return "";
const c = Object.prototype.hasOwnProperty.call(i, "valueField") && i.valueField || "value", b = Object.prototype.hasOwnProperty.call(i, "textField") && i.textField || "name";
if (typeof e == "string" && e.includes(",")) {
const w = e.split(","), h = l.reduce((p, y) => (p[y[c]] = y, p), {}), s = w.map((p) => {
var y;
return (y = h[p]) == null ? void 0 : y[b];
}).filter((p) => p != null);
return s.length ? s.join(",") : "";
}
const S = l.find((w) => w[c] === e);
return (S == null ? void 0 : S[b]) ?? (e == null ? "" : String(e));
}
function Mo(e, n) {
if (e == null)
return "";
const i = n.options || n, l = e ? i == null ? void 0 : i.trueText : i == null ? void 0 : i.falseText;
return l == null ? "" : String(l);
}
function Ao(e, n) {
const i = fo(n, e.field), l = jo(e), c = l == null ? void 0 : l.type;
return c === Go ? Eo(i, l) : c === Vo || e.dataType === "boolean" ? Mo(i, l || {}) : i == null ? "" : String(i);
}
function Ho(e, n, i, l, c, b, S, w, h, s, p, y, V, m, j, M, P, v, x) {
const {
calculateCellPositionInRow: z
} = b, {
columnContext: _,
hasLeftFixedColumn: U,
hasRightFixedColumn: C
} = S, {
gridDataStyle: $,
leftFixedGridDataStyle: X,
rightFixedGridDataStyle: Z
} = m, {
renderDataRow: a
} = zn(e, n, _, P, w, h, s, p, y, V, m, j, M, v, x), se = [a];
function F(B, J) {
const ee = z(B);
return P.value.filter((K) => K.visible !== !1).map((K, D) => se[K.type](K, ee, J, D));
}
function q() {
return R("div", {
ref: l,
class: "fv-grid-content-left-fixed"
}, [R("div", {
class: "fv-grid-data",
style: X.value
}, [F(_.value.leftColumns.filter((B) => B.visible), "left")])]);
}
function de() {
return R("div", {
ref: i,
class: "fv-grid-content-primary"
}, [R("div", {
class: "fv-grid-data",
style: $.value
}, [F(_.value.primaryColumns.filter((B) => B.visible), "primary")])]);
}
function N() {
return R("div", {
ref: c,
class: "fv-grid-content-right-fixed"
}, [R("div", {
class: "fv-grid-data",
style: Z.value
}, [F(_.value.rightColumns.filter((B) => B.visible), "right")])]);
}
function ce() {
const B = [];
return U.value && B.push(q()), B.push(de()), C.value && B.push(N()), B;
}
return {
renderDataArea: ce
};
}
const No = /* @__PURE__ */ et({
name: "FTreeGrid",
props: ko,
emits: ["selectionChange", "clickRow", "expandNode", "unSelectItem", "dblclickNode", "doubleClickRow", "selectItem", "filterChanged", "unSelectAll", "selectAll", "sortChanged", "selectionUpdate", "beginEditCell", "endEditCell"],
setup(e, n) {
var Xe, Je;
const i = I(!1), l = I(!1), c = 0, b = I(((Xe = e.rowOption) == null ? void 0 : Xe.height) || 28);
let S = [], w = [];
const h = I(20), s = I(e.columns), p = ot(e), {
idField: y
} = p, V = I(), m = I(), j = I(), M = I(), P = I(), v = I([]), x = I(!1), z = I(((Je = e.rowOption) == null ? void 0 : Je.wrapContent) || !1), _ = Un(e, p), U = it(e, n), C = lt(e), {
collapseField: $
} = C, {
showLoading: X,
renderLoading: Z
} = $n(e, V), a = at(e, /* @__PURE__ */ new Map(), U, C, p), {
dataView: se
} = a, F = rt(e, a, p, v, n), {
showSelection: q,
selectedValues: de
} = F, N = Yn(e, v, a, p, F, n), ce = T(() => e.disabled), B = T(() => e.virtualized ? Math.min(a.dataView.value.length, h.value) : a.dataView.value.length), J = qn(e, a), {
shouldRenderPagination: ee
} = J, {
containerStyleObject: K
} = st(e, v), D = I(""), O = I([]), Oe = T(() => e.searchable || !1), E = I(0), te = T(() => O.value.length ? `${E.value + 1}/${O.value.length}` : ""), De = T(() => re.getRealPropertyValue(e.searchPlaceholder, "", "datagrid.search.placeholder")), he = T(() => re.getLocaleValue("datagrid.search.search")), ve = T(() => re.getLocaleValue("datagrid.search.prev")), ue = T(() => re.getLocaleValue("datagrid.search.next")), Pe = T(() => re.getLocaleValue("datagrid.search.clear")), xe = dt(e), {
applyCommands: ne
} = xe;
ne(s);
const {
applyColumnSetting: pe,
removeColumnSetting: _e
} = Kn(e);
e.showSetting && pe(s);
const Q = Xn(e, n), fe = ct(e), {
applyColumnSorter: Ce,
columnContext: oe,
updateColumnRenderContext: be
} = Q;
Ce(a, fe);
const ie = ut(e, oe), k = pt(e, n, F, p), L = ft(e, n, p, k, v), le = mt(e, a, b), Bt = yt(e, L, le), Tt = gt(e, a, L, C, p, le, Bt, b), ke = Jn(e, s, a, B, c, Tt), {
getVisualData: we
} = ke, Ot = Qn(e, oe, b, i), Ge = ht(e, F), {
sidebarWidth: Dt
} = Ge, G = vt(e, a, v, oe, ke, B, c, Dt, b, i), {
onWheel: Pt,
dataGridWidth: Le,
viewPortHeight: We,
viewPortWidth: Se,
resetScroll: Ve,
updateVisibleRowsOnLatestVisibleScope: xt
} = G, ze = Zn(e, oe, m, Se, ie), {
calculateColumnsSize: Ie
} = ze, Ue = eo(), _t = to(m, P, a, Ue, G), kt = no(e, n, Q, a, ie, _, G), Gt = T(() => {
const t = {
"fv-grid": !0,
"fv-grid-bordered": e.showBorder,
"fv-grid-horizontal-bordered": e.showHorizontalLines,
"fv-datagrid-strip": e.showStripe
};
return En(t, e.customClass);
}), Vt = T(() => ({
"fv-grid-content": !0,
"fv-grid-content-hover": x.value,
"fv-grid-wrap-content": z.value,
"fv-grid-scrollbar-visible": G.shouldShowVirticalScrollbar.value && x.value
})), {
renderDataArea: jt
} = Ho(e, n, j, M, P, Ot, Q, a, L, C, k, F, N, G, ke, le, v, b, i), {
renderGridHeader: Et,
renderGridColumnResizeOverlay: Mt,
shouldShowHeader: At
} = oo(e, n, m, M, P, Q, a, kt, _t, U, Ue, ze, ie, F, Ge, fe, G, Se, v, l), {
renderDataGridSidebar: Ht
} = io(e, k, F, Ge, G), {
renderDisableMask: Nt
} = lo(), {
renderHorizontalScrollbar: Lt
} = Ct(e, m, G), {
renderVerticalScrollbar: Wt
} = ao(e, m, G);
let ae = null;
function zt() {
var t, o, r;
if (m.value && m.value.clientHeight > 0 && ((t = m.value) == null ? void 0 : t.clientWidth) > 0) {
const f = Math.ceil(m.value.clientHeight / b.value);
f > h.value && (h.value = f, xt()), We.value = ((o = j.value) == null ? void 0 : o.clientHeight) || 0, Le.value = ((r = m.value) == null ? void 0 : r.clientWidth) || 0, j.value && (Se.value = j.value.clientWidth);
}
m.value && (m.value.clientHeight > 0 || m.value.clientWidth > 0) && Ie();
}
function Ut() {
ae !== null && cancelAnimationFrame(ae), ae = requestAnimationFrame(() => {
ae = null, zt();
});
}
tt(() => {
m.value && (h.value = Math.max(Math.ceil(m.value.clientHeight / b.value), h.value), v.value = we(0, B.value + c - 1), nt(m.value, Ut), Ie(), Fe(() => {
m.value && (Le.value = m.value.clientWidth), j.value && (Se.value = j.value.clientWidth, We.value = j.value.clientHeight);
})), X.value && Z();
}), Qe(() => {
ae !== null && cancelAnimationFrame(ae);
});
function $t(t) {
a.collapseTo(t), a.reOrderVisibleIndex(), Ve();
}
function Yt(t) {
a.expandTo(t), a.reOrderVisibleIndex(), Ve();
}
function je() {
const t = F.getSelectionRow();
return t ? t.dataIndex - 1 : -1;
}
function qt(t) {
const o = t !== void 0 ? t : je(), r = a.insertNewDataItem(o === -1 ? 0 : o);
return v.value = we(0, B.value + c - 1), r;
}
function Kt() {
const t = je();
a.insertNewChildDataItem(t), v.value = we(0, B.value + c - 1);
}
function Xt(t, o) {
const r = v.value.find((u) => u.raw[y.value] === o), f = r ? r.dataIndex - 1 : -1;
a.insertNewChildDataItems(t, f);
}
function Jt() {
const t = je(), o = N.getNextSelectableHierarchyItemId(t);
a.removeHierarchyDataItem(t), v.value = we(0, B.value + c - 1), o && N.selectItemById(o);
}
function Qt(t) {
L.onEditingRow(t);
}
function Zt(t) {
L.acceptEditingRow(t);
}
function en(t) {
L.cancelEditingRow(t);
}
function me(t) {
t && (s.value = t, ne(s), e.showSetting && pe(s), be(s.value), Ce(a, fe), Ie());
}
Be(() => e.columns, (t) => {
if (e.showSetting && e.enableColumnSettingSolution) {
me(s.value);
return;
}
me(t);
});
function tn(t, o) {
if (t) {
const r = !!(o != null && o.keepScrollTop || o != null && o.keepScrollPosition), f = r ? G.offsetY.value : 0;
a.load(t), a.reOrderVisibleIndex(), po({
keepScroll: r,
savedOffsetY: f,
resetScroll: Ve,
scrollTo: G.scrollTo
});
}
}
function Ee(t) {
k.activeRowById(t);
}
function nn(t, o = {
isCurrent: !0
}) {
o != null && o.isCurrent && Ee(t), N.selectItemById(t);
}
function on(t) {
const o = v.value.find((r) => r.raw[p.idField.value] === t);
o && k.clickRowItem(o);
}
function ln(t) {
N.selectItemByIds(t);
}
function an() {
return F.getSelectedItems();
}
function $e() {
F.clearSelection();
}
function rn() {
F.emptyCurrentRowId();
}
const sn = T(() => !v.value || !v.value.length), {
renderEmpty: dn
} = ro(e, n);
function cn() {
return F.getSelectionRow();
}
function un(t, o = {
clearCurrent: !0
}) {
o != null && o.clearCurrent && Ee(""), N.unSelectItemByIds(t);
}
function pn() {
return F.currentSelectedDataId.value;
}
function fn(t, o, r) {
const f = se.value.find((u) => u[y.value] === t);
if (f) {
if (Object.keys(f).forEach((g) => {
Object.prototype.hasOwnProperty.call(o, g) && (f[g] = o[g]);
}), r) {
const {
collapseField: g,
disabledField: A,
checkedField: Y,
visibleField: H,
hasChildren: ge
} = r;
g && !W(o[g]) && (f.__fv_collapse__ = o[g]), Y && !W(o[Y]) && (f.__fv_checked__ = o[Y]), A && !W(o[A]) && (f.__fv_disabled__ = o[A]), H && !W(o[H]) && (f.__fv_visible__ = o[H]), W(ge) || (f.__fv_hasChildren__ = ge);
}
const u = v.value.find((g) => g.raw[y.value] === t), d = v.value.findIndex((g) => g.raw[y.value] === t);
if (u) {
if (u.raw = f, Object.keys(u.data).forEach((g) => {
u.data[g].updateData(f);
}), r) {
const {
collapseField: g,
disabledField: A,
checkedField: Y,
visibleField: H,
hasChildren: ge
} = r;
g && !W(o[g]) && (u.collapse = o[g]), Y && !W(o[Y]) && (u.checked = o[Y]), A && !W(o[A]) && (u.disabled = o[A]), H && !W(o[H]) && (u.visible = o[H]), W(ge) || (u.raw.__fv_hasChildren__ = ge);
}
v.value = [...v.value.slice(0, d), u, ...v.value.slice(d + 1)], a.updateSummary();
}
}
}
function mn(t) {
return Object.prototype.hasOwnProperty.call(t, "raw") ? a.hasRealChildren(t.raw) : a.hasRealChildren(t);
}
function yn(t) {
const o = a.dataView.value.find((r) => r[y.value] === t);
return o ? o[$.value] : "";
}
function gn() {
return $.value;
}
Be(() => e.showSetting, (t, o) => {
t !== o && (t ? pe(s) : _e(s), me(s.value));
});
function hn(t) {
return v.value.filter((o) => t.includes(o.raw[e.idField]));
}
function Ye(t) {
const o = p.idField.value, r = v.value.find((f) => f.raw[o] === t);
r && k.changeRow(r);
}
function vn() {
F.keepSelectingOnPaging.value || $e(), a.updateVisibleDataSummary(v.value);
}
function Cn() {
L.endEditCell();
}
function bn(t) {
F.updateSelectedValues(t);
}
function wn(t) {
F.removeSelectedValues(t);
}
const Sn = 100;
function In(t, o) {
const r = o[t].__fv_layer__ || 0;
let f = t + 1;
for (; f < o.length && (o[f].__fv_layer__ || 0) > r; )
f++;
return f - 1;
}
function Rn(t) {
const o = a.dataView.value, r = C.collapseField.value, f = t.__fv_index__, u = t.__fv_layer__ || 0;
if (typeof f != "number" || t.__fv_visible__ === !1 || t[r])
return;
let d = f + 1;
for (; d < o.length; ) {
const g = o[d];
if ((g.__fv_layer__ || 0) <= u)
break;
if (g.__fv_visible__ = !0, g[r]) {
d = In(d, o) + 1;
continue;
}
d++;
}
}
function Fn(t) {
let o = t;
const r = [];
let f = 0;
for (; o && o[C.parentIdField.value] && f < Sn; ) {
f++;
const u = a.rawView.value.find((d) => d[p.idField.value] === o[C.parentIdField.value]);
if (u)
u[C.collapseField.value] && r.push(u), o = u;
else
break;
}
r.reverse().forEach((u) => {
u[C.collapseField.value] = !1, a.toggleChildrenVisibiltyByCollapseStatus(u), Rn(u);
});
}
function Bn(t, o) {
if (t.length !== o.length)
return !1;
const r = t.map((u) => u[p.idField.value]).sort(), f = o.map((u) => u[p.idField.value]).sort();
return r.every((u, d) => u === f[d]);
}
function Me() {
const t = O.value[E.value];
t && (Fn(t), Fe(() => {
a.reOrderVisibleIndex();
const o = t[p.idField.value], r = t.__fv_visible_index__;
r !== void 0 && r !== "" && r >= 0 ? (G.scrollToRowByIndex(r), Fe(() => {
Ye(o);
})) : console.warn("搜索结果的节点不在当前可见范围内，无法定位", o);
}));
}
function qe() {
!D.value.trim() || !O.value.length || (E.value = (E.value + 1) % O.value.length, Me());
}
function Tn() {
if (!D.value.trim()) {
O.value = [], E.value = 0;
return;
}
const t = [], o = D.value.toLowerCase().trim();
a.rawView.value.forEach((f) => {
let u = !1;
e.customSearch ? u = e.customSearch(o, f, e.columns) : e.columns.forEach((d) => {
if (!u && d.field) {
const g = Ao(d, f);
g && g.toLowerCase().includes(o) && (u = !0);
}
}), u && t.push(f);
});
const r = !Bn(t, O.value);
t.length > 0 ? r ? (O.value = t, E.value = 0, Me()) : qe() : (O.value = [], E.value = 0);
}
function On() {
if (!D.value.trim() || !O.value.length)
return;
const t = O.value.length;
E.value = (E.value - 1 + t) % t, Me();
}
const ye = Wn(Tn, 300);
function Ke() {
ye.cancel(), D.value = "", O.value = [], E.value = 0;
}
Be(D, (t) => {
t.trim() || (ye.cancel(), O.value = [], E.value = 0);
}), Qe(() => {
ye.cancel();
});
function Dn(t) {
if (t.key === "Enter") {
if (!D.value.trim())
return;
ye();
}
}
function Pn() {
D.value.trim() && ye();
}
n.expose({
activeRowById: Ee,
addNewDataItem: qt,
addNewChildDataItem: Kt,
addChildrenToNode: Xt,
collapseTo: $t,
expandTo: Yt,
removeDataItem: Jt,
editDataItem: Qt,
acceptDataItem: Zt,
cancelDataItem: en,
updateColumns: me,
updateDataSource: tn,
selectItemById: nn,
selectItemByIds: ln,
getSelectedItems: an,
clearSelection: $e,
getSelectionRow: cn,
clickRowItemById: on,
unSelectItemByIds: un,
getCurrentRowId: pn,
reassignRowData: fn,
hasChildren: mn,
getCollapseField: gn,
getCollapseStatusById: yn,
getVisibleDataByIds: hn,
selectRowById: Ye,
updateDerivedData: vn,
emptyCurrentRowId: rn,
calculateColumnsSize: Ie,
endEditCell: Cn,
updateSelectedValues: bn,
removeSelectedValues: wn
});
const xn = T(() => {
const t = {};
return G.shouldShowHorizontalScrollbar.value && x.value && (t.paddingBottom = "10px"), G.shouldShowVirticalScrollbar.value && x.value, t;
}), _n = T(() => ({
...K.value,
borderRadius: "5px"
})), {
renderDataGridPagination: ai
} = so(e, n, a, G, J, F), kn = T(() => ({
"d-flex": !0,
"justify-content-between": ee.value && q.value,
"justify-content-end": ee.value && !q.value,
"position-relative": !0
})), Gn = T(() => ({
"d-flex": !0,
"align-items-center": !0
}));
function Vn(t) {
const o = t.map((d) => d.id), r = [...s.value, ...S, ...w];
r.filter((d) => d.dataType !== Ae && d.dataType !== He).forEach((d) => {
const g = t.find((A) => A.id === d.id);
g && (d.width = g.actualWidth || d.width || 120, g.actualWidth !== void 0 && (d.actualWidth = g.actualWidth), d.title = g.title, d.halign = g.halign, d.align = g.align, d.fixed = g.fixed);
}), w = r.filter((d) => d.dataType === Ae || d.dataType === He);
const f = r.filter((d) => d.dataType !== Ae && d.dataType !== He), u = f.filter((d) => o.includes(d.id));
S = f.filter((d) => !o.includes(d.id)), u.sort((d, g) => {
const A = t.findIndex((H) => H.id === d.id), Y = t.findIndex((H) => H.id === g.id);
return A - Y;
}), me(u);
}
const {
renderDataGridSummary: jn
} = co(e, a, Q);
return () => e.visible && R(Nn, null, [Oe.value && R("div", {
class: "fv-grid-search",
style: {
padding: "8px 12px",
border: "1px solid #e0e0e0",
borderBottom: "none",
borderRadius: "4px 4px 0 0"
}
}, [R("div", {
style: {
display: "flex",
alignItems: "center"
}
}, [R(mo, {
value: D.value,
onInput: (t) => D.value = t,
"onUpdate:value": (t) => D.value = t || "",
onClear: Ke,
onKeydown: Dn,
placeholder: De.value,
style: {
flex: 1
}
}, null), te.value && R("span", {
class: "fv-grid-search-count",
style: {
marginLeft: "8px",
fontSize: "12px",
color: "#888",
whiteSpace: "nowrap"
}
}, [te.value]), R(Re, {
type: "link",
title: ve.value,
disabled: !O.value.length,
onClick: On,
style: {
cursor: "pointer",
marginLeft: "4px"
}
}, {
default: () => [R("i", {
class: "f-icon f-icon-arrow-chevron-up"
}, null)]
}), R(Re, {
type: "link",
title: ue.value,
disabled: !O.value.length,
onClick: qe,
style: {
cursor: "pointer",
marginLeft: "4px"
}
}, {
default: () => [R("i", {
class: "f-icon f-icon-arrow-chevron-down"
}, null)]
}), R(Re, {
type: "link",
title: he.value,
onClick: Pn,
style: {
cursor: "pointer",
marginLeft: "4px"
}
}, {
default: () => [R("i", {
class: "f-icon f-icon-search"
}, null)]
}), D.value && R(Re, {
type: "link",
title: Pe.value,
onClick: Ke,
style: {
cursor: "pointer",
marginLeft: "4px"
}
}, {
default: () => [R("i", {
class: "f-icon f-icon-close"
}, null)]
})])]), R("div", {
ref: V,
class: Gt.value,
style: _n.value,
onWheel: Pt
}, [m.value && At.value && Et(), R("div", {
ref: m,
class: Vt.value,
onMouseover: () => x.value = !0,
onMouseleave: () => x.value = !1,
onTouchstart: (t) => {
t.stopPropagation(), x.value = !0, G.onTouchstartScrollThumb(t, m);
},
onTouchend: (t) => {
x.value = !1;
},
style: xn.value
}, [m.value && Ht(v), m.value && jt(), m.value && sn.value && dn(), m.value && Lt(), m.value && Wt()]), m.value && jn(), q.value && R("div", {
class: kn.value
}, [q.value && R("div", {
class: Gn.value
}, [R("div", null, ["已选：" + de.value.length, Ln(" 条")])])]), Mt(), ce.value && Nt()]), e.enableColumnSettingSolution && R(uo, {
columns: [...s.value, ...S],
componentId: e.id,
modelValue: l.value,
"onUpdate:modelValue": (t) => l.value = t,
onChangeColumnSetting: Vn
}, null)]);
}
}), Lo = "https://json-schema.org/draft/2020-12/schema", Wo = "https://farris-design.gitee.io/tree-grid.schema.json", zo = "tree-grid", Uo = "A Farris Data Grid Component", $o = "object", Yo = {
id: {
description: "The unique identifier for a Input Group",
type: "string"
},
type: {
description: "The type string of Input Group component",
type: "string",
default: "tree-grid"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
fit: {
type: "boolean",
default: !1
},
showStripe: {
type: "boolean",
default: !0
},
showBorder: {
type: "boolean",
default: !1
},
showTreeNodeIcons: {
type: "boolean",
default: !1
},
showSetting: {
type: "boolean",
default: !1
},
size: {
description: "",
type: "object",
properties: {
width: {
type: "number"
},
height: {
type: "number"
}
},
default: null
},
dataSource: {
description: "",
type: "string",
default: ""
},
columns: {
description: "",
type: "array",
default: []
},
identifyField: {
description: "",
type: "string"
},
editable: {
description: "",
type: "boolean",
default: !1
},
disabled: {
description: "",
type: "boolean",
default: !1
},
visible: {
description: "是否可见",
type: "boolean",
default: !0
},
cell: {
type: "object",
properties: {
highlightFocusingCell: {
description: "",
type: "boolean",
default: !1
},
mergeCell: {
description: "",
type: "boolean",
default: !1
},
showEditableIcon: {
description: "",
type: "boolean",
default: !1
}
}
},
column: {
type: "object",
properties: {
fitColumns: {
description: "",
type: "boolean",
default: !1
},
fitMode: {
description: "",
type: "string",
default: "average"
},
groups: {
description: "",
type: "array",
default: []
},
reorderColumn: {
description: "Enable to drag column to reorder",
type: "boolean",
default: !1
},
resizeColumn: {
type: "boolean",
default: !0
},
resizeColumnOnDoubleClick: {
description: "",
type: "boolean",
default: !0
}
}
},
command: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
commands: {
type: "array",
default: []
},
commandColumnWidth: {
description: "",
type: "number",
default: 120
},
onClickDeleteCommand: {
description: "",
type: "string",
default: ""
},
onClickEditCommand: {
description: "",
type: "string",
default: ""
},
onHandleAction: {
description: "",
type: "string",
default: ""
},
count: {
description: "",
type: "number",
default: 2
}
}
},
contextMenu: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
}
}
},
customizaiton: {
type: "object",
properties: {
enableScheme: {
description: "",
type: "boolean",
default: !1
},
enableSetting: {
description: "",
type: "boolean",
default: !1
}
}
},
edit: {
type: "object",
properties: {
mode: {
description: "",
type: "string",
default: "cell",
enum: [
"cell",
"row",
"card"
]
},
selectOnEditing: {
description: "",
type: "boolean",
default: !1
},
onAppendRow: {
description: "",
type: "string",
default: ""
},
onBeforeEdit: {
description: "",
type: "string",
default: ""
}
}
},
filter: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
filterStyle: {
description: "",
type: "string",
default: "filter-column",
enum: [
"filter-column",
"filter-row"
]
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server"
]
},
showSummary: {
description: "",
type: "boolean",
default: !0
},
onFilterChange: {
description: "",
type: "string",
default: ""
}
}
},
footer: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customFooterStyle: {
description: "",
type: "object"
},
footerDataCommand: {
description: "",
type: "string",
default: ""
},
footerDataFrom: {
description: "",
type: "string",
default: "client"
},
footerHeight: {
description: "",
type: "number",
default: 29
},
footerPosition: {
description: "",
type: "string",
default: "bottom"
},
footerTemplate: {
description: "",
type: "string",
default: ""
}
}
},
group: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customGroupRow: {
description: "",
type: "object"
},
customGroupRowStyle: {
description: "",
type: "object"
},
customSummaryStyle: {
description: "",
type: "object"
},
groupColSpan: {
description: "",
type: "number",
default: 1
},
groupFields: {
description: "",
type: "array",
default: []
},
showGroupedColumn: {
description: "",
type: "boolean",
default: !0
},
showGroupPanel: {
description: "",
type: "boolean",
default: !1
},
showSummary: {
description: "",
type: "boolean",
default: !1
},
summaryPosition: {
description: "",
type: "string",
default: "separate",
enum: [
"separate",
"merge-to-group"
]
},
disableGroupOnEditing: {
description: "",
type: "boolean",
default: !0
},
expandGroupRows: {
description: "",
type: "boolean",
default: !0
}
}
},
header: {
type: "object",
properties: {
wrapHeadings: {
description: "",
type: "boolean",
default: !1
}
}
},
pagination: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
disablePagination: {
description: "",
type: "string",
default: ""
},
contentTemplate: {
description: "",
type: "string",
default: ""
},
index: {
description: "",
type: "number",
default: 1
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server",
"client"
]
},
showGoto: {
description: "",
type: "boolean",
default: !1
},
showIndex: {
description: "",
type: "boolean",
default: !0
},
showLimits: {
description: "",
type: "boolean",
default: !1
},
showPageInfo: {
description: "",
type: "boolean",
default: !0
},
size: {
description: "",
type: "number",
default: 20
},
disabled: {
description: "锁定分页",
type: "boolean",
default: !1
},
sizeLimits: {
description: "",
type: "array",
default: [
10,
20,
30,
50,
100
]
},
onPageChange: {
description: "",
type: "string",
default: ""
},
onPageSizeChange: {
description: "",
type: "string",
default: ""
}
}
},
rowOption: {
type: "object",
properties: {
customRowStyle: {
description: "自定义行样式",
type: "string",
default: ""
},
customCellStyle: {
description: "自定义单元格样式",
type: "string",
default: ""
},
disable: {
description: "",
type: "object"
},
height: {
description: "",
type: "number",
default: 30
},
showHovering: {
type: "boolean",
default: !0
},
wrapContent: {
type: "boolean",
default: !1
}
}
},
rowNumber: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
heading: {
description: "",
type: "string",
default: "序号"
},
width: {
description: "",
type: "number",
default: 36
},
onClickRow: {
description: "",
type: "string",
default: ""
},
onDoubleClickRow: {
description: "",
type: "string",
default: ""
}
}
},
onClickRow: {
description: "行点击事件",
type: "string",
default: ""
},
onSelectionChange: {
description: "行切换事件",
type: "string",
default: ""
},
onPageIndexChanged: {
description: "切换页码事件",
type: "string",
default: ""
},
onPageSizeChanged: {
description: "分页条数变化事件",
type: "string",
default: ""
},
selection: {
type: "object",
properties: {
enableSelectRow: {
description: "允许选中行",
type: "boolean",
default: !0
},
enable: {
description: "",
type: "boolean",
default: !0
},
checkOnSelect: {
description: "",
type: "boolean",
default: !1
},
showSelectAll: {
description: "",
type: "boolean",
default: !1
},
clearSelectionOnEmpty: {
description: "",
type: "boolean",
default: !0
},
customSelectionItem: {
description: "",
type: "object"
},
focusSelection: {
description: "",
type: "string",
default: "current",
enum: [
"current",
"all"
]
},
keepSelectingOnClick: {
description: "",
type: "boolean",
default: !0
},
keepSelectingOnPaging: {
description: "",
type: "boolean",
default: !0
},
multiSelect: {
description: "",
type: "boolean",
default: !1
},
selectionMode: {
description: "",
type: "string",
default: "default"
},
selectOnCheck: {
description: "",
type: "boolean",
default: !1
},
selectOnEditing: {
description: "",
type: "boolean",
default: !1
},
showCheckbox: {
description: "",
type: "boolean",
default: !1
},
showCheckAll: {
description: "",
type: "boolean",
default: !1
},
showSelection: {
description: "",
type: "boolean",
default: !1
},
onBeforeSelect: {
description: "",
type: "string",
default: ""
},
onBeforeUnCheck: {
description: "",
type: "",
default: ""
},
onBeforeUnSelect: {
description: "",
type: "string",
default: ""
},
onCheckAll: {
description: "",
type: "string",
default: ""
},
onChecked: {
description: "",
type: "string",
default: ""
},
onSelectionChange: {
description: "",
type: "string",
default: ""
},
onUnCheckAll: {
description: "",
type: "string",
default: ""
},
onUnChecked: {
description: "",
type: "string",
default: ""
},
onCheckedChange: {
description: "",
type: "string"
}
}
},
sort: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
fields: {
description: "",
type: "array",
default: []
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server"
]
},
multiSort: {
description: "",
type: "boolean",
default: !1
}
}
},
summary: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customSummaryStyle: {
description: "",
type: "object"
},
groupFields: {
description: "",
type: "array",
default: []
},
mode: {
description: "",
type: "string",
default: "client",
enum: [
"client",
"server"
]
},
position: {
description: "",
type: "boolean",
default: "bottom",
enum: [
"bottom",
"top",
"both"
]
}
}
},
toolbar: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
}
}
},
visualization: {
autoHeight: {
description: "",
type: "boolean",
default: !1
},
emptyDataHeight: {
description: "",
type: "number",
default: 36
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
maxHeight: {
description: "",
type: "number",
default: 300
},
scrollBarShowMode: {
description: "",
type: "string",
default: "auto"
},
showBorder: {
description: "",
type: "boolean",
default: !1
},
showScrollArrow: {
description: "",
type: "boolean",
default: !1
},
striped: {
description: "",
type: "boolean",
default: !0
},
useBlankWhenDataIsEmpty: {
description: "",
type: "boolean",
default: !1
}
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
udtField: {
description: "分级码字段",
type: "string"
},
virtualized: {
description: "是否虚拟加载",
type: "boolean",
default: !1
},
hierarchy: {
cascadeOption: {
autoCheckChildren: {
description: "向下级联",
type: "boolean"
},
autoCheckParent: {
description: "向上级联",
type: "boolean"
}
},
collapseField: {
description: "收折属性",
type: "string"
},
hasChildrenField: {
description: "存在子节点",
type: "string"
},
parentIdField: {
description: "父级字段",
type: "string"
}
},
autoCheckChildren: {
description: "向下级联",
type: "boolean"
},
autoCheckParent: {
description: "向上级联",
type: "boolean"
},
fieldEditable: {
description: "是否可编辑",
type: "boolean",
default: !1
},
searchable: {
description: "是否可搜索定位",
type: "boolean",
default: !1
},
searchPlaceholder: {
description: "搜索框占位文本，不传时使用国际化默认值",
type: "string",
default: ""
},
enableColumnSettingSolution: {
description: "是否启用列配置方案",
type: "boolean",
default: !1
}
}, qo = [
"id",
"type",
"columns"
], Ko = {
onSelectionChange: "行切换事件",
onClickRow: "行点击事件",
onDoubleClickRow: "行双击事件",
onFilterChanged: "过滤事件",
onClickEditCommand: "操作列编辑事件",
onClickDeleteCommand: "操作列删除事件",
onExpandNode: "展开事件",
onSelectItem: "选中行事件",
onUnSelectItem: "取消选中行事件",
onSelectAll: "全选事件",
onUnSelectAll: "取消全选事件"
}, St = {
$schema: Lo,
$id: Wo,
title: zo,
description: Uo,
type: $o,
properties: Yo,
required: qo,
events: Ko
}, It = /* @__PURE__ */ new Map([
["appearance", yo],
["column", "columnOption"],
["command", "commandOption"]
]);
function Xo(e, n, i) {
var y;
const l = i.parentComponentInstance, c = l.schema.type, b = String(((y = l.schema.appearance) == null ? void 0 : y.class) || "").split(" "), S = c === "section" || c === "tab-page", w = b.includes("f-page-content-nav"), h = b.includes("f-page-main"), s = e.getSchemaByType("component");
s.id = `${n.id}-component`, s.componentType = "data-grid";
let p = "";
return p += S ? "f-struct-data-grid-in-card f-struct-is-subgrid" : "", p += w ? "f-struct-data-grid-in-nav f-struct-wrapper f-utils-fill-flex-column" : "", p += h ? "f-struct-data-grid f-struct-wrapper" : "", s.appearance = {
class: p
}, s.contents = [n], s;
}
function Jo(e, n, i) {
const l = i.parentComponentInstance, c = String(l.schema.appearance.class || "").split(" "), b = c.includes("f-page-content-nav"), S = c.includes("f-page-main"), w = e.getSchemaByType("section");
w.id = `${n.id}-section`;
let h = "";
return h += b ? "f-section-in-nav " : "", h += S ? "f-section-in-managelist " : "", h += "f-section-grid", w.appearance = { class: h }, w.contents = [n], w;
}
function Qo(e, n, i) {
const l = e.getSchemaByType("content-container");
return l.id = `${n.id}-layout`, l.appearance = { class: "f-grid-is-sub f-utils-flex-column" }, l.contents = [n], l;
}
function Rt(e, n, i) {
const c = i.parentComponentInstance.schema.type, b = c === "section" || c === "tab-page";
n.appearance = { class: "f-component-grid" };
const w = (b ? Qo : Jo)(e, n, i);
return Xo(e, w, i);
}
const Zo = bt(wt, St, It, Rt), ei = go(), ti = ho(), Ft = Mn(Object.assign({}, wt, { componentId: { type: String, default: "" } }), "columnOption", "commandOption"), ni =