f5c6fa7fe9a88f3f92860ce6193eaa1112ceea28abcaeca2281447536f3dfa0dc547fe5a8199c9c0a9986e396c92995aebaf4e6550e81c03ca764e5dd57813 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var useTable = require('./use-table.js');
  5. var tokens = require('./tokens.js');
  6. var table = require('./table.js');
  7. var mainTable = require('./renderers/main-table.js');
  8. var leftTable = require('./renderers/left-table.js');
  9. var rightTable = require('./renderers/right-table.js');
  10. var row = require('./renderers/row.js');
  11. var cell = require('./renderers/cell.js');
  12. var header = require('./renderers/header.js');
  13. var headerCell = require('./renderers/header-cell.js');
  14. var footer = require('./renderers/footer.js');
  15. var empty = require('./renderers/empty.js');
  16. var overlay = require('./renderers/overlay.js');
  17. var index = require('../../../hooks/use-namespace/index.js');
  18. function _isSlot(s) {
  19. return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
  20. }
  21. const COMPONENT_NAME = "ElTableV2";
  22. const TableV2 = vue.defineComponent({
  23. name: COMPONENT_NAME,
  24. props: table.tableV2Props,
  25. setup(props, {
  26. slots,
  27. expose
  28. }) {
  29. const ns = index.useNamespace("table-v2");
  30. const {
  31. columnsStyles,
  32. fixedColumnsOnLeft,
  33. fixedColumnsOnRight,
  34. mainColumns,
  35. mainTableHeight,
  36. fixedTableHeight,
  37. leftTableWidth,
  38. rightTableWidth,
  39. data,
  40. depthMap,
  41. expandedRowKeys,
  42. hasFixedColumns,
  43. mainTableRef,
  44. leftTableRef,
  45. rightTableRef,
  46. isDynamic,
  47. isResetting,
  48. isScrolling,
  49. bodyWidth,
  50. emptyStyle,
  51. rootStyle,
  52. footerHeight,
  53. showEmpty,
  54. scrollTo,
  55. scrollToLeft,
  56. scrollToTop,
  57. scrollToRow,
  58. getRowHeight,
  59. onColumnSorted,
  60. onRowHeightChange,
  61. onRowHovered,
  62. onRowExpanded,
  63. onRowsRendered,
  64. onScroll,
  65. onVerticalScroll
  66. } = useTable.useTable(props);
  67. expose({
  68. scrollTo,
  69. scrollToLeft,
  70. scrollToTop,
  71. scrollToRow
  72. });
  73. vue.provide(tokens.TableV2InjectionKey, {
  74. ns,
  75. isResetting,
  76. isScrolling
  77. });
  78. return () => {
  79. const {
  80. cache,
  81. cellProps,
  82. estimatedRowHeight,
  83. expandColumnKey,
  84. fixedData,
  85. headerHeight,
  86. headerClass,
  87. headerProps,
  88. headerCellProps,
  89. sortBy,
  90. sortState,
  91. rowHeight,
  92. rowClass,
  93. rowEventHandlers,
  94. rowKey,
  95. rowProps,
  96. scrollbarAlwaysOn,
  97. indentSize,
  98. iconSize,
  99. useIsScrolling,
  100. vScrollbarSize,
  101. width
  102. } = props;
  103. const _data = vue.unref(data);
  104. const mainTableProps = {
  105. cache,
  106. class: ns.e("main"),
  107. columns: vue.unref(mainColumns),
  108. data: _data,
  109. fixedData,
  110. estimatedRowHeight,
  111. bodyWidth: vue.unref(bodyWidth),
  112. headerHeight,
  113. headerWidth: vue.unref(bodyWidth),
  114. height: vue.unref(mainTableHeight),
  115. mainTableRef,
  116. rowKey,
  117. rowHeight,
  118. scrollbarAlwaysOn,
  119. scrollbarStartGap: 2,
  120. scrollbarEndGap: vScrollbarSize,
  121. useIsScrolling,
  122. width,
  123. getRowHeight,
  124. onRowsRendered,
  125. onScroll
  126. };
  127. const leftColumnsWidth = vue.unref(leftTableWidth);
  128. const _fixedTableHeight = vue.unref(fixedTableHeight);
  129. const leftTableProps = {
  130. cache,
  131. class: ns.e("left"),
  132. columns: vue.unref(fixedColumnsOnLeft),
  133. data: _data,
  134. fixedData,
  135. estimatedRowHeight,
  136. leftTableRef,
  137. rowHeight,
  138. bodyWidth: leftColumnsWidth,
  139. headerWidth: leftColumnsWidth,
  140. headerHeight,
  141. height: _fixedTableHeight,
  142. rowKey,
  143. scrollbarAlwaysOn,
  144. scrollbarStartGap: 2,
  145. scrollbarEndGap: vScrollbarSize,
  146. useIsScrolling,
  147. width: leftColumnsWidth,
  148. getRowHeight,
  149. onScroll: onVerticalScroll
  150. };
  151. const rightColumnsWidth = vue.unref(rightTableWidth);
  152. const rightTableProps = {
  153. cache,
  154. class: ns.e("right"),
  155. columns: vue.unref(fixedColumnsOnRight),
  156. data: _data,
  157. fixedData,
  158. estimatedRowHeight,
  159. rightTableRef,
  160. rowHeight,
  161. bodyWidth: rightColumnsWidth,
  162. headerWidth: rightColumnsWidth,
  163. headerHeight,
  164. height: _fixedTableHeight,
  165. rowKey,
  166. scrollbarAlwaysOn,
  167. scrollbarStartGap: 2,
  168. scrollbarEndGap: vScrollbarSize,
  169. width: rightColumnsWidth,
  170. style: `--${vue.unref(ns.namespace)}-table-scrollbar-size: ${vScrollbarSize}px`,
  171. useIsScrolling,
  172. getRowHeight,
  173. onScroll: onVerticalScroll
  174. };
  175. const _columnsStyles = vue.unref(columnsStyles);
  176. const tableRowProps = {
  177. ns,
  178. depthMap: vue.unref(depthMap),
  179. columnsStyles: _columnsStyles,
  180. expandColumnKey,
  181. expandedRowKeys: vue.unref(expandedRowKeys),
  182. estimatedRowHeight,
  183. hasFixedColumns: vue.unref(hasFixedColumns),
  184. rowProps,
  185. rowClass,
  186. rowKey,
  187. rowEventHandlers,
  188. onRowHovered,
  189. onRowExpanded,
  190. onRowHeightChange
  191. };
  192. const tableCellProps = {
  193. cellProps,
  194. expandColumnKey,
  195. indentSize,
  196. iconSize,
  197. rowKey,
  198. expandedRowKeys: vue.unref(expandedRowKeys),
  199. ns
  200. };
  201. const tableHeaderProps = {
  202. ns,
  203. headerClass,
  204. headerProps,
  205. columnsStyles: _columnsStyles
  206. };
  207. const tableHeaderCellProps = {
  208. ns,
  209. sortBy,
  210. sortState,
  211. headerCellProps,
  212. onColumnSorted
  213. };
  214. const tableSlots = {
  215. row: (props2) => vue.createVNode(row["default"], vue.mergeProps(props2, tableRowProps), {
  216. row: slots.row,
  217. cell: (props3) => {
  218. let _slot;
  219. return slots.cell ? vue.createVNode(cell["default"], vue.mergeProps(props3, tableCellProps, {
  220. "style": _columnsStyles[props3.column.key]
  221. }), _isSlot(_slot = slots.cell(props3)) ? _slot : {
  222. default: () => [_slot]
  223. }) : vue.createVNode(cell["default"], vue.mergeProps(props3, tableCellProps, {
  224. "style": _columnsStyles[props3.column.key]
  225. }), null);
  226. }
  227. }),
  228. header: (props2) => vue.createVNode(header["default"], vue.mergeProps(props2, tableHeaderProps), {
  229. header: slots.header,
  230. cell: (props3) => {
  231. let _slot2;
  232. return slots["header-cell"] ? vue.createVNode(headerCell["default"], vue.mergeProps(props3, tableHeaderCellProps, {
  233. "style": _columnsStyles[props3.column.key]
  234. }), _isSlot(_slot2 = slots["header-cell"](props3)) ? _slot2 : {
  235. default: () => [_slot2]
  236. }) : vue.createVNode(headerCell["default"], vue.mergeProps(props3, tableHeaderCellProps, {
  237. "style": _columnsStyles[props3.column.key]
  238. }), null);
  239. }
  240. })
  241. };
  242. const rootKls = [props.class, ns.b(), ns.e("root"), {
  243. [ns.is("dynamic")]: vue.unref(isDynamic)
  244. }];
  245. const footerProps = {
  246. class: ns.e("footer"),
  247. style: vue.unref(footerHeight)
  248. };
  249. return vue.createVNode("div", {
  250. "class": rootKls,
  251. "style": vue.unref(rootStyle)
  252. }, [vue.createVNode(mainTable["default"], mainTableProps, _isSlot(tableSlots) ? tableSlots : {
  253. default: () => [tableSlots]
  254. }), vue.createVNode(leftTable["default"], leftTableProps, _isSlot(tableSlots) ? tableSlots : {
  255. default: () => [tableSlots]
  256. }), vue.createVNode(rightTable["default"], rightTableProps, _isSlot(tableSlots) ? tableSlots : {
  257. default: () => [tableSlots]
  258. }), slots.footer && vue.createVNode(footer["default"], footerProps, {
  259. default: slots.footer
  260. }), vue.unref(showEmpty) && vue.createVNode(empty["default"], {
  261. "class": ns.e("empty"),
  262. "style": vue.unref(emptyStyle)
  263. }, {
  264. default: slots.empty
  265. }), slots.overlay && vue.createVNode(overlay["default"], {
  266. "class": ns.e("overlay")
  267. }, {
  268. default: slots.overlay
  269. })]);
  270. };
  271. }
  272. });
  273. var TableV2$1 = TableV2;
  274. exports["default"] = TableV2$1;
  275. //# sourceMappingURL=table-v2.js.map