primevue 3.28.0 → 3.29.0

package/radiobutton/RadioButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)">
-        <div class="p-hidden-accessible">
+    <div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="input"
                 :id="inputId"
@@ -15,20 +15,22 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus"
                 @blur="onBlur"
-                v-bind="inputProps"
+                v-bind="ptm('hiddenInput')"
             />
         </div>
-        <div ref="box" :class="['p-radiobutton-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
-            <div class="p-radiobutton-icon"></div>
+        <div ref="box" :class="['p-radiobutton-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="{ ...inputProps, ...ptm('input') }">
+            <div class="p-radiobutton-icon" v-bind="ptm('icon')"></div>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'RadioButton',
+    extends: BaseComponent,
     emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
         value: null,

package/radiobutton/radiobutton.cjs.js

@@ -1,10 +1,16 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
 var script = {
     name: 'RadioButton',
+    extends: BaseComponent__default["default"],
     emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
         value: null,
@@ -85,19 +91,14 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["id", "name", "checked", "disabled", "value", "aria-labelledby", "aria-label"];
-const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-const _hoisted_4 = [
-  _hoisted_3
-];
+const _hoisted_1 = ["id", "name", "checked", "disabled", "value", "aria-labelledby", "aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.containerClass),
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: $options.containerClass,
     onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
-  }, [
-    vue.createElementVNode("div", _hoisted_1, [
+  }, _ctx.ptm('root')), [
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
       vue.createElementVNode("input", vue.mergeProps({
         ref: "input",
         id: $props.inputId,
@@ -112,13 +113,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": _ctx.ariaLabel,
         onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
         onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args)))
-      }, $props.inputProps), null, 16, _hoisted_2)
-    ]),
-    vue.createElementVNode("div", {
+      }, _ctx.ptm('hiddenInput')), null, 16, _hoisted_1)
+    ], 16),
+    vue.createElementVNode("div", vue.mergeProps({
       ref: "box",
-      class: vue.normalizeClass(['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
-    }, _hoisted_4, 2)
-  ], 2))
+      class: ['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]
+    }, { ...$props.inputProps, ..._ctx.ptm('input') }), [
+      vue.createElementVNode("div", vue.mergeProps({ class: "p-radiobutton-icon" }, _ctx.ptm('icon')), null, 16)
+    ], 16)
+  ], 16))
 }
 
 script.render = render;

package/radiobutton/radiobutton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),l=require("vue"),t={name:"RadioButton",emits:["click","update:modelValue","change","focus","blur"],props:{value:null,modelValue:null,name:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){this.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return null!=this.modelValue&&e.ObjectUtils.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.disabled,"p-radiobutton-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","name","checked","disabled","value","aria-labelledby","aria-label"],u=[l.createElementVNode("div",{class:"p-radiobutton-icon"},null,-1)];t.render=function(e,t,s,d,n,o){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(o.containerClass),onClick:t[2]||(t[2]=e=>o.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:s.inputId,type:"radio",class:s.inputClass,style:s.inputStyle,name:s.name,checked:o.checked,disabled:s.disabled,value:s.value,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>o.onBlur&&o.onBlur(...e))},s.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-radiobutton-box",{"p-highlight":o.checked,"p-disabled":s.disabled,"p-focus":n.focused}])},u,2)],2)},module.exports=t;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/utils"),l=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"RadioButton",extends:a(e).default,emits:["click","update:modelValue","change","focus","blur"],props:{value:null,modelValue:null,name:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){this.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return null!=this.modelValue&&t.ObjectUtils.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.disabled,"p-radiobutton-focused":this.focused}]}}};const u=["id","name","checked","disabled","value","aria-labelledby","aria-label"];i.render=function(e,t,a,i,n,d){return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:d.containerClass,onClick:t[2]||(t[2]=e=>d.onClick(e))},e.ptm("root")),[l.createElementVNode("div",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[l.createElementVNode("input",l.mergeProps({ref:"input",id:a.inputId,type:"radio",class:a.inputClass,style:a.inputStyle,name:a.name,checked:d.checked,disabled:a.disabled,value:a.value,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=(...e)=>d.onFocus&&d.onFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>d.onBlur&&d.onBlur(...e))},e.ptm("hiddenInput")),null,16,u)],16),l.createElementVNode("div",l.mergeProps({ref:"box",class:["p-radiobutton-box",{"p-highlight":d.checked,"p-disabled":a.disabled,"p-focus":n.focused}]},{...a.inputProps,...e.ptm("input")}),[l.createElementVNode("div",l.mergeProps({class:"p-radiobutton-icon"},e.ptm("icon")),null,16)],16)],16)},module.exports=i;

package/radiobutton/radiobutton.esm.js

@@ -1,8 +1,10 @@
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps } from 'vue';
+import { openBlock, createElementBlock, mergeProps, createElementVNode } from 'vue';
 
 var script = {
     name: 'RadioButton',
+    extends: BaseComponent,
     emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
         value: null,
@@ -83,19 +85,14 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["id", "name", "checked", "disabled", "value", "aria-labelledby", "aria-label"];
-const _hoisted_3 = /*#__PURE__*/createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-const _hoisted_4 = [
-  _hoisted_3
-];
+const _hoisted_1 = ["id", "name", "checked", "disabled", "value", "aria-labelledby", "aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: $options.containerClass,
     onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
-  }, [
-    createElementVNode("div", _hoisted_1, [
+  }, _ctx.ptm('root')), [
+    createElementVNode("div", mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
       createElementVNode("input", mergeProps({
         ref: "input",
         id: $props.inputId,
@@ -110,13 +107,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": _ctx.ariaLabel,
         onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
         onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args)))
-      }, $props.inputProps), null, 16, _hoisted_2)
-    ]),
-    createElementVNode("div", {
+      }, _ctx.ptm('hiddenInput')), null, 16, _hoisted_1)
+    ], 16),
+    createElementVNode("div", mergeProps({
       ref: "box",
-      class: normalizeClass(['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
-    }, _hoisted_4, 2)
-  ], 2))
+      class: ['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]
+    }, { ...$props.inputProps, ..._ctx.ptm('input') }), [
+      createElementVNode("div", mergeProps({ class: "p-radiobutton-icon" }, _ctx.ptm('icon')), null, 16)
+    ], 16)
+  ], 16))
 }
 
 script.render = render;

package/radiobutton/radiobutton.esm.min.js

@@ -1 +1 @@
-import{ObjectUtils as e}from"primevue/utils";import{openBlock as l,createElementBlock as t,normalizeClass as a,createElementVNode as i,mergeProps as u}from"vue";var d={name:"RadioButton",emits:["click","update:modelValue","change","focus","blur"],props:{value:null,modelValue:null,name:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){this.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return null!=this.modelValue&&e.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.disabled,"p-radiobutton-focused":this.focused}]}}};const s={class:"p-hidden-accessible"},n=["id","name","checked","disabled","value","aria-labelledby","aria-label"],o=[i("div",{class:"p-radiobutton-icon"},null,-1)];d.render=function(e,d,c,r,p,b){return l(),t("div",{class:a(b.containerClass),onClick:d[2]||(d[2]=e=>b.onClick(e))},[i("div",s,[i("input",u({ref:"input",id:c.inputId,type:"radio",class:c.inputClass,style:c.inputStyle,name:c.name,checked:b.checked,disabled:c.disabled,value:c.value,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:d[0]||(d[0]=(...e)=>b.onFocus&&b.onFocus(...e)),onBlur:d[1]||(d[1]=(...e)=>b.onBlur&&b.onBlur(...e))},c.inputProps),null,16,n)]),i("div",{ref:"box",class:a(["p-radiobutton-box",{"p-highlight":b.checked,"p-disabled":c.disabled,"p-focus":p.focused}])},o,2)],2)};export{d as default};
+import e from"primevue/basecomponent";import{ObjectUtils as l}from"primevue/utils";import{openBlock as t,createElementBlock as i,mergeProps as a,createElementVNode as u}from"vue";var d={name:"RadioButton",extends:e,emits:["click","update:modelValue","change","focus","blur"],props:{value:null,modelValue:null,name:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){this.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return null!=this.modelValue&&l.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.disabled,"p-radiobutton-focused":this.focused}]}}};const n=["id","name","checked","disabled","value","aria-labelledby","aria-label"];d.render=function(e,l,d,o,s,c){return t(),i("div",a({class:c.containerClass,onClick:l[2]||(l[2]=e=>c.onClick(e))},e.ptm("root")),[u("div",a({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[u("input",a({ref:"input",id:d.inputId,type:"radio",class:d.inputClass,style:d.inputStyle,name:d.name,checked:c.checked,disabled:d.disabled,value:d.value,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:l[0]||(l[0]=(...e)=>c.onFocus&&c.onFocus(...e)),onBlur:l[1]||(l[1]=(...e)=>c.onBlur&&c.onBlur(...e))},e.ptm("hiddenInput")),null,16,n)],16),u("div",a({ref:"box",class:["p-radiobutton-box",{"p-highlight":c.checked,"p-disabled":d.disabled,"p-focus":s.focused}]},{...d.inputProps,...e.ptm("input")}),[u("div",a({class:"p-radiobutton-icon"},e.ptm("icon")),null,16)],16)],16)};export{d as default};

package/radiobutton/radiobutton.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.radiobutton = (function (utils, vue) {
+this.primevue.radiobutton = (function (BaseComponent, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'RadioButton',
+        extends: BaseComponent__default["default"],
         emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
         props: {
             value: null,
@@ -84,19 +89,14 @@ this.primevue.radiobutton = (function (utils, vue) {
         }
     };
 
-    const _hoisted_1 = { class: "p-hidden-accessible" };
-    const _hoisted_2 = ["id", "name", "checked", "disabled", "value", "aria-labelledby", "aria-label"];
-    const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-    const _hoisted_4 = [
-      _hoisted_3
-    ];
+    const _hoisted_1 = ["id", "name", "checked", "disabled", "value", "aria-labelledby", "aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: $options.containerClass,
         onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
+      }, _ctx.ptm('root')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
           vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
             id: $props.inputId,
@@ -111,17 +111,19 @@ this.primevue.radiobutton = (function (utils, vue) {
             "aria-label": _ctx.ariaLabel,
             onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
             onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args)))
-          }, $props.inputProps), null, 16, _hoisted_2)
-        ]),
-        vue.createElementVNode("div", {
+          }, _ctx.ptm('hiddenInput')), null, 16, _hoisted_1)
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({
           ref: "box",
-          class: vue.normalizeClass(['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
-        }, _hoisted_4, 2)
-      ], 2))
+          class: ['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]
+        }, { ...$props.inputProps, ..._ctx.ptm('input') }), [
+          vue.createElementVNode("div", vue.mergeProps({ class: "p-radiobutton-icon" }, _ctx.ptm('icon')), null, 16)
+        ], 16)
+      ], 16))
     }
 
     script.render = render;
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.basecomponent, primevue.utils, Vue);

package/radiobutton/radiobutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.radiobutton=function(e,l){"use strict";var t={name:"RadioButton",emits:["click","update:modelValue","change","focus","blur"],props:{value:null,modelValue:null,name:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){this.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return null!=this.modelValue&&e.ObjectUtils.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.disabled,"p-radiobutton-focused":this.focused}]}}};const i={class:"p-hidden-accessible"},a=["id","name","checked","disabled","value","aria-labelledby","aria-label"],u=[l.createElementVNode("div",{class:"p-radiobutton-icon"},null,-1)];return t.render=function(e,t,n,s,d,o){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(o.containerClass),onClick:t[2]||(t[2]=e=>o.onClick(e))},[l.createElementVNode("div",i,[l.createElementVNode("input",l.mergeProps({ref:"input",id:n.inputId,type:"radio",class:n.inputClass,style:n.inputStyle,name:n.name,checked:o.checked,disabled:n.disabled,value:n.value,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>o.onBlur&&o.onBlur(...e))},n.inputProps),null,16,a)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-radiobutton-box",{"p-highlight":o.checked,"p-disabled":n.disabled,"p-focus":d.focused}])},u,2)],2)},t}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.radiobutton=function(e,t,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"RadioButton",extends:i(e).default,emits:["click","update:modelValue","change","focus","blur"],props:{value:null,modelValue:null,name:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){this.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return null!=this.modelValue&&t.ObjectUtils.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.disabled,"p-radiobutton-focused":this.focused}]}}};const u=["id","name","checked","disabled","value","aria-labelledby","aria-label"];return a.render=function(e,t,i,a,n,d){return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:d.containerClass,onClick:t[2]||(t[2]=e=>d.onClick(e))},e.ptm("root")),[l.createElementVNode("div",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[l.createElementVNode("input",l.mergeProps({ref:"input",id:i.inputId,type:"radio",class:i.inputClass,style:i.inputStyle,name:i.name,checked:d.checked,disabled:i.disabled,value:i.value,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=(...e)=>d.onFocus&&d.onFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>d.onBlur&&d.onBlur(...e))},e.ptm("hiddenInput")),null,16,u)],16),l.createElementVNode("div",l.mergeProps({ref:"box",class:["p-radiobutton-box",{"p-highlight":d.checked,"p-disabled":i.disabled,"p-focus":n.focused}]},{...i.inputProps,...e.ptm("input")}),[l.createElementVNode("div",l.mergeProps({class:"p-radiobutton-icon"},e.ptm("icon")),null,16)],16)],16)},a}(primevue.basecomponent,primevue.utils,Vue);

package/rating/Rating.d.ts

@@ -10,6 +10,97 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type RatingPassThroughOptionType = RatingPassThroughAttributes | ((options: RatingPassThroughMethodOptions) => RatingPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RatingPassThroughMethodOptions {
+    props: RatingProps;
+    state: RatingState;
+    context: RatingContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RatingProps.pt}
+ */
+export interface RatingPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the cancel icon's DOM element.
+     */
+    cancelIcon?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the on icon's DOM element.
+     */
+    onIcon?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the off icon's DOM element.
+     */
+    offIcon?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden cancel inputW wapper's DOM element.
+     */
+    hiddenCancelInputWrapper?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden cancel input's DOM element.
+     */
+    hiddenCancelInput?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden item input wrapper's DOM element.
+     */
+    hiddenItemInputWrapper?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden item input's DOM element.
+     */
+    hiddenItemInput?: RatingPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface RatingPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Rating component.
+ */
+export interface RatingState {
+    /**
+     * name state as a number.
+     */
+    name: string;
+    /**
+     * focusedOptionIndex state as a number.
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Rating component.
+ */
+export interface RatingContext {
+    /**
+     * Current active state of the item as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Custom change event.
  * @see {@link RatingEmits.change}
@@ -72,6 +163,11 @@ export interface RatingProps {
      * @deprecated since v3.27.0. Use 'cancelicon' slot.
      */
     cancelIcon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RatingPassThroughOptions}
+     */
+    pt?: RatingPassThroughOptions;
 }
 
 /**

package/rating/Rating.vue

@@ -1,16 +1,28 @@
 <template>
-    <div :class="containerClass">
-        <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)">
-            <span class="p-hidden-accessible">
-                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="cancelAriaLabel()" @focus="onFocus($event, 0)" @blur="onBlur" @change="onChange($event, 0)" />
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)" v-bind="ptm('cancelItem')">
+            <span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')">
+                <input
+                    type="radio"
+                    value="0"
+                    :name="name"
+                    :checked="modelValue === 0"
+                    :disabled="disabled"
+                    :readonly="readonly"
+                    :aria-label="cancelAriaLabel()"
+                    @focus="onFocus($event, 0)"
+                    @blur="onBlur"
+                    @change="onChange($event, 0)"
+                    v-bind="ptm('hiddenCancelInput')"
+                />
             </span>
             <slot name="cancelicon">
-                <component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" />
+                <component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" v-bind="ptm('cancelIcon')" />
             </slot>
         </div>
         <template v-for="value in stars" :key="value">
-            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)">
-                <span class="p-hidden-accessible">
+            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)" v-bind="getPTOptions(value, 'item')">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')">
                     <input
                         type="radio"
                         :value="value"
@@ -22,13 +34,14 @@
                         @focus="onFocus($event, value)"
                         @blur="onBlur"
                         @change="onChange($event, value)"
+                        v-bind="ptm('hiddenItemInput')"
                     />
                 </span>
                 <slot v-if="value <= modelValue" name="onicon" :value="value">
-                    <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" />
+                    <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" v-bind="ptm('onIcon')" />
                 </slot>
                 <slot v-else name="officon" :value="value">
-                    <component :is="onIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" />
+                    <component :is="offIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" v-bind="ptm('offIcon')" />
                 </slot>
             </div>
         </template>
@@ -36,6 +49,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import BanIcon from 'primevue/icons/ban';
 import StarIcon from 'primevue/icons/star';
 import StarFillIcon from 'primevue/icons/starfill';
@@ -43,6 +57,7 @@ import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Rating',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
     props: {
         modelValue: {
@@ -93,6 +108,14 @@ export default {
         this.name = this.name || UniqueComponentId();
     },
     methods: {
+        getPTOptions(value, key) {
+            return this.ptm(key, {
+                context: {
+                    active: value <= this.modelValue,
+                    focused: value === this.focusedOptionIndex
+                }
+            });
+        },
         onOptionClick(event, value) {
             if (!this.readonly && !this.disabled) {
                 this.onOptionSelect(event, value);

package/rating/rating.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var BanIcon = require('primevue/icons/ban');
 var StarIcon = require('primevue/icons/star');
 var StarFillIcon = require('primevue/icons/starfill');
@@ -8,12 +9,14 @@ 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 BanIcon__default = /*#__PURE__*/_interopDefaultLegacy(BanIcon);
 var StarIcon__default = /*#__PURE__*/_interopDefaultLegacy(StarIcon);
 var StarFillIcon__default = /*#__PURE__*/_interopDefaultLegacy(StarFillIcon);
 
 var script = {
     name: 'Rating',
+    extends: BaseComponent__default["default"],
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
     props: {
         modelValue: {
@@ -64,6 +67,14 @@ var script = {
         this.name = this.name || utils.UniqueComponentId();
     },
     methods: {
+        getPTOptions(value, key) {
+            return this.ptm(key, {
+                context: {
+                    active: value <= this.modelValue,
+                    focused: value === this.focusedOptionIndex
+                }
+            });
+        },
         onOptionClick(event, value) {
             if (!this.readonly && !this.disabled) {
                 this.onOptionSelect(event, value);
@@ -116,24 +127,20 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["name", "checked", "disabled", "readonly", "aria-label"];
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "p-hidden-accessible" };
-const _hoisted_5 = ["value", "name", "checked", "disabled", "readonly", "aria-label", "onFocus", "onChange"];
+const _hoisted_1 = ["name", "checked", "disabled", "readonly", "aria-label"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["value", "name", "checked", "disabled", "readonly", "aria-label", "onFocus", "onChange"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.containerClass)
-  }, [
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
     ($props.cancel)
-      ? (vue.openBlock(), vue.createElementBlock("div", {
+      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
           key: 0,
-          class: vue.normalizeClass(['p-rating-item p-rating-cancel-item', { 'p-focus': $data.focusedOptionIndex === 0 }]),
+          class: ['p-rating-item p-rating-cancel-item', { 'p-focus': $data.focusedOptionIndex === 0 }],
           onClick: _cache[3] || (_cache[3] = $event => ($options.onOptionClick($event, 0)))
-        }, [
-          vue.createElementVNode("span", _hoisted_1, [
-            vue.createElementVNode("input", {
+        }, _ctx.ptm('cancelItem')), [
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenCancelInputWrapper')), [
+            vue.createElementVNode("input", vue.mergeProps({
               type: "radio",
               value: "0",
               name: $data.name,
@@ -144,23 +151,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event, 0))),
               onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
               onChange: _cache[2] || (_cache[2] = $event => ($options.onChange($event, 0)))
-            }, null, 40, _hoisted_2)
-          ]),
+            }, _ctx.ptm('hiddenCancelInput')), null, 16, _hoisted_1)
+          ], 16),
           vue.renderSlot(_ctx.$slots, "cancelicon", {}, () => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.cancelIcon ? 'span' : 'BanIcon'), {
-              class: vue.normalizeClass(['p-rating-icon p-rating-cancel', $props.cancelIcon])
-            }, null, 8, ["class"]))
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.cancelIcon ? 'span' : 'BanIcon'), vue.mergeProps({
+              class: ['p-rating-icon p-rating-cancel', $props.cancelIcon]
+            }, _ctx.ptm('cancelIcon')), null, 16, ["class"]))
           ])
-        ], 2))
+        ], 16))
       : vue.createCommentVNode("", true),
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.stars, (value) => {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         key: value,
-        class: vue.normalizeClass(['p-rating-item', { 'p-rating-item-active': value <= $props.modelValue, 'p-focus': value === $data.focusedOptionIndex }]),
+        class: ['p-rating-item', { 'p-rating-item-active': value <= $props.modelValue, 'p-focus': value === $data.focusedOptionIndex }],
         onClick: $event => ($options.onOptionClick($event, value))
-      }, [
-        vue.createElementVNode("span", _hoisted_4, [
-          vue.createElementVNode("input", {
+      }, $options.getPTOptions(value, 'item')), [
+        vue.createElementVNode("span", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenItemInputWrapper')), [
+          vue.createElementVNode("input", vue.mergeProps({
             type: "radio",
             value: value,
             name: $data.name,
@@ -171,28 +178,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onFocus: $event => ($options.onFocus($event, value)),
             onBlur: _cache[4] || (_cache[4] = (...args) => ($options.onBlur && $options.onBlur(...args))),
             onChange: $event => ($options.onChange($event, value))
-          }, null, 40, _hoisted_5)
-        ]),
+          }, _ctx.ptm('hiddenItemInput')), null, 16, _hoisted_3)
+        ], 16),
         (value <= $props.modelValue)
           ? vue.renderSlot(_ctx.$slots, "onicon", {
               key: 0,
               value: value
             }, () => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.onIcon ? 'span' : 'StarFillIcon'), {
-                class: vue.normalizeClass(['p-rating-icon', $props.onIcon])
-              }, null, 8, ["class"]))
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.onIcon ? 'span' : 'StarFillIcon'), vue.mergeProps({
+                class: ['p-rating-icon', $props.onIcon]
+              }, _ctx.ptm('onIcon')), null, 16, ["class"]))
             ])
           : vue.renderSlot(_ctx.$slots, "officon", {
               key: 1,
               value: value
             }, () => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.onIcon ? 'span' : 'StarIcon'), {
-                class: vue.normalizeClass(['p-rating-icon', $props.offIcon])
-              }, null, 8, ["class"]))
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.offIcon ? 'span' : 'StarIcon'), vue.mergeProps({
+                class: ['p-rating-icon', $props.offIcon]
+              }, _ctx.ptm('offIcon')), null, 16, ["class"]))
             ])
-      ], 10, _hoisted_3))
+      ], 16, _hoisted_2))
     }), 128))
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {