852417bd9bbe639df8d5614641f365e4cc3c9ac5d5c9d2cc4ccd70e54495d7755011c9fc3348b2c13cc2e3355f6316d61aa6fa549af861c7e28d77313c3d45 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var useFormCommonProps = require('../../../form/src/hooks/use-form-common-props.js');
  6. function useStyle(props, layout, store, table) {
  7. const isHidden = vue.ref(false);
  8. const renderExpanded = vue.ref(null);
  9. const resizeProxyVisible = vue.ref(false);
  10. const setDragVisible = (visible) => {
  11. resizeProxyVisible.value = visible;
  12. };
  13. const resizeState = vue.ref({
  14. width: null,
  15. height: null,
  16. headerHeight: null
  17. });
  18. const isGroup = vue.ref(false);
  19. const scrollbarViewStyle = {
  20. display: "inline-block",
  21. verticalAlign: "middle"
  22. };
  23. const tableWidth = vue.ref();
  24. const tableScrollHeight = vue.ref(0);
  25. const bodyScrollHeight = vue.ref(0);
  26. const headerScrollHeight = vue.ref(0);
  27. const footerScrollHeight = vue.ref(0);
  28. const appendScrollHeight = vue.ref(0);
  29. vue.watchEffect(() => {
  30. var _a;
  31. layout.setHeight((_a = props.height) != null ? _a : null);
  32. });
  33. vue.watchEffect(() => {
  34. var _a;
  35. layout.setMaxHeight((_a = props.maxHeight) != null ? _a : null);
  36. });
  37. vue.watch(() => [props.currentRowKey, store.states.rowKey], ([currentRowKey, rowKey]) => {
  38. if (!vue.unref(rowKey) || !vue.unref(currentRowKey))
  39. return;
  40. store.setCurrentRowKey(`${currentRowKey}`);
  41. }, {
  42. immediate: true
  43. });
  44. vue.watch(() => props.data, (data) => {
  45. table.store.commit("setData", data);
  46. }, {
  47. immediate: true,
  48. deep: true
  49. });
  50. vue.watchEffect(() => {
  51. if (props.expandRowKeys) {
  52. store.setExpandRowKeysAdapter(props.expandRowKeys);
  53. }
  54. });
  55. const handleMouseLeave = () => {
  56. table.store.commit("setHoverRow", null);
  57. if (table.hoverState)
  58. table.hoverState = null;
  59. };
  60. const handleHeaderFooterMousewheel = (_event, data) => {
  61. const { pixelX, pixelY } = data;
  62. if (Math.abs(pixelX) >= Math.abs(pixelY)) {
  63. table.refs.bodyWrapper.scrollLeft += data.pixelX / 5;
  64. }
  65. };
  66. const shouldUpdateHeight = vue.computed(() => {
  67. return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0;
  68. });
  69. const tableBodyStyles = vue.computed(() => {
  70. return {
  71. width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : ""
  72. };
  73. });
  74. const doLayout = () => {
  75. if (shouldUpdateHeight.value) {
  76. layout.updateElsHeight();
  77. }
  78. layout.updateColumnsWidth();
  79. if (typeof window === "undefined")
  80. return;
  81. requestAnimationFrame(syncPosition);
  82. };
  83. vue.onMounted(async () => {
  84. await vue.nextTick();
  85. store.updateColumns();
  86. bindEvents();
  87. requestAnimationFrame(doLayout);
  88. const el = table.vnode.el;
  89. const tableHeader = table.refs.headerWrapper;
  90. if (props.flexible && el && el.parentElement) {
  91. el.parentElement.style.minWidth = "0";
  92. }
  93. resizeState.value = {
  94. width: tableWidth.value = el.offsetWidth,
  95. height: el.offsetHeight,
  96. headerHeight: props.showHeader && tableHeader ? tableHeader.offsetHeight : null
  97. };
  98. store.states.columns.value.forEach((column) => {
  99. if (column.filteredValue && column.filteredValue.length) {
  100. table.store.commit("filterChange", {
  101. column,
  102. values: column.filteredValue,
  103. silent: true
  104. });
  105. }
  106. });
  107. table.$ready = true;
  108. });
  109. const setScrollClassByEl = (el, className) => {
  110. if (!el)
  111. return;
  112. const classList = Array.from(el.classList).filter((item) => !item.startsWith("is-scrolling-"));
  113. classList.push(layout.scrollX.value ? className : "is-scrolling-none");
  114. el.className = classList.join(" ");
  115. };
  116. const setScrollClass = (className) => {
  117. const { tableWrapper } = table.refs;
  118. setScrollClassByEl(tableWrapper, className);
  119. };
  120. const hasScrollClass = (className) => {
  121. const { tableWrapper } = table.refs;
  122. return !!(tableWrapper && tableWrapper.classList.contains(className));
  123. };
  124. const syncPosition = function() {
  125. if (!table.refs.scrollBarRef)
  126. return;
  127. if (!layout.scrollX.value) {
  128. const scrollingNoneClass = "is-scrolling-none";
  129. if (!hasScrollClass(scrollingNoneClass)) {
  130. setScrollClass(scrollingNoneClass);
  131. }
  132. return;
  133. }
  134. const scrollContainer = table.refs.scrollBarRef.wrapRef;
  135. if (!scrollContainer)
  136. return;
  137. const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer;
  138. const { headerWrapper, footerWrapper } = table.refs;
  139. if (headerWrapper)
  140. headerWrapper.scrollLeft = scrollLeft;
  141. if (footerWrapper)
  142. footerWrapper.scrollLeft = scrollLeft;
  143. const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
  144. if (scrollLeft >= maxScrollLeftPosition) {
  145. setScrollClass("is-scrolling-right");
  146. } else if (scrollLeft === 0) {
  147. setScrollClass("is-scrolling-left");
  148. } else {
  149. setScrollClass("is-scrolling-middle");
  150. }
  151. };
  152. const bindEvents = () => {
  153. if (!table.refs.scrollBarRef)
  154. return;
  155. if (table.refs.scrollBarRef.wrapRef) {
  156. core.useEventListener(table.refs.scrollBarRef.wrapRef, "scroll", syncPosition, {
  157. passive: true
  158. });
  159. }
  160. if (props.fit) {
  161. core.useResizeObserver(table.vnode.el, resizeListener);
  162. } else {
  163. core.useEventListener(window, "resize", resizeListener);
  164. }
  165. core.useResizeObserver(table.refs.bodyWrapper, () => {
  166. var _a, _b;
  167. resizeListener();
  168. (_b = (_a = table.refs) == null ? void 0 : _a.scrollBarRef) == null ? void 0 : _b.update();
  169. });
  170. };
  171. const resizeListener = () => {
  172. var _a, _b, _c, _d;
  173. const el = table.vnode.el;
  174. if (!table.$ready || !el)
  175. return;
  176. let shouldUpdateLayout = false;
  177. const {
  178. width: oldWidth,
  179. height: oldHeight,
  180. headerHeight: oldHeaderHeight
  181. } = resizeState.value;
  182. const width = tableWidth.value = el.offsetWidth;
  183. if (oldWidth !== width) {
  184. shouldUpdateLayout = true;
  185. }
  186. const height = el.offsetHeight;
  187. if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
  188. shouldUpdateLayout = true;
  189. }
  190. const tableHeader = props.tableLayout === "fixed" ? table.refs.headerWrapper : (_a = table.refs.tableHeaderRef) == null ? void 0 : _a.$el;
  191. if (props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) !== oldHeaderHeight) {
  192. shouldUpdateLayout = true;
  193. }
  194. tableScrollHeight.value = ((_b = table.refs.tableWrapper) == null ? void 0 : _b.scrollHeight) || 0;
  195. headerScrollHeight.value = (tableHeader == null ? void 0 : tableHeader.scrollHeight) || 0;
  196. footerScrollHeight.value = ((_c = table.refs.footerWrapper) == null ? void 0 : _c.offsetHeight) || 0;
  197. appendScrollHeight.value = ((_d = table.refs.appendWrapper) == null ? void 0 : _d.offsetHeight) || 0;
  198. bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value - appendScrollHeight.value;
  199. if (shouldUpdateLayout) {
  200. resizeState.value = {
  201. width,
  202. height,
  203. headerHeight: props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) || 0
  204. };
  205. doLayout();
  206. }
  207. };
  208. const tableSize = useFormCommonProps.useFormSize();
  209. const bodyWidth = vue.computed(() => {
  210. const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
  211. return bodyWidth_.value ? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px` : "";
  212. });
  213. const tableLayout = vue.computed(() => {
  214. if (props.maxHeight)
  215. return "fixed";
  216. return props.tableLayout;
  217. });
  218. const emptyBlockStyle = vue.computed(() => {
  219. if (props.data && props.data.length)
  220. return;
  221. let height = "100%";
  222. if (props.height && bodyScrollHeight.value) {
  223. height = `${bodyScrollHeight.value}px`;
  224. }
  225. const width = tableWidth.value;
  226. return {
  227. width: width ? `${width}px` : "",
  228. height
  229. };
  230. });
  231. const scrollbarStyle = vue.computed(() => {
  232. if (props.height) {
  233. return {
  234. height: "100%"
  235. };
  236. }
  237. if (props.maxHeight) {
  238. if (!Number.isNaN(Number(props.maxHeight))) {
  239. return {
  240. maxHeight: `${+props.maxHeight - headerScrollHeight.value - footerScrollHeight.value}px`
  241. };
  242. } else {
  243. return {
  244. maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value + footerScrollHeight.value}px)`
  245. };
  246. }
  247. }
  248. return {};
  249. });
  250. return {
  251. isHidden,
  252. renderExpanded,
  253. setDragVisible,
  254. isGroup,
  255. handleMouseLeave,
  256. handleHeaderFooterMousewheel,
  257. tableSize,
  258. emptyBlockStyle,
  259. resizeProxyVisible,
  260. bodyWidth,
  261. resizeState,
  262. doLayout,
  263. tableBodyStyles,
  264. tableLayout,
  265. scrollbarViewStyle,
  266. scrollbarStyle
  267. };
  268. }
  269. exports["default"] = useStyle;
  270. //# sourceMappingURL=style-helper.js.map