mizzkey/packages/frontend/src/components/MkNumberDiff.vue

<template>
<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
	<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
</span>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import number from '@/filters/number';

export default defineComponent({
	props: {
		value: {
			type: Number,
			required: true,
		},
	},

	setup(props) {
		const isPlus = computed(() => props.value > 0);
		const isMinus = computed(() => props.value < 0);
		const isZero = computed(() => props.value === 0);
		return {
			isPlus,
			isMinus,
			isZero,
			number,
		};
	},
});
</script>

<style lang="scss">
.ceaaebcd {
	&.isPlus {
		color: var(--success);
	}

	&.isMinus {
		color: var(--error);
	}

	&.isZero {
		opacity: 0.5;
	}
}
</style>