diff --git a/components/lib/metergroup/style/MeterGroupStyle.js b/components/lib/metergroup/style/MeterGroupStyle.js index a7abe3a76..c1e4798f1 100644 --- a/components/lib/metergroup/style/MeterGroupStyle.js +++ b/components/lib/metergroup/style/MeterGroupStyle.js @@ -3,48 +3,40 @@ import BaseStyle from 'primevue/base/style'; const css = ` @layer primevue { .p-metergroup { - position: relative; - overflow: hidden; - } - - .p-metergroup-vertical.p-metergroup { display: flex; } - .p-metergroup-vertical .p-metergroup-meter-container { + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { flex-direction: column; } - .p-metergroup-meter-container { - display: flex; - } - - .p-metergroup-label-list { + .p-metergroup-labels { display: flex; + flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; } - .p-metergroup-vertical .p-metergroup-label-list { + .p-metergroup-vertical .p-metergroup-labels { align-items: start; } - .p-metergroup-horizontal .p-metergroup-label-list-vertical { + .p-metergroup-labels-vertical { flex-direction: column; } - .p-metergroup-vertical .p-metergroup-label-list-horizontal { - flex-direction: column; - } - - .p-metergroup-label-list-item { + .p-metergroup-label { display: inline-flex; align-items: center; } - .p-metergroup-label-type { - display: inline-block; + .p-metergroup-label-marker { + display: inline-flex; } } `; @@ -57,22 +49,19 @@ const classes = { 'p-metergroup-vertical': props.orientation === 'vertical' } ], - metercontainer: 'p-metergroup-meter-container', + metercontainer: 'p-metergroup-meters', meter: 'p-metergroup-meter', labellist: ({ props }) => [ - 'p-metergroup-label-list', - + 'p-metergroup-labels', { - 'p-metergroup-label-list-start': props.labelPosition === 'start', - 'p-metergroup-label-list-end': props.labelPosition === 'end', - 'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical', - 'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal' + 'p-metergroup-labels-vertical': props.labelOrientation === 'vertical', + 'p-metergroup-labels-horizontal': props.labelOrientation === 'horizontal' } ], - labellistitem: 'p-metergroup-label-list-item', + labellistitem: 'p-metergroup-label', labelicon: 'p-metergroup-label-icon', - labellisttype: 'p-metergroup-label-type', - label: 'p-metergroup-label' + labellisttype: 'p-metergroup-label-marker', + label: 'p-metergroup-label-text' }; export default BaseStyle.extend({ diff --git a/doc/metergroup/BasicDoc.vue b/doc/metergroup/BasicDoc.vue index bbb6d0bae..e67b02c23 100644 --- a/doc/metergroup/BasicDoc.vue +++ b/doc/metergroup/BasicDoc.vue @@ -1,6 +1,6 @@ @@ -13,19 +13,19 @@ export default { data() { return { value: [ - { 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' } + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } ], code: { basic: ` - + `, options: ` @@ -34,10 +34,10 @@ export default { data() { return { value: [ - { 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' } + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } ], }; } @@ -47,7 +47,7 @@ export default { composition: ` @@ -55,10 +55,10 @@ export default { import { ref } from "vue"; const value = ref([ - { 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' } + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } ]); <\/script> ` diff --git a/doc/metergroup/MultipleDoc.vue b/doc/metergroup/MultipleDoc.vue index 9a3c94b9a..3fd4bf1af 100644 --- a/doc/metergroup/MultipleDoc.vue +++ b/doc/metergroup/MultipleDoc.vue @@ -1,6 +1,6 @@