cc080c4def7e982c3bd0e5b023d40a4244ffd4740358b9158f253314e5535475e5818282929cd0b3856b5a6f343fd8beac30b555623ef126ce1cec9517fc93 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import { ref, toRef, getCurrentInstance, shallowRef, computed, unref, watch } from 'vue';
  2. import { useColumns } from './composables/use-columns.mjs';
  3. import { useScrollbar } from './composables/use-scrollbar.mjs';
  4. import { useRow } from './composables/use-row.mjs';
  5. import { useData } from './composables/use-data.mjs';
  6. import { useStyles } from './composables/use-styles.mjs';
  7. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  8. import { isNumber } from '../../../utils/types.mjs';
  9. import { isArray } from '@vue/shared';
  10. function useTable(props) {
  11. const mainTableRef = ref();
  12. const leftTableRef = ref();
  13. const rightTableRef = ref();
  14. const {
  15. columns,
  16. columnsStyles,
  17. columnsTotalWidth,
  18. fixedColumnsOnLeft,
  19. fixedColumnsOnRight,
  20. hasFixedColumns,
  21. mainColumns,
  22. onColumnSorted
  23. } = useColumns(props, toRef(props, "columns"), toRef(props, "fixed"));
  24. const {
  25. scrollTo,
  26. scrollToLeft,
  27. scrollToTop,
  28. scrollToRow,
  29. onScroll,
  30. onVerticalScroll,
  31. scrollPos
  32. } = useScrollbar(props, {
  33. mainTableRef,
  34. leftTableRef,
  35. rightTableRef,
  36. onMaybeEndReached
  37. });
  38. const ns = useNamespace("table-v2");
  39. const instance = getCurrentInstance();
  40. const isScrolling = shallowRef(false);
  41. const {
  42. expandedRowKeys,
  43. lastRenderedRowIndex,
  44. isDynamic,
  45. isResetting,
  46. rowHeights,
  47. resetAfterIndex,
  48. onRowExpanded,
  49. onRowHeightChange,
  50. onRowHovered,
  51. onRowsRendered
  52. } = useRow(props, {
  53. mainTableRef,
  54. leftTableRef,
  55. rightTableRef,
  56. tableInstance: instance,
  57. ns,
  58. isScrolling
  59. });
  60. const { data, depthMap } = useData(props, {
  61. expandedRowKeys,
  62. lastRenderedRowIndex,
  63. resetAfterIndex
  64. });
  65. const rowsHeight = computed(() => {
  66. const { estimatedRowHeight, rowHeight } = props;
  67. const _data = unref(data);
  68. if (isNumber(estimatedRowHeight)) {
  69. return Object.values(unref(rowHeights)).reduce((acc, curr) => acc + curr, 0);
  70. }
  71. return _data.length * rowHeight;
  72. });
  73. const {
  74. bodyWidth,
  75. fixedTableHeight,
  76. mainTableHeight,
  77. leftTableWidth,
  78. rightTableWidth,
  79. windowHeight,
  80. footerHeight,
  81. emptyStyle,
  82. rootStyle,
  83. headerHeight
  84. } = useStyles(props, {
  85. columnsTotalWidth,
  86. fixedColumnsOnLeft,
  87. fixedColumnsOnRight,
  88. rowsHeight
  89. });
  90. const containerRef = ref();
  91. const showEmpty = computed(() => {
  92. const noData = unref(data).length === 0;
  93. return isArray(props.fixedData) ? props.fixedData.length === 0 && noData : noData;
  94. });
  95. function getRowHeight(rowIndex) {
  96. const { estimatedRowHeight, rowHeight, rowKey } = props;
  97. if (!estimatedRowHeight)
  98. return rowHeight;
  99. return unref(rowHeights)[unref(data)[rowIndex][rowKey]] || estimatedRowHeight;
  100. }
  101. const isEndReached = ref(false);
  102. function onMaybeEndReached() {
  103. const { onEndReached } = props;
  104. if (!onEndReached)
  105. return;
  106. const { scrollTop } = unref(scrollPos);
  107. const _totalHeight = unref(rowsHeight);
  108. const clientHeight = unref(windowHeight);
  109. const remainDistance = _totalHeight - (scrollTop + clientHeight) + props.hScrollbarSize;
  110. if (!isEndReached.value && unref(lastRenderedRowIndex) >= 0 && _totalHeight <= scrollTop + unref(mainTableHeight) - unref(headerHeight)) {
  111. isEndReached.value = true;
  112. onEndReached(remainDistance);
  113. } else {
  114. isEndReached.value = false;
  115. }
  116. }
  117. watch(() => unref(rowsHeight), () => isEndReached.value = false);
  118. watch(() => props.expandedRowKeys, (val) => expandedRowKeys.value = val, {
  119. deep: true
  120. });
  121. return {
  122. columns,
  123. containerRef,
  124. mainTableRef,
  125. leftTableRef,
  126. rightTableRef,
  127. isDynamic,
  128. isResetting,
  129. isScrolling,
  130. hasFixedColumns,
  131. columnsStyles,
  132. columnsTotalWidth,
  133. data,
  134. expandedRowKeys,
  135. depthMap,
  136. fixedColumnsOnLeft,
  137. fixedColumnsOnRight,
  138. mainColumns,
  139. bodyWidth,
  140. emptyStyle,
  141. rootStyle,
  142. footerHeight,
  143. mainTableHeight,
  144. fixedTableHeight,
  145. leftTableWidth,
  146. rightTableWidth,
  147. showEmpty,
  148. getRowHeight,
  149. onColumnSorted,
  150. onRowHovered,
  151. onRowExpanded,
  152. onRowsRendered,
  153. onRowHeightChange,
  154. scrollTo,
  155. scrollToLeft,
  156. scrollToTop,
  157. scrollToRow,
  158. onScroll,
  159. onVerticalScroll
  160. };
  161. }
  162. export { useTable };
  163. //# sourceMappingURL=use-table.mjs.map