table-v2.js 8.3 KB

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