From aedd31e8e6b47042623b623a9452335efd969951 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 26 Mar 2024 10:28:22 +0300
Subject: [PATCH] Refactor #5437 - For Rating

---
 components/lib/rating/BaseRating.vue       |  2 +-
 components/lib/rating/Rating.d.ts          |  3 +-
 components/lib/rating/Rating.vue           |  9 +++-
 components/lib/rating/style/RatingStyle.js |  4 +-
 doc/rating/WithoutCancelDoc.vue            | 54 ----------------------
 pages/rating/index.vue                     |  6 ---
 6 files changed, 12 insertions(+), 66 deletions(-)
 delete mode 100644 doc/rating/WithoutCancelDoc.vue

diff --git a/components/lib/rating/BaseRating.vue b/components/lib/rating/BaseRating.vue
index f868c30804..7710adf6e8 100644
--- a/components/lib/rating/BaseRating.vue
+++ b/components/lib/rating/BaseRating.vue
@@ -24,7 +24,7 @@ export default {
         },
         cancel: {
             type: Boolean,
-            default: true
+            default: false
         },
         onIcon: {
             type: String,
diff --git a/components/lib/rating/Rating.d.ts b/components/lib/rating/Rating.d.ts
index ac6d7b7a25..8c60c1a9b0 100755
--- a/components/lib/rating/Rating.d.ts
+++ b/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;
     /**
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 9d53191de2..2586f8c947 100755
--- a/components/lib/rating/Rating.vue
+++ b/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);
diff --git a/components/lib/rating/style/RatingStyle.js b/components/lib/rating/style/RatingStyle.js
index e6178a4a78..80f428b9ee 100644
--- a/components/lib/rating/style/RatingStyle.js
+++ b/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',
diff --git a/doc/rating/WithoutCancelDoc.vue b/doc/rating/WithoutCancelDoc.vue
deleted file mode 100644
index e9d0cb1e82..0000000000
--- a/doc/rating/WithoutCancelDoc.vue
+++ /dev/null
@@ -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>
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index 571e527190..7fd7762f5d 100755
--- a/pages/rating/index.vue
+++ b/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',