30 lines
614 B
Vue
30 lines
614 B
Vue
<template>
|
|
<section class="kpi-row">
|
|
<article
|
|
v-for="card in kpiCards"
|
|
:key="card.key"
|
|
class="kpi-card"
|
|
:class="card.theme"
|
|
>
|
|
<p>{{ card.label }}</p>
|
|
<div class="kpi-value">{{ formatNumber(card.value) }}</div>
|
|
<span class="kpi-delta" :class="card.delta >= 0 ? 'up' : 'down'">
|
|
{{ card.delta >= 0 ? '+' : '' }}{{ card.delta.toFixed(2) }}%
|
|
</span>
|
|
</article>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
kpiCards: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
formatNumber: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|