primevue 3.16.0 → 3.17.0

package/radiobutton/radiobutton.esm.js

@@ -5,7 +5,7 @@ var script = {
     name: 'RadioButton',
     emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
-		value: null,
+        value: null,
         modelValue: null,
         name: {
             type: String,
@@ -15,13 +15,25 @@ var script = {
             type: Boolean,
             default: false
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -60,11 +72,13 @@ var script = {
         },
         containerClass() {
             return [
-                'p-radiobutton p-component', {
+                'p-radiobutton p-component',
+                {
                     'p-radiobutton-checked': this.checked,
                     'p-radiobutton-disabled': this.disabled,
                     'p-radiobutton-focused': this.focused
-                }];
+                }
+            ];
         }
     }
 };
@@ -84,8 +98,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("div", _hoisted_1, [
       createElementVNode("input", mergeProps({
         ref: "input",
-        type: "radio",
         id: $props.inputId,
+        type: "radio",
         class: $props.inputClass,
         style: $props.inputStyle,
         name: $props.name,
@@ -100,7 +114,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     createElementVNode("div", {
       ref: "box",
-      class: normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
+      class: normalizeClass(['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
     }, _hoisted_4, 2)
   ], 2))
 }

package/radiobutton/radiobutton.esm.min.js

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

package/radiobutton/radiobutton.js

@@ -6,7 +6,7 @@ this.primevue.radiobutton = (function (utils, vue) {
         name: 'RadioButton',
         emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
         props: {
-    		value: null,
+            value: null,
             modelValue: null,
             name: {
                 type: String,
@@ -16,13 +16,25 @@ this.primevue.radiobutton = (function (utils, vue) {
                 type: Boolean,
                 default: false
             },
-            inputId: null,
-            inputClass: null,
-            inputStyle: null,
-            inputProps: null,
+            inputId: {
+                type: String,
+                default: null
+            },
+            inputClass: {
+                type: String,
+                default: null
+            },
+            inputStyle: {
+                type: null,
+                default: null
+            },
+            inputProps: {
+                type: null,
+                default: null
+            },
             'aria-labelledby': {
                 type: String,
-    			default: null
+                default: null
             },
             'aria-label': {
                 type: String,
@@ -61,11 +73,13 @@ this.primevue.radiobutton = (function (utils, vue) {
             },
             containerClass() {
                 return [
-                    'p-radiobutton p-component', {
+                    'p-radiobutton p-component',
+                    {
                         'p-radiobutton-checked': this.checked,
                         'p-radiobutton-disabled': this.disabled,
                         'p-radiobutton-focused': this.focused
-                    }];
+                    }
+                ];
             }
         }
     };
@@ -85,8 +99,8 @@ this.primevue.radiobutton = (function (utils, vue) {
         vue.createElementVNode("div", _hoisted_1, [
           vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
-            type: "radio",
             id: $props.inputId,
+            type: "radio",
             class: $props.inputClass,
             style: $props.inputStyle,
             name: $props.name,
@@ -101,7 +115,7 @@ this.primevue.radiobutton = (function (utils, vue) {
         ]),
         vue.createElementVNode("div", {
           ref: "box",
-          class: vue.normalizeClass(['p-radiobutton-box', {'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
+          class: vue.normalizeClass(['p-radiobutton-box', { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
         }, _hoisted_4, 2)
       ], 2))
     }

package/radiobutton/radiobutton.min.js

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

package/rating/Rating.d.ts

@@ -38,9 +38,48 @@ export interface RatingProps {
      * Default value is true.
      */
     cancel?: boolean | undefined;
+    /**
+     * Icon for the on state.
+     * Default value is pi pi-star.
+     */
+    onIcon?: string | undefined;
+    /**
+     * Icon for the off state.
+     * Default value is pi pi-star-fill.
+     */
+    offIcon?: string | undefined;
+    /**
+     * Icon for the cancelable state.
+     * Default value is pi pi-ban.
+     */
+    cancelIcon?: string | undefined;
 }
 
 export interface RatingSlots {
+    /**
+     * Custom cancel icon template.
+     */
+    cancelicon: () => VNode[];
+    /**
+     * Custom on icon template.
+     * @param {Object} scope - on icon slot's params.
+     */
+    onicon: (scope: {
+        /**
+         * Item value
+         */
+        value: number;
+    }) => VNode[];
+    /**
+     * Custom off icon template.
+     * @param {Object} scope - off icon slot's params.
+     */
+    officon: (scope: {
+        /**
+         * Item value
+         */
+        value: number;
+    }) => VNode[];
 }
 
 export declare type RatingEmits = {
@@ -53,14 +92,24 @@ export declare type RatingEmits = {
      * Callback to invoke when a suggestion is selected.
      * @param {RatingChangeEvent} event - Custom change event.
      */
-    'change': (event: RatingChangeEvent) => void;
-}
+    change: (event: RatingChangeEvent) => void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus: (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur: (event: Event) => void;
+};
 
-declare class Rating extends ClassComponent<RatingProps, RatingSlots, RatingEmits> { }
+declare class Rating extends ClassComponent<RatingProps, RatingSlots, RatingEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Rating: GlobalComponentConstructor<Rating>
+        Rating: GlobalComponentConstructor<Rating>;
     }
 }
 
@@ -70,7 +119,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Rating](https://www.primefaces.org/primevue/showcase/#/rating)
+ * - [Rating](https://www.primefaces.org/primevue/rating)
  *
  */
 export default Rating;

package/rating/Rating.vue

@@ -1,21 +1,43 @@
 <template>
     <div :class="containerClass">
-        <span :class="['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': focusIndex === 0}]" v-if="cancel" @click="onCancelClick" @keydown="onKeyDown">
-            <span class="p-hidden-accessible" v-if="cancel">
-                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="$primevue.config.locale.clear" @focus="onFocus($event, 0)" @blur="onBlur" @keydown="onKeyDown($event, 0)">
+        <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)">
+            <span class="p-hidden-accessible">
+                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="cancelAriaLabel()" @focus="onFocus($event, 0)" @blur="onBlur" @change="onChange($event, 0)" />
             </span>
-        </span>
-        <template :key="i" v-for="i in stars">
-            <span :class="['p-rating-icon', {'pi pi-star': (i > modelValue), 'pi pi-star-fill': (i <= modelValue), 'p-focus': i === focusIndex}]" @click="onStarClick($event,i)">
+            <slot name="cancelicon">
+                <span :class="cancelIconClass" />
+            </slot>
+        </div>
+        <template v-for="value in stars" :key="value">
+            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)">
                 <span class="p-hidden-accessible">
-                    <input type="radio" :value="i" :name="name" :checked="modelValue === i" :disabled="disabled" :readonly="readonly" :aria-label="ariaLabelTemplate(i)" @focus="onFocus($event, i)" @blur="onBlur" @keydown="onKeyDown($event,i)">
+                    <input
+                        type="radio"
+                        :value="value"
+                        :name="name"
+                        :checked="modelValue === value"
+                        :disabled="disabled"
+                        :readonly="readonly"
+                        :aria-label="starAriaLabel(value)"
+                        @focus="onFocus($event, value)"
+                        @blur="onBlur"
+                        @change="onChange($event, value)"
+                    />
                 </span>
-            </span>
+                <slot v-if="value <= modelValue" name="onicon" :value="value">
+                    <span :class="onIconClass" />
+                </slot>
+                <slot v-else name="officon" :value="value">
+                    <span :class="offIconClass" />
+                </slot>
+            </div>
         </template>
     </div>
 </template>
 
 <script>
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
+
 export default {
     name: 'Rating',
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
@@ -24,15 +46,11 @@ export default {
             type: Number,
             default: null
         },
-        name: {
-            type: String,
-            default: null
-        },
-		disabled: {
+        disabled: {
             type: Boolean,
             default: false
         },
-		readonly: {
+        readonly: {
             type: Boolean,
             default: false
         },
@@ -43,62 +61,58 @@ export default {
         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: {
@@ -110,24 +124,36 @@ export default {
                     '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();
         }
     }
-}
+};
 </script>
 
 <style>
-.p-rating-icon {
-    cursor: pointer;
+.p-rating {
+    display: flex;
+    align-items: center;
 }
 
-.p-rating.p-rating-readonly .p-rating-icon {
-    cursor: default;
+.p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
 }
 
-.p-rating:not(.p-disabled) .p-rating-icon.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #BFDBFE;
-    border-color: #3B82F6;
+.p-rating.p-readonly .p-rating-item {
+    cursor: default;
 }
 </style>