Refactor #3922 - For Rating

components/lib/rating/Rating.d.ts

@@ -18,6 +18,7 @@ export declare type RatingPassThroughOptionType = RatingPassThroughAttributes |
 export interface RatingPassThroughMethodOptions {
     props: RatingProps;
     state: RatingState;
+    context: RatingContext;
 }
 
 /**
@@ -29,18 +30,6 @@ export interface RatingPassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: RatingPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the cancel item's DOM element.
-     */
-    cancelItem?: RatingPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the input aria's DOM element.
-     */
-    cancelInputAria?: RatingPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the cancel input's DOM element.
-     */
-    cancelInput?: RatingPassThroughOptionType;
     /**
      * Uses to pass attributes to the cancel icon's DOM element.
      */
@@ -49,14 +38,6 @@ export interface RatingPassThroughOptions {
      * Uses to pass attributes to the item's DOM element.
      */
     item?: RatingPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the item input aria's DOM element.
-     */
-    itemInputAria?: RatingPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the item input's DOM element.
-     */
-    itemInput?: RatingPassThroughOptionType;
     /**
      * Uses to pass attributes to the on icon's DOM element.
      */
@@ -65,6 +46,22 @@ export interface RatingPassThroughOptions {
      * Uses to pass attributes to the off icon's DOM element.
      */
     offIcon?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden cancel inputW wapper's DOM element.
+     */
+    hiddenCancelInputWrapper?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden cancel input's DOM element.
+     */
+    hiddenCancelInput?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden item input wrapper's DOM element.
+     */
+    hiddenItemInputWrapper?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden item input's DOM element.
+     */
+    hiddenItemInput?: RatingPassThroughOptionType;
 }
 
 /**
@@ -88,6 +85,22 @@ export interface RatingState {
     focusedOptionIndex: number;
 }
 
+/**
+ * Defines current options in Rating component.
+ */
+export interface RatingContext {
+    /**
+     * Current active state of the item as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Custom change event.
  * @see {@link RatingEmits.change}

components/lib/rating/Rating.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" v-bind="ptm('root')">
         <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)" v-bind="ptm('cancelItem')">
-            <span class="p-hidden-accessible" v-bind="ptm('cancelInputAria')">
+            <span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')">
                 <input
                     type="radio"
                     value="0"
@@ -13,7 +13,7 @@
                     @focus="onFocus($event, 0)"
                     @blur="onBlur"
                     @change="onChange($event, 0)"
-                    v-bind="ptm('cancelInput')"
+                    v-bind="ptm('hiddenCancelInput')"
                 />
             </span>
             <slot name="cancelicon">
@@ -21,8 +21,8 @@
             </slot>
         </div>
         <template v-for="value in stars" :key="value">
-            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)" v-bind="ptm('item')">
+            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)" v-bind="getPTOptions(value, 'item')">
-                <span class="p-hidden-accessible" v-bind="ptm('itemInputAria')">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')">
                     <input
                         type="radio"
                         :value="value"
@@ -34,14 +34,14 @@
                         @focus="onFocus($event, value)"
                         @blur="onBlur"
                         @change="onChange($event, value)"
-                        v-bind="ptm('itemInput')"
+                        v-bind="ptm('hiddenItemInput')"
                     />
                 </span>
                 <slot v-if="value <= modelValue" name="onicon" :value="value">
                     <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" v-bind="ptm('onIcon')" />
                 </slot>
                 <slot v-else name="officon" :value="value">
-                    <component :is="onIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" v-bind="ptm('offIcon')" />
+                    <component :is="offIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" v-bind="ptm('offIcon')" />
                 </slot>
             </div>
         </template>
@@ -108,6 +108,14 @@ export default {
         this.name = this.name || UniqueComponentId();
     },
     methods: {
+        getPTOptions(value, key) {
+            return this.ptm(key, {
+                context: {
+                    active: value <= this.modelValue,
+                    focused: value === this.focusedOptionIndex
+                }
+            });
+        },
         onOptionClick(event, value) {
             if (!this.readonly && !this.disabled) {
                 this.onOptionSelect(event, value);