1d1cdb52975a2206b0b08411269bf40231da79fd0f3947d3e76ead262bcb79b8c867e30d810f978dddbe58baec69d9b90bee31df97b531126c99ec3a7b79ab 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var lodashUnified = require('lodash-unified');
  5. var util = require('./util.js');
  6. var shared = require('@vue/shared');
  7. var core = require('@vueuse/core');
  8. var types = require('../../../utils/types.js');
  9. class TableLayout {
  10. constructor(options) {
  11. this.observers = [];
  12. this.table = null;
  13. this.store = null;
  14. this.columns = [];
  15. this.fit = true;
  16. this.showHeader = true;
  17. this.height = vue.ref(null);
  18. this.scrollX = vue.ref(false);
  19. this.scrollY = vue.ref(false);
  20. this.bodyWidth = vue.ref(null);
  21. this.fixedWidth = vue.ref(null);
  22. this.rightFixedWidth = vue.ref(null);
  23. this.gutterWidth = 0;
  24. for (const name in options) {
  25. if (shared.hasOwn(options, name)) {
  26. if (vue.isRef(this[name])) {
  27. this[name].value = options[name];
  28. } else {
  29. this[name] = options[name];
  30. }
  31. }
  32. }
  33. if (!this.table) {
  34. throw new Error("Table is required for Table Layout");
  35. }
  36. if (!this.store) {
  37. throw new Error("Store is required for Table Layout");
  38. }
  39. }
  40. updateScrollY() {
  41. const height = this.height.value;
  42. if (lodashUnified.isNull(height))
  43. return false;
  44. const scrollBarRef = this.table.refs.scrollBarRef;
  45. if (this.table.vnode.el && (scrollBarRef == null ? void 0 : scrollBarRef.wrapRef)) {
  46. let scrollY = true;
  47. const prevScrollY = this.scrollY.value;
  48. scrollY = scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.clientHeight;
  49. this.scrollY.value = scrollY;
  50. return prevScrollY !== scrollY;
  51. }
  52. return false;
  53. }
  54. setHeight(value, prop = "height") {
  55. if (!core.isClient)
  56. return;
  57. const el = this.table.vnode.el;
  58. value = util.parseHeight(value);
  59. this.height.value = Number(value);
  60. if (!el && (value || value === 0)) {
  61. vue.nextTick(() => this.setHeight(value, prop));
  62. return;
  63. }
  64. if (el && types.isNumber(value)) {
  65. el.style[prop] = `${value}px`;
  66. this.updateElsHeight();
  67. } else if (el && shared.isString(value)) {
  68. el.style[prop] = value;
  69. this.updateElsHeight();
  70. }
  71. }
  72. setMaxHeight(value) {
  73. this.setHeight(value, "max-height");
  74. }
  75. getFlattenColumns() {
  76. const flattenColumns = [];
  77. const columns = this.table.store.states.columns.value;
  78. columns.forEach((column) => {
  79. if (column.isColumnGroup) {
  80. flattenColumns.push.apply(flattenColumns, column.columns);
  81. } else {
  82. flattenColumns.push(column);
  83. }
  84. });
  85. return flattenColumns;
  86. }
  87. updateElsHeight() {
  88. this.updateScrollY();
  89. this.notifyObservers("scrollable");
  90. }
  91. headerDisplayNone(elm) {
  92. if (!elm)
  93. return true;
  94. let headerChild = elm;
  95. while (headerChild.tagName !== "DIV") {
  96. if (getComputedStyle(headerChild).display === "none") {
  97. return true;
  98. }
  99. headerChild = headerChild.parentElement;
  100. }
  101. return false;
  102. }
  103. updateColumnsWidth() {
  104. var _a;
  105. if (!core.isClient)
  106. return;
  107. const fit = this.fit;
  108. const bodyWidth = (_a = this.table.vnode.el) == null ? void 0 : _a.clientWidth;
  109. let bodyMinWidth = 0;
  110. const flattenColumns = this.getFlattenColumns();
  111. const flexColumns = flattenColumns.filter((column) => !types.isNumber(column.width));
  112. flattenColumns.forEach((column) => {
  113. if (types.isNumber(column.width) && column.realWidth)
  114. column.realWidth = null;
  115. });
  116. if (flexColumns.length > 0 && fit) {
  117. flattenColumns.forEach((column) => {
  118. bodyMinWidth += Number(column.width || column.minWidth || 80);
  119. });
  120. if (bodyMinWidth <= bodyWidth) {
  121. this.scrollX.value = false;
  122. const totalFlexWidth = bodyWidth - bodyMinWidth;
  123. if (flexColumns.length === 1) {
  124. flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
  125. } else {
  126. const allColumnsWidth = flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0);
  127. const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
  128. let noneFirstWidth = 0;
  129. flexColumns.forEach((column, index) => {
  130. if (index === 0)
  131. return;
  132. const flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel);
  133. noneFirstWidth += flexWidth;
  134. column.realWidth = Number(column.minWidth || 80) + flexWidth;
  135. });
  136. flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
  137. }
  138. } else {
  139. this.scrollX.value = true;
  140. flexColumns.forEach((column) => {
  141. column.realWidth = Number(column.minWidth);
  142. });
  143. }
  144. this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
  145. this.table.state.resizeState.value.width = this.bodyWidth.value;
  146. } else {
  147. flattenColumns.forEach((column) => {
  148. if (!column.width && !column.minWidth) {
  149. column.realWidth = 80;
  150. } else {
  151. column.realWidth = Number(column.width || column.minWidth);
  152. }
  153. bodyMinWidth += column.realWidth;
  154. });
  155. this.scrollX.value = bodyMinWidth > bodyWidth;
  156. this.bodyWidth.value = bodyMinWidth;
  157. }
  158. const fixedColumns = this.store.states.fixedColumns.value;
  159. if (fixedColumns.length > 0) {
  160. let fixedWidth = 0;
  161. fixedColumns.forEach((column) => {
  162. fixedWidth += Number(column.realWidth || column.width);
  163. });
  164. this.fixedWidth.value = fixedWidth;
  165. }
  166. const rightFixedColumns = this.store.states.rightFixedColumns.value;
  167. if (rightFixedColumns.length > 0) {
  168. let rightFixedWidth = 0;
  169. rightFixedColumns.forEach((column) => {
  170. rightFixedWidth += Number(column.realWidth || column.width);
  171. });
  172. this.rightFixedWidth.value = rightFixedWidth;
  173. }
  174. this.notifyObservers("columns");
  175. }
  176. addObserver(observer) {
  177. this.observers.push(observer);
  178. }
  179. removeObserver(observer) {
  180. const index = this.observers.indexOf(observer);
  181. if (index !== -1) {
  182. this.observers.splice(index, 1);
  183. }
  184. }
  185. notifyObservers(event) {
  186. const observers = this.observers;
  187. observers.forEach((observer) => {
  188. var _a, _b;
  189. switch (event) {
  190. case "columns":
  191. (_a = observer.state) == null ? void 0 : _a.onColumnsChange(this);
  192. break;
  193. case "scrollable":
  194. (_b = observer.state) == null ? void 0 : _b.onScrollableChange(this);
  195. break;
  196. default:
  197. throw new Error(`Table Layout don't have event ${event}.`);
  198. }
  199. });
  200. }
  201. }
  202. exports["default"] = TableLayout;
  203. //# sourceMappingURL=table-layout.js.map