primevue 3.16.2 → 3.18.0

package/rating/rating.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var utils = require('primevue/utils');
 var vue = require('vue');
 
 var script = {
@@ -10,15 +11,11 @@ var script = {
             type: Number,
             default: null
         },
-        name: {
-            type: String,
-            default: null
-        },
-		disabled: {
+        disabled: {
             type: Boolean,
             default: false
         },
-		readonly: {
+        readonly: {
             type: Boolean,
             default: false
         },
@@ -29,62 +26,58 @@ var script = {
         cancel: {
             type: Boolean,
             default: true
+        },
+        onIcon: {
+            type: String,
+            default: 'pi pi-star-fill'
+        },
+        offIcon: {
+            type: String,
+            default: 'pi pi-star'
+        },
+        cancelIcon: {
+            type: String,
+            default: 'pi pi-ban'
         }
     },
     data() {
         return {
-            focusIndex: null
+            focusedOptionIndex: -1
         };
     },
     methods: {
-        onStarClick(event, value) {
+        onOptionClick(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.onOptionSelect(event, value);
+                const firstFocusableEl = utils.DomHandler.getFirstFocusableElement(event.currentTarget);
 
-                this.$emit('focus', event);
+                firstFocusableEl && utils.DomHandler.focus(firstFocusableEl);
             }
         },
+        onFocus(event, value) {
+            this.focusedOptionIndex = value;
+            this.$emit('focus', event);
+        },
         onBlur(event) {
+            this.focusedOptionIndex = -1;
             this.$emit('blur', event);
         },
-        onCancelClick(event) {
-            if (!this.readonly && !this.disabled) {
-                this.updateModel(event, null);
-            }
+        onChange(event, value) {
+            this.onOptionSelect(event, value);
+        },
+        onOptionSelect(event, value) {
+            this.focusedOptionIndex = value;
+            this.updateModel(event, value || null);
         },
         updateModel(event, value) {
             this.$emit('update:modelValue', value);
-            this.$emit('change', {
-                originalEvent: event,
-                value: value
-            });
+            this.$emit('change', { originalEvent: event, value });
         },
-        ariaLabelTemplate(index) {
-            return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
+        cancelAriaLabel() {
+            return this.$primevue.config.locale.clear;
+        },
+        starAriaLabel(value) {
+            return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
         }
     },
     computed: {
@@ -96,68 +89,96 @@ var script = {
                     'p-disabled': this.disabled
                 }
             ];
+        },
+        cancelIconClass() {
+            return ['p-rating-icon p-rating-cancel', this.cancelIcon];
+        },
+        onIconClass() {
+            return ['p-rating-icon', this.onIcon];
+        },
+        offIconClass() {
+            return ['p-rating-icon', this.offIcon];
+        },
+        name() {
+            return this.$attrs.name || utils.UniqueComponentId();
         }
     }
 };
 
-const _hoisted_1 = {
-  key: 0,
-  class: "p-hidden-accessible"
-};
+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", "onKeydown"];
+const _hoisted_5 = ["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)
   }, [
     ($props.cancel)
-      ? (vue.openBlock(), vue.createElementBlock("span", {
+      ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          class: vue.normalizeClass(['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': $data.focusIndex === 0}]),
-          onClick: _cache[3] || (_cache[3] = (...args) => ($options.onCancelClick && $options.onCancelClick(...args))),
-          onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
+          class: vue.normalizeClass(['p-rating-item p-rating-cancel-item', { 'p-focus': $data.focusedOptionIndex === 0 }]),
+          onClick: _cache[3] || (_cache[3] = $event => ($options.onOptionClick($event, 0)))
         }, [
-          ($props.cancel)
-            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
-                vue.createElementVNode("input", {
-                  type: "radio",
-                  value: "0",
-                  name: $props.name,
-                  checked: $props.modelValue === 0,
-                  disabled: $props.disabled,
-                  readonly: $props.readonly,
-                  "aria-label": _ctx.$primevue.config.locale.clear,
-                  onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event, 0))),
-                  onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-                  onKeydown: _cache[2] || (_cache[2] = $event => ($options.onKeyDown($event, 0)))
-                }, null, 40, _hoisted_2)
-              ]))
-            : vue.createCommentVNode("", true)
-        ], 34))
+          vue.createElementVNode("span", _hoisted_1, [
+            vue.createElementVNode("input", {
+              type: "radio",
+              value: "0",
+              name: $options.name,
+              checked: $props.modelValue === 0,
+              disabled: $props.disabled,
+              readonly: $props.readonly,
+              "aria-label": $options.cancelAriaLabel(),
+              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)
+          ]),
+          vue.renderSlot(_ctx.$slots, "cancelicon", {}, () => [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass($options.cancelIconClass)
+            }, null, 2)
+          ])
+        ], 2))
       : vue.createCommentVNode("", true),
-    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.stars, (i) => {
-      return (vue.openBlock(), vue.createElementBlock("span", {
-        key: i,
-        class: vue.normalizeClass(['p-rating-icon', {'pi pi-star': (i > $props.modelValue), 'pi pi-star-fill': (i <= $props.modelValue), 'p-focus': i === $data.focusIndex}]),
-        onClick: $event => ($options.onStarClick($event,i))
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.stars, (value) => {
+      return (vue.openBlock(), vue.createElementBlock("div", {
+        key: value,
+        class: vue.normalizeClass(['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", {
             type: "radio",
-            value: i,
-            name: $props.name,
-            checked: $props.modelValue === i,
+            value: value,
+            name: $options.name,
+            checked: $props.modelValue === value,
             disabled: $props.disabled,
             readonly: $props.readonly,
-            "aria-label": $options.ariaLabelTemplate(i),
-            onFocus: $event => ($options.onFocus($event, i)),
-            onBlur: _cache[5] || (_cache[5] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-            onKeydown: $event => ($options.onKeyDown($event,i))
+            "aria-label": $options.starAriaLabel(value),
+            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)
-        ])
+        ]),
+        (value <= $props.modelValue)
+          ? vue.renderSlot(_ctx.$slots, "onicon", {
+              key: 0,
+              value: value
+            }, () => [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass($options.onIconClass)
+              }, null, 2)
+            ])
+          : vue.renderSlot(_ctx.$slots, "officon", {
+              key: 1,
+              value: value
+            }, () => [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass($options.offIconClass)
+              }, null, 2)
+            ])
       ], 10, _hoisted_3))
     }), 128))
   ], 2))
@@ -190,7 +211,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-rating-icon {\n    cursor: pointer;\n}\n.p-rating.p-rating-readonly .p-rating-icon {\n    cursor: default;\n}\n.p-rating:not(.p-disabled) .p-rating-icon.p-focus {\n    outline: 0 none;\n    outline-offset: 0;\n    -webkit-box-shadow: 0 0 0 0.2rem #BFDBFE;\n            box-shadow: 0 0 0 0.2rem #BFDBFE;\n    border-color: #3B82F6;\n}\n";
+var css_248z = "\n.p-rating {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-rating-item {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n}\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/rating/rating.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"Rating",emits:["update:modelValue","change","focus","blur"],props:{modelValue:{type:Number,default:null},name:{type:String,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0}},data:()=>({focusIndex:null}),methods:{onStarClick(e,n){this.readonly||this.disabled||(this.updateModel(e,n),this.focusIndex=n)},onKeyDown(e,n){"Space"===e.code&&this.updateModel(e,n),"Tab"===e.code&&(this.focusIndex=null)},onFocus(e,n){this.readonly||(null===this.modelValue&&null===this.focusIndex?this.cancel?this.focusIndex=0:this.focusIndex=1:null!==this.modelValue&&null===this.focusIndex?(this.focusIndex=this.modelValue,this.updateModel(e,this.modelValue)):(this.focusIndex=n,this.updateModel(e,n)),this.$emit("focus",e))},onBlur(e){this.$emit("blur",e)},onCancelClick(e){this.readonly||this.disabled||this.updateModel(e,null)},updateModel(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},ariaLabelTemplate(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},computed:{containerClass(){return["p-rating",{"p-readonly":this.readonly,"p-disabled":this.disabled}]}}};const l={key:0,class:"p-hidden-accessible"},a=["name","checked","disabled","readonly","aria-label"],o=["onClick"],t={class:"p-hidden-accessible"},i=["value","name","checked","disabled","readonly","aria-label","onFocus","onKeydown"];!function(e,n){void 0===n&&(n={});var l=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===l&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-rating-icon {\n    cursor: pointer;\n}\n.p-rating.p-rating-readonly .p-rating-icon {\n    cursor: default;\n}\n.p-rating:not(.p-disabled) .p-rating-icon.p-focus {\n    outline: 0 none;\n    outline-offset: 0;\n    -webkit-box-shadow: 0 0 0 0.2rem #BFDBFE;\n            box-shadow: 0 0 0 0.2rem #BFDBFE;\n    border-color: #3B82F6;\n}\n"),n.render=function(n,d,s,c,r,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(u.containerClass)},[s.cancel?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["p-rating-icon p-rating-cancel pi pi-ban",{"p-focus":0===r.focusIndex}]),onClick:d[3]||(d[3]=(...e)=>u.onCancelClick&&u.onCancelClick(...e)),onKeydown:d[4]||(d[4]=(...e)=>u.onKeyDown&&u.onKeyDown(...e))},[s.cancel?(e.openBlock(),e.createElementBlock("span",l,[e.createElementVNode("input",{type:"radio",value:"0",name:s.name,checked:0===s.modelValue,disabled:s.disabled,readonly:s.readonly,"aria-label":n.$primevue.config.locale.clear,onFocus:d[0]||(d[0]=e=>u.onFocus(e,0)),onBlur:d[1]||(d[1]=(...e)=>u.onBlur&&u.onBlur(...e)),onKeydown:d[2]||(d[2]=e=>u.onKeyDown(e,0))},null,40,a)])):e.createCommentVNode("",!0)],34)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.stars,(n=>(e.openBlock(),e.createElementBlock("span",{key:n,class:e.normalizeClass(["p-rating-icon",{"pi pi-star":n>s.modelValue,"pi pi-star-fill":n<=s.modelValue,"p-focus":n===r.focusIndex}]),onClick:e=>u.onStarClick(e,n)},[e.createElementVNode("span",t,[e.createElementVNode("input",{type:"radio",value:n,name:s.name,checked:s.modelValue===n,disabled:s.disabled,readonly:s.readonly,"aria-label":u.ariaLabelTemplate(n),onFocus:e=>u.onFocus(e,n),onBlur:d[5]||(d[5]=(...e)=>u.onBlur&&u.onBlur(...e)),onKeydown:e=>u.onKeyDown(e,n)},null,40,i)])],10,o)))),128))],2)},module.exports=n;
+"use strict";var e=require("primevue/utils"),n=require("vue"),a={name:"Rating",emits:["update:modelValue","change","focus","blur"],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:"pi pi-star-fill"},offIcon:{type:String,default:"pi pi-star"},cancelIcon:{type:String,default:"pi pi-ban"}},data:()=>({focusedOptionIndex:-1}),methods:{onOptionClick(n,a){if(!this.readonly&&!this.disabled){this.onOptionSelect(n,a);const l=e.DomHandler.getFirstFocusableElement(n.currentTarget);l&&e.DomHandler.focus(l)}},onFocus(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange(e,n){this.onOptionSelect(e,n)},onOptionSelect(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel(){return this.$primevue.config.locale.clear},starAriaLabel(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},computed:{containerClass(){return["p-rating",{"p-readonly":this.readonly,"p-disabled":this.disabled}]},cancelIconClass(){return["p-rating-icon p-rating-cancel",this.cancelIcon]},onIconClass(){return["p-rating-icon",this.onIcon]},offIconClass(){return["p-rating-icon",this.offIcon]},name(){return this.$attrs.name||e.UniqueComponentId()}}};const l={class:"p-hidden-accessible"},t=["name","checked","disabled","readonly","aria-label"],o=["onClick"],i={class:"p-hidden-accessible"},s=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];!function(e,n){void 0===n&&(n={});var a=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===a&&l.firstChild?l.insertBefore(t,l.firstChild):l.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}("\n.p-rating {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-rating-item {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n}\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n"),a.render=function(e,a,r,c,d,u){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(u.containerClass)},[r.cancel?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["p-rating-item p-rating-cancel-item",{"p-focus":0===d.focusedOptionIndex}]),onClick:a[3]||(a[3]=e=>u.onOptionClick(e,0))},[n.createElementVNode("span",l,[n.createElementVNode("input",{type:"radio",value:"0",name:u.name,checked:0===r.modelValue,disabled:r.disabled,readonly:r.readonly,"aria-label":u.cancelAriaLabel(),onFocus:a[0]||(a[0]=e=>u.onFocus(e,0)),onBlur:a[1]||(a[1]=(...e)=>u.onBlur&&u.onBlur(...e)),onChange:a[2]||(a[2]=e=>u.onChange(e,0))},null,40,t)]),n.renderSlot(e.$slots,"cancelicon",{},(()=>[n.createElementVNode("span",{class:n.normalizeClass(u.cancelIconClass)},null,2)]))],2)):n.createCommentVNode("",!0),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(r.stars,(l=>(n.openBlock(),n.createElementBlock("div",{key:l,class:n.normalizeClass(["p-rating-item",{"p-rating-item-active":l<=r.modelValue,"p-focus":l===d.focusedOptionIndex}]),onClick:e=>u.onOptionClick(e,l)},[n.createElementVNode("span",i,[n.createElementVNode("input",{type:"radio",value:l,name:u.name,checked:r.modelValue===l,disabled:r.disabled,readonly:r.readonly,"aria-label":u.starAriaLabel(l),onFocus:e=>u.onFocus(e,l),onBlur:a[4]||(a[4]=(...e)=>u.onBlur&&u.onBlur(...e)),onChange:e=>u.onChange(e,l)},null,40,s)]),l<=r.modelValue?n.renderSlot(e.$slots,"onicon",{key:0,value:l},(()=>[n.createElementVNode("span",{class:n.normalizeClass(u.onIconClass)},null,2)])):n.renderSlot(e.$slots,"officon",{key:1,value:l},(()=>[n.createElementVNode("span",{class:n.normalizeClass(u.offIconClass)},null,2)]))],10,o)))),128))],2)},module.exports=a;

package/rating/rating.esm.js

@@ -1,4 +1,5 @@
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, renderList } from 'vue';
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, Fragment, renderList } from 'vue';
 
 var script = {
     name: 'Rating',
@@ -8,15 +9,11 @@ var script = {
             type: Number,
             default: null
         },
-        name: {
-            type: String,
-            default: null
-        },
-		disabled: {
+        disabled: {
             type: Boolean,
             default: false
         },
-		readonly: {
+        readonly: {
             type: Boolean,
             default: false
         },
@@ -27,62 +24,58 @@ var script = {
         cancel: {
             type: Boolean,
             default: true
+        },
+        onIcon: {
+            type: String,
+            default: 'pi pi-star-fill'
+        },
+        offIcon: {
+            type: String,
+            default: 'pi pi-star'
+        },
+        cancelIcon: {
+            type: String,
+            default: 'pi pi-ban'
         }
     },
     data() {
         return {
-            focusIndex: null
+            focusedOptionIndex: -1
         };
     },
     methods: {
-        onStarClick(event, value) {
+        onOptionClick(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.onOptionSelect(event, value);
+                const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
 
-                this.$emit('focus', event);
+                firstFocusableEl && DomHandler.focus(firstFocusableEl);
             }
         },
+        onFocus(event, value) {
+            this.focusedOptionIndex = value;
+            this.$emit('focus', event);
+        },
         onBlur(event) {
+            this.focusedOptionIndex = -1;
             this.$emit('blur', event);
         },
-        onCancelClick(event) {
-            if (!this.readonly && !this.disabled) {
-                this.updateModel(event, null);
-            }
+        onChange(event, value) {
+            this.onOptionSelect(event, value);
+        },
+        onOptionSelect(event, value) {
+            this.focusedOptionIndex = value;
+            this.updateModel(event, value || null);
         },
         updateModel(event, value) {
             this.$emit('update:modelValue', value);
-            this.$emit('change', {
-                originalEvent: event,
-                value: value
-            });
+            this.$emit('change', { originalEvent: event, value });
         },
-        ariaLabelTemplate(index) {
-            return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
+        cancelAriaLabel() {
+            return this.$primevue.config.locale.clear;
+        },
+        starAriaLabel(value) {
+            return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
         }
     },
     computed: {
@@ -94,68 +87,96 @@ var script = {
                     'p-disabled': this.disabled
                 }
             ];
+        },
+        cancelIconClass() {
+            return ['p-rating-icon p-rating-cancel', this.cancelIcon];
+        },
+        onIconClass() {
+            return ['p-rating-icon', this.onIcon];
+        },
+        offIconClass() {
+            return ['p-rating-icon', this.offIcon];
+        },
+        name() {
+            return this.$attrs.name || UniqueComponentId();
         }
     }
 };
 
-const _hoisted_1 = {
-  key: 0,
-  class: "p-hidden-accessible"
-};
+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", "onKeydown"];
+const _hoisted_5 = ["value", "name", "checked", "disabled", "readonly", "aria-label", "onFocus", "onChange"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass($options.containerClass)
   }, [
     ($props.cancel)
-      ? (openBlock(), createElementBlock("span", {
+      ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass(['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': $data.focusIndex === 0}]),
-          onClick: _cache[3] || (_cache[3] = (...args) => ($options.onCancelClick && $options.onCancelClick(...args))),
-          onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
+          class: normalizeClass(['p-rating-item p-rating-cancel-item', { 'p-focus': $data.focusedOptionIndex === 0 }]),
+          onClick: _cache[3] || (_cache[3] = $event => ($options.onOptionClick($event, 0)))
         }, [
-          ($props.cancel)
-            ? (openBlock(), createElementBlock("span", _hoisted_1, [
-                createElementVNode("input", {
-                  type: "radio",
-                  value: "0",
-                  name: $props.name,
-                  checked: $props.modelValue === 0,
-                  disabled: $props.disabled,
-                  readonly: $props.readonly,
-                  "aria-label": _ctx.$primevue.config.locale.clear,
-                  onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event, 0))),
-                  onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-                  onKeydown: _cache[2] || (_cache[2] = $event => ($options.onKeyDown($event, 0)))
-                }, null, 40, _hoisted_2)
-              ]))
-            : createCommentVNode("", true)
-        ], 34))
+          createElementVNode("span", _hoisted_1, [
+            createElementVNode("input", {
+              type: "radio",
+              value: "0",
+              name: $options.name,
+              checked: $props.modelValue === 0,
+              disabled: $props.disabled,
+              readonly: $props.readonly,
+              "aria-label": $options.cancelAriaLabel(),
+              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)
+          ]),
+          renderSlot(_ctx.$slots, "cancelicon", {}, () => [
+            createElementVNode("span", {
+              class: normalizeClass($options.cancelIconClass)
+            }, null, 2)
+          ])
+        ], 2))
       : createCommentVNode("", true),
-    (openBlock(true), createElementBlock(Fragment, null, renderList($props.stars, (i) => {
-      return (openBlock(), createElementBlock("span", {
-        key: i,
-        class: normalizeClass(['p-rating-icon', {'pi pi-star': (i > $props.modelValue), 'pi pi-star-fill': (i <= $props.modelValue), 'p-focus': i === $data.focusIndex}]),
-        onClick: $event => ($options.onStarClick($event,i))
+    (openBlock(true), createElementBlock(Fragment, null, renderList($props.stars, (value) => {
+      return (openBlock(), createElementBlock("div", {
+        key: value,
+        class: normalizeClass(['p-rating-item', { 'p-rating-item-active': value <= $props.modelValue, 'p-focus': value === $data.focusedOptionIndex }]),
+        onClick: $event => ($options.onOptionClick($event, value))
       }, [
         createElementVNode("span", _hoisted_4, [
           createElementVNode("input", {
             type: "radio",
-            value: i,
-            name: $props.name,
-            checked: $props.modelValue === i,
+            value: value,
+            name: $options.name,
+            checked: $props.modelValue === value,
             disabled: $props.disabled,
             readonly: $props.readonly,
-            "aria-label": $options.ariaLabelTemplate(i),
-            onFocus: $event => ($options.onFocus($event, i)),
-            onBlur: _cache[5] || (_cache[5] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-            onKeydown: $event => ($options.onKeyDown($event,i))
+            "aria-label": $options.starAriaLabel(value),
+            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)
-        ])
+        ]),
+        (value <= $props.modelValue)
+          ? renderSlot(_ctx.$slots, "onicon", {
+              key: 0,
+              value: value
+            }, () => [
+              createElementVNode("span", {
+                class: normalizeClass($options.onIconClass)
+              }, null, 2)
+            ])
+          : renderSlot(_ctx.$slots, "officon", {
+              key: 1,
+              value: value
+            }, () => [
+              createElementVNode("span", {
+                class: normalizeClass($options.offIconClass)
+              }, null, 2)
+            ])
       ], 10, _hoisted_3))
     }), 128))
   ], 2))
@@ -188,7 +209,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-rating-icon {\n    cursor: pointer;\n}\n.p-rating.p-rating-readonly .p-rating-icon {\n    cursor: default;\n}\n.p-rating:not(.p-disabled) .p-rating-icon.p-focus {\n    outline: 0 none;\n    outline-offset: 0;\n    -webkit-box-shadow: 0 0 0 0.2rem #BFDBFE;\n            box-shadow: 0 0 0 0.2rem #BFDBFE;\n    border-color: #3B82F6;\n}\n";
+var css_248z = "\n.p-rating {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-rating-item {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n}\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/rating/rating.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as n,normalizeClass as a,createElementVNode as l,createCommentVNode as o,Fragment as t,renderList as i}from"vue";var d={name:"Rating",emits:["update:modelValue","change","focus","blur"],props:{modelValue:{type:Number,default:null},name:{type:String,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0}},data:()=>({focusIndex:null}),methods:{onStarClick(e,n){this.readonly||this.disabled||(this.updateModel(e,n),this.focusIndex=n)},onKeyDown(e,n){"Space"===e.code&&this.updateModel(e,n),"Tab"===e.code&&(this.focusIndex=null)},onFocus(e,n){this.readonly||(null===this.modelValue&&null===this.focusIndex?this.cancel?this.focusIndex=0:this.focusIndex=1:null!==this.modelValue&&null===this.focusIndex?(this.focusIndex=this.modelValue,this.updateModel(e,this.modelValue)):(this.focusIndex=n,this.updateModel(e,n)),this.$emit("focus",e))},onBlur(e){this.$emit("blur",e)},onCancelClick(e){this.readonly||this.disabled||this.updateModel(e,null)},updateModel(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},ariaLabelTemplate(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},computed:{containerClass(){return["p-rating",{"p-readonly":this.readonly,"p-disabled":this.disabled}]}}};const s={key:0,class:"p-hidden-accessible"},u=["name","checked","disabled","readonly","aria-label"],c=["onClick"],r={class:"p-hidden-accessible"},p=["value","name","checked","disabled","readonly","aria-label","onFocus","onKeydown"];!function(e,n){void 0===n&&(n={});var a=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===a&&l.firstChild?l.insertBefore(o,l.firstChild):l.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-rating-icon {\n    cursor: pointer;\n}\n.p-rating.p-rating-readonly .p-rating-icon {\n    cursor: default;\n}\n.p-rating:not(.p-disabled) .p-rating-icon.p-focus {\n    outline: 0 none;\n    outline-offset: 0;\n    -webkit-box-shadow: 0 0 0 0.2rem #BFDBFE;\n            box-shadow: 0 0 0 0.2rem #BFDBFE;\n    border-color: #3B82F6;\n}\n"),d.render=function(d,h,m,f,y,b){return e(),n("div",{class:a(b.containerClass)},[m.cancel?(e(),n("span",{key:0,class:a(["p-rating-icon p-rating-cancel pi pi-ban",{"p-focus":0===y.focusIndex}]),onClick:h[3]||(h[3]=(...e)=>b.onCancelClick&&b.onCancelClick(...e)),onKeydown:h[4]||(h[4]=(...e)=>b.onKeyDown&&b.onKeyDown(...e))},[m.cancel?(e(),n("span",s,[l("input",{type:"radio",value:"0",name:m.name,checked:0===m.modelValue,disabled:m.disabled,readonly:m.readonly,"aria-label":d.$primevue.config.locale.clear,onFocus:h[0]||(h[0]=e=>b.onFocus(e,0)),onBlur:h[1]||(h[1]=(...e)=>b.onBlur&&b.onBlur(...e)),onKeydown:h[2]||(h[2]=e=>b.onKeyDown(e,0))},null,40,u)])):o("",!0)],34)):o("",!0),(e(!0),n(t,null,i(m.stars,(o=>(e(),n("span",{key:o,class:a(["p-rating-icon",{"pi pi-star":o>m.modelValue,"pi pi-star-fill":o<=m.modelValue,"p-focus":o===y.focusIndex}]),onClick:e=>b.onStarClick(e,o)},[l("span",r,[l("input",{type:"radio",value:o,name:m.name,checked:m.modelValue===o,disabled:m.disabled,readonly:m.readonly,"aria-label":b.ariaLabelTemplate(o),onFocus:e=>b.onFocus(e,o),onBlur:h[5]||(h[5]=(...e)=>b.onBlur&&b.onBlur(...e)),onKeydown:e=>b.onKeyDown(e,o)},null,40,p)])],10,c)))),128))],2)};export{d as default};
+import{DomHandler as e,UniqueComponentId as n}from"primevue/utils";import{openBlock as a,createElementBlock as l,normalizeClass as t,createElementVNode as i,renderSlot as o,createCommentVNode as s,Fragment as c,renderList as r}from"vue";var d={name:"Rating",emits:["update:modelValue","change","focus","blur"],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:"pi pi-star-fill"},offIcon:{type:String,default:"pi pi-star"},cancelIcon:{type:String,default:"pi pi-ban"}},data:()=>({focusedOptionIndex:-1}),methods:{onOptionClick(n,a){if(!this.readonly&&!this.disabled){this.onOptionSelect(n,a);const l=e.getFirstFocusableElement(n.currentTarget);l&&e.focus(l)}},onFocus(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange(e,n){this.onOptionSelect(e,n)},onOptionSelect(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel(){return this.$primevue.config.locale.clear},starAriaLabel(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},computed:{containerClass(){return["p-rating",{"p-readonly":this.readonly,"p-disabled":this.disabled}]},cancelIconClass(){return["p-rating-icon p-rating-cancel",this.cancelIcon]},onIconClass(){return["p-rating-icon",this.onIcon]},offIconClass(){return["p-rating-icon",this.offIcon]},name(){return this.$attrs.name||n()}}};const u={class:"p-hidden-accessible"},p=["name","checked","disabled","readonly","aria-label"],m=["onClick"],f={class:"p-hidden-accessible"},h=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];!function(e,n){void 0===n&&(n={});var a=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===a&&l.firstChild?l.insertBefore(t,l.firstChild):l.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}("\n.p-rating {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-rating-item {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n}\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n"),d.render=function(e,n,d,g,y,b){return a(),l("div",{class:t(b.containerClass)},[d.cancel?(a(),l("div",{key:0,class:t(["p-rating-item p-rating-cancel-item",{"p-focus":0===y.focusedOptionIndex}]),onClick:n[3]||(n[3]=e=>b.onOptionClick(e,0))},[i("span",u,[i("input",{type:"radio",value:"0",name:b.name,checked:0===d.modelValue,disabled:d.disabled,readonly:d.readonly,"aria-label":b.cancelAriaLabel(),onFocus:n[0]||(n[0]=e=>b.onFocus(e,0)),onBlur:n[1]||(n[1]=(...e)=>b.onBlur&&b.onBlur(...e)),onChange:n[2]||(n[2]=e=>b.onChange(e,0))},null,40,p)]),o(e.$slots,"cancelicon",{},(()=>[i("span",{class:t(b.cancelIconClass)},null,2)]))],2)):s("",!0),(a(!0),l(c,null,r(d.stars,(s=>(a(),l("div",{key:s,class:t(["p-rating-item",{"p-rating-item-active":s<=d.modelValue,"p-focus":s===y.focusedOptionIndex}]),onClick:e=>b.onOptionClick(e,s)},[i("span",f,[i("input",{type:"radio",value:s,name:b.name,checked:d.modelValue===s,disabled:d.disabled,readonly:d.readonly,"aria-label":b.starAriaLabel(s),onFocus:e=>b.onFocus(e,s),onBlur:n[4]||(n[4]=(...e)=>b.onBlur&&b.onBlur(...e)),onChange:e=>b.onChange(e,s)},null,40,h)]),s<=d.modelValue?o(e.$slots,"onicon",{key:0,value:s},(()=>[i("span",{class:t(b.onIconClass)},null,2)])):o(e.$slots,"officon",{key:1,value:s},(()=>[i("span",{class:t(b.offIconClass)},null,2)]))],10,m)))),128))],2)};export{d as default};