tdesign-vue
Version:
215 lines (211 loc) • 8.34 kB
JavaScript
/**
* tdesign v1.12.1
* (c) 2025 tdesign
* @license MIT
*/
import _typeof from '@babel/runtime/helpers/typeof';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import Vue from 'vue';
import { createPopper } from '@popperjs/core';
import { on, off, getAttach, once } from '../utils/dom.js';
import popupProps from './props.js';
import { getClassPrefixMixins } from '../config-provider/config-receiver.js';
import { renderTNodeJSX } from '../utils/render-tnode.js';
import { triggers, getPopperPlacement } from './utils.js';
import mixins from '../utils/mixins.js';
import '../_common/js/log/index.js';
import log from '../_common/js/log/log.js';
import 'raf';
import 'lodash-es';
import '../utils/easing.js';
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-c44a474d.js';
import '../_chunks/dep-d639fbd7.js';
import 'dayjs';
import '../_chunks/dep-3c66615e.js';
import '../config-provider/type.js';
import '../_common/js/global-config/t.js';
import '@babel/runtime/helpers/slicedToArray';
import '@babel/runtime/helpers/readOnlyError';
import '@vue/composition-api';
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 popperInstance;
var overlayInstance;
var timeout;
var triggerEl;
var triggerType = function triggerType(triggerProps) {
return triggers.reduce(function (map, trigger) {
return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, trigger, triggerProps.includes(trigger)));
}, {});
};
var Overlay = mixins(classPrefixMixins).extend({
name: "TPopupOverlay",
data: function data() {
return {
visibleState: false,
contentClicked: false
};
},
props: _objectSpread(_objectSpread({}, popupProps), {}, {
triggerEl: {
validator: function validator(value) {
if (!(value instanceof HTMLElement)) {
log.warn("Popup", "Invalid value for prop \"triggerEl\": expected an HTMLElement, but got ".concat(_typeof(value), "."));
return false;
}
return true;
},
required: true
}
}),
computed: {
hasTrigger: function hasTrigger() {
return triggerType(this.trigger);
},
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];
}
},
methods: {
handleDocumentClick: function handleDocumentClick(e) {
var _triggerEl,
_this = this;
if ((_triggerEl = triggerEl) !== null && _triggerEl !== void 0 && _triggerEl.contains(e.target)) return;
if (this.contentClicked) {
setTimeout(function () {
_this.contentClicked = false;
});
} else {
var _popperInstance;
if (this.destroyOnClose) {
this.visibleState = false;
}
(_popperInstance = popperInstance) === null || _popperInstance === void 0 || _popperInstance.destroy();
popperInstance = null;
triggerEl = null;
}
},
handleMouseLeave: function handleMouseLeave() {
var _popperInstance2;
if (this.destroyOnClose) {
this.visibleState = false;
}
(_popperInstance2 = popperInstance) === null || _popperInstance2 === void 0 || _popperInstance2.destroy();
popperInstance = null;
},
handleMouseEnter: function handleMouseEnter() {
clearTimeout(timeout);
}
},
created: function created() {
this.visibleState = true;
},
mounted: function mounted() {
var _this2 = this;
setTimeout(function () {
on(document, "click", _this2.handleDocumentClick);
});
},
beforeDestroy: function beforeDestroy() {
off(document, "click", this.handleDocumentClick);
},
render: function render(h) {
var _this3 = this;
var content = renderTNodeJSX(this, "content");
var hidePopup = this.hideEmptyPopup && ["", void 0, null].includes(content);
var handleMouseLeave = this.handleMouseLeave,
handleMouseEnter = this.handleMouseEnter,
visibleState = this.visibleState,
hasTrigger = this.hasTrigger;
var renderNode = h("div", {
"class": [this.componentName, this.overlayClassName],
ref: "popper",
style: [hidePopup && {
visibility: "hidden",
pointerEvents: "none"
}, {
zIndex: this.zIndex
}, this.overlayStyle],
on: _objectSpread({
mousedown: function mousedown() {
_this3.contentClicked = true;
}
}, hasTrigger.hover && {
mouseenter: handleMouseEnter,
mouseleave: handleMouseLeave
})
}, [h("div", {
ref: "overlay",
"class": this.overlayClasses,
style: this.overlayInnerStyle
}, [content, this.showArrow && h("div", {
"class": "".concat(this.componentName, "__arrow")
})])]);
return visibleState ? h("transition", {
"slot": "content",
"attrs": {
"name": "".concat(this.componentName, "--animation"),
"appear": true
}
}, [renderNode]) : null;
}
});
var removeOverlayInstance = function removeOverlayInstance() {
if (overlayInstance) {
overlayInstance.remove();
overlayInstance = null;
}
if (popperInstance) {
popperInstance.destroy();
popperInstance = null;
}
};
var createPopupPlugin = function createPopupPlugin(trigger, content, popupProps) {
var _popupProps$delay, _delay$;
var hasTrigger = triggerType((popupProps === null || popupProps === void 0 ? void 0 : popupProps.trigger) || "hover");
var currentTriggerEl = getAttach(trigger);
if (triggerEl && hasTrigger.click) {
return;
}
triggerEl = currentTriggerEl;
removeOverlayInstance();
var attach = getAttach((popupProps === null || popupProps === void 0 ? void 0 : popupProps.attach) || "body");
var delay = [].concat((_popupProps$delay = popupProps === null || popupProps === void 0 ? void 0 : popupProps.delay) !== null && _popupProps$delay !== void 0 ? _popupProps$delay : [250, 150]);
var closeDelay = (_delay$ = delay[1]) !== null && _delay$ !== void 0 ? _delay$ : delay[0];
if (attach === document.body) {
var popupDom = document.createElement("div");
document.body.appendChild(popupDom);
attach = popupDom;
}
overlayInstance = new Overlay({
propsData: _objectSpread(_objectSpread({}, popupProps), {}, {
content: content,
triggerEl: triggerEl
})
}).$mount(attach).$el;
if (hasTrigger.hover) {
var mouseoutEvent = function mouseoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
};
once(triggerEl, "mouseleave", mouseoutEvent);
} else if (hasTrigger.focus) {
var focusoutEvent = function focusoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
};
once(triggerEl, "focusout", focusoutEvent);
}
popperInstance = createPopper(triggerEl, overlayInstance, _objectSpread({
placement: getPopperPlacement((popupProps === null || popupProps === void 0 ? void 0 : popupProps.placement) || "top")
}, popupProps === null || popupProps === void 0 ? void 0 : popupProps.popperOptions));
return popperInstance;
};
var PopupPlugin = createPopupPlugin;
PopupPlugin.install = function () {
Vue.prototype.$popup = createPopupPlugin;
};
export { PopupPlugin, createPopupPlugin, PopupPlugin as default };
//# sourceMappingURL=plugin.js.map