<script setup lang="ts">
import ProgressBar from 'primevue/progressbar';
import type IVProgressBar from './IVProgressBar.type.js';
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
  role="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>
