components(calculator/result-list): migrate to Composition API with r…

…efactor

assets/scss/_utilities.scss

@@ -8,6 +8,10 @@
     gap: .5rem !important
 }
 
+.gap-10 {
+    gap: 1.25rem !important
+}
+
 .gap-12 {
     gap: 1.5rem !important
 }

components/calculator/result-list.vue

@@ -1,27 +1,20 @@
 <template>
-    <div class="vh-result-list d-flex flex-column">
-        <calculator-result-form-row
-            v-for="_item in items"
-            :key="_item.key"
-            :value="_item.value"
-            :label="_item.key"
-            :is-highlighted="_item.isHighlighted ?? false" />
+    <div class="d-flex flex-column gap-10">
+        <template v-for="_item in props.items">
+            <calculator-result-form-row
+                :key="_item.key"
+                :value="_item.value"
+                :label="_item.key"
+                :is-highlighted="_item.isHighlighted ?? false" />
+        </template>
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        items: {
-            type: Array,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    items: {
+        type: Array,
+        required: true
     }
-};
+});
 </script>
-
-<style scoped="">
-.vh-result-list {
-    gap: 1.125rem
-}
-</style>