You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
4.6 KiB
120 lines
4.6 KiB
import { inject, ref, h } from 'vue';
|
|
import { debounce } from 'lodash-unified';
|
|
import '../../../../utils/index.mjs';
|
|
import '../../../../hooks/index.mjs';
|
|
import { getCell, getColumnByCell, createTablePopper } from '../util.mjs';
|
|
import { TABLE_INJECTION_KEY } from '../tokens.mjs';
|
|
import { useZIndex } from '../../../../hooks/use-z-index/index.mjs';
|
|
import { hasClass } from '../../../../utils/dom/style.mjs';
|
|
|
|
function useEvents(props) {
|
|
const parent = inject(TABLE_INJECTION_KEY);
|
|
const tooltipContent = ref("");
|
|
const tooltipTrigger = ref(h("div"));
|
|
const { nextZIndex } = useZIndex();
|
|
const handleEvent = (event, row, name) => {
|
|
var _a;
|
|
const table = parent;
|
|
const cell = getCell(event);
|
|
let column;
|
|
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
|
|
if (cell) {
|
|
column = getColumnByCell({
|
|
columns: props.store.states.columns.value
|
|
}, cell, namespace);
|
|
if (column) {
|
|
table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event);
|
|
}
|
|
}
|
|
table == null ? void 0 : table.emit(`row-${name}`, row, column, event);
|
|
};
|
|
const handleDoubleClick = (event, row) => {
|
|
handleEvent(event, row, "dblclick");
|
|
};
|
|
const handleClick = (event, row) => {
|
|
props.store.commit("setCurrentRow", row);
|
|
handleEvent(event, row, "click");
|
|
};
|
|
const handleContextMenu = (event, row) => {
|
|
handleEvent(event, row, "contextmenu");
|
|
};
|
|
const handleMouseEnter = debounce((index) => {
|
|
props.store.commit("setHoverRow", index);
|
|
}, 30);
|
|
const handleMouseLeave = debounce(() => {
|
|
props.store.commit("setHoverRow", null);
|
|
}, 30);
|
|
const getPadding = (el) => {
|
|
const style = window.getComputedStyle(el, null);
|
|
const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
|
|
const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
|
|
const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
|
|
const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
|
|
return {
|
|
left: paddingLeft,
|
|
right: paddingRight,
|
|
top: paddingTop,
|
|
bottom: paddingBottom
|
|
};
|
|
};
|
|
const handleCellMouseEnter = (event, row, tooltipOptions) => {
|
|
var _a;
|
|
const table = parent;
|
|
const cell = getCell(event);
|
|
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
|
|
if (cell) {
|
|
const column = getColumnByCell({
|
|
columns: props.store.states.columns.value
|
|
}, cell, namespace);
|
|
const hoverState = table.hoverState = { cell, column, row };
|
|
table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
|
|
}
|
|
if (!tooltipOptions) {
|
|
return;
|
|
}
|
|
const cellChild = event.target.querySelector(".cell");
|
|
if (!(hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length)) {
|
|
return;
|
|
}
|
|
const range = document.createRange();
|
|
range.setStart(cellChild, 0);
|
|
range.setEnd(cellChild, cellChild.childNodes.length);
|
|
let rangeWidth = range.getBoundingClientRect().width;
|
|
let rangeHeight = range.getBoundingClientRect().height;
|
|
const offsetWidth = rangeWidth - Math.floor(rangeWidth);
|
|
if (offsetWidth < 1e-3) {
|
|
rangeWidth = Math.floor(rangeWidth);
|
|
}
|
|
const offsetHeight = rangeHeight - Math.floor(rangeHeight);
|
|
if (offsetHeight < 1e-3) {
|
|
rangeHeight = Math.floor(rangeHeight);
|
|
}
|
|
const { top, left, right, bottom } = getPadding(cellChild);
|
|
const horizontalPadding = left + right;
|
|
const verticalPadding = top + bottom;
|
|
if (rangeWidth + horizontalPadding > cellChild.offsetWidth || rangeHeight + verticalPadding > cellChild.offsetHeight || cellChild.scrollWidth > cellChild.offsetWidth) {
|
|
createTablePopper(parent == null ? void 0 : parent.refs.tableWrapper, cell, cell.innerText || cell.textContent, nextZIndex, tooltipOptions);
|
|
}
|
|
};
|
|
const handleCellMouseLeave = (event) => {
|
|
const cell = getCell(event);
|
|
if (!cell)
|
|
return;
|
|
const oldHoverState = parent == null ? void 0 : parent.hoverState;
|
|
parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event);
|
|
};
|
|
return {
|
|
handleDoubleClick,
|
|
handleClick,
|
|
handleContextMenu,
|
|
handleMouseEnter,
|
|
handleMouseLeave,
|
|
handleCellMouseEnter,
|
|
handleCellMouseLeave,
|
|
tooltipContent,
|
|
tooltipTrigger
|
|
};
|
|
}
|
|
|
|
export { useEvents as default };
|
|
//# sourceMappingURL=events-helper.mjs.map
|
|
|