♻️ migrate dcs/dcsBadge to composition API

src/modules/dailyCreditsSummary/components/dscBadge.vue

@@ -1,62 +1,45 @@
 <template>
     <div class="input-group" style="width: auto">
-        <span
-            class="input-group-addon"
-            :style="`background: ${backgroundColor};color: ${textColor}`"
-        >
-            {{ desc }}
+        <span class="input-group-addon">
+            {{ props.desc }}
         </span>
         <span
             class="input-group-addon"
-            :class="{ 'text-success': total > 0, 'text-danger': total < 0 }"
+            :class="{
+                'text-success': props.total > 0,
+                'text-danger': props.total < 0,
+            }"
         >
-            {{ total.toLocaleString() }} ({{ amount.toLocaleString() }}x
-            <template v-if="showAverage">
-                , {{ Math.round(total / amount).toLocaleString() }}Ø
+            {{ props.total.toLocaleString() }} ({{
+                props.amount.toLocaleString()
+            }}x
+            <template v-if="props.showAverage">
+                , {{ Math.round(props.total / props.amount).toLocaleString() }}Ø
             </template>
             )
         </span>
     </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-    name: 'lssmv4-dcs-badge',
-    props: {
-        backgroundColor: {
-            type: String,
-            required: true,
-        },
-        textColor: {
-            type: String,
-            required: true,
-        },
-        desc: {
-            type: String,
-            required: true,
-        },
-        total: {
-            type: Number,
-            required: true,
-        },
-        amount: {
-            type: Number,
-            required: true,
-        },
-        showAverage: {
-            type: Boolean,
-            required: true,
-        },
-    },
-});
+<script setup lang="ts">
+const props = defineProps<{
+    backgroundColor: string;
+    textColor: string;
+    desc: string;
+    total: number;
+    amount: number;
+    showAverage: boolean;
+}>();
 </script>
 
 <style scoped lang="sass">
 .input-group:not(last-of-type)
     margin-right: 1rem
 
+    .input-group-addon:first-child
+        background-color: v-bind('props.backgroundColor')
+        color: v-bind('props.textColor')
+
 .text-danger
     color: #a94442 !important
 </style>