Update ProgressBar.vue

This commit is contained in:
GMrrc 2024-11-22 17:26:04 +01:00
parent 8a6e41dcd9
commit 72af269615

View File

@ -1,41 +1,36 @@
<template>
<div class="flex items-center w-48 h-full">
<div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
<div
:style="{ width: value + '%' }"
class="h-full rounded-full"
:class="color"
></div>
</div>
<div class="flex items-center w-48 h-full">
<div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
<div :style="{ width: value + '%' }" class="h-full rounded-full" :class="color"></div>
</div>
</template>
</div>
</template>
<script>
export default {
name: "ProgressBar",
props: {
value: {
type: Number,
required: true,
},
label: {
type: String,
default: "Progress",
},
color: {
type: String,
default: "bg-blue-500",
},
<script>
export default {
name: "ProgressBar",
props: {
value: {
type: Number,
required: true,
},
computed: {
clampedValue() {
return Math.max(0, Math.min(this.value, 100));
},
label: {
type: String,
default: "Progress",
},
};
</script>
<style scoped>
/* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
</style>
color: {
type: String,
default: "bg-blue-500",
},
},
computed: {
clampedValue() {
return Math.max(0, Math.min(this.value, 100));
},
},
};
</script>
<style scoped>
/* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
</style>