Merge branch 'master' of https://github.com/primefaces/primevue

components/landing/HeroSection.vue

@@ -144,7 +144,7 @@
                                         },
                                         menu: {
                                             root: {
-                                                style: 'width: 10rem; min-width: auto',
+                                                style: 'width: 10rem; min-width: auto'
                                             },
                                             action: 'p-2'
                                         }

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.
      */

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>

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 {
+    .p-metergroup-vertical .p-metergroup-label-list-horizontal {
-        align-items: start;
+        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'
 };

components/lib/overlaypanel/OverlayPanel.d.ts

@@ -244,6 +244,10 @@ export interface OverlayPanelEmits {
  * @group Component
  */
 declare class OverlayPanel extends ClassComponent<OverlayPanelProps, OverlayPanelSlots, OverlayPanelEmits> {
+    /**
+     * Aligns overlay panel based on the current position of the container.
+     */
+    alignOverlay(): void;
     /**
      * Toggles the visibility of the overlay.
      * @param {Event} event - Browser event.

doc/common/apidoc/index.json

@@ -35580,6 +35580,18 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom meter template."
                         },
+                        {
+                            "name": "icon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItemOptions</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon</span>\n }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
                         {
                             "name": "start",
                             "parameters": [
@@ -38410,6 +38422,12 @@
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": [
+                        {
+                            "name": "alignOverlay",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Aligns overlay panel based on the current position of the container."
+                        },
                         {
                             "name": "toggle",
                             "parameters": [

doc/metergroup/BasicDoc.vue

@@ -12,11 +12,7 @@
 export default {
     data() {
         return {
-            value: [
+            value: [{ label: 'Space used', value: 15 }],
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
-            ],
             code: {
                 basic: `
 <MeterGroup :value="value" />
@@ -32,11 +28,7 @@ export default {
 export default {
     data() {
         return {
-            value: [
+            value: [{ label: 'Space used', value: 15 }],
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
-            ]
         };
     }
 };
@@ -52,11 +44,7 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const value = ref([
+const value = ref([{ label: 'Space used', value: 15 }]);
-    { color: '#239EF0', label: 'Mortgage', value: 25 },
-    { color: '#FAA419', label: 'Loan', value: 15 },
-    { color: '#EE5879', label: 'Credit Card', value: 20 }
-]);
 <\/script>
 `
             }

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 },
+                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-                { color: '#FAA419', label: 'Loan', value: 15 },
+                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
+                { 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 },
+                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-                { color: '#FAA419', label: 'Loan', value: 15 },
+                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
+                { 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 },
+    { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-    { color: '#FAA419', label: 'Loan', value: 15 },
+    { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-    { color: '#EE5879', label: 'Credit Card', value: 20 }
+    { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
+    { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
 ]);
 <\/script>
 `

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" />

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>

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>

doc/passthrough/UsePassThroughDoc.vue

@@ -1,8 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p>An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the merge strategy.</p>
-            An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the merge strategy.
-        </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>
             The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and

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',
+                    id: 'multiple',
-                    label: 'Vertical',
+                    label: 'Multiple',
-                    component: VerticalDoc
+                    component: MultipleDoc
                 },
                 {
                     id: 'label',
                     label: 'Label',
                     component: LabelDoc
                 },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
                 {
                     id: 'minmax',
                     label: 'Min-Max',