layout-observer.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. function useLayoutObserver(root) {
  5. const instance = vue.getCurrentInstance();
  6. vue.onBeforeMount(() => {
  7. tableLayout.value.addObserver(instance);
  8. });
  9. vue.onMounted(() => {
  10. onColumnsChange(tableLayout.value);
  11. onScrollableChange(tableLayout.value);
  12. });
  13. vue.onUpdated(() => {
  14. onColumnsChange(tableLayout.value);
  15. onScrollableChange(tableLayout.value);
  16. });
  17. vue.onUnmounted(() => {
  18. tableLayout.value.removeObserver(instance);
  19. });
  20. const tableLayout = vue.computed(() => {
  21. const layout = root.layout;
  22. if (!layout) {
  23. throw new Error("Can not find table layout.");
  24. }
  25. return layout;
  26. });
  27. const onColumnsChange = (layout) => {
  28. var _a;
  29. const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col")) || [];
  30. if (!cols.length)
  31. return;
  32. const flattenColumns = layout.getFlattenColumns();
  33. const columnsMap = {};
  34. flattenColumns.forEach((column) => {
  35. columnsMap[column.id] = column;
  36. });
  37. for (let i = 0, j = cols.length; i < j; i++) {
  38. const col = cols[i];
  39. const name = col.getAttribute("name");
  40. const column = columnsMap[name];
  41. if (column) {
  42. col.setAttribute("width", column.realWidth || column.width);
  43. }
  44. }
  45. };
  46. const onScrollableChange = (layout) => {
  47. var _a, _b;
  48. const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col[name=gutter]")) || [];
  49. for (let i = 0, j = cols.length; i < j; i++) {
  50. const col = cols[i];
  51. col.setAttribute("width", layout.scrollY.value ? layout.gutterWidth : "0");
  52. }
  53. const ths = ((_b = root.vnode.el) == null ? void 0 : _b.querySelectorAll("th.gutter")) || [];
  54. for (let i = 0, j = ths.length; i < j; i++) {
  55. const th = ths[i];
  56. th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : "0";
  57. th.style.display = layout.scrollY.value ? "" : "none";
  58. }
  59. };
  60. return {
  61. tableLayout: tableLayout.value,
  62. onColumnsChange,
  63. onScrollableChange
  64. };
  65. }
  66. exports["default"] = useLayoutObserver;
  67. //# sourceMappingURL=layout-observer.js.map