budgeteer/web/src/components/Currency.vue

23 lines
542 B
Vue

<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps<{
value: number | undefined
negativeClass?: string
positiveClass?: string
}>();
const internalValue = computed(() => Number(props.value ?? 0));
const formattedValue = computed(() => internalValue.value.toLocaleString(undefined, {
minimumFractionDigits: 2,
}));
</script>
<template>
<span
class="text-right"
:class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
>{{ formattedValue }} </span>
</template>