Refactor #5066
tugcekucukoglu
parent
8945d848d1
commit
3454ad0efd
|
|
@ -116,6 +116,10 @@ export interface MeterItemOptions {
|
|||
* Current color of the meter item.
|
||||
*/
|
||||
color: string;
|
||||
/**
|
||||
* Current icon of the meter item.
|
||||
*/
|
||||
icon: string;
|
||||
/**
|
||||
* Optional keys.
|
||||
*/
|
||||
|
|
@ -187,7 +191,11 @@ export interface MeterGroupSlots {
|
|||
/**
|
||||
* Total percent of the metergroup items
|
||||
*/
|
||||
totalPercent: string;
|
||||
totalPercent: number;
|
||||
/**
|
||||
* Array of sequential sum of values of metergroup items
|
||||
*/
|
||||
percentages: number[];
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom meter template.
|
||||
|
|
@ -212,15 +220,11 @@ export interface MeterGroupSlots {
|
|||
/**
|
||||
* Current width of the meter item
|
||||
*/
|
||||
width: string;
|
||||
/**
|
||||
* Current height of the meter item
|
||||
*/
|
||||
height: string;
|
||||
size: string;
|
||||
/**
|
||||
* Total percent of the metergroup items
|
||||
*/
|
||||
totalPercent: string;
|
||||
totalPercent: number;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom icon template.
|
||||
|
|
@ -246,7 +250,11 @@ export interface MeterGroupSlots {
|
|||
/**
|
||||
* Total percent of the metergroup items
|
||||
*/
|
||||
totalPercent: string;
|
||||
totalPercent: number;
|
||||
/**
|
||||
* Array of sequential sum of values of metergroup items
|
||||
*/
|
||||
percentages: number[];
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom end template.
|
||||
|
|
@ -259,7 +267,11 @@ export interface MeterGroupSlots {
|
|||
/**
|
||||
* Total percent of the metergroup items
|
||||
*/
|
||||
totalPercent: string;
|
||||
totalPercent: number;
|
||||
/**
|
||||
* Array of sequential sum of values of metergroup items
|
||||
*/
|
||||
percentages: number[];
|
||||
}): VNode[];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,51 +1,26 @@
|
|||
<template>
|
||||
<div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" v-bind="ptm('root')" data-pc-name="metergroup">
|
||||
<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')">
|
||||
<slot name="icon" :value="val" :class="cx('labelicon')">
|
||||
<i v-if="val.icon" :class="[val.icon, cx('labelicon')]" :style="{ color: val.color }" 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>
|
||||
<slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercent" :percentages="percentages">
|
||||
<MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
|
||||
</slot>
|
||||
<slot name="start" :value="value" :totalPercent="totalPercentValue()" />{{}}
|
||||
<slot name="start" :value="value" :totalPercent="totalPercent" :percentages="percentages" />
|
||||
<div :class="cx('metercontainer')" v-bind="ptm('metercontainer')">
|
||||
<template v-for="(val, index) in value" :key="index">
|
||||
<slot
|
||||
name="meter"
|
||||
:value="val"
|
||||
:index="index"
|
||||
:class="cx('meter')"
|
||||
:orientation="orientation"
|
||||
:width="orientation === 'horizontal' && percentValue(val.value)"
|
||||
:height="orientation === 'vertical' && percentValue(val.value)"
|
||||
:totalPercent="totalPercentValue()"
|
||||
>
|
||||
<span
|
||||
:class="cx('meter')"
|
||||
:style="{ backgroundColor: val.color, width: orientation === 'horizontal' && percentValue(val.value), height: orientation === 'vertical' && percentValue(val.value) }"
|
||||
v-bind="getPTOptions('meter', val, index)"
|
||||
/>
|
||||
<slot name="meter" :value="val" :index="index" :class="cx('meter')" :orientation="orientation" :size="percentValue(val.value)" :totalPercent="totalPercent">
|
||||
<span :class="cx('meter')" :style="meterSize(val)" v-bind="getPTOptions('meter', val, index)" />
|
||||
</slot>
|
||||
</template>
|
||||
</div>
|
||||
<slot name="end" :value="value" :totalPercent="totalPercentValue()" />
|
||||
<slot v-if="labelPosition === 'end'" 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')" />
|
||||
<span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ percentValue(val.value) }})</span>
|
||||
</li>
|
||||
</ol>
|
||||
<slot name="end" :value="value" :totalPercent="totalPercent" :percentages="percentages" />
|
||||
<slot v-if="labelPosition === 'end'" name="label" :value="value" :totalPercent="totalPercent" :percentages="percentages">
|
||||
<MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseMeterGroup from './BaseMeterGroup.vue';
|
||||
import MeterGroupLabel from './MeterGroupLabel.vue';
|
||||
|
||||
export default {
|
||||
name: 'MeterGroup',
|
||||
|
|
@ -59,7 +34,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
percent(meter) {
|
||||
percent(meter = 0) {
|
||||
const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;
|
||||
|
||||
return Math.round(Math.max(0, Math.min(100, percentOfItem)));
|
||||
|
|
@ -67,14 +42,32 @@ export default {
|
|||
percentValue(meter) {
|
||||
return this.percent(meter) + '%';
|
||||
},
|
||||
totalPercentValue() {
|
||||
return this.totalPercent + '%';
|
||||
meterSize(val) {
|
||||
return {
|
||||
backgroundColor: val.color,
|
||||
width: this.orientation === 'horizontal' && this.percentValue(val.value),
|
||||
height: this.orientation === 'vertical' && this.percentValue(val.value)
|
||||
};
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalPercent() {
|
||||
return this.percent(this.value.reduce((total, val) => total + val.value, 0));
|
||||
},
|
||||
percentages() {
|
||||
let sum = 0;
|
||||
const sumsArray = [];
|
||||
|
||||
this.value.forEach((item) => {
|
||||
sum += item.value;
|
||||
sumsArray.push(sum);
|
||||
});
|
||||
|
||||
return sumsArray;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MeterGroupLabel
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<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')">
|
||||
<slot name="icon" :value="val" :class="cx('labelicon')">
|
||||
<i v-if="val.icon" :class="[val.icon, cx('labelicon')]" :style="{ color: val.color }" 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 }} ({{ $parentInstance.percentValue(val.value) }})</span>
|
||||
</li>
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
export default {
|
||||
name: 'MeterGroupLabel',
|
||||
hostName: 'MeterGroup',
|
||||
extends: BaseComponent,
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'end'
|
||||
},
|
||||
labelOrientation: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -50,22 +50,23 @@ const css = `
|
|||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance }) => [
|
||||
root: ({ props }) => [
|
||||
'p-metergroup p-component',
|
||||
{
|
||||
'p-metergroup-horizontal': instance.orientation === 'horizontal',
|
||||
'p-metergroup-vertical': instance.orientation === 'vertical'
|
||||
'p-metergroup-horizontal': props.orientation === 'horizontal',
|
||||
'p-metergroup-vertical': props.orientation === 'vertical'
|
||||
}
|
||||
],
|
||||
metercontainer: 'p-metergroup-meter-container',
|
||||
meter: 'p-metergroup-meter',
|
||||
labellist: ({ instance }) => [
|
||||
labellist: ({ props }) => [
|
||||
'p-metergroup-label-list',
|
||||
|
||||
{
|
||||
'p-metergroup-label-list-start': instance.labelPosition === 'start',
|
||||
'p-metergroup-label-list-end': instance.labelPosition === 'end',
|
||||
'p-metergroup-label-list-vertical': instance.labelOrientation === 'vertical',
|
||||
'p-metergroup-label-list-horizontal': instance.labelOrientation === 'horizontal'
|
||||
'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'
|
||||
}
|
||||
],
|
||||
labellistitem: 'p-metergroup-label-list-item',
|
||||
|
|
|
|||
Loading…
Reference in New Issue