Refactor - Misc section

pull/5677/head
tugcekucukoglu 2024-04-30 09:54:48 +03:00
parent ab677831bd
commit 1b88a2f7d1
13 changed files with 47 additions and 39 deletions

View File

@ -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',

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;
}
/**

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)" />

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>

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({

View File

@ -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.
*/

View File

@ -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>

View File

@ -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'
};

View File

@ -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>

View File

@ -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'
};

View File

@ -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}

View File

@ -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>

View File

@ -14,7 +14,7 @@ const classes = {
}
],
icon: 'p-tag-icon',
value: 'p-tag-label'
label: 'p-tag-label'
};
export default BaseStyle.extend({