Skip to content

Commit

Permalink
Fixed #5203 - MeterGroup Refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Feb 4, 2024
1 parent ed82bfd commit 9a29cbc
Show file tree
Hide file tree
Showing 87 changed files with 2,005 additions and 1,790 deletions.
45 changes: 17 additions & 28 deletions components/lib/metergroup/style/MeterGroupStyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,40 @@ import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-metergroup {
position: relative;
overflow: hidden;
display: flex;
}
.p-metergroup-vertical.p-metergroup {
.p-metergroup-meters {
display: flex;
}
.p-metergroup-vertical .p-metergroup-meter-container {
.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;
}
}
`;
Expand All @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion doc/metergroup/BasicDoc.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>MeterGroup requires <i>value</i> as the data to display.</p>
<p>MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" />
Expand Down
69 changes: 69 additions & 0 deletions doc/metergroup/IconDoc.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Icons can be displayed next to the labels instead of the default marker.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" />
</div>
<DocSectionCode :code="code" />
</template>

<script>
export default {
data() {
return {
value: [
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
],
code: {
basic: `
<MeterGroup :value="value" />
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" />
</div>
</template>
<script>
export default {
data() {
return {
value: [
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<MeterGroup :value="value" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref([
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
]);
<\/script>
`
}
};
}
};
</script>
36 changes: 18 additions & 18 deletions doc/metergroup/LabelDoc.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
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.
The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the
<i>labelOrientation</i> option.
</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
</div>
<DocSectionCode :code="code" />
</template>
Expand All @@ -16,19 +16,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: `
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
</div>
</template>
Expand All @@ -37,10 +37,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 }
]
};
}
Expand All @@ -50,18 +50,18 @@ export default {
composition: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
</div>
</template>
<script setup>
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>
`
Expand Down
32 changes: 16 additions & 16 deletions doc/metergroup/MinMaxDoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
</div>
<DocSectionCode :code="code" />
</template>
Expand All @@ -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: `
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
</div>
</template>
Expand All @@ -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 }
],
};
}
Expand All @@ -47,18 +47,18 @@ export default {
composition: `
<template>
<div class="card">
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
</div>
</template>
<script setup>
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>
`
Expand Down
23 changes: 13 additions & 10 deletions doc/metergroup/MultipleDoc.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p><i>value</i> property accepts multiple meter group objects.</p>
<p>Adding more items to the array displays the meters in a group.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" />
Expand All @@ -13,9 +13,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', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
],
code: {
basic: `
Expand All @@ -33,9 +34,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', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
]
};
}
Expand All @@ -53,9 +55,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', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
]);
<\/script>
`
Expand Down
Loading

0 comments on commit 9a29cbc

Please sign in to comment.