vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3965 - Fixes for ProgressBar

pull/3999/head
Tuğçe Küçükoğlu 2023-06-20 15:09:52 +03:00
parent 641f6a0e11
commit 05f2958c74
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/lib/progressbar/BaseProgressBar.vue
View File

@ -114,15 +114,16 @@ const styles = `
`;
const classes = {
root: ({ props, instance }) => [
root: ({ instance }) => [
'p-progressbar p-component',
{
'p-progressbar-determinate': instance.determinate,
'p-progressbar-indeterminate': instance.indeterminate
}
],
value: ({ instance }) => (instance.determinate ? 'p-progressbar-value p-progressbar-value-animate' : 'p-progressbar-indeterminate-container'),
label: ({ instance }) => (instance.determinate ? 'p-progressbar-label' : 'p-progressbar-value p-progressbar-value-animate')
container: 'p-progressbar-indeterminate-container',
value: 'p-progressbar-value p-progressbar-value-animate',
label: 'p-progressbar-label'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressbar_style', manual: true });

6
components/lib/progressbar/ProgressBar.vue
View File

@ -1,12 +1,12 @@
<template>
<div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')" data-pc-name="progressbar">
<div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')">
<div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')">
<div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')">
<slot>{{ value + '%' }}</slot>
</div>
</div>
<div v-if="indeterminate" :class="cx('value')" v-bind="ptm('value')">
<div :class="cx('label')" v-bind="ptm('label')"></div>
<div v-if="indeterminate" :class="cx('container')" v-bind="ptm('root')">
<div :class="cx('value')" v-bind="ptm('value')"></div>
</div>
</div>
</template>