Refactor - Misc section

components/lib/message/style/MessageStyle.js

@@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: ({ props }) => 'p-message p-component p-message-' + props.severity,
-    wrapper: 'p-message-content',
+    content: 'p-message-content',
     icon: 'p-message-icon',
     text: 'p-message-text',
     closeButton: 'p-message-close-button',

components/lib/metergroup/MeterGroup.d.ts

@@ -54,29 +54,33 @@ export interface MeterGroupPassThroughOptions {
      */
     root?: MeterGroupPassThroughOptionType;
     /**
-     * Used to pass attributes to the label list's DOM element.
+     * Used to pass attributes to the meter container's DOM element.
      */
-    labellist?: MeterGroupPassThroughOptionType;
+    meters?: MeterGroupPassThroughOptionType;
     /**
-     * Used to pass attributes to the label list item's DOM element.
+     * Used to pass attributes to the meter's DOM element.
      */
-    labellistitem?: MeterGroupPassThroughOptionType;
+    meter?: MeterGroupPassThroughOptionType;
     /**
-     * Used to pass attributes to the label list type's DOM element.
+     * Used to pass attributes to the label list's DOM element.
      */
-    labellisttype?: MeterGroupPassThroughOptionType;
+    labelList?: MeterGroupPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the label list item's DOM element.
      */
     label?: MeterGroupPassThroughOptionType;
     /**
-     * Used to pass attributes to the meter container's DOM element.
+     * Used to pass attributes to the label icon type's DOM element.
      */
-    metercontainer?: MeterGroupPassThroughOptionType;
+    labelIcon?: MeterGroupPassThroughOptionType;
     /**
-     * Used to pass attributes to the meter's DOM element.
+     * Used to pass attributes to the label list type's DOM element.
      */
-    meter?: MeterGroupPassThroughOptionType;
+    labelMarker?: MeterGroupPassThroughOptionType;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    labelText?: MeterGroupPassThroughOptionType;
 }
 
 /**

components/lib/metergroup/MeterGroup.vue

@@ -4,7 +4,7 @@
             <MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
         </slot>
         <slot name="start" :value="value" :totalPercent="totalPercent" :percentages="percentages" />
-        <div :class="cx('metercontainer')" v-bind="ptm('metercontainer')">
+        <div :class="cx('meters')" v-bind="ptm('meters')">
             <template v-for="(val, index) in value" :key="index">
                 <slot name="meter" :value="val" :index="index" :class="cx('meter')" :orientation="orientation" :size="percentValue(val.value)" :totalPercent="totalPercent">
                     <span v-if="percent(val.value)" :class="cx('meter')" :style="meterCalculatedStyles(val)" v-bind="getPTOptions('meter', val, index)" />

components/lib/metergroup/MeterGroupLabel.vue

@@ -1,11 +1,11 @@
 <template>
-    <ol :class="cx('labellist')" v-bind="ptm('labellist')">
-        <li v-for="(val, index) in value" :key="index + '_label'" :class="cx('labellistitem')" v-bind="ptm('labellistitem')">
-            <slot name="icon" :value="val" :class="cx('labelicon')">
-                <i v-if="val.icon" :class="[val.icon, cx('labelicon')]" :style="{ color: val.color }" v-bind="ptm('labelicon')" />
-                <span v-else :class="cx('labellisttype')" :style="{ backgroundColor: val.color }" v-bind="ptm('labellisttype')" />
+    <ol :class="cx('labelList')" v-bind="ptm('labelList')">
+        <li v-for="(val, index) in value" :key="index + '_label'" :class="cx('label')" v-bind="ptm('label')">
+            <slot name="icon" :value="val" :class="cx('labelIcon')">
+                <i v-if="val.icon" :class="[val.icon, cx('labelIcon')]" :style="{ color: val.color }" v-bind="ptm('labelIcon')" />
+                <span v-else :class="cx('labelMarker')" :style="{ backgroundColor: val.color }" v-bind="ptm('labelMarker')" />
             </slot>
-            <span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>
+            <span :class="cx('labelText')" v-bind="ptm('labelText')">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>
         </li>
     </ol>
 </template>

components/lib/metergroup/style/MeterGroupStyle.js

@@ -8,19 +8,19 @@ const classes = {
             'p-metergroup-vertical': props.orientation === 'vertical'
         }
     ],
-    metercontainer: 'p-metergroup-meters',
+    meters: 'p-metergroup-meters',
     meter: 'p-metergroup-meter',
-    labellist: ({ props }) => [
+    labelList: ({ props }) => [
         'p-metergroup-label-list',
         {
             'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
             'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
         }
     ],
-    labellistitem: 'p-metergroup-label',
-    labelicon: 'p-metergroup-label-icon',
-    labellisttype: 'p-metergroup-label-marker',
-    label: 'p-metergroup-label-text'
+    label: 'p-metergroup-label',
+    labelIcon: 'p-metergroup-label-icon',
+    labelMarker: 'p-metergroup-label-marker',
+    labelText: 'p-metergroup-label-text'
 };
 
 export default BaseStyle.extend({

components/lib/progressbar/ProgressBar.d.ts

@@ -45,6 +45,10 @@ export interface ProgressBarPassThroughOptions<T = any> {
      * Used to pass attributes to the root's DOM element.
      */
     root?: ProgressBarPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the indeterminate container's DOM element.
+     */
+    indeterminateContainer?: ProgressBarPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the value's DOM element.
      */

components/lib/progressbar/ProgressBar.vue

@@ -5,7 +5,7 @@
                 <slot>{{ value + '%' }}</slot>
             </div>
         </div>
-        <div v-if="indeterminate" :class="cx('container')" v-bind="ptm('container')">
+        <div v-if="indeterminate" :class="cx('indeterminateContainer')" v-bind="ptm('indeterminateContainer')">
             <div :class="cx('value')" v-bind="ptm('value')"></div>
         </div>
     </div>

components/lib/progressbar/style/ProgressBarStyle.js

@@ -8,7 +8,7 @@ const classes = {
             'p-progressbar-indeterminate': instance.indeterminate
         }
     ],
-    container: 'p-progressbar-indeterminate-container',
+    indeterminateContainer: 'p-progressbar-indeterminate-container',
     value: 'p-progressbar-value',
     label: 'p-progressbar-label'
 };

components/lib/progressspinner/ProgressSpinner.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" role="progressbar" v-bind="ptmi('root')">
-        <svg :class="cx('spinner')" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
+        <svg :class="cx('spin')" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spin')">
             <circle :class="cx('circle')" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
         </svg>
     </div>

components/lib/progressspinner/style/ProgressSpinnerStyle.js

@@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: 'p-progressspinner',
-    spinner: 'p-progressspinner-spin',
+    spin: 'p-progressspinner-spin',
     circle: 'p-progressspinner-circle'
 };
 

components/lib/tag/Tag.d.ts

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

components/lib/tag/Tag.vue

@@ -3,7 +3,7 @@
         <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
         <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
         <slot v-if="value || $slots.default">
-            <span :class="cx('value')" v-bind="ptm('value')">{{ value }}</span>
+            <span :class="cx('label')" v-bind="ptm('label')">{{ value }}</span>
         </slot>
     </span>
 </template>

components/lib/tag/style/TagStyle.js

@@ -14,7 +14,7 @@ const classes = {
         }
     ],
     icon: 'p-tag-icon',
-    value: 'p-tag-label'
+    label: 'p-tag-label'
 };
 
 export default BaseStyle.extend({