Refactor #5066
parent
af69d1ff1d
commit
16b430df6a
|
@ -222,6 +222,19 @@ export interface MeterGroupSlots {
|
||||||
*/
|
*/
|
||||||
totalPercent: string;
|
totalPercent: string;
|
||||||
}): VNode[];
|
}): VNode[];
|
||||||
|
/**
|
||||||
|
* Custom icon template.
|
||||||
|
*/
|
||||||
|
icon(scope: {
|
||||||
|
/**
|
||||||
|
* Current value of the component
|
||||||
|
*/
|
||||||
|
value: MeterItemOptions;
|
||||||
|
/**
|
||||||
|
* Style class of the icon
|
||||||
|
*/
|
||||||
|
class: string;
|
||||||
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom start template.
|
* Custom start template.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -3,7 +3,10 @@
|
||||||
<slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercentValue()">
|
<slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercentValue()">
|
||||||
<ol :class="cx('labellist')" v-bind="ptm('labellist')">
|
<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')">
|
<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>
|
<span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ percentValue(val.value) }})</span>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
|
@ -26,12 +26,16 @@ const css = `
|
||||||
list-style-type: none;
|
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;
|
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 {
|
.p-metergroup-label-list-item {
|
||||||
|
@ -42,6 +46,12 @@ const css = `
|
||||||
.p-metergroup-label-type {
|
.p-metergroup-label-type {
|
||||||
display: inline-block;
|
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',
|
labellistitem: 'p-metergroup-label-list-item',
|
||||||
|
labelicon: 'p-metergroup-label-icon',
|
||||||
labellisttype: 'p-metergroup-label-type',
|
labellisttype: 'p-metergroup-label-type',
|
||||||
label: 'p-metergroup-label'
|
label: 'p-metergroup-label'
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue