primevue 3.51.0 → 3.53.0

package/scrollpanel/ScrollPanel.vue

@@ -69,14 +69,13 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.$el.offsetParent) {
             this.initialize();
         }
@@ -130,22 +129,27 @@ export default {
                 this.scrollYRatio = ownHeight / totalHeight;
 
                 this.frame = this.requestAnimationFrame(() => {
-                    if (this.scrollXRatio >= 1) {
-                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                        !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                    } else {
-                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                        !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                        this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                    if (this.$refs.xBar) {
+                        if (this.scrollXRatio >= 1) {
+                            this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                            !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                        } else {
+                            this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                            !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                            this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                        }
                     }
 
-                    if (this.scrollYRatio >= 1) {
-                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                        !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                    } else {
-                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                        !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                        this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                    if (this.$refs.yBar) {
+                        if (this.scrollYRatio >= 1) {
+                            this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                            !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                        } else {
+                            this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                            !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                            this.$refs.yBar.style.cssText =
+                                'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                        }
                     }
                 });
             }

package/scrollpanel/scrollpanel.cjs.js

@@ -53,14 +53,12 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': {
-      immediate: true,
-      handler: function handler(newValue) {
-        this.id = newValue || utils.UniqueComponentId();
-      }
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || utils.UniqueComponentId();
     }
   },
   mounted: function mounted() {
+    this.id = this.id || utils.UniqueComponentId();
     if (this.$el.offsetParent) {
       this.initialize();
     }
@@ -109,21 +107,25 @@ var script = {
         var right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
         this.scrollYRatio = ownHeight / totalHeight;
         this.frame = this.requestAnimationFrame(function () {
-          if (_this.scrollXRatio >= 1) {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-            _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+          if (_this.$refs.xBar) {
+            if (_this.scrollXRatio >= 1) {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+              _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+            }
           }
-          if (_this.scrollYRatio >= 1) {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-            _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+          if (_this.$refs.yBar) {
+            if (_this.scrollYRatio >= 1) {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+              _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+            }
           }
         });
       }

package/scrollpanel/scrollpanel.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/basecomponent"),n=require("primevue/scrollpanel/style"),o=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s(t).default,props:{step:{type:Number,default:5}},style:s(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":{immediate:!0,handler:function(t){this.id=t||e.UniqueComponentId()}}},mounted:function(){this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),o=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===o&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var s=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/s,this.frame=this.requestAnimationFrame((function(){t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+o+"px;"),t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/s*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];r.render=function(e,t,n,s,r,c){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:e.cx("root")},e.ptmi("root")),[o.createElementVNode("div",o.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[o.createElementVNode("div",o.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16,i)],16),o.createElementVNode("div",o.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),o.createElementVNode("div",o.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},module.exports=r;
+"use strict";var e=require("primevue/utils"),t=require("primevue/basecomponent"),n=require("primevue/scrollpanel/style"),o=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s(t).default,props:{step:{type:Number,default:5}},style:s(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":function(t){this.id=t||e.UniqueComponentId()}},mounted:function(){this.id=this.id||e.UniqueComponentId(),this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),o=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===o&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var s=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/s,this.frame=this.requestAnimationFrame((function(){t.$refs.xBar&&(t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+o+"px;")),t.$refs.yBar&&(t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/s*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;"))}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];r.render=function(e,t,n,s,r,c){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:e.cx("root")},e.ptmi("root")),[o.createElementVNode("div",o.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[o.createElementVNode("div",o.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16,i)],16),o.createElementVNode("div",o.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),o.createElementVNode("div",o.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},module.exports=r;

package/scrollpanel/scrollpanel.esm.js

@@ -46,14 +46,12 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': {
-      immediate: true,
-      handler: function handler(newValue) {
-        this.id = newValue || UniqueComponentId();
-      }
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || UniqueComponentId();
     }
   },
   mounted: function mounted() {
+    this.id = this.id || UniqueComponentId();
     if (this.$el.offsetParent) {
       this.initialize();
     }
@@ -102,21 +100,25 @@ var script = {
         var right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
         this.scrollYRatio = ownHeight / totalHeight;
         this.frame = this.requestAnimationFrame(function () {
-          if (_this.scrollXRatio >= 1) {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-            _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+          if (_this.$refs.xBar) {
+            if (_this.scrollXRatio >= 1) {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+              _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+            }
           }
-          if (_this.scrollYRatio >= 1) {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-            _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+          if (_this.$refs.yBar) {
+            if (_this.scrollYRatio >= 1) {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+              _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+            }
           }
         });
       }

package/scrollpanel/scrollpanel.esm.min.js

@@ -1 +1 @@
-import{UniqueComponentId as e,DomHandler as t}from"primevue/utils";import s from"primevue/basecomponent";import n from"primevue/scrollpanel/style";import{openBlock as o,createElementBlock as i,mergeProps as r,createElementVNode as a,renderSlot as l}from"vue";var c={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s,props:{step:{type:Number,default:5}},style:n,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":{immediate:!0,handler:function(t){this.id=t||e()}}},mounted:function(){this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var e=getComputedStyle(this.$el),s=getComputedStyle(this.$refs.xBar),n=t.getHeight(this.$el)-parseInt(s.height,10);"none"!==e["max-height"]&&0===n&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(s.height,10)>parseInt(e["max-height"],10)?e["max-height"]:this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar:function(){var e=this;if(this.$refs.content){var s=this.$refs.content.scrollWidth,n=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/s;var o=this.$refs.content.scrollHeight,i=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){e.scrollXRatio>=1?(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.xBar,"p-scrollpanel-hidden")):(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.xBar,"p-scrollpanel-hidden"),e.$refs.xBar.style.cssText="width:"+Math.max(100*e.scrollXRatio,10)+"%; left:"+e.$refs.content.scrollLeft/s*100+"%;bottom:"+n+"px;"),e.scrollYRatio>=1?(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.yBar,"p-scrollpanel-hidden")):(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.yBar,"p-scrollpanel-hidden"),e.$refs.yBar.style.cssText="height:"+Math.max(100*e.scrollYRatio,10)+"%; top: calc("+e.$refs.content.scrollTop/o*100+"% - "+e.$refs.xBar.clientHeight+"px);right:"+i+"px;")}))}},onYBarMouseDown:function(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown:function(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var s=this;this.clearTimer(),this.timer=setTimeout((function(){s.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,s=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=s/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,s=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=s/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},u=["id"],h=["aria-controls","aria-valuenow"],d=["aria-controls","aria-valuenow"];c.render=function(e,t,s,n,c,p){return o(),i("div",r({class:e.cx("root")},e.ptmi("root")),[a("div",r({class:e.cx("wrapper")},e.ptm("wrapper")),[a("div",r({ref:"content",id:p.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return p.onScroll&&p.onScroll.apply(p,arguments)}),onMouseenter:t[1]||(t[1]=function(){return p.moveBar&&p.moveBar.apply(p,arguments)})},e.ptm("content")),[l(e.$slots,"default")],16,u)],16),a("div",r({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":p.contentId,"aria-valuenow":c.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return p.onXBarMouseDown&&p.onXBarMouseDown.apply(p,arguments)}),onKeydown:t[3]||(t[3]=function(e){return p.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[5]||(t[5]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)}),onBlur:t[6]||(t[6]=function(){return p.onBlur&&p.onBlur.apply(p,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,h),a("div",r({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":p.contentId,"aria-valuenow":c.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return p.onYBarMouseDown&&p.onYBarMouseDown.apply(p,arguments)}),onKeydown:t[8]||(t[8]=function(e){return p.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[10]||(t[10]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,d)],16)};export{c as default};
+import{UniqueComponentId as e,DomHandler as t}from"primevue/utils";import s from"primevue/basecomponent";import n from"primevue/scrollpanel/style";import{openBlock as o,createElementBlock as i,mergeProps as r,createElementVNode as a,renderSlot as l}from"vue";var c={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s,props:{step:{type:Number,default:5}},style:n,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":function(t){this.id=t||e()}},mounted:function(){this.id=this.id||e(),this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var e=getComputedStyle(this.$el),s=getComputedStyle(this.$refs.xBar),n=t.getHeight(this.$el)-parseInt(s.height,10);"none"!==e["max-height"]&&0===n&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(s.height,10)>parseInt(e["max-height"],10)?e["max-height"]:this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar:function(){var e=this;if(this.$refs.content){var s=this.$refs.content.scrollWidth,n=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/s;var o=this.$refs.content.scrollHeight,i=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){e.$refs.xBar&&(e.scrollXRatio>=1?(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.xBar,"p-scrollpanel-hidden")):(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.xBar,"p-scrollpanel-hidden"),e.$refs.xBar.style.cssText="width:"+Math.max(100*e.scrollXRatio,10)+"%; left:"+e.$refs.content.scrollLeft/s*100+"%;bottom:"+n+"px;")),e.$refs.yBar&&(e.scrollYRatio>=1?(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.yBar,"p-scrollpanel-hidden")):(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.yBar,"p-scrollpanel-hidden"),e.$refs.yBar.style.cssText="height:"+Math.max(100*e.scrollYRatio,10)+"%; top: calc("+e.$refs.content.scrollTop/o*100+"% - "+e.$refs.xBar.clientHeight+"px);right:"+i+"px;"))}))}},onYBarMouseDown:function(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown:function(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var s=this;this.clearTimer(),this.timer=setTimeout((function(){s.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,s=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=s/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,s=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=s/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},u=["id"],h=["aria-controls","aria-valuenow"],d=["aria-controls","aria-valuenow"];c.render=function(e,t,s,n,c,p){return o(),i("div",r({class:e.cx("root")},e.ptmi("root")),[a("div",r({class:e.cx("wrapper")},e.ptm("wrapper")),[a("div",r({ref:"content",id:p.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return p.onScroll&&p.onScroll.apply(p,arguments)}),onMouseenter:t[1]||(t[1]=function(){return p.moveBar&&p.moveBar.apply(p,arguments)})},e.ptm("content")),[l(e.$slots,"default")],16,u)],16),a("div",r({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":p.contentId,"aria-valuenow":c.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return p.onXBarMouseDown&&p.onXBarMouseDown.apply(p,arguments)}),onKeydown:t[3]||(t[3]=function(e){return p.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[5]||(t[5]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)}),onBlur:t[6]||(t[6]=function(){return p.onBlur&&p.onBlur.apply(p,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,h),a("div",r({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":p.contentId,"aria-valuenow":c.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return p.onYBarMouseDown&&p.onYBarMouseDown.apply(p,arguments)}),onKeydown:t[8]||(t[8]=function(e){return p.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[10]||(t[10]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,d)],16)};export{c as default};

package/scrollpanel/scrollpanel.js

@@ -50,14 +50,12 @@ this.primevue.scrollpanel = (function (utils, BaseComponent, ScrollPanelStyle, v
         };
       },
       watch: {
-        '$attrs.id': {
-          immediate: true,
-          handler: function handler(newValue) {
-            this.id = newValue || utils.UniqueComponentId();
-          }
+        '$attrs.id': function $attrsId(newValue) {
+          this.id = newValue || utils.UniqueComponentId();
         }
       },
       mounted: function mounted() {
+        this.id = this.id || utils.UniqueComponentId();
         if (this.$el.offsetParent) {
           this.initialize();
         }
@@ -106,21 +104,25 @@ this.primevue.scrollpanel = (function (utils, BaseComponent, ScrollPanelStyle, v
             var right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
             this.scrollYRatio = ownHeight / totalHeight;
             this.frame = this.requestAnimationFrame(function () {
-              if (_this.scrollXRatio >= 1) {
-                _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-              } else {
-                _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-                _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+              if (_this.$refs.xBar) {
+                if (_this.scrollXRatio >= 1) {
+                  _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                  !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+                } else {
+                  _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                  !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+                  _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+                }
               }
-              if (_this.scrollYRatio >= 1) {
-                _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-              } else {
-                _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-                _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+              if (_this.$refs.yBar) {
+                if (_this.scrollYRatio >= 1) {
+                  _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                  !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+                } else {
+                  _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                  !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+                  _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                }
               }
             });
           }

package/scrollpanel/scrollpanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:o(t).default,props:{step:{type:Number,default:5}},style:o(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":{immediate:!0,handler:function(t){this.id=t||e.UniqueComponentId()}}},mounted:function(){this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),s=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===s&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,s=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var o=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+s+"px;"),t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/o*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];return r.render=function(e,t,n,o,r,c){return s.openBlock(),s.createElementBlock("div",s.mergeProps({class:e.cx("root")},e.ptmi("root")),[s.createElementVNode("div",s.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[s.createElementVNode("div",s.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[s.renderSlot(e.$slots,"default")],16,i)],16),s.createElementVNode("div",s.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),s.createElementVNode("div",s.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},r}(primevue.utils,primevue.basecomponent,primevue.scrollpanel.style,Vue);
+this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:o(t).default,props:{step:{type:Number,default:5}},style:o(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":function(t){this.id=t||e.UniqueComponentId()}},mounted:function(){this.id=this.id||e.UniqueComponentId(),this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),s=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===s&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,s=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var o=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){t.$refs.xBar&&(t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+s+"px;")),t.$refs.yBar&&(t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/o*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;"))}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];return r.render=function(e,t,n,o,r,c){return s.openBlock(),s.createElementBlock("div",s.mergeProps({class:e.cx("root")},e.ptmi("root")),[s.createElementVNode("div",s.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[s.createElementVNode("div",s.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[s.renderSlot(e.$slots,"default")],16,i)],16),s.createElementVNode("div",s.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),s.createElementVNode("div",s.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},r}(primevue.utils,primevue.basecomponent,primevue.scrollpanel.style,Vue);

package/sidebar/BaseSidebar.vue

@@ -52,6 +52,15 @@ export default {
         return {
             $parentInstance: this
         };
+    },
+    watch: {
+        dismissable(newValue) {
+            if (newValue) {
+                this.bindOutsideClickListener();
+            } else {
+                this.unbindOutsideClickListener();
+            }
+        }
     }
 };
 </script>

package/sidebar/sidebar.cjs.js

@@ -68,6 +68,15 @@ var script$1 = {
     return {
       $parentInstance: this
     };
+  },
+  watch: {
+    dismissable: function dismissable(newValue) {
+      if (newValue) {
+        this.bindOutsideClickListener();
+      } else {
+        this.unbindOutsideClickListener();
+      }
+    }
   }
 };
 

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/focustrap"),t=require("primevue/icons/times"),n=require("primevue/portal"),o=require("primevue/ripple"),i=require("primevue/utils"),s=require("primevue/basecomponent"),r=require("primevue/sidebar/style"),l=require("vue");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(e),u=c(t),d=c(n),m=c(o),h={name:"Sidebar",extends:{name:"BaseSidebar",extends:c(s).default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:c(r).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&i.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&i.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&i.DomHandler.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&i.DomHandler.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&i.DomHandler.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:m.default},components:{Portal:d.default,TimesIcon:u.default}},f=["aria-modal"],p=["aria-label"];h.render=function(e,t,n,o,i,s){var r=l.resolveComponent("Portal"),c=l.resolveDirective("ripple"),a=l.resolveDirective("focustrap");return l.openBlock(),l.createBlock(r,null,{default:l.withCtx((function(){return[i.containerVisible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[l.createVNode(l.Transition,l.mergeProps({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:l.withCtx((function(){return[e.visible?l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?l.renderSlot(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(l.openBlock(),l.createElementBlock(l.Fragment,{key:1},[l.createElementVNode("div",l.mergeProps({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[l.renderSlot(e.$slots,"header",{class:l.normalizeClass(e.cx("title"))},(function(){return[e.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("title")},e.ptm("title")),l.toDisplayString(e.header),17)):l.createCommentVNode("",!0)]})),e.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[l.renderSlot(e.$slots,"closeicon",{class:l.normalizeClass(e.cx("closeIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),l.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,p)),[[c]]):l.createCommentVNode("",!0)],16),l.createElementVNode("div",l.mergeProps({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[l.renderSlot(e.$slots,"default")],16)],64))],16,f)),[[a]]):l.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):l.createCommentVNode("",!0)]})),_:3})},module.exports=h;
+"use strict";var e=require("primevue/focustrap"),t=require("primevue/icons/times"),n=require("primevue/portal"),i=require("primevue/ripple"),o=require("primevue/utils"),s=require("primevue/basecomponent"),r=require("primevue/sidebar/style"),l=require("vue");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(e),u=c(t),d=c(n),m=c(i),h={name:"Sidebar",extends:{name:"BaseSidebar",extends:c(s).default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:c(r).default,provide:function(){return{$parentInstance:this}},watch:{dismissable:function(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&o.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&o.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&o.DomHandler.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&o.DomHandler.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&o.DomHandler.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:m.default},components:{Portal:d.default,TimesIcon:u.default}},f=["aria-modal"],p=["aria-label"];h.render=function(e,t,n,i,o,s){var r=l.resolveComponent("Portal"),c=l.resolveDirective("ripple"),a=l.resolveDirective("focustrap");return l.openBlock(),l.createBlock(r,null,{default:l.withCtx((function(){return[o.containerVisible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[l.createVNode(l.Transition,l.mergeProps({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:l.withCtx((function(){return[e.visible?l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?l.renderSlot(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(l.openBlock(),l.createElementBlock(l.Fragment,{key:1},[l.createElementVNode("div",l.mergeProps({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[l.renderSlot(e.$slots,"header",{class:l.normalizeClass(e.cx("title"))},(function(){return[e.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("title")},e.ptm("title")),l.toDisplayString(e.header),17)):l.createCommentVNode("",!0)]})),e.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[l.renderSlot(e.$slots,"closeicon",{class:l.normalizeClass(e.cx("closeIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),l.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,p)),[[c]]):l.createCommentVNode("",!0)],16),l.createElementVNode("div",l.mergeProps({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[l.renderSlot(e.$slots,"default")],16)],64))],16,f)),[[a]]):l.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):l.createCommentVNode("",!0)]})),_:3})},module.exports=h;

package/sidebar/sidebar.esm.js

@@ -57,6 +57,15 @@ var script$1 = {
     return {
       $parentInstance: this
     };
+  },
+  watch: {
+    dismissable: function dismissable(newValue) {
+      if (newValue) {
+        this.bindOutsideClickListener();
+      } else {
+        this.unbindOutsideClickListener();
+      }
+    }
   }
 };
 

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import e from"primevue/focustrap";import t from"primevue/icons/times";import n from"primevue/portal";import i from"primevue/ripple";import{ZIndexUtils as o,DomHandler as s}from"primevue/utils";import r from"primevue/basecomponent";import l from"primevue/sidebar/style";import{resolveComponent as a,resolveDirective as c,openBlock as u,createBlock as d,withCtx as f,createElementBlock as m,mergeProps as h,createVNode as p,Transition as v,withDirectives as k,renderSlot as b,Fragment as y,createElementVNode as L,normalizeClass as C,toDisplayString as w,createCommentVNode as x,resolveDynamicComponent as B}from"vue";var I={name:"Sidebar",extends:{name:"BaseSidebar",extends:r,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:l,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&o.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&o.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&s.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&o.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&s.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&s.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&s.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:e,ripple:i},components:{Portal:n,TimesIcon:t}},S=["aria-modal"],$=["aria-label"];I.render=function(e,t,n,i,o,s){var r=a("Portal"),l=c("ripple"),I=c("focustrap");return u(),d(r,null,{default:f((function(){return[o.containerVisible?(u(),m("div",h({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[p(v,h({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:f((function(){return[e.visible?k((u(),m("div",h({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?b(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(u(),m(y,{key:1},[L("div",h({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[b(e.$slots,"header",{class:C(e.cx("title"))},(function(){return[e.header?(u(),m("div",h({key:0,class:e.cx("title")},e.ptm("title")),w(e.header),17)):x("",!0)]})),e.showCloseIcon?k((u(),m("button",h({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[b(e.$slots,"closeicon",{class:C(e.cx("closeIcon"))},(function(){return[(u(),d(B(e.closeIcon?"span":"TimesIcon"),h({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,$)),[[l]]):x("",!0)],16),L("div",h({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[b(e.$slots,"default")],16)],64))],16,S)),[[I]]):x("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):x("",!0)]})),_:3})};export{I as default};
+import e from"primevue/focustrap";import t from"primevue/icons/times";import n from"primevue/portal";import i from"primevue/ripple";import{ZIndexUtils as o,DomHandler as s}from"primevue/utils";import r from"primevue/basecomponent";import l from"primevue/sidebar/style";import{resolveComponent as c,resolveDirective as a,openBlock as u,createBlock as d,withCtx as f,createElementBlock as h,mergeProps as m,createVNode as p,Transition as k,withDirectives as b,renderSlot as v,Fragment as y,createElementVNode as L,normalizeClass as C,toDisplayString as w,createCommentVNode as x,resolveDynamicComponent as B}from"vue";var I={name:"Sidebar",extends:{name:"BaseSidebar",extends:r,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:l,provide:function(){return{$parentInstance:this}},watch:{dismissable:function(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&o.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&o.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&s.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&o.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&s.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&s.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&s.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:e,ripple:i},components:{Portal:n,TimesIcon:t}},S=["aria-modal"],$=["aria-label"];I.render=function(e,t,n,i,o,s){var r=c("Portal"),l=a("ripple"),I=a("focustrap");return u(),d(r,null,{default:f((function(){return[o.containerVisible?(u(),h("div",m({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[p(k,m({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:f((function(){return[e.visible?b((u(),h("div",m({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?v(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(u(),h(y,{key:1},[L("div",m({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[v(e.$slots,"header",{class:C(e.cx("title"))},(function(){return[e.header?(u(),h("div",m({key:0,class:e.cx("title")},e.ptm("title")),w(e.header),17)):x("",!0)]})),e.showCloseIcon?b((u(),h("button",m({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[v(e.$slots,"closeicon",{class:C(e.cx("closeIcon"))},(function(){return[(u(),d(B(e.closeIcon?"span":"TimesIcon"),m({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,$)),[[l]]):x("",!0)],16),L("div",m({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[v(e.$slots,"default")],16)],64))],16,S)),[[I]]):x("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):x("",!0)]})),_:3})};export{I as default};

package/sidebar/sidebar.js

@@ -61,6 +61,15 @@ this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils,
         return {
           $parentInstance: this
         };
+      },
+      watch: {
+        dismissable: function dismissable(newValue) {
+          if (newValue) {
+            this.bindOutsideClickListener();
+          } else {
+            this.unbindOutsideClickListener();
+          }
+        }
       }
     };
 

package/sidebar/sidebar.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i,o,s,r,l){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(e),u=c(t),d=c(n),m=c(i),h={name:"Sidebar",extends:{name:"BaseSidebar",extends:c(s).default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:c(r).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&o.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&o.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&o.DomHandler.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&o.DomHandler.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&o.DomHandler.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:m.default},components:{Portal:d.default,TimesIcon:u.default}},f=["aria-modal"],p=["aria-label"];return h.render=function(e,t,n,i,o,s){var r=l.resolveComponent("Portal"),c=l.resolveDirective("ripple"),a=l.resolveDirective("focustrap");return l.openBlock(),l.createBlock(r,null,{default:l.withCtx((function(){return[o.containerVisible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[l.createVNode(l.Transition,l.mergeProps({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:l.withCtx((function(){return[e.visible?l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?l.renderSlot(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(l.openBlock(),l.createElementBlock(l.Fragment,{key:1},[l.createElementVNode("div",l.mergeProps({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[l.renderSlot(e.$slots,"header",{class:l.normalizeClass(e.cx("title"))},(function(){return[e.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("title")},e.ptm("title")),l.toDisplayString(e.header),17)):l.createCommentVNode("",!0)]})),e.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[l.renderSlot(e.$slots,"closeicon",{class:l.normalizeClass(e.cx("closeIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),l.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,p)),[[c]]):l.createCommentVNode("",!0)],16),l.createElementVNode("div",l.mergeProps({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[l.renderSlot(e.$slots,"default")],16)],64))],16,f)),[[a]]):l.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):l.createCommentVNode("",!0)]})),_:3})},h}(primevue.focustrap,primevue.icons.times,primevue.portal,primevue.ripple,primevue.utils,primevue.basecomponent,primevue.sidebar.style,Vue);
+this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i,o,s,r,l){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(e),u=c(t),d=c(n),m=c(i),h={name:"Sidebar",extends:{name:"BaseSidebar",extends:c(s).default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:c(r).default,provide:function(){return{$parentInstance:this}},watch:{dismissable:function(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&o.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&o.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&o.DomHandler.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&o.DomHandler.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&o.DomHandler.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:m.default},components:{Portal:d.default,TimesIcon:u.default}},f=["aria-modal"],p=["aria-label"];return h.render=function(e,t,n,i,o,s){var r=l.resolveComponent("Portal"),c=l.resolveDirective("ripple"),a=l.resolveDirective("focustrap");return l.openBlock(),l.createBlock(r,null,{default:l.withCtx((function(){return[o.containerVisible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[l.createVNode(l.Transition,l.mergeProps({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:l.withCtx((function(){return[e.visible?l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?l.renderSlot(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(l.openBlock(),l.createElementBlock(l.Fragment,{key:1},[l.createElementVNode("div",l.mergeProps({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[l.renderSlot(e.$slots,"header",{class:l.normalizeClass(e.cx("title"))},(function(){return[e.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("title")},e.ptm("title")),l.toDisplayString(e.header),17)):l.createCommentVNode("",!0)]})),e.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[l.renderSlot(e.$slots,"closeicon",{class:l.normalizeClass(e.cx("closeIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),l.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,p)),[[c]]):l.createCommentVNode("",!0)],16),l.createElementVNode("div",l.mergeProps({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[l.renderSlot(e.$slots,"default")],16)],64))],16,f)),[[a]]):l.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):l.createCommentVNode("",!0)]})),_:3})},h}(primevue.focustrap,primevue.icons.times,primevue.portal,primevue.ripple,primevue.utils,primevue.basecomponent,primevue.sidebar.style,Vue);

package/speeddial/SpeedDial.vue

@@ -78,17 +78,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
         },
         visible(newValue) {
             this.d_visible = newValue;
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.type !== 'linear') {
             const button = DomHandler.findSingle(this.container, '[data-pc-name="button"]');
             const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');