primevue 3.16.2 → 3.18.0

package/overlaypanel/overlaypanel.cjs.js

@@ -17,18 +17,18 @@ var script = {
     inheritAttrs: false,
     emits: ['show', 'hide'],
     props: {
-		dismissable: {
-			type: Boolean,
-			default: true
-		},
-		showCloseIcon: {
-			type: Boolean,
-			default: false
-		},
+        dismissable: {
+            type: Boolean,
+            default: true
+        },
+        showCloseIcon: {
+            type: Boolean,
+            default: false
+        },
         appendTo: {
-			type: String,
-			default: 'body'
-		},
+            type: String,
+            default: 'body'
+        },
         baseZIndex: {
             type: Number,
             default: 0
@@ -49,7 +49,7 @@ var script = {
     data() {
         return {
             visible: false
-        }
+        };
     },
     watch: {
         dismissable: {
@@ -81,6 +81,7 @@ var script = {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.destroyStyle();
         this.unbindResizeListener();
         this.target = null;
@@ -103,10 +104,8 @@ var script = {
     },
     methods: {
         toggle(event, target) {
-            if (this.visible)
-                this.hide();
-            else
-                this.show(event, target);
+            if (this.visible) this.hide();
+            else this.show(event, target);
         },
         show(event, target) {
             this.visible = true;
@@ -122,6 +121,7 @@ var script = {
         onEnter(el) {
             this.container.setAttribute(this.attributeSelector, '');
             this.alignOverlay();
+
             if (this.dismissable) {
                 this.bindOutsideClickListener();
             }
@@ -165,6 +165,7 @@ var script = {
             if (containerOffset.left < targetOffset.left) {
                 arrowLeft = targetOffset.left - containerOffset.left;
             }
+
             this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
@@ -177,8 +178,10 @@ var script = {
                     if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
                         this.visible = false;
                     }
+
                     this.selfClick = false;
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -212,6 +215,7 @@ var script = {
                         this.visible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -222,18 +226,19 @@ var script = {
             }
         },
         isTargetClicked(event) {
-            return (this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target)));
+            return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
         },
         containerRef(el) {
             this.container = el;
         },
         createStyle() {
-			if (!this.styleElement) {
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+            if (!this.styleElement) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';
+
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
@@ -245,8 +250,8 @@ var script = {
                 }
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -262,20 +267,23 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-overlaypanel p-component', {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-overlaypanel p-component',
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         attributeSelector() {
             return utils.UniqueComponentId();
         }
     },
     directives: {
-        'ripple': Ripple__default["default"]
+        ripple: Ripple__default["default"]
     },
     components: {
-        'Portal': Portal__default["default"]
+        Portal: Portal__default["default"]
     }
 };
 
@@ -301,8 +309,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ($data.visible)
             ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: 0,
-                class: $options.containerClass,
-                ref: $options.containerRef
+                ref: $options.containerRef,
+                class: $options.containerClass
               }, _ctx.$attrs, {
                 onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
               }), [
@@ -361,7 +369,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\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";
+var css_248z = "\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 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity 0.1s linear;\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.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";
 styleInject(css_248z);
 
 script.render = render;

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("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,emits:["show","hide"],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}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},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&&e.DomHandler.isClient()&&(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;
+"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,emits:["show","hide"],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}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},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&&e.DomHandler.isClient()&&(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 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity 0.1s linear;\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.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,ref:s.containerRef,class:s.containerClass},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

@@ -9,18 +9,18 @@ var script = {
     inheritAttrs: false,
     emits: ['show', 'hide'],
     props: {
-		dismissable: {
-			type: Boolean,
-			default: true
-		},
-		showCloseIcon: {
-			type: Boolean,
-			default: false
-		},
+        dismissable: {
+            type: Boolean,
+            default: true
+        },
+        showCloseIcon: {
+            type: Boolean,
+            default: false
+        },
         appendTo: {
-			type: String,
-			default: 'body'
-		},
+            type: String,
+            default: 'body'
+        },
         baseZIndex: {
             type: Number,
             default: 0
@@ -41,7 +41,7 @@ var script = {
     data() {
         return {
             visible: false
-        }
+        };
     },
     watch: {
         dismissable: {
@@ -73,6 +73,7 @@ var script = {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.destroyStyle();
         this.unbindResizeListener();
         this.target = null;
@@ -95,10 +96,8 @@ var script = {
     },
     methods: {
         toggle(event, target) {
-            if (this.visible)
-                this.hide();
-            else
-                this.show(event, target);
+            if (this.visible) this.hide();
+            else this.show(event, target);
         },
         show(event, target) {
             this.visible = true;
@@ -114,6 +113,7 @@ var script = {
         onEnter(el) {
             this.container.setAttribute(this.attributeSelector, '');
             this.alignOverlay();
+
             if (this.dismissable) {
                 this.bindOutsideClickListener();
             }
@@ -157,6 +157,7 @@ var script = {
             if (containerOffset.left < targetOffset.left) {
                 arrowLeft = targetOffset.left - containerOffset.left;
             }
+
             this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
@@ -169,8 +170,10 @@ var script = {
                     if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
                         this.visible = false;
                     }
+
                     this.selfClick = false;
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -204,6 +207,7 @@ var script = {
                         this.visible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -214,18 +218,19 @@ var script = {
             }
         },
         isTargetClicked(event) {
-            return (this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target)));
+            return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
         },
         containerRef(el) {
             this.container = el;
         },
         createStyle() {
-			if (!this.styleElement) {
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+            if (!this.styleElement) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';
+
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
@@ -237,8 +242,8 @@ var script = {
                 }
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -254,20 +259,23 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-overlaypanel p-component', {
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-overlaypanel p-component',
+                {
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         attributeSelector() {
             return UniqueComponentId();
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
 };
 
@@ -293,8 +301,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ($data.visible)
             ? (openBlock(), createElementBlock("div", mergeProps({
                 key: 0,
-                class: $options.containerClass,
-                ref: $options.containerRef
+                ref: $options.containerRef,
+                class: $options.containerClass
               }, _ctx.$attrs, {
                 onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
               }), [
@@ -353,7 +361,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\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";
+var css_248z = "\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 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity 0.1s linear;\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.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";
 styleInject(css_248z);
 
 script.render = render;

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 s from"primevue/overlayeventbus";import l 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 u,createElementBlock as v,mergeProps as b,createElementVNode as y,renderSlot as f,withDirectives as m,createCommentVNode as k}from"vue";var L={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],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}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},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&&(s.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)},s.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),s.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&&t.isClient()&&(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){s.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:l},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],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.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,s,l){const r=o("Portal"),L=a("ripple");return c(),p(r,{appendTo:i.appendTo},{default:d((()=>[h(u,{name:"p-overlaypanel",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave},{default:d((()=>[s.visible?(c(),v("div",b({key:0,class:l.containerClass,ref:l.containerRef},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))}),[y("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>l.onContentClick&&l.onContentClick(...e))},[f(e.$slots,"default")],32),i.showCloseIcon?m((c(),v("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>l.hide&&l.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};
+import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i,UniqueComponentId as n}from"primevue/utils";import s from"primevue/overlayeventbus";import l 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 u,createElementBlock as v,mergeProps as b,createElementVNode as y,renderSlot as f,withDirectives as m,createCommentVNode as k}from"vue";var L={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],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}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},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&&(s.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)},s.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),s.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&&t.isClient()&&(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){s.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:l},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],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.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 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity 0.1s linear;\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.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,s,l){const r=o("Portal"),L=a("ripple");return c(),p(r,{appendTo:i.appendTo},{default:d((()=>[h(u,{name:"p-overlaypanel",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave},{default:d((()=>[s.visible?(c(),v("div",b({key:0,ref:l.containerRef,class:l.containerClass},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))}),[y("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>l.onContentClick&&l.onContentClick(...e))},[f(e.$slots,"default")],32),i.showCloseIcon?m((c(),v("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>l.hide&&l.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

@@ -13,18 +13,18 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
         inheritAttrs: false,
         emits: ['show', 'hide'],
         props: {
-    		dismissable: {
-    			type: Boolean,
-    			default: true
-    		},
-    		showCloseIcon: {
-    			type: Boolean,
-    			default: false
-    		},
+            dismissable: {
+                type: Boolean,
+                default: true
+            },
+            showCloseIcon: {
+                type: Boolean,
+                default: false
+            },
             appendTo: {
-    			type: String,
-    			default: 'body'
-    		},
+                type: String,
+                default: 'body'
+            },
             baseZIndex: {
                 type: Number,
                 default: 0
@@ -45,7 +45,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
         data() {
             return {
                 visible: false
-            }
+            };
         },
         watch: {
             dismissable: {
@@ -77,6 +77,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
                 this.scrollHandler.destroy();
                 this.scrollHandler = null;
             }
+
             this.destroyStyle();
             this.unbindResizeListener();
             this.target = null;
@@ -99,10 +100,8 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
         },
         methods: {
             toggle(event, target) {
-                if (this.visible)
-                    this.hide();
-                else
-                    this.show(event, target);
+                if (this.visible) this.hide();
+                else this.show(event, target);
             },
             show(event, target) {
                 this.visible = true;
@@ -118,6 +117,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
             onEnter(el) {
                 this.container.setAttribute(this.attributeSelector, '');
                 this.alignOverlay();
+
                 if (this.dismissable) {
                     this.bindOutsideClickListener();
                 }
@@ -161,6 +161,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
                 if (containerOffset.left < targetOffset.left) {
                     arrowLeft = targetOffset.left - containerOffset.left;
                 }
+
                 this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
 
                 if (containerOffset.top < targetOffset.top) {
@@ -173,8 +174,10 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
                         if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
                             this.visible = false;
                         }
+
                         this.selfClick = false;
                     };
+
                     document.addEventListener('click', this.outsideClickListener);
                 }
             },
@@ -208,6 +211,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
                             this.visible = false;
                         }
                     };
+
                     window.addEventListener('resize', this.resizeListener);
                 }
             },
@@ -218,18 +222,19 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
                 }
             },
             isTargetClicked(event) {
-                return (this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target)));
+                return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
             },
             containerRef(el) {
                 this.container = el;
             },
             createStyle() {
-    			if (!this.styleElement) {
-    				this.styleElement = document.createElement('style');
-    				this.styleElement.type = 'text/css';
-    				document.head.appendChild(this.styleElement);
+                if (!this.styleElement) {
+                    this.styleElement = document.createElement('style');
+                    this.styleElement.type = 'text/css';
+                    document.head.appendChild(this.styleElement);
 
                     let innerHTML = '';
+
                     for (let breakpoint in this.breakpoints) {
                         innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
@@ -241,8 +246,8 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
                     }
 
                     this.styleElement.innerHTML = innerHTML;
-    			}
-    		},
+                }
+            },
             destroyStyle() {
                 if (this.styleElement) {
                     document.head.removeChild(this.styleElement);
@@ -258,20 +263,23 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
         },
         computed: {
             containerClass() {
-                return ['p-overlaypanel p-component', {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }];
+                return [
+                    'p-overlaypanel p-component',
+                    {
+                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                        'p-ripple-disabled': this.$primevue.config.ripple === false
+                    }
+                ];
             },
             attributeSelector() {
                 return utils.UniqueComponentId();
             }
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         },
         components: {
-            'Portal': Portal__default["default"]
+            Portal: Portal__default["default"]
         }
     };
 
@@ -297,8 +305,8 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
               ($data.visible)
                 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                     key: 0,
-                    class: $options.containerClass,
-                    ref: $options.containerRef
+                    ref: $options.containerRef,
+                    class: $options.containerClass
                   }, _ctx.$attrs, {
                     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
                   }), [
@@ -357,7 +365,7 @@ this.primevue.overlaypanel = (function (utils, OverlayEventBus, Ripple, Portal,
       }
     }
 
-    var css_248z = "\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";
+    var css_248z = "\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 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity 0.1s linear;\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.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";
     styleInject(css_248z);
 
     script.render = render;