Refactor #5681 - For ColorPicker, Knob, Rating

components/lib/colorpicker/ColorPicker.d.ts

@@ -71,9 +71,9 @@ export interface ColorPickerPassThroughOptions {
      */
     root?: ColorPickerPassThroughOptionType;
     /**
-     * Used to pass attributes to the input's DOM element.
+     * Used to pass attributes to the preview's DOM element.
      */
-    input?: ColorPickerPassThroughOptionType;
+    preview?: ColorPickerPassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -83,13 +83,13 @@ export interface ColorPickerPassThroughOptions {
      */
     content?: ColorPickerPassThroughOptionType;
     /**
-     * Used to pass attributes to the selector's DOM element.
+     * Used to pass attributes to the color selector's DOM element.
      */
-    selector?: ColorPickerPassThroughOptionType;
+    colorSelector?: ColorPickerPassThroughOptionType;
     /**
-     * Used to pass attributes to the color's DOM element.
+     * Used to pass attributes to the color background's DOM element.
      */
-    color?: ColorPickerPassThroughOptionType;
+    colorBackground?: ColorPickerPassThroughOptionType;
     /**
      * Used to pass attributes to the color handler's DOM element.
      */

components/lib/colorpicker/ColorPicker.vue

@@ -1,12 +1,12 @@
 <template>
     <div ref="container" :class="cx('root')" v-bind="ptmi('root')">
-        <input v-if="!inline" ref="input" type="text" :class="cx('input')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
+        <input v-if="!inline" ref="input" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
                     <div :class="cx('content')" v-bind="ptm('content')">
-                        <div :ref="colorSelectorRef" :class="cx('selector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
+                        <div :ref="colorSelectorRef" :class="cx('colorSelector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('colorSelector')">
-                            <div :class="cx('color')" v-bind="ptm('color')">
+                            <div :class="cx('colorBackground')" v-bind="ptm('colorBackground')">
                                 <div :ref="colorHandleRef" :class="cx('colorHandle')" v-bind="ptm('colorHandle')"></div>
                             </div>
                         </div>

components/lib/colorpicker/style/ColorPickerStyle.js

@@ -111,7 +111,7 @@ const theme = ({ dt }) => `
 
 const classes = {
     root: 'p-colorpicker p-component',
-    input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
+    preview: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
     panel: ({ instance, props }) => [
         'p-colorpicker-panel',
         {
@@ -120,8 +120,8 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    selector: 'p-colorpicker-color-selector',
+    colorSelector: 'p-colorpicker-color-selector',
-    color: 'p-colorpicker-color-background',
+    colorBackground: 'p-colorpicker-color-background',
     colorHandle: 'p-colorpicker-color-handle',
     hue: 'p-colorpicker-hue',
     hueHandle: 'p-colorpicker-hue-handle'

components/lib/knob/Knob.d.ts

@@ -65,9 +65,9 @@ export interface KnobPassThroughOptions {
      */
     value?: KnobPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the text's DOM element.
      */
-    label?: KnobPassThroughOptionType;
+    text?: KnobPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/knob/Knob.vue

@@ -21,7 +21,7 @@
         >
             <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" :class="cx('range')" v-bind="ptm('range')"></path>
             <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" :class="cx('value')" v-bind="ptm('value')"></path>
-            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('label')" v-bind="ptm('label')">{{ valueToDisplay }}</text>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('text')" v-bind="ptm('text')">{{ valueToDisplay }}</text>
         </svg>
     </div>
 </template>

components/lib/knob/style/KnobStyle.js

@@ -38,7 +38,7 @@ const classes = {
     root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
     range: 'p-knob-range',
     value: 'p-knob-value',
-    label: 'p-knob-text'
+    text: 'p-knob-text'
 };
 
 export default BaseStyle.extend({

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">
+            <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('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
+                <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,