Refactor #5553 - For Rating

api-generator/components/rating.js

@@ -23,12 +23,6 @@ const RatingProps = [
         default: '5',
         description: 'Number of stars.'
     },
-    {
-        name: 'cancel',
-        type: 'boolean',
-        default: 'true',
-        description: 'When specified a cancel icon is displayed to allow clearing the value.'
-    },
     {
         name: 'onIcon',
         type: 'string',
@@ -41,12 +35,6 @@ const RatingProps = [
         default: 'null',
         description: 'Icon for the off state.'
     },
-    {
-        name: 'cancelIcon',
-        type: 'string',
-        default: 'null',
-        description: 'Icon for the cancelable state.'
-    },
     {
         name: 'pt',
         type: 'any',
@@ -62,10 +50,6 @@ const RatingProps = [
 ];
 
 const RatingSlots = [
-    {
-        name: 'cancelicon',
-        description: 'Custom cancel icon template.'
-    },
     {
         name: 'onicon',
         description: 'Custom on icon template.'

components/lib/rating/BaseRating.vue

@@ -22,10 +22,6 @@ export default {
             type: Number,
             default: 5
         },
-        cancel: {
-            type: Boolean,
-            default: false
-        },
         onIcon: {
             type: String,
             default: undefined
@@ -33,10 +29,6 @@ export default {
         offIcon: {
             type: String,
             default: undefined
-        },
-        cancelIcon: {
-            type: String,
-            default: undefined
         }
     },
     style: RatingStyle,

components/lib/rating/Rating.d.ts

@@ -57,14 +57,6 @@ export interface RatingPassThroughOptions {
      * Used to pass attributes to the root's DOM element.
      */
     root?: RatingPassThroughOptionType;
-    /**
-     * Used to pass attributes to the cancel item's DOM element.
-     */
-    cancelItem?: RatingPassThroughOptionType;
-    /**
-     * Used to pass attributes to the cancel icon's DOM element.
-     */
-    cancelIcon?: RatingPassThroughOptionType;
     /**
      * Used to pass attributes to the item's DOM element.
      */
@@ -77,14 +69,6 @@ export interface RatingPassThroughOptions {
      * Used to pass attributes to the off icon's DOM element.
      */
     offIcon?: RatingPassThroughOptionType;
-    /**
-     * Used to pass attributes to the hidden cancel inputW wapper's DOM element.
-     */
-    hiddenCancelInputWrapper?: RatingPassThroughOptionType;
-    /**
-     * Used to pass attributes to the hidden cancel input's DOM element.
-     */
-    hiddenCancelInput?: RatingPassThroughOptionType;
     /**
      * Used to pass attributes to the hidden item input wrapper's DOM element.
      */
@@ -179,12 +163,6 @@ export interface RatingProps {
      * @defaultValue 5
      */
     stars?: number | undefined;
-    /**
-     * When specified a cancel icon is displayed to allow clearing the value.
-     * @deprecated since v4.0.0-beta.1
-     * @defaultValue false
-     */
-    cancel?: boolean | undefined;
     /**
      * Icon for the on state.
      * @deprecated since v3.27.0. Use 'onicon' slot.
@@ -195,11 +173,6 @@ export interface RatingProps {
      * @deprecated since v3.27.0. Use 'officon' slot.
      */
     offIcon?: string | undefined;
-    /**
-     * Icon for the cancelable state.
-     * @deprecated since v3.27.0. Use 'cancelicon' slot.
-     */
-    cancelIcon?: string | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -225,16 +198,6 @@ export interface RatingProps {
  * Defines valid slots in Rating component.
  */
 export interface RatingSlots {
-    /**
-     * Custom cancel icon template.
-     * @param {Object} scope - cancelicon slot's params.
-     */
-    cancelicon(scope: {
-        /**
-         * Style class of the icon.
-         */
-        class: string;
-    }): VNode[];
     /**
      * Custom on icon template.
      * @param {Object} scope - on icon slot's params.

components/lib/rating/Rating.spec.js

@@ -28,12 +28,6 @@ describe('Rating.vue', () => {
         expect(wrapper.emitted()['blur'][0]).toEqual([true]);
     });
 
-    it('should not cancel', async () => {
-        await wrapper.setProps({ cancel: false });
-
-        expect(wrapper.find('.p-rating-cancel').exists()).toBe(false);
-    });
-
     it('When star is clicked, onOptionClick method should triggered', async () => {
         await wrapper.find('.p-rating-item').trigger('click');
 

components/lib/rating/Rating.vue

@@ -1,25 +1,5 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
-        <div v-if="cancel" :class="cx('cancelItem')" @click="onOptionClick($event, 0)" v-bind="getPTOptions('cancelItem', 0)" :data-p-focused="focusedOptionIndex === 0">
-            <span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
-                <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)"
-                    v-bind="ptm('hiddenCancelInput')"
-                />
-            </span>
-            <slot name="cancelicon" :class="cx('cancelIcon')">
-                <component :is="cancelIcon ? 'span' : 'BanIcon'" :class="[cx('cancelIcon'), cancelIcon]" v-bind="ptm('cancelIcon')" />
-            </slot>
-        </div>
         <template v-for="value in stars" :key="value">
             <div :class="cx('item', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('item', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
                 <span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
@@ -94,6 +74,7 @@ export default {
             }
         },
         onFocus(event, value) {
+            console.log(event);
             this.focusedOptionIndex = value;
             this.$emit('focus', event);
         },
@@ -118,9 +99,6 @@ export default {
             this.$emit('update:modelValue', value);
             this.$emit('change', { originalEvent: event, value });
         },
-        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);
         }

components/lib/rating/style/RatingStyle.js

@@ -8,13 +8,6 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    cancelItem: ({ instance }) => [
-        'p-rating-item p-rating-cancel-item',
-        {
-            'p-focus-visible': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
-        }
-    ],
-    cancelIcon: 'p-rating-icon p-rating-cancel',
     item: ({ instance, props, value }) => [
         'p-rating-option',
         {