primevue 3.16.2 → 3.17.0

package/scrollpanel/scrollpanel.cjs.js

@@ -5,6 +5,12 @@ var vue = require('vue');
 
 var script = {
     name: 'ScrollPanel',
+    props: {
+        step: {
+            type: Number,
+            default: 5
+        }
+    },
     initialized: false,
     documentResizeListener: null,
     documentMouseMoveListener: null,
@@ -16,6 +22,16 @@ var script = {
     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();
@@ -41,15 +57,15 @@ var script = {
         },
         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';
                 }
             }
         },
@@ -71,16 +87,14 @@ var script = {
             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;';
                 }
@@ -88,6 +102,7 @@ var script = {
         },
         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');
@@ -97,6 +112,7 @@ var script = {
         },
         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');
@@ -104,20 +120,93 @@ var script = {
             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(() => {
@@ -126,12 +215,25 @@ var script = {
         },
         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');
@@ -143,6 +245,7 @@ var script = {
         },
         requestAnimationFrame(f) {
             let frame = window.requestAnimationFrame || this.timeoutFrame;
+
             return frame(f);
         },
         refresh() {
@@ -150,57 +253,63 @@ var script = {
         },
         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, [
@@ -208,7 +317,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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")
@@ -217,13 +326,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     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.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),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"};!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)])},module.exports=s;
+"use strict";var e=require("primevue/utils"),t=require("vue"),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"];!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)])},module.exports=s;