primevue 3.34.0 → 3.35.0

package/progressspinner/progressspinner.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/basecomponent"),n=require("primevue/usestyle"),r=require("vue");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=t(e),i=n.useStyle("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n",{name:"progressspinner",manual:!0}),o={name:"ProgressSpinner",extends:{name:"BaseProgressSpinner",extends:s.default,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},css:{classes:{root:"p-progress-spinner",spinner:"p-progress-spinner-svg",circle:"p-progress-spinner-circle"},loadStyle:i.load},provide:function(){return{$parentInstance:this}}},computed:{svgStyle:function(){return{"animation-duration":this.animationDuration}}}},p=["fill","stroke-width"];o.render=function(e,n,t,s,i,o){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root"),role:"progressbar"},e.ptm("root"),{"data-pc-name":"progressspinner"}),[(r.openBlock(),r.createElementBlock("svg",r.mergeProps({class:e.cx("spinner"),viewBox:"25 25 50 50",style:o.svgStyle},e.ptm("spinner")),[r.createElementVNode("circle",r.mergeProps({class:e.cx("circle"),cx:"50",cy:"50",r:"20",fill:e.fill,"stroke-width":e.strokeWidth,strokeMiterlimit:"10"},e.ptm("circle")),null,16,p)],16))],16)},module.exports=o;
+"use strict";var e=require("primevue/basecomponent"),n=require("primevue/usestyle"),r=require("vue");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=t(e),i=n.useStyle("\n@layer primevue {\n    .p-progress-spinner {\n        position: relative;\n        margin: 0 auto;\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n    }\n    \n    .p-progress-spinner::before {\n        content: '';\n        display: block;\n        padding-top: 100%;\n    }\n    \n    .p-progress-spinner-svg {\n        height: 100%;\n        transform-origin: center center;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n",{name:"progressspinner",manual:!0}),o={name:"ProgressSpinner",extends:{name:"BaseProgressSpinner",extends:s.default,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},css:{classes:{root:"p-progress-spinner",spinner:"p-progress-spinner-svg",circle:"p-progress-spinner-circle"},loadStyle:i.load},provide:function(){return{$parentInstance:this}}},computed:{svgStyle:function(){return{"animation-duration":this.animationDuration}}}},p=["fill","stroke-width"];o.render=function(e,n,t,s,i,o){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root"),role:"progressbar"},e.ptm("root"),{"data-pc-name":"progressspinner"}),[(r.openBlock(),r.createElementBlock("svg",r.mergeProps({class:e.cx("spinner"),viewBox:"25 25 50 50",style:o.svgStyle},e.ptm("spinner")),[r.createElementVNode("circle",r.mergeProps({class:e.cx("circle"),cx:"50",cy:"50",r:"20",fill:e.fill,"stroke-width":e.strokeWidth,strokeMiterlimit:"10"},e.ptm("circle")),null,16,p)],16))],16)},module.exports=o;

package/progressspinner/progressspinner.esm.js

@@ -2,7 +2,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 import { openBlock, createElementBlock, mergeProps, createElementVNode } from 'vue';
 
-var styles = "\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n";
+var styles = "\n@layer primevue {\n    .p-progress-spinner {\n        position: relative;\n        margin: 0 auto;\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n    }\n    \n    .p-progress-spinner::before {\n        content: '';\n        display: block;\n        padding-top: 100%;\n    }\n    \n    .p-progress-spinner-svg {\n        height: 100%;\n        transform-origin: center center;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n";
 var classes = {
   root: 'p-progress-spinner',
   spinner: 'p-progress-spinner-svg',

package/progressspinner/progressspinner.esm.min.js

@@ -1 +1 @@
-import n from"primevue/basecomponent";import{useStyle as e}from"primevue/usestyle";import{openBlock as r,createElementBlock as t,mergeProps as i,createElementVNode as s}from"vue";var o=e("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n",{name:"progressspinner",manual:!0}),p={name:"ProgressSpinner",extends:{name:"BaseProgressSpinner",extends:n,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},css:{classes:{root:"p-progress-spinner",spinner:"p-progress-spinner-svg",circle:"p-progress-spinner-circle"},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},computed:{svgStyle:function(){return{"animation-duration":this.animationDuration}}}},a=["fill","stroke-width"];p.render=function(n,e,o,p,l,c){return r(),t("div",i({class:n.cx("root"),role:"progressbar"},n.ptm("root"),{"data-pc-name":"progressspinner"}),[(r(),t("svg",i({class:n.cx("spinner"),viewBox:"25 25 50 50",style:c.svgStyle},n.ptm("spinner")),[s("circle",i({class:n.cx("circle"),cx:"50",cy:"50",r:"20",fill:n.fill,"stroke-width":n.strokeWidth,strokeMiterlimit:"10"},n.ptm("circle")),null,16,a)],16))],16)};export{p as default};
+import n from"primevue/basecomponent";import{useStyle as e}from"primevue/usestyle";import{openBlock as r,createElementBlock as t,mergeProps as i,createElementVNode as s}from"vue";var o=e("\n@layer primevue {\n    .p-progress-spinner {\n        position: relative;\n        margin: 0 auto;\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n    }\n    \n    .p-progress-spinner::before {\n        content: '';\n        display: block;\n        padding-top: 100%;\n    }\n    \n    .p-progress-spinner-svg {\n        height: 100%;\n        transform-origin: center center;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n",{name:"progressspinner",manual:!0}),p={name:"ProgressSpinner",extends:{name:"BaseProgressSpinner",extends:n,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},css:{classes:{root:"p-progress-spinner",spinner:"p-progress-spinner-svg",circle:"p-progress-spinner-circle"},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},computed:{svgStyle:function(){return{"animation-duration":this.animationDuration}}}},a=["fill","stroke-width"];p.render=function(n,e,o,p,l,c){return r(),t("div",i({class:n.cx("root"),role:"progressbar"},n.ptm("root"),{"data-pc-name":"progressspinner"}),[(r(),t("svg",i({class:n.cx("spinner"),viewBox:"25 25 50 50",style:c.svgStyle},n.ptm("spinner")),[s("circle",i({class:n.cx("circle"),cx:"50",cy:"50",r:"20",fill:n.fill,"stroke-width":n.strokeWidth,strokeMiterlimit:"10"},n.ptm("circle")),null,16,a)],16))],16)};export{p as default};

package/progressspinner/progressspinner.js

@@ -6,7 +6,7 @@ this.primevue.progressspinner = (function (BaseComponent, usestyle, vue) {
 
     var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    var styles = "\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n";
+    var styles = "\n@layer primevue {\n    .p-progress-spinner {\n        position: relative;\n        margin: 0 auto;\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n    }\n    \n    .p-progress-spinner::before {\n        content: '';\n        display: block;\n        padding-top: 100%;\n    }\n    \n    .p-progress-spinner-svg {\n        height: 100%;\n        transform-origin: center center;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n";
     var classes = {
       root: 'p-progress-spinner',
       spinner: 'p-progress-spinner-svg',

package/progressspinner/progressspinner.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.progressspinner=function(e,n,r){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=t(e),i=n.useStyle("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n",{name:"progressspinner",manual:!0}),o={name:"ProgressSpinner",extends:{name:"BaseProgressSpinner",extends:s.default,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},css:{classes:{root:"p-progress-spinner",spinner:"p-progress-spinner-svg",circle:"p-progress-spinner-circle"},loadStyle:i.load},provide:function(){return{$parentInstance:this}}},computed:{svgStyle:function(){return{"animation-duration":this.animationDuration}}}},p=["fill","stroke-width"];return o.render=function(e,n,t,s,i,o){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root"),role:"progressbar"},e.ptm("root"),{"data-pc-name":"progressspinner"}),[(r.openBlock(),r.createElementBlock("svg",r.mergeProps({class:e.cx("spinner"),viewBox:"25 25 50 50",style:o.svgStyle},e.ptm("spinner")),[r.createElementVNode("circle",r.mergeProps({class:e.cx("circle"),cx:"50",cy:"50",r:"20",fill:e.fill,"stroke-width":e.strokeWidth,strokeMiterlimit:"10"},e.ptm("circle")),null,16,p)],16))],16)},o}(primevue.basecomponent,primevue.usestyle,Vue);
+this.primevue=this.primevue||{},this.primevue.progressspinner=function(e,n,r){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=t(e),i=n.useStyle("\n@layer primevue {\n    .p-progress-spinner {\n        position: relative;\n        margin: 0 auto;\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n    }\n    \n    .p-progress-spinner::before {\n        content: '';\n        display: block;\n        padding-top: 100%;\n    }\n    \n    .p-progress-spinner-svg {\n        height: 100%;\n        transform-origin: center center;\n        width: 100%;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n",{name:"progressspinner",manual:!0}),o={name:"ProgressSpinner",extends:{name:"BaseProgressSpinner",extends:s.default,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},css:{classes:{root:"p-progress-spinner",spinner:"p-progress-spinner-svg",circle:"p-progress-spinner-circle"},loadStyle:i.load},provide:function(){return{$parentInstance:this}}},computed:{svgStyle:function(){return{"animation-duration":this.animationDuration}}}},p=["fill","stroke-width"];return o.render=function(e,n,t,s,i,o){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root"),role:"progressbar"},e.ptm("root"),{"data-pc-name":"progressspinner"}),[(r.openBlock(),r.createElementBlock("svg",r.mergeProps({class:e.cx("spinner"),viewBox:"25 25 50 50",style:o.svgStyle},e.ptm("spinner")),[r.createElementVNode("circle",r.mergeProps({class:e.cx("circle"),cx:"50",cy:"50",r:"20",fill:e.fill,"stroke-width":e.strokeWidth,strokeMiterlimit:"10"},e.ptm("circle")),null,16,p)],16))],16)},o}(primevue.basecomponent,primevue.usestyle,Vue);

package/rating/BaseRating.vue

@@ -3,20 +3,22 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-.p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-}
-
-.p-rating.p-readonly .p-rating-item {
-    cursor: default;
+@layer primevue {
+    .p-rating {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+    
+    .p-rating-item {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+    }
+    
+    .p-rating.p-readonly .p-rating-item {
+        cursor: default;
+    }
 }
 `;
 
@@ -31,7 +33,7 @@ const classes = {
     cancelItem: ({ instance }) => [
         'p-rating-item p-rating-cancel-item',
         {
-            'p-focus': instance.focusedOptionIndex === 0
+            'p-focus': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
         }
     ],
     cancelIcon: 'p-rating-icon p-rating-cancel',
@@ -39,14 +41,14 @@ const classes = {
         'p-rating-item',
         {
             'p-rating-item-active': value <= props.modelValue,
-            'p-focus': value === instance.focusedOptionIndex
+            'p-focus': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
         }
     ],
     onIcon: 'p-rating-icon',
     offIcon: 'p-rating-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'rating', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'rating', manual: true });
 
 export default {
     name: 'BaseRating',

package/rating/Rating.vue

@@ -62,7 +62,8 @@ export default {
     data() {
         return {
             name: this.$attrs.name,
-            focusedOptionIndex: -1
+            focusedOptionIndex: -1,
+            isFocusVisibleItem: true
         };
     },
     watch: {
@@ -85,6 +86,7 @@ export default {
         onOptionClick(event, value) {
             if (!this.readonly && !this.disabled) {
                 this.onOptionSelect(event, value);
+                this.isFocusVisibleItem = false;
                 const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
 
                 firstFocusableEl && DomHandler.focus(firstFocusableEl);
@@ -100,6 +102,7 @@ export default {
         },
         onChange(event, value) {
             this.onOptionSelect(event, value);
+            this.isFocusVisibleItem = true;
         },
         onOptionSelect(event, value) {
             this.focusedOptionIndex = value;

package/rating/rating.cjs.js

@@ -15,7 +15,7 @@ var StarIcon__default = /*#__PURE__*/_interopDefaultLegacy(StarIcon);
 var StarFillIcon__default = /*#__PURE__*/_interopDefaultLegacy(StarFillIcon);
 var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-var styles = "\n.p-rating {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.p-rating-item {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n";
+var styles = "\n@layer primevue {\n    .p-rating {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-rating-item {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .p-rating.p-readonly .p-rating-item {\n        cursor: default;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var props = _ref.props;
@@ -27,7 +27,7 @@ var classes = {
   cancelItem: function cancelItem(_ref2) {
     var instance = _ref2.instance;
     return ['p-rating-item p-rating-cancel-item', {
-      'p-focus': instance.focusedOptionIndex === 0
+      'p-focus': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
     }];
   },
   cancelIcon: 'p-rating-icon p-rating-cancel',
@@ -37,7 +37,7 @@ var classes = {
       value = _ref3.value;
     return ['p-rating-item', {
       'p-rating-item-active': value <= props.modelValue,
-      'p-focus': value === instance.focusedOptionIndex
+      'p-focus': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
     }];
   },
   onIcon: 'p-rating-icon',
@@ -48,7 +48,6 @@ var _useStyle = usestyle.useStyle(styles, {
     manual: true
   }),
   loadStyle = _useStyle.load;
-  _useStyle.unload;
 var script$1 = {
   name: 'BaseRating',
   "extends": BaseComponent__default["default"],
@@ -104,7 +103,8 @@ var script = {
   data: function data() {
     return {
       name: this.$attrs.name,
-      focusedOptionIndex: -1
+      focusedOptionIndex: -1,
+      isFocusVisibleItem: true
     };
   },
   watch: {
@@ -127,6 +127,7 @@ var script = {
     onOptionClick: function onOptionClick(event, value) {
       if (!this.readonly && !this.disabled) {
         this.onOptionSelect(event, value);
+        this.isFocusVisibleItem = false;
         var firstFocusableEl = utils.DomHandler.getFirstFocusableElement(event.currentTarget);
         firstFocusableEl && utils.DomHandler.focus(firstFocusableEl);
       }
@@ -141,6 +142,7 @@ var script = {
     },
     onChange: function onChange(event, value) {
       this.onOptionSelect(event, value);
+      this.isFocusVisibleItem = true;
     },
     onOptionSelect: function onOptionSelect(event, value) {
       this.focusedOptionIndex = value;

package/rating/rating.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/icons/ban"),n=require("primevue/icons/star"),t=require("primevue/icons/starfill"),o=require("primevue/utils"),a=require("primevue/basecomponent"),c=require("primevue/usestyle"),l=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e),s=i(n),u=i(t),d=i(a),p=c.useStyle("\n.p-rating {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.p-rating-item {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n",{name:"rating",manual:!0}),m={name:"Rating",extends:{name:"BaseRating",extends:d.default,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},css:{classes:{root:function(e){var n=e.props;return["p-rating",{"p-readonly":n.readonly,"p-disabled":n.disabled}]},cancelItem:function(e){return["p-rating-item p-rating-cancel-item",{"p-focus":0===e.instance.focusedOptionIndex}]},cancelIcon:"p-rating-icon p-rating-cancel",item:function(e){var n=e.value;return["p-rating-item",{"p-rating-item-active":n<=e.props.modelValue,"p-focus":n===e.instance.focusedOptionIndex}]},onIcon:"p-rating-icon",offIcon:"p-rating-icon"},loadStyle:p.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1}},watch:{"$attrs.name":function(e){this.name=e||o.UniqueComponentId()}},mounted:function(){this.name=this.name||o.UniqueComponentId()},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n);var t=o.DomHandler.getFirstFocusableElement(e.currentTarget);t&&o.DomHandler.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n)},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:u.default,StarIcon:s.default,BanIcon:r.default}},f=["data-p-focused"],g=["name","checked","disabled","readonly","aria-label"],I=["onClick","data-p-active","data-p-focused"],h=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];m.render=function(e,n,t,o,a,c){return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"rating"}),[e.cancel?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,g)],16),l.renderSlot(e.$slots,"cancelicon",{class:l.normalizeClass(e.cx("cancelIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.cancelIcon?"span":"BanIcon"),l.mergeProps({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,f)):l.createCommentVNode("",!0),(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.stars,(function(t){return l.openBlock(),l.createElementBlock("div",l.mergeProps({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,h)],16),t<=e.modelValue?l.renderSlot(e.$slots,"onicon",{key:0,value:t,class:l.normalizeClass(e.cx("onIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.onIcon?"span":"StarFillIcon"),l.mergeProps({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):l.renderSlot(e.$slots,"officon",{key:1,value:t,class:l.normalizeClass(e.cx("offIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.offIcon?"span":"StarIcon"),l.mergeProps({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,I)})),128))],16)},module.exports=m;
+"use strict";var e=require("primevue/icons/ban"),n=require("primevue/icons/star"),t=require("primevue/icons/starfill"),o=require("primevue/utils"),a=require("primevue/basecomponent"),c=require("primevue/usestyle"),i=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(e),s=l(n),u=l(t),d=l(a),p=c.useStyle("\n@layer primevue {\n    .p-rating {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-rating-item {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .p-rating.p-readonly .p-rating-item {\n        cursor: default;\n    }\n}\n",{name:"rating",manual:!0}),m={name:"Rating",extends:{name:"BaseRating",extends:d.default,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},css:{classes:{root:function(e){var n=e.props;return["p-rating",{"p-readonly":n.readonly,"p-disabled":n.disabled}]},cancelItem:function(e){var n=e.instance;return["p-rating-item p-rating-cancel-item",{"p-focus":0===n.focusedOptionIndex&&n.isFocusVisibleItem}]},cancelIcon:"p-rating-icon p-rating-cancel",item:function(e){var n=e.instance,t=e.value;return["p-rating-item",{"p-rating-item-active":t<=e.props.modelValue,"p-focus":t===n.focusedOptionIndex&&n.isFocusVisibleItem}]},onIcon:"p-rating-icon",offIcon:"p-rating-icon"},loadStyle:p.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1,isFocusVisibleItem:!0}},watch:{"$attrs.name":function(e){this.name=e||o.UniqueComponentId()}},mounted:function(){this.name=this.name||o.UniqueComponentId()},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n),this.isFocusVisibleItem=!1;var t=o.DomHandler.getFirstFocusableElement(e.currentTarget);t&&o.DomHandler.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n),this.isFocusVisibleItem=!0},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:u.default,StarIcon:s.default,BanIcon:r.default}},f=["data-p-focused"],I=["name","checked","disabled","readonly","aria-label"],g=["onClick","data-p-active","data-p-focused"],h=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];m.render=function(e,n,t,o,a,c){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"rating"}),[e.cancel?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[i.createElementVNode("span",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[i.createElementVNode("input",i.mergeProps({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,I)],16),i.renderSlot(e.$slots,"cancelicon",{class:i.normalizeClass(e.cx("cancelIcon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.cancelIcon?"span":"BanIcon"),i.mergeProps({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,f)):i.createCommentVNode("",!0),(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.stars,(function(t){return i.openBlock(),i.createElementBlock("div",i.mergeProps({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[i.createElementVNode("span",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[i.createElementVNode("input",i.mergeProps({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,h)],16),t<=e.modelValue?i.renderSlot(e.$slots,"onicon",{key:0,value:t,class:i.normalizeClass(e.cx("onIcon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.onIcon?"span":"StarFillIcon"),i.mergeProps({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):i.renderSlot(e.$slots,"officon",{key:1,value:t,class:i.normalizeClass(e.cx("offIcon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.offIcon?"span":"StarIcon"),i.mergeProps({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,g)})),128))],16)},module.exports=m;

package/rating/rating.esm.js

@@ -6,7 +6,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, Fragment, renderList } from 'vue';
 
-var styles = "\n.p-rating {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.p-rating-item {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n";
+var styles = "\n@layer primevue {\n    .p-rating {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-rating-item {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .p-rating.p-readonly .p-rating-item {\n        cursor: default;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var props = _ref.props;
@@ -18,7 +18,7 @@ var classes = {
   cancelItem: function cancelItem(_ref2) {
     var instance = _ref2.instance;
     return ['p-rating-item p-rating-cancel-item', {
-      'p-focus': instance.focusedOptionIndex === 0
+      'p-focus': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
     }];
   },
   cancelIcon: 'p-rating-icon p-rating-cancel',
@@ -28,7 +28,7 @@ var classes = {
       value = _ref3.value;
     return ['p-rating-item', {
       'p-rating-item-active': value <= props.modelValue,
-      'p-focus': value === instance.focusedOptionIndex
+      'p-focus': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
     }];
   },
   onIcon: 'p-rating-icon',
@@ -39,7 +39,6 @@ var _useStyle = useStyle(styles, {
     manual: true
   }),
   loadStyle = _useStyle.load;
-  _useStyle.unload;
 var script$1 = {
   name: 'BaseRating',
   "extends": BaseComponent,
@@ -95,7 +94,8 @@ var script = {
   data: function data() {
     return {
       name: this.$attrs.name,
-      focusedOptionIndex: -1
+      focusedOptionIndex: -1,
+      isFocusVisibleItem: true
     };
   },
   watch: {
@@ -118,6 +118,7 @@ var script = {
     onOptionClick: function onOptionClick(event, value) {
       if (!this.readonly && !this.disabled) {
         this.onOptionSelect(event, value);
+        this.isFocusVisibleItem = false;
         var firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
         firstFocusableEl && DomHandler.focus(firstFocusableEl);
       }
@@ -132,6 +133,7 @@ var script = {
     },
     onChange: function onChange(event, value) {
       this.onOptionSelect(event, value);
+      this.isFocusVisibleItem = true;
     },
     onOptionSelect: function onOptionSelect(event, value) {
       this.focusedOptionIndex = value;

package/rating/rating.esm.min.js

@@ -1 +1 @@
-import n from"primevue/icons/ban";import e from"primevue/icons/star";import t from"primevue/icons/starfill";import{UniqueComponentId as a,DomHandler as o}from"primevue/utils";import i from"primevue/basecomponent";import{useStyle as c}from"primevue/usestyle";import{openBlock as l,createElementBlock as r,mergeProps as s,createElementVNode as u,renderSlot as d,normalizeClass as p,createBlock as f,resolveDynamicComponent as m,createCommentVNode as I,Fragment as h,renderList as g}from"vue";var v=c("\n.p-rating {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.p-rating-item {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n",{name:"rating",manual:!0}),y={name:"Rating",extends:{name:"BaseRating",extends:i,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},css:{classes:{root:function(n){var e=n.props;return["p-rating",{"p-readonly":e.readonly,"p-disabled":e.disabled}]},cancelItem:function(n){return["p-rating-item p-rating-cancel-item",{"p-focus":0===n.instance.focusedOptionIndex}]},cancelIcon:"p-rating-icon p-rating-cancel",item:function(n){var e=n.value;return["p-rating-item",{"p-rating-item-active":e<=n.props.modelValue,"p-focus":e===n.instance.focusedOptionIndex}]},onIcon:"p-rating-icon",offIcon:"p-rating-icon"},loadStyle:v.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1}},watch:{"$attrs.name":function(n){this.name=n||a()}},mounted:function(){this.name=this.name||a()},methods:{getPTOptions:function(n,e){return this.ptm(n,{context:{active:e<=this.modelValue,focused:e===this.focusedOptionIndex}})},onOptionClick:function(n,e){if(!this.readonly&&!this.disabled){this.onOptionSelect(n,e);var t=o.getFirstFocusableElement(n.currentTarget);t&&o.focus(t)}},onFocus:function(n,e){this.focusedOptionIndex=e,this.$emit("focus",n)},onBlur:function(n){this.focusedOptionIndex=-1,this.$emit("blur",n)},onChange:function(n,e){this.onOptionSelect(n,e)},onOptionSelect:function(n,e){this.focusedOptionIndex=e,this.updateModel(n,e||null)},updateModel:function(n,e){this.$emit("update:modelValue",e),this.$emit("change",{originalEvent:n,value:e})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(n){return 1===n?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,n)}},components:{StarFillIcon:t,StarIcon:e,BanIcon:n}},b=["data-p-focused"],x=["name","checked","disabled","readonly","aria-label"],O=["onClick","data-p-active","data-p-focused"],k=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];y.render=function(n,e,t,a,o,i){return l(),r("div",s({class:n.cx("root")},n.ptm("root"),{"data-pc-name":"rating"}),[n.cancel?(l(),r("div",s({key:0,class:n.cx("cancelItem"),onClick:e[3]||(e[3]=function(n){return i.onOptionClick(n,0)})},i.getPTOptions("cancelItem",0),{"data-p-focused":0===o.focusedOptionIndex}),[u("span",s({class:"p-hidden-accessible"},n.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[u("input",s({type:"radio",value:"0",name:o.name,checked:0===n.modelValue,disabled:n.disabled,readonly:n.readonly,"aria-label":i.cancelAriaLabel(),onFocus:e[0]||(e[0]=function(n){return i.onFocus(n,0)}),onBlur:e[1]||(e[1]=function(){return i.onBlur&&i.onBlur.apply(i,arguments)}),onChange:e[2]||(e[2]=function(n){return i.onChange(n,0)})},n.ptm("hiddenCancelInput")),null,16,x)],16),d(n.$slots,"cancelicon",{class:p(n.cx("cancelIcon"))},(function(){return[(l(),f(m(n.cancelIcon?"span":"BanIcon"),s({class:[n.cx("cancelIcon"),n.cancelIcon]},n.ptm("cancelIcon")),null,16,["class"]))]}))],16,b)):I("",!0),(l(!0),r(h,null,g(n.stars,(function(t){return l(),r("div",s({key:t,class:n.cx("item",{value:t}),onClick:function(n){return i.onOptionClick(n,t)}},i.getPTOptions("item",t),{"data-p-active":t<=n.modelValue,"data-p-focused":t===o.focusedOptionIndex}),[u("span",s({class:"p-hidden-accessible"},n.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[u("input",s({type:"radio",value:t,name:o.name,checked:n.modelValue===t,disabled:n.disabled,readonly:n.readonly,"aria-label":i.starAriaLabel(t),onFocus:function(n){return i.onFocus(n,t)},onBlur:e[4]||(e[4]=function(){return i.onBlur&&i.onBlur.apply(i,arguments)}),onChange:function(n){return i.onChange(n,t)}},n.ptm("hiddenItemInput")),null,16,k)],16),t<=n.modelValue?d(n.$slots,"onicon",{key:0,value:t,class:p(n.cx("onIcon"))},(function(){return[(l(),f(m(n.onIcon?"span":"StarFillIcon"),s({class:[n.cx("onIcon"),n.onIcon]},n.ptm("onIcon")),null,16,["class"]))]})):d(n.$slots,"officon",{key:1,value:t,class:p(n.cx("offIcon"))},(function(){return[(l(),f(m(n.offIcon?"span":"StarIcon"),s({class:[n.cx("offIcon"),n.offIcon]},n.ptm("offIcon")),null,16,["class"]))]}))],16,O)})),128))],16)};export{y as default};
+import n from"primevue/icons/ban";import e from"primevue/icons/star";import t from"primevue/icons/starfill";import{UniqueComponentId as a,DomHandler as o}from"primevue/utils";import i from"primevue/basecomponent";import{useStyle as c}from"primevue/usestyle";import{openBlock as l,createElementBlock as s,mergeProps as r,createElementVNode as u,renderSlot as d,normalizeClass as p,createBlock as m,resolveDynamicComponent as f,createCommentVNode as I,Fragment as h,renderList as g}from"vue";var v=c("\n@layer primevue {\n    .p-rating {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-rating-item {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .p-rating.p-readonly .p-rating-item {\n        cursor: default;\n    }\n}\n",{name:"rating",manual:!0}),b={name:"Rating",extends:{name:"BaseRating",extends:i,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},css:{classes:{root:function(n){var e=n.props;return["p-rating",{"p-readonly":e.readonly,"p-disabled":e.disabled}]},cancelItem:function(n){var e=n.instance;return["p-rating-item p-rating-cancel-item",{"p-focus":0===e.focusedOptionIndex&&e.isFocusVisibleItem}]},cancelIcon:"p-rating-icon p-rating-cancel",item:function(n){var e=n.instance,t=n.value;return["p-rating-item",{"p-rating-item-active":t<=n.props.modelValue,"p-focus":t===e.focusedOptionIndex&&e.isFocusVisibleItem}]},onIcon:"p-rating-icon",offIcon:"p-rating-icon"},loadStyle:v.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1,isFocusVisibleItem:!0}},watch:{"$attrs.name":function(n){this.name=n||a()}},mounted:function(){this.name=this.name||a()},methods:{getPTOptions:function(n,e){return this.ptm(n,{context:{active:e<=this.modelValue,focused:e===this.focusedOptionIndex}})},onOptionClick:function(n,e){if(!this.readonly&&!this.disabled){this.onOptionSelect(n,e),this.isFocusVisibleItem=!1;var t=o.getFirstFocusableElement(n.currentTarget);t&&o.focus(t)}},onFocus:function(n,e){this.focusedOptionIndex=e,this.$emit("focus",n)},onBlur:function(n){this.focusedOptionIndex=-1,this.$emit("blur",n)},onChange:function(n,e){this.onOptionSelect(n,e),this.isFocusVisibleItem=!0},onOptionSelect:function(n,e){this.focusedOptionIndex=e,this.updateModel(n,e||null)},updateModel:function(n,e){this.$emit("update:modelValue",e),this.$emit("change",{originalEvent:n,value:e})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(n){return 1===n?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,n)}},components:{StarFillIcon:t,StarIcon:e,BanIcon:n}},y=["data-p-focused"],x=["name","checked","disabled","readonly","aria-label"],O=["onClick","data-p-active","data-p-focused"],F=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];b.render=function(n,e,t,a,o,i){return l(),s("div",r({class:n.cx("root")},n.ptm("root"),{"data-pc-name":"rating"}),[n.cancel?(l(),s("div",r({key:0,class:n.cx("cancelItem"),onClick:e[3]||(e[3]=function(n){return i.onOptionClick(n,0)})},i.getPTOptions("cancelItem",0),{"data-p-focused":0===o.focusedOptionIndex}),[u("span",r({class:"p-hidden-accessible"},n.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[u("input",r({type:"radio",value:"0",name:o.name,checked:0===n.modelValue,disabled:n.disabled,readonly:n.readonly,"aria-label":i.cancelAriaLabel(),onFocus:e[0]||(e[0]=function(n){return i.onFocus(n,0)}),onBlur:e[1]||(e[1]=function(){return i.onBlur&&i.onBlur.apply(i,arguments)}),onChange:e[2]||(e[2]=function(n){return i.onChange(n,0)})},n.ptm("hiddenCancelInput")),null,16,x)],16),d(n.$slots,"cancelicon",{class:p(n.cx("cancelIcon"))},(function(){return[(l(),m(f(n.cancelIcon?"span":"BanIcon"),r({class:[n.cx("cancelIcon"),n.cancelIcon]},n.ptm("cancelIcon")),null,16,["class"]))]}))],16,y)):I("",!0),(l(!0),s(h,null,g(n.stars,(function(t){return l(),s("div",r({key:t,class:n.cx("item",{value:t}),onClick:function(n){return i.onOptionClick(n,t)}},i.getPTOptions("item",t),{"data-p-active":t<=n.modelValue,"data-p-focused":t===o.focusedOptionIndex}),[u("span",r({class:"p-hidden-accessible"},n.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[u("input",r({type:"radio",value:t,name:o.name,checked:n.modelValue===t,disabled:n.disabled,readonly:n.readonly,"aria-label":i.starAriaLabel(t),onFocus:function(n){return i.onFocus(n,t)},onBlur:e[4]||(e[4]=function(){return i.onBlur&&i.onBlur.apply(i,arguments)}),onChange:function(n){return i.onChange(n,t)}},n.ptm("hiddenItemInput")),null,16,F)],16),t<=n.modelValue?d(n.$slots,"onicon",{key:0,value:t,class:p(n.cx("onIcon"))},(function(){return[(l(),m(f(n.onIcon?"span":"StarFillIcon"),r({class:[n.cx("onIcon"),n.onIcon]},n.ptm("onIcon")),null,16,["class"]))]})):d(n.$slots,"officon",{key:1,value:t,class:p(n.cx("offIcon"))},(function(){return[(l(),m(f(n.offIcon?"span":"StarIcon"),r({class:[n.cx("offIcon"),n.offIcon]},n.ptm("offIcon")),null,16,["class"]))]}))],16,O)})),128))],16)};export{b as default};

package/rating/rating.js

@@ -9,7 +9,7 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
     var StarFillIcon__default = /*#__PURE__*/_interopDefaultLegacy(StarFillIcon);
     var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    var styles = "\n.p-rating {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.p-rating-item {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n";
+    var styles = "\n@layer primevue {\n    .p-rating {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-rating-item {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .p-rating.p-readonly .p-rating-item {\n        cursor: default;\n    }\n}\n";
     var classes = {
       root: function root(_ref) {
         var props = _ref.props;
@@ -21,7 +21,7 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
       cancelItem: function cancelItem(_ref2) {
         var instance = _ref2.instance;
         return ['p-rating-item p-rating-cancel-item', {
-          'p-focus': instance.focusedOptionIndex === 0
+          'p-focus': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
         }];
       },
       cancelIcon: 'p-rating-icon p-rating-cancel',
@@ -31,7 +31,7 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
           value = _ref3.value;
         return ['p-rating-item', {
           'p-rating-item-active': value <= props.modelValue,
-          'p-focus': value === instance.focusedOptionIndex
+          'p-focus': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
         }];
       },
       onIcon: 'p-rating-icon',
@@ -42,7 +42,6 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
         manual: true
       }),
       loadStyle = _useStyle.load;
-      _useStyle.unload;
     var script$1 = {
       name: 'BaseRating',
       "extends": BaseComponent__default["default"],
@@ -98,7 +97,8 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
       data: function data() {
         return {
           name: this.$attrs.name,
-          focusedOptionIndex: -1
+          focusedOptionIndex: -1,
+          isFocusVisibleItem: true
         };
       },
       watch: {
@@ -121,6 +121,7 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
         onOptionClick: function onOptionClick(event, value) {
           if (!this.readonly && !this.disabled) {
             this.onOptionSelect(event, value);
+            this.isFocusVisibleItem = false;
             var firstFocusableEl = utils.DomHandler.getFirstFocusableElement(event.currentTarget);
             firstFocusableEl && utils.DomHandler.focus(firstFocusableEl);
           }
@@ -135,6 +136,7 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
         },
         onChange: function onChange(event, value) {
           this.onOptionSelect(event, value);
+          this.isFocusVisibleItem = true;
         },
         onOptionSelect: function onOptionSelect(event, value) {
           this.focusedOptionIndex = value;

package/rating/rating.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.rating=function(e,n,t,o,a,c,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e),s=i(n),u=i(t),d=i(a),p=c.useStyle("\n.p-rating {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.p-rating-item {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n",{name:"rating",manual:!0}),m={name:"Rating",extends:{name:"BaseRating",extends:d.default,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},css:{classes:{root:function(e){var n=e.props;return["p-rating",{"p-readonly":n.readonly,"p-disabled":n.disabled}]},cancelItem:function(e){return["p-rating-item p-rating-cancel-item",{"p-focus":0===e.instance.focusedOptionIndex}]},cancelIcon:"p-rating-icon p-rating-cancel",item:function(e){var n=e.value;return["p-rating-item",{"p-rating-item-active":n<=e.props.modelValue,"p-focus":n===e.instance.focusedOptionIndex}]},onIcon:"p-rating-icon",offIcon:"p-rating-icon"},loadStyle:p.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1}},watch:{"$attrs.name":function(e){this.name=e||o.UniqueComponentId()}},mounted:function(){this.name=this.name||o.UniqueComponentId()},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n);var t=o.DomHandler.getFirstFocusableElement(e.currentTarget);t&&o.DomHandler.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n)},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:u.default,StarIcon:s.default,BanIcon:r.default}},f=["data-p-focused"],g=["name","checked","disabled","readonly","aria-label"],h=["onClick","data-p-active","data-p-focused"],I=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];return m.render=function(e,n,t,o,a,c){return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"rating"}),[e.cancel?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,g)],16),l.renderSlot(e.$slots,"cancelicon",{class:l.normalizeClass(e.cx("cancelIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.cancelIcon?"span":"BanIcon"),l.mergeProps({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,f)):l.createCommentVNode("",!0),(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.stars,(function(t){return l.openBlock(),l.createElementBlock("div",l.mergeProps({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,I)],16),t<=e.modelValue?l.renderSlot(e.$slots,"onicon",{key:0,value:t,class:l.normalizeClass(e.cx("onIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.onIcon?"span":"StarFillIcon"),l.mergeProps({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):l.renderSlot(e.$slots,"officon",{key:1,value:t,class:l.normalizeClass(e.cx("offIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.offIcon?"span":"StarIcon"),l.mergeProps({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,h)})),128))],16)},m}(primevue.icons.ban,primevue.icons.star,primevue.icons.starfill,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);
+this.primevue=this.primevue||{},this.primevue.rating=function(e,n,t,o,a,c,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(e),s=l(n),u=l(t),d=l(a),p=c.useStyle("\n@layer primevue {\n    .p-rating {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-rating-item {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .p-rating.p-readonly .p-rating-item {\n        cursor: default;\n    }\n}\n",{name:"rating",manual:!0}),m={name:"Rating",extends:{name:"BaseRating",extends:d.default,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},css:{classes:{root:function(e){var n=e.props;return["p-rating",{"p-readonly":n.readonly,"p-disabled":n.disabled}]},cancelItem:function(e){var n=e.instance;return["p-rating-item p-rating-cancel-item",{"p-focus":0===n.focusedOptionIndex&&n.isFocusVisibleItem}]},cancelIcon:"p-rating-icon p-rating-cancel",item:function(e){var n=e.instance,t=e.value;return["p-rating-item",{"p-rating-item-active":t<=e.props.modelValue,"p-focus":t===n.focusedOptionIndex&&n.isFocusVisibleItem}]},onIcon:"p-rating-icon",offIcon:"p-rating-icon"},loadStyle:p.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1,isFocusVisibleItem:!0}},watch:{"$attrs.name":function(e){this.name=e||o.UniqueComponentId()}},mounted:function(){this.name=this.name||o.UniqueComponentId()},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n),this.isFocusVisibleItem=!1;var t=o.DomHandler.getFirstFocusableElement(e.currentTarget);t&&o.DomHandler.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n),this.isFocusVisibleItem=!0},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:u.default,StarIcon:s.default,BanIcon:r.default}},f=["data-p-focused"],I=["name","checked","disabled","readonly","aria-label"],g=["onClick","data-p-active","data-p-focused"],h=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];return m.render=function(e,n,t,o,a,c){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"rating"}),[e.cancel?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[i.createElementVNode("span",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[i.createElementVNode("input",i.mergeProps({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,I)],16),i.renderSlot(e.$slots,"cancelicon",{class:i.normalizeClass(e.cx("cancelIcon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.cancelIcon?"span":"BanIcon"),i.mergeProps({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,f)):i.createCommentVNode("",!0),(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.stars,(function(t){return i.openBlock(),i.createElementBlock("div",i.mergeProps({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[i.createElementVNode("span",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[i.createElementVNode("input",i.mergeProps({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,h)],16),t<=e.modelValue?i.renderSlot(e.$slots,"onicon",{key:0,value:t,class:i.normalizeClass(e.cx("onIcon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.onIcon?"span":"StarFillIcon"),i.mergeProps({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):i.renderSlot(e.$slots,"officon",{key:1,value:t,class:i.normalizeClass(e.cx("offIcon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.offIcon?"span":"StarIcon"),i.mergeProps({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,g)})),128))],16)},m}(primevue.icons.ban,primevue.icons.star,primevue.icons.starfill,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);