39 lines
1.2 KiB
Vue
39 lines
1.2 KiB
Vue
<script setup>
|
|
/**
|
|
* RqScoreBar.vue — Barre de score pondéré
|
|
*
|
|
* @prop value Number — score actuel
|
|
* @prop max Number — score maximum (défaut 20)
|
|
* @prop showLabel Boolean — affiche "X/max" à droite
|
|
*/
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
value: { type: Number, required: true },
|
|
max: { type: Number, default: 20 },
|
|
showLabel: { type: Boolean, default: true },
|
|
});
|
|
|
|
const pct = computed(() => Math.min(100, (props.value / props.max) * 100));
|
|
|
|
const colorClass = computed(() => {
|
|
if (pct.value >= 80) return 'bg-success';
|
|
if (pct.value >= 60) return 'bg-highlight';
|
|
return 'bg-accent';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2.5 w-full">
|
|
<div class="flex-1 h-[5px] bg-ink/[0.07] rounded-full overflow-hidden">
|
|
<div
|
|
:class="['h-full rounded-full transition-all duration-500', colorClass]"
|
|
:style="{ width: `${pct}%` }"
|
|
/>
|
|
</div>
|
|
<span v-if="showLabel" class="text-xs font-black text-ink tabular-nums min-w-[44px] text-right">
|
|
{{ value }}<span class="text-[9px] text-ink/40 font-semibold">/{{ max }}</span>
|
|
</span>
|
|
</div>
|
|
</template>
|