refactor(frontend): refactor MkNumberDiff.vue

packages/frontend/src/components/MkNumberDiff.vue

@@ -1,47 +1,32 @@
 <template>
-<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
+<span class="ceaaebcd" :class="{ [$style.isPlus]: isPlus, [$style.isMinus]: isMinus, [$style.isZero]: isZero }">
 	<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
 </span>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import number from '@/filters/number';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	value: number;
-		value: {
+}>();
-			type: Number,
-			required: true,
-		},
-	},
 
-	setup(props) {
+const isPlus = computed(() => props.value > 0);
-		const isPlus = computed(() => props.value > 0);
+const isMinus = computed(() => props.value < 0);
-		const isMinus = computed(() => props.value < 0);
+const isZero = computed(() => props.value === 0);
-		const isZero = computed(() => props.value === 0);
-		return {
-			isPlus,
-			isMinus,
-			isZero,
-			number,
-		};
-	},
-});
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.ceaaebcd {
+.isPlus {
-	&.isPlus {
 	color: var(--success);
-	}
+}
 
-	&.isMinus {
+.isMinus {
 	color: var(--error);
-	}
+}
 
-	&.isZero {
+.isZero {
 	opacity: 0.5;
-	}
 }
 </style>