primevue 3.28.0 → 3.29.0

package/organizationchart/organizationchart.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,n,o,t){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(e),a=l(n),s={name:"OrganizationChartNode",emits:["node-click","node-toggle"],props:{node:{type:null,default:null},templates:{type:null,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null}},methods:{onNodeClick(e){o.DomHandler.hasClass(e.target,"p-node-toggler")||o.DomHandler.hasClass(e.target,"p-node-toggler-icon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick(e){this.$emit("node-click",e)},toggleNode(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)},onKeydown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},computed:{nodeContentClass(){return["p-organizationchart-node-content",this.node.styleClass,{"p-organizationchart-selectable-node":this.selectable,"p-highlight":this.selected}]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded(){return void 0===this.collapsedKeys[this.node.key]},selectable(){return this.selectionMode&&!1!==this.node.selectable},selected(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}},components:{ChevronDownIcon:i.default,ChevronUpIcon:a.default}};const d={class:"p-organizationchart-table"},c={key:0},r=["colspan"],p=["colspan"],h=[t.createElementVNode("div",{class:"p-organizationchart-line-down"},null,-1)],g=["colspan"],m=[t.createElementVNode("div",{class:"p-organizationchart-line-down"},null,-1)];s.render=function(e,n,o,l,i,a){const s=t.resolveComponent("OrganizationChartNode",!0);return t.openBlock(),t.createElementBlock("table",d,[t.createElementVNode("tbody",null,[o.node?(t.openBlock(),t.createElementBlock("tr",c,[t.createElementVNode("td",{colspan:a.colspan},[t.createElementVNode("div",{class:t.normalizeClass(a.nodeContentClass),onClick:n[2]||(n[2]=(...e)=>a.onNodeClick&&a.onNodeClick(...e))},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),a.toggleable?(t.openBlock(),t.createElementBlock("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:n[0]||(n[0]=(...e)=>a.toggleNode&&a.toggleNode(...e)),onKeydown:n[1]||(n[1]=(...e)=>a.onKeydown&&a.onKeydown(...e))},[o.templates.togglericon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates.togglericon),{key:0,expanded:a.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.expanded?"ChevronDownIcon":"ChevronUpIcon"),{key:1,class:"p-node-toggler-icon"}))],32)):t.createCommentVNode("",!0)],2)],8,r)])):t.createCommentVNode("",!0),t.createElementVNode("tr",{style:t.normalizeStyle(a.childStyle),class:"p-organizationchart-lines"},[t.createElementVNode("td",{colspan:a.colspan},h,8,p)],4),t.createElementVNode("tr",{style:t.normalizeStyle(a.childStyle),class:"p-organizationchart-lines"},[o.node.children&&1===o.node.children.length?(t.openBlock(),t.createElementBlock("td",{key:0,colspan:a.colspan},m,8,g)):t.createCommentVNode("",!0),o.node.children&&o.node.children.length>1?(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:1},t.renderList(o.node.children,((e,n)=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:e.key},[t.createElementVNode("td",{class:t.normalizeClass(["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===n)}])}," ",2),t.createElementVNode("td",{class:t.normalizeClass(["p-organizationchart-line-right",{"p-organizationchart-line-top":!(n===o.node.children.length-1)}])}," ",2)],64)))),128)):t.createCommentVNode("",!0)],4),t.createElementVNode("tr",{style:t.normalizeStyle(a.childStyle),class:"p-organizationchart-nodes"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.node.children,(e=>(t.openBlock(),t.createElementBlock("td",{key:e.key,colspan:"2"},[t.createVNode(s,{node:e,templates:o.templates,collapsedKeys:o.collapsedKeys,onNodeToggle:a.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:a.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var u={name:"OrganizationChart",emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],props:{value:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null}},data(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys(e){this.d_collapsedKeys=e}},methods:{onNodeClick(e){const n=e.key;if(this.selectionMode){let o=this.selectionKeys?{...this.selectionKeys}:{};o[n]?(delete o[n],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(o={}),o[n]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",o)}},onNodeToggle(e){const n=e.key;this.d_collapsedKeys[n]?(delete this.d_collapsedKeys[n],this.$emit("node-expand",e)):(this.d_collapsedKeys[n]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:s}};const y={class:"p-organizationchart p-component"};return function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 0.75rem;\n}\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\n.p-organizationchart-node-content .p-node-toggler {\n    position: absolute;\n    bottom: -0.75rem;\n    margin-left: -0.75rem;\n    z-index: 2;\n    left: 50%;\n    user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n    text-decoration: none;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.25rem;\n}\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n"),u.render=function(e,n,o,l,i,a){const s=t.resolveComponent("OrganizationChartNode");return t.openBlock(),t.createElementBlock("div",y,[t.createVNode(s,{node:o.value,templates:e.$slots,onNodeToggle:a.onNodeToggle,collapsedKeys:i.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:a.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])},u}(primevue.icons.chevrondown,primevue.icons.chevronup,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,t,o,n,l){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=s(e),a=s(t),d=s(o),c={name:"OrganizationChartNode",extends:i.default,emits:["node-click","node-toggle"],props:{node:{type:null,default:null},templates:{type:null,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null}},methods:{getPTOptions(e){return this.ptm(e,{context:{expanded:this.expanded,selectable:this.selectable,selected:this.selected,toggleable:this.toggleable,active:this.selected}})},getNodeOptions(e,t){return this.ptm(t,{context:{lineTop:e}})},onNodeClick(e){n.DomHandler.hasClass(e.target,"p-node-toggler")||n.DomHandler.hasClass(e.target,"p-node-toggler-icon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick(e){this.$emit("node-click",e)},toggleNode(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)},onKeydown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},computed:{nodeContentClass(){return["p-organizationchart-node-content",this.node.styleClass,{"p-organizationchart-selectable-node":this.selectable,"p-highlight":this.selected}]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded(){return void 0===this.collapsedKeys[this.node.key]},selectable(){return this.selectionMode&&!1!==this.node.selectable},selected(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}},components:{ChevronDownIcon:a.default,ChevronUpIcon:d.default}};const r=["colspan"],p=["colspan"],h=["colspan"];c.render=function(e,t,o,n,s,i){const a=l.resolveComponent("OrganizationChartNode",!0);return l.openBlock(),l.createElementBlock("table",l.mergeProps({class:"p-organizationchart-table"},e.ptm("table")),[l.createElementVNode("tbody",l.normalizeProps(l.guardReactiveProps(e.ptm("body"))),[o.node?(l.openBlock(),l.createElementBlock("tr",l.normalizeProps(l.mergeProps({key:0},e.ptm("row"))),[l.createElementVNode("td",l.mergeProps({colspan:i.colspan},e.ptm("cell")),[l.createElementVNode("div",l.mergeProps({class:i.nodeContentClass,onClick:t[2]||(t[2]=(...e)=>i.onNodeClick&&i.onNodeClick(...e))},i.getPTOptions("node")),[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),i.toggleable?(l.openBlock(),l.createElementBlock("a",l.mergeProps({key:0,tabindex:"0",class:"p-node-toggler",onClick:t[0]||(t[0]=(...e)=>i.toggleNode&&i.toggleNode(...e)),onKeydown:t[1]||(t[1]=(...e)=>i.onKeydown&&i.onKeydown(...e))},i.getPTOptions("nodeToggler")),[o.templates.togglericon?(l.openBlock(),l.createBlock(l.resolveDynamicComponent(o.templates.togglericon),{key:0,expanded:i.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(l.openBlock(),l.createBlock(l.resolveDynamicComponent(i.expanded?"ChevronDownIcon":"ChevronUpIcon"),l.mergeProps({key:1,class:"p-node-toggler-icon"},i.getPTOptions("nodeTogglerIcon")),null,16))],16)):l.createCommentVNode("",!0)],16)],16,r)],16)):l.createCommentVNode("",!0),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[l.createElementVNode("td",{colspan:i.colspan},[l.createElementVNode("div",l.mergeProps({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],8,p)],16),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[o.node.children&&1===o.node.children.length?(l.openBlock(),l.createElementBlock("td",l.mergeProps({key:0,colspan:i.colspan},e.ptm("lineCell")),[l.createElementVNode("div",l.mergeProps({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],16,h)):l.createCommentVNode("",!0),o.node.children&&o.node.children.length>1?(l.openBlock(!0),l.createElementBlock(l.Fragment,{key:1},l.renderList(o.node.children,((e,t)=>(l.openBlock(),l.createElementBlock(l.Fragment,{key:e.key},[l.createElementVNode("td",l.mergeProps({class:["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===t)}]},i.getNodeOptions(!(0===t),"lineLeft"))," ",16),l.createElementVNode("td",l.mergeProps({class:["p-organizationchart-line-right",{"p-organizationchart-line-top":!(t===o.node.children.length-1)}]},i.getNodeOptions(!(t===o.node.children.length-1),"lineRight"))," ",16)],64)))),128)):l.createCommentVNode("",!0)],16),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-nodes"},e.ptm("nodes")),[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(o.node.children,(t=>(l.openBlock(),l.createElementBlock("td",l.mergeProps({key:t.key,colspan:"2"},e.ptm("nodeCell")),[l.createVNode(a,{node:t,templates:o.templates,collapsedKeys:o.collapsedKeys,onNodeToggle:i.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:i.onChildNodeClick,pt:e.pt},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick","pt"])],16)))),128))],16)],16)],16)};var g={name:"OrganizationChart",extends:i.default,emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],props:{value:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null}},data(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys(e){this.d_collapsedKeys=e}},methods:{onNodeClick(e){const t=e.key;if(this.selectionMode){let o=this.selectionKeys?{...this.selectionKeys}:{};o[t]?(delete o[t],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(o={}),o[t]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",o)}},onNodeToggle(e){const t=e.key;this.d_collapsedKeys[t]?(delete this.d_collapsedKeys[t],this.$emit("node-expand",e)):(this.d_collapsedKeys[t]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:c}};return function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 0.75rem;\n}\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\n.p-organizationchart-node-content .p-node-toggler {\n    position: absolute;\n    bottom: -0.75rem;\n    margin-left: -0.75rem;\n    z-index: 2;\n    left: 50%;\n    user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n    text-decoration: none;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.25rem;\n}\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n"),g.render=function(e,t,o,n,s,i){const a=l.resolveComponent("OrganizationChartNode");return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:"p-organizationchart p-component"},e.ptm("root")),[l.createVNode(a,{node:o.value,templates:e.$slots,onNodeToggle:i.onNodeToggle,collapsedKeys:s.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:i.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,pt:e.pt},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys","pt"])],16)},g}(primevue.basecomponent,primevue.icons.chevrondown,primevue.icons.chevronup,primevue.utils,Vue);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.28.0",
+    "version": "3.29.0",
     "homepage": "https://primevue.org/",
     "repository": {
       "type": "git",

package/paginator/CurrentPageReport.vue

@@ -1,9 +1,13 @@
 <template>
-    <span class="p-paginator-current">{{ text }}</span>
+    <span class="p-paginator-current" v-bind="ptm('current')">{{ text }}</span>
 </template>
+
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'CurrentPageReport',
+    extends: BaseComponent,
     props: {
         pageCount: {
             type: Number,

package/paginator/FirstPageLink.vue

@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('firstPageButton')">
+        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('firstPageIcon')" />
     </button>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'FirstPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [

package/paginator/JumpToPageDropdown.vue

@@ -1,12 +1,14 @@
 <template>
-    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled"></JTPDropdown>
+    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled" :pt="ptm('JTPDropdown')"></JTPDropdown>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Dropdown from 'primevue/dropdown';
 
 export default {
     name: 'JumpToPageDropdown',
+    extends: BaseComponent,
     emits: ['page-change'],
     props: {
         page: Number,

package/paginator/JumpToPageInput.vue

@@ -1,12 +1,14 @@
 <template>
-    <JTPInput ref="jtpInput" :modelValue="d_page" class="p-paginator-page-input" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange"></JTPInput>
+    <JTPInput ref="jtpInput" :modelValue="d_page" class="p-paginator-page-input" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :pt="ptm('JTPInput')"></JTPInput>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import InputNumber from 'primevue/inputnumber';
 
 export default {
     name: 'JumpToPageInput',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['page-change'],
     props: {

package/paginator/LastPageLink.vue

@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('lastPageButton')">
+        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('lastPageIcon')" />
     </button>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleDoubleRightIcon from 'primevue/icons/angledoubleright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'LastPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [

package/paginator/NextPageLink.vue

@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleRightIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('nextPageButton')">
+        <component :is="template || 'AngleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('nextPageIcon')" />
     </button>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'NextPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [

package/paginator/PageLinks.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="p-paginator-pages">
+    <span class="p-paginator-pages" v-bind="ptm('pages')">
         <button
             v-for="pageLink of value"
             :key="pageLink"
@@ -9,16 +9,20 @@
             :aria-label="ariaPageLabel(pageLink)"
             :aria-current="pageLink - 1 === page ? 'page' : undefined"
             @click="onPageLinkClick($event, pageLink)"
+            v-bind="getPTOptions(pageLink - 1, 'pageButton')"
         >
             {{ pageLink }}
         </button>
     </span>
 </template>
+
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'PageLinks',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['click'],
     props: {
@@ -26,6 +30,13 @@ export default {
         page: Number
     },
     methods: {
+        getPTOptions(pageLink, key) {
+            return this.ptm(key, {
+                context: {
+                    active: pageLink === this.page
+                }
+            });
+        },
         onPageLinkClick(event, pageLink) {
             this.$emit('click', {
                 originalEvent: event,
@@ -36,7 +47,6 @@ export default {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
         }
     },
-    computed: {},
     directives: {
         ripple: Ripple
     }

package/paginator/Paginator.d.ts

@@ -8,8 +8,136 @@
  *
  */
 import { VNode } from 'vue';
+import { DropdownPassThroughOptionType } from '../dropdown';
+import { InputNumberPassThroughOptionType } from '../inputnumber';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type PaginatorPassThroughOptionType = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions) => PaginatorPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PaginatorPassThroughMethodOptions {
+    props: PaginatorProps;
+    state: PaginatorState;
+    context: PaginatorContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PaginatorProps.pt}
+ */
+export interface PaginatorPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the left's DOM element.
+     */
+    left?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the first page button's DOM element.
+     */
+    firstPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the first page icon's DOM element.
+     */
+    firstPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prev page button's DOM element.
+     */
+    prevPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prev page icon's DOM element.
+     */
+    prevPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next page button's DOM element.
+     */
+    nextPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next page icon's DOM element.
+     */
+    nextPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the last page button's DOM element.
+     */
+    lastPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the last page icon's DOM element.
+     */
+    lastPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the pages's DOM element.
+     */
+    pages?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the page button's DOM element.
+     */
+    pageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the current's DOM element.
+     */
+    current?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    RPPDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    JTPDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link InputNumberPassThroughOptionType}
+     */
+    JTPInput?: InputNumberPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end's DOM element.
+     */
+    end?: PaginatorPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PaginatorPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Paginator component.
+ */
+export interface PaginatorState {
+    /**
+     * Current index of first record as a number.
+     */
+    d_first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+}
+
+/**
+ * Defines current options in Paginator component.
+ */
+export interface PaginatorContext {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current disabled state of the button as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Paginator page state metadata.
  */
@@ -92,6 +220,11 @@ export interface PaginatorProps {
      * @defaultValue true
      */
     alwaysShow?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PaginatorPassThroughOptions}
+     */
+    pt?: PaginatorPassThroughOptions;
 }
 
 /**

package/paginator/Paginator.vue

@@ -1,15 +1,15 @@
 <template>
-    <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1">
-        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" class="p-paginator p-component" :class="getPaginatorClasses(key)">
-            <div v-if="$slots.start" class="p-paginator-left-content">
+    <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptm('root')">
+        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" class="p-paginator p-component" :class="getPaginatorClasses(key)" v-bind="ptm('paginator')">
+            <div v-if="$slots.start" class="p-paginator-left-content" v-bind="ptm('left')">
                 <slot name="start" :state="currentState"></slot>
             </div>
             <template v-for="item in value" :key="item">
-                <FirstPageLink v-if="item === 'FirstPageLink'" :aria-label="getAriaLabel('firstPageLabel')" :template="$slots.firstpagelinkicon" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
-                <PrevPageLink v-else-if="item === 'PrevPageLink'" :aria-label="getAriaLabel('prevPageLabel')" :template="$slots.prevpagelinkicon" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
-                <NextPageLink v-else-if="item === 'NextPageLink'" :aria-label="getAriaLabel('nextPageLabel')" :template="$slots.nextpagelinkicon" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
-                <LastPageLink v-else-if="item === 'LastPageLink'" :aria-label="getAriaLabel('lastPageLabel')" :template="$slots.lastpagelinkicon" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
-                <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" />
+                <FirstPageLink v-if="item === 'FirstPageLink'" :aria-label="getAriaLabel('firstPageLabel')" :template="$slots.firstpagelinkicon" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" :pt="pt" />
+                <PrevPageLink v-else-if="item === 'PrevPageLink'" :aria-label="getAriaLabel('prevPageLabel')" :template="$slots.prevpagelinkicon" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" :pt="pt" />
+                <NextPageLink v-else-if="item === 'NextPageLink'" :aria-label="getAriaLabel('nextPageLabel')" :template="$slots.nextpagelinkicon" @click="changePageToNext($event)" :disabled="isLastPage || empty" :pt="pt" />
+                <LastPageLink v-else-if="item === 'LastPageLink'" :aria-label="getAriaLabel('lastPageLabel')" :template="$slots.lastpagelinkicon" @click="changePageToLast($event)" :disabled="isLastPage || empty" :pt="pt" />
+                <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :pt="pt" />
                 <CurrentPageReport
                     v-else-if="item === 'CurrentPageReport'"
                     aria-live="polite"
@@ -20,12 +20,21 @@
                     :first="d_first"
                     :rows="d_rows"
                     :totalRecords="totalRecords"
+                    :pt="pt"
                 />
-                <RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :aria-label="getAriaLabel('rowsPerPageLabel')" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty" />
-                <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :aria-label="getAriaLabel('jumpToPageDropdownLabel')" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" />
-                <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
+                <RowsPerPageDropdown
+                    v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
+                    :aria-label="getAriaLabel('rowsPerPageLabel')"
+                    :rows="d_rows"
+                    :options="rowsPerPageOptions"
+                    @rows-change="onRowChange($event)"
+                    :disabled="empty"
+                    :pt="pt"
+                />
+                <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :aria-label="getAriaLabel('jumpToPageDropdownLabel')" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
+                <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
             </template>
-            <div v-if="$slots.end" class="p-paginator-right-content">
+            <div v-if="$slots.end" class="p-paginator-right-content" v-bind="ptm('end')">
                 <slot name="end" :state="currentState"></slot>
             </div>
         </div>
@@ -33,6 +42,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { UniqueComponentId } from 'primevue/utils';
 import CurrrentPageReport from './CurrentPageReport.vue';
 import FirstPageLink from './FirstPageLink.vue';
@@ -46,6 +56,7 @@ import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
 
 export default {
     name: 'Paginator',
+    extends: BaseComponent,
     emits: ['update:first', 'update:rows', 'page'],
     props: {
         totalRecords: {

package/paginator/PrevPageLink.vue

@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleLeftIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('prevPageButton')">
+        <component :is="template || 'AngleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('prevPageIcon')" />
     </button>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleLeftIcon from 'primevue/icons/angleleft';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'PrevPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [

package/paginator/RowsPerPageDropdown.vue

@@ -1,12 +1,14 @@
 <template>
-    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled"></RPPDropdown>
+    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled" :pt="ptm('RPPDropdown')"></RPPDropdown>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Dropdown from 'primevue/dropdown';
 
 export default {
     name: 'RowsPerPageDropdown',
+    extends: BaseComponent,
     emits: ['rows-change'],
     props: {
         options: Array,