vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor - Misc section

Browse source
This commit is contained in:
tugcekucukoglu 2024-04-30 09:54:48 +03:00
parent ab677831bd
commit 1b88a2f7d1
13 changed files with 47 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/lib/metergroup/MeterGroup.d.ts vendored
View file

@ -53,30 +53,34 @@ export interface MeterGroupPassThroughOptions {
* Used to pass attributes to the root's DOM element.
*/
root?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label list's DOM element.
*/
labellist?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label list item's DOM element.
*/
labellistitem?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label list type's DOM element.
*/
labellisttype?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
*/
label?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the meter container's DOM element.
*/
metercontainer?: MeterGroupPassThroughOptionType;
meters?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the meter's DOM element.
*/
meter?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label list's DOM element.
*/
labelList?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label list item's DOM element.
*/
label?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label icon type's DOM element.
*/
labelIcon?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label list type's DOM element.
*/
labelMarker?: MeterGroupPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
*/
labelText?: MeterGroupPassThroughOptionType;
}
/**

2
components/lib/metergroup/MeterGroup.vue
View file

@ -4,7 +4,7 @@
<MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
</slot>
<slot name="start" :value="value" :totalPercent="totalPercent" :percentages="percentages" />
<div :class="cx('metercontainer')" v-bind="ptm('metercontainer')">
<div :class="cx('meters')" v-bind="ptm('meters')">
<template v-for="(val, index) in value" :key="index">
<slot name="meter" :value="val" :index="index" :class="cx('meter')" :orientation="orientation" :size="percentValue(val.value)" :totalPercent="totalPercent">
<span v-if="percent(val.value)" :class="cx('meter')" :style="meterCalculatedStyles(val)" v-bind="getPTOptions('meter', val, index)" />

12
components/lib/metergroup/MeterGroupLabel.vue
View file

@ -1,11 +1,11 @@
<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')" />
<ol :class="cx('labelList')" v-bind="ptm('labelList')">
<li v-for="(val, index) in value" :key="index + '_label'" :class="cx('label')" v-bind="ptm('label')">
<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('labelMarker')" :style="{ backgroundColor: val.color }" v-bind="ptm('labelMarker')" />
</slot>
<span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>
<span :class="cx('labelText')" v-bind="ptm('labelText')">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>
</li>
</ol>
</template>

12
components/lib/metergroup/style/MeterGroupStyle.js
View file

@ -8,19 +8,19 @@ const classes = {
'p-metergroup-vertical': props.orientation === 'vertical'
}
],
metercontainer: 'p-metergroup-meters',
meters: 'p-metergroup-meters',
meter: 'p-metergroup-meter',
labellist: ({ props }) => [
labelList: ({ props }) => [
'p-metergroup-label-list',
{
'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
}
],
labellistitem: 'p-metergroup-label',
labelicon: 'p-metergroup-label-icon',
labellisttype: 'p-metergroup-label-marker',
label: 'p-metergroup-label-text'
label: 'p-metergroup-label',
labelIcon: 'p-metergroup-label-icon',
labelMarker: 'p-metergroup-label-marker',
labelText: 'p-metergroup-label-text'
};
export default BaseStyle.extend({