primevue 3.15.0 → 3.16.2

package/radiobutton/radiobutton.cjs.js

@@ -5,13 +5,30 @@ var vue = require('vue');
 
 var script = {
     name: 'RadioButton',
-    inheritAttrs: false,
-    emits: ['click', 'update:modelValue', 'change'],
+    emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
 		value: null,
         modelValue: null,
-        class: null,
-        style: null
+        name: {
+            type: String,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        inputId: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -20,7 +37,7 @@ var script = {
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$emit('click', event);
                 this.$emit('update:modelValue', this.value);
                 this.$refs.input.focus();
@@ -30,11 +47,13 @@ var script = {
                 }
             }
         },
-        onFocus() {
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -42,43 +61,50 @@ var script = {
             return this.modelValue != null && utils.ObjectUtils.equals(this.modelValue, this.value);
         },
         containerClass() {
-            return ['p-radiobutton p-component', this.class, {'p-radiobutton-checked': this.checked, 'p-radiobutton-disabled': this.$attrs.disabled, 'p-radiobutton-focused': this.focused}];
+            return [
+                'p-radiobutton p-component', {
+                    'p-radiobutton-checked': this.checked,
+                    'p-radiobutton-disabled': this.disabled,
+                    'p-radiobutton-focused': this.focused
+                }];
         }
     }
 };
 
 const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["checked", "value"];
-const _hoisted_3 = ["aria-checked"];
-const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-const _hoisted_5 = [
-  _hoisted_4
+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
 ];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass($options.containerClass),
-    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event))),
-    style: vue.normalizeStyle($props.style)
+    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
   }, [
     vue.createElementVNode("div", _hoisted_1, [
       vue.createElementVNode("input", vue.mergeProps({
         ref: "input",
         type: "radio",
+        id: $props.inputId,
+        class: $props.inputClass,
+        style: $props.inputStyle,
+        name: $props.name,
         checked: $options.checked,
-        value: $props.value
-      }, _ctx.$attrs, {
+        disabled: $props.disabled,
+        value: $props.value,
+        "aria-labelledby": _ctx.ariaLabelledby,
+        "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)))
-      }), null, 16, _hoisted_2)
+      }, $props.inputProps), null, 16, _hoisted_2)
     ]),
     vue.createElementVNode("div", {
       ref: "box",
-      class: vue.normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-      role: "radio",
-      "aria-checked": $options.checked
-    }, _hoisted_5, 10, _hoisted_3)
-  ], 6))
+      class: vue.normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
+    }, _hoisted_4, 2)
+  ], 2))
 }
 
 script.render = render;

package/radiobutton/radiobutton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),l={name:"RadioButton",inheritAttrs:!1,emits:["click","update:modelValue","change"],props:{value:null,modelValue:null,class:null,style:null},data:()=>({focused:!1}),methods:{onClick(e){this.$attrs.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(){this.focused=!0},onBlur(){this.focused=!1}},computed:{checked(){return null!=this.modelValue&&e.ObjectUtils.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",this.class,{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.$attrs.disabled,"p-radiobutton-focused":this.focused}]}}};const s={class:"p-hidden-accessible"},o=["checked","value"],c=["aria-checked"],i=[t.createElementVNode("div",{class:"p-radiobutton-icon"},null,-1)];l.render=function(e,l,a,u,d,n){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(n.containerClass),onClick:l[2]||(l[2]=e=>n.onClick(e)),style:t.normalizeStyle(a.style)},[t.createElementVNode("div",s,[t.createElementVNode("input",t.mergeProps({ref:"input",type:"radio",checked:n.checked,value:a.value},e.$attrs,{onFocus:l[0]||(l[0]=(...e)=>n.onFocus&&n.onFocus(...e)),onBlur:l[1]||(l[1]=(...e)=>n.onBlur&&n.onBlur(...e))}),null,16,o)]),t.createElementVNode("div",{ref:"box",class:t.normalizeClass(["p-radiobutton-box",{"p-highlight":n.checked,"p-disabled":e.$attrs.disabled,"p-focus":d.focused}]),role:"radio","aria-checked":n.checked},i,10,c)],6)},module.exports=l;
+"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:null,inputClass:null,inputStyle:null,inputProps: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,n,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",a,[l.createElementVNode("input",l.mergeProps({ref:"input",type:"radio",id:s.inputId,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":d.focused}])},u,2)],2)},module.exports=t;

package/radiobutton/radiobutton.esm.js

@@ -1,15 +1,32 @@
 import { ObjectUtils } from 'primevue/utils';
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, mergeProps } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps } from 'vue';
 
 var script = {
     name: 'RadioButton',
-    inheritAttrs: false,
-    emits: ['click', 'update:modelValue', 'change'],
+    emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
 		value: null,
         modelValue: null,
-        class: null,
-        style: null
+        name: {
+            type: String,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        inputId: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -18,7 +35,7 @@ var script = {
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$emit('click', event);
                 this.$emit('update:modelValue', this.value);
                 this.$refs.input.focus();
@@ -28,11 +45,13 @@ var script = {
                 }
             }
         },
-        onFocus() {
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -40,43 +59,50 @@ var script = {
             return this.modelValue != null && ObjectUtils.equals(this.modelValue, this.value);
         },
         containerClass() {
-            return ['p-radiobutton p-component', this.class, {'p-radiobutton-checked': this.checked, 'p-radiobutton-disabled': this.$attrs.disabled, 'p-radiobutton-focused': this.focused}];
+            return [
+                'p-radiobutton p-component', {
+                    'p-radiobutton-checked': this.checked,
+                    'p-radiobutton-disabled': this.disabled,
+                    'p-radiobutton-focused': this.focused
+                }];
         }
     }
 };
 
 const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["checked", "value"];
-const _hoisted_3 = ["aria-checked"];
-const _hoisted_4 = /*#__PURE__*/createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-const _hoisted_5 = [
-  _hoisted_4
+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
 ];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass($options.containerClass),
-    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event))),
-    style: normalizeStyle($props.style)
+    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
   }, [
     createElementVNode("div", _hoisted_1, [
       createElementVNode("input", mergeProps({
         ref: "input",
         type: "radio",
+        id: $props.inputId,
+        class: $props.inputClass,
+        style: $props.inputStyle,
+        name: $props.name,
         checked: $options.checked,
-        value: $props.value
-      }, _ctx.$attrs, {
+        disabled: $props.disabled,
+        value: $props.value,
+        "aria-labelledby": _ctx.ariaLabelledby,
+        "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)))
-      }), null, 16, _hoisted_2)
+      }, $props.inputProps), null, 16, _hoisted_2)
     ]),
     createElementVNode("div", {
       ref: "box",
-      class: normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-      role: "radio",
-      "aria-checked": $options.checked
-    }, _hoisted_5, 10, _hoisted_3)
-  ], 6))
+      class: normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
+    }, _hoisted_4, 2)
+  ], 2))
 }
 
 script.render = render;

package/radiobutton/radiobutton.esm.min.js

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

package/radiobutton/radiobutton.js

@@ -4,13 +4,30 @@ this.primevue.radiobutton = (function (utils, vue) {
 
     var script = {
         name: 'RadioButton',
-        inheritAttrs: false,
-        emits: ['click', 'update:modelValue', 'change'],
+        emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
         props: {
     		value: null,
             modelValue: null,
-            class: null,
-            style: null
+            name: {
+                type: String,
+                default: null
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            inputId: null,
+            inputClass: null,
+            inputStyle: null,
+            inputProps: null,
+            'aria-labelledby': {
+                type: String,
+    			default: null
+            },
+            'aria-label': {
+                type: String,
+                default: null
+            }
         },
         data() {
             return {
@@ -19,7 +36,7 @@ this.primevue.radiobutton = (function (utils, vue) {
         },
         methods: {
             onClick(event) {
-                if (!this.$attrs.disabled) {
+                if (!this.disabled) {
                     this.$emit('click', event);
                     this.$emit('update:modelValue', this.value);
                     this.$refs.input.focus();
@@ -29,11 +46,13 @@ this.primevue.radiobutton = (function (utils, vue) {
                     }
                 }
             },
-            onFocus() {
+            onFocus(event) {
                 this.focused = true;
+                this.$emit('focus', event);
             },
-            onBlur() {
+            onBlur(event) {
                 this.focused = false;
+                this.$emit('blur', event);
             }
         },
         computed: {
@@ -41,43 +60,50 @@ this.primevue.radiobutton = (function (utils, vue) {
                 return this.modelValue != null && utils.ObjectUtils.equals(this.modelValue, this.value);
             },
             containerClass() {
-                return ['p-radiobutton p-component', this.class, {'p-radiobutton-checked': this.checked, 'p-radiobutton-disabled': this.$attrs.disabled, 'p-radiobutton-focused': this.focused}];
+                return [
+                    'p-radiobutton p-component', {
+                        'p-radiobutton-checked': this.checked,
+                        'p-radiobutton-disabled': this.disabled,
+                        'p-radiobutton-focused': this.focused
+                    }];
             }
         }
     };
 
     const _hoisted_1 = { class: "p-hidden-accessible" };
-    const _hoisted_2 = ["checked", "value"];
-    const _hoisted_3 = ["aria-checked"];
-    const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-    const _hoisted_5 = [
-      _hoisted_4
+    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
     ];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass($options.containerClass),
-        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event))),
-        style: vue.normalizeStyle($props.style)
+        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
       }, [
         vue.createElementVNode("div", _hoisted_1, [
           vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
             type: "radio",
+            id: $props.inputId,
+            class: $props.inputClass,
+            style: $props.inputStyle,
+            name: $props.name,
             checked: $options.checked,
-            value: $props.value
-          }, _ctx.$attrs, {
+            disabled: $props.disabled,
+            value: $props.value,
+            "aria-labelledby": _ctx.ariaLabelledby,
+            "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)))
-          }), null, 16, _hoisted_2)
+          }, $props.inputProps), null, 16, _hoisted_2)
         ]),
         vue.createElementVNode("div", {
           ref: "box",
-          class: vue.normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-          role: "radio",
-          "aria-checked": $options.checked
-        }, _hoisted_5, 10, _hoisted_3)
-      ], 6))
+          class: vue.normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
+        }, _hoisted_4, 2)
+      ], 2))
     }
 
     script.render = render;

package/radiobutton/radiobutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.radiobutton=function(e,t){"use strict";var s={name:"RadioButton",inheritAttrs:!1,emits:["click","update:modelValue","change"],props:{value:null,modelValue:null,class:null,style:null},data:()=>({focused:!1}),methods:{onClick(e){this.$attrs.disabled||(this.$emit("click",e),this.$emit("update:modelValue",this.value),this.$refs.input.focus(),this.checked||this.$emit("change",e))},onFocus(){this.focused=!0},onBlur(){this.focused=!1}},computed:{checked(){return null!=this.modelValue&&e.ObjectUtils.equals(this.modelValue,this.value)},containerClass(){return["p-radiobutton p-component",this.class,{"p-radiobutton-checked":this.checked,"p-radiobutton-disabled":this.$attrs.disabled,"p-radiobutton-focused":this.focused}]}}};const l={class:"p-hidden-accessible"},i=["checked","value"],o=["aria-checked"],c=[t.createElementVNode("div",{class:"p-radiobutton-icon"},null,-1)];return s.render=function(e,s,a,u,n,d){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(d.containerClass),onClick:s[2]||(s[2]=e=>d.onClick(e)),style:t.normalizeStyle(a.style)},[t.createElementVNode("div",l,[t.createElementVNode("input",t.mergeProps({ref:"input",type:"radio",checked:d.checked,value:a.value},e.$attrs,{onFocus:s[0]||(s[0]=(...e)=>d.onFocus&&d.onFocus(...e)),onBlur:s[1]||(s[1]=(...e)=>d.onBlur&&d.onBlur(...e))}),null,16,i)]),t.createElementVNode("div",{ref:"box",class:t.normalizeClass(["p-radiobutton-box",{"p-highlight":d.checked,"p-disabled":e.$attrs.disabled,"p-focus":n.focused}]),role:"radio","aria-checked":d.checked},c,10,o)],6)},s}(primevue.utils,Vue);
+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:null,inputClass:null,inputStyle:null,inputProps: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,s,n,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",type:"radio",id:s.inputId,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,a)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-radiobutton-box",{"p-highlight":o.checked,"p-disabled":s.disabled,"p-focus":d.focused}])},u,2)],2)},t}(primevue.utils,Vue);

package/rating/Rating.d.ts

@@ -16,6 +16,10 @@ export interface RatingProps {
      * Value of the rating.
      */
     modelValue?: number | undefined;
+    /**
+     * Name of the element.
+     */
+    name?: string | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      */

package/rating/Rating.vue

@@ -1,19 +1,32 @@
 <template>
     <div :class="containerClass">
-        <span class="p-rating-icon p-rating-cancel pi pi-ban" :tabindex="focusIndex" v-if="cancel" @click="onCancelClick"></span>
-        <span :key="i" v-for="i in stars" @click="onStarClick($event,i)" :tabindex="focusIndex" @keydown.enter.prevent="onStarClick($event,i)"
-            :class="['p-rating-icon', {'pi pi-star': (i > modelValue), 'pi pi-star-fill': (i <= modelValue)}]"></span>
+        <span :class="['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': focusIndex === 0}]" v-if="cancel" @click="onCancelClick" @keydown="onKeyDown">
+            <span class="p-hidden-accessible" v-if="cancel">
+                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="$primevue.config.locale.clear" @focus="onFocus($event, 0)" @blur="onBlur" @keydown="onKeyDown($event, 0)">
+            </span>
+        </span>
+        <template :key="i" v-for="i in stars">
+            <span :class="['p-rating-icon', {'pi pi-star': (i > modelValue), 'pi pi-star-fill': (i <= modelValue), 'p-focus': i === focusIndex}]" @click="onStarClick($event,i)">
+                <span class="p-hidden-accessible">
+                    <input type="radio" :value="i" :name="name" :checked="modelValue === i" :disabled="disabled" :readonly="readonly" :aria-label="ariaLabelTemplate(i)" @focus="onFocus($event, i)" @blur="onBlur" @keydown="onKeyDown($event,i)">
+                </span>
+            </span>
+        </template>
     </div>
 </template>
 
 <script>
 export default {
     name: 'Rating',
-    emits: ['update:modelValue', 'change'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
     props: {
         modelValue: {
             type: Number,
             default: null
+        },
+        name: {
+            type: String,
+            default: null
         },
 		disabled: {
             type: Boolean,
@@ -32,12 +45,46 @@ export default {
             default: true
         }
     },
+    data() {
+        return {
+            focusIndex: null
+        };
+    },
     methods: {
         onStarClick(event, value) {
             if (!this.readonly && !this.disabled) {
                 this.updateModel(event, value);
+                this.focusIndex = value;
+            }
+        },
+        onKeyDown(event, value) {
+            if (event.code === 'Space') {
+                this.updateModel(event, value);
+            }
+            if (event.code === 'Tab') {
+                this.focusIndex = null;
+            }
+        },
+        onFocus(event, index) {
+            if (!this.readonly) {
+                if (this.modelValue === null && this.focusIndex === null) {
+                    this.cancel ? this.focusIndex = 0 : this.focusIndex = 1;
+                }
+                else if (this.modelValue !== null && this.focusIndex === null) {
+                    this.focusIndex = this.modelValue;
+                    this.updateModel(event, this.modelValue);
+                }
+                else {
+                    this.focusIndex = index;
+                    this.updateModel(event, index);
+                }
+
+                this.$emit('focus', event);
             }
         },
+        onBlur(event) {
+            this.$emit('blur', event);
+        },
         onCancelClick(event) {
             if (!this.readonly && !this.disabled) {
                 this.updateModel(event, null);
@@ -49,6 +96,9 @@ export default {
                 originalEvent: event,
                 value: value
             });
+        },
+        ariaLabelTemplate(index) {
+            return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
         }
     },
     computed: {
@@ -60,9 +110,6 @@ export default {
                     'p-disabled': this.disabled
                 }
             ];
-        },
-        focusIndex() {
-            return (this.disabled || this.readonly) ? null : '0';
         }
     }
 }
@@ -76,4 +123,11 @@ export default {
 .p-rating.p-rating-readonly .p-rating-icon {
     cursor: default;
 }
+
+.p-rating:not(.p-disabled) .p-rating-icon.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #BFDBFE;
+    border-color: #3B82F6;
+}
 </style>