Refactor #5681 - For ColorPicker, Knob, Rating

components/lib/rating/Rating.d.ts

@@ -58,9 +58,9 @@ export interface RatingPassThroughOptions {
      */
     root?: RatingPassThroughOptionType;
     /**
-     * Used to pass attributes to the item's DOM element.
+     * Used to pass attributes to the option's DOM element.
      */
-    item?: RatingPassThroughOptionType;
+    option?: RatingPassThroughOptionType;
     /**
      * Used to pass attributes to the on icon's DOM element.
      */
@@ -70,13 +70,13 @@ export interface RatingPassThroughOptions {
      */
     offIcon?: RatingPassThroughOptionType;
     /**
-     * Used to pass attributes to the hidden item input wrapper's DOM element.
+     * Used to pass attributes to the hidden option input wrapper's DOM element.
      */
-    hiddenItemInputWrapper?: RatingPassThroughOptionType;
+    hiddenOptionInputWrapper?: RatingPassThroughOptionType;
     /**
-     * Used to pass attributes to the hidden item input's DOM element.
+     * Used to pass attributes to the hidden option input's DOM element.
      */
-    hiddenItemInput?: RatingPassThroughOptionType;
+    hiddenOptionInput?: RatingPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -110,12 +110,12 @@ export interface RatingState {
  */
 export interface RatingContext {
     /**
-     * Current active state of the item as a boolean.
+     * Current active state of the option as a boolean.
      * @defaultValue false
      */
     active: boolean;
     /**
-     * Current focused state of item as a boolean.
+     * Current focused state of option as a boolean.
      * @defaultValue false
      */
     focused: boolean;
@@ -204,7 +204,7 @@ export interface RatingSlots {
      */
     onicon(scope: {
         /**
-         * Item value
+         * Option value
          */
         value: number;
         /**
@@ -218,7 +218,7 @@ export interface RatingSlots {
      */
     officon(scope: {
         /**
-         * Item value
+         * Option value
          */
         value: number;
         /**

components/lib/rating/Rating.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
         <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">
+            <div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenOptionInputWrapper')" :data-p-hidden-accessible="true">
                     <input
                         type="radio"
                         :value="value"
@@ -14,7 +14,7 @@
                         @focus="onFocus($event, value)"
                         @blur="onBlur"
                         @change="onChange($event, value)"
-                        v-bind="ptm('hiddenItemInput')"
+                        v-bind="ptm('hiddenOptionInput')"
                     />
                 </span>
                 <slot v-if="value <= modelValue" name="onicon" :value="value" :class="cx('onIcon')">

components/lib/rating/style/RatingStyle.js

@@ -47,7 +47,7 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    item: ({ instance, props, value }) => [
+    option: ({ instance, props, value }) => [
         'p-rating-option',
         {
             'p-rating-option-active': value <= props.modelValue,