From 804b9381f347dbe221bea1fa05af1b8b0c0e3442 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Tue, 2 Apr 2024 22:33:09 +0300
Subject: [PATCH] components(calculator/result-list): migrate to Composition
 API with refactor

---
 assets/scss/_utilities.scss           |  4 +++
 components/calculator/result-list.vue | 35 +++++++++++----------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/assets/scss/_utilities.scss b/assets/scss/_utilities.scss
index 14b757ae..6a19f905 100644
--- a/assets/scss/_utilities.scss
+++ b/assets/scss/_utilities.scss
@@ -8,6 +8,10 @@
     gap: .5rem !important
 }
 
+.gap-10 {
+    gap: 1.25rem !important
+}
+
 .gap-12 {
     gap: 1.5rem !important
 }
diff --git a/components/calculator/result-list.vue b/components/calculator/result-list.vue
index 0a843562..246f3689 100644
--- a/components/calculator/result-list.vue
+++ b/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>