primevue 3.12.4 → 3.13.0

package/overlaypanel/overlaypanel.cjs.js

@@ -3,12 +3,14 @@
 var utils = require('primevue/utils');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Ripple = require('primevue/ripple');
+var Portal = require('primevue/portal');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
 var script = {
     name: 'OverlayPanel',
@@ -76,7 +78,7 @@ var script = {
         }
 
         if (this.overlayEventListener) {
-            OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
         }
 
@@ -125,14 +127,14 @@ var script = {
                 }
             };
 
-            OverlayEventBus__default['default'].on('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
             this.$emit('show');
         },
         onLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
-            OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
             this.$emit('hide');
         },
@@ -194,7 +196,7 @@ var script = {
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
-                    if (this.visible && !utils.DomHandler.isAndroid()) {
+                    if (this.visible && !utils.DomHandler.isTouchDevice()) {
                         this.visible = false;
                     }
                 };
@@ -240,7 +242,7 @@ var script = {
             }
         },
         onOverlayClick(event) {
-            OverlayEventBus__default['default'].emit('overlay-click', {
+            OverlayEventBus__default["default"].emit('overlay-click', {
                 originalEvent: event,
                 target: this.target
             });
@@ -258,57 +260,66 @@ var script = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
+    },
+    components: {
+        'Portal': Portal__default["default"]
     }
 };
 
-const _hoisted_1 = /*#__PURE__*/vue.createVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Portal = vue.resolveComponent("Portal");
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createBlock(vue.Teleport, { to: $props.appendTo }, [
-    vue.createVNode(vue.Transition, {
-      name: "p-overlaypanel",
-      onEnter: $options.onEnter,
-      onLeave: $options.onLeave,
-      onAfterLeave: $options.onAfterLeave
-    }, {
-      default: vue.withCtx(() => [
-        ($data.visible)
-          ? (vue.openBlock(), vue.createBlock("div", vue.mergeProps({
-              key: 0,
-              class: $options.containerClass,
-              ref: $options.containerRef
-            }, _ctx.$attrs, {
-              onClick: _cache[4] || (_cache[4] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-            }), [
-              vue.createVNode("div", {
-                class: "p-overlaypanel-content",
-                onClick: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
-                onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
-              }, [
-                vue.renderSlot(_ctx.$slots, "default")
-              ], 32),
-              ($props.showCloseIcon)
-                ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                    key: 0,
-                    class: "p-overlaypanel-close p-link",
-                    onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
-                    "aria-label": $props.ariaCloseLabel,
-                    type: "button"
-                  }, [
-                    _hoisted_1
-                  ], 8, ["aria-label"])), [
-                    [_directive_ripple]
-                  ])
-                : vue.createCommentVNode("", true)
-            ], 16))
-          : vue.createCommentVNode("", true)
-      ]),
-      _: 3
-    }, 8, ["onEnter", "onLeave", "onAfterLeave"])
-  ], 8, ["to"]))
+  return (vue.openBlock(), vue.createBlock(_component_Portal, { appendTo: $props.appendTo }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(vue.Transition, {
+        name: "p-overlaypanel",
+        onEnter: $options.onEnter,
+        onLeave: $options.onLeave,
+        onAfterLeave: $options.onAfterLeave
+      }, {
+        default: vue.withCtx(() => [
+          ($data.visible)
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 0,
+                class: $options.containerClass,
+                ref: $options.containerRef
+              }, _ctx.$attrs, {
+                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
+              }), [
+                vue.createElementVNode("div", {
+                  class: "p-overlaypanel-content",
+                  onClick: _cache[0] || (_cache[0] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                  onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
+                }, [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ], 32),
+                ($props.showCloseIcon)
+                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                      key: 0,
+                      class: "p-overlaypanel-close p-link",
+                      onClick: _cache[2] || (_cache[2] = (...args) => ($options.hide && $options.hide(...args))),
+                      "aria-label": $props.ariaCloseLabel,
+                      type: "button"
+                    }, _hoisted_3, 8, _hoisted_1)), [
+                      [_directive_ripple]
+                    ])
+                  : vue.createCommentVNode("", true)
+              ], 16))
+            : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+    ]),
+    _: 3
+  }, 8, ["appendTo"]))
 }
 
 function styleInject(css, ref) {

package/overlaypanel/overlaypanel.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/overlayeventbus"),n=require("primevue/ripple"),i=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(t),s={name:"OverlayPanel",inheritAttrs:!1,props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},emits:["show","hide"],data:()=>({visible:!1}),selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.overlayEventListener&&(r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},r.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target);const t=e.DomHandler.getOffset(this.container),n=e.DomHandler.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!e.DomHandler.isAndroid()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>e.UniqueComponentId()},directives:{ripple:l(n).default}};const o=i.createVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),s.render=function(e,t,n,l,r,s){const a=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(i.Teleport,{to:n.appendTo},[i.createVNode(i.Transition,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:i.withCtx((()=>[r.visible?(i.openBlock(),i.createBlock("div",i.mergeProps({key:0,class:s.containerClass,ref:s.containerRef},e.$attrs,{onClick:t[4]||(t[4]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))}),[i.createVNode("div",{class:"p-overlaypanel-content",onClick:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[2]||(t[2]=(...e)=>s.onContentClick&&s.onContentClick(...e))},[i.renderSlot(e.$slots,"default")],32),n.showCloseIcon?i.withDirectives((i.openBlock(),i.createBlock("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[3]||(t[3]=(...e)=>s.hide&&s.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},[o],8,["aria-label"])),[[a]]):i.createCommentVNode("",!0)],16)):i.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])],8,["to"])},module.exports=s;
+"use strict";var e=require("primevue/utils"),t=require("primevue/overlayeventbus"),n=require("primevue/ripple"),i=require("primevue/portal"),l=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t),o=r(n),a=r(i),c={name:"OverlayPanel",inheritAttrs:!1,props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},emits:["show","hide"],data:()=>({visible:!1}),selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.overlayEventListener&&(s.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},s.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),s.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target);const t=e.DomHandler.getOffset(this.container),n=e.DomHandler.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!e.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){s.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>e.UniqueComponentId()},directives:{ripple:o.default},components:{Portal:a.default}};const d=["aria-label"],p=[l.createElementVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),c.render=function(e,t,n,i,r,s){const o=l.resolveComponent("Portal"),a=l.resolveDirective("ripple");return l.openBlock(),l.createBlock(o,{appendTo:n.appendTo},{default:l.withCtx((()=>[l.createVNode(l.Transition,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:l.withCtx((()=>[r.visible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:s.containerClass,ref:s.containerRef},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))}),[l.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e))},[l.renderSlot(e.$slots,"default")],32),n.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>s.hide&&s.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},p,8,d)),[[a]]):l.createCommentVNode("",!0)],16)):l.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},module.exports=c;

package/overlaypanel/overlaypanel.esm.js

@@ -1,7 +1,8 @@
 import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, mergeProps, renderSlot, withDirectives, createCommentVNode } from 'vue';
+import Portal from 'primevue/portal';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, createElementBlock, mergeProps, createElementVNode, renderSlot, withDirectives, createCommentVNode } from 'vue';
 
 var script = {
     name: 'OverlayPanel',
@@ -187,7 +188,7 @@ var script = {
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
-                    if (this.visible && !DomHandler.isAndroid()) {
+                    if (this.visible && !DomHandler.isTouchDevice()) {
                         this.visible = false;
                     }
                 };
@@ -252,56 +253,65 @@ var script = {
     },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'Portal': Portal
     }
 };
 
-const _hoisted_1 = /*#__PURE__*/createVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = /*#__PURE__*/createElementVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Portal = resolveComponent("Portal");
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createBlock(Teleport, { to: $props.appendTo }, [
-    createVNode(Transition, {
-      name: "p-overlaypanel",
-      onEnter: $options.onEnter,
-      onLeave: $options.onLeave,
-      onAfterLeave: $options.onAfterLeave
-    }, {
-      default: withCtx(() => [
-        ($data.visible)
-          ? (openBlock(), createBlock("div", mergeProps({
-              key: 0,
-              class: $options.containerClass,
-              ref: $options.containerRef
-            }, _ctx.$attrs, {
-              onClick: _cache[4] || (_cache[4] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-            }), [
-              createVNode("div", {
-                class: "p-overlaypanel-content",
-                onClick: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
-                onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
-              }, [
-                renderSlot(_ctx.$slots, "default")
-              ], 32),
-              ($props.showCloseIcon)
-                ? withDirectives((openBlock(), createBlock("button", {
-                    key: 0,
-                    class: "p-overlaypanel-close p-link",
-                    onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
-                    "aria-label": $props.ariaCloseLabel,
-                    type: "button"
-                  }, [
-                    _hoisted_1
-                  ], 8, ["aria-label"])), [
-                    [_directive_ripple]
-                  ])
-                : createCommentVNode("", true)
-            ], 16))
-          : createCommentVNode("", true)
-      ]),
-      _: 3
-    }, 8, ["onEnter", "onLeave", "onAfterLeave"])
-  ], 8, ["to"]))
+  return (openBlock(), createBlock(_component_Portal, { appendTo: $props.appendTo }, {
+    default: withCtx(() => [
+      createVNode(Transition, {
+        name: "p-overlaypanel",
+        onEnter: $options.onEnter,
+        onLeave: $options.onLeave,
+        onAfterLeave: $options.onAfterLeave
+      }, {
+        default: withCtx(() => [
+          ($data.visible)
+            ? (openBlock(), createElementBlock("div", mergeProps({
+                key: 0,
+                class: $options.containerClass,
+                ref: $options.containerRef
+              }, _ctx.$attrs, {
+                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
+              }), [
+                createElementVNode("div", {
+                  class: "p-overlaypanel-content",
+                  onClick: _cache[0] || (_cache[0] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                  onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
+                }, [
+                  renderSlot(_ctx.$slots, "default")
+                ], 32),
+                ($props.showCloseIcon)
+                  ? withDirectives((openBlock(), createElementBlock("button", {
+                      key: 0,
+                      class: "p-overlaypanel-close p-link",
+                      onClick: _cache[2] || (_cache[2] = (...args) => ($options.hide && $options.hide(...args))),
+                      "aria-label": $props.ariaCloseLabel,
+                      type: "button"
+                    }, _hoisted_3, 8, _hoisted_1)), [
+                      [_directive_ripple]
+                    ])
+                  : createCommentVNode("", true)
+              ], 16))
+            : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+    ]),
+    _: 3
+  }, 8, ["appendTo"]))
 }
 
 function styleInject(css, ref) {
@@ -336,4 +346,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/overlaypanel/overlaypanel.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i,UniqueComponentId as n}from"primevue/utils";import l from"primevue/overlayeventbus";import s from"primevue/ripple";import{resolveDirective as r,openBlock as o,createBlock as a,Teleport as c,createVNode as p,Transition as d,withCtx as h,mergeProps as v,renderSlot as u,withDirectives as b,createCommentVNode as y}from"vue";var f={name:"OverlayPanel",inheritAttrs:!1,props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},emits:["show","hide"],data:()=>({visible:!1}),selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.clear(this.container),this.overlayEventListener&&(l.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},l.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),l.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){t.absolutePosition(this.container,this.target);const e=t.getOffset(this.container),i=t.getOffset(this.target);let n=0;e.left<i.left&&(n=i.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<i.top&&t.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!t.isAndroid()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){l.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>n()},directives:{ripple:s}};const m=p("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1);!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),f.render=function(e,t,i,n,l,s){const f=r("ripple");return o(),a(c,{to:i.appendTo},[p(d,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:h((()=>[l.visible?(o(),a("div",v({key:0,class:s.containerClass,ref:s.containerRef},e.$attrs,{onClick:t[4]||(t[4]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))}),[p("div",{class:"p-overlaypanel-content",onClick:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[2]||(t[2]=(...e)=>s.onContentClick&&s.onContentClick(...e))},[u(e.$slots,"default")],32),i.showCloseIcon?b((o(),a("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[3]||(t[3]=(...e)=>s.hide&&s.hide(...e)),"aria-label":i.ariaCloseLabel,type:"button"},[m],8,["aria-label"])),[[f]]):y("",!0)],16)):y("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])],8,["to"])};export default f;
+import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i,UniqueComponentId as n}from"primevue/utils";import l from"primevue/overlayeventbus";import s from"primevue/ripple";import r from"primevue/portal";import{resolveComponent as o,resolveDirective as a,openBlock as c,createBlock as p,withCtx as d,createVNode as h,Transition as v,createElementBlock as u,mergeProps as b,createElementVNode as y,renderSlot as f,withDirectives as m,createCommentVNode as k}from"vue";var L={name:"OverlayPanel",inheritAttrs:!1,props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},emits:["show","hide"],data:()=>({visible:!1}),selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.clear(this.container),this.overlayEventListener&&(l.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},l.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),l.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){t.absolutePosition(this.container,this.target);const e=t.getOffset(this.container),i=t.getOffset(this.target);let n=0;e.left<i.left&&(n=i.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<i.top&&t.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!t.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){l.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>n()},directives:{ripple:s},components:{Portal:r}};const C=["aria-label"],g=[y("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),L.render=function(e,t,i,n,l,s){const r=o("Portal"),L=a("ripple");return c(),p(r,{appendTo:i.appendTo},{default:d((()=>[h(v,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:d((()=>[l.visible?(c(),u("div",b({key:0,class:s.containerClass,ref:s.containerRef},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))}),[y("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e))},[f(e.$slots,"default")],32),i.showCloseIcon?m((c(),u("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>s.hide&&s.hide(...e)),"aria-label":i.ariaCloseLabel,type:"button"},g,8,C)),[[L]]):k("",!0)],16)):k("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])};export{L as default};

package/overlaypanel/overlaypanel.js

@@ -1,11 +1,12 @@
 this.primevue = this.primevue || {};
-this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, vue) {
+this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
     var script = {
         name: 'OverlayPanel',
@@ -73,7 +74,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, vue) {
             }
 
             if (this.overlayEventListener) {
-                OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
             }
 
@@ -122,14 +123,14 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, vue) {
                     }
                 };
 
-                OverlayEventBus__default['default'].on('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
                 this.$emit('show');
             },
             onLeave() {
                 this.unbindOutsideClickListener();
                 this.unbindScrollListener();
                 this.unbindResizeListener();
-                OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
                 this.$emit('hide');
             },
@@ -191,7 +192,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, vue) {
             bindResizeListener() {
                 if (!this.resizeListener) {
                     this.resizeListener = () => {
-                        if (this.visible && !utils.DomHandler.isAndroid()) {
+                        if (this.visible && !utils.DomHandler.isTouchDevice()) {
                             this.visible = false;
                         }
                     };
@@ -237,7 +238,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, vue) {
                 }
             },
             onOverlayClick(event) {
-                OverlayEventBus__default['default'].emit('overlay-click', {
+                OverlayEventBus__default["default"].emit('overlay-click', {
                     originalEvent: event,
                     target: this.target
                 });
@@ -255,57 +256,66 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, vue) {
             }
         },
         directives: {
-            'ripple': Ripple__default['default']
+            'ripple': Ripple__default["default"]
+        },
+        components: {
+            'Portal': Portal__default["default"]
         }
     };
 
-    const _hoisted_1 = /*#__PURE__*/vue.createVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
+    const _hoisted_1 = ["aria-label"];
+    const _hoisted_2 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
+    const _hoisted_3 = [
+      _hoisted_2
+    ];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_Portal = vue.resolveComponent("Portal");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createBlock(vue.Teleport, { to: $props.appendTo }, [
-        vue.createVNode(vue.Transition, {
-          name: "p-overlaypanel",
-          onEnter: $options.onEnter,
-          onLeave: $options.onLeave,
-          onAfterLeave: $options.onAfterLeave
-        }, {
-          default: vue.withCtx(() => [
-            ($data.visible)
-              ? (vue.openBlock(), vue.createBlock("div", vue.mergeProps({
-                  key: 0,
-                  class: $options.containerClass,
-                  ref: $options.containerRef
-                }, _ctx.$attrs, {
-                  onClick: _cache[4] || (_cache[4] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-                }), [
-                  vue.createVNode("div", {
-                    class: "p-overlaypanel-content",
-                    onClick: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
-                    onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
-                  }, [
-                    vue.renderSlot(_ctx.$slots, "default")
-                  ], 32),
-                  ($props.showCloseIcon)
-                    ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                        key: 0,
-                        class: "p-overlaypanel-close p-link",
-                        onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
-                        "aria-label": $props.ariaCloseLabel,
-                        type: "button"
-                      }, [
-                        _hoisted_1
-                      ], 8, ["aria-label"])), [
-                        [_directive_ripple]
-                      ])
-                    : vue.createCommentVNode("", true)
-                ], 16))
-              : vue.createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 8, ["onEnter", "onLeave", "onAfterLeave"])
-      ], 8, ["to"]))
+      return (vue.openBlock(), vue.createBlock(_component_Portal, { appendTo: $props.appendTo }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.Transition, {
+            name: "p-overlaypanel",
+            onEnter: $options.onEnter,
+            onLeave: $options.onLeave,
+            onAfterLeave: $options.onAfterLeave
+          }, {
+            default: vue.withCtx(() => [
+              ($data.visible)
+                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                    key: 0,
+                    class: $options.containerClass,
+                    ref: $options.containerRef
+                  }, _ctx.$attrs, {
+                    onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
+                  }), [
+                    vue.createElementVNode("div", {
+                      class: "p-overlaypanel-content",
+                      onClick: _cache[0] || (_cache[0] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                      onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "default")
+                    ], 32),
+                    ($props.showCloseIcon)
+                      ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                          key: 0,
+                          class: "p-overlaypanel-close p-link",
+                          onClick: _cache[2] || (_cache[2] = (...args) => ($options.hide && $options.hide(...args))),
+                          "aria-label": $props.ariaCloseLabel,
+                          type: "button"
+                        }, _hoisted_3, 8, _hoisted_1)), [
+                          [_directive_ripple]
+                        ])
+                      : vue.createCommentVNode("", true)
+                  ], 16))
+                : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+        ]),
+        _: 3
+      }, 8, ["appendTo"]))
     }
 
     function styleInject(css, ref) {
@@ -342,4 +352,4 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, vue) {
 
     return script;
 
-}(primevue.utils, primevue.overlayeventbus, primevue.ripple, Vue));
+})(primevue.utils, primevue.overlayeventbus, primevue.ripple, primevue.portal, Vue);

package/overlaypanel/overlaypanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(t),s={name:"OverlayPanel",inheritAttrs:!1,props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},emits:["show","hide"],data:()=>({visible:!1}),selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.overlayEventListener&&(r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},r.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target);const t=e.DomHandler.getOffset(this.container),n=e.DomHandler.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!e.DomHandler.isAndroid()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>e.UniqueComponentId()},directives:{ripple:l(n).default}};const o=i.createVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1);return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),s.render=function(e,t,n,l,r,s){const a=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(i.Teleport,{to:n.appendTo},[i.createVNode(i.Transition,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:i.withCtx((()=>[r.visible?(i.openBlock(),i.createBlock("div",i.mergeProps({key:0,class:s.containerClass,ref:s.containerRef},e.$attrs,{onClick:t[4]||(t[4]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))}),[i.createVNode("div",{class:"p-overlaypanel-content",onClick:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[2]||(t[2]=(...e)=>s.onContentClick&&s.onContentClick(...e))},[i.renderSlot(e.$slots,"default")],32),n.showCloseIcon?i.withDirectives((i.openBlock(),i.createBlock("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[3]||(t[3]=(...e)=>s.hide&&s.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},[o],8,["aria-label"])),[[a]]):i.createCommentVNode("",!0)],16)):i.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])],8,["to"])},s}(primevue.utils,primevue.overlayeventbus,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i,l){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t),o=r(n),a=r(i),c={name:"OverlayPanel",inheritAttrs:!1,props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},emits:["show","hide"],data:()=>({visible:!1}),selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.overlayEventListener&&(s.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},s.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),s.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target);const t=e.DomHandler.getOffset(this.container),n=e.DomHandler.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!e.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){s.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>e.UniqueComponentId()},directives:{ripple:o.default},components:{Portal:a.default}};const d=["aria-label"],p=[l.createElementVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),c.render=function(e,t,n,i,r,s){const o=l.resolveComponent("Portal"),a=l.resolveDirective("ripple");return l.openBlock(),l.createBlock(o,{appendTo:n.appendTo},{default:l.withCtx((()=>[l.createVNode(l.Transition,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:l.withCtx((()=>[r.visible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:s.containerClass,ref:s.containerRef},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))}),[l.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e))},[l.renderSlot(e.$slots,"default")],32),n.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>s.hide&&s.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},p,8,d)),[[a]]):l.createCommentVNode("",!0)],16)):l.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},c}(primevue.utils,primevue.overlayeventbus,primevue.ripple,primevue.portal,Vue);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.12.4",
+    "version": "3.13.0",
     "homepage": "https://www.primefaces.org/primevue",
     "repository": {
       "type": "git",