Refactor #3832 Refactor #3833 - For Rating

api-generator/components/rating.js

@@ -28,6 +28,24 @@ const RatingProps = [
         type: 'boolean',
         default: 'true',
         description: 'When specified a cancel icon is displayed to allow clearing the value.'
+    },
+    {
+        name: 'onIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon for the on state.'
+    },
+    {
+        name: 'offIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon for the off state.'
+    },
+    {
+        name: 'cancelIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon for the cancelable state.'
     }
 ];
 

components/lib/rating/Rating.d.ts

@@ -59,17 +59,14 @@ export interface RatingProps {
     cancel?: boolean | undefined;
     /**
      * Icon for the on state.
-     * @defaultValue pi pi-star
      */
     onIcon?: string | undefined;
     /**
      * Icon for the off state.
-     * @defaultValue pi pi-star-fill
      */
     offIcon?: string | undefined;
     /**
      * Icon for the cancelable state.
-     * @defaultValue pi pi-ban
      */
     cancelIcon?: string | undefined;
 }

components/lib/rating/Rating.vue

@@ -5,7 +5,7 @@
                 <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>
             <slot name="cancelicon">
-                <span :class="cancelIconClass" />
+                <component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" />
             </slot>
         </div>
         <template v-for="value in stars" :key="value">
@@ -25,10 +25,10 @@
                     />
                 </span>
                 <slot v-if="value <= modelValue" name="onicon" :value="value">
-                    <span :class="onIconClass" />
+                    <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" />
                 </slot>
                 <slot v-else name="officon" :value="value">
-                    <span :class="offIconClass" />
+                    <component :is="onIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" />
                 </slot>
             </div>
         </template>
@@ -36,6 +36,9 @@
 </template>
 
 <script>
+import BanIcon from 'primevue/icon/ban';
+import StarIcon from 'primevue/icon/star';
+import StarFillIcon from 'primevue/icon/starfill';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
@@ -64,15 +67,15 @@ export default {
         },
         onIcon: {
             type: String,
-            default: 'pi pi-star-fill'
+            default: undefined
         },
         offIcon: {
             type: String,
-            default: 'pi pi-star'
+            default: undefined
         },
         cancelIcon: {
             type: String,
-            default: 'pi pi-ban'
+            default: undefined
         }
     },
     data() {
@@ -133,16 +136,12 @@ 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];
         }
+    },
+    components: {
+        StarFillIcon: StarFillIcon,
+        StarIcon: StarIcon,
+        BanIcon: BanIcon
     }
 };
 </script>