primevue 3.26.1 → 3.28.0

package/scrolltop/scrolltop.cjs.js

@@ -1,10 +1,18 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
+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 BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
+
 var script = {
     name: 'ScrollTop',
+    extends: BaseComponent__default["default"],
     scrollListener: null,
     container: null,
     props: {
@@ -18,7 +26,7 @@ var script = {
         },
         icon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         behavior: {
             type: String,
@@ -96,12 +104,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"]
     }
 };
 
@@ -116,21 +124,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: vue.withCtx(() => [
       ($data.visible)
-        ? (vue.openBlock(), vue.createElementBlock("button", {
+        ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             key: 0,
             ref: $options.containerRef,
-            class: vue.normalizeClass($options.containerClass),
+            class: $options.containerClass,
             onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
             type: "button",
             "aria-label": $options.scrollTopAriaLabel
-          }, [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass($options.iconClass)
-            }, null, 2)
-          ], 10, _hoisted_1))
+          }, _ctx.ptm('root')), [
+            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({
+                class: ['p-scrolltop-icon', $props.icon]
+              }, _ctx.ptm('icon')), null, 16, ["class"]))
+            ])
+          ], 16, _hoisted_1))
         : vue.createCommentVNode("", true)
     ]),
-    _: 1
+    _: 3
   }, 8, ["onEnter", "onAfterLeave"]))
 }
 

package/scrolltop/scrolltop.cjs.min.js

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

package/scrolltop/scrolltop.esm.js

@@ -1,8 +1,11 @@
+import BaseComponent from 'primevue/basecomponent';
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
-import { openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeClass, createElementVNode, createCommentVNode } from 'vue';
+import { openBlock, createBlock, Transition, withCtx, createElementBlock, mergeProps, renderSlot, resolveDynamicComponent, createCommentVNode } from 'vue';
 
 var script = {
     name: 'ScrollTop',
+    extends: BaseComponent,
     scrollListener: null,
     container: null,
     props: {
@@ -16,7 +19,7 @@ var script = {
         },
         icon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         behavior: {
             type: String,
@@ -94,12 +97,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
     }
 };
 
@@ -114,21 +117,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [
       ($data.visible)
-        ? (openBlock(), createElementBlock("button", {
+        ? (openBlock(), createElementBlock("button", mergeProps({
             key: 0,
             ref: $options.containerRef,
-            class: normalizeClass($options.containerClass),
+            class: $options.containerClass,
             onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
             type: "button",
             "aria-label": $options.scrollTopAriaLabel
-          }, [
-            createElementVNode("span", {
-              class: normalizeClass($options.iconClass)
-            }, null, 2)
-          ], 10, _hoisted_1))
+          }, _ctx.ptm('root')), [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), mergeProps({
+                class: ['p-scrolltop-icon', $props.icon]
+              }, _ctx.ptm('icon')), null, 16, ["class"]))
+            ])
+          ], 16, _hoisted_1))
         : createCommentVNode("", true)
     ]),
-    _: 1
+    _: 3
   }, 8, ["onEnter", "onAfterLeave"]))
 }
 

package/scrolltop/scrolltop.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import{openBlock as n,createBlock as i,Transition as r,withCtx as l,createElementBlock as o,normalizeClass as s,createElementVNode as c,createCommentVNode as a}from"vue";var p={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(t.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}}};const h=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),p.render=function(e,t,p,d,u,m){return n(),i(r,{name:"p-scrolltop",appear:"",onEnter:m.onEnter,onAfterLeave:m.onAfterLeave},{default:l((()=>[u.visible?(n(),o("button",{key:0,ref:m.containerRef,class:s(m.containerClass),onClick:t[0]||(t[0]=(...e)=>m.onClick&&m.onClick(...e)),type:"button","aria-label":m.scrollTopAriaLabel},[c("span",{class:s(m.iconClass)},null,2)],10,h)):a("",!0)])),_:1},8,["onEnter","onAfterLeave"])};export{p as default};
+import e from"primevue/basecomponent";import t from"primevue/icons/chevronup";import{ZIndexUtils as n,DomHandler as i}from"primevue/utils";import{openBlock as o,createBlock as r,Transition as l,withCtx as s,createElementBlock as c,mergeProps as a,renderSlot as p,resolveDynamicComponent as h,createCommentVNode as d}from"vue";var m={name:"ScrollTop",extends:e,scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:void 0},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(n.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(i.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(e){n.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave(e){n.clear(e)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}},components:{ChevronUpIcon:t}};const u=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),m.render=function(e,t,n,i,m,v){return o(),r(l,{name:"p-scrolltop",appear:"",onEnter:v.onEnter,onAfterLeave:v.onAfterLeave},{default:s((()=>[m.visible?(o(),c("button",a({key:0,ref:v.containerRef,class:v.containerClass,onClick:t[0]||(t[0]=(...e)=>v.onClick&&v.onClick(...e)),type:"button","aria-label":v.scrollTopAriaLabel},e.ptm("root")),[p(e.$slots,"icon",{},(()=>[(o(),r(h(n.icon?"span":"ChevronUpIcon"),a({class:["p-scrolltop-icon",n.icon]},e.ptm("icon")),null,16,["class"]))]))],16,u)):d("",!0)])),_:3},8,["onEnter","onAfterLeave"])};export{m as default};

package/scrolltop/scrolltop.js

@@ -1,9 +1,15 @@
 this.primevue = this.primevue || {};
-this.primevue.scrolltop = (function (utils, vue) {
+this.primevue.scrolltop = (function (BaseComponent, ChevronUpIcon, 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 ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
+
     var script = {
         name: 'ScrollTop',
+        extends: BaseComponent__default["default"],
         scrollListener: null,
         container: null,
         props: {
@@ -17,7 +23,7 @@ this.primevue.scrolltop = (function (utils, vue) {
             },
             icon: {
                 type: String,
-                default: 'pi pi-chevron-up'
+                default: undefined
             },
             behavior: {
                 type: String,
@@ -95,12 +101,12 @@ this.primevue.scrolltop = (function (utils, vue) {
             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"]
         }
     };
 
@@ -115,21 +121,23 @@ this.primevue.scrolltop = (function (utils, vue) {
       }, {
         default: vue.withCtx(() => [
           ($data.visible)
-            ? (vue.openBlock(), vue.createElementBlock("button", {
+            ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                 key: 0,
                 ref: $options.containerRef,
-                class: vue.normalizeClass($options.containerClass),
+                class: $options.containerClass,
                 onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
                 type: "button",
                 "aria-label": $options.scrollTopAriaLabel
-              }, [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass($options.iconClass)
-                }, null, 2)
-              ], 10, _hoisted_1))
+              }, _ctx.ptm('root')), [
+                vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({
+                    class: ['p-scrolltop-icon', $props.icon]
+                  }, _ctx.ptm('icon')), null, 16, ["class"]))
+                ])
+              ], 16, _hoisted_1))
             : vue.createCommentVNode("", true)
         ]),
-        _: 1
+        _: 3
       }, 8, ["onEnter", "onAfterLeave"]))
     }
 
@@ -167,4 +175,4 @@ this.primevue.scrolltop = (function (utils, vue) {
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.basecomponent, primevue.icons.chevronup, primevue.utils, Vue);

package/scrolltop/scrolltop.min.js

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

package/sidebar/Sidebar.d.ts

@@ -10,6 +10,69 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SidebarPassThroughOptionType = SidebarPassThroughAttributes | ((options: SidebarPassThroughMethodOptions) => SidebarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SidebarPassThroughMethodOptions {
+    props: SidebarProps;
+    state: SidebarState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SidebarProps.pt}
+ */
+export interface SidebarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: SidebarPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SidebarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Sidebar component.
+ */
+export interface SidebarState {
+    /**
+     * Current container visible state as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+}
+
 /**
  * Defines valid properties in Sidebar component.
  */
@@ -46,7 +109,7 @@ export interface SidebarProps {
     showCloseIcon?: boolean | undefined;
     /**
      * Icon to display in the sidebar close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
@@ -59,6 +122,11 @@ export interface SidebarProps {
      * @defaultValue false
      */
     blockScroll?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SidebarPassThroughOptions}
+     */
+    pt?: SidebarPassThroughOptions;
 }
 
 /**
@@ -73,6 +141,10 @@ export interface SidebarSlots {
      * Custom header template.
      */
     header(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**

package/sidebar/Sidebar.vue

@@ -1,17 +1,19 @@
 <template>
     <Portal>
-        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
-                    <div :ref="headerContainerRef" class="p-sidebar-header">
-                        <div v-if="$slots.header" class="p-sidebar-header-content">
+                <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
+                    <div :ref="headerContainerRef" class="p-sidebar-header" v-bind="ptm('header')">
+                        <div v-if="$slots.header" class="p-sidebar-header-content" v-bind="ptm('headerContent')">
                             <slot name="header"></slot>
                         </div>
-                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
-                            <span :class="['p-sidebar-close-icon', closeIcon]" />
+                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')">
+                            <slot name="closeicon">
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
+                            </slot>
                         </button>
                     </div>
-                    <div :ref="contentRef" class="p-sidebar-content">
+                    <div :ref="contentRef" class="p-sidebar-content" v-bind="ptm('content')">
                         <slot></slot>
                     </div>
                 </div>
@@ -21,13 +23,16 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
+import TimesIcon from 'primevue/icons/times';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Sidebar',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide'],
     props: {
@@ -57,7 +62,7 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         modal: {
             type: Boolean,
@@ -246,7 +251,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon
     }
 };
 </script>

package/sidebar/sidebar.cjs.js

@@ -1,6 +1,8 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var FocusTrap = require('primevue/focustrap');
+var TimesIcon = require('primevue/icons/times');
 var Portal = require('primevue/portal');
 var Ripple = require('primevue/ripple');
 var utils = require('primevue/utils');
@@ -8,12 +10,15 @@ 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 FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Sidebar',
+    extends: BaseComponent__default["default"],
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide'],
     props: {
@@ -43,7 +48,7 @@ var script = {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         modal: {
             type: Boolean,
@@ -232,16 +237,13 @@ var script = {
         ripple: Ripple__default["default"]
     },
     components: {
-        Portal: Portal__default["default"]
+        Portal: Portal__default["default"],
+        TimesIcon: TimesIcon__default["default"]
     }
 };
 
 const _hoisted_1 = ["aria-modal"];
-const _hoisted_2 = {
-  key: 0,
-  class: "p-sidebar-header-content"
-};
-const _hoisted_3 = ["aria-label"];
+const _hoisted_2 = ["aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = vue.resolveComponent("Portal");
@@ -251,12 +253,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
     default: vue.withCtx(() => [
       ($data.containerVisible)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
+        ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
             ref: $options.maskRef,
-            class: vue.normalizeClass($options.maskClass),
+            class: $options.maskClass,
             onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-          }, [
+          }, _ctx.ptm('mask')), [
             vue.createVNode(vue.Transition, {
               name: "p-sidebar",
               onEnter: $options.onEnter,
@@ -275,18 +277,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       role: "complementary",
                       "aria-modal": $props.modal,
                       onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-                    }, _ctx.$attrs), [
-                      vue.createElementVNode("div", {
+                    }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
+                      vue.createElementVNode("div", vue.mergeProps({
                         ref: $options.headerContainerRef,
                         class: "p-sidebar-header"
-                      }, [
+                      }, _ctx.ptm('header')), [
                         (_ctx.$slots.header)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 0,
+                              class: "p-sidebar-header-content"
+                            }, _ctx.ptm('headerContent')), [
                               vue.renderSlot(_ctx.$slots, "header")
-                            ]))
+                            ], 16))
                           : vue.createCommentVNode("", true),
                         ($props.showCloseIcon)
-                          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                               key: 1,
                               ref: $options.closeButtonRef,
                               autofocus: "",
@@ -294,21 +299,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               class: "p-sidebar-close p-sidebar-icon p-link",
                               "aria-label": $options.closeAriaLabel,
                               onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args)))
-                            }, [
-                              vue.createElementVNode("span", {
-                                class: vue.normalizeClass(['p-sidebar-close-icon', $props.closeIcon])
-                              }, null, 2)
-                            ], 8, _hoisted_3)), [
+                            }, _ctx.ptm('closeButton')), [
+                              vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
+                                  class: ['p-sidebar-close-icon ', $props.closeIcon]
+                                }, _ctx.ptm('closeIcon')), null, 16, ["class"]))
+                              ])
+                            ], 16, _hoisted_2)), [
                               [_directive_ripple]
                             ])
                           : vue.createCommentVNode("", true)
-                      ], 512),
-                      vue.createElementVNode("div", {
+                      ], 16),
+                      vue.createElementVNode("div", vue.mergeProps({
                         ref: $options.contentRef,
                         class: "p-sidebar-content"
-                      }, [
+                      }, _ctx.ptm('content')), [
                         vue.renderSlot(_ctx.$slots, "default")
-                      ], 512)
+                      ], 16)
                     ], 16, _hoisted_1)), [
                       [_directive_focustrap]
                     ])
@@ -316,7 +323,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 3
             }, 8, ["onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
-          ], 34))
+          ], 16))
         : vue.createCommentVNode("", true)
     ]),
     _: 3