primevue 3.27.0 → 3.28.0

package/resources/themes/mdc-light-indigo/theme.css

@@ -5469,7 +5469,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -6257,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(0, 0, 0, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(0, 0, 0, 0.04);
 }

package/resources/themes/mira/theme.css

@@ -5473,7 +5473,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/nano/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/nova/theme.css

@@ -5408,7 +5408,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/nova-accent/theme.css

@@ -5396,7 +5396,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/nova-alt/theme.css

@@ -5408,7 +5408,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/nova-vue/theme.css

@@ -5408,7 +5408,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/rhea/theme.css

@@ -5396,7 +5396,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/saga-blue/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/saga-green/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/saga-orange/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/saga-purple/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/soho-dark/theme.css

@@ -5420,7 +5420,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/soho-light/theme.css

@@ -5420,7 +5420,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/tailwind-light/theme.css

@@ -5480,7 +5480,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/vela-blue/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/vela-green/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/vela-orange/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/vela-purple/theme.css

@@ -5445,7 +5445,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/viva-dark/theme.css

@@ -5477,7 +5477,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/resources/themes/viva-light/theme.css

@@ -5477,7 +5477,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
-.p-message .p-icon {
+.p-message .p-icon:not(.p-message-close-icon) {
   width: 1.5rem;
   height: 1.5rem;
 }

package/scrolltop/ScrollTop.d.ts

@@ -10,6 +10,49 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ScrollTopPassThroughOptionType = ScrollTopPassThroughAttributes | ((options: ScrollTopPassThroughMethodOptions) => ScrollTopPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollTopPassThroughMethodOptions {
+    props: ScrollTopProps;
+    state: ScrollTopState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollTopProps.pt}
+ */
+export interface ScrollTopPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollTopPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ScrollTopPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ScrollTopPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ScrollTop component.
+ */
+export interface ScrollTopState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
 /**
  * Defines valid properties in ScrollTop component.
  */
@@ -34,6 +77,11 @@ export interface ScrollTopProps {
      * @defaultValue smooth
      */
     behavior?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollTopPassThroughOptions}
+     */
+    pt?: ScrollTopPassThroughOptions;
 }
 
 /**

package/scrolltop/ScrollTop.vue

@@ -1,18 +1,21 @@
 <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">
+        <button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptm('root')">
             <slot name="icon">
-                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="['p-scrolltop-icon', icon]"></component>
+                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="['p-scrolltop-icon', icon]" v-bind="ptm('icon')" />
             </slot>
         </button>
     </transition>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
+
 export default {
     name: 'ScrollTop',
+    extends: BaseComponent,
     scrollListener: null,
     container: null,
     props: {

package/scrolltop/scrolltop.cjs.js

@@ -1,15 +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: {
@@ -121,20 +124,20 @@ 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
-          }, [
+          }, _ctx.ptm('root')), [
             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"]))
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({
+                class: ['p-scrolltop-icon', $props.icon]
+              }, _ctx.ptm('icon')), null, 16, ["class"]))
             ])
-          ], 10, _hoisted_1))
+          ], 16, _hoisted_1))
         : vue.createCommentVNode("", true)
     ]),
     _: 3

package/scrolltop/scrolltop.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/icons/chevronup"),t=require("primevue/utils"),n=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"ScrollTop",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&&(t.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(t.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){t.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave(e){t.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:i(e).default}};const l=["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"),o.render=function(e,t,i,o,r,s){return n.openBlock(),n.createBlock(n.Transition,{name:"p-scrolltop",appear:"",onEnter:s.onEnter,onAfterLeave:s.onAfterLeave},{default:n.withCtx((()=>[r.visible?(n.openBlock(),n.createElementBlock("button",{key:0,ref:s.containerRef,class:n.normalizeClass(s.containerClass),onClick:t[0]||(t[0]=(...e)=>s.onClick&&s.onClick(...e)),type:"button","aria-label":s.scrollTopAriaLabel},[n.renderSlot(e.$slots,"icon",{},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.icon?"span":"ChevronUpIcon"),{class:n.normalizeClass(["p-scrolltop-icon",i.icon])},null,8,["class"]))]))],10,l)):n.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterLeave"])},module.exports=o;
+"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,9 +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, renderSlot, resolveDynamicComponent, 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: {
@@ -115,20 +117,20 @@ 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
-          }, [
+          }, _ctx.ptm('root')), [
             renderSlot(_ctx.$slots, "icon", {}, () => [
-              (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), {
-                class: normalizeClass(['p-scrolltop-icon', $props.icon])
-              }, null, 8, ["class"]))
+              (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), mergeProps({
+                class: ['p-scrolltop-icon', $props.icon]
+              }, _ctx.ptm('icon')), null, 16, ["class"]))
             ])
-          ], 10, _hoisted_1))
+          ], 16, _hoisted_1))
         : createCommentVNode("", true)
     ]),
     _: 3

package/scrolltop/scrolltop.esm.min.js

@@ -1 +1 @@
-import e from"primevue/icons/chevronup";import{ZIndexUtils as t,DomHandler as n}from"primevue/utils";import{openBlock as i,createBlock as o,Transition as r,withCtx as l,createElementBlock as s,normalizeClass as c,renderSlot as a,resolveDynamicComponent as p,createCommentVNode as h}from"vue";var d={name:"ScrollTop",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&&(t.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.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){t.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave(e){t.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:e}};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"),d.render=function(e,t,n,d,m,v){return i(),o(r,{name:"p-scrolltop",appear:"",onEnter:v.onEnter,onAfterLeave:v.onAfterLeave},{default:l((()=>[m.visible?(i(),s("button",{key:0,ref:v.containerRef,class:c(v.containerClass),onClick:t[0]||(t[0]=(...e)=>v.onClick&&v.onClick(...e)),type:"button","aria-label":v.scrollTopAriaLabel},[a(e.$slots,"icon",{},(()=>[(i(),o(p(n.icon?"span":"ChevronUpIcon"),{class:c(["p-scrolltop-icon",n.icon])},null,8,["class"]))]))],10,u)):h("",!0)])),_:3},8,["onEnter","onAfterLeave"])};export{d 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,13 +1,15 @@
 this.primevue = this.primevue || {};
-this.primevue.scrolltop = (function (ChevronUpIcon, 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: {
@@ -119,20 +121,20 @@ this.primevue.scrolltop = (function (ChevronUpIcon, 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
-              }, [
+              }, _ctx.ptm('root')), [
                 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"]))
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({
+                    class: ['p-scrolltop-icon', $props.icon]
+                  }, _ctx.ptm('icon')), null, 16, ["class"]))
                 ])
-              ], 10, _hoisted_1))
+              ], 16, _hoisted_1))
             : vue.createCommentVNode("", true)
         ]),
         _: 3
@@ -173,4 +175,4 @@ this.primevue.scrolltop = (function (ChevronUpIcon, utils, vue) {
 
     return script;
 
-})(primevue.icons.chevronup, 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,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"ScrollTop",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&&(t.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(t.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){t.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave(e){t.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:i(e).default}};const l=["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"),o.render=function(e,t,i,o,r,s){return n.openBlock(),n.createBlock(n.Transition,{name:"p-scrolltop",appear:"",onEnter:s.onEnter,onAfterLeave:s.onAfterLeave},{default:n.withCtx((()=>[r.visible?(n.openBlock(),n.createElementBlock("button",{key:0,ref:s.containerRef,class:n.normalizeClass(s.containerClass),onClick:t[0]||(t[0]=(...e)=>s.onClick&&s.onClick(...e)),type:"button","aria-label":s.scrollTopAriaLabel},[n.renderSlot(e.$slots,"icon",{},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.icon?"span":"ChevronUpIcon"),{class:n.normalizeClass(["p-scrolltop-icon",i.icon])},null,8,["class"]))]))],10,l)):n.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterLeave"])},o}(primevue.icons.chevronup,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.
  */
@@ -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;
 }
 
 /**

package/sidebar/Sidebar.vue

@@ -1,19 +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">
+                        <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]"></component>
+                                <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>
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import Portal from 'primevue/portal';
@@ -31,6 +32,7 @@ import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Sidebar',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide'],
     props: {