primevue 3.16.2 → 3.17.0

package/scrollpanel/scrollpanel.js

@@ -4,6 +4,12 @@ this.primevue.scrollpanel = (function (utils, vue) {
 
     var script = {
         name: 'ScrollPanel',
+        props: {
+            step: {
+                type: Number,
+                default: 5
+            }
+        },
         initialized: false,
         documentResizeListener: null,
         documentMouseMoveListener: null,
@@ -15,6 +21,16 @@ this.primevue.scrollpanel = (function (utils, vue) {
         isYBarClicked: false,
         lastPageX: null,
         lastPageY: null,
+        timer: null,
+        outsideClickListener: null,
+        data() {
+            return {
+                id: utils.UniqueComponentId(),
+                orientation: 'vertical',
+                lastScrollTop: 0,
+                lastScrollLeft: 0
+            };
+        },
         mounted() {
             if (this.$el.offsetParent) {
                 this.initialize();
@@ -40,15 +56,15 @@ this.primevue.scrollpanel = (function (utils, vue) {
             },
             calculateContainerHeight() {
                 let containerStyles = getComputedStyle(this.$el),
-                xBarStyles = getComputedStyle(this.$refs.xBar),
-                pureContainerHeight = utils.DomHandler.getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
+                    xBarStyles = getComputedStyle(this.$refs.xBar),
+                    pureContainerHeight = utils.DomHandler.getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
 
-                if (containerStyles['max-height'] !== "none" && pureContainerHeight === 0) {
-                    if(this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
+                if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
+                    if (this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
                         this.$el.style.height = containerStyles['max-height'];
-                    }
-                    else {
-                        this.$el.style.height = this.$refs.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
+                    } else {
+                        this.$el.style.height =
+                            this.$refs.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
                     }
                 }
             },
@@ -70,16 +86,14 @@ this.primevue.scrollpanel = (function (utils, vue) {
                 this.frame = this.requestAnimationFrame(() => {
                     if (this.scrollXRatio >= 1) {
                         utils.DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                    }
-                    else {
+                    } else {
                         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) {
                         utils.DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                    }
-                    else {
+                    } else {
                         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;';
                     }
@@ -87,6 +101,7 @@ this.primevue.scrollpanel = (function (utils, vue) {
             },
             onYBarMouseDown(e) {
                 this.isYBarClicked = true;
+                this.$refs.yBar.focus();
                 this.lastPageY = e.pageY;
                 utils.DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
                 utils.DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
@@ -96,6 +111,7 @@ this.primevue.scrollpanel = (function (utils, vue) {
             },
             onXBarMouseDown(e) {
                 this.isXBarClicked = true;
+                this.$refs.xBar.focus();
                 this.lastPageX = e.pageX;
                 utils.DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
                 utils.DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
@@ -103,20 +119,93 @@ this.primevue.scrollpanel = (function (utils, vue) {
                 this.bindDocumentMouseListeners();
                 e.preventDefault();
             },
+            onScroll(event) {
+                if (this.lastScrollLeft !== event.target.scrollLeft) {
+                    this.lastScrollLeft = event.target.scrollLeft;
+                    this.orientation = 'horizontal';
+                } else if (this.lastScrollTop !== event.target.scrollTop) {
+                    this.lastScrollTop = event.target.scrollTop;
+                    this.orientation = 'vertical';
+                }
+
+                this.moveBar();
+            },
+            onKeyDown(event) {
+                if (this.orientation === 'vertical') {
+                    switch (event.code) {
+                        case 'ArrowDown': {
+                            this.setTimer('scrollTop', this.step);
+                            event.preventDefault();
+                            break;
+                        }
+
+                        case 'ArrowUp': {
+                            this.setTimer('scrollTop', this.step * -1);
+                            event.preventDefault();
+                            break;
+                        }
+
+                        case 'ArrowLeft':
+
+                        case 'ArrowRight': {
+                            event.preventDefault();
+                            break;
+                        }
+                    }
+                } else if (this.orientation === 'horizontal') {
+                    switch (event.code) {
+                        case 'ArrowRight': {
+                            this.setTimer('scrollLeft', this.step);
+                            event.preventDefault();
+                            break;
+                        }
+
+                        case 'ArrowLeft': {
+                            this.setTimer('scrollLeft', this.step * -1);
+                            event.preventDefault();
+                            break;
+                        }
+
+                        case 'ArrowDown':
+
+                        case 'ArrowUp': {
+                            event.preventDefault();
+                            break;
+                        }
+                    }
+                }
+            },
+            onKeyUp() {
+                this.clearTimer();
+            },
+            repeat(bar, step) {
+                this.$refs.content[bar] += step;
+                this.moveBar();
+            },
+            setTimer(bar, step) {
+                this.clearTimer();
+                this.timer = setTimeout(() => {
+                    this.repeat(bar, step);
+                }, 40);
+            },
+            clearTimer() {
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                }
+            },
             onDocumentMouseMove(e) {
                 if (this.isXBarClicked) {
                     this.onMouseMoveForXBar(e);
-                }
-                else if (this.isYBarClicked) {
+                } else if (this.isYBarClicked) {
                     this.onMouseMoveForYBar(e);
-                }
-                else {
+                } else {
                     this.onMouseMoveForXBar(e);
                     this.onMouseMoveForYBar(e);
                 }
             },
             onMouseMoveForXBar(e) {
                 let deltaX = e.pageX - this.lastPageX;
+
                 this.lastPageX = e.pageX;
 
                 this.frame = this.requestAnimationFrame(() => {
@@ -125,12 +214,25 @@ this.primevue.scrollpanel = (function (utils, vue) {
             },
             onMouseMoveForYBar(e) {
                 let deltaY = e.pageY - this.lastPageY;
+
                 this.lastPageY = e.pageY;
 
                 this.frame = this.requestAnimationFrame(() => {
                     this.$refs.content.scrollTop += deltaY / this.scrollYRatio;
                 });
             },
+            onFocus(event) {
+                if (this.$refs.xBar.isSameNode(event.target)) {
+                    this.orientation = 'horizontal';
+                } else if (this.$refs.yBar.isSameNode(event.target)) {
+                    this.orientation = 'vertical';
+                }
+            },
+            onBlur() {
+                if (this.orientation === 'horizontal') {
+                    this.orientation = 'vertical';
+                }
+            },
             onDocumentMouseUp() {
                 utils.DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
                 utils.DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
@@ -142,6 +244,7 @@ this.primevue.scrollpanel = (function (utils, vue) {
             },
             requestAnimationFrame(f) {
                 let frame = window.requestAnimationFrame || this.timeoutFrame;
+
                 return frame(f);
             },
             refresh() {
@@ -149,57 +252,63 @@ this.primevue.scrollpanel = (function (utils, vue) {
             },
             scrollTop(scrollTop) {
                 let scrollableHeight = this.$refs.content.scrollHeight - this.$refs.content.clientHeight;
+
                 scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
-                this.$refs.contentscrollTop = scrollTop;
+                this.$refs.content.scrollTop = scrollTop;
+            },
+            timeoutFrame(fn) {
+                setTimeout(fn, 0);
             },
             bindDocumentMouseListeners() {
-    			if (!this.documentMouseMoveListener) {
-    				this.documentMouseMoveListener = (e) => {
-    					this.onDocumentMouseMove(e);
-    				};
+                if (!this.documentMouseMoveListener) {
+                    this.documentMouseMoveListener = (e) => {
+                        this.onDocumentMouseMove(e);
+                    };
 
-    				document.addEventListener('mousemove', this.documentMouseMoveListener);
+                    document.addEventListener('mousemove', this.documentMouseMoveListener);
                 }
 
                 if (!this.documentMouseUpListener) {
-    				this.documentMouseUpListener = (e) => {
-    					this.onDocumentMouseUp(e);
-    				};
-
-    				document.addEventListener('mouseup', this.documentMouseUpListener);
-    			}
-    		},
-    		unbindDocumentMouseListeners() {
-    			if (this.documentMouseMoveListener) {
-    				document.removeEventListener('mousemove', this.documentMouseMoveListener);
-    				this.documentMouseMoveListener = null;
+                    this.documentMouseUpListener = (e) => {
+                        this.onDocumentMouseUp(e);
+                    };
+
+                    document.addEventListener('mouseup', this.documentMouseUpListener);
+                }
+            },
+            unbindDocumentMouseListeners() {
+                if (this.documentMouseMoveListener) {
+                    document.removeEventListener('mousemove', this.documentMouseMoveListener);
+                    this.documentMouseMoveListener = null;
                 }
 
-                if(this.documentMouseUpListener) {
-    				document.removeEventListener('mouseup', this.documentMouseUpListener);
-    				this.documentMouseUpListener = null;
-    			}
-    		},
+                if (this.documentMouseUpListener) {
+                    document.removeEventListener('mouseup', this.documentMouseUpListener);
+                    this.documentMouseUpListener = null;
+                }
+            },
             bindDocumentResizeListener() {
-    			if (!this.documentResizeListener) {
-    				this.documentResizeListener = () => {
-    					this.moveBar();
-    				};
-
-    				window.addEventListener('resize', this.documentResizeListener);
-    			}
-    		},
-    		unbindDocumentResizeListener() {
-    			if(this.documentResizeListener) {
-    				window.removeEventListener('resize', this.documentResizeListener);
-    				this.documentResizeListener = null;
-    			}
-    		}
+                if (!this.documentResizeListener) {
+                    this.documentResizeListener = () => {
+                        this.moveBar();
+                    };
+
+                    window.addEventListener('resize', this.documentResizeListener);
+                }
+            },
+            unbindDocumentResizeListener() {
+                if (this.documentResizeListener) {
+                    window.removeEventListener('resize', this.documentResizeListener);
+                    this.documentResizeListener = null;
+                }
+            }
         }
     };
 
     const _hoisted_1 = { class: "p-scrollpanel p-component" };
     const _hoisted_2 = { class: "p-scrollpanel-wrapper" };
+    const _hoisted_3 = ["aria-valuenow"];
+    const _hoisted_4 = ["aria-valuenow"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -207,7 +316,7 @@ this.primevue.scrollpanel = (function (utils, vue) {
           vue.createElementVNode("div", {
             ref: "content",
             class: "p-scrollpanel-content",
-            onScroll: _cache[0] || (_cache[0] = (...args) => ($options.moveBar && $options.moveBar(...args))),
+            onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args))),
             onMouseenter: _cache[1] || (_cache[1] = (...args) => ($options.moveBar && $options.moveBar(...args)))
           }, [
             vue.renderSlot(_ctx.$slots, "default")
@@ -216,13 +325,28 @@ this.primevue.scrollpanel = (function (utils, vue) {
         vue.createElementVNode("div", {
           ref: "xBar",
           class: "p-scrollpanel-bar p-scrollpanel-bar-x",
-          onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onXBarMouseDown && $options.onXBarMouseDown(...args)))
-        }, null, 544),
+          tabindex: "0",
+          role: "scrollbar",
+          "aria-orientation": "horizontal",
+          "aria-valuenow": $data.lastScrollLeft,
+          onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onXBarMouseDown && $options.onXBarMouseDown(...args))),
+          onKeydown: _cache[3] || (_cache[3] = $event => ($options.onKeyDown($event))),
+          onKeyup: _cache[4] || (_cache[4] = (...args) => ($options.onKeyUp && $options.onKeyUp(...args))),
+          onFocus: _cache[5] || (_cache[5] = (...args) => ($options.onFocus && $options.onFocus(...args))),
+          onBlur: _cache[6] || (_cache[6] = (...args) => ($options.onBlur && $options.onBlur(...args)))
+        }, null, 40, _hoisted_3),
         vue.createElementVNode("div", {
           ref: "yBar",
           class: "p-scrollpanel-bar p-scrollpanel-bar-y",
-          onMousedown: _cache[3] || (_cache[3] = (...args) => ($options.onYBarMouseDown && $options.onYBarMouseDown(...args)))
-        }, null, 544)
+          tabindex: "0",
+          role: "scrollbar",
+          "aria-orientation": "vertical",
+          "aria-valuenow": $data.lastScrollTop,
+          onMousedown: _cache[7] || (_cache[7] = (...args) => ($options.onYBarMouseDown && $options.onYBarMouseDown(...args))),
+          onKeydown: _cache[8] || (_cache[8] = $event => ($options.onKeyDown($event))),
+          onKeyup: _cache[9] || (_cache[9] = (...args) => ($options.onKeyUp && $options.onKeyUp(...args))),
+          onFocus: _cache[10] || (_cache[10] = (...args) => ($options.onFocus && $options.onFocus(...args)))
+        }, null, 40, _hoisted_4)
       ]))
     }
 

package/scrollpanel/scrollpanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t){"use strict";var s={name:"ScrollPanel",initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,mounted(){this.$el.offsetParent&&this.initialize()},updated(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight(){let t=getComputedStyle(this.$el),s=getComputedStyle(this.$refs.xBar),n=e.DomHandler.getHeight(this.$el)-parseInt(s.height,10);"none"!==t["max-height"]&&0===n&&(this.$refs.content.offsetHeight+parseInt(s.height,10)>parseInt(t["max-height"],10)?this.$el.style.height=t["max-height"]:this.$el.style.height=this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar(){let t=this.$refs.content.scrollWidth,s=this.$refs.content.clientWidth,n=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=s/t;let o=this.$refs.content.scrollHeight,i=this.$refs.content.clientHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=i/o,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-hidden"),this.$refs.xBar.style.cssText="width:"+Math.max(100*this.scrollXRatio,10)+"%; left:"+this.$refs.content.scrollLeft/t*100+"%;bottom:"+n+"px;"),this.scrollYRatio>=1?e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-hidden"),this.$refs.yBar.style.cssText="height:"+Math.max(100*this.scrollYRatio,10)+"%; top: calc("+this.$refs.content.scrollTop/o*100+"% - "+this.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))},onYBarMouseDown(t){this.isYBarClicked=!0,this.lastPageY=t.pageY,e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown(t){this.isXBarClicked=!0,this.lastPageX=t.pageX,e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onDocumentMouseMove(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar(e){let t=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((()=>{this.$refs.content.scrollLeft+=t/this.scrollXRatio}))},onMouseMoveForYBar(e){let t=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((()=>{this.$refs.content.scrollTop+=t/this.scrollYRatio}))},onDocumentMouseUp(){e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh(){this.moveBar()},scrollTop(e){let t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;e=e>t?t:e>0?e:0,this.$refs.contentscrollTop=e},bindDocumentMouseListeners(){this.documentMouseMoveListener||(this.documentMouseMoveListener=e=>{this.onDocumentMouseMove(e)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=e=>{this.onDocumentMouseUp(e)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener(){this.documentResizeListener||(this.documentResizeListener=()=>{this.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}}};const n={class:"p-scrollpanel p-component"},o={class:"p-scrollpanel-wrapper"};return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrollpanel-wrapper {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n    float: left;\n}\n.p-scrollpanel-content {\n    height: calc(100% + 18px);\n    width: calc(100% + 18px);\n    padding: 0 18px 18px 0;\n    position: relative;\n    overflow: scroll;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}\n.p-scrollpanel-bar {\n    position: relative;\n    background: #c1c1c1;\n    border-radius: 3px;\n    z-index: 2;\n    cursor: pointer;\n    opacity: 0;\n    -webkit-transition: opacity 0.25s linear;\n    transition: opacity 0.25s linear;\n}\n.p-scrollpanel-bar-y {\n    width: 9px;\n    top: 0;\n}\n.p-scrollpanel-bar-x {\n    height: 9px;\n    bottom: 0;\n}\n.p-scrollpanel-hidden {\n    visibility: hidden;\n}\n.p-scrollpanel:hover .p-scrollpanel-bar,\n.p-scrollpanel:active .p-scrollpanel-bar {\n    opacity: 1;\n}\n.p-scrollpanel-grabbed {\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n"),s.render=function(e,s,i,r,l,a){return t.openBlock(),t.createElementBlock("div",n,[t.createElementVNode("div",o,[t.createElementVNode("div",{ref:"content",class:"p-scrollpanel-content",onScroll:s[0]||(s[0]=(...e)=>a.moveBar&&a.moveBar(...e)),onMouseenter:s[1]||(s[1]=(...e)=>a.moveBar&&a.moveBar(...e))},[t.renderSlot(e.$slots,"default")],544)]),t.createElementVNode("div",{ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",onMousedown:s[2]||(s[2]=(...e)=>a.onXBarMouseDown&&a.onXBarMouseDown(...e))},null,544),t.createElementVNode("div",{ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",onMousedown:s[3]||(s[3]=(...e)=>a.onYBarMouseDown&&a.onYBarMouseDown(...e))},null,544)])},s}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t){"use strict";var s={name:"ScrollPanel",props:{step:{type:Number,default:5}},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:()=>({id:e.UniqueComponentId(),orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}),mounted(){this.$el.offsetParent&&this.initialize()},updated(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight(){let t=getComputedStyle(this.$el),s=getComputedStyle(this.$refs.xBar),o=e.DomHandler.getHeight(this.$el)-parseInt(s.height,10);"none"!==t["max-height"]&&0===o&&(this.$refs.content.offsetHeight+parseInt(s.height,10)>parseInt(t["max-height"],10)?this.$el.style.height=t["max-height"]:this.$el.style.height=this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar(){let t=this.$refs.content.scrollWidth,s=this.$refs.content.clientWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=s/t;let n=this.$refs.content.scrollHeight,i=this.$refs.content.clientHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=i/n,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-hidden"),this.$refs.xBar.style.cssText="width:"+Math.max(100*this.scrollXRatio,10)+"%; left:"+this.$refs.content.scrollLeft/t*100+"%;bottom:"+o+"px;"),this.scrollYRatio>=1?e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-hidden"),this.$refs.yBar.style.cssText="height:"+Math.max(100*this.scrollYRatio,10)+"%; top: calc("+this.$refs.content.scrollTop/n*100+"% - "+this.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))},onYBarMouseDown(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll(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(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(){this.clearTimer()},repeat(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer(e,t){this.clearTimer(),this.timer=setTimeout((()=>{this.repeat(e,t)}),40)},clearTimer(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar(e){let t=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((()=>{this.$refs.content.scrollLeft+=t/this.scrollXRatio}))},onMouseMoveForYBar(e){let t=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((()=>{this.$refs.content.scrollTop+=t/this.scrollYRatio}))},onFocus(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp(){e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh(){this.moveBar()},scrollTop(e){let t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;e=e>t?t:e>0?e:0,this.$refs.content.scrollTop=e},timeoutFrame(e){setTimeout(e,0)},bindDocumentMouseListeners(){this.documentMouseMoveListener||(this.documentMouseMoveListener=e=>{this.onDocumentMouseMove(e)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=e=>{this.onDocumentMouseUp(e)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener(){this.documentResizeListener||(this.documentResizeListener=()=>{this.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}}};const o={class:"p-scrollpanel p-component"},n={class:"p-scrollpanel-wrapper"},i=["aria-valuenow"],r=["aria-valuenow"];return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-scrollpanel-wrapper {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n    float: left;\n}\n.p-scrollpanel-content {\n    height: calc(100% + 18px);\n    width: calc(100% + 18px);\n    padding: 0 18px 18px 0;\n    position: relative;\n    overflow: scroll;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}\n.p-scrollpanel-bar {\n    position: relative;\n    background: #c1c1c1;\n    border-radius: 3px;\n    z-index: 2;\n    cursor: pointer;\n    opacity: 0;\n    -webkit-transition: opacity 0.25s linear;\n    transition: opacity 0.25s linear;\n}\n.p-scrollpanel-bar-y {\n    width: 9px;\n    top: 0;\n}\n.p-scrollpanel-bar-x {\n    height: 9px;\n    bottom: 0;\n}\n.p-scrollpanel-hidden {\n    visibility: hidden;\n}\n.p-scrollpanel:hover .p-scrollpanel-bar,\n.p-scrollpanel:active .p-scrollpanel-bar {\n    opacity: 1;\n}\n.p-scrollpanel-grabbed {\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n"),s.render=function(e,s,l,a,c,h){return t.openBlock(),t.createElementBlock("div",o,[t.createElementVNode("div",n,[t.createElementVNode("div",{ref:"content",class:"p-scrollpanel-content",onScroll:s[0]||(s[0]=(...e)=>h.onScroll&&h.onScroll(...e)),onMouseenter:s[1]||(s[1]=(...e)=>h.moveBar&&h.moveBar(...e))},[t.renderSlot(e.$slots,"default")],544)]),t.createElementVNode("div",{ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-valuenow":c.lastScrollLeft,onMousedown:s[2]||(s[2]=(...e)=>h.onXBarMouseDown&&h.onXBarMouseDown(...e)),onKeydown:s[3]||(s[3]=e=>h.onKeyDown(e)),onKeyup:s[4]||(s[4]=(...e)=>h.onKeyUp&&h.onKeyUp(...e)),onFocus:s[5]||(s[5]=(...e)=>h.onFocus&&h.onFocus(...e)),onBlur:s[6]||(s[6]=(...e)=>h.onBlur&&h.onBlur(...e))},null,40,i),t.createElementVNode("div",{ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-valuenow":c.lastScrollTop,onMousedown:s[7]||(s[7]=(...e)=>h.onYBarMouseDown&&h.onYBarMouseDown(...e)),onKeydown:s[8]||(s[8]=e=>h.onKeyDown(e)),onKeyup:s[9]||(s[9]=(...e)=>h.onKeyUp&&h.onKeyUp(...e)),onFocus:s[10]||(s[10]=(...e)=>h.onFocus&&h.onFocus(...e))},null,40,r)])},s}(primevue.utils,Vue);

package/scrolltop/ScrollTop.d.ts

@@ -26,17 +26,15 @@ export interface ScrollTopProps {
     behavior?: string | undefined;
 }
 
-export interface ScrollTopSlots {
-}
+export interface ScrollTopSlots {}
 
-export declare type ScrollTopEmits = {
-}
+export declare type ScrollTopEmits = {};
 
-declare class ScrollTop extends ClassComponent<ScrollTopProps, ScrollTopSlots, ScrollTopEmits> { }
+declare class ScrollTop extends ClassComponent<ScrollTopProps, ScrollTopSlots, ScrollTopEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ScrollTop: GlobalComponentConstructor<ScrollTop>
+        ScrollTop: GlobalComponentConstructor<ScrollTop>;
     }
 }
 
@@ -46,7 +44,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ScrollTop](https://www.primefaces.org/primevue/showcase/#/scrolltop)
+ * - [ScrollTop](https://www.primefaces.org/primevue/scrolltop)
  *
  */
 export default ScrollTop;

package/scrolltop/ScrollTop.vue

@@ -1,23 +1,18 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave">
-        <button :ref="containerRef" :class="containerClass" v-if="visible" @click="onClick" type="button">
+        <button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button">
             <span :class="iconClass"></span>
         </button>
     </transition>
 </template>
 
 <script>
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'ScrollTop',
     scrollListener: null,
     container: null,
-    data() {
-        return {
-            visible: false
-        }
-    },
     props: {
         target: {
             type: String,
@@ -36,17 +31,18 @@ export default {
             default: 'smooth'
         }
     },
+    data() {
+        return {
+            visible: false
+        };
+    },
     mounted() {
-        if (this.target === 'window')
-            this.bindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.bindParentScrollListener();
+        if (this.target === 'window') this.bindDocumentScrollListener();
+        else if (this.target === 'parent') this.bindParentScrollListener();
     },
     beforeUnmount() {
-        if (this.target === 'window')
-            this.unbindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.unbindParentScrollListener();
+        if (this.target === 'window') this.unbindDocumentScrollListener();
+        else if (this.target === 'parent') this.unbindParentScrollListener();
 
         if (this.container) {
             ZIndexUtils.clear(this.container);
@@ -56,16 +52,15 @@ export default {
     methods: {
         onClick() {
             let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
+
             scrollElement.scroll({
                 top: 0,
                 behavior: this.behavior
             });
         },
         checkVisibility(scrollY) {
-            if (scrollY > this.threshold)
-                this.visible = true;
-            else
-                this.visible = false;
+            if (scrollY > this.threshold) this.visible = true;
+            else this.visible = false;
         },
         bindParentScrollListener() {
             this.scrollListener = () => {
@@ -105,13 +100,13 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-scrolltop p-link p-component', {'p-scrolltop-sticky': this.target !== 'window'}];
+            return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
         iconClass() {
             return ['p-scrolltop-icon', this.icon];
         }
     }
-}
+};
 </script>
 
 <style>
@@ -137,7 +132,7 @@ export default {
 }
 
 .p-scrolltop-enter-active {
-    transition: opacity .15s;
+    transition: opacity 0.15s;
 }
 
 .p-scrolltop.p-scrolltop-leave-to {
@@ -145,6 +140,6 @@ export default {
 }
 
 .p-scrolltop-leave-active {
-    transition: opacity .15s;
+    transition: opacity 0.15s;
 }
 </style>

package/scrolltop/scrolltop.cjs.js

@@ -7,11 +7,6 @@ var script = {
     name: 'ScrollTop',
     scrollListener: null,
     container: null,
-    data() {
-        return {
-            visible: false
-        }
-    },
     props: {
         target: {
             type: String,
@@ -30,17 +25,18 @@ var script = {
             default: 'smooth'
         }
     },
+    data() {
+        return {
+            visible: false
+        };
+    },
     mounted() {
-        if (this.target === 'window')
-            this.bindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.bindParentScrollListener();
+        if (this.target === 'window') this.bindDocumentScrollListener();
+        else if (this.target === 'parent') this.bindParentScrollListener();
     },
     beforeUnmount() {
-        if (this.target === 'window')
-            this.unbindDocumentScrollListener();
-        else if (this.target === 'parent')
-            this.unbindParentScrollListener();
+        if (this.target === 'window') this.unbindDocumentScrollListener();
+        else if (this.target === 'parent') this.unbindParentScrollListener();
 
         if (this.container) {
             utils.ZIndexUtils.clear(this.container);
@@ -50,16 +46,15 @@ var script = {
     methods: {
         onClick() {
             let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
+
             scrollElement.scroll({
                 top: 0,
                 behavior: this.behavior
             });
         },
         checkVisibility(scrollY) {
-            if (scrollY > this.threshold)
-                this.visible = true;
-            else
-                this.visible = false;
+            if (scrollY > this.threshold) this.visible = true;
+            else this.visible = false;
         },
         bindParentScrollListener() {
             this.scrollListener = () => {
@@ -99,7 +94,7 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-scrolltop p-link p-component', {'p-scrolltop-sticky': this.target !== 'window'}];
+            return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
         iconClass() {
             return ['p-scrolltop-icon', this.icon];
@@ -160,7 +155,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n";
+var css_248z = "\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/scrolltop/scrolltop.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),n={name:"ScrollTop",scrollListener:null,container:null,data:()=>({visible:!1}),props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(e.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.ZIndexUtils.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity .15s;\n    transition: opacity .15s;\n}\n"),n.render=function(e,n,i,o,l,r){return t.openBlock(),t.createBlock(t.Transition,{name:"p-scrolltop",appear:"",onEnter:r.onEnter,onAfterLeave:r.onAfterLeave},{default:t.withCtx((()=>[l.visible?(t.openBlock(),t.createElementBlock("button",{key:0,ref:r.containerRef,class:t.normalizeClass(r.containerClass),onClick:n[0]||(n[0]=(...e)=>r.onClick&&r.onClick(...e)),type:"button"},[t.createElementVNode("span",{class:t.normalizeClass(r.iconClass)},null,2)],2)):t.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterLeave"])},module.exports=n;
+"use strict";var e=require("primevue/utils"),t=require("vue"),n={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(e.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.ZIndexUtils.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    -webkit-transition: opacity 0.15s;\n    transition: opacity 0.15s;\n}\n"),n.render=function(e,n,i,o,l,r){return t.openBlock(),t.createBlock(t.Transition,{name:"p-scrolltop",appear:"",onEnter:r.onEnter,onAfterLeave:r.onAfterLeave},{default:t.withCtx((()=>[l.visible?(t.openBlock(),t.createElementBlock("button",{key:0,ref:r.containerRef,class:t.normalizeClass(r.containerClass),onClick:n[0]||(n[0]=(...e)=>r.onClick&&r.onClick(...e)),type:"button"},[t.createElementVNode("span",{class:t.normalizeClass(r.iconClass)},null,2)],2)):t.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterLeave"])},module.exports=n;