ivue-material-plus
Version:
A high quality UI components Library with Vue.js
183 lines (180 loc) • 6.24 kB
JavaScript
import { getCurrentInstance, inject, ref } from 'vue';
import { hasClass, removeClass, addClass } from '../../../utils/assist.mjs';
import { off, on } from '../../../utils/dom.mjs';
import { TableContextKey } from '../table/defaults.mjs';
function useEvent(props, emit) {
const vm = getCurrentInstance();
const IvueTable = inject(TableContextKey);
const draggingColumn = ref(null);
const dragging = ref(false);
const dragState = ref({});
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) => {
event.stopPropagation();
const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
let target = event.target;
while (target && target.tagName !== "TH") {
target = target.parentNode;
}
if (target && target.tagName === "TH") {
if (hasClass(target, "noclick")) {
removeClass(target, "noclick");
return;
}
}
if (!column.sortable) {
return;
}
const states = props.store.states;
let sortProp = states.sortProp.value;
const sortingColumn = states.sortingColumn.value;
let sortOrder;
if (sortingColumn !== column || sortingColumn === column && sortingColumn.order === null) {
if (sortingColumn) {
sortingColumn.order = null;
}
states.sortingColumn.value = column;
sortProp = column.property;
}
if (!order) {
column.order = null;
sortOrder = null;
} else {
sortOrder = order;
column.order = order;
}
states.sortProp.value = sortProp;
states.sortOrder.value = sortOrder;
IvueTable.store.commit("changeSortCondition");
};
const handleHeaderClick = (event, column) => {
event.preventDefault();
if (!column.filters && column.sortable) {
handleSortClick(event, column, false);
}
IvueTable.emit("on-header-click", column, event);
};
const handleMouseDown = (event, column) => {
if (column.children && column.children.length > 0) {
return;
}
if (draggingColumn.value && props.border) {
dragging.value = true;
emit("on-drag-visible", true);
const tableDom = IvueTable.vnode.el;
const tableLeft = tableDom.getBoundingClientRect().left;
const currentColumnDom = vm.vnode.el.querySelector(`th.${column.id}`);
const columnRect = currentColumnDom.getBoundingClientRect();
const cellDom = currentColumnDom.querySelector(".cell-content");
const minLeft = columnRect.left - tableLeft + (cellDom.offsetWidth + 30);
addClass(currentColumnDom, "noclick");
dragState.value = {
startMouseLeft: event.clientX,
startLeft: columnRect.right - tableLeft,
startColumnLeft: columnRect.left - tableLeft,
tableLeft
};
const draggingDottedDom = IvueTable.refs.draggingDotted;
draggingDottedDom.style.left = `${dragState.value.startLeft}px`;
document.onselectstart = () => {
return false;
};
document.ondragstart = () => {
return false;
};
const handleDocumentMouseMove = (event2) => {
const deltaLeft = event2.clientX - dragState.value.startMouseLeft;
let maxLeft = dragState.value.startLeft + deltaLeft;
if (maxLeft >= tableDom.offsetWidth) {
maxLeft = tableDom.offsetWidth;
}
draggingDottedDom.style.left = `${Math.max(minLeft, maxLeft)}px`;
};
const handleDocumentMouseUp = () => {
if (dragging.value) {
const { startColumnLeft, startLeft } = dragState.value;
const draggingDottedDomLeft = Number.parseInt(
draggingDottedDom.style.left,
10
);
const columnWidth = draggingDottedDomLeft - startColumnLeft;
column.width = columnWidth;
column.columnWidth = columnWidth;
IvueTable.emit(
"on-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("on-drag-visible", false);
}
off(document, "mousemove", handleDocumentMouseMove);
off(document, "mouseup", handleDocumentMouseUp);
document.onselectstart = null;
document.ondragstart = null;
setTimeout(() => {
removeClass(currentColumnDom, "noclick");
}, 0);
};
on(document, "mousemove", handleDocumentMouseMove);
on(document, "mouseup", handleDocumentMouseUp);
}
};
const handleMouseMove = (event, column) => {
if (column.children && column.children.length > 0) {
return;
}
let target = event.target;
while (target && target.tagName !== "TH") {
target = target.parentNode;
}
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 (hasClass(target, "is-sortable")) {
target.style.cursor = "col-resize";
}
draggingColumn.value = column;
} else if (!dragging.value) {
bodyStyle.cursor = "";
if (hasClass(target, "is-sortable") && column.filterable) {
target.style.cursor = "inherit";
} else if (hasClass(target, "is-sortable")) {
target.style.cursor = "pointer";
}
draggingColumn.value = null;
}
}
};
const handleMouseOut = () => {
document.body.style.cursor = "";
};
return {
handleSortClick,
handleHeaderClick,
handleMouseDown,
handleMouseMove,
handleMouseOut
};
}
export { useEvent as default };
//# sourceMappingURL=events.mjs.map