tdesign-vue/lib/popup/popup.js

tdesign-vue

/**
 * tdesign v1.14.1
 * (c) 2025 tdesign
 * @license MIT
 */

import _typeof from '@babel/runtime/helpers/typeof';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { createPopper } from '@popperjs/core';
import { debounce } from 'lodash-es';
import { on, once, off } from '../utils/dom.js';
import { renderContent, renderTNodeJSX } from '../utils/render-tnode.js';
import { getIEVersion } from '../utils/helper.js';
import setStyle from '../_common/js/utils/setStyle.js';
import popupProps from './props.js';
import Container from './container.js';
import { getClassPrefixMixins, getAttachConfigMixins } from '../config-provider/config-receiver.js';
import mixins from '../utils/mixins.js';
import { emitEvent } from '../utils/event.js';
import { triggers, defaultVisibleDelay, attachListeners, getPopperPlacement } from './utils.js';
import 'vue';
import 'raf';
import '../utils/easing.js';
import '@babel/runtime/helpers/readOnlyError';
import '@vue/composition-api';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import '../config-provider/context.js';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-ba613a02.js';
import '../_chunks/dep-fdb1b253.js';
import 'dayjs';
import '../_common/js/global-config/t.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classPrefixMixins = getClassPrefixMixins("popup");
var injectionKey = "__T_POPUP";
var Popup = mixins(classPrefixMixins, getAttachConfigMixins("popup")).extend({
  name: "TPopup",
  provide: function provide() {
    return _defineProperty({}, injectionKey, this);
  },
  inject: {
    popup: {
      from: injectionKey,
      "default": void 0
    }
  },
  props: _objectSpread(_objectSpread({}, popupProps), {}, {
    expandAnimation: {
      type: Boolean
    },
    updateScrollTop: {
      type: Function
    }
  }),
  data: function data() {
    return {
      popper: null,
      timeout: null,
      hasDocumentEvent: false,
      visibleState: 0,
      mouseInRange: false,
      contentClicked: false,
      isLeaving: false
    };
  },
  computed: {
    overlayClasses: function overlayClasses() {
      return ["".concat(this.componentName, "__content"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(this.componentName, "__content--text"), this.content === "string"), "".concat(this.componentName, "__content--arrow"), this.showArrow), this.commonStatusClassName.disabled, this.disabled), this.overlayInnerClassName];
    },
    hasTrigger: function hasTrigger() {
      var _this = this;
      return triggers.reduce(function (map, trigger) {
        return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, trigger, _this.trigger.includes(trigger)));
      }, {});
    },
    normalizedDelay: function normalizedDelay() {
      var _this$delay, _delay$;
      var delay = [].concat((_this$delay = this.delay) !== null && _this$delay !== void 0 ? _this$delay : defaultVisibleDelay);
      return {
        open: delay[0],
        close: (_delay$ = delay[1]) !== null && _delay$ !== void 0 ? _delay$ : delay[0]
      };
    },
    computeAttach: function computeAttach() {
      return this.attach || this.globalAttach();
    }
  },
  watch: {
    visible: function visible(_visible) {
      var _this2 = this;
      var hasTrigger = this.hasTrigger,
        triggerEl = this.$el;
      if (_visible) {
        this.preventClosing(true);
        if (!this.hasDocumentEvent) {
          on(document, "mousedown", this.handleDocumentClick, true);
          this.hasDocumentEvent = true;
        }
        if (triggerEl && hasTrigger.focus) {
          once(triggerEl, "keydown", function (ev) {
            if (ev.code === "Escape") {
              _this2.handleClose({
                trigger: "keydown-esc"
              });
            }
          });
        }
        this.$nextTick(function () {
          _this2.popupMounted();
          _this2.updateOverlayInnerStyle();
        });
      } else {
        this.preventClosing(false);
        off(document, "mousedown", this.handleDocumentClick, true);
        this.hasDocumentEvent = false;
        this.mouseInRange = false;
      }
    },
    overlayInnerStyle: function overlayInnerStyle() {
      this.updateOverlayInnerStyle();
      this.updatePopper();
    },
    placement: function placement() {
      var _this$popper;
      (_this$popper = this.popper) === null || _this$popper === void 0 || _this$popper.destroy();
      this.popper = null;
      this.updatePopper();
    },
    contentClicked: function contentClicked(clicked) {
      if (this.popup) {
        this.popup.contentClicked = clicked;
      }
    }
  },
  mounted: function mounted() {
    var _this3 = this;
    var trigger = attachListeners(this.$el);
    var updateTrigger = function updateTrigger() {
      trigger.clean();
      var hasTrigger = _this3.hasTrigger;
      if (hasTrigger.hover) {
        trigger.add("mouseenter", function () {
          return _this3.handleOpen({
            trigger: "trigger-element-hover"
          });
        });
        trigger.add("mouseleave", function () {
          return _this3.handleClose({
            trigger: "trigger-element-hover"
          });
        });
      } else if (hasTrigger.focus) {
        trigger.add("focusin", function () {
          return _this3.handleOpen({
            trigger: "trigger-element-focus"
          });
        });
        trigger.add("focusout", function () {
          return _this3.handleClose({
            trigger: "trigger-element-blur"
          });
        });
      } else if (hasTrigger.click) {
        trigger.add("click", function (e) {
          _this3.handleToggle({
            e: e,
            trigger: "trigger-element-click"
          });
          if (getIEVersion() < 11) {
            _this3.handleDocumentClick(e);
          }
        });
      } else if (hasTrigger["context-menu"]) {
        trigger.add("contextmenu", function (e) {
          e.preventDefault();
          e.button === 2 && _this3.handleToggle({
            trigger: "context-menu"
          });
        });
      }
    };
    updateTrigger();
    this.$watch("trigger", updateTrigger);
    if (this.visible) {
      if (!this.hasDocumentEvent) {
        on(document, "mousedown", this.handleDocumentClick, true);
        this.hasDocumentEvent = true;
      }
    }
  },
  updated: function updated() {
    var _this$$refs$container;
    (_this$$refs$container = this.$refs.container) === null || _this$$refs$container === void 0 || _this$$refs$container.updateContent();
  },
  beforeDestroy: function beforeDestroy() {
    if (this.visible) {
      var _this$popup;
      (_this$popup = this.popup) === null || _this$popup === void 0 || _this$popup.preventClosing(false);
    }
    this.destroyPopper();
    off(document, "mousedown", this.handleDocumentClick, true);
    clearTimeout(this.timeout);
  },
  methods: {
    updatePopper: function updatePopper() {
      var _this4 = this;
      var triggerEl = this.$el;
      var popperEl = this.$refs.popper;
      if (!popperEl || !this.visible) return;
      if (this.popper) {
        this.popper.update();
        return;
      }
      this.popper = createPopper(triggerEl, popperEl, _objectSpread({
        modifiers: getIEVersion() > 9 ? [] : [{
          name: "computeStyles",
          options: {
            gpuAcceleration: false
          }
        }],
        placement: getPopperPlacement(this.placement),
        onFirstUpdate: function onFirstUpdate() {
          _this4.$nextTick(_this4.updatePopper);
        }
      }, this.popperOptions));
    },
    popupMounted: function popupMounted() {
      var _this$$refs;
      var overlayEl = (_this$$refs = this.$refs) === null || _this$$refs === void 0 ? void 0 : _this$$refs.overlay;
      if (overlayEl) {
        var _this$updateScrollTop;
        (_this$updateScrollTop = this.updateScrollTop) === null || _this$updateScrollTop === void 0 || _this$updateScrollTop.call(this, overlayEl);
      }
    },
    getOverlayStyle: function getOverlayStyle() {
      var _this$$refs2;
      var overlayStyle = this.overlayStyle;
      var triggerEl = this.$el;
      var overlayEl = (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : _this$$refs2.overlay;
      if (typeof overlayStyle === "function") {
        return overlayStyle(triggerEl, overlayEl);
      }
      if (_typeof(overlayStyle) === "object") {
        return overlayStyle;
      }
    },
    updateOverlayInnerStyle: function updateOverlayInnerStyle() {
      var _this$$refs3;
      var overlayInnerStyle = this.overlayInnerStyle;
      var triggerEl = this.$el;
      var overlayEl = (_this$$refs3 = this.$refs) === null || _this$$refs3 === void 0 ? void 0 : _this$$refs3.overlay;
      if (!triggerEl || !overlayEl) return;
      if (typeof overlayInnerStyle === "function") {
        setStyle(overlayEl, overlayInnerStyle(triggerEl, overlayEl));
      } else if (_typeof(overlayInnerStyle) === "object") {
        setStyle(overlayEl, overlayInnerStyle);
      }
    },
    destroyPopper: function destroyPopper() {
      if (this.popper) {
        this.popper.destroy();
        this.popper = null;
      }
      if (this.destroyOnClose) {
        var _this$$refs$container2;
        (_this$$refs$container2 = this.$refs.container) === null || _this$$refs$container2 === void 0 || _this$$refs$container2.unmountContent();
      }
    },
    handleToggle: function handleToggle(context) {
      this.emitPopVisible(!this.visible, context);
    },
    handleOnScroll: function handleOnScroll(e) {
      var _this5 = this;
      var _e$target = e.target,
        scrollTop = _e$target.scrollTop,
        clientHeight = _e$target.clientHeight,
        scrollHeight = _e$target.scrollHeight;
      var debounceOnScrollBottom = debounce(function (e2) {
        return emitEvent(_this5, "scroll-to-bottom", {
          e: e2
        });
      }, 100);
      if (clientHeight + Math.floor(scrollTop) === scrollHeight) {
        debounceOnScrollBottom(e);
      }
      emitEvent(this, "scroll", {
        e: e
      });
    },
    handleOpen: function handleOpen(context) {
      var _this6 = this;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(function () {
        _this6.emitPopVisible(true, context);
      }, this.hasTrigger.click ? 0 : this.normalizedDelay.open);
    },
    handleClose: function handleClose(context) {
      var _this7 = this;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(function () {
        _this7.emitPopVisible(false, context);
      }, this.hasTrigger.click ? 0 : this.normalizedDelay.close);
    },
    handleDocumentClick: function handleDocumentClick(ev) {
      var _this8 = this;
      setTimeout(function () {
        if (_this8.contentClicked) {
          setTimeout(function () {
            _this8.contentClicked = false;
          });
          return;
        }
        var triggerEl = _this8.$el;
        if (triggerEl.contains(ev.target)) return;
        var popperEl = _this8.$refs.popper;
        if (popperEl !== null && popperEl !== void 0 && popperEl.contains(ev.target)) return;
        _this8.visibleState = 0;
        _this8.emitPopVisible(false, {
          trigger: "document",
          e: ev
        });
      });
    },
    emitPopVisible: function emitPopVisible(visible, context) {
      if (this.disabled || visible === !!this.visible) return;
      if (!visible && this.visibleState > 1) return;
      if (visible && this.mouseInRange) return;
      this.$emit("visible-change", visible, context);
      if (typeof this.onVisibleChange === "function") {
        this.onVisibleChange(visible, context);
      }
    },
    onMouseEnter: function onMouseEnter() {
      if (this.destroyOnClose && this.isLeaving) {
        return;
      }
      this.mouseInRange = true;
      this.handleOpen({});
    },
    onMouseLeave: function onMouseLeave(ev) {
      if (this.visibleState > 1) {
        var rect = this.$refs.popper.getBoundingClientRect();
        if (ev.x > rect.x && ev.x < rect.x + rect.width && ev.y > rect.y && ev.y < rect.y + rect.height) return;
      }
      this.mouseInRange = false;
      this.handleClose({});
      var parent = this.popup;
      if (parent !== null && parent !== void 0 && parent.mouseInRange) {
        parent.onMouseLeave(ev);
      }
    },
    onBeforeEnter: function onBeforeEnter() {
      if (this.visible) {
        this.updatePopper();
      }
    },
    onAfterEnter: function onAfterEnter() {
      if (this.visible) {
        this.updatePopper();
      }
    },
    onLeave: function onLeave() {
      this.isLeaving = true;
    },
    onAfterLeave: function onAfterLeave() {
      this.isLeaving = false;
      this.destroyPopper();
    },
    preventClosing: function preventClosing(preventing) {
      var parent = this.popup;
      parent === null || parent === void 0 || parent.preventClosing(preventing);
      if (preventing) {
        this.visibleState += 1;
      } else if (this.visibleState) {
        this.visibleState -= 1;
        if (!this.visibleState) {
          this.emitPopVisible(false, {});
          if (parent !== null && parent !== void 0 && parent.hasTrigger.hover && !(parent !== null && parent !== void 0 && parent.mouseInRange)) {
            parent.emitPopVisible(false, {});
          }
        }
      }
    }
  },
  render: function render(h) {
    var _this9 = this;
    var visible = this.visible,
      destroyOnClose = this.destroyOnClose,
      hasTrigger = this.hasTrigger,
      handleOnScroll = this.handleOnScroll;
    var ref = renderContent(this, "default", "triggerElement");
    var content = renderTNodeJSX(this, "content");
    var hidePopup = this.hideEmptyPopup && ["", void 0, null].includes(content);
    var overlay = visible || !destroyOnClose ? h("div", {
      "class": [this.componentName, this.overlayClassName],
      ref: "popper",
      style: [hidePopup && {
        visibility: "hidden",
        pointerEvents: "none"
      }, {
        zIndex: this.zIndex
      }, this.getOverlayStyle()],
      directives: destroyOnClose ? void 0 : [{
        name: "show",
        rawName: "v-show",
        value: visible && !hidePopup,
        expression: "visible"
      }],
      on: _objectSpread({
        mousedown: function mousedown() {
          _this9.contentClicked = true;
        }
      }, hasTrigger.hover && {
        mouseenter: this.onMouseEnter,
        mouseleave: this.onMouseLeave
      })
    }, [h("div", {
      "class": this.overlayClasses,
      ref: "overlay",
      on: {
        scroll: function scroll(e) {
          handleOnScroll(e);
        }
      }
    }, [content, this.showArrow && h("div", {
      "class": "".concat(this.componentName, "__arrow")
    })])]) : null;
    return h(Container, {
      "ref": "container",
      "on": {
        "contentMounted": function contentMounted() {
          if (visible) {
            _this9.updatePopper();
            _this9.updateOverlayInnerStyle();
          }
        },
        "resize": function resize() {
          if (visible) {
            _this9.updatePopper();
            _this9.updateOverlayInnerStyle();
          }
        }
      },
      "attrs": {
        "parent": this,
        "visible": visible,
        "attach": function attach() {
          return {
            attach: _this9.computeAttach,
            current: _this9.$el
          };
        }
      }
    }, [h("transition", {
      "slot": "content",
      "attrs": {
        "name": this.expandAnimation ? "".concat(this.componentName, "--animation-expand") : "".concat(this.componentName, "--animation"),
        "appear": true
      },
      "on": {
        "beforeEnter": this.onBeforeEnter,
        "afterEnter": this.onAfterEnter,
        "leave": this.onLeave,
        "afterLeave": this.onAfterLeave
      }
    }, [overlay]), ref]);
  }
});

export { Popup as default };
//# sourceMappingURL=popup.js.map