ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-table/table-body/events.mjs

A high quality UI components Library with Vue.js

import { inject } from 'vue';
import { debounce } from 'lodash-unified';
import { getCell, getColumnByCell, createTablePopper } from '../utils.mjs';
import { hasClass, getStyle } from '../../../utils/assist.mjs';
import { TableContextKey } from '../table/defaults.mjs';

const prefixCls = "ivue-table";
function useEvents(props) {
  const IvueTable = inject(TableContextKey);
  const handleEvent = (event, row, name) => {
    var _a;
    const cell = getCell(event);
    let column;
    if (cell) {
      column = getColumnByCell(
        {
          columns: (_a = props.store) == null ? void 0 : _a.states.columns.value
        },
        cell,
        prefixCls
      );
      if (column) {
        IvueTable == null ? void 0 : IvueTable.emit(`on-cell-${name}`, row, column, cell, event);
      }
    }
    IvueTable == null ? void 0 : IvueTable.emit(`on-row-${name}`, row, column, event);
  };
  const handleClickTr = (event, row) => {
    var _a;
    (_a = props.store) == null ? void 0 : _a.commit("setCurrentRow", row);
    handleEvent(event, row, "click");
  };
  const handleCellMouseEnter = (event, row) => {
    var _a;
    const cell = getCell(event);
    if (cell) {
      const column = getColumnByCell(
        {
          columns: (_a = props.store) == null ? void 0 : _a.states.columns.value
        },
        cell,
        prefixCls
      );
      IvueTable.hoverState = { cell, column, row };
      const hoverState = IvueTable.hoverState;
      IvueTable == null ? void 0 : IvueTable.emit(
        "on-cell-mouse-enter",
        hoverState.row,
        hoverState.column,
        hoverState.cell,
        event
      );
    }
    const cellChild = event.target.querySelector(
      ".cell"
    );
    if (!(hasClass(cellChild, `${prefixCls}-tooltip`) && cellChild.childNodes.length)) {
      return;
    }
    const range = document.createRange();
    range.setStart(cellChild, 0);
    range.setEnd(cellChild, cellChild.childNodes.length);
    const rangeWidth = 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(
        IvueTable == null ? void 0 : IvueTable.refs.tableWrapper,
        cell,
        (cell == null ? void 0 : cell.innerText) || (cell == null ? void 0 : cell.textContent),
        props.tooltipTheme,
        {
          placement: "top",
          strategy: "fixed"
        }
      );
    }
  };
  const handleCellMouseLeave = (event) => {
    const cell = getCell(event);
    if (!cell) {
      return;
    }
    const oldHoverState = IvueTable == null ? void 0 : IvueTable.hoverState;
    IvueTable == null ? void 0 : IvueTable.emit(
      "on-cell-mouse-leave",
      oldHoverState == null ? void 0 : oldHoverState.row,
      oldHoverState == null ? void 0 : oldHoverState.column,
      oldHoverState == null ? void 0 : oldHoverState.cell,
      event
    );
  };
  const handleMouseEnter = debounce((index) => {
    var _a;
    (_a = props.store) == null ? void 0 : _a.commit("setHoverRow", index);
  }, 30);
  const handleMouseLeave = debounce(() => {
    var _a;
    (_a = props.store) == null ? void 0 : _a.commit("setHoverRow", null);
  }, 30);
  return {
    handleClickTr,
    handleCellMouseEnter,
    handleCellMouseLeave,
    handleMouseEnter,
    handleMouseLeave
  };
}

export { useEvents as default };
//# sourceMappingURL=events.mjs.map