tdesign-mobile-vue
Version:
tdesign-mobile-vue
319 lines (315 loc) • 14.9 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 TDesign Group
* @license MIT
*/
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { toRefs, ref, reactive, watch } from 'vue';
import { get } from 'lodash-es';
import log from '../../_common/js/log/log.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function getColumnFixedStyles(col, index, rowAndColFixedPosition, tableColFixedClasses) {
var fixedPos = rowAndColFixedPosition === null || rowAndColFixedPosition === void 0 ? void 0 : rowAndColFixedPosition.get(col.colKey || index);
if (!fixedPos) return {};
var thClasses = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, tableColFixedClasses.left, col.fixed === "left"), tableColFixedClasses.right, col.fixed === "right"), tableColFixedClasses.lastLeft, col.fixed === "left" && fixedPos.lastLeftFixedCol), tableColFixedClasses.firstRight, col.fixed === "right" && fixedPos.firstRightFixedCol);
var thStyles = {
left: col.fixed === "left" ? "".concat(fixedPos.left, "px") : void 0,
right: col.fixed === "right" ? "".concat(fixedPos.right, "px") : void 0
};
return {
style: thStyles,
classes: thClasses
};
}
function getRowFixedStyles(rowId, rowIndex, rowLength, fixedRows, rowAndColFixedPosition, tableRowFixedClasses) {
var virtualTranslateY = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
if (!fixedRows || !fixedRows.length) return {
style: void 0,
classes: void 0
};
var fixedTop = rowIndex < fixedRows[0];
var fixedBottom = rowIndex > rowLength - 1 - fixedRows[1];
var firstFixedBottomRow = rowLength - fixedRows[1];
var fixedPos = (rowAndColFixedPosition === null || rowAndColFixedPosition === void 0 ? void 0 : rowAndColFixedPosition.get(rowId)) || {};
var rowClasses = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, tableRowFixedClasses.top, fixedTop), tableRowFixedClasses.bottom, fixedBottom), tableRowFixedClasses.firstBottom, rowIndex === firstFixedBottomRow), tableRowFixedClasses.withoutBorderBottom, rowIndex === firstFixedBottomRow - 1);
var rowStyles = {
top: fixedTop ? "".concat(fixedPos.top - virtualTranslateY, "px") : void 0,
bottom: fixedBottom ? "".concat(fixedPos.bottom + virtualTranslateY, "px") : void 0
};
return {
style: rowStyles,
classes: rowClasses
};
}
function useFixed(props) {
var _toRefs = toRefs(props),
columns = _toRefs.columns,
tableLayout = _toRefs.tableLayout,
tableContentWidth = _toRefs.tableContentWidth,
fixedRows = _toRefs.fixedRows,
bordered = _toRefs.bordered;
var data = ref([]);
var tableContentRef = ref();
var isFixedHeader = ref(false);
var isWidthOverflow = ref(false);
var tableElmRef = ref();
var rowAndColFixedPosition = ref(/* @__PURE__ */new Map());
var showColumnShadow = reactive({
left: false,
right: false
});
var virtualScrollHeaderPos = ref({
left: 0,
top: 0
});
var tableWidth = ref(0);
var tableElmWidth = ref(0);
var thWidthList = ref({});
var isFixedColumn = ref(false);
var isFixedRightColumn = ref(false);
var isFixedLeftColumn = ref(false);
function setUseFixedTableElmRef(val) {
tableElmRef.value = val;
}
function getColumnMap(columns2) {
var map = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : /* @__PURE__ */new Map();
var levelNodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var parent = arguments.length > 4 ? arguments[4] : undefined;
for (var i = 0, len = columns2.length; i < len; i++) {
var col = columns2[i];
if (["left", "right"].includes(col.fixed)) {
isFixedColumn.value = true;
}
if (col.fixed === "right") {
isFixedRightColumn.value = true;
}
if (col.fixed === "left") {
isFixedLeftColumn.value = true;
}
var key = col.colKey || i;
var columnInfo = {
col: col,
parent: parent,
index: i
};
map.set(key, columnInfo);
if (levelNodes[level]) {
levelNodes[level].push(columnInfo);
} else {
levelNodes[level] = [columnInfo];
}
}
return {
newColumnsMap: map,
levelNodes: levelNodes
};
}
var setFixedRowPosition = function setFixedRowPosition(trList, initialColumnMap, thead, tfoot) {
var _ref = fixedRows.value || [],
_ref2 = _slicedToArray(_ref, 2),
fixedTopRows = _ref2[0],
fixedBottomRows = _ref2[1];
var data2 = props.data,
_props$rowKey = props.rowKey,
rowKey = _props$rowKey === void 0 ? "id" : _props$rowKey;
for (var i = 0; i < fixedTopRows; i++) {
var tr = trList[i];
var rowId = get(data2[i], rowKey);
var thisRowInfo = initialColumnMap.get(rowId) || {};
var lastRowId = get(data2[i - 1], rowKey);
var lastRowInfo = initialColumnMap.get(lastRowId) || {};
var defaultBottom = 0;
if (i === 0) {
defaultBottom = (thead === null || thead === void 0 ? void 0 : thead.getBoundingClientRect().height) || 0;
}
thisRowInfo.top = (lastRowInfo.top || defaultBottom) + (lastRowInfo.height || 0);
initialColumnMap.set(rowId, _objectSpread(_objectSpread({}, thisRowInfo), {}, {
height: (tr === null || tr === void 0 ? void 0 : tr.getBoundingClientRect().height) || 0
}));
}
for (var _i = data2.length - 1; _i >= data2.length - fixedBottomRows; _i--) {
var _tr = trList[trList.length - (data2.length - _i)];
var _rowId = get(data2[_i], rowKey);
var _thisRowInfo = initialColumnMap.get(_rowId) || {};
var _lastRowId = get(data2[_i + 1], rowKey);
var _lastRowInfo = initialColumnMap.get(_lastRowId) || {};
var _defaultBottom = 0;
if (_i === data2.length - 1) {
_defaultBottom = (tfoot === null || tfoot === void 0 ? void 0 : tfoot.getBoundingClientRect().height) || 0;
}
_thisRowInfo.bottom = (_lastRowInfo.bottom || _defaultBottom) + (_lastRowInfo.height || 0);
initialColumnMap.set(_rowId, _objectSpread(_objectSpread({}, _thisRowInfo), {}, {
height: (_tr === null || _tr === void 0 ? void 0 : _tr.getBoundingClientRect().height) || 0
}));
}
};
var setFixedLeftPos = function setFixedLeftPos(columns2, initialColumnMap) {
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
for (var i = 0, len = columns2.length; i < len; i++) {
var col = columns2[i];
if (col.fixed === "right") return;
var colInfo = initialColumnMap.get(col.colKey || i);
var lastColIndex = i - 1;
while (lastColIndex >= 0 && columns2[lastColIndex].fixed !== "left") {
lastColIndex -= 1;
}
var lastCol = columns2[lastColIndex];
var defaultWidth = i === 0 ? (parent === null || parent === void 0 ? void 0 : parent.left) || 0 : 0;
var lastColInfo = initialColumnMap.get((lastCol === null || lastCol === void 0 ? void 0 : lastCol.colKey) || i - 1);
if (colInfo) {
colInfo.left = ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.left) || defaultWidth) + ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.width) || 0);
}
}
};
var setFixedRightPos = function setFixedRightPos(columns2, initialColumnMap) {
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
for (var i = columns2.length - 1; i >= 0; i--) {
var col = columns2[i];
if (col.fixed === "left") return;
var colInfo = initialColumnMap.get(col.colKey || i);
var lastColIndex = i + 1;
while (lastColIndex < columns2.length && columns2[lastColIndex].fixed !== "right") {
lastColIndex += 1;
}
var lastCol = columns2[lastColIndex];
var defaultWidth = i === columns2.length - 1 ? (parent === null || parent === void 0 ? void 0 : parent.right) || 0 : 0;
var lastColInfo = initialColumnMap.get((lastCol === null || lastCol === void 0 ? void 0 : lastCol.colKey) || i + 1);
if (colInfo) {
colInfo.right = ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.right) || defaultWidth) + ((lastColInfo === null || lastColInfo === void 0 ? void 0 : lastColInfo.width) || 0);
}
}
};
var setFixedColPosition = function setFixedColPosition(trList, initialColumnMap) {
if (!trList) return;
for (var i = 0, len = trList.length; i < len; i++) {
var thList = trList[i].children;
for (var j = 0, thLen = thList.length; j < thLen; j++) {
var _obj$col;
var th = thList[j];
var colKey = th.dataset.colkey;
if (!colKey) {
log.warn("TDesign Table", "".concat(th.innerText, " missing colKey. colKey is required for fixed column feature."));
}
var obj = initialColumnMap.get(colKey || j);
if (obj !== null && obj !== void 0 && (_obj$col = obj.col) !== null && _obj$col !== void 0 && _obj$col.fixed) {
initialColumnMap.set(colKey, _objectSpread(_objectSpread({}, obj), {}, {
width: th.getBoundingClientRect().width
}));
}
}
}
setFixedLeftPos(columns.value, initialColumnMap);
setFixedRightPos(columns.value, initialColumnMap);
};
var updateRowAndColFixedPosition = function updateRowAndColFixedPosition(tableContentElm, initialColumnMap) {
rowAndColFixedPosition.value.clear();
if (!tableContentElm) return;
var thead = tableContentElm.querySelector("thead");
thead && setFixedColPosition(thead.children, initialColumnMap);
var tbody = tableContentElm.querySelector("tbody");
var tfoot = tableContentElm.querySelector("tfoot");
tbody && setFixedRowPosition(tbody.children, initialColumnMap, thead, tfoot);
rowAndColFixedPosition.value = initialColumnMap;
};
var shadowLastScrollLeft;
var updateColumnFixedShadow = function updateColumnFixedShadow(target, extra) {
if (!isFixedColumn.value || !target) return;
var scrollLeft = target.scrollLeft;
if (shadowLastScrollLeft === scrollLeft && (!extra || !extra.skipScrollLimit)) return;
shadowLastScrollLeft = scrollLeft;
var isShowRight = target.clientWidth + scrollLeft < target.scrollWidth;
var isShowLeft = scrollLeft > 0;
if (showColumnShadow.left === isShowLeft && showColumnShadow.right === isShowRight) return;
showColumnShadow.left = isShowLeft && isFixedLeftColumn.value;
showColumnShadow.right = isShowRight && isFixedRightColumn.value;
};
var setIsLastOrFirstFixedCol = function setIsLastOrFirstFixedCol(levelNodes) {
for (var t = 0; t < levelNodes.length; t++) {
var nodes = levelNodes[t];
for (var i = 0, len = nodes.length; i < len; i++) {
var colMapInfo = nodes[i];
var nextColMapInfo = nodes[i + 1];
var parent = colMapInfo.parent;
var isParentLastLeftFixedCol = !parent || (parent === null || parent === void 0 ? void 0 : parent.lastLeftFixedCol);
if (isParentLastLeftFixedCol && colMapInfo.col.fixed === "left" && (nextColMapInfo === null || nextColMapInfo === void 0 ? void 0 : nextColMapInfo.col.fixed) !== "left") {
colMapInfo.lastLeftFixedCol = true;
}
var lastColMapInfo = nodes[i - 1];
var isParentFirstRightFixedCol = !parent || (parent === null || parent === void 0 ? void 0 : parent.firstRightFixedCol);
if (isParentFirstRightFixedCol && colMapInfo.col.fixed === "right" && (lastColMapInfo === null || lastColMapInfo === void 0 ? void 0 : lastColMapInfo.col.fixed) !== "right") {
colMapInfo.firstRightFixedCol = true;
}
}
}
};
var updateFixedStatus = function updateFixedStatus() {
var _getColumnMap = getColumnMap(columns.value),
newColumnsMap = _getColumnMap.newColumnsMap,
levelNodes = _getColumnMap.levelNodes;
setIsLastOrFirstFixedCol(levelNodes);
var timer = setTimeout(function () {
var _fixedRows$value;
if (isFixedColumn.value || (_fixedRows$value = fixedRows.value) !== null && _fixedRows$value !== void 0 && _fixedRows$value.length) {
updateRowAndColFixedPosition(tableContentRef.value, newColumnsMap);
}
clearTimeout(timer);
}, 0);
return function () {
clearTimeout(timer);
};
};
var setTableElmWidth = function setTableElmWidth(width) {
if (tableElmWidth.value === width) return;
tableElmWidth.value = width;
};
watch([data, columns, bordered, tableLayout, tableContentWidth, isFixedHeader, isWidthOverflow, isFixedColumn, fixedRows], updateFixedStatus, {
immediate: true
});
watch([isFixedColumn, columns], function () {
var timer = setTimeout(function () {
if (isFixedColumn.value) {
updateColumnFixedShadow(tableContentRef.value);
}
clearTimeout(timer);
}, 0);
}, {
immediate: true
});
var refreshTable = function refreshTable() {
if (isFixedColumn.value || isFixedHeader.value) {
updateFixedStatus();
updateColumnFixedShadow(tableContentRef.value, {
skipScrollLimit: true
});
}
};
var setData = function setData(dataSource) {
data.value = dataSource;
};
var updateTableAfterColumnResize = function updateTableAfterColumnResize() {
updateFixedStatus();
};
return {
tableWidth: tableWidth,
tableElmWidth: tableElmWidth,
thWidthList: thWidthList,
isFixedHeader: isFixedHeader,
isWidthOverflow: isWidthOverflow,
tableContentRef: tableContentRef,
isFixedColumn: isFixedColumn,
showColumnShadow: showColumnShadow,
rowAndColFixedPosition: rowAndColFixedPosition,
virtualScrollHeaderPos: virtualScrollHeaderPos,
setData: setData,
refreshTable: refreshTable,
setTableElmWidth: setTableElmWidth,
setUseFixedTableElmRef: setUseFixedTableElmRef,
updateColumnFixedShadow: updateColumnFixedShadow,
updateTableAfterColumnResize: updateTableAfterColumnResize
};
}
export { useFixed as default, getColumnFixedStyles, getRowFixedStyles };
//# sourceMappingURL=useFixed.js.map