events-helper.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. Object.defineProperties(exports, {
  2. __esModule: { value: true },
  3. [Symbol.toStringTag]: { value: "Module" }
  4. });
  5. require("../../../../_virtual/_rolldown/runtime.js");
  6. const require_style = require("../../../../utils/dom/style.js");
  7. const require_numbers = require("../../../../utils/numbers.js");
  8. const require_util = require("../util.js");
  9. const require_tokens = require("../tokens.js");
  10. let lodash_unified = require("lodash-unified");
  11. let vue = require("vue");
  12. //#region ../../packages/components/table/src/table-body/events-helper.ts
  13. function useEvents(props) {
  14. const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
  15. const tooltipContent = (0, vue.ref)("");
  16. const tooltipTrigger = (0, vue.ref)((0, vue.h)("div"));
  17. const handleEvent = (event, row, name) => {
  18. const table = parent;
  19. const cell = require_util.getCell(event);
  20. let column = null;
  21. const namespace = table?.vnode.el?.dataset.prefix;
  22. if (cell) {
  23. column = require_util.getColumnByCell({ columns: props.store?.states.columns.value ?? [] }, cell, namespace);
  24. if (column) table?.emit(`cell-${name}`, row, column, cell, event);
  25. }
  26. table?.emit(`row-${name}`, row, column, event);
  27. };
  28. const handleDoubleClick = (event, row) => {
  29. handleEvent(event, row, "dblclick");
  30. };
  31. const handleClick = (event, row) => {
  32. props.store?.commit("setCurrentRow", row);
  33. handleEvent(event, row, "click");
  34. };
  35. const handleContextMenu = (event, row) => {
  36. handleEvent(event, row, "contextmenu");
  37. };
  38. const handleMouseEnter = (0, lodash_unified.debounce)((index) => {
  39. props.store?.commit("setHoverRow", index);
  40. }, 30);
  41. const handleMouseLeave = (0, lodash_unified.debounce)(() => {
  42. props.store?.commit("setHoverRow", null);
  43. }, 30);
  44. const getPadding = (el) => {
  45. const style = window.getComputedStyle(el, null);
  46. return {
  47. left: Number.parseInt(style.paddingLeft, 10) || 0,
  48. right: Number.parseInt(style.paddingRight, 10) || 0,
  49. top: Number.parseInt(style.paddingTop, 10) || 0,
  50. bottom: Number.parseInt(style.paddingBottom, 10) || 0
  51. };
  52. };
  53. const toggleRowClassByCell = (rowSpan, event, toggle) => {
  54. let node = (event?.target)?.parentNode;
  55. while (rowSpan > 1) {
  56. node = node?.nextSibling;
  57. if (!node || node.nodeName !== "TR") break;
  58. toggle(node, "hover-row hover-fixed-row");
  59. rowSpan--;
  60. }
  61. };
  62. const handleCellMouseEnter = (event, row, tooltipOptions) => {
  63. if (!parent) return;
  64. const table = parent;
  65. const cell = require_util.getCell(event);
  66. const namespace = table?.vnode.el?.dataset.prefix;
  67. let column = null;
  68. if (cell) {
  69. column = require_util.getColumnByCell({ columns: props.store?.states.columns.value ?? [] }, cell, namespace);
  70. if (!column) return;
  71. if (cell.rowSpan > 1) toggleRowClassByCell(cell.rowSpan, event, require_style.addClass);
  72. const hoverState = table.hoverState = {
  73. cell,
  74. column,
  75. row
  76. };
  77. table?.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
  78. }
  79. if (!tooltipOptions) {
  80. if (require_util.removePopper?.trigger === cell) require_util.removePopper?.();
  81. return;
  82. }
  83. const cellChild = event.target.querySelector(".cell");
  84. if (!(require_style.hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length && cellChild.textContent?.trim())) return;
  85. const range = document.createRange();
  86. range.setStart(cellChild, 0);
  87. range.setEnd(cellChild, cellChild.childNodes.length);
  88. /** detail: https://github.com/element-plus/element-plus/issues/10790
  89. * What went wrong?
  90. * UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:
  91. * - Expected: 188
  92. * - Actual: 188.00000762939453
  93. */
  94. const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
  95. const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
  96. const { top, left, right, bottom } = getPadding(cellChild);
  97. const horizontalPadding = left + right;
  98. const verticalPadding = top + bottom;
  99. if (require_numbers.isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || require_numbers.isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || require_numbers.isGreaterThan(cellChild.scrollWidth, cellChildWidth)) require_util.createTablePopper(tooltipOptions, (cell?.innerText || cell?.textContent) ?? "", row, column, cell, table);
  100. else if (require_util.removePopper?.trigger === cell) require_util.removePopper?.();
  101. };
  102. const handleCellMouseLeave = (event) => {
  103. const cell = require_util.getCell(event);
  104. if (!cell) return;
  105. if (cell.rowSpan > 1) toggleRowClassByCell(cell.rowSpan, event, require_style.removeClass);
  106. const oldHoverState = parent?.hoverState;
  107. parent?.emit("cell-mouse-leave", oldHoverState?.row, oldHoverState?.column, oldHoverState?.cell, event);
  108. };
  109. return {
  110. handleDoubleClick,
  111. handleClick,
  112. handleContextMenu,
  113. handleMouseEnter,
  114. handleMouseLeave,
  115. handleCellMouseEnter,
  116. handleCellMouseLeave,
  117. tooltipContent,
  118. tooltipTrigger
  119. };
  120. }
  121. //#endregion
  122. exports.default = useEvents;
  123. //# sourceMappingURL=events-helper.js.map