naive-ui
Version:
A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
706 lines (705 loc) • 40.3 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const seemly_1 = require("seemly");
const vooks_1 = require("vooks");
const vue_1 = require("vue");
const vueuc_1 = require("vueuc");
const _internal_1 = require("../../../_internal");
const common_1 = require("../../../_mixins/common");
const _utils_1 = require("../../../_utils");
const cssr_1 = require("../../../_utils/cssr");
const context_1 = require("../../../config-provider/src/context");
const empty_1 = require("../../../empty");
const interface_1 = require("../interface");
const utils_1 = require("../utils");
const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
const BodyRadio_1 = __importDefault(require("./BodyRadio"));
const Cell_1 = __importDefault(require("./Cell"));
const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
const Header_1 = __importDefault(require("./Header"));
function flatten(rowInfos, expandedRowKeys) {
const fRows = [];
function traverse(rs, rootIndex) {
rs.forEach((r) => {
if (r.children && expandedRowKeys.has(r.key)) {
fRows.push({
tmNode: r,
striped: false,
key: r.key,
index: rootIndex
});
traverse(r.children, rootIndex);
}
else {
fRows.push({
key: r.key,
tmNode: r,
striped: false,
index: rootIndex
});
}
});
}
rowInfos.forEach((rowInfo) => {
fRows.push(rowInfo);
const { children } = rowInfo.tmNode;
if (children && expandedRowKeys.has(rowInfo.key)) {
traverse(children, rowInfo.index);
}
});
return fRows;
}
const VirtualListItemWrapper = (0, vue_1.defineComponent)({
props: {
clsPrefix: {
type: String,
required: true
},
id: {
type: String,
required: true
},
cols: {
type: Array,
required: true
},
onMouseenter: Function,
onMouseleave: Function
},
render() {
const { clsPrefix, id, cols, onMouseenter, onMouseleave } = this;
return ((0, vue_1.h)("table", { style: { tableLayout: 'fixed' }, class: `${clsPrefix}-data-table-table`, onMouseenter: onMouseenter, onMouseleave: onMouseleave },
(0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
(0, vue_1.h)("tbody", { "data-n-id": id, class: `${clsPrefix}-data-table-tbody` }, this.$slots)));
}
});
exports.default = (0, vue_1.defineComponent)({
name: 'DataTableBody',
props: {
onResize: Function,
showHeader: Boolean,
flexHeight: Boolean,
bodyStyle: Object
},
setup(props) {
const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, virtualScrollXRef, heightForRowRef, minRowHeightRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey);
const scrollbarInstRef = (0, vue_1.ref)(null);
const virtualListRef = (0, vue_1.ref)(null);
const emptyElRef = (0, vue_1.ref)(null);
const emptyRef = (0, vooks_1.useMemo)(() => paginatedDataRef.value.length === 0);
// If header is not inside & empty is displayed, no table part would be
// shown. So to collect a body width, we need to put a ref on empty element
const shouldDisplaySomeTablePartRef = (0, vooks_1.useMemo)(() => props.showHeader || !emptyRef.value);
// If no body is shown, we shouldn't show scrollbar
const bodyShowHeaderOnlyRef = (0, vooks_1.useMemo)(() => {
return props.showHeader || emptyRef.value;
});
let lastSelectedKey = '';
const mergedExpandedRowKeySetRef = (0, vue_1.computed)(() => {
return new Set(mergedExpandedRowKeysRef.value);
});
function getRowInfo(key) {
var _a;
return (_a = treeMateRef.value.getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode;
}
function handleCheckboxUpdateChecked(tmNode, checked, shiftKey) {
const rowInfo = getRowInfo(tmNode.key);
if (!rowInfo) {
(0, _utils_1.warn)('data-table', `fail to get row data with key ${tmNode.key}`);
return;
}
if (shiftKey) {
const lastIndex = paginatedDataRef.value.findIndex(item => item.key === lastSelectedKey);
if (lastIndex !== -1) {
const currentIndex = paginatedDataRef.value.findIndex(item => item.key === tmNode.key);
const start = Math.min(lastIndex, currentIndex);
const end = Math.max(lastIndex, currentIndex);
const rowKeysToCheck = [];
paginatedDataRef.value.slice(start, end + 1).forEach((r) => {
if (!r.disabled) {
rowKeysToCheck.push(r.key);
}
});
if (checked) {
doCheck(rowKeysToCheck, false, rowInfo);
}
else {
doUncheck(rowKeysToCheck, rowInfo);
}
lastSelectedKey = tmNode.key;
return;
}
}
if (checked) {
doCheck(tmNode.key, false, rowInfo);
}
else {
doUncheck(tmNode.key, rowInfo);
}
lastSelectedKey = tmNode.key;
}
function handleRadioUpdateChecked(tmNode) {
const rowInfo = getRowInfo(tmNode.key);
if (!rowInfo) {
(0, _utils_1.warn)('data-table', `fail to get row data with key ${tmNode.key}`);
return;
}
doCheck(tmNode.key, true, rowInfo);
}
function getScrollContainer() {
if (!shouldDisplaySomeTablePartRef.value) {
const { value: emptyEl } = emptyElRef;
if (emptyEl) {
return emptyEl;
}
else {
return null;
}
}
if (virtualScrollRef.value) {
return virtualListContainer();
}
const { value } = scrollbarInstRef;
if (value)
return value.containerRef;
return null;
}
// For table row with children, tmNode is non-nullable
// For table row is expandable but is not tree data, tmNode is null
function handleUpdateExpanded(key, tmNode) {
var _a;
if (loadingKeySetRef.value.has(key))
return;
const { value: mergedExpandedRowKeys } = mergedExpandedRowKeysRef;
const index = mergedExpandedRowKeys.indexOf(key);
const nextExpandedKeys = Array.from(mergedExpandedRowKeys);
if (~index) {
nextExpandedKeys.splice(index, 1);
doUpdateExpandedRowKeys(nextExpandedKeys);
}
else {
if (tmNode && !tmNode.isLeaf && !tmNode.shallowLoaded) {
loadingKeySetRef.value.add(key);
void ((_a = onLoadRef
.value) === null || _a === void 0 ? void 0 : _a.call(onLoadRef, tmNode.rawNode).then(() => {
const { value: futureMergedExpandedRowKeys } = mergedExpandedRowKeysRef;
const futureNextExpandedKeys = Array.from(futureMergedExpandedRowKeys);
const index = futureNextExpandedKeys.indexOf(key);
if (!~index) {
futureNextExpandedKeys.push(key);
}
doUpdateExpandedRowKeys(futureNextExpandedKeys);
}).finally(() => {
loadingKeySetRef.value.delete(key);
}));
}
else {
nextExpandedKeys.push(key);
doUpdateExpandedRowKeys(nextExpandedKeys);
}
}
}
function handleMouseleaveTable() {
hoverKeyRef.value = null;
}
function virtualListContainer() {
const { value } = virtualListRef;
return (value === null || value === void 0 ? void 0 : value.listElRef) || null;
}
function virtualListContent() {
const { value } = virtualListRef;
return (value === null || value === void 0 ? void 0 : value.itemsElRef) || null;
}
function handleVirtualListScroll(e) {
var _a;
handleTableBodyScroll(e);
(_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.sync();
}
function handleVirtualListResize(e) {
var _a;
const { onResize } = props;
if (onResize)
onResize(e);
(_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.sync();
}
const exposedMethods = {
getScrollContainer,
scrollTo(arg0, arg1) {
var _a, _b;
if (virtualScrollRef.value) {
(_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
}
else {
(_b = scrollbarInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(arg0, arg1);
}
}
};
// manually control shadow style to avoid rerender
const style = (0, cssr_1.c)([
({ props: cProps }) => {
const createActiveLeftFixedStyle = (leftActiveFixedColKey) => {
if (leftActiveFixedColKey === null)
return null;
return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--n-box-shadow-after)' });
};
const createActiveRightFixedStyle = (rightActiveFixedColKey) => {
if (rightActiveFixedColKey === null)
return null;
return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--n-box-shadow-before)' });
};
return (0, cssr_1.c)([
createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
createActiveRightFixedStyle(cProps.rightActiveFixedColKey),
cProps.leftActiveFixedChildrenColKeys.map(leftActiveFixedColKey => createActiveLeftFixedStyle(leftActiveFixedColKey)),
cProps.rightActiveFixedChildrenColKeys.map(rightActiveFixedColKey => createActiveRightFixedStyle(rightActiveFixedColKey))
]);
}
]);
let fixedStyleMounted = false;
(0, vue_1.watchEffect)(() => {
const { value: leftActiveFixedColKey } = leftActiveFixedColKeyRef;
const { value: leftActiveFixedChildrenColKeys } = leftActiveFixedChildrenColKeysRef;
const { value: rightActiveFixedColKey } = rightActiveFixedColKeyRef;
const { value: rightActiveFixedChildrenColKeys } = rightActiveFixedChildrenColKeysRef;
if (!fixedStyleMounted
&& leftActiveFixedColKey === null
&& rightActiveFixedColKey === null) {
return;
}
const cProps = {
leftActiveFixedColKey,
leftActiveFixedChildrenColKeys,
rightActiveFixedColKey,
rightActiveFixedChildrenColKeys,
componentId
};
style.mount({
id: `n-${componentId}`,
force: true,
props: cProps,
anchorMetaName: common_1.cssrAnchorMetaName,
parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
});
fixedStyleMounted = true;
});
(0, vue_1.onUnmounted)(() => {
style.unmount({
id: `n-${componentId}`,
parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
});
});
return Object.assign({ bodyWidth: bodyWidthRef, summaryPlacement: summaryPlacementRef, dataTableSlots,
componentId,
scrollbarInstRef,
virtualListRef,
emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: (0, vue_1.computed)(() => {
const { value: striped } = stripedRef;
let hasChildren = false;
const data = paginatedDataRef.value.map(striped
? (tmNode, index) => {
if (!tmNode.isLeaf)
hasChildren = true;
return {
tmNode,
key: tmNode.key,
striped: index % 2 === 1,
index
};
}
: (tmNode, index) => {
if (!tmNode.isLeaf)
hasChildren = true;
return {
tmNode,
key: tmNode.key,
striped: false,
index
};
});
return {
data,
hasChildren
};
}), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, virtualScrollX: virtualScrollXRef, heightForRow: heightForRowRef, minRowHeight: minRowHeightRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
handleVirtualListScroll,
handleVirtualListResize,
handleMouseleaveTable,
virtualListContainer,
virtualListContent,
handleTableBodyScroll,
handleCheckboxUpdateChecked,
handleRadioUpdateChecked,
handleUpdateExpanded,
renderCell }, exposedMethods);
},
render() {
const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft } = this;
const scrollable = scrollX !== undefined || maxHeight !== undefined || flexHeight;
// For a basic table with auto layout whose content may overflow we will
// make it scrollable, which differs from browser's native behavior.
// For native behavior, see
// https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
const isBasicAutoLayout = !scrollable && mergedTableLayout === 'auto';
const xScrollable = scrollX !== undefined || isBasicAutoLayout;
const contentStyle = {
minWidth: (0, _utils_1.formatLength)(scrollX) || '100%'
};
if (scrollX)
contentStyle.width = '100%';
const tableNode = ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, style: !this.empty ? this.bodyStyle : undefined, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }), {
default: () => {
// coordinate to pass if there are cells that cross row & col
const cordToPass = {};
// coordinate to related hover keys
const cordKey = {};
const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, stickyExpandedRows, componentId, childTriggerColIndex, expandable, rowProps, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleRadioUpdateChecked, handleUpdateExpanded, heightForRow, minRowHeight, virtualScrollX } = this;
const { length: colCount } = cols;
let mergedData;
// if there is children in data, we should expand mergedData first
const { data: paginatedData, hasChildren } = paginatedDataAndInfo;
const mergedPaginationData = hasChildren
? flatten(paginatedData, mergedExpandedRowKeySet)
: paginatedData;
if (summary) {
const summaryRows = summary(this.rawPaginatedData);
if (Array.isArray(summaryRows)) {
const summaryRowData = summaryRows.map((row, i) => ({
isSummaryRow: true,
key: `__n_summary__${i}`,
tmNode: {
rawNode: row,
disabled: true
},
index: -1
}));
mergedData
= this.summaryPlacement === 'top'
? [...summaryRowData, ...mergedPaginationData]
: [...mergedPaginationData, ...summaryRowData];
}
else {
const summaryRowData = {
isSummaryRow: true,
key: '__n_summary__',
tmNode: {
rawNode: summaryRows,
disabled: true
},
index: -1
};
mergedData
= this.summaryPlacement === 'top'
? [summaryRowData, ...mergedPaginationData]
: [...mergedPaginationData, summaryRowData];
}
}
else {
mergedData = mergedPaginationData;
}
const indentStyle = hasChildren
? { width: (0, seemly_1.pxfy)(this.indent) }
: undefined;
// Tile the data of the expanded row
const displayedData = [];
mergedData.forEach((rowInfo) => {
if (renderExpand
&& mergedExpandedRowKeySet.has(rowInfo.key)
&& (!expandable || expandable(rowInfo.tmNode.rawNode))) {
displayedData.push(rowInfo, {
isExpandedRow: true,
key: `${rowInfo.key}-expand`, // solve key repeat of the expanded row
tmNode: rowInfo.tmNode,
index: rowInfo.index
});
}
else {
displayedData.push(rowInfo);
}
});
const { length: rowCount } = displayedData;
const rowIndexToKey = {};
paginatedData.forEach(({ tmNode }, rowIndex) => {
rowIndexToKey[rowIndex] = tmNode.key;
});
const bodyWidth = stickyExpandedRows ? this.bodyWidth : null;
const bodyWidthPx = bodyWidth === null ? undefined : `${bodyWidth}px`;
const CellComponent = (this.virtualScrollX ? 'div' : 'td');
let leftFixedColsCount = 0;
let rightFixedColsCount = 0;
if (virtualScrollX) {
cols.forEach((col) => {
if (col.column.fixed === 'left') {
leftFixedColsCount++;
}
else if (col.column.fixed === 'right') {
rightFixedColsCount++;
}
});
}
const renderRow = ({
// Normal
rowInfo, displayedRowIndex, isVirtual,
// Virtual X
isVirtualX, startColIndex, endColIndex, getLeft }) => {
const { index: actualRowIndex } = rowInfo;
if ('isExpandedRow' in rowInfo) {
const { tmNode: { key, rawNode } } = rowInfo;
return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`, key: `${key}__expand` },
(0, vue_1.h)("td", { class: [
`${mergedClsPrefix}-data-table-td`,
`${mergedClsPrefix}-data-table-td--last-col`,
displayedRowIndex + 1 === rowCount
&& `${mergedClsPrefix}-data-table-td--last-row`
], colspan: colCount }, stickyExpandedRows ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand`, style: {
width: bodyWidthPx
} }, renderExpand(rawNode, actualRowIndex))) : (renderExpand(rawNode, actualRowIndex)))));
}
const isSummary = 'isSummaryRow' in rowInfo;
const striped = !isSummary && rowInfo.striped;
const { tmNode, key: rowKey } = rowInfo;
const { rawNode: rowData } = tmNode;
const expanded = mergedExpandedRowKeySet.has(rowKey);
const props = rowProps
? rowProps(rowData, actualRowIndex)
: undefined;
const mergedRowClassName = typeof rowClassName === 'string'
? rowClassName
: (0, utils_1.createRowClassName)(rowData, actualRowIndex, rowClassName);
const iteratedCols = isVirtualX
? cols.filter((col, index) => {
if (startColIndex <= index && index <= endColIndex)
return true;
if (col.column.fixed) {
return true;
}
return false;
})
: cols;
const virtualXRowHeight = isVirtualX
? (0, seemly_1.pxfy)((heightForRow === null || heightForRow === void 0 ? void 0 : heightForRow(rowData, actualRowIndex)) || minRowHeight)
: undefined;
const cells = iteratedCols.map((col) => {
var _a, _b, _c, _d, _e;
const colIndex = col.index;
if (displayedRowIndex in cordToPass) {
const cordOfRowToPass = cordToPass[displayedRowIndex];
const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
if (~indexInCordOfRowToPass) {
cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
return null;
}
}
// TODO: Simplify row calculation
const { column } = col;
const colKey = (0, utils_1.getColKey)(col);
const { rowSpan, colSpan } = column;
const mergedColSpan = isSummary
? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
: colSpan
? colSpan(rowData, actualRowIndex)
: 1;
const mergedRowSpan = isSummary
? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
: rowSpan
? rowSpan(rowData, actualRowIndex)
: 1;
const isLastCol = colIndex + mergedColSpan === colCount;
const isLastRow = displayedRowIndex + mergedRowSpan === rowCount;
const isCrossRowTd = mergedRowSpan > 1;
if (isCrossRowTd) {
cordKey[displayedRowIndex] = {
[colIndex]: []
};
}
if (mergedColSpan > 1 || isCrossRowTd) {
for (let i = displayedRowIndex; i < displayedRowIndex + mergedRowSpan; ++i) {
if (isCrossRowTd) {
cordKey[displayedRowIndex][colIndex].push(rowIndexToKey[i]);
}
for (let j = colIndex; j < colIndex + mergedColSpan; ++j) {
if (i === displayedRowIndex && j === colIndex) {
continue;
}
if (!(i in cordToPass)) {
cordToPass[i] = [j];
}
else {
cordToPass[i].push(j);
}
}
}
}
const hoverKey = isCrossRowTd ? this.hoverKey : null;
const { cellProps } = column;
const resolvedCellProps = cellProps === null || cellProps === void 0 ? void 0 : cellProps(rowData, actualRowIndex);
const indentOffsetStyle = {
'--indent-offset': ''
};
const FinalCellComponent = column.fixed ? 'td' : CellComponent;
return ((0, vue_1.h)(FinalCellComponent, Object.assign({}, resolvedCellProps, { key: colKey, style: [
{
textAlign: column.align || undefined,
width: (0, seemly_1.pxfy)(column.width)
},
isVirtualX && {
height: virtualXRowHeight
},
isVirtualX && !column.fixed
? {
position: 'absolute',
left: (0, seemly_1.pxfy)(getLeft(colIndex)),
top: 0,
bottom: 0
}
: {
left: (0, seemly_1.pxfy)((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
right: (0, seemly_1.pxfy)((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
},
indentOffsetStyle,
(resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.style) || ''
], colspan: mergedColSpan, rowspan: isVirtual ? undefined : mergedRowSpan, "data-col-key": colKey, class: [
`${mergedClsPrefix}-data-table-td`,
column.className,
resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.class,
isSummary && `${mergedClsPrefix}-data-table-td--summary`,
hoverKey !== null
&& cordKey[displayedRowIndex][colIndex].includes(hoverKey)
&& `${mergedClsPrefix}-data-table-td--hover`,
(0, utils_1.isColumnSorting)(column, mergedSortState)
&& `${mergedClsPrefix}-data-table-td--sorting`,
column.fixed
&& `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`,
column.align
&& `${mergedClsPrefix}-data-table-td--${column.align}-align`,
column.type === 'selection'
&& `${mergedClsPrefix}-data-table-td--selection`,
column.type === 'expand'
&& `${mergedClsPrefix}-data-table-td--expand`,
isLastCol && `${mergedClsPrefix}-data-table-td--last-col`,
isLastRow && `${mergedClsPrefix}-data-table-td--last-row`
] }),
hasChildren && colIndex === childTriggerColIndex
? [
(0, seemly_1.repeat)((indentOffsetStyle['--indent-offset'] = isSummary
? 0
: rowInfo.tmNode.level), (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
isSummary || rowInfo.tmNode.isLeaf ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, rowData: rowData, renderExpandIcon: this.renderExpandIcon, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
handleUpdateExpanded(rowKey, rowInfo.tmNode);
} }))
]
: null,
column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => {
handleRadioUpdateChecked(rowInfo.tmNode);
} })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => {
handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey);
} }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable || ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, rowData: rowData, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
handleUpdateExpanded(rowKey, null);
} })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
});
if (isVirtualX) {
if (leftFixedColsCount && rightFixedColsCount) {
cells.splice(leftFixedColsCount, 0, (0, vue_1.h)("td", { colspan: cols.length - leftFixedColsCount - rightFixedColsCount, style: {
pointerEvents: 'none',
visibility: 'hidden',
height: 0
} }));
}
}
const row = ((0, vue_1.h)("tr", Object.assign({}, props, { onMouseenter: (e) => {
var _a;
this.hoverKey = rowKey;
(_a = props === null || props === void 0 ? void 0 : props.onMouseenter) === null || _a === void 0 ? void 0 : _a.call(props, e);
}, key: rowKey, class: [
`${mergedClsPrefix}-data-table-tr`,
isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
striped && `${mergedClsPrefix}-data-table-tr--striped`,
expanded && `${mergedClsPrefix}-data-table-tr--expanded`,
mergedRowClassName,
props === null || props === void 0 ? void 0 : props.class
], style: [
props === null || props === void 0 ? void 0 : props.style,
isVirtualX && { height: virtualXRowHeight }
] }), cells));
return row;
};
if (!virtualScroll) {
return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
tableLayout: this.mergedTableLayout
} },
(0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
this.showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
!this.empty ? ((0, vue_1.h)("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
return renderRow({
rowInfo,
displayedRowIndex,
isVirtual: false,
isVirtualX: false,
startColIndex: -1,
endColIndex: -1,
getLeft(_index) {
return -1;
}
});
}))) : null));
}
else {
return ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: this.minRowHeight, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
clsPrefix: mergedClsPrefix,
id: componentId,
cols,
onMouseleave: handleMouseleaveTable
}, showScrollbar: false, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemsStyle: contentStyle, itemResizable: !virtualScrollX, columns: cols, renderItemWithCols: virtualScrollX
? ({ itemIndex, item, startColIndex, endColIndex, getLeft }) => {
return renderRow({
displayedRowIndex: itemIndex,
isVirtual: true,
isVirtualX: true,
rowInfo: item,
startColIndex,
endColIndex,
getLeft
});
}
: undefined }, {
default: ({ item, index, renderedItemWithCols }) => {
if (renderedItemWithCols)
return renderedItemWithCols;
return renderRow({
rowInfo: item,
displayedRowIndex: index,
isVirtual: true,
isVirtualX: false,
startColIndex: 0,
endColIndex: 0,
getLeft(_index) {
return 0;
}
});
}
}));
}
}
}));
if (this.empty) {
const createEmptyNode = () => ((0, vue_1.h)("div", { class: [
`${mergedClsPrefix}-data-table-empty`,
this.loading && `${mergedClsPrefix}-data-table-empty--hide`
], style: this.bodyStyle, ref: "emptyElRef" }, (0, _utils_1.resolveSlot)(this.dataTableSlots.empty, () => [
(0, vue_1.h)(empty_1.NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
])));
if (this.shouldDisplaySomeTablePart) {
return ((0, vue_1.h)(vue_1.Fragment, null,
tableNode,
createEmptyNode()));
}
else {
return ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.onResize }, { default: createEmptyNode }));
}
}
return tableNode;
}
});