31 lines
732 B
Vue
31 lines
732 B
Vue
|
<script setup lang="ts">
|
||
|
|
import ProgressBar from 'primevue/progressbar';
|
||
|
|
import type IVProgressBar from './IVProgressBar.type';
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<IVProgressBar>(), {
|
||
|
|
value: 0,
|
||
|
|
showValue: false,
|
||
|
|
indeterminate: false,
|
||
|
|
small: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const mode = computed(() => (props.indeterminate ? 'indeterminate' : 'determinate'));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ProgressBar
|
||
|
|
:mode="mode"
|
||
|
|
:value="props.value"
|
||
|
|
:show-value="props.showValue && !props.small"
|
||
|
|
:class="['p-progressbar', {small: props.small}]"
|
||
|
|
style="width: 100%;"
|
||
|
|
>
|
||
|
|
<slot/>
|
||
|
|
</ProgressBar>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
.p-progressbar.small {--p-progressbar-height: 0.5rem;}
|
||
|
|
</style>
|