Refactor #5066

components/lib/metergroup/MeterGroup.d.ts

@@ -116,6 +116,10 @@ export interface MeterItemOptions {
      * Current color of the meter item.
      */
     color: string;
+    /**
+     * Current icon of the meter item.
+     */
+    icon: string;
     /**
      * Optional keys.
      */
@@ -187,7 +191,11 @@ export interface MeterGroupSlots {
         /**
          * Total percent of the metergroup items
          */
-        totalPercent: string;
+        totalPercent: number;
+        /**
+         * Array of sequential sum of values of metergroup items
+         */
+        percentages: number[];
     }): VNode[];
     /**
      * Custom meter template.
@@ -212,15 +220,11 @@ export interface MeterGroupSlots {
         /**
          * Current width of the meter item
          */
-        width: string;
+        size: string;
-        /**
-         * Current height of the meter item
-         */
-        height: string;
         /**
          * Total percent of the metergroup items
          */
-        totalPercent: string;
+        totalPercent: number;
     }): VNode[];
     /**
      * Custom icon template.
@@ -246,7 +250,11 @@ export interface MeterGroupSlots {
         /**
          * Total percent of the metergroup items
          */
-        totalPercent: string;
+        totalPercent: number;
+        /**
+         * Array of sequential sum of values of metergroup items
+         */
+        percentages: number[];
     }): VNode[];
     /**
      * Custom end template.
@@ -259,7 +267,11 @@ export interface MeterGroupSlots {
         /**
          * Total percent of the metergroup items
          */
-        totalPercent: string;
+        totalPercent: number;
+        /**
+         * Array of sequential sum of values of metergroup items
+         */
+        percentages: number[];
     }): VNode[];
 }
 

components/lib/metergroup/MeterGroup.vue

@@ -1,51 +1,26 @@
 <template>
     <div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" v-bind="ptm('root')" data-pc-name="metergroup">
-        <slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercentValue()">
+        <slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercent" :percentages="percentages">
-            <ol :class="cx('labellist')" v-bind="ptm('labellist')">
+            <MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
-                <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')" />
-                    </slot>
-                    <span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ percentValue(val.value) }})</span>
-                </li>
-            </ol>
         </slot>
-        <slot name="start" :value="value" :totalPercent="totalPercentValue()" />{{}}
+        <slot name="start" :value="value" :totalPercent="totalPercent" :percentages="percentages" />
         <div :class="cx('metercontainer')" v-bind="ptm('metercontainer')">
             <template v-for="(val, index) in value" :key="index">
-                <slot
+                <slot name="meter" :value="val" :index="index" :class="cx('meter')" :orientation="orientation" :size="percentValue(val.value)" :totalPercent="totalPercent">
-                    name="meter"
+                    <span :class="cx('meter')" :style="meterSize(val)" v-bind="getPTOptions('meter', val, index)" />
-                    :value="val"
-                    :index="index"
-                    :class="cx('meter')"
-                    :orientation="orientation"
-                    :width="orientation === 'horizontal' && percentValue(val.value)"
-                    :height="orientation === 'vertical' && percentValue(val.value)"
-                    :totalPercent="totalPercentValue()"
-                >
-                    <span
-                        :class="cx('meter')"
-                        :style="{ backgroundColor: val.color, width: orientation === 'horizontal' && percentValue(val.value), height: orientation === 'vertical' && percentValue(val.value) }"
-                        v-bind="getPTOptions('meter', val, index)"
-                    />
                 </slot>
             </template>
         </div>
-        <slot name="end" :value="value" :totalPercent="totalPercentValue()" />
+        <slot name="end" :value="value" :totalPercent="totalPercent" :percentages="percentages" />
-        <slot v-if="labelPosition === 'end'" name="label" :value="value" :totalPercent="totalPercentValue()">
+        <slot v-if="labelPosition === 'end'" name="label" :value="value" :totalPercent="totalPercent" :percentages="percentages">
-            <ol :class="cx('labellist')" v-bind="ptm('labellist')">
+            <MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
-                <li v-for="(val, index) in value" :key="index + '_label'" :class="cx('labellistitem')" v-bind="ptm('labellistitem')">
-                    <span :class="cx('labellisttype')" :style="{ backgroundColor: val.color }" v-bind="ptm('labellisttype')" />
-                    <span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ percentValue(val.value) }})</span>
-                </li>
-            </ol>
         </slot>
     </div>
 </template>
 
 <script>
 import BaseMeterGroup from './BaseMeterGroup.vue';
+import MeterGroupLabel from './MeterGroupLabel.vue';
 
 export default {
     name: 'MeterGroup',
@@ -59,7 +34,7 @@ export default {
                 }
             });
         },
-        percent(meter) {
+        percent(meter = 0) {
             const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;
 
             return Math.round(Math.max(0, Math.min(100, percentOfItem)));
@@ -67,14 +42,32 @@ export default {
         percentValue(meter) {
             return this.percent(meter) + '%';
         },
-        totalPercentValue() {
+        meterSize(val) {
-            return this.totalPercent + '%';
+            return {
+                backgroundColor: val.color,
+                width: this.orientation === 'horizontal' && this.percentValue(val.value),
+                height: this.orientation === 'vertical' && this.percentValue(val.value)
+            };
         }
     },
     computed: {
         totalPercent() {
             return this.percent(this.value.reduce((total, val) => total + val.value, 0));
+        },
+        percentages() {
+            let sum = 0;
+            const sumsArray = [];
+
+            this.value.forEach((item) => {
+                sum += item.value;
+                sumsArray.push(sum);
+            });
+
+            return sumsArray;
         }
+    },
+    components: {
+        MeterGroupLabel
     }
 };
 </script>

components/lib/metergroup/MeterGroupLabel.vue

@@ -0,0 +1,36 @@
+<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')" />
+            </slot>
+            <span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>
+        </li>
+    </ol>
+</template>
+
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+export default {
+    name: 'MeterGroupLabel',
+    hostName: 'MeterGroup',
+    extends: BaseComponent,
+    inheritAttrs: false,
+    props: {
+        value: {
+            type: Array,
+            default: null
+        },
+        labelPosition: {
+            type: String,
+            default: 'end'
+        },
+        labelOrientation: {
+            type: String,
+            default: 'horizontal'
+        }
+    }
+};
+</script>

components/lib/metergroup/style/MeterGroupStyle.js

@@ -50,22 +50,23 @@ const css = `
 `;
 
 const classes = {
-    root: ({ instance }) => [
+    root: ({ props }) => [
         'p-metergroup p-component',
         {
-            'p-metergroup-horizontal': instance.orientation === 'horizontal',
+            'p-metergroup-horizontal': props.orientation === 'horizontal',
-            'p-metergroup-vertical': instance.orientation === 'vertical'
+            'p-metergroup-vertical': props.orientation === 'vertical'
         }
     ],
     metercontainer: 'p-metergroup-meter-container',
     meter: 'p-metergroup-meter',
-    labellist: ({ instance }) => [
+    labellist: ({ props }) => [
         'p-metergroup-label-list',
+
         {
-            'p-metergroup-label-list-start': instance.labelPosition === 'start',
+            'p-metergroup-label-list-start': props.labelPosition === 'start',
-            'p-metergroup-label-list-end': instance.labelPosition === 'end',
+            'p-metergroup-label-list-end': props.labelPosition === 'end',
-            'p-metergroup-label-list-vertical': instance.labelOrientation === 'vertical',
+            'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
-            'p-metergroup-label-list-horizontal': instance.labelOrientation === 'horizontal'
+            'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
         }
     ],
     labellistitem: 'p-metergroup-label-list-item',