'use strict';
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
var vue = require('vue');
|
require('../../../../utils/index.js');
|
var tokens = require('../tokens.js');
|
var core = require('@vueuse/core');
|
var style = require('../../../../utils/dom/style.js');
|
var types = require('../../../../utils/types.js');
|
|
function useEvent(props, emit) {
|
const instance = vue.getCurrentInstance();
|
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
|
const handleFilterClick = (event) => {
|
event.stopPropagation();
|
return;
|
};
|
const handleHeaderClick = (event, column) => {
|
if (!column.filters && column.sortable) {
|
handleSortClick(event, column, false);
|
} else if (column.filterable && !column.sortable) {
|
handleFilterClick(event);
|
}
|
parent == null ? void 0 : parent.emit("header-click", column, event);
|
};
|
const handleHeaderContextMenu = (event, column) => {
|
parent == null ? void 0 : parent.emit("header-contextmenu", column, event);
|
};
|
const draggingColumn = vue.ref(null);
|
const dragging = vue.ref(false);
|
const dragState = vue.ref({});
|
const handleMouseDown = (event, column) => {
|
if (!core.isClient)
|
return;
|
if (column.children && column.children.length > 0)
|
return;
|
if (draggingColumn.value && props.border) {
|
dragging.value = true;
|
const table = parent;
|
emit("set-drag-visible", true);
|
const tableEl = table == null ? void 0 : table.vnode.el;
|
const tableLeft = tableEl.getBoundingClientRect().left;
|
const columnEl = instance.vnode.el.querySelector(`th.${column.id}`);
|
const columnRect = columnEl.getBoundingClientRect();
|
const minLeft = columnRect.left - tableLeft + 30;
|
style.addClass(columnEl, "noclick");
|
dragState.value = {
|
startMouseLeft: event.clientX,
|
startLeft: columnRect.right - tableLeft,
|
startColumnLeft: columnRect.left - tableLeft,
|
tableLeft
|
};
|
const resizeProxy = table == null ? void 0 : table.refs.resizeProxy;
|
resizeProxy.style.left = `${dragState.value.startLeft}px`;
|
document.onselectstart = function() {
|
return false;
|
};
|
document.ondragstart = function() {
|
return false;
|
};
|
const handleMouseMove2 = (event2) => {
|
const deltaLeft = event2.clientX - dragState.value.startMouseLeft;
|
const proxyLeft = dragState.value.startLeft + deltaLeft;
|
resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`;
|
};
|
const handleMouseUp = () => {
|
if (dragging.value) {
|
const { startColumnLeft, startLeft } = dragState.value;
|
const finalLeft = Number.parseInt(resizeProxy.style.left, 10);
|
const columnWidth = finalLeft - startColumnLeft;
|
column.width = column.realWidth = columnWidth;
|
table == null ? void 0 : table.emit("header-dragend", column.width, startLeft - startColumnLeft, column, event);
|
requestAnimationFrame(() => {
|
props.store.scheduleLayout(false, true);
|
});
|
document.body.style.cursor = "";
|
dragging.value = false;
|
draggingColumn.value = null;
|
dragState.value = {};
|
emit("set-drag-visible", false);
|
}
|
document.removeEventListener("mousemove", handleMouseMove2);
|
document.removeEventListener("mouseup", handleMouseUp);
|
document.onselectstart = null;
|
document.ondragstart = null;
|
setTimeout(() => {
|
style.removeClass(columnEl, "noclick");
|
}, 0);
|
};
|
document.addEventListener("mousemove", handleMouseMove2);
|
document.addEventListener("mouseup", handleMouseUp);
|
}
|
};
|
const handleMouseMove = (event, column) => {
|
if (column.children && column.children.length > 0)
|
return;
|
const el = event.target;
|
if (!types.isElement(el)) {
|
return;
|
}
|
const target = el == null ? void 0 : el.closest("th");
|
if (!column || !column.resizable)
|
return;
|
if (!dragging.value && props.border) {
|
const rect = target.getBoundingClientRect();
|
const bodyStyle = document.body.style;
|
if (rect.width > 12 && rect.right - event.pageX < 8) {
|
bodyStyle.cursor = "col-resize";
|
if (style.hasClass(target, "is-sortable")) {
|
target.style.cursor = "col-resize";
|
}
|
draggingColumn.value = column;
|
} else if (!dragging.value) {
|
bodyStyle.cursor = "";
|
if (style.hasClass(target, "is-sortable")) {
|
target.style.cursor = "pointer";
|
}
|
draggingColumn.value = null;
|
}
|
}
|
};
|
const handleMouseOut = () => {
|
if (!core.isClient)
|
return;
|
document.body.style.cursor = "";
|
};
|
const toggleOrder = ({ order, sortOrders }) => {
|
if (order === "")
|
return sortOrders[0];
|
const index = sortOrders.indexOf(order || null);
|
return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
|
};
|
const handleSortClick = (event, column, givenOrder) => {
|
var _a;
|
event.stopPropagation();
|
const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
|
const target = (_a = event.target) == null ? void 0 : _a.closest("th");
|
if (target) {
|
if (style.hasClass(target, "noclick")) {
|
style.removeClass(target, "noclick");
|
return;
|
}
|
}
|
if (!column.sortable)
|
return;
|
const states = props.store.states;
|
let sortProp = states.sortProp.value;
|
let sortOrder;
|
const sortingColumn = states.sortingColumn.value;
|
if (sortingColumn !== column || sortingColumn === column && sortingColumn.order === null) {
|
if (sortingColumn) {
|
sortingColumn.order = null;
|
}
|
states.sortingColumn.value = column;
|
sortProp = column.property;
|
}
|
if (!order) {
|
sortOrder = column.order = null;
|
} else {
|
sortOrder = column.order = order;
|
}
|
states.sortProp.value = sortProp;
|
states.sortOrder.value = sortOrder;
|
parent == null ? void 0 : parent.store.commit("changeSortCondition");
|
};
|
return {
|
handleHeaderClick,
|
handleHeaderContextMenu,
|
handleMouseDown,
|
handleMouseMove,
|
handleMouseOut,
|
handleSortClick,
|
handleFilterClick
|
};
|
}
|
|
exports["default"] = useEvent;
|
//# sourceMappingURL=event-helper.js.map
|
