tav-ui/lib/packages/hooks/web/useTooltip2.js

Tav UI

'use strict';

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

var vue = require('vue');
var dom = require('@floating-ui/dom');
var core = require('@vueuse/core');
var XEUtils = require('xe-utils');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var XEUtils__default = /*#__PURE__*/_interopDefaultLegacy(XEUtils);

const CLS = `ta-popper`;
function createElement({ tagName = "div", className = "" }) {
  const el = document.createElement(tagName);
  el.className = className;
  return el;
}
function createAntvTooltip(props) {
  const tooltipEl = createElement({
    className: `${CLS}`
  });
  const contentEl = createElement({
    tagName: "span",
    className: `${CLS}-content`
  });
  contentEl.innerHTML = props.title ?? "";
  const arrowEl = createElement({
    className: `${CLS}-arrow`
  });
  tooltipEl.appendChild(contentEl);
  tooltipEl.appendChild(arrowEl);
  return {
    tooltipEl,
    arrowEl
  };
}
const $Tooltip = (el, props) => {
  if (!el)
    return;
  const { tooltipEl, arrowEl } = createAntvTooltip(props);
  function update() {
    dom.computePosition(el, tooltipEl, {
      placement: "top",
      middleware: [dom.hide(), dom.offset(6), dom.flip(), dom.shift({ padding: 6 }), dom.arrow({ element: arrowEl })]
    }).then(({ x, y, placement, middlewareData }) => {
      Object.assign(tooltipEl.style, {
        left: `${x}px`,
        top: `${y}px`
      });
      const staticSide = {
        top: "bottom",
        right: "left",
        bottom: "top",
        left: "right"
      }[placement.split("-")[0]];
      Object.assign(arrowEl.style, {
        left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : "",
        top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : "",
        right: "",
        bottom: "",
        [staticSide]: "-4px"
      });
      tooltipEl.dataset.popperPlacement = placement;
    });
  }
  function showTooltip(newEl) {
    setTimeout(() => {
      document.body.appendChild(tooltipEl);
      newEl && (el = newEl);
      update();
    }, props.delay);
  }
  function hideTooltip() {
    setTimeout(() => {
      tooltipEl.remove();
    }, props.delay);
  }
  return {
    showTooltip,
    hideTooltip
  };
};
function useHideTooltips(instances) {
  if (!instances)
    return;
  const browse = XEUtils__default["default"].browse();
  const wheelName = browse.firefox ? "DOMMouseScroll" : "mousewheel";
  const listener = () => {
    for (const instance of instances.values()) {
      if (instance)
        instance?.hideTooltip();
    }
  };
  const handler = core.useThrottleFn(listener, 30);
  vue.onMounted(() => {
    document.addEventListener(wheelName, handler);
  });
  vue.onUnmounted(() => {
    document.removeEventListener(wheelName, handler);
  });
}

exports.$Tooltip = $Tooltip;
exports.useHideTooltips = useHideTooltips;
//# sourceMappingURL=useTooltip2.js.map