Refactor #5437 - For Rating

components/lib/rating/BaseRating.vue

@@ -24,7 +24,7 @@ export default {
         },
         cancel: {
             type: Boolean,
-            default: true
+            default: false
         },
         onIcon: {
             type: String,

components/lib/rating/Rating.d.ts

@@ -181,7 +181,8 @@ export interface RatingProps {
     stars?: number | undefined;
     /**
      * When specified a cancel icon is displayed to allow clearing the value.
-     * @defaultValue true
+     * @deprecated since v4.0.0-beta.1
+     * @defaultValue false
      */
     cancel?: boolean | undefined;
     /**

components/lib/rating/Rating.vue

@@ -106,8 +106,13 @@ export default {
             this.isFocusVisibleItem = true;
         },
         onOptionSelect(event, value) {
-            this.focusedOptionIndex = value;
-            this.updateModel(event, value || null);
+            if (this.focusedOptionIndex === value || this.modelValue === value) {
+                this.focusedOptionIndex = -1;
+                this.updateModel(event, null);
+            } else {
+                this.focusedOptionIndex = value;
+                this.updateModel(event, value || null);
+            }
         },
         updateModel(event, value) {
             this.$emit('update:modelValue', value);

components/lib/rating/style/RatingStyle.js

@@ -11,7 +11,7 @@ const classes = {
     cancelItem: ({ instance }) => [
         'p-rating-item p-rating-cancel-item',
         {
-            'p-focus': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
+            'p-focus-visible': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
         }
     ],
     cancelIcon: 'p-rating-icon p-rating-cancel',
@@ -19,7 +19,7 @@ const classes = {
         'p-rating-item',
         {
             'p-rating-item-active': value <= props.modelValue,
-            'p-focus': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
+            'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
         }
     ],
     onIcon: 'p-rating-icon',

doc/rating/WithoutCancelDoc.vue

@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
-    </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Rating v-model="value" :cancel="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Rating v-model="value" :cancel="false" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Rating v-model="value" :cancel="false"  />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Rating v-model="value" :cancel="false"  />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

pages/rating/index.vue

@@ -10,7 +10,6 @@ import ImportDoc from '@/doc/rating/ImportDoc.vue';
 import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
 import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
 import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
-import WithoutCancelDoc from '@/doc/rating/WithoutCancelDoc.vue';
 import PTComponent from '@/doc/rating/pt/index.vue';
 import ThemingDoc from '@/doc/rating/theming/index.vue';
 
@@ -28,11 +27,6 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'withoutcancel',
-                    label: 'Without Cancel',
-                    component: WithoutCancelDoc
-                },
                 {
                     id: 'numberofstars',
                     label: 'Number of Stars',