From 2f7ef117517ac2e7f7f2af86fbd3458d0cafa1d3 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 12 Jan 2024 12:53:18 +0300
Subject: [PATCH] MeterGroup demo updates

---
 doc/metergroup/BasicDoc.vue    | 18 ++--------
 doc/metergroup/LabelDoc.vue    | 31 ++++++++--------
 doc/metergroup/MinMaxDoc.vue   |  2 +-
 doc/metergroup/MultipleDoc.vue | 66 ++++++++++++++++++++++++++++++++++
 doc/metergroup/VerticalDoc.vue |  6 ++--
 pages/metergroup/index.vue     | 12 +++++--
 6 files changed, 99 insertions(+), 36 deletions(-)
 create mode 100644 doc/metergroup/MultipleDoc.vue

diff --git a/doc/metergroup/BasicDoc.vue b/doc/metergroup/BasicDoc.vue
index 3e7bc1a1a..ac7f6928b 100644
--- a/doc/metergroup/BasicDoc.vue
+++ b/doc/metergroup/BasicDoc.vue
@@ -12,11 +12,7 @@
 export default {
     data() {
         return {
-            value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
-            ],
+            value: [{ label: 'Space used', value: 15 }],
             code: {
                 basic: `
 <MeterGroup :value="value" />
@@ -32,11 +28,7 @@ export default {
 export default {
     data() {
         return {
-            value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
-            ]
+            value: [{ label: 'Space used', value: 15 }],
         };
     }
 };
@@ -52,11 +44,7 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const value = ref([
-    { color: '#239EF0', label: 'Mortgage', value: 25 },
-    { color: '#FAA419', label: 'Loan', value: 15 },
-    { color: '#EE5879', label: 'Credit Card', value: 20 }
-]);
+const value = ref([{ label: 'Space used', value: 15 }]);
 <\/script>
 `
             }
diff --git a/doc/metergroup/LabelDoc.vue b/doc/metergroup/LabelDoc.vue
index 81ac38166..72c9c0517 100644
--- a/doc/metergroup/LabelDoc.vue
+++ b/doc/metergroup/LabelDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Default layout of MeterGroup is <i>horizontal</i>, and also <i>orientation</i> property can be set as <i>vertical</i>.In addition, position of the label can be changed using <i>labelPosition</i> property that the default value is
+            Default layout of MeterGroup is <i>horizontal</i>, and also <i>labelOrientation</i> property can be set as <i>vertical</i>.In addition, position of the label can be changed using <i>labelPosition</i> property that the default value is
             <i>end</i> and also <i>start</i> option is available.
         </p>
     </DocSectionText>
     <div class="card">
-        <MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+        <MeterGroup :value="value" labelPosition="start" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,18 +16,19 @@ export default {
     data() {
         return {
             value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
+                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
+                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
+                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
+                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
             ],
             code: {
                 basic: `
-<MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+<MeterGroup :value="value" labelPosition="start" />
 `,
                 options: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+        <MeterGroup :value="value" labelPosition="start" />
     </div>
 </template>
 
@@ -36,9 +37,10 @@ export default {
     data() {
         return {
             value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
+                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
+                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
+                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
+                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
             ]
         };
     }
@@ -48,7 +50,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+        <MeterGroup :value="value" labelPosition="start" />
     </div>
 </template>
 
@@ -56,9 +58,10 @@ export default {
 import { ref } from "vue";
 
 const value = ref([
-    { color: '#239EF0', label: 'Mortgage', value: 25 },
-    { color: '#FAA419', label: 'Loan', value: 15 },
-    { color: '#EE5879', label: 'Credit Card', value: 20 }
+    { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
+    { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
+    { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
+    { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
 ]);
 <\/script>
 `
diff --git a/doc/metergroup/MinMaxDoc.vue b/doc/metergroup/MinMaxDoc.vue
index 12a1076bf..31f057824 100644
--- a/doc/metergroup/MinMaxDoc.vue
+++ b/doc/metergroup/MinMaxDoc.vue
@@ -12,7 +12,7 @@
 export default {
     data() {
         return {
-            value: [{ label: 'Space used', value: 15 }],
+            value: [{ label: 'Space used', value: 15, color: '#FDBB74' }],
             code: {
                 basic: `
 <MeterGroup :value="value" :min="-50" :max="50" />
diff --git a/doc/metergroup/MultipleDoc.vue b/doc/metergroup/MultipleDoc.vue
new file mode 100644
index 000000000..3e7bc1a1a
--- /dev/null
+++ b/doc/metergroup/MultipleDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MeterGroup is used with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25 },
+                { color: '#FAA419', label: 'Loan', value: 15 },
+                { color: '#EE5879', label: 'Credit Card', value: 20 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25 },
+                { color: '#FAA419', label: 'Loan', value: 15 },
+                { color: '#EE5879', label: 'Credit Card', value: 20 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { color: '#239EF0', label: 'Mortgage', value: 25 },
+    { color: '#FAA419', label: 'Loan', value: 15 },
+    { color: '#EE5879', label: 'Credit Card', value: 20 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/VerticalDoc.vue b/doc/metergroup/VerticalDoc.vue
index 2e9b01707..ac5e4712c 100644
--- a/doc/metergroup/VerticalDoc.vue
+++ b/doc/metergroup/VerticalDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
     </DocSectionText>
-    <div class="card flex" style="height: 350px">
+    <div class="card flex justify-content-center" style="height: 350px">
         <MeterGroup :value="value" orientation="vertical" />
     </div>
     <DocSectionCode :code="code" />
@@ -23,7 +23,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex" style="height: 350px">
+    <div class="card flex justify-content-center" style="height: 350px">
         <MeterGroup :value="value" orientation="vertical" />
     </div>
 </template>
@@ -44,7 +44,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex" style="height: 350px">
+    <div class="card flex justify-content-center" style="height: 350px">
         <MeterGroup :value="value" orientation="vertical" />
     </div>
 </template>
diff --git a/pages/metergroup/index.vue b/pages/metergroup/index.vue
index a511ed3ab..3028b9508 100644
--- a/pages/metergroup/index.vue
+++ b/pages/metergroup/index.vue
@@ -5,6 +5,7 @@
 <script>
 import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
+import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
 import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
 import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
 import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
@@ -28,15 +29,20 @@ export default {
                     component: BasicDoc
                 },
                 {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
                 },
                 {
                     id: 'label',
                     label: 'Label',
                     component: LabelDoc
                 },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
                 {
                     id: 'minmax',
                     label: 'Min-Max',