67c691c5fdc62fad64c6491a4a60aae2da42bc96e62e3412aa22b9b26a22431d2bd82b455e7aa69d830d8e14b3d91db712aa665d58adb845622b35769052f0 2.2 KB

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