From 7b7eb3df1dfc766deefe72f80a06311de68d531c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 18 Jan 2024 15:55:13 +0300
Subject: [PATCH] MeterGroup doc updates

---
 doc/metergroup/BasicDoc.vue      |  2 +-
 doc/metergroup/TemplatingDoc.vue | 37 ++++++++++++++++++++------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/doc/metergroup/BasicDoc.vue b/doc/metergroup/BasicDoc.vue
index ac7f6928b..bbb6d0bae 100644
--- a/doc/metergroup/BasicDoc.vue
+++ b/doc/metergroup/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>MeterGroup is used with the <i>value</i> property.</p>
+        <p>MeterGroup requires <i>value</i> as the data to display.</p>
     </DocSectionText>
     <div class="card">
         <MeterGroup :value="value" />
diff --git a/doc/metergroup/TemplatingDoc.vue b/doc/metergroup/TemplatingDoc.vue
index 1c27f7a7c..fd9c09121 100644
--- a/doc/metergroup/TemplatingDoc.vue
+++ b/doc/metergroup/TemplatingDoc.vue
@@ -20,12 +20,12 @@
             <template #start="{ totalPercent }">
                 <div class="flex justify-content-between mt-3 mb-2">
                     <span>Account </span>
-                    <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
                     <span>Savings: 1000$ </span>
                 </div>
             </template>
             <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
             </template>
         </MeterGroup>
     </div>
@@ -45,21 +45,24 @@ export default {
                 basic: `
 <MeterGroup :value="value" labelPosition="start">
     <template #label="{ value }">
-        <div class="flex flex-column text-sm">
+        <div class="flex flex-column text-sm gap-2">
             <template v-for="(val, i) of value" :key="i">
-                <span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
+                <span :style="{ color: val.color }" class="flex gap-2">
+                    <i :class="val.icon" />
+                    {{ val.label }} ({{ val.value }}%)</span
+                >
             </template>
         </div>
     </template>
     <template #start="{ totalPercent }">
         <div class="flex justify-content-between mt-3 mb-2">
             <span>Account </span>
-            <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
+            <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
             <span>Savings: 1000$ </span>
         </div>
     </template>
     <template #meter="slotProps">
-        <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+        <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
     </template>
 </MeterGroup>
 `,
@@ -68,21 +71,24 @@ export default {
     <div class="card">
         <MeterGroup :value="value" labelPosition="start">
             <template #label="{ value }">
-                <div class="flex flex-column text-sm">
+                <div class="flex flex-column text-sm gap-2">
                     <template v-for="(val, i) of value" :key="i">
-                        <span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
+                        <span :style="{ color: val.color }" class="flex gap-2">
+                            <i :class="val.icon" />
+                            {{ val.label }} ({{ val.value }}%)</span
+                        >
                     </template>
                 </div>
             </template>
             <template #start="{ totalPercent }">
                 <div class="flex justify-content-between mt-3 mb-2">
                     <span>Account </span>
-                    <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
                     <span>Savings: 1000$ </span>
                 </div>
             </template>
             <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
             </template>
         </MeterGroup>
     </div>
@@ -107,21 +113,24 @@ export default {
     <div class="card">
         <MeterGroup :value="value" labelPosition="start">
             <template #label="{ value }">
-                <div class="flex flex-column text-sm">
+                <div class="flex flex-column text-sm gap-2">
                     <template v-for="(val, i) of value" :key="i">
-                        <span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
+                        <span :style="{ color: val.color }" class="flex gap-2">
+                            <i :class="val.icon" />
+                            {{ val.label }} ({{ val.value }}%)</span
+                        >
                     </template>
                 </div>
             </template>
             <template #start="{ totalPercent }">
                 <div class="flex justify-content-between mt-3 mb-2">
                     <span>Account </span>
-                    <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
                     <span>Savings: 1000$ </span>
                 </div>
             </template>
             <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
             </template>
         </MeterGroup>
     </div>