From 16b430df6a8cfd9f2c9f9f455b678584757a8805 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 12 Jan 2024 12:51:29 +0300
Subject: [PATCH] Refactor #5066

---
 components/lib/metergroup/MeterGroup.d.ts       | 13 +++++++++++++
 components/lib/metergroup/MeterGroup.vue        |  5 ++++-
 .../lib/metergroup/style/MeterGroupStyle.js     | 17 ++++++++++++++---
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/components/lib/metergroup/MeterGroup.d.ts b/components/lib/metergroup/MeterGroup.d.ts
index f6dd6fcb1..ddf934e7c 100644
--- a/components/lib/metergroup/MeterGroup.d.ts
+++ b/components/lib/metergroup/MeterGroup.d.ts
@@ -222,6 +222,19 @@ export interface MeterGroupSlots {
          */
         totalPercent: string;
     }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(scope: {
+        /**
+         * Current value of the component
+         */
+        value: MeterItemOptions;
+        /**
+         * Style class of the icon
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom start template.
      */
diff --git a/components/lib/metergroup/MeterGroup.vue b/components/lib/metergroup/MeterGroup.vue
index b3856a42c..4e0773d54 100644
--- a/components/lib/metergroup/MeterGroup.vue
+++ b/components/lib/metergroup/MeterGroup.vue
@@ -3,7 +3,10 @@
         <slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercentValue()">
             <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')">
-                    <span :class="cx('labellisttype')" :style="{ backgroundColor: val.color }" v-bind="ptm('labellisttype')" />
+                    <slot name="icon" :value="val" :class="cx('labelicon')">
+                        <i v-if="val.icon" :class="[val.icon, cx('labelicon')]" 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>
diff --git a/components/lib/metergroup/style/MeterGroupStyle.js b/components/lib/metergroup/style/MeterGroupStyle.js
index c7800ea9b..9f402c35d 100644
--- a/components/lib/metergroup/style/MeterGroupStyle.js
+++ b/components/lib/metergroup/style/MeterGroupStyle.js
@@ -26,12 +26,16 @@ const css = `
         list-style-type: none;
     }
 
-    .p-metergroup-label-list-horizontal {
+    .p-metergroup-vertical .p-metergroup-label-list {
+        align-items: start;
+    }
+
+    .p-metergroup-horizontal .p-metergroup-label-list-vertical {
         flex-direction: column;
     }
 
-    .p-metergroup-vertical .p-metergroup-label-list-vertical {
-        align-items: start;
+    .p-metergroup-vertical .p-metergroup-label-list-horizontal {
+        flex-direction: column;
     }
 
     .p-metergroup-label-list-item {
@@ -42,6 +46,12 @@ const css = `
     .p-metergroup-label-type {
         display: inline-block;
     }
+
+    .p-metergroup-label-icon {
+        width: 1rem;
+        height: 1rem;
+        margin-right: .5rem;
+    }
 }
 `;
 
@@ -65,6 +75,7 @@ const classes = {
         }
     ],
     labellistitem: 'p-metergroup-label-list-item',
+    labelicon: 'p-metergroup-label-icon',
     labellisttype: 'p-metergroup-label-type',
     label: 'p-metergroup-label'
 };