wetrade-design
Version:
一款多语言支持Vue3的UI框架
994 lines (993 loc) • 46.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.INTERNAL_HOOKS = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _Header = _interopRequireDefault(require("./Header/Header"));
var _Body = _interopRequireDefault(require("./Body"));
var _useColumns3 = _interopRequireDefault(require("./hooks/useColumns"));
var _useFrame = require("./hooks/useFrame");
var _valueUtil = require("./utils/valueUtil");
var _useStickyOffsets = _interopRequireDefault(require("./hooks/useStickyOffsets"));
var _ColGroup = _interopRequireDefault(require("./ColGroup"));
var _Panel = _interopRequireDefault(require("./Panel"));
var _Footer = _interopRequireDefault(require("./Footer"));
var _expandUtil = require("./utils/expandUtil");
var _fixUtil = require("./utils/fixUtil");
var _stickyScrollBar = _interopRequireDefault(require("./stickyScrollBar"));
var _useSticky = _interopRequireDefault(require("./hooks/useSticky"));
var _FixedHolder = _interopRequireDefault(require("./FixedHolder"));
var _warning = require("../vc-util/warning");
var _reactivePick = require("../_util/reactivePick");
var _useState7 = _interopRequireDefault(require("../_util/hooks/useState"));
var _util = require("../_util/util");
var _isVisible = _interopRequireDefault(require("../vc-util/Dom/isVisible"));
var _getScrollBarSize = require("../_util/getScrollBarSize");
var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
var _TableContext = require("./context/TableContext");
var _BodyContext = require("./context/BodyContext");
var _ResizeContext = require("./context/ResizeContext");
var _StickyContext = require("./context/StickyContext");
var _pickAttrs = _interopRequireDefault(require("../_util/pickAttrs"));
var _ExpandedRowContext = require("./context/ExpandedRowContext");
var _scrollbar = _interopRequireDefault(require("../scrollbar"));
var _legacyUtil = require("./utils/legacyUtil");
// Used for conditions cache
var EMPTY_DATA = [];
// Used for customize scroll
var EMPTY_SCROLL_TARGET = {};
var INTERNAL_HOOKS = 'rc-table-internal-hook';
exports.INTERNAL_HOOKS = INTERNAL_HOOKS;
var _default2 = (0, _vue.defineComponent)({
name: 'Table',
inheritAttrs: false,
props: ['prefixCls', 'data', 'columns', 'rowKey', 'tableLayout', 'scroll', 'rowClassName', 'title', 'footer', 'id', 'showHeader', 'components', 'customRow', 'customHeaderRow', 'direction', 'expandFixed', 'expandColumnWidth', 'expandedRowKeys', 'defaultExpandedRowKeys', 'expandedRowRender', 'expandRowByClick', 'expandIcon', 'onExpand', 'onExpandedRowsChange', 'onUpdate:expandedRowKeys', 'defaultExpandAllRows', 'indentSize', 'expandIconColumnIndex', 'expandedRowClassName', 'childrenColumnName', 'rowExpandable', 'sticky', 'transformColumns', 'internalHooks', 'internalRefs', 'canExpandable', 'onUpdateInternalRefs', 'transformCellText', 'isMaxHeight', 'isScrollPosition', 'virtualScroll'],
slots: ['title', 'footer', 'summary', 'emptyText'],
emits: ['expand', 'expandedRowsChange', 'updateInternalRefs', 'update:expandedRowKeys'],
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
slots = _ref.slots,
emit = _ref.emit,
expose = _ref.expose;
var mergedData = (0, _vue.computed)(function () {
return props.data || EMPTY_DATA;
});
var hasData = (0, _vue.computed)(function () {
return !!mergedData.value.length;
});
// ==================== Customize =====================
var mergedComponents = (0, _vue.computed)(function () {
return (0, _valueUtil.mergeObject)(props.components, {});
});
var getComponent = function getComponent(path, defaultComponent) {
return (0, _valueUtil.getPathValue)(mergedComponents.value, path) || defaultComponent;
};
var getRowKey = (0, _vue.computed)(function () {
var rowKey = props.rowKey;
if (typeof rowKey === 'function') {
return rowKey;
}
return function (record) {
var key = record && record[rowKey];
if (process.env.NODE_ENV !== 'production') {
(0, _warning.warning)(key !== undefined, 'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.');
}
return key;
};
});
// ====================== Expand ======================
var mergedExpandIcon = (0, _vue.computed)(function () {
return props.expandIcon || _expandUtil.renderExpandIcon;
});
var mergedChildrenColumnName = (0, _vue.computed)(function () {
return props.childrenColumnName || 'children';
});
var expandableType = (0, _vue.computed)(function () {
if (props.expandedRowRender) {
return 'row';
}
/* eslint-disable no-underscore-dangle */
/**
* Fix https://github.com/ant-design/ant-design/issues/21154
* This is a workaround to not to break current behavior.
* We can remove follow code after final release.
*
* To other developer:
* Do not use `__PARENT_RENDER_ICON__` in prod since we will remove this when refactor
*/
if (props.canExpandable || mergedData.value.some(function (record) {
return record && (0, _typeof2.default)(record) === 'object' && record[mergedChildrenColumnName.value];
})) {
return 'nest';
}
/* eslint-enable */
return false;
});
var innerExpandedKeys = (0, _vue.shallowRef)([]);
var stop = (0, _vue.watchEffect)(function () {
if (props.defaultExpandedRowKeys) {
innerExpandedKeys.value = props.defaultExpandedRowKeys;
}
if (props.defaultExpandAllRows) {
innerExpandedKeys.value = (0, _expandUtil.findAllChildrenKeys)(mergedData.value, getRowKey.value, mergedChildrenColumnName.value);
}
});
// defalutXxxx 仅仅第一次生效
stop();
var mergedExpandedKeys = (0, _vue.computed)(function () {
return new Set(props.expandedRowKeys || innerExpandedKeys.value || []);
});
var onTriggerExpand = function onTriggerExpand(record) {
var key = getRowKey.value(record, mergedData.value.indexOf(record));
var newExpandedKeys;
var hasKey = mergedExpandedKeys.value.has(key);
if (hasKey) {
mergedExpandedKeys.value.delete(key);
newExpandedKeys = (0, _toConsumableArray2.default)(mergedExpandedKeys.value);
} else {
newExpandedKeys = [].concat((0, _toConsumableArray2.default)(mergedExpandedKeys.value), [key]);
}
innerExpandedKeys.value = newExpandedKeys;
emit('expand', !hasKey, record);
emit('update:expandedRowKeys', newExpandedKeys);
emit('expandedRowsChange', newExpandedKeys);
};
// Warning if use `expandedRowRender` and nest children in the same time
if (process.env.NODE_ENV !== 'production' && props.expandedRowRender && mergedData.value.some(function (record) {
return Array.isArray(record === null || record === void 0 ? void 0 : record[mergedChildrenColumnName.value]);
})) {
(0, _warning.warning)(false, '`expandedRowRender` should not use with nested Table');
}
var componentWidth = (0, _vue.ref)(0);
var _useColumns = (0, _useColumns3.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _vue.toRefs)(props)), {}, {
// children,
expandable: (0, _vue.computed)(function () {
return !!props.expandedRowRender;
}),
expandedKeys: mergedExpandedKeys,
getRowKey: getRowKey,
onTriggerExpand: onTriggerExpand,
expandIcon: mergedExpandIcon
}), (0, _vue.computed)(function () {
return props.internalHooks === INTERNAL_HOOKS ? props.transformColumns : null;
})),
_useColumns2 = (0, _slicedToArray2.default)(_useColumns, 2),
columns = _useColumns2[0],
flattenColumns = _useColumns2[1];
var columnContext = (0, _vue.computed)(function () {
return {
columns: columns.value,
flattenColumns: flattenColumns.value
};
});
// ====================== Scroll ======================
var fullTableRef = (0, _vue.ref)();
var scrollHeaderRef = (0, _vue.ref)();
var scrollBodyRef = (0, _vue.ref)();
var scrollBarRef = (0, _vue.ref)();
var resizeColumnMoveRef = (0, _vue.ref)();
var resizeColumnStartRef = (0, _vue.ref)();
var isResizingHandle = (0, _vue.ref)(false);
var scrollBodySizeInfo = (0, _vue.ref)({
scrollWidth: 0,
clientWidth: 0
});
var scrollSummaryRef = (0, _vue.ref)();
var _useState = (0, _useState7.default)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
pingedLeft = _useState2[0],
setPingedLeft = _useState2[1];
var _useState3 = (0, _useState7.default)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
pingedRight = _useState4[0],
setPingedRight = _useState4[1];
var _useLayoutState = (0, _useFrame.useLayoutState)(new Map()),
_useLayoutState2 = (0, _slicedToArray2.default)(_useLayoutState, 2),
colsWidths = _useLayoutState2[0],
updateColsWidths = _useLayoutState2[1];
var layout = (0, _vue.reactive)({
scrollX: false,
scrollY: false
});
// 滚动的方向
var scrollDirection = (0, _vue.reactive)({
left: false,
middle: false,
right: false
});
// Convert map to number width
var colsKeys = (0, _vue.computed)(function () {
return (0, _valueUtil.getColumnsKey)(flattenColumns.value);
});
var colWidths = (0, _vue.computed)(function () {
return colsKeys.value.map(function (columnKey) {
return colsWidths.value.get(columnKey);
});
});
var columnCount = (0, _vue.computed)(function () {
return flattenColumns.value.length;
});
var stickyOffsets = (0, _useStickyOffsets.default)(colWidths, columnCount, (0, _vue.toRef)(props, 'direction'));
var fixHeader = (0, _vue.computed)(function () {
return props.scroll && (0, _valueUtil.validateValue)(props.scroll.y);
});
var horizonScroll = (0, _vue.computed)(function () {
return props.scroll && (0, _valueUtil.validateValue)(props.scroll.x) || Boolean(props.expandFixed);
});
var fixColumn = (0, _vue.computed)(function () {
return horizonScroll.value && flattenColumns.value.some(function (_ref2) {
var fixed = _ref2.fixed;
return fixed;
});
});
// Sticky
var stickyRef = (0, _vue.ref)();
var stickyState = (0, _useSticky.default)((0, _vue.toRef)(props, 'sticky'), (0, _vue.toRef)(props, 'prefixCls'));
var summaryFixedInfos = (0, _vue.reactive)({});
var fixFooter = (0, _vue.computed)(function () {
var info = Object.values(summaryFixedInfos)[0];
return (fixHeader.value || stickyState.value.isSticky) && info;
});
var summaryCollect = function summaryCollect(uniKey, fixed) {
if (fixed) {
summaryFixedInfos[uniKey] = fixed;
} else {
delete summaryFixedInfos[uniKey];
}
};
// Scroll
var scrollXStyle = (0, _vue.ref)({});
var scrollYStyle = (0, _vue.ref)({});
var scrollTableStyle = (0, _vue.ref)({});
(0, _vue.watchEffect)(function () {
if (fixHeader.value) {
scrollYStyle.value = {
// overflowY: props.data?.length > 0 ? 'scroll' : 'hidden',
// overflowY: props.data?.length > 0 ? 'auto' : 'hidden',
maxHeight: (0, _util.toPx)(props.scroll.y)
};
}
if (horizonScroll.value) {
// scrollXStyle.value = { overflowX: props.data?.length > 0 ? 'auto' : 'hidden' };
// When no vertical scrollbar, should hide it
// https://github.com/ant-design/ant-design/pull/20705
// https://github.com/ant-design/ant-design/issues/21879
if (!fixHeader.value) {
// scrollYStyle.value = { overflowY: 'hidden' };
}
scrollTableStyle.value = {
// width: props.scroll.x === true ? 'auto' : toPx(props.scroll.x),
minWidth: '100%'
};
}
});
var onColumnResize = function onColumnResize(columnKey, width) {
if ((0, _isVisible.default)(fullTableRef.value)) {
updateColsWidths(function (widths) {
if (widths.get(columnKey) !== width) {
var newWidths = new Map(widths);
newWidths.set(columnKey, width);
return newWidths;
}
return widths;
});
}
};
var _useTimeoutLock = (0, _useFrame.useTimeoutLock)(null),
_useTimeoutLock2 = (0, _slicedToArray2.default)(_useTimeoutLock, 2),
setScrollTarget = _useTimeoutLock2[0],
getScrollTarget = _useTimeoutLock2[1];
function forceScroll(scrollLeft, target) {
if (!target) {
return;
}
if (typeof target === 'function') {
target(scrollLeft);
return;
}
var domTarget = target.$el || target;
if (domTarget.scrollLeft !== scrollLeft) {
// eslint-disable-next-line no-param-reassign
domTarget.scrollLeft = scrollLeft;
}
}
var onScroll = function onScroll(_ref3) {
var currentTarget = _ref3.currentTarget,
scrollLeft = _ref3.scrollLeft;
var isRTL = props.direction === 'rtl';
var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
var compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
if (!getScrollTarget() || getScrollTarget() === compareTarget) {
var _stickyRef$value;
setScrollTarget(compareTarget);
// forceScroll(mergedScrollLeft, scrollHeaderRef.value);
forceScroll(mergedScrollLeft, scrollBodyRef.value);
forceScroll(mergedScrollLeft, scrollSummaryRef.value);
forceScroll(mergedScrollLeft, (_stickyRef$value = stickyRef.value) === null || _stickyRef$value === void 0 ? void 0 : _stickyRef$value.setScrollLeft);
}
if (currentTarget) {
var scrollWidth = currentTarget.scrollWidth,
clientWidth = currentTarget.clientWidth;
if (isRTL) {
setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
setPingedRight(-mergedScrollLeft > 0);
} else {
setPingedLeft(mergedScrollLeft > 0);
setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
}
}
};
var triggerOnScroll = function triggerOnScroll() {
if (horizonScroll.value && scrollBodyRef.value) {
onScroll({
currentTarget: scrollBodyRef.value
});
} else {
setPingedLeft(false);
setPingedRight(false);
}
};
var timtout;
var updateWidth = function updateWidth(width) {
if (width !== componentWidth.value) {
triggerOnScroll();
componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width;
}
};
var onFullTableResize = function onFullTableResize(_ref4) {
var width = _ref4.width;
clearTimeout(timtout);
if (componentWidth.value === 0) {
updateWidth(width);
return;
}
timtout = setTimeout(function () {
updateWidth(width);
}, 100);
// 表格宽度发生变化时初始化表格滚动状态
onInitTableScroll();
};
var isScrollBar = (0, _vue.ref)(false);
(0, _vue.watch)([horizonScroll, function () {
return props.data;
}, function () {
return props.columns;
}], function () {
if (horizonScroll.value) {
triggerOnScroll();
}
(0, _vue.nextTick)(function () {
var _scrollBodyRef$value, _scrollBodyRef$value$, _scrollBodyRef$value2;
isScrollBar.value = ((_scrollBodyRef$value = scrollBodyRef.value) === null || _scrollBodyRef$value === void 0 ? void 0 : (_scrollBodyRef$value$ = _scrollBodyRef$value.querySelector('table')) === null || _scrollBodyRef$value$ === void 0 ? void 0 : _scrollBodyRef$value$.offsetHeight) > ((_scrollBodyRef$value2 = scrollBodyRef.value) === null || _scrollBodyRef$value2 === void 0 ? void 0 : _scrollBodyRef$value2.offsetHeight);
// columns发生变化时初始化表格滚动状态
onInitTableScroll();
});
}, {
flush: 'post'
});
var onInitTableScroll = function onInitTableScroll() {
var _fullTableRef$value$c, _fullTableRef$value;
var bodyMinWidth = 0;
flattenColumns.value.forEach(function (column) {
bodyMinWidth += Number(column.width || column.minWidth || 0);
});
var bodyWidth = (_fullTableRef$value$c = (_fullTableRef$value = fullTableRef.value) === null || _fullTableRef$value === void 0 ? void 0 : _fullTableRef$value.clientWidth) !== null && _fullTableRef$value$c !== void 0 ? _fullTableRef$value$c : 0;
var selectColumn = flattenColumns.value.find(function (column) {
return _legacyUtil.INTERNAL_COL_DEFINE in column;
});
if (selectColumn !== null && selectColumn !== void 0 && selectColumn.className && fullTableRef.value) {
var selectEl = fullTableRef.value.querySelector(".".concat(selectColumn.className));
var selectRect = selectEl.getBoundingClientRect();
bodyWidth = bodyWidth - selectRect.width;
}
layout.scrollX = bodyMinWidth > bodyWidth;
syncPosition();
};
var _useState5 = (0, _useState7.default)(0),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
scrollbarSize = _useState6[0],
setScrollbarSize = _useState6[1];
(0, _StickyContext.useProvideSticky)();
(0, _vue.onMounted)(function () {
(0, _vue.nextTick)(function () {
var _scrollBodyRef$value3, _scrollBodyRef$value4;
triggerOnScroll();
setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyRef.value).width);
scrollBodySizeInfo.value = {
scrollWidth: ((_scrollBodyRef$value3 = scrollBodyRef.value) === null || _scrollBodyRef$value3 === void 0 ? void 0 : _scrollBodyRef$value3.scrollWidth) || 0,
clientWidth: ((_scrollBodyRef$value4 = scrollBodyRef.value) === null || _scrollBodyRef$value4 === void 0 ? void 0 : _scrollBodyRef$value4.clientWidth) || 0
};
onInitTableScroll();
});
});
(0, _vue.onUpdated)(function () {
(0, _vue.nextTick)(function () {
var _scrollBodyRef$value5, _scrollBodyRef$value6;
var scrollWidth = ((_scrollBodyRef$value5 = scrollBodyRef.value) === null || _scrollBodyRef$value5 === void 0 ? void 0 : _scrollBodyRef$value5.scrollWidth) || 0;
var clientWidth = ((_scrollBodyRef$value6 = scrollBodyRef.value) === null || _scrollBodyRef$value6 === void 0 ? void 0 : _scrollBodyRef$value6.clientWidth) || 0;
if (scrollBodySizeInfo.value.scrollWidth !== scrollWidth || scrollBodySizeInfo.value.clientWidth !== clientWidth) {
scrollBodySizeInfo.value = {
scrollWidth: scrollWidth,
clientWidth: clientWidth
};
}
});
});
(0, _vue.watchEffect)(function () {
if (props.internalHooks === INTERNAL_HOOKS && props.internalRefs) {
props.onUpdateInternalRefs({
body: scrollBodyRef.value ? scrollBodyRef.value.$el || scrollBodyRef.value : null
});
}
}, {
flush: 'post'
});
// Table layout
var mergedTableLayout = (0, _vue.computed)(function () {
if (props.tableLayout) {
return props.tableLayout;
}
// https://github.com/ant-design/ant-design/issues/25227
// When scroll.x is max-content, no need to fix table layout
// it's width should stretch out to fit content
if (fixColumn.value) {
return props.scroll.x === 'max-content' ? 'auto' : 'fixed';
}
if (fixHeader.value || stickyState.value.isSticky || flattenColumns.value.some(function (_ref5) {
var ellipsis = _ref5.ellipsis;
return ellipsis;
})) {
return 'fixed';
}
return 'auto';
});
var emptyNode = function emptyNode() {
var _slots$emptyText;
return hasData.value ? null : ((_slots$emptyText = slots.emptyText) === null || _slots$emptyText === void 0 ? void 0 : _slots$emptyText.call(slots)) || 'No Data';
};
(0, _TableContext.useProvideTable)((0, _vue.reactive)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _vue.toRefs)((0, _reactivePick.reactivePick)(props, 'prefixCls', 'direction', 'transformCellText'))), {}, {
getComponent: getComponent,
scrollbarSize: scrollbarSize,
fixedInfoList: (0, _vue.computed)(function () {
return flattenColumns.value.map(function (_, colIndex) {
return (0, _fixUtil.getCellFixedInfo)(colIndex, colIndex, flattenColumns.value, stickyOffsets.value, props.direction);
});
}),
isSticky: (0, _vue.computed)(function () {
return stickyState.value.isSticky;
}),
summaryCollect: summaryCollect
})));
(0, _BodyContext.useProvideBody)((0, _vue.reactive)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _vue.toRefs)((0, _reactivePick.reactivePick)(props, 'rowClassName', 'expandedRowClassName', 'expandRowByClick', 'expandedRowRender', 'expandIconColumnIndex', 'indentSize'))), {}, {
columns: columns,
flattenColumns: flattenColumns,
tableLayout: mergedTableLayout,
expandIcon: mergedExpandIcon,
expandableType: expandableType,
onTriggerExpand: onTriggerExpand
})));
(0, _ResizeContext.useProvideResize)({
onColumnResize: onColumnResize
});
(0, _ResizeContext.useProvideInitScroll)({
onInitTableScroll: onInitTableScroll
});
(0, _vue.provide)(_ResizeContext.ResizeColumnMoveRefKey, resizeColumnMoveRef);
(0, _vue.provide)(_ResizeContext.FullTableRefKey, fullTableRef);
(0, _vue.provide)(_ResizeContext.HasDataKey, hasData);
(0, _vue.provide)(_ResizeContext.ResizeColumnStartRefKey, resizeColumnStartRef);
(0, _vue.provide)(_ResizeContext.ResizeColumnStatusKey, isResizingHandle);
(0, _ExpandedRowContext.useProvideExpandedRow)({
componentWidth: componentWidth,
fixHeader: fixHeader,
fixColumn: fixColumn,
horizonScroll: horizonScroll
});
// 滚动时同步表头位置
var handleScrollBar = function handleScrollBar() {
syncPosition();
};
var hasScrollClass = function hasScrollClass(className) {
return !!(fullTableRef.value && fullTableRef.value.classList.contains(className));
};
// 高度变化
var dymysicHeight = (0, _vue.shallowRef)(0);
var list = (0, _vue.customRef)(function (track, trigger) {
return {
get: function get() {
var _props$virtualScroll;
track();
return !((_props$virtualScroll = props.virtualScroll) !== null && _props$virtualScroll !== void 0 && _props$virtualScroll.isOpen) ? mergedData.value : mergedData.value.slice(saveIndex.value.startIndex, saveIndex.value.endIndex);
},
set: function set() {
trigger();
}
};
});
var rowHeight = (0, _vue.ref)(32); // 默认32
// 计算出每一个item到滚动容器顶部的距离
var offsetMap = function offsetMap() {
var res = {};
var total = 0;
for (var i = 0; i < mergedData.value.length; i++) {
var _mergedData$value, _mergedData$value$i;
var key = (_mergedData$value = mergedData.value) === null || _mergedData$value === void 0 ? void 0 : (_mergedData$value$i = _mergedData$value[i]) === null || _mergedData$value$i === void 0 ? void 0 : _mergedData$value$i.key;
res[key] = total;
var curSize = sizeMap.get(key);
var size = typeof curSize === 'number' ? curSize : rowHeight.value;
total += size;
}
// console.log('得到到的每一项到顶部的距离', res);
return res;
};
var isTreeStructure = function isTreeStructure(listData) {
return listData.some(function (k) {
return (k === null || k === void 0 ? void 0 : k.children) && Array.isArray(k === null || k === void 0 ? void 0 : k.children);
});
};
// 更新每一行动态尺寸
var updateSize = function updateSize() {
var rows = [];
if (isTreeStructure(list.value)) {
var _scrollBodyRef$value7;
// add： 需要判断是否为树状结构
rows = (_scrollBodyRef$value7 = scrollBodyRef.value) === null || _scrollBodyRef$value7 === void 0 ? void 0 : _scrollBodyRef$value7.querySelectorAll(".".concat(props.prefixCls, "-body .").concat(props.prefixCls, "-tbody .").concat(props.prefixCls, "-row-level-0"));
} else {
var _scrollBodyRef$value8;
// todo： 如果是树形结构需要计算嵌套基层并加上里面嵌套层高度
rows = (_scrollBodyRef$value8 = scrollBodyRef.value) === null || _scrollBodyRef$value8 === void 0 ? void 0 : _scrollBodyRef$value8.querySelectorAll(".".concat(props.prefixCls, "-body .").concat(props.prefixCls, "-tbody .").concat(props.prefixCls, "-row"));
}
if (!rows) return;
var rowHeights = [];
Array.prototype.forEach.call(rows, function (row, idx) {
var _props$virtualScroll2;
var item = list.value[idx];
if (!item) return;
// 计算表格行的高度
var offsetHeightRow = row.offsetHeight;
rowHeights.push(offsetHeightRow);
if (!((_props$virtualScroll2 = props.virtualScroll) !== null && _props$virtualScroll2 !== void 0 && _props$virtualScroll2.isDynamic)) return;
// 如果表格行有扩展项，需要加上扩张向的高度
var nextRow = row === null || row === void 0 ? void 0 : row.nextElementSibling;
if (nextRow && nextRow.classList && nextRow.classList.contains("".concat(props.prefixCls, "-expanded-row"))) {
offsetHeightRow += nextRow.nextElementSibling.offsetHeight;
}
// 表格行如果有子孙节点，需要加上子孙节点 高度
var next = row === null || row === void 0 ? void 0 : row.nextElementSibling;
while (!!next && next.tagName === 'TR' && !next.classList.contains("".concat(props.prefixCls, "-row-level-0"))) {
offsetHeightRow += next.offsetHeight;
next = next.nextElementSibling;
}
var key = item['key'];
if (sizeMap.get(key) !== offsetHeightRow) {
sizeMap.set(item.key, offsetHeightRow);
row._offsetHeight = offsetHeightRow;
}
// console.log('设置每项高度', offsetHeightRow, sizeMap, key,dymysicHeight.value);
});
};
// 设置滚动状态方向
var setScrollDirection = function setScrollDirection(direction) {
Object.keys(scrollDirection).forEach(function (key) {
if (key === direction) {
scrollDirection[direction] = true;
} else {
scrollDirection[key] = false;
}
});
};
var saveIndex = (0, _vue.ref)({
startIndex: 0,
endIndex: 0
});
var positiontransformY = (0, _vue.shallowRef)(0);
// 记录得到每一行容器尺寸大小
var sizeMap = new Map();
// 获取某条数据的尺寸
var getItemSize = function getItemSize(index) {
var _list$value;
// 先从缓存中获取
if (index < 0) return 0;
var item = (_list$value = list.value) === null || _list$value === void 0 ? void 0 : _list$value[index];
if (item) {
var _sizeMap$get;
var key = item['key'];
return (_sizeMap$get = sizeMap.get(key)) !== null && _sizeMap$get !== void 0 ? _sizeMap$get : rowHeight.value;
}
return rowHeight.value;
};
// 获取某条数据的offsetTop
var getItemOffsetTop = function getItemOffsetTop(index) {
var _props$virtualScroll3, _mergedData$value2;
// 固定行高就直接相乘计算
if (!((_props$virtualScroll3 = props.virtualScroll) !== null && _props$virtualScroll3 !== void 0 && _props$virtualScroll3.isDynamic)) {
return index * rowHeight.value;
}
var item = (_mergedData$value2 = mergedData.value) === null || _mergedData$value2 === void 0 ? void 0 : _mergedData$value2[index];
if (item) {
var _obj$item$key;
var obj = offsetMap();
return (_obj$item$key = obj[item === null || item === void 0 ? void 0 : item.key]) !== null && _obj$item$key !== void 0 ? _obj$item$key : 32;
}
return 0;
};
// 计算动态滚动高度
var calcPositionFun = function calcPositionFun() {
// console.log('****');
var last = mergedData.value.length - 1;
// 计算内容总高度
var totalHeight = getItemOffsetTop(last) + getItemSize(last);
// 计算当前滚动位置需要撑起的高度
var offsetTop = getItemOffsetTop(saveIndex.value.startIndex);
dymysicHeight.value = totalHeight;
positiontransformY.value = offsetTop;
// console.log('得到的总高度', offsetTop, totalHeight);
};
// 计算视图上渲染的数据位置
var getCalcRenderData = function getCalcRenderData() {
var _props$virtualScroll4;
var scrollContainer = scrollBarRef.value.wrapRef;
var scrollTop = scrollContainer.scrollTop,
offsetHeight = scrollContainer.offsetHeight;
// 先默认固定缓存5条32*5=160
var BUFFER = ((_props$virtualScroll4 = props.virtualScroll) === null || _props$virtualScroll4 === void 0 ? void 0 : _props$virtualScroll4.buffer) || 0;
var top = Math.max(scrollTop - BUFFER, 0);
// 可视区底部
var bottom = scrollTop + offsetHeight + BUFFER;
var start;
var end;
// 这里区分动态计算行高度，不定高的情况 目前固定为动态计算
var l = 0;
var r = mergedData.value.length - 1;
var mid = 0;
// 二分法查找滚动最优项
while (l <= r) {
mid = Math.floor((l + r) / 2);
// 计算中间数据距离顶部距离
var midVal = getItemOffsetTop(mid);
if (midVal < top) {
var midNextVal = getItemOffsetTop(mid + 1);
if (midNextVal > top) break;
l = mid + 1;
} else {
r = mid - 1;
}
}
// 计算渲染内容的开始、结束索引
start = mid;
end = mergedData.value.length;
for (var i = start + 1; i < mergedData.value.length; i++) {
var offsetTop = getItemOffsetTop(i);
if (offsetTop >= bottom) {
end = i;
break;
}
}
// 开始索引始终保持偶数，如果为奇数，则加1使其保持偶数【确保表格行的偶数数一致，不会导致斑马纹乱序显示】
if (start % 2) {
start = start - 1;
}
saveIndex.value.startIndex = start;
saveIndex.value.endIndex = end;
};
var syncPosition = function syncPosition() {
var _props$virtualScroll5;
if (!scrollBarRef.value) return;
var scrollContainer = scrollBarRef.value.wrapRef;
var scrollLeft = scrollContainer.scrollLeft,
offsetWidth = scrollContainer.offsetWidth,
scrollWidth = scrollContainer.scrollWidth;
if ((_props$virtualScroll5 = props.virtualScroll) !== null && _props$virtualScroll5 !== void 0 && _props$virtualScroll5.isOpen) {
updateSize();
getCalcRenderData();
calcPositionFun();
}
if (!layout.scrollX) {
var scrollingNoneClass = 'is-scrolling-none';
if (!hasScrollClass(scrollingNoneClass)) {
setScrollDirection();
}
return;
}
if (!scrollContainer) return;
if (scrollHeaderRef.value) scrollHeaderRef.value.$el.scrollLeft = scrollLeft;
var maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
if (scrollLeft >= maxScrollLeftPosition) {
setScrollDirection('right');
} else if (scrollLeft === 0) {
setScrollDirection('left');
} else {
setScrollDirection('middle');
}
};
// 获取滚动条实例方法
var getScrollbar = function getScrollbar() {
return scrollBarRef.value;
};
expose({
getScrollbar: getScrollbar
});
// Body
var bodyTable = function bodyTable() {
var _props$virtualScroll6;
return (0, _vue.createVNode)(_Body.default, {
"data": list.value,
"measureColumnWidth": fixHeader.value || horizonScroll.value || stickyState.value.isSticky,
"expandedKeys": mergedExpandedKeys.value,
"rowExpandable": props.rowExpandable,
"getRowKey": getRowKey.value,
"customRow": props.customRow,
"childrenColumnName": mergedChildrenColumnName.value,
"style": (_props$virtualScroll6 = props.virtualScroll) !== null && _props$virtualScroll6 !== void 0 && _props$virtualScroll6.isOpen ? {
transform: "translateY(".concat(positiontransformY.value, "px)")
} : null
}, {
emptyNode: emptyNode
});
};
var bodyColGroup = function bodyColGroup() {
return (0, _vue.createVNode)(_ColGroup.default, {
"colWidths": flattenColumns.value.map(function (_ref6) {
var width = _ref6.width;
return width;
}),
"columns": flattenColumns.value
}, null);
};
// 滚动条内容区域样式
var scrollbarStyle = (0, _vue.computed)(function () {
if (!mergedData.value.length) {
return {
overflow: 'hidden'
};
}
if (props.scroll.y) {
return props.isMaxHeight ? (0, _objectSpread2.default)({
height: '100%'
}, scrollYStyle.value) : {
height: '100%'
};
}
return {};
});
// 滚动条视图区域样式
var scrollbarViewStyle = props.isScrollPosition ? {
display: 'inline-block',
verticalAlign: 'middle',
position: 'relative'
} : {
display: 'inline-block',
verticalAlign: 'middle'
};
return function () {
var _slots$summary;
var prefixCls = props.prefixCls,
scroll = props.scroll,
tableLayout = props.tableLayout,
direction = props.direction,
_props$title = props.title,
title = _props$title === void 0 ? slots.title : _props$title,
_props$footer = props.footer,
footer = _props$footer === void 0 ? slots.footer : _props$footer,
id = props.id,
showHeader = props.showHeader,
customHeaderRow = props.customHeaderRow;
var _stickyState$value = stickyState.value,
isSticky = _stickyState$value.isSticky,
offsetHeader = _stickyState$value.offsetHeader,
offsetSummary = _stickyState$value.offsetSummary,
offsetScroll = _stickyState$value.offsetScroll,
stickyClassName = _stickyState$value.stickyClassName,
container = _stickyState$value.container;
var TableComponent = getComponent(['table'], 'table');
var customizeScrollBody = getComponent(['body']);
var summaryNode = (_slots$summary = slots.summary) === null || _slots$summary === void 0 ? void 0 : _slots$summary.call(slots, {
pageData: mergedData.value
});
var groupTableNode = function groupTableNode() {
return null;
};
// Header props
var headerProps = {
colWidths: colWidths.value,
columCount: flattenColumns.value.length,
stickyOffsets: stickyOffsets.value,
customHeaderRow: customHeaderRow,
fixHeader: fixHeader.value,
scroll: scroll
};
if (process.env.NODE_ENV !== 'production' && typeof customizeScrollBody === 'function' && hasData.value && !fixHeader.value) {
(0, _warning.warning)(false, '`components.body` with render props is only work on `scroll.y`.');
}
if (fixHeader.value || isSticky) {
// >>>>>> Fixed Header
var bodyContent = function bodyContent() {
return null;
};
if (typeof customizeScrollBody === 'function') {
bodyContent = function bodyContent() {
return customizeScrollBody(mergedData.value, {
scrollbarSize: scrollbarSize.value,
ref: scrollBodyRef,
onScroll: onScroll
});
};
headerProps.colWidths = flattenColumns.value.map(function (_ref7, index) {
var width = _ref7.width;
var colWidth = index === columns.value.length - 1 ? width - scrollbarSize.value : width;
if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
return colWidth;
}
(0, _warning.warning)(false, 'When use `components.body` with render props. Each column should have a fixed `width` value.');
return 0;
});
} else {
var scrollbarInlineStyle = null;
if (props.isMaxHeight) {
scrollbarInlineStyle = (0, _objectSpread2.default)({}, scrollYStyle.value);
}
bodyContent = function bodyContent() {
var _props$virtualScroll7;
return (0, _vue.createVNode)("div", {
"style": (0, _objectSpread2.default)({}, scrollYStyle.value),
"ref": scrollBodyRef,
"class": (0, _classNames2.default)("".concat(prefixCls, "-body"))
}, [(0, _vue.createVNode)(_scrollbar.default, {
"style": scrollbarInlineStyle,
"ref": scrollBarRef,
"wrap-style": scrollbarStyle.value,
"view-style": scrollbarViewStyle,
"onScroll": handleScrollBar
}, {
default: function _default() {
return [(0, _vue.createVNode)(TableComponent, {
"style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollTableStyle.value), {}, {
tableLayout: mergedTableLayout.value
})
}, {
default: function _default() {
return [(_props$virtualScroll7 = props.virtualScroll) !== null && _props$virtualScroll7 !== void 0 && _props$virtualScroll7.isOpen ? (0, _vue.createVNode)("div", {
"style": {
height: dymysicHeight.value + 'px',
position: 'absolute',
width: '100%',
zIndex: -1
}
}, null) : null, bodyColGroup(), bodyTable(), !fixFooter.value && summaryNode && (0, _vue.createVNode)(_Footer.default, {
"stickyOffsets": stickyOffsets.value,
"flattenColumns": flattenColumns.value
}, {
default: function _default() {
return [summaryNode];
}
})];
}
})];
}
})]);
};
}
// Fixed holder share the props
var fixedHolderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
noData: !mergedData.value.length,
maxContentScroll: horizonScroll.value && scroll.x === 'max-content'
}, headerProps), columnContext.value), {}, {
direction: direction,
stickyClassName: stickyClassName,
onScroll: onScroll
});
groupTableNode = function groupTableNode() {
return (0, _vue.createVNode)(_vue.Fragment, null, [showHeader !== false && (0, _vue.createVNode)(_FixedHolder.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fixedHolderProps), {}, {
"stickyTopOffset": offsetHeader,
"class": "".concat(prefixCls, "-header"),
"isScrollBar": false,
"ref": scrollHeaderRef
}), {
default: function _default(fixedHolderPassProps) {
return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_Header.default, fixedHolderPassProps, null), fixFooter.value === 'top' && (0, _vue.createVNode)(_Footer.default, fixedHolderPassProps, {
default: function _default() {
return [summaryNode];
}
})]);
}
}), bodyContent(), fixFooter.value && fixFooter.value !== 'top' && (0, _vue.createVNode)(_FixedHolder.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fixedHolderProps), {}, {
"stickyBottomOffset": offsetSummary,
"class": "".concat(prefixCls, "-summary"),
"isScrollBar": false,
"ref": scrollSummaryRef
}), {
default: function _default(fixedHolderPassProps) {
return (0, _vue.createVNode)(_Footer.default, fixedHolderPassProps, {
default: function _default() {
return [summaryNode];
}
});
}
}), isSticky && scrollBodyRef.value && (0, _vue.createVNode)(_stickyScrollBar.default, {
"ref": stickyRef,
"offsetScroll": offsetScroll,
"scrollBodyRef": scrollBodyRef,
"onScroll": onScroll,
"container": container,
"scrollBodySizeInfo": scrollBodySizeInfo.value
}, null)]);
};
} else {
// >>>>>> Unique table
groupTableNode = function groupTableNode() {
return (0, _vue.createVNode)("div", {
"style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollXStyle.value), scrollYStyle.value),
"class": (0, _classNames2.default)("".concat(prefixCls, "-content")),
"onScroll": onScroll,
"ref": scrollBodyRef
}, [(0, _vue.createVNode)(TableComponent, {
"style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollTableStyle.value), {}, {
tableLayout: mergedTableLayout.value
})
}, {
default: function _default() {
return [bodyColGroup(), showHeader !== false && (0, _vue.createVNode)(_Header.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, headerProps), columnContext.value), null), bodyTable(), summaryNode && (0, _vue.createVNode)(_Footer.default, {
"stickyOffsets": stickyOffsets.value,
"flattenColumns": flattenColumns.value
}, {
default: function _default() {
return [summaryNode];
}
})];
}
})]);
};
}
var ariaProps = (0, _pickAttrs.default)(attrs, {
aria: true,
data: true
});
var fullTable = function fullTable() {
var _classNames;
return (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ariaProps), {}, {
"class": (0, _classNames2.default)(prefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-ping-left"), pingedLeft.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-ping-right"), pingedRight.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-layout-fixed"), tableLayout === 'fixed'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-fixed-header"), fixHeader.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-fixed-column"), fixColumn.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-scroll-horizontal"), horizonScroll.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-has-fix-left"), flattenColumns.value[0] && flattenColumns.value[0].fixed), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-has-fix-right"), flattenColumns.value[columnCount.value - 1] && flattenColumns.value[columnCount.value - 1].fixed === 'right'), (0, _defineProperty2.default)(_classNames, attrs.class, attrs.class), (0, _defineProperty2.default)(_classNames, 'is-scrolling-left', scrollDirection.left), (0, _defineProperty2.default)(_classNames, 'is-scrolling-right', scrollDirection.right), (0, _defineProperty2.default)(_classNames, 'is-scrolling-middle', scrollDirection.middle), (0, _defineProperty2.default)(_classNames, 'is-scrolling-none', !scrollDirection.left && !scrollDirection.middle && !scrollDirection.right), (0, _defineProperty2.default)(_classNames, 'is-resizing-handle', isResizingHandle.value), _classNames)),
"style": attrs.style,
"id": id,
"ref": fullTableRef
}), [title && (0, _vue.createVNode)(_Panel.default, {
"class": "".concat(prefixCls, "-title")
}, {
default: function _default() {
return [title(mergedData.value)];
}
}), (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-container")
}, [groupTableNode()]), (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-resize-start"),
"ref": resizeColumnStartRef
}, null), (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-resize-move"),
"ref": resizeColumnMoveRef
}, null), footer && (0, _vue.createVNode)(_Panel.default, {
"class": "".concat(prefixCls, "-footer")
}, {
default: function _default() {
return [footer(mergedData.value)];
}
})]);
};
if (horizonScroll.value) {
return (0, _vue.createVNode)(_vcResizeObserver.default, {
"onResize": onFullTableResize
}, {
default: fullTable
});
}
return fullTable();
};
}
});
exports.default = _default2;