49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<script setup>
|
|
import { toCurrency, toPercentage } from 'filters/index';
|
|
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: 'percentage', // 'currency'
|
|
},
|
|
});
|
|
|
|
const valueClass = computed(() =>
|
|
props.value === 0 ? 'neutral' : props.value > 0 ? 'positive' : 'negative',
|
|
);
|
|
const iconName = computed(() =>
|
|
props.value === 0 ? 'equal' : props.value > 0 ? 'arrow_upward' : 'arrow_downward',
|
|
);
|
|
const formattedValue = computed(() => props.value);
|
|
</script>
|
|
<template>
|
|
<span :class="valueClass">
|
|
<QIcon :name="iconName" size="sm" class="value-icon" />
|
|
<span v-if="$props.format === 'percentage'">{{
|
|
toPercentage(formattedValue)
|
|
}}</span>
|
|
<span v-if="$props.format === 'currency'">{{ toCurrency(formattedValue) }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.positive {
|
|
color: $secondary;
|
|
}
|
|
.negative {
|
|
color: $negative;
|
|
}
|
|
.neutral {
|
|
color: $primary;
|
|
}
|
|
.value-icon {
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|