vxe-table-demonic/lib/tooltip/src/tooltip.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _size = require("../../hooks/size");
var _utils = require("../../tools/utils");
var _dom = require("../../tools/dom");
var _vn = require("../../tools/vn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
    if (ar || !(i in from)) {
      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
      ar[i] = from[i];
    }
  }
  return to.concat(ar || Array.prototype.slice.call(from));
};
var _default = (0, _vue.defineComponent)({
  name: 'VxeTooltip',
  props: {
    modelValue: Boolean,
    size: {
      type: String,
      default: function () {
        return _conf.default.tooltip.size || _conf.default.size;
      }
    },
    trigger: {
      type: String,
      default: function () {
        return _conf.default.tooltip.trigger;
      }
    },
    theme: {
      type: String,
      default: function () {
        return _conf.default.tooltip.theme;
      }
    },
    content: {
      type: [String, Number],
      default: null
    },
    useHTML: Boolean,
    zIndex: [String, Number],
    popupClassName: [String, Function],
    isArrow: {
      type: Boolean,
      default: true
    },
    enterable: Boolean,
    enterDelay: {
      type: Number,
      default: function () {
        return _conf.default.tooltip.enterDelay;
      }
    },
    leaveDelay: {
      type: Number,
      default: function () {
        return _conf.default.tooltip.leaveDelay;
      }
    }
  },
  emits: ['update:modelValue'],
  setup: function (props, context) {
    var slots = context.slots,
      emit = context.emit;
    var xID = _xeUtils.default.uniqueId();
    var computeSize = (0, _size.useSize)(props);
    var reactData = (0, _vue.reactive)({
      target: null,
      isUpdate: false,
      visible: false,
      tipContent: '',
      tipActive: false,
      tipTarget: null,
      tipZindex: 0,
      tipStore: {
        style: {},
        placement: '',
        arrowStyle: {}
      }
    });
    var refElem = (0, _vue.ref)();
    var refMaps = {
      refElem: refElem
    };
    var $xetooltip = {
      xID: xID,
      props: props,
      context: context,
      reactData: reactData,
      getRefMaps: function () {
        return refMaps;
      }
    };
    var tooltipMethods = {};
    var updateTipStyle = function () {
      var tipTarget = reactData.tipTarget,
        tipStore = reactData.tipStore;
      if (tipTarget) {
        var _a = (0, _dom.getDomNode)(),
          scrollTop = _a.scrollTop,
          scrollLeft = _a.scrollLeft,
          visibleWidth = _a.visibleWidth;
        var _b = (0, _dom.getAbsolutePos)(tipTarget),
          top_1 = _b.top,
          left = _b.left;
        var el = refElem.value;
        var marginSize = 6;
        var offsetHeight = el.offsetHeight;
        var offsetWidth = el.offsetWidth;
        var tipLeft = left;
        var tipTop = top_1 - offsetHeight - marginSize;
        tipLeft = Math.max(marginSize, left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2));
        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize;
        }
        if (top_1 - offsetHeight < scrollTop + marginSize) {
          tipStore.placement = 'bottom';
          tipTop = top_1 + tipTarget.offsetHeight + marginSize;
        }
        tipStore.style.top = "".concat(tipTop, "px");
        tipStore.style.left = "".concat(tipLeft, "px");
        tipStore.arrowStyle.left = "".concat(left - tipLeft + tipTarget.offsetWidth / 2, "px");
      }
    };
    var updateValue = function (value) {
      if (value !== reactData.visible) {
        reactData.visible = value;
        reactData.isUpdate = true;
        emit('update:modelValue', value);
      }
    };
    var updateZindex = function () {
      if (reactData.tipZindex < (0, _utils.getLastZIndex)()) {
        reactData.tipZindex = (0, _utils.nextZIndex)();
      }
    };
    var clickEvent = function () {
      if (reactData.visible) {
        tooltipMethods.close();
      } else {
        tooltipMethods.open();
      }
    };
    var targetMouseenterEvent = function () {
      tooltipMethods.open();
    };
    var targetMouseleaveEvent = function () {
      var trigger = props.trigger,
        enterable = props.enterable,
        leaveDelay = props.leaveDelay;
      reactData.tipActive = false;
      if (enterable && trigger === 'hover') {
        setTimeout(function () {
          if (!reactData.tipActive) {
            tooltipMethods.close();
          }
        }, leaveDelay);
      } else {
        tooltipMethods.close();
      }
    };
    var wrapperMouseenterEvent = function () {
      reactData.tipActive = true;
    };
    var wrapperMouseleaveEvent = function () {
      var trigger = props.trigger,
        enterable = props.enterable,
        leaveDelay = props.leaveDelay;
      reactData.tipActive = false;
      if (enterable && trigger === 'hover') {
        setTimeout(function () {
          if (!reactData.tipActive) {
            tooltipMethods.close();
          }
        }, leaveDelay);
      }
    };
    var showTip = function () {
      var tipStore = reactData.tipStore;
      var el = refElem.value;
      if (el) {
        var parentNode = el.parentNode;
        if (!parentNode) {
          document.body.appendChild(el);
        }
      }
      updateValue(true);
      updateZindex();
      tipStore.placement = 'top';
      tipStore.style = {
        width: 'auto',
        left: 0,
        top: 0,
        zIndex: props.zIndex || reactData.tipZindex
      };
      tipStore.arrowStyle = {
        left: '50%'
      };
      return tooltipMethods.updatePlacement();
    };
    var showDelayTip = _xeUtils.default.debounce(function () {
      if (reactData.tipActive) {
        showTip();
      }
    }, props.enterDelay, {
      leading: false,
      trailing: true
    });
    tooltipMethods = {
      dispatchEvent: function (type, params, evnt) {
        emit(type, Object.assign({
          $tooltip: $xetooltip,
          $event: evnt
        }, params));
      },
      open: function (target, content) {
        return tooltipMethods.toVisible(target || reactData.target, content);
      },
      close: function () {
        reactData.tipTarget = null;
        reactData.tipActive = false;
        Object.assign(reactData.tipStore, {
          style: {},
          placement: '',
          arrowStyle: null
        });
        updateValue(false);
        return (0, _vue.nextTick)();
      },
      toVisible: function (target, content) {
        if (target) {
          var trigger = props.trigger,
            enterDelay = props.enterDelay;
          reactData.tipActive = true;
          reactData.tipTarget = target;
          if (content) {
            reactData.tipContent = content;
          }
          if (enterDelay && trigger === 'hover') {
            showDelayTip();
          } else {
            return showTip();
          }
        }
        return (0, _vue.nextTick)();
      },
      updatePlacement: function () {
        return (0, _vue.nextTick)().then(function () {
          var tipTarget = reactData.tipTarget;
          var el = refElem.value;
          if (tipTarget && el) {
            updateTipStyle();
            return (0, _vue.nextTick)().then(updateTipStyle);
          }
        });
      },
      isActived: function () {
        return reactData.tipActive;
      },
      setActived: function (actived) {
        reactData.tipActive = !!actived;
      }
    };
    Object.assign($xetooltip, tooltipMethods);
    (0, _vue.watch)(function () {
      return props.content;
    }, function () {
      reactData.tipContent = props.content;
    });
    (0, _vue.watch)(function () {
      return props.modelValue;
    }, function () {
      if (!reactData.isUpdate) {
        if (props.modelValue) {
          tooltipMethods.open();
        } else {
          tooltipMethods.close();
        }
      }
      reactData.isUpdate = false;
    });
    (0, _vue.onMounted)(function () {
      (0, _vue.nextTick)(function () {
        var trigger = props.trigger,
          content = props.content,
          modelValue = props.modelValue;
        var wrapperElem = refElem.value;
        if (wrapperElem) {
          var parentNode_1 = wrapperElem.parentNode;
          if (parentNode_1) {
            reactData.tipContent = content;
            reactData.tipZindex = (0, _utils.nextZIndex)();
            _xeUtils.default.arrayEach(wrapperElem.children, function (elem, index) {
              if (index > 1) {
                parentNode_1.insertBefore(elem, wrapperElem);
                if (!reactData.target) {
                  reactData.target = elem;
                }
              }
            });
            parentNode_1.removeChild(wrapperElem);
            var target = reactData.target;
            if (target) {
              if (trigger === 'hover') {
                target.onmouseenter = targetMouseenterEvent;
                target.onmouseleave = targetMouseleaveEvent;
              } else if (trigger === 'click') {
                target.onclick = clickEvent;
              }
            }
            if (modelValue) {
              tooltipMethods.open();
            }
          }
        }
      });
    });
    (0, _vue.onBeforeUnmount)(function () {
      var trigger = props.trigger;
      var target = reactData.target;
      var wrapperElem = refElem.value;
      if (wrapperElem) {
        var parentNode = wrapperElem.parentNode;
        if (parentNode) {
          parentNode.removeChild(wrapperElem);
        }
      }
      if (target) {
        if (trigger === 'hover') {
          target.onmouseenter = null;
          target.onmouseleave = null;
        } else if (trigger === 'click') {
          target.onclick = null;
        }
      }
    });
    var renderContent = function () {
      var useHTML = props.useHTML;
      var tipContent = reactData.tipContent;
      var contentSlot = slots.content;
      if (contentSlot) {
        return (0, _vue.h)('div', {
          key: 1,
          class: 'vxe-table--tooltip-content'
        }, (0, _vn.getSlotVNs)(contentSlot({})));
      }
      if (useHTML) {
        return (0, _vue.h)('div', {
          key: 2,
          class: 'vxe-table--tooltip-content',
          innerHTML: tipContent
        });
      }
      return (0, _vue.h)('div', {
        key: 3,
        class: 'vxe-table--tooltip-content'
      }, (0, _utils.formatText)(tipContent));
    };
    var renderVN = function () {
      var _a;
      var popupClassName = props.popupClassName,
        theme = props.theme,
        isArrow = props.isArrow,
        enterable = props.enterable;
      var tipActive = reactData.tipActive,
        visible = reactData.visible,
        tipStore = reactData.tipStore;
      var defaultSlot = slots.default;
      var vSize = computeSize.value;
      var ons;
      if (enterable) {
        ons = {
          onMouseenter: wrapperMouseenterEvent,
          onMouseleave: wrapperMouseleaveEvent
        };
      }
      return (0, _vue.h)('div', __assign({
        ref: refElem,
        class: ['vxe-table--tooltip-wrapper', "theme--".concat(theme), popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
          $tooltip: $xetooltip
        }) : popupClassName : '', (_a = {}, _a["size--".concat(vSize)] = vSize, _a["placement--".concat(tipStore.placement)] = tipStore.placement, _a['is--enterable'] = enterable, _a['is--visible'] = visible, _a['is--arrow'] = isArrow, _a['is--active'] = tipActive, _a)],
        style: tipStore.style
      }, ons), __spreadArray([renderContent(), (0, _vue.h)('div', {
        class: 'vxe-table--tooltip-arrow',
        style: tipStore.arrowStyle
      })], defaultSlot ? (0, _vn.getSlotVNs)(defaultSlot({})) : [], true));
    };
    $xetooltip.renderVN = renderVN;
    return $xetooltip;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;