Refactor #5437 - For Rating

primefaces · Mar 26, 2024 · aedd31e · aedd31e
1 parent 8efb1a5
commit aedd31e
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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
@@ -11,15 +11,15 @@ 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',
     item: ({ instance, props, value }) => [
         '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
diff --git 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',