tdesign-vue
Version:
252 lines (244 loc) • 10.1 kB
JavaScript
/**
* tdesign v1.11.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _typeof = require('@babel/runtime/helpers/typeof');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Vue = require('vue');
var core = require('@popperjs/core');
var utils_dom = require('../utils/dom.js');
var popup_props = require('./props.js');
var configProvider_configReceiver = require('../config-provider/config-receiver.js');
var utils_renderTnode = require('../utils/render-tnode.js');
var popup_utils = require('./utils.js');
var utils_mixins = require('../utils/mixins.js');
var _common_js_log_log = require('../_common/js/log/log.js');
require('raf');
require('../utils/easing.js');
require('../_chunks/dep-738b4f21.js');
require('../_chunks/dep-a4308f57.js');
require('../_chunks/dep-fcf0662d.js');
require('../_chunks/dep-e4278c54.js');
require('../_chunks/dep-07fb8c0e.js');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/zh_CN.js');
require('../_chunks/dep-a4a18104.js');
require('../_chunks/dep-27dd8cc6.js');
require('dayjs');
require('../_chunks/dep-87c765cc.js');
require('../_chunks/dep-75cd6d52.js');
require('../_chunks/dep-b1a02818.js');
require('../_chunks/dep-3d8ab37d.js');
require('../_chunks/dep-ecccff93.js');
require('../_chunks/dep-a4cecac4.js');
require('../_chunks/dep-ab142eaf.js');
require('../_chunks/dep-6ad3de7c.js');
require('../_chunks/dep-8b1e056e.js');
require('../_chunks/dep-5db8defc.js');
require('../_chunks/dep-6e4c473c.js');
require('../_chunks/dep-234b7c02.js');
require('../_chunks/dep-a4747856.js');
require('../_chunks/dep-932dd69e.js');
require('../_chunks/dep-9f4caea4.js');
require('../_chunks/dep-dbd838d6.js');
require('../_chunks/dep-b3120c1b.js');
require('../_chunks/dep-68ba2357.js');
require('../_chunks/dep-173eb46c.js');
require('@babel/runtime/helpers/readOnlyError');
require('@vue/composition-api');
require('../_chunks/dep-7c854ec6.js');
require('../_chunks/dep-eceed11d.js');
require('../_chunks/dep-201f7798.js');
require('../_chunks/dep-d3015b4c.js');
require('../_chunks/dep-f8a85d6a.js');
require('../_chunks/dep-5b117689.js');
require('../_chunks/dep-6478392e.js');
require('../_chunks/dep-47bca35e.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
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__default["default"](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 = configProvider_configReceiver.getClassPrefixMixins("popup");
var popperInstance;
var overlayInstance;
var timeout;
var triggerEl;
var triggerType = function triggerType(triggerProps) {
return popup_utils.triggers.reduce(function (map, trigger) {
return _objectSpread(_objectSpread({}, map), {}, _defineProperty__default["default"]({}, trigger, triggerProps.includes(trigger)));
}, {});
};
var Overlay = utils_mixins["default"](classPrefixMixins).extend({
name: "TPopupOverlay",
data: function data() {
return {
visibleState: false,
contentClicked: false
};
},
props: _objectSpread(_objectSpread({}, popup_props["default"]), {}, {
triggerEl: {
validator: function validator(value) {
if (!(value instanceof HTMLElement)) {
_common_js_log_log["default"].warn("Popup", "Invalid value for prop \"triggerEl\": expected an HTMLElement, but got ".concat(_typeof__default["default"](value), "."));
return false;
}
return true;
},
required: true
}
}),
computed: {
hasTrigger: function hasTrigger() {
return triggerType(this.trigger);
},
overlayClasses: function overlayClasses() {
return ["".concat(this.componentName, "__content"), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".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 () {
utils_dom.on(document, "click", _this2.handleDocumentClick);
});
},
beforeDestroy: function beforeDestroy() {
utils_dom.off(document, "click", this.handleDocumentClick);
},
render: function render(h) {
var _this3 = this;
var content = utils_renderTnode.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 = utils_dom.getAttach(trigger);
if (triggerEl && hasTrigger.click) {
return;
}
triggerEl = currentTriggerEl;
removeOverlayInstance();
var attach = utils_dom.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);
};
utils_dom.once(triggerEl, "mouseleave", mouseoutEvent);
} else if (hasTrigger.focus) {
var focusoutEvent = function focusoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
};
utils_dom.once(triggerEl, "focusout", focusoutEvent);
}
popperInstance = core.createPopper(triggerEl, overlayInstance, _objectSpread({
placement: popup_utils.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__default["default"].prototype.$popup = createPopupPlugin;
};
exports.PopupPlugin = PopupPlugin;
exports.createPopupPlugin = createPopupPlugin;
exports["default"] = PopupPlugin;
//# sourceMappingURL=plugin.js.map