365 lines
12 KiB
JavaScript
365 lines
12 KiB
JavaScript
import { $dt } from '@primeuix/styled';
|
|
import { setAttribute, isTouchDevice, isClient, focus, absolutePosition, getOffset, addClass, addStyle } from '@primeuix/utils/dom';
|
|
import { ZIndex } from '@primeuix/utils/zindex';
|
|
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
|
|
import FocusTrap from 'primevue/focustrap';
|
|
import OverlayEventBus from 'primevue/overlayeventbus';
|
|
import Portal from 'primevue/portal';
|
|
import Ripple from 'primevue/ripple';
|
|
import BaseComponent from '@primevue/core/basecomponent';
|
|
import PopoverStyle from 'primevue/popover/style';
|
|
import { resolveComponent, resolveDirective, createBlock, openBlock, withCtx, createVNode, Transition, mergeProps, withDirectives, createCommentVNode, createElementBlock, renderSlot } from 'vue';
|
|
|
|
var script$1 = {
|
|
name: 'BasePopover',
|
|
"extends": BaseComponent,
|
|
props: {
|
|
dismissable: {
|
|
type: Boolean,
|
|
"default": true
|
|
},
|
|
appendTo: {
|
|
type: [String, Object],
|
|
"default": 'body'
|
|
},
|
|
baseZIndex: {
|
|
type: Number,
|
|
"default": 0
|
|
},
|
|
autoZIndex: {
|
|
type: Boolean,
|
|
"default": true
|
|
},
|
|
breakpoints: {
|
|
type: Object,
|
|
"default": null
|
|
},
|
|
closeOnEscape: {
|
|
type: Boolean,
|
|
"default": true
|
|
}
|
|
},
|
|
style: PopoverStyle,
|
|
provide: function provide() {
|
|
return {
|
|
$pcPopover: this,
|
|
$parentInstance: this
|
|
};
|
|
}
|
|
};
|
|
|
|
var script = {
|
|
name: 'Popover',
|
|
"extends": script$1,
|
|
inheritAttrs: false,
|
|
emits: ['show', 'hide'],
|
|
data: function data() {
|
|
return {
|
|
visible: false
|
|
};
|
|
},
|
|
watch: {
|
|
dismissable: {
|
|
immediate: true,
|
|
handler: function handler(newValue) {
|
|
if (newValue) {
|
|
this.bindOutsideClickListener();
|
|
} else {
|
|
this.unbindOutsideClickListener();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
selfClick: false,
|
|
target: null,
|
|
eventTarget: null,
|
|
outsideClickListener: null,
|
|
scrollHandler: null,
|
|
resizeListener: null,
|
|
container: null,
|
|
styleElement: null,
|
|
overlayEventListener: null,
|
|
documentKeydownListener: null,
|
|
beforeUnmount: function beforeUnmount() {
|
|
if (this.dismissable) {
|
|
this.unbindOutsideClickListener();
|
|
}
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
this.destroyStyle();
|
|
this.unbindResizeListener();
|
|
this.target = null;
|
|
if (this.container && this.autoZIndex) {
|
|
ZIndex.clear(this.container);
|
|
}
|
|
if (this.overlayEventListener) {
|
|
OverlayEventBus.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
}
|
|
this.container = null;
|
|
},
|
|
mounted: function mounted() {
|
|
if (this.breakpoints) {
|
|
this.createStyle();
|
|
}
|
|
},
|
|
methods: {
|
|
toggle: function toggle(event, target) {
|
|
if (this.visible) this.hide();else this.show(event, target);
|
|
},
|
|
show: function show(event, target) {
|
|
this.visible = true;
|
|
this.eventTarget = event.currentTarget;
|
|
this.target = target || event.currentTarget;
|
|
},
|
|
hide: function hide() {
|
|
this.visible = false;
|
|
},
|
|
onContentClick: function onContentClick() {
|
|
this.selfClick = true;
|
|
},
|
|
onEnter: function onEnter(el) {
|
|
var _this = this;
|
|
addStyle(el, {
|
|
position: 'absolute',
|
|
top: '0'
|
|
});
|
|
this.alignOverlay();
|
|
if (this.dismissable) {
|
|
this.bindOutsideClickListener();
|
|
}
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
if (this.autoZIndex) {
|
|
ZIndex.set('overlay', el, this.baseZIndex + this.$primevue.config.zIndex.overlay);
|
|
}
|
|
this.overlayEventListener = function (e) {
|
|
if (_this.container.contains(e.target)) {
|
|
_this.selfClick = true;
|
|
}
|
|
};
|
|
this.focus();
|
|
OverlayEventBus.on('overlay-click', this.overlayEventListener);
|
|
this.$emit('show');
|
|
if (this.closeOnEscape) {
|
|
this.bindDocumentKeyDownListener();
|
|
}
|
|
},
|
|
onLeave: function onLeave() {
|
|
this.unbindOutsideClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
this.unbindDocumentKeyDownListener();
|
|
OverlayEventBus.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
this.$emit('hide');
|
|
},
|
|
onAfterLeave: function onAfterLeave(el) {
|
|
if (this.autoZIndex) {
|
|
ZIndex.clear(el);
|
|
}
|
|
},
|
|
alignOverlay: function alignOverlay() {
|
|
absolutePosition(this.container, this.target, false);
|
|
var containerOffset = getOffset(this.container);
|
|
var targetOffset = getOffset(this.target);
|
|
var arrowLeft = 0;
|
|
if (containerOffset.left < targetOffset.left) {
|
|
arrowLeft = targetOffset.left - containerOffset.left;
|
|
}
|
|
this.container.style.setProperty($dt('popover.arrow.left').name, "".concat(arrowLeft, "px"));
|
|
if (containerOffset.top < targetOffset.top) {
|
|
this.container.setAttribute('data-p-popover-flipped', 'true');
|
|
!this.isUnstyled && addClass(this.container, 'p-popover-flipped');
|
|
}
|
|
},
|
|
onContentKeydown: function onContentKeydown(event) {
|
|
if (event.code === 'Escape' && this.closeOnEscape) {
|
|
this.hide();
|
|
focus(this.target);
|
|
}
|
|
},
|
|
onButtonKeydown: function onButtonKeydown(event) {
|
|
switch (event.code) {
|
|
case 'ArrowDown':
|
|
case 'ArrowUp':
|
|
case 'ArrowLeft':
|
|
case 'ArrowRight':
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
focus: function focus() {
|
|
var focusTarget = this.container.querySelector('[autofocus]');
|
|
if (focusTarget) {
|
|
focusTarget.focus();
|
|
}
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
if (event.code === 'Escape' && this.closeOnEscape) {
|
|
this.visible = false;
|
|
}
|
|
},
|
|
bindDocumentKeyDownListener: function bindDocumentKeyDownListener() {
|
|
if (!this.documentKeydownListener) {
|
|
this.documentKeydownListener = this.onKeyDown.bind(this);
|
|
window.document.addEventListener('keydown', this.documentKeydownListener);
|
|
}
|
|
},
|
|
unbindDocumentKeyDownListener: function unbindDocumentKeyDownListener() {
|
|
if (this.documentKeydownListener) {
|
|
window.document.removeEventListener('keydown', this.documentKeydownListener);
|
|
this.documentKeydownListener = null;
|
|
}
|
|
},
|
|
bindOutsideClickListener: function bindOutsideClickListener() {
|
|
var _this2 = this;
|
|
if (!this.outsideClickListener && isClient()) {
|
|
this.outsideClickListener = function (event) {
|
|
if (_this2.visible && !_this2.selfClick && !_this2.isTargetClicked(event)) {
|
|
_this2.visible = false;
|
|
}
|
|
_this2.selfClick = false;
|
|
};
|
|
document.addEventListener('click', this.outsideClickListener);
|
|
}
|
|
},
|
|
unbindOutsideClickListener: function unbindOutsideClickListener() {
|
|
if (this.outsideClickListener) {
|
|
document.removeEventListener('click', this.outsideClickListener);
|
|
this.outsideClickListener = null;
|
|
this.selfClick = false;
|
|
}
|
|
},
|
|
bindScrollListener: function bindScrollListener() {
|
|
var _this3 = this;
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, function () {
|
|
if (_this3.visible) {
|
|
_this3.visible = false;
|
|
}
|
|
});
|
|
}
|
|
this.scrollHandler.bindScrollListener();
|
|
},
|
|
unbindScrollListener: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
},
|
|
bindResizeListener: function bindResizeListener() {
|
|
var _this4 = this;
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this4.visible && !isTouchDevice()) {
|
|
_this4.visible = false;
|
|
}
|
|
};
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
},
|
|
unbindResizeListener: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
},
|
|
isTargetClicked: function isTargetClicked(event) {
|
|
return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
|
|
},
|
|
containerRef: function containerRef(el) {
|
|
this.container = el;
|
|
},
|
|
createStyle: function createStyle() {
|
|
if (!this.styleElement && !this.isUnstyled) {
|
|
var _this$$primevue;
|
|
this.styleElement = document.createElement('style');
|
|
this.styleElement.type = 'text/css';
|
|
setAttribute(this.styleElement, 'nonce', (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.csp) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.nonce);
|
|
document.head.appendChild(this.styleElement);
|
|
var innerHTML = '';
|
|
for (var breakpoint in this.breakpoints) {
|
|
innerHTML += "\n @media screen and (max-width: ".concat(breakpoint, ") {\n .p-popover[").concat(this.$attrSelector, "] {\n width: ").concat(this.breakpoints[breakpoint], " !important;\n }\n }\n ");
|
|
}
|
|
this.styleElement.innerHTML = innerHTML;
|
|
}
|
|
},
|
|
destroyStyle: function destroyStyle() {
|
|
if (this.styleElement) {
|
|
document.head.removeChild(this.styleElement);
|
|
this.styleElement = null;
|
|
}
|
|
},
|
|
onOverlayClick: function onOverlayClick(event) {
|
|
OverlayEventBus.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.target
|
|
});
|
|
}
|
|
},
|
|
directives: {
|
|
focustrap: FocusTrap,
|
|
ripple: Ripple
|
|
},
|
|
components: {
|
|
Portal: Portal
|
|
}
|
|
};
|
|
|
|
var _hoisted_1 = ["aria-modal"];
|
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
var _component_Portal = resolveComponent("Portal");
|
|
var _directive_focustrap = resolveDirective("focustrap");
|
|
return openBlock(), createBlock(_component_Portal, {
|
|
appendTo: _ctx.appendTo
|
|
}, {
|
|
"default": withCtx(function () {
|
|
return [createVNode(Transition, mergeProps({
|
|
name: "p-anchored-overlay",
|
|
onEnter: $options.onEnter,
|
|
onLeave: $options.onLeave,
|
|
onAfterLeave: $options.onAfterLeave
|
|
}, _ctx.ptm('transition')), {
|
|
"default": withCtx(function () {
|
|
return [$data.visible ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
|
|
key: 0,
|
|
ref: $options.containerRef,
|
|
role: "dialog",
|
|
"aria-modal": $data.visible,
|
|
onClick: _cache[3] || (_cache[3] = function () {
|
|
return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
|
|
}),
|
|
"class": _ctx.cx('root')
|
|
}, _ctx.ptmi('root')), [_ctx.$slots.container ? renderSlot(_ctx.$slots, "container", {
|
|
key: 0,
|
|
closeCallback: $options.hide,
|
|
keydownCallback: function keydownCallback(event) {
|
|
return $options.onButtonKeydown(event);
|
|
}
|
|
}) : (openBlock(), createElementBlock("div", mergeProps({
|
|
key: 1,
|
|
"class": _ctx.cx('content'),
|
|
onClick: _cache[0] || (_cache[0] = function () {
|
|
return $options.onContentClick && $options.onContentClick.apply($options, arguments);
|
|
}),
|
|
onMousedown: _cache[1] || (_cache[1] = function () {
|
|
return $options.onContentClick && $options.onContentClick.apply($options, arguments);
|
|
}),
|
|
onKeydown: _cache[2] || (_cache[2] = function () {
|
|
return $options.onContentKeydown && $options.onContentKeydown.apply($options, arguments);
|
|
})
|
|
}, _ctx.ptm('content')), [renderSlot(_ctx.$slots, "default")], 16))], 16, _hoisted_1)), [[_directive_focustrap]]) : createCommentVNode("", true)];
|
|
}),
|
|
_: 3
|
|
}, 16, ["onEnter", "onLeave", "onAfterLeave"])];
|
|
}),
|
|
_: 3
|
|
}, 8, ["appendTo"]);
|
|
}
|
|
|
|
script.render = render;
|
|
|
|
export { script as default };
|
|
//# sourceMappingURL=index.mjs.map
|