hongluan-ui/lib/components/simple-table/src/composables/use-tooltip.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../../utils/index.js');
var style = require('../../../../utils/dom/style.js');

function useTooltip(cols) {
  const isShowTooltipMap = vue.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(style.getStyle(cellChild, "paddingLeft"), 10) || 0) + (Number.parseInt(style.getStyle(cellChild, "paddingRight"), 10) || 0);
    const isTextOverflow = style.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
  };
}

exports.useTooltip = useTooltip;
//# sourceMappingURL=use-tooltip.js.map