calckey/packages/client/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" scoped>
.ceaaebcd {
	&.isPlus {
		color: var(--success);
	}

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

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