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, getStyle } 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 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);
|
const rangeWidth = Math.round(range.getBoundingClientRect().width);
|
const padding = (Number.parseInt(getStyle(cellChild, "paddingLeft"), 10) || 0) + (Number.parseInt(getStyle(cellChild, "paddingRight"), 10) || 0);
|
if (rangeWidth + padding > cellChild.offsetWidth || 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
|
