Refactor - Misc section
parent
ab677831bd
commit
1b88a2f7d1
|
@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
|
|||
|
||||
const classes = {
|
||||
root: ({ props }) => 'p-message p-component p-message-' + props.severity,
|
||||
wrapper: 'p-message-content',
|
||||
content: 'p-message-content',
|
||||
icon: 'p-message-icon',
|
||||
text: 'p-message-text',
|
||||
closeButton: 'p-message-close-button',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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)" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -45,6 +45,10 @@ export interface ProgressBarPassThroughOptions<T = any> {
|
|||
* Used to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: ProgressBarPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the indeterminate container's DOM element.
|
||||
*/
|
||||
indeterminateContainer?: ProgressBarPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the value's DOM element.
|
||||
*/
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<slot>{{ value + '%' }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="indeterminate" :class="cx('container')" v-bind="ptm('container')">
|
||||
<div v-if="indeterminate" :class="cx('indeterminateContainer')" v-bind="ptm('indeterminateContainer')">
|
||||
<div :class="cx('value')" v-bind="ptm('value')"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -8,7 +8,7 @@ const classes = {
|
|||
'p-progressbar-indeterminate': instance.indeterminate
|
||||
}
|
||||
],
|
||||
container: 'p-progressbar-indeterminate-container',
|
||||
indeterminateContainer: 'p-progressbar-indeterminate-container',
|
||||
value: 'p-progressbar-value',
|
||||
label: 'p-progressbar-label'
|
||||
};
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="cx('root')" role="progressbar" v-bind="ptmi('root')">
|
||||
<svg :class="cx('spinner')" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
|
||||
<svg :class="cx('spin')" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spin')">
|
||||
<circle :class="cx('circle')" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
|
|||
|
||||
const classes = {
|
||||
root: 'p-progressspinner',
|
||||
spinner: 'p-progressspinner-spin',
|
||||
spin: 'p-progressspinner-spin',
|
||||
circle: 'p-progressspinner-circle'
|
||||
};
|
||||
|
||||
|
|
|
@ -54,9 +54,9 @@ export interface TagPassThroughOptions {
|
|||
*/
|
||||
icon?: TagPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the value's DOM element.
|
||||
* Used to pass attributes to the label's DOM element.
|
||||
*/
|
||||
value?: TagPassThroughOptionType;
|
||||
label?: TagPassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
|
||||
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
|
||||
<slot v-if="value || $slots.default">
|
||||
<span :class="cx('value')" v-bind="ptm('value')">{{ value }}</span>
|
||||
<span :class="cx('label')" v-bind="ptm('label')">{{ value }}</span>
|
||||
</slot>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
@ -14,7 +14,7 @@ const classes = {
|
|||
}
|
||||
],
|
||||
icon: 'p-tag-icon',
|
||||
value: 'p-tag-label'
|
||||
label: 'p-tag-label'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
Loading…
Reference in New Issue