wetrade-design
Version:
一款多语言支持Vue3的UI框架
162 lines (161 loc) • 7.38 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _ColGroup = _interopRequireDefault(require("../ColGroup"));
var _TableContext = require("../context/TableContext");
var _classNames2 = _interopRequireDefault(require("../../_util/classNames"));
var _addEventListener = _interopRequireDefault(require("../../vc-util/Dom/addEventListener"));
function useColumnWidth(colWidthsRef, columCountRef) {
return (0, _vue.computed)(function () {
var cloneColumns = [];
var colWidths = colWidthsRef.value;
var columCount = columCountRef.value;
for (var i = 0; i < columCount; i += 1) {
var val = colWidths[i];
if (val !== undefined) {
cloneColumns[i] = val;
} else {
return null;
}
}
return cloneColumns;
});
}
var _default = (0, _vue.defineComponent)({
name: 'FixedHolder',
inheritAttrs: false,
props: ['columns', 'flattenColumns', 'stickyOffsets', 'customHeaderRow', 'noData', 'maxContentScroll', 'colWidths', 'columCount', 'direction', 'fixHeader', 'stickyTopOffset', 'stickyBottomOffset', 'stickyClassName', 'isScrollBar'],
emits: ['scroll'],
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
slots = _ref.slots,
emit = _ref.emit;
var tableContext = (0, _TableContext.useInjectTable)();
var combinationScrollBarSize = (0, _vue.computed)(function () {
return tableContext.isSticky && !props.fixHeader ? 0 : tableContext.scrollbarSize;
});
var scrollRef = (0, _vue.ref)();
var onWheel = function onWheel(e) {
if (props.noData) return;
var currentTarget = e.currentTarget,
deltaX = e.deltaX;
if (deltaX) {
emit('scroll', {
currentTarget: currentTarget,
scrollLeft: currentTarget.scrollLeft + deltaX
});
e.preventDefault();
}
};
var wheelEvent = (0, _vue.ref)();
(0, _vue.onMounted)(function () {
(0, _vue.nextTick)(function () {
wheelEvent.value = (0, _addEventListener.default)(scrollRef.value, 'wheel', onWheel);
});
});
(0, _vue.onBeforeUnmount)(function () {
var _wheelEvent$value;
(_wheelEvent$value = wheelEvent.value) === null || _wheelEvent$value === void 0 ? void 0 : _wheelEvent$value.remove();
});
// Check if all flattenColumns has width
var allFlattenColumnsWithWidth = (0, _vue.computed)(function () {
return props.flattenColumns.every(function (column) {
return column.width && column.width !== 0 && column.width !== '0px';
});
});
var columnsWithScrollbar = (0, _vue.ref)([]);
var flattenColumnsWithScrollbar = (0, _vue.ref)([]);
(0, _vue.watchEffect)(function () {
// Add scrollbar column
// const lastColumn = props.flattenColumns[props.flattenColumns.length - 1];
// const ScrollBarColumn: ColumnType<unknown> & { scrollbar: true } = {
// fixed: lastColumn ? lastColumn.fixed : null,
// scrollbar: true,
// customHeaderCell: () => ({
// class: `${tableContext.prefixCls}-cell-scrollbar`,
// }),
// };
// columnsWithScrollbar.value = combinationScrollBarSize.value
// ? [...props.columns, ScrollBarColumn]
// : props.columns;
// flattenColumnsWithScrollbar.value = combinationScrollBarSize.value
// ? [...props.flattenColumns, ScrollBarColumn]
// : props.flattenColumns;
columnsWithScrollbar.value = props.columns;
flattenColumnsWithScrollbar.value = props.flattenColumns;
});
// Calculate the sticky offsets
var headerStickyOffsets = (0, _vue.computed)(function () {
var stickyOffsets = props.stickyOffsets,
direction = props.direction,
isScrollBar = props.isScrollBar;
var right = stickyOffsets.right,
left = stickyOffsets.left;
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, stickyOffsets), {}, {
left: direction === 'rtl' ? [].concat((0, _toConsumableArray2.default)(left.map(function (width) {
return width + (isScrollBar ? combinationScrollBarSize.value : 0);
})), [0]) : left,
right: direction === 'rtl' ? right : [].concat((0, _toConsumableArray2.default)(right.map(function (width) {
return width + (isScrollBar ? combinationScrollBarSize.value : 0);
})), [0]),
isSticky: tableContext.isSticky
});
});
var mergedColumnWidth = useColumnWidth((0, _vue.toRef)(props, 'colWidths'), (0, _vue.toRef)(props, 'columCount'));
(0, _vue.watch)(function () {
return mergedColumnWidth.value;
}, function () {
var _mergedColumnWidth$va;
if (!scrollRef.value) return;
var mergedColumnTotalWidth = (_mergedColumnWidth$va = mergedColumnWidth.value) === null || _mergedColumnWidth$va === void 0 ? void 0 : _mergedColumnWidth$va.reduce(function (prev, curr) {
return prev + curr;
}, 0);
// 解决拖拽后出现多余的占位单元格导致表头偏移问题
if (mergedColumnTotalWidth <= scrollRef.value.offsetWidth) {
scrollRef.value.scrollLeft = 0;
}
});
return function () {
var _slots$default;
var noData = props.noData,
columCount = props.columCount,
stickyTopOffset = props.stickyTopOffset,
stickyBottomOffset = props.stickyBottomOffset,
stickyClassName = props.stickyClassName,
maxContentScroll = props.maxContentScroll,
isScrollBar = props.isScrollBar;
var isSticky = tableContext.isSticky;
return (0, _vue.createVNode)("div", {
"style": (0, _objectSpread2.default)({
overflow: 'hidden'
}, isSticky ? {
top: "".concat(stickyTopOffset, "px"),
bottom: "".concat(stickyBottomOffset, "px")
} : {}),
"ref": scrollRef,
"class": (0, _classNames2.default)(attrs.class, (0, _defineProperty2.default)({}, stickyClassName, !!stickyClassName))
}, [(0, _vue.createVNode)("table", {
"style": {
tableLayout: 'fixed',
visibility: noData || mergedColumnWidth.value ? null : 'hidden'
}
}, [(!noData || !maxContentScroll || allFlattenColumnsWithWidth.value) && (0, _vue.createVNode)(_ColGroup.default, {
"colWidths": mergedColumnWidth.value ? [].concat((0, _toConsumableArray2.default)(mergedColumnWidth.value), [isScrollBar ? combinationScrollBarSize.value : 0]) : [],
"columCount": columCount + 1,
"columns": flattenColumnsWithScrollbar.value
}, null), (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
stickyOffsets: headerStickyOffsets.value,
columns: columnsWithScrollbar.value,
flattenColumns: flattenColumnsWithScrollbar.value
}))])]);
};
}
});
exports.default = _default;