primevue 3.26.0 → 3.27.0

package/scrollpanel/ScrollPanel.d.ts

@@ -10,6 +10,75 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ScrollPanelPassThroughOptionType = ScrollPanelPassThroughAttributes | ((options: ScrollPanelPassThroughMethodOptions) => ScrollPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollPanelPassThroughMethodOptions {
+    props: ScrollPanelProps;
+    state: ScrollPanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollPanelProps.pt}
+ */
+export interface ScrollPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the horizontal panel's DOM element.
+     */
+    barX?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the vertical panel's DOM element.
+     */
+    barY?: ScrollPanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ScrollPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface ScrollPanelState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current scrollpanel orientation.
+     * @defaultValue vertical
+     */
+    orientation: string;
+    /**
+     * Latest scroll top position.
+     * @defaultValue 0
+     */
+    lastScrollTop: number;
+    /**
+     * Latest scroll left position.
+     * @defaultValue 0
+     */
+    lastScrollLeft: number;
+}
+
 /**
  * Defines valid properties in ScrollPanel component.
  */
@@ -19,6 +88,11 @@ export interface ScrollPanelProps {
      * @defaultValue 5
      */
     step?: number | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollPanelPassThroughOptions}
+     */
+    pt?: ScrollPanelPassThroughOptions;
 }
 
 /**

package/scrollpanel/ScrollPanel.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="p-scrollpanel p-component">
-        <div class="p-scrollpanel-wrapper">
-            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar">
+    <div class="p-scrollpanel p-component" v-bind="ptm('root')">
+        <div class="p-scrollpanel-wrapper" v-bind="ptm('wrapper')">
+            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
                 <slot></slot>
             </div>
         </div>
@@ -17,6 +17,7 @@
             @keyup="onKeyUp"
             @focus="onFocus"
             @blur="onBlur"
+            v-bind="ptm('barx')"
         ></div>
         <div
             ref="yBar"
@@ -29,15 +30,18 @@
             @keydown="onKeyDown($event)"
             @keyup="onKeyUp"
             @focus="onFocus"
+            v-bind="ptm('bary')"
         ></div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ScrollPanel',
+    extends: BaseComponent,
     props: {
         step: {
             type: Number,

package/scrollpanel/scrollpanel.cjs.js

@@ -1,10 +1,16 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
 var script = {
     name: 'ScrollPanel',
+    extends: BaseComponent__default["default"],
     props: {
         step: {
             type: Number,
@@ -306,24 +312,22 @@ var script = {
     }
 };
 
-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"];
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = ["aria-valuenow"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.createElementVNode("div", _hoisted_2, [
-      vue.createElementVNode("div", {
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-scrollpanel p-component" }, _ctx.ptm('root')), [
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-scrollpanel-wrapper" }, _ctx.ptm('wrapper')), [
+      vue.createElementVNode("div", vue.mergeProps({
         ref: "content",
         class: "p-scrollpanel-content",
         onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args))),
         onMouseenter: _cache[1] || (_cache[1] = (...args) => ($options.moveBar && $options.moveBar(...args)))
-      }, [
+      }, _ctx.ptm('content')), [
         vue.renderSlot(_ctx.$slots, "default")
-      ], 544)
-    ]),
-    vue.createElementVNode("div", {
+      ], 16)
+    ], 16),
+    vue.createElementVNode("div", vue.mergeProps({
       ref: "xBar",
       class: "p-scrollpanel-bar p-scrollpanel-bar-x",
       tabindex: "0",
@@ -335,8 +339,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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", {
+    }, _ctx.ptm('barx')), null, 16, _hoisted_1),
+    vue.createElementVNode("div", vue.mergeProps({
       ref: "yBar",
       class: "p-scrollpanel-bar p-scrollpanel-bar-y",
       tabindex: "0",
@@ -347,8 +351,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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)
-  ]))
+    }, _ctx.ptm('bary')), null, 16, _hoisted_2)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/scrollpanel/scrollpanel.cjs.min.js

@@ -1 +1 @@
-"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    box-sizing: border-box;\n    scrollbar-width: none;\n}\n.p-scrollpanel-content::-webkit-scrollbar {\n    display: none;\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    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    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;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/utils"),o=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"ScrollPanel",extends:s(e).default,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:t.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 e=getComputedStyle(this.$el),o=getComputedStyle(this.$refs.xBar),s=t.DomHandler.getHeight(this.$el)-parseInt(o.height,10);"none"!==e["max-height"]&&0===s&&(this.$refs.content.offsetHeight+parseInt(o.height,10)>parseInt(e["max-height"],10)?this.$el.style.height=e["max-height"]:this.$el.style.height=this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar(){let e=this.$refs.content.scrollWidth,o=this.$refs.content.clientWidth,s=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=o/e;let n=this.$refs.content.scrollHeight,r=this.$refs.content.clientHeight,i=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=r/n,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?t.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(t.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/e*100+"%;bottom:"+s+"px;"),this.scrollYRatio>=1?t.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(t.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:"+i+"px;")}))},onYBarMouseDown(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,t.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,t.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.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(){t.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.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 r=["aria-valuenow"],i=["aria-valuenow"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&s.firstChild?s.insertBefore(n,s.firstChild):s.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    box-sizing: border-box;\n    scrollbar-width: none;\n}\n.p-scrollpanel-content::-webkit-scrollbar {\n    display: none;\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    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    user-select: none;\n}\n"),n.render=function(e,t,s,n,l,a){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:"p-scrollpanel p-component"},e.ptm("root")),[o.createElementVNode("div",o.mergeProps({class:"p-scrollpanel-wrapper"},e.ptm("wrapper")),[o.createElementVNode("div",o.mergeProps({ref:"content",class:"p-scrollpanel-content",onScroll:t[0]||(t[0]=(...e)=>a.onScroll&&a.onScroll(...e)),onMouseenter:t[1]||(t[1]=(...e)=>a.moveBar&&a.moveBar(...e))},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16)],16),o.createElementVNode("div",o.mergeProps({ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-valuenow":l.lastScrollLeft,onMousedown:t[2]||(t[2]=(...e)=>a.onXBarMouseDown&&a.onXBarMouseDown(...e)),onKeydown:t[3]||(t[3]=e=>a.onKeyDown(e)),onKeyup:t[4]||(t[4]=(...e)=>a.onKeyUp&&a.onKeyUp(...e)),onFocus:t[5]||(t[5]=(...e)=>a.onFocus&&a.onFocus(...e)),onBlur:t[6]||(t[6]=(...e)=>a.onBlur&&a.onBlur(...e))},e.ptm("barx")),null,16,r),o.createElementVNode("div",o.mergeProps({ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-valuenow":l.lastScrollTop,onMousedown:t[7]||(t[7]=(...e)=>a.onYBarMouseDown&&a.onYBarMouseDown(...e)),onKeydown:t[8]||(t[8]=e=>a.onKeyDown(e)),onKeyup:t[9]||(t[9]=(...e)=>a.onKeyUp&&a.onKeyUp(...e)),onFocus:t[10]||(t[10]=(...e)=>a.onFocus&&a.onFocus(...e))},e.ptm("bary")),null,16,i)],16)},module.exports=n;

package/scrollpanel/scrollpanel.esm.js

@@ -1,8 +1,10 @@
+import BaseComponent from 'primevue/basecomponent';
 import { UniqueComponentId, DomHandler } from 'primevue/utils';
-import { openBlock, createElementBlock, createElementVNode, renderSlot } from 'vue';
+import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot } from 'vue';
 
 var script = {
     name: 'ScrollPanel',
+    extends: BaseComponent,
     props: {
         step: {
             type: Number,
@@ -304,24 +306,22 @@ var script = {
     }
 };
 
-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"];
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = ["aria-valuenow"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, [
-      createElementVNode("div", {
+  return (openBlock(), createElementBlock("div", mergeProps({ class: "p-scrollpanel p-component" }, _ctx.ptm('root')), [
+    createElementVNode("div", mergeProps({ class: "p-scrollpanel-wrapper" }, _ctx.ptm('wrapper')), [
+      createElementVNode("div", mergeProps({
         ref: "content",
         class: "p-scrollpanel-content",
         onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args))),
         onMouseenter: _cache[1] || (_cache[1] = (...args) => ($options.moveBar && $options.moveBar(...args)))
-      }, [
+      }, _ctx.ptm('content')), [
         renderSlot(_ctx.$slots, "default")
-      ], 544)
-    ]),
-    createElementVNode("div", {
+      ], 16)
+    ], 16),
+    createElementVNode("div", mergeProps({
       ref: "xBar",
       class: "p-scrollpanel-bar p-scrollpanel-bar-x",
       tabindex: "0",
@@ -333,8 +333,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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),
-    createElementVNode("div", {
+    }, _ctx.ptm('barx')), null, 16, _hoisted_1),
+    createElementVNode("div", mergeProps({
       ref: "yBar",
       class: "p-scrollpanel-bar p-scrollpanel-bar-y",
       tabindex: "0",
@@ -345,8 +345,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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)
-  ]))
+    }, _ctx.ptm('bary')), null, 16, _hoisted_2)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/scrollpanel/scrollpanel.esm.min.js

@@ -1 +1 @@
-import{UniqueComponentId as e,DomHandler as t}from"primevue/utils";import{openBlock as s,createElementBlock as o,createElementVNode as i,renderSlot as n}from"vue";var r={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(),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 e=getComputedStyle(this.$el),s=getComputedStyle(this.$refs.xBar),o=t.getHeight(this.$el)-parseInt(s.height,10);"none"!==e["max-height"]&&0===o&&(this.$refs.content.offsetHeight+parseInt(s.height,10)>parseInt(e["max-height"],10)?this.$el.style.height=e["max-height"]:this.$el.style.height=this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar(){let e=this.$refs.content.scrollWidth,s=this.$refs.content.clientWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=s/e;let i=this.$refs.content.scrollHeight,n=this.$refs.content.clientHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=n/i,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?t.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(t.removeClass(this.$refs.xBar,"p-scrollpanel-hidden"),this.$refs.xBar.style.cssText="width:"+Math.max(100*this.scrollXRatio,10)+"%; left:"+this.$refs.content.scrollLeft/e*100+"%;bottom:"+o+"px;"),this.scrollYRatio>=1?t.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(t.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/i*100+"% - "+this.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))},onYBarMouseDown(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,t.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,t.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.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(){t.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.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 l={class:"p-scrollpanel p-component"},a={class:"p-scrollpanel-wrapper"},c=["aria-valuenow"],h=["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],i=document.createElement("style");i.type="text/css","top"===s&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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    box-sizing: border-box;\n    scrollbar-width: none;\n}\n.p-scrollpanel-content::-webkit-scrollbar {\n    display: none;\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    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    user-select: none;\n}\n"),r.render=function(e,t,r,p,u,d){return s(),o("div",l,[i("div",a,[i("div",{ref:"content",class:"p-scrollpanel-content",onScroll:t[0]||(t[0]=(...e)=>d.onScroll&&d.onScroll(...e)),onMouseenter:t[1]||(t[1]=(...e)=>d.moveBar&&d.moveBar(...e))},[n(e.$slots,"default")],544)]),i("div",{ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-valuenow":u.lastScrollLeft,onMousedown:t[2]||(t[2]=(...e)=>d.onXBarMouseDown&&d.onXBarMouseDown(...e)),onKeydown:t[3]||(t[3]=e=>d.onKeyDown(e)),onKeyup:t[4]||(t[4]=(...e)=>d.onKeyUp&&d.onKeyUp(...e)),onFocus:t[5]||(t[5]=(...e)=>d.onFocus&&d.onFocus(...e)),onBlur:t[6]||(t[6]=(...e)=>d.onBlur&&d.onBlur(...e))},null,40,c),i("div",{ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-valuenow":u.lastScrollTop,onMousedown:t[7]||(t[7]=(...e)=>d.onYBarMouseDown&&d.onYBarMouseDown(...e)),onKeydown:t[8]||(t[8]=e=>d.onKeyDown(e)),onKeyup:t[9]||(t[9]=(...e)=>d.onKeyUp&&d.onKeyUp(...e)),onFocus:t[10]||(t[10]=(...e)=>d.onFocus&&d.onFocus(...e))},null,40,h)])};export{r as default};
+import e from"primevue/basecomponent";import{UniqueComponentId as t,DomHandler as s}from"primevue/utils";import{openBlock as o,createElementBlock as i,mergeProps as n,createElementVNode as r,renderSlot as l}from"vue";var a={name:"ScrollPanel",extends:e,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:t(),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 e=getComputedStyle(this.$el),t=getComputedStyle(this.$refs.xBar),o=s.getHeight(this.$el)-parseInt(t.height,10);"none"!==e["max-height"]&&0===o&&(this.$refs.content.offsetHeight+parseInt(t.height,10)>parseInt(e["max-height"],10)?this.$el.style.height=e["max-height"]:this.$el.style.height=this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar(){let e=this.$refs.content.scrollWidth,t=this.$refs.content.clientWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=t/e;let i=this.$refs.content.scrollHeight,n=this.$refs.content.clientHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=n/i,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?s.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(s.removeClass(this.$refs.xBar,"p-scrollpanel-hidden"),this.$refs.xBar.style.cssText="width:"+Math.max(100*this.scrollXRatio,10)+"%; left:"+this.$refs.content.scrollLeft/e*100+"%;bottom:"+o+"px;"),this.scrollYRatio>=1?s.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(s.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/i*100+"% - "+this.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))},onYBarMouseDown(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,s.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),s.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,s.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),s.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.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(){s.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),s.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),s.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 c=["aria-valuenow"],h=["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],i=document.createElement("style");i.type="text/css","top"===s&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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    box-sizing: border-box;\n    scrollbar-width: none;\n}\n.p-scrollpanel-content::-webkit-scrollbar {\n    display: none;\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    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    user-select: none;\n}\n"),a.render=function(e,t,s,a,p,u){return o(),i("div",n({class:"p-scrollpanel p-component"},e.ptm("root")),[r("div",n({class:"p-scrollpanel-wrapper"},e.ptm("wrapper")),[r("div",n({ref:"content",class:"p-scrollpanel-content",onScroll:t[0]||(t[0]=(...e)=>u.onScroll&&u.onScroll(...e)),onMouseenter:t[1]||(t[1]=(...e)=>u.moveBar&&u.moveBar(...e))},e.ptm("content")),[l(e.$slots,"default")],16)],16),r("div",n({ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-valuenow":p.lastScrollLeft,onMousedown:t[2]||(t[2]=(...e)=>u.onXBarMouseDown&&u.onXBarMouseDown(...e)),onKeydown:t[3]||(t[3]=e=>u.onKeyDown(e)),onKeyup:t[4]||(t[4]=(...e)=>u.onKeyUp&&u.onKeyUp(...e)),onFocus:t[5]||(t[5]=(...e)=>u.onFocus&&u.onFocus(...e)),onBlur:t[6]||(t[6]=(...e)=>u.onBlur&&u.onBlur(...e))},e.ptm("barx")),null,16,c),r("div",n({ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-valuenow":p.lastScrollTop,onMousedown:t[7]||(t[7]=(...e)=>u.onYBarMouseDown&&u.onYBarMouseDown(...e)),onKeydown:t[8]||(t[8]=e=>u.onKeyDown(e)),onKeyup:t[9]||(t[9]=(...e)=>u.onKeyUp&&u.onKeyUp(...e)),onFocus:t[10]||(t[10]=(...e)=>u.onFocus&&u.onFocus(...e))},e.ptm("bary")),null,16,h)],16)};export{a as default};

package/scrollpanel/scrollpanel.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.scrollpanel = (function (utils, vue) {
+this.primevue.scrollpanel = (function (BaseComponent, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'ScrollPanel',
+        extends: BaseComponent__default["default"],
         props: {
             step: {
                 type: Number,
@@ -305,24 +310,22 @@ this.primevue.scrollpanel = (function (utils, vue) {
         }
     };
 
-    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"];
+    const _hoisted_1 = ["aria-valuenow"];
+    const _hoisted_2 = ["aria-valuenow"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("div", _hoisted_2, [
-          vue.createElementVNode("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-scrollpanel p-component" }, _ctx.ptm('root')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-scrollpanel-wrapper" }, _ctx.ptm('wrapper')), [
+          vue.createElementVNode("div", vue.mergeProps({
             ref: "content",
             class: "p-scrollpanel-content",
             onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args))),
             onMouseenter: _cache[1] || (_cache[1] = (...args) => ($options.moveBar && $options.moveBar(...args)))
-          }, [
+          }, _ctx.ptm('content')), [
             vue.renderSlot(_ctx.$slots, "default")
-          ], 544)
-        ]),
-        vue.createElementVNode("div", {
+          ], 16)
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({
           ref: "xBar",
           class: "p-scrollpanel-bar p-scrollpanel-bar-x",
           tabindex: "0",
@@ -334,8 +337,8 @@ this.primevue.scrollpanel = (function (utils, vue) {
           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", {
+        }, _ctx.ptm('barx')), null, 16, _hoisted_1),
+        vue.createElementVNode("div", vue.mergeProps({
           ref: "yBar",
           class: "p-scrollpanel-bar p-scrollpanel-bar-y",
           tabindex: "0",
@@ -346,8 +349,8 @@ this.primevue.scrollpanel = (function (utils, vue) {
           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)
-      ]))
+        }, _ctx.ptm('bary')), null, 16, _hoisted_2)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -384,4 +387,4 @@ this.primevue.scrollpanel = (function (utils, vue) {
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.basecomponent, primevue.utils, Vue);

package/scrollpanel/scrollpanel.min.js

@@ -1 +1 @@
-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    box-sizing: border-box;\n    scrollbar-width: none;\n}\n.p-scrollpanel-content::-webkit-scrollbar {\n    display: none;\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    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    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);
+this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t,o){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"ScrollPanel",extends:s(e).default,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:t.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 e=getComputedStyle(this.$el),o=getComputedStyle(this.$refs.xBar),s=t.DomHandler.getHeight(this.$el)-parseInt(o.height,10);"none"!==e["max-height"]&&0===s&&(this.$refs.content.offsetHeight+parseInt(o.height,10)>parseInt(e["max-height"],10)?this.$el.style.height=e["max-height"]:this.$el.style.height=this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar(){let e=this.$refs.content.scrollWidth,o=this.$refs.content.clientWidth,s=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=o/e;let n=this.$refs.content.scrollHeight,r=this.$refs.content.clientHeight,i=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=r/n,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?t.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(t.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/e*100+"%;bottom:"+s+"px;"),this.scrollYRatio>=1?t.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(t.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:"+i+"px;")}))},onYBarMouseDown(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,t.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,t.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.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(){t.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.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 r=["aria-valuenow"],i=["aria-valuenow"];return function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&s.firstChild?s.insertBefore(n,s.firstChild):s.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    box-sizing: border-box;\n    scrollbar-width: none;\n}\n.p-scrollpanel-content::-webkit-scrollbar {\n    display: none;\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    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    user-select: none;\n}\n"),n.render=function(e,t,s,n,l,a){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:"p-scrollpanel p-component"},e.ptm("root")),[o.createElementVNode("div",o.mergeProps({class:"p-scrollpanel-wrapper"},e.ptm("wrapper")),[o.createElementVNode("div",o.mergeProps({ref:"content",class:"p-scrollpanel-content",onScroll:t[0]||(t[0]=(...e)=>a.onScroll&&a.onScroll(...e)),onMouseenter:t[1]||(t[1]=(...e)=>a.moveBar&&a.moveBar(...e))},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16)],16),o.createElementVNode("div",o.mergeProps({ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-valuenow":l.lastScrollLeft,onMousedown:t[2]||(t[2]=(...e)=>a.onXBarMouseDown&&a.onXBarMouseDown(...e)),onKeydown:t[3]||(t[3]=e=>a.onKeyDown(e)),onKeyup:t[4]||(t[4]=(...e)=>a.onKeyUp&&a.onKeyUp(...e)),onFocus:t[5]||(t[5]=(...e)=>a.onFocus&&a.onFocus(...e)),onBlur:t[6]||(t[6]=(...e)=>a.onBlur&&a.onBlur(...e))},e.ptm("barx")),null,16,r),o.createElementVNode("div",o.mergeProps({ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-valuenow":l.lastScrollTop,onMousedown:t[7]||(t[7]=(...e)=>a.onYBarMouseDown&&a.onYBarMouseDown(...e)),onKeydown:t[8]||(t[8]=e=>a.onKeyDown(e)),onKeyup:t[9]||(t[9]=(...e)=>a.onKeyUp&&a.onKeyUp(...e)),onFocus:t[10]||(t[10]=(...e)=>a.onFocus&&a.onFocus(...e))},e.ptm("bary")),null,16,i)],16)},n}(primevue.basecomponent,primevue.utils,Vue);

package/scrolltop/ScrollTop.d.ts

@@ -7,6 +7,7 @@
  * @module scrolltop
  *
  */
+import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
@@ -25,7 +26,7 @@ export interface ScrollTopProps {
     threshold?: number | undefined;
     /**
      * Icon to display.
-     * @defaultValue pi pi-chevron-up
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
     /**
@@ -38,7 +39,12 @@ export interface ScrollTopProps {
 /**
  * Defines valid slots in ScrollTop component.
  */
-export interface ScrollTopSlots {}
+export interface ScrollTopSlots {
+    /**
+     * Custom scrolltop icon template.
+     */
+    icon(): VNode[];
+}
 
 /**
  * Defines valid emits in ScrollTop component.

package/scrolltop/ScrollTop.vue

@@ -1,14 +1,16 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave">
         <button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button" :aria-label="scrollTopAriaLabel">
-            <span :class="iconClass"></span>
+            <slot name="icon">
+                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="['p-scrolltop-icon', icon]"></component>
+            </slot>
         </button>
     </transition>
 </template>
 
 <script>
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
-
 export default {
     name: 'ScrollTop',
     scrollListener: null,
@@ -24,7 +26,7 @@ export default {
         },
         icon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         behavior: {
             type: String,
@@ -102,12 +104,12 @@ export default {
         containerClass() {
             return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
-        iconClass() {
-            return ['p-scrolltop-icon', this.icon];
-        },
         scrollTopAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.scrollTop : undefined;
         }
+    },
+    components: {
+        ChevronUpIcon
     }
 };
 </script>

package/scrolltop/scrolltop.cjs.js

@@ -1,8 +1,13 @@
 'use strict';
 
+var ChevronUpIcon = require('primevue/icons/chevronup');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
+
 var script = {
     name: 'ScrollTop',
     scrollListener: null,
@@ -18,7 +23,7 @@ var script = {
         },
         icon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         behavior: {
             type: String,
@@ -96,12 +101,12 @@ var script = {
         containerClass() {
             return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
-        iconClass() {
-            return ['p-scrolltop-icon', this.icon];
-        },
         scrollTopAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.scrollTop : undefined;
         }
+    },
+    components: {
+        ChevronUpIcon: ChevronUpIcon__default["default"]
     }
 };
 
@@ -124,13 +129,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             type: "button",
             "aria-label": $options.scrollTopAriaLabel
           }, [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass($options.iconClass)
-            }, null, 2)
+            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), {
+                class: vue.normalizeClass(['p-scrolltop-icon', $props.icon])
+              }, null, 8, ["class"]))
+            ])
           ], 10, _hoisted_1))
         : vue.createCommentVNode("", true)
     ]),
-    _: 1
+    _: 3
   }, 8, ["onEnter", "onAfterLeave"]))
 }