Table.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.INTERNAL_HOOKS = void 0;
  7. var _vue = require("vue");
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  10. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  11. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  12. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  13. var _Header = _interopRequireDefault(require("./Header/Header"));
  14. var _Body = _interopRequireDefault(require("./Body"));
  15. var _useColumns3 = _interopRequireDefault(require("./hooks/useColumns"));
  16. var _useFrame = require("./hooks/useFrame");
  17. var _valueUtil = require("./utils/valueUtil");
  18. var _useStickyOffsets = _interopRequireDefault(require("./hooks/useStickyOffsets"));
  19. var _ColGroup = _interopRequireDefault(require("./ColGroup"));
  20. var _Panel = _interopRequireDefault(require("./Panel"));
  21. var _Footer = _interopRequireDefault(require("./Footer"));
  22. var _expandUtil = require("./utils/expandUtil");
  23. var _fixUtil = require("./utils/fixUtil");
  24. var _stickyScrollBar = _interopRequireDefault(require("./stickyScrollBar"));
  25. var _useSticky = _interopRequireDefault(require("./hooks/useSticky"));
  26. var _FixedHolder = _interopRequireDefault(require("./FixedHolder"));
  27. var _warning = require("../vc-util/warning");
  28. var _reactivePick = require("../_util/reactivePick");
  29. var _useState7 = _interopRequireDefault(require("../_util/hooks/useState"));
  30. var _util = require("../_util/util");
  31. var _isVisible = _interopRequireDefault(require("../vc-util/Dom/isVisible"));
  32. var _getScrollBarSize = require("../_util/getScrollBarSize");
  33. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  34. var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
  35. var _TableContext = require("./context/TableContext");
  36. var _BodyContext = require("./context/BodyContext");
  37. var _ResizeContext = require("./context/ResizeContext");
  38. var _StickyContext = require("./context/StickyContext");
  39. var _pickAttrs = _interopRequireDefault(require("../_util/pickAttrs"));
  40. var _ExpandedRowContext = require("./context/ExpandedRowContext");
  41. // Used for conditions cache
  42. var EMPTY_DATA = [];
  43. // Used for customize scroll
  44. var EMPTY_SCROLL_TARGET = {};
  45. var INTERNAL_HOOKS = 'rc-table-internal-hook';
  46. exports.INTERNAL_HOOKS = INTERNAL_HOOKS;
  47. var _default2 = (0, _vue.defineComponent)({
  48. name: 'Table',
  49. inheritAttrs: false,
  50. 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'],
  51. slots: ['title', 'footer', 'summary', 'emptyText'],
  52. emits: ['expand', 'expandedRowsChange', 'updateInternalRefs', 'update:expandedRowKeys'],
  53. setup: function setup(props, _ref) {
  54. var attrs = _ref.attrs,
  55. slots = _ref.slots,
  56. emit = _ref.emit;
  57. var mergedData = (0, _vue.computed)(function () {
  58. return props.data || EMPTY_DATA;
  59. });
  60. var hasData = (0, _vue.computed)(function () {
  61. return !!mergedData.value.length;
  62. });
  63. // ==================== Customize =====================
  64. var mergedComponents = (0, _vue.computed)(function () {
  65. return (0, _valueUtil.mergeObject)(props.components, {});
  66. });
  67. var getComponent = function getComponent(path, defaultComponent) {
  68. return (0, _valueUtil.getPathValue)(mergedComponents.value, path) || defaultComponent;
  69. };
  70. var getRowKey = (0, _vue.computed)(function () {
  71. var rowKey = props.rowKey;
  72. if (typeof rowKey === 'function') {
  73. return rowKey;
  74. }
  75. return function (record) {
  76. var key = record && record[rowKey];
  77. if (process.env.NODE_ENV !== 'production') {
  78. (0, _warning.warning)(key !== undefined, 'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.');
  79. }
  80. return key;
  81. };
  82. });
  83. // ====================== Expand ======================
  84. var mergedExpandIcon = (0, _vue.computed)(function () {
  85. return props.expandIcon || _expandUtil.renderExpandIcon;
  86. });
  87. var mergedChildrenColumnName = (0, _vue.computed)(function () {
  88. return props.childrenColumnName || 'children';
  89. });
  90. var expandableType = (0, _vue.computed)(function () {
  91. if (props.expandedRowRender) {
  92. return 'row';
  93. }
  94. /* eslint-disable no-underscore-dangle */
  95. /**
  96. * Fix https://github.com/ant-design/ant-design/issues/21154
  97. * This is a workaround to not to break current behavior.
  98. * We can remove follow code after final release.
  99. *
  100. * To other developer:
  101. * Do not use `__PARENT_RENDER_ICON__` in prod since we will remove this when refactor
  102. */
  103. if (props.canExpandable || mergedData.value.some(function (record) {
  104. return record && (0, _typeof2.default)(record) === 'object' && record[mergedChildrenColumnName.value];
  105. })) {
  106. return 'nest';
  107. }
  108. /* eslint-enable */
  109. return false;
  110. });
  111. var innerExpandedKeys = (0, _vue.shallowRef)([]);
  112. var stop = (0, _vue.watchEffect)(function () {
  113. if (props.defaultExpandedRowKeys) {
  114. innerExpandedKeys.value = props.defaultExpandedRowKeys;
  115. }
  116. if (props.defaultExpandAllRows) {
  117. innerExpandedKeys.value = (0, _expandUtil.findAllChildrenKeys)(mergedData.value, getRowKey.value, mergedChildrenColumnName.value);
  118. }
  119. });
  120. // defalutXxxx 仅仅第一次生效
  121. stop();
  122. var mergedExpandedKeys = (0, _vue.computed)(function () {
  123. return new Set(props.expandedRowKeys || innerExpandedKeys.value || []);
  124. });
  125. var onTriggerExpand = function onTriggerExpand(record) {
  126. var key = getRowKey.value(record, mergedData.value.indexOf(record));
  127. var newExpandedKeys;
  128. var hasKey = mergedExpandedKeys.value.has(key);
  129. if (hasKey) {
  130. mergedExpandedKeys.value.delete(key);
  131. newExpandedKeys = (0, _toConsumableArray2.default)(mergedExpandedKeys.value);
  132. } else {
  133. newExpandedKeys = [].concat((0, _toConsumableArray2.default)(mergedExpandedKeys.value), [key]);
  134. }
  135. innerExpandedKeys.value = newExpandedKeys;
  136. emit('expand', !hasKey, record);
  137. emit('update:expandedRowKeys', newExpandedKeys);
  138. emit('expandedRowsChange', newExpandedKeys);
  139. };
  140. // Warning if use `expandedRowRender` and nest children in the same time
  141. if (process.env.NODE_ENV !== 'production' && props.expandedRowRender && mergedData.value.some(function (record) {
  142. return Array.isArray(record === null || record === void 0 ? void 0 : record[mergedChildrenColumnName.value]);
  143. })) {
  144. (0, _warning.warning)(false, '`expandedRowRender` should not use with nested Table');
  145. }
  146. var componentWidth = (0, _vue.ref)(0);
  147. var _useColumns = (0, _useColumns3.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _vue.toRefs)(props)), {}, {
  148. // children,
  149. expandable: (0, _vue.computed)(function () {
  150. return !!props.expandedRowRender;
  151. }),
  152. expandedKeys: mergedExpandedKeys,
  153. getRowKey: getRowKey,
  154. onTriggerExpand: onTriggerExpand,
  155. expandIcon: mergedExpandIcon
  156. }), (0, _vue.computed)(function () {
  157. return props.internalHooks === INTERNAL_HOOKS ? props.transformColumns : null;
  158. })),
  159. _useColumns2 = (0, _slicedToArray2.default)(_useColumns, 2),
  160. columns = _useColumns2[0],
  161. flattenColumns = _useColumns2[1];
  162. var columnContext = (0, _vue.computed)(function () {
  163. return {
  164. columns: columns.value,
  165. flattenColumns: flattenColumns.value
  166. };
  167. });
  168. // ====================== Scroll ======================
  169. var fullTableRef = (0, _vue.ref)();
  170. var scrollHeaderRef = (0, _vue.ref)();
  171. var scrollBodyRef = (0, _vue.ref)();
  172. var scrollBodySizeInfo = (0, _vue.ref)({
  173. scrollWidth: 0,
  174. clientWidth: 0
  175. });
  176. var scrollSummaryRef = (0, _vue.ref)();
  177. var _useState = (0, _useState7.default)(false),
  178. _useState2 = (0, _slicedToArray2.default)(_useState, 2),
  179. pingedLeft = _useState2[0],
  180. setPingedLeft = _useState2[1];
  181. var _useState3 = (0, _useState7.default)(false),
  182. _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
  183. pingedRight = _useState4[0],
  184. setPingedRight = _useState4[1];
  185. var _useLayoutState = (0, _useFrame.useLayoutState)(new Map()),
  186. _useLayoutState2 = (0, _slicedToArray2.default)(_useLayoutState, 2),
  187. colsWidths = _useLayoutState2[0],
  188. updateColsWidths = _useLayoutState2[1];
  189. // Convert map to number width
  190. var colsKeys = (0, _vue.computed)(function () {
  191. return (0, _valueUtil.getColumnsKey)(flattenColumns.value);
  192. });
  193. var colWidths = (0, _vue.computed)(function () {
  194. return colsKeys.value.map(function (columnKey) {
  195. return colsWidths.value.get(columnKey);
  196. });
  197. });
  198. var columnCount = (0, _vue.computed)(function () {
  199. return flattenColumns.value.length;
  200. });
  201. var stickyOffsets = (0, _useStickyOffsets.default)(colWidths, columnCount, (0, _vue.toRef)(props, 'direction'));
  202. var fixHeader = (0, _vue.computed)(function () {
  203. return props.scroll && (0, _valueUtil.validateValue)(props.scroll.y);
  204. });
  205. var horizonScroll = (0, _vue.computed)(function () {
  206. return props.scroll && (0, _valueUtil.validateValue)(props.scroll.x) || Boolean(props.expandFixed);
  207. });
  208. var fixColumn = (0, _vue.computed)(function () {
  209. return horizonScroll.value && flattenColumns.value.some(function (_ref2) {
  210. var fixed = _ref2.fixed;
  211. return fixed;
  212. });
  213. });
  214. // Sticky
  215. var stickyRef = (0, _vue.ref)();
  216. var stickyState = (0, _useSticky.default)((0, _vue.toRef)(props, 'sticky'), (0, _vue.toRef)(props, 'prefixCls'));
  217. var summaryFixedInfos = (0, _vue.reactive)({});
  218. var fixFooter = (0, _vue.computed)(function () {
  219. var info = Object.values(summaryFixedInfos)[0];
  220. return (fixHeader.value || stickyState.value.isSticky) && info;
  221. });
  222. var summaryCollect = function summaryCollect(uniKey, fixed) {
  223. if (fixed) {
  224. summaryFixedInfos[uniKey] = fixed;
  225. } else {
  226. delete summaryFixedInfos[uniKey];
  227. }
  228. };
  229. // Scroll
  230. var scrollXStyle = (0, _vue.ref)({});
  231. var scrollYStyle = (0, _vue.ref)({});
  232. var scrollTableStyle = (0, _vue.ref)({});
  233. (0, _vue.watchEffect)(function () {
  234. if (fixHeader.value) {
  235. scrollYStyle.value = {
  236. overflowY: 'scroll',
  237. maxHeight: (0, _util.toPx)(props.scroll.y)
  238. };
  239. }
  240. if (horizonScroll.value) {
  241. scrollXStyle.value = {
  242. overflowX: 'auto'
  243. };
  244. // When no vertical scrollbar, should hide it
  245. // https://github.com/ant-design/ant-design/pull/20705
  246. // https://github.com/ant-design/ant-design/issues/21879
  247. if (!fixHeader.value) {
  248. scrollYStyle.value = {
  249. overflowY: 'hidden'
  250. };
  251. }
  252. scrollTableStyle.value = {
  253. width: props.scroll.x === true ? 'auto' : (0, _util.toPx)(props.scroll.x),
  254. minWidth: '100%'
  255. };
  256. }
  257. });
  258. var onColumnResize = function onColumnResize(columnKey, width) {
  259. if ((0, _isVisible.default)(fullTableRef.value)) {
  260. updateColsWidths(function (widths) {
  261. if (widths.get(columnKey) !== width) {
  262. var newWidths = new Map(widths);
  263. newWidths.set(columnKey, width);
  264. return newWidths;
  265. }
  266. return widths;
  267. });
  268. }
  269. };
  270. var _useTimeoutLock = (0, _useFrame.useTimeoutLock)(null),
  271. _useTimeoutLock2 = (0, _slicedToArray2.default)(_useTimeoutLock, 2),
  272. setScrollTarget = _useTimeoutLock2[0],
  273. getScrollTarget = _useTimeoutLock2[1];
  274. function forceScroll(scrollLeft, target) {
  275. if (!target) {
  276. return;
  277. }
  278. if (typeof target === 'function') {
  279. target(scrollLeft);
  280. return;
  281. }
  282. var domTarget = target.$el || target;
  283. if (domTarget.scrollLeft !== scrollLeft) {
  284. // eslint-disable-next-line no-param-reassign
  285. domTarget.scrollLeft = scrollLeft;
  286. }
  287. }
  288. var onScroll = function onScroll(_ref3) {
  289. var currentTarget = _ref3.currentTarget,
  290. scrollLeft = _ref3.scrollLeft;
  291. var isRTL = props.direction === 'rtl';
  292. var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
  293. var compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
  294. if (!getScrollTarget() || getScrollTarget() === compareTarget) {
  295. var _stickyRef$value;
  296. setScrollTarget(compareTarget);
  297. forceScroll(mergedScrollLeft, scrollHeaderRef.value);
  298. forceScroll(mergedScrollLeft, scrollBodyRef.value);
  299. forceScroll(mergedScrollLeft, scrollSummaryRef.value);
  300. forceScroll(mergedScrollLeft, (_stickyRef$value = stickyRef.value) === null || _stickyRef$value === void 0 ? void 0 : _stickyRef$value.setScrollLeft);
  301. }
  302. if (currentTarget) {
  303. var scrollWidth = currentTarget.scrollWidth,
  304. clientWidth = currentTarget.clientWidth;
  305. if (isRTL) {
  306. setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
  307. setPingedRight(-mergedScrollLeft > 0);
  308. } else {
  309. setPingedLeft(mergedScrollLeft > 0);
  310. setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
  311. }
  312. }
  313. };
  314. var triggerOnScroll = function triggerOnScroll() {
  315. if (horizonScroll.value && scrollBodyRef.value) {
  316. onScroll({
  317. currentTarget: scrollBodyRef.value
  318. });
  319. } else {
  320. setPingedLeft(false);
  321. setPingedRight(false);
  322. }
  323. };
  324. var timtout;
  325. var updateWidth = function updateWidth(width) {
  326. if (width !== componentWidth.value) {
  327. triggerOnScroll();
  328. componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width;
  329. }
  330. };
  331. var onFullTableResize = function onFullTableResize(_ref4) {
  332. var width = _ref4.width;
  333. clearTimeout(timtout);
  334. if (componentWidth.value === 0) {
  335. updateWidth(width);
  336. return;
  337. }
  338. timtout = setTimeout(function () {
  339. updateWidth(width);
  340. }, 100);
  341. };
  342. (0, _vue.watch)([horizonScroll, function () {
  343. return props.data;
  344. }, function () {
  345. return props.columns;
  346. }], function () {
  347. if (horizonScroll.value) {
  348. triggerOnScroll();
  349. }
  350. }, {
  351. flush: 'post'
  352. });
  353. var _useState5 = (0, _useState7.default)(0),
  354. _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
  355. scrollbarSize = _useState6[0],
  356. setScrollbarSize = _useState6[1];
  357. (0, _StickyContext.useProvideSticky)();
  358. (0, _vue.onMounted)(function () {
  359. (0, _vue.nextTick)(function () {
  360. var _scrollBodyRef$value, _scrollBodyRef$value2;
  361. triggerOnScroll();
  362. setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyRef.value).width);
  363. scrollBodySizeInfo.value = {
  364. scrollWidth: ((_scrollBodyRef$value = scrollBodyRef.value) === null || _scrollBodyRef$value === void 0 ? void 0 : _scrollBodyRef$value.scrollWidth) || 0,
  365. clientWidth: ((_scrollBodyRef$value2 = scrollBodyRef.value) === null || _scrollBodyRef$value2 === void 0 ? void 0 : _scrollBodyRef$value2.clientWidth) || 0
  366. };
  367. });
  368. });
  369. (0, _vue.onUpdated)(function () {
  370. (0, _vue.nextTick)(function () {
  371. var _scrollBodyRef$value3, _scrollBodyRef$value4;
  372. var scrollWidth = ((_scrollBodyRef$value3 = scrollBodyRef.value) === null || _scrollBodyRef$value3 === void 0 ? void 0 : _scrollBodyRef$value3.scrollWidth) || 0;
  373. var clientWidth = ((_scrollBodyRef$value4 = scrollBodyRef.value) === null || _scrollBodyRef$value4 === void 0 ? void 0 : _scrollBodyRef$value4.clientWidth) || 0;
  374. if (scrollBodySizeInfo.value.scrollWidth !== scrollWidth || scrollBodySizeInfo.value.clientWidth !== clientWidth) {
  375. scrollBodySizeInfo.value = {
  376. scrollWidth: scrollWidth,
  377. clientWidth: clientWidth
  378. };
  379. }
  380. });
  381. });
  382. (0, _vue.watchEffect)(function () {
  383. if (props.internalHooks === INTERNAL_HOOKS && props.internalRefs) {
  384. props.onUpdateInternalRefs({
  385. body: scrollBodyRef.value ? scrollBodyRef.value.$el || scrollBodyRef.value : null
  386. });
  387. }
  388. }, {
  389. flush: 'post'
  390. });
  391. // Table layout
  392. var mergedTableLayout = (0, _vue.computed)(function () {
  393. if (props.tableLayout) {
  394. return props.tableLayout;
  395. }
  396. // https://github.com/ant-design/ant-design/issues/25227
  397. // When scroll.x is max-content, no need to fix table layout
  398. // it's width should stretch out to fit content
  399. if (fixColumn.value) {
  400. return props.scroll.x === 'max-content' ? 'auto' : 'fixed';
  401. }
  402. if (fixHeader.value || stickyState.value.isSticky || flattenColumns.value.some(function (_ref5) {
  403. var ellipsis = _ref5.ellipsis;
  404. return ellipsis;
  405. })) {
  406. return 'fixed';
  407. }
  408. return 'auto';
  409. });
  410. var emptyNode = function emptyNode() {
  411. var _slots$emptyText;
  412. return hasData.value ? null : ((_slots$emptyText = slots.emptyText) === null || _slots$emptyText === void 0 ? void 0 : _slots$emptyText.call(slots)) || 'No Data';
  413. };
  414. (0, _TableContext.useProvideTable)((0, _vue.reactive)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _vue.toRefs)((0, _reactivePick.reactivePick)(props, 'prefixCls', 'direction', 'transformCellText'))), {}, {
  415. getComponent: getComponent,
  416. scrollbarSize: scrollbarSize,
  417. fixedInfoList: (0, _vue.computed)(function () {
  418. return flattenColumns.value.map(function (_, colIndex) {
  419. return (0, _fixUtil.getCellFixedInfo)(colIndex, colIndex, flattenColumns.value, stickyOffsets.value, props.direction);
  420. });
  421. }),
  422. isSticky: (0, _vue.computed)(function () {
  423. return stickyState.value.isSticky;
  424. }),
  425. summaryCollect: summaryCollect
  426. })));
  427. (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'))), {}, {
  428. columns: columns,
  429. flattenColumns: flattenColumns,
  430. tableLayout: mergedTableLayout,
  431. expandIcon: mergedExpandIcon,
  432. expandableType: expandableType,
  433. onTriggerExpand: onTriggerExpand
  434. })));
  435. (0, _ResizeContext.useProvideResize)({
  436. onColumnResize: onColumnResize
  437. });
  438. (0, _ExpandedRowContext.useProvideExpandedRow)({
  439. componentWidth: componentWidth,
  440. fixHeader: fixHeader,
  441. fixColumn: fixColumn,
  442. horizonScroll: horizonScroll
  443. });
  444. // Body
  445. var bodyTable = function bodyTable() {
  446. return (0, _vue.createVNode)(_Body.default, {
  447. "data": mergedData.value,
  448. "measureColumnWidth": fixHeader.value || horizonScroll.value || stickyState.value.isSticky,
  449. "expandedKeys": mergedExpandedKeys.value,
  450. "rowExpandable": props.rowExpandable,
  451. "getRowKey": getRowKey.value,
  452. "customRow": props.customRow,
  453. "childrenColumnName": mergedChildrenColumnName.value
  454. }, {
  455. emptyNode: emptyNode
  456. });
  457. };
  458. var bodyColGroup = function bodyColGroup() {
  459. return (0, _vue.createVNode)(_ColGroup.default, {
  460. "colWidths": flattenColumns.value.map(function (_ref6) {
  461. var width = _ref6.width;
  462. return width;
  463. }),
  464. "columns": flattenColumns.value
  465. }, null);
  466. };
  467. return function () {
  468. var _slots$summary;
  469. var prefixCls = props.prefixCls,
  470. scroll = props.scroll,
  471. tableLayout = props.tableLayout,
  472. direction = props.direction,
  473. _props$title = props.title,
  474. title = _props$title === void 0 ? slots.title : _props$title,
  475. _props$footer = props.footer,
  476. footer = _props$footer === void 0 ? slots.footer : _props$footer,
  477. id = props.id,
  478. showHeader = props.showHeader,
  479. customHeaderRow = props.customHeaderRow;
  480. var _stickyState$value = stickyState.value,
  481. isSticky = _stickyState$value.isSticky,
  482. offsetHeader = _stickyState$value.offsetHeader,
  483. offsetSummary = _stickyState$value.offsetSummary,
  484. offsetScroll = _stickyState$value.offsetScroll,
  485. stickyClassName = _stickyState$value.stickyClassName,
  486. container = _stickyState$value.container;
  487. var TableComponent = getComponent(['table'], 'table');
  488. var customizeScrollBody = getComponent(['body']);
  489. var summaryNode = (_slots$summary = slots.summary) === null || _slots$summary === void 0 ? void 0 : _slots$summary.call(slots, {
  490. pageData: mergedData.value
  491. });
  492. var groupTableNode = function groupTableNode() {
  493. return null;
  494. };
  495. // Header props
  496. var headerProps = {
  497. colWidths: colWidths.value,
  498. columCount: flattenColumns.value.length,
  499. stickyOffsets: stickyOffsets.value,
  500. customHeaderRow: customHeaderRow,
  501. fixHeader: fixHeader.value,
  502. scroll: scroll
  503. };
  504. if (process.env.NODE_ENV !== 'production' && typeof customizeScrollBody === 'function' && hasData.value && !fixHeader.value) {
  505. (0, _warning.warning)(false, '`components.body` with render props is only work on `scroll.y`.');
  506. }
  507. if (fixHeader.value || isSticky) {
  508. // >>>>>> Fixed Header
  509. var bodyContent = function bodyContent() {
  510. return null;
  511. };
  512. if (typeof customizeScrollBody === 'function') {
  513. bodyContent = function bodyContent() {
  514. return customizeScrollBody(mergedData.value, {
  515. scrollbarSize: scrollbarSize.value,
  516. ref: scrollBodyRef,
  517. onScroll: onScroll
  518. });
  519. };
  520. headerProps.colWidths = flattenColumns.value.map(function (_ref7, index) {
  521. var width = _ref7.width;
  522. var colWidth = index === columns.value.length - 1 ? width - scrollbarSize.value : width;
  523. if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
  524. return colWidth;
  525. }
  526. (0, _warning.warning)(false, 'When use `components.body` with render props. Each column should have a fixed `width` value.');
  527. return 0;
  528. });
  529. } else {
  530. bodyContent = function bodyContent() {
  531. return (0, _vue.createVNode)("div", {
  532. "style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollXStyle.value), scrollYStyle.value),
  533. "onScroll": onScroll,
  534. "ref": scrollBodyRef,
  535. "class": (0, _classNames2.default)("".concat(prefixCls, "-body"))
  536. }, [(0, _vue.createVNode)(TableComponent, {
  537. "style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollTableStyle.value), {}, {
  538. tableLayout: mergedTableLayout.value
  539. })
  540. }, {
  541. default: function _default() {
  542. return [bodyColGroup(), bodyTable(), !fixFooter.value && summaryNode && (0, _vue.createVNode)(_Footer.default, {
  543. "stickyOffsets": stickyOffsets.value,
  544. "flattenColumns": flattenColumns.value
  545. }, {
  546. default: function _default() {
  547. return [summaryNode];
  548. }
  549. })];
  550. }
  551. })]);
  552. };
  553. }
  554. // Fixed holder share the props
  555. var fixedHolderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  556. noData: !mergedData.value.length,
  557. maxContentScroll: horizonScroll.value && scroll.x === 'max-content'
  558. }, headerProps), columnContext.value), {}, {
  559. direction: direction,
  560. stickyClassName: stickyClassName,
  561. onScroll: onScroll
  562. });
  563. groupTableNode = function groupTableNode() {
  564. return (0, _vue.createVNode)(_vue.Fragment, null, [showHeader !== false && (0, _vue.createVNode)(_FixedHolder.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fixedHolderProps), {}, {
  565. "stickyTopOffset": offsetHeader,
  566. "class": "".concat(prefixCls, "-header"),
  567. "ref": scrollHeaderRef
  568. }), {
  569. default: function _default(fixedHolderPassProps) {
  570. return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_Header.default, fixedHolderPassProps, null), fixFooter.value === 'top' && (0, _vue.createVNode)(_Footer.default, fixedHolderPassProps, {
  571. default: function _default() {
  572. return [summaryNode];
  573. }
  574. })]);
  575. }
  576. }), bodyContent(), fixFooter.value && fixFooter.value !== 'top' && (0, _vue.createVNode)(_FixedHolder.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fixedHolderProps), {}, {
  577. "stickyBottomOffset": offsetSummary,
  578. "class": "".concat(prefixCls, "-summary"),
  579. "ref": scrollSummaryRef
  580. }), {
  581. default: function _default(fixedHolderPassProps) {
  582. return (0, _vue.createVNode)(_Footer.default, fixedHolderPassProps, {
  583. default: function _default() {
  584. return [summaryNode];
  585. }
  586. });
  587. }
  588. }), isSticky && scrollBodyRef.value && (0, _vue.createVNode)(_stickyScrollBar.default, {
  589. "ref": stickyRef,
  590. "offsetScroll": offsetScroll,
  591. "scrollBodyRef": scrollBodyRef,
  592. "onScroll": onScroll,
  593. "container": container,
  594. "scrollBodySizeInfo": scrollBodySizeInfo.value
  595. }, null)]);
  596. };
  597. } else {
  598. // >>>>>> Unique table
  599. groupTableNode = function groupTableNode() {
  600. return (0, _vue.createVNode)("div", {
  601. "style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollXStyle.value), scrollYStyle.value),
  602. "class": (0, _classNames2.default)("".concat(prefixCls, "-content")),
  603. "onScroll": onScroll,
  604. "ref": scrollBodyRef
  605. }, [(0, _vue.createVNode)(TableComponent, {
  606. "style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollTableStyle.value), {}, {
  607. tableLayout: mergedTableLayout.value
  608. })
  609. }, {
  610. default: function _default() {
  611. 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, {
  612. "stickyOffsets": stickyOffsets.value,
  613. "flattenColumns": flattenColumns.value
  614. }, {
  615. default: function _default() {
  616. return [summaryNode];
  617. }
  618. })];
  619. }
  620. })]);
  621. };
  622. }
  623. var ariaProps = (0, _pickAttrs.default)(attrs, {
  624. aria: true,
  625. data: true
  626. });
  627. var fullTable = function fullTable() {
  628. var _classNames;
  629. return (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ariaProps), {}, {
  630. "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), _classNames)),
  631. "style": attrs.style,
  632. "id": id,
  633. "ref": fullTableRef
  634. }), [title && (0, _vue.createVNode)(_Panel.default, {
  635. "class": "".concat(prefixCls, "-title")
  636. }, {
  637. default: function _default() {
  638. return [title(mergedData.value)];
  639. }
  640. }), (0, _vue.createVNode)("div", {
  641. "class": "".concat(prefixCls, "-container")
  642. }, [groupTableNode()]), footer && (0, _vue.createVNode)(_Panel.default, {
  643. "class": "".concat(prefixCls, "-footer")
  644. }, {
  645. default: function _default() {
  646. return [footer(mergedData.value)];
  647. }
  648. })]);
  649. };
  650. if (horizonScroll.value) {
  651. return (0, _vue.createVNode)(_vcResizeObserver.default, {
  652. "onResize": onFullTableResize
  653. }, {
  654. default: fullTable
  655. });
  656. }
  657. return fullTable();
  658. };
  659. }
  660. });
  661. exports.default = _default2;