fe187fed76aa18a36d37c9b9b5fdd11a6fc92f64f6cd990fc98c0d64b6adc505730b78f70b4e3056c6b29cab67c4a5bef30541e4f4420f6c1fd4b4c436859d 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import { inject, ref, h } from 'vue';
  2. import { debounce } from 'lodash-unified';
  3. import { getCell, getColumnByCell, removePopper, createTablePopper } from '../util.mjs';
  4. import { TABLE_INJECTION_KEY } from '../tokens.mjs';
  5. import { hasClass, addClass, removeClass } from '../../../../utils/dom/style.mjs';
  6. function isGreaterThan(a, b, epsilon = 0.03) {
  7. return a - b > epsilon;
  8. }
  9. function useEvents(props) {
  10. const parent = inject(TABLE_INJECTION_KEY);
  11. const tooltipContent = ref("");
  12. const tooltipTrigger = ref(h("div"));
  13. const handleEvent = (event, row, name) => {
  14. var _a, _b, _c;
  15. const table = parent;
  16. const cell = getCell(event);
  17. let column = null;
  18. const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
  19. if (cell) {
  20. column = getColumnByCell({
  21. columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
  22. }, cell, namespace);
  23. if (column) {
  24. table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event);
  25. }
  26. }
  27. table == null ? void 0 : table.emit(`row-${name}`, row, column, event);
  28. };
  29. const handleDoubleClick = (event, row) => {
  30. handleEvent(event, row, "dblclick");
  31. };
  32. const handleClick = (event, row) => {
  33. var _a;
  34. (_a = props.store) == null ? void 0 : _a.commit("setCurrentRow", row);
  35. handleEvent(event, row, "click");
  36. };
  37. const handleContextMenu = (event, row) => {
  38. handleEvent(event, row, "contextmenu");
  39. };
  40. const handleMouseEnter = debounce((index) => {
  41. var _a;
  42. (_a = props.store) == null ? void 0 : _a.commit("setHoverRow", index);
  43. }, 30);
  44. const handleMouseLeave = debounce(() => {
  45. var _a;
  46. (_a = props.store) == null ? void 0 : _a.commit("setHoverRow", null);
  47. }, 30);
  48. const getPadding = (el) => {
  49. const style = window.getComputedStyle(el, null);
  50. const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
  51. const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
  52. const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
  53. const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
  54. return {
  55. left: paddingLeft,
  56. right: paddingRight,
  57. top: paddingTop,
  58. bottom: paddingBottom
  59. };
  60. };
  61. const toggleRowClassByCell = (rowSpan, event, toggle) => {
  62. var _a;
  63. let node = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.parentNode;
  64. while (rowSpan > 1) {
  65. node = node == null ? void 0 : node.nextSibling;
  66. if (!node || node.nodeName !== "TR")
  67. break;
  68. toggle(node, "hover-row hover-fixed-row");
  69. rowSpan--;
  70. }
  71. };
  72. const handleCellMouseEnter = (event, row, tooltipOptions) => {
  73. var _a, _b, _c, _d, _e, _f, _g, _h;
  74. if (!parent)
  75. return;
  76. const table = parent;
  77. const cell = getCell(event);
  78. const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
  79. let column = null;
  80. if (cell) {
  81. column = getColumnByCell({
  82. columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
  83. }, cell, namespace);
  84. if (!column) {
  85. return;
  86. }
  87. if (cell.rowSpan > 1) {
  88. toggleRowClassByCell(cell.rowSpan, event, addClass);
  89. }
  90. const hoverState = table.hoverState = {
  91. cell,
  92. column,
  93. row
  94. };
  95. table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
  96. }
  97. if (!tooltipOptions) {
  98. if (((_d = removePopper) == null ? void 0 : _d.trigger) === cell) {
  99. (_e = removePopper) == null ? void 0 : _e();
  100. }
  101. return;
  102. }
  103. const cellChild = event.target.querySelector(".cell");
  104. if (!(hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length)) {
  105. return;
  106. }
  107. const range = document.createRange();
  108. range.setStart(cellChild, 0);
  109. range.setEnd(cellChild, cellChild.childNodes.length);
  110. const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
  111. const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
  112. const { top, left, right, bottom } = getPadding(cellChild);
  113. const horizontalPadding = left + right;
  114. const verticalPadding = top + bottom;
  115. if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
  116. createTablePopper(tooltipOptions, (_f = (cell == null ? void 0 : cell.innerText) || (cell == null ? void 0 : cell.textContent)) != null ? _f : "", row, column, cell, table);
  117. } else if (((_g = removePopper) == null ? void 0 : _g.trigger) === cell) {
  118. (_h = removePopper) == null ? void 0 : _h();
  119. }
  120. };
  121. const handleCellMouseLeave = (event) => {
  122. const cell = getCell(event);
  123. if (!cell)
  124. return;
  125. if (cell.rowSpan > 1) {
  126. toggleRowClassByCell(cell.rowSpan, event, removeClass);
  127. }
  128. const oldHoverState = parent == null ? void 0 : parent.hoverState;
  129. parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event);
  130. };
  131. return {
  132. handleDoubleClick,
  133. handleClick,
  134. handleContextMenu,
  135. handleMouseEnter,
  136. handleMouseLeave,
  137. handleCellMouseEnter,
  138. handleCellMouseLeave,
  139. tooltipContent,
  140. tooltipTrigger
  141. };
  142. }
  143. export { useEvents as default };
  144. //# sourceMappingURL=events-helper.mjs.map