cbd80cf706171afa1ac7bedbf534dba28fbbaa73f79fa437cca957beaf4417964a3eef934c8683208e8e93fe9f267cf1bc52b949503245e73cc3a5ba6748d8 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. import { getCurrentInstance, inject, ref } from 'vue';
  2. import { isNull } from 'lodash-unified';
  3. import { TABLE_INJECTION_KEY } from '../tokens.mjs';
  4. import { isClient } from '@vueuse/core';
  5. import { addClass, hasClass, removeClass } from '../../../../utils/dom/style.mjs';
  6. import { isElement } from '../../../../utils/types.mjs';
  7. function useEvent(props, emit) {
  8. const instance = getCurrentInstance();
  9. const parent = inject(TABLE_INJECTION_KEY);
  10. const handleFilterClick = (event) => {
  11. event.stopPropagation();
  12. return;
  13. };
  14. const handleHeaderClick = (event, column) => {
  15. if (!column.filters && column.sortable) {
  16. handleSortClick(event, column, false);
  17. } else if (column.filterable && !column.sortable) {
  18. handleFilterClick(event);
  19. }
  20. parent == null ? void 0 : parent.emit("header-click", column, event);
  21. };
  22. const handleHeaderContextMenu = (event, column) => {
  23. parent == null ? void 0 : parent.emit("header-contextmenu", column, event);
  24. };
  25. const draggingColumn = ref(null);
  26. const dragging = ref(false);
  27. const dragState = ref();
  28. const handleMouseDown = (event, column) => {
  29. var _a, _b;
  30. if (!isClient)
  31. return;
  32. if (column.children && column.children.length > 0)
  33. return;
  34. if (draggingColumn.value && props.border) {
  35. dragging.value = true;
  36. const table = parent;
  37. emit("set-drag-visible", true);
  38. const tableEl = table == null ? void 0 : table.vnode.el;
  39. const tableLeft = tableEl == null ? void 0 : tableEl.getBoundingClientRect().left;
  40. const columnEl = (_b = (_a = instance == null ? void 0 : instance.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.querySelector(`th.${column.id}`);
  41. const columnRect = columnEl.getBoundingClientRect();
  42. const minLeft = columnRect.left - tableLeft + 30;
  43. addClass(columnEl, "noclick");
  44. dragState.value = {
  45. startMouseLeft: event.clientX,
  46. startLeft: columnRect.right - tableLeft,
  47. startColumnLeft: columnRect.left - tableLeft,
  48. tableLeft
  49. };
  50. const resizeProxy = table == null ? void 0 : table.refs.resizeProxy;
  51. resizeProxy.style.left = `${dragState.value.startLeft}px`;
  52. document.onselectstart = function() {
  53. return false;
  54. };
  55. document.ondragstart = function() {
  56. return false;
  57. };
  58. const handleMouseMove2 = (event2) => {
  59. const deltaLeft = event2.clientX - dragState.value.startMouseLeft;
  60. const proxyLeft = dragState.value.startLeft + deltaLeft;
  61. resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`;
  62. };
  63. const handleMouseUp = () => {
  64. if (dragging.value) {
  65. const { startColumnLeft, startLeft } = dragState.value;
  66. const finalLeft = Number.parseInt(resizeProxy.style.left, 10);
  67. const columnWidth = finalLeft - startColumnLeft;
  68. column.width = column.realWidth = columnWidth;
  69. table == null ? void 0 : table.emit("header-dragend", column.width, startLeft - startColumnLeft, column, event);
  70. requestAnimationFrame(() => {
  71. props.store.scheduleLayout(false, true);
  72. });
  73. document.body.style.cursor = "";
  74. dragging.value = false;
  75. draggingColumn.value = null;
  76. dragState.value = void 0;
  77. emit("set-drag-visible", false);
  78. }
  79. document.removeEventListener("mousemove", handleMouseMove2);
  80. document.removeEventListener("mouseup", handleMouseUp);
  81. document.onselectstart = null;
  82. document.ondragstart = null;
  83. setTimeout(() => {
  84. removeClass(columnEl, "noclick");
  85. }, 0);
  86. };
  87. document.addEventListener("mousemove", handleMouseMove2);
  88. document.addEventListener("mouseup", handleMouseUp);
  89. }
  90. };
  91. const handleMouseMove = (event, column) => {
  92. var _a;
  93. if (column.children && column.children.length > 0)
  94. return;
  95. const el = event.target;
  96. if (!isElement(el)) {
  97. return;
  98. }
  99. const target = el == null ? void 0 : el.closest("th");
  100. if (!column || !column.resizable || !target)
  101. return;
  102. if (!dragging.value && props.border) {
  103. const rect = target.getBoundingClientRect();
  104. const bodyStyle = document.body.style;
  105. const isLastTh = ((_a = target.parentNode) == null ? void 0 : _a.lastElementChild) === target;
  106. const allowDarg = props.allowDragLastColumn || !isLastTh;
  107. if (rect.width > 12 && rect.right - event.clientX < 8 && allowDarg) {
  108. bodyStyle.cursor = "col-resize";
  109. if (hasClass(target, "is-sortable")) {
  110. target.style.cursor = "col-resize";
  111. }
  112. draggingColumn.value = column;
  113. } else if (!dragging.value) {
  114. bodyStyle.cursor = "";
  115. if (hasClass(target, "is-sortable")) {
  116. target.style.cursor = "pointer";
  117. }
  118. draggingColumn.value = null;
  119. }
  120. }
  121. };
  122. const handleMouseOut = () => {
  123. if (!isClient)
  124. return;
  125. document.body.style.cursor = "";
  126. };
  127. const toggleOrder = ({ order, sortOrders }) => {
  128. if (order === "")
  129. return sortOrders[0];
  130. const index = sortOrders.indexOf(order || null);
  131. return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
  132. };
  133. const handleSortClick = (event, column, givenOrder) => {
  134. var _a;
  135. event.stopPropagation();
  136. const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
  137. const target = (_a = event.target) == null ? void 0 : _a.closest("th");
  138. if (target) {
  139. if (hasClass(target, "noclick")) {
  140. removeClass(target, "noclick");
  141. return;
  142. }
  143. }
  144. if (!column.sortable)
  145. return;
  146. const clickTarget = event.currentTarget;
  147. if (["ascending", "descending"].some((str) => hasClass(clickTarget, str) && !column.sortOrders.includes(str))) {
  148. return;
  149. }
  150. const states = props.store.states;
  151. let sortProp = states.sortProp.value;
  152. let sortOrder;
  153. const sortingColumn = states.sortingColumn.value;
  154. if (sortingColumn !== column || sortingColumn === column && isNull(sortingColumn.order)) {
  155. if (sortingColumn) {
  156. sortingColumn.order = null;
  157. }
  158. states.sortingColumn.value = column;
  159. sortProp = column.property;
  160. }
  161. if (!order) {
  162. sortOrder = column.order = null;
  163. } else {
  164. sortOrder = column.order = order;
  165. }
  166. states.sortProp.value = sortProp;
  167. states.sortOrder.value = sortOrder;
  168. parent == null ? void 0 : parent.store.commit("changeSortCondition");
  169. };
  170. return {
  171. handleHeaderClick,
  172. handleHeaderContextMenu,
  173. handleMouseDown,
  174. handleMouseMove,
  175. handleMouseOut,
  176. handleSortClick,
  177. handleFilterClick
  178. };
  179. }
  180. export { useEvent as default };
  181. //# sourceMappingURL=event-helper.mjs.map