hongluan-ui/es/components/simple-table/src/composables/use-tooltip.mjs

Hongluan Component Library for Vue 3

import { ref } from 'vue';
import '../../../../utils/index.mjs';
import { getStyle } from '../../../../utils/dom/style.mjs';

function useTooltip(cols) {
  const isShowTooltipMap = ref({});
  const clearTooltip = () => {
    isShowTooltipMap.value = {};
  };
  const tdMouseover = (e, rowIndex, colIndex) => {
    if (!cols.value.realCols[colIndex].showTooltip) {
      return;
    }
    const cell = e.target;
    const cellChild = cell.querySelector(".cell");
    if (!cellChild)
      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);
    const isTextOverflow = getStyle(cellChild, "textOverflow") === "ellipsis";
    const shouldShow = isTextOverflow ? rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth : cellChild.scrollHeight > cellChild.offsetHeight;
    if (shouldShow) {
      clearTooltip();
      isShowTooltipMap.value[rowIndex + "/" + colIndex] = true;
    }
  };
  const tdMouseleave = () => {
    clearTooltip();
  };
  return {
    isShowTooltipMap,
    clearTooltip,
    tdMouseover,
    tdMouseleave
  };
}

export { useTooltip };
//# sourceMappingURL=use-tooltip.mjs.map