dfd0e625f04c3e11a05c6d9045d30f8aa4079a46371adff86e1c5eb9e8553222c68e5901262af17a17ca9de0bc0f566f32e942c16f278a25c22d92b054f5cb 6.7 KB

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