From d5531d0b2ef322fcd13e7eb5d58d95384ccdd2f3 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:28:36 +0300
Subject: [PATCH 1/8] components(calculator/inner-container): refactor

---
 components/calculator/inner-container.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/calculator/inner-container.vue b/components/calculator/inner-container.vue
index 0e43d5da..bd886048 100644
--- a/components/calculator/inner-container.vue
+++ b/components/calculator/inner-container.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="vh-calculator-inner-container">
-        <slot />
+    <div>
+        <slot v-if="$slots.default" />
     </div>
 </template>
 
-<style>
-.vh-calculator-inner-container {
+<style lang="scss" scoped="">
+div {
     max-width: 512px
 }
 </style>

From 81ffbb24564141131c5b8970aa1b99d46a62dcc6 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:30:14 +0300
Subject: [PATCH 2/8] components(calculator/result-form-row): migrate to
 Composition API

---
 components/calculator/result-form-row.vue | 42 +++++++++++------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/components/calculator/result-form-row.vue b/components/calculator/result-form-row.vue
index 50af0992..a644e4e1 100644
--- a/components/calculator/result-form-row.vue
+++ b/components/calculator/result-form-row.vue
@@ -1,11 +1,11 @@
 <template>
     <form-row
-        :label="label"
-        :is-highlighted="isHighlighted"
+        :label="props.label"
+        :is-highlighted="props.isHighlighted"
         direction="horizontal">
         <v-text-field
-            :value="value"
-            :aria-label="label"
+            :value="props.value"
+            :aria-label="props.label"
             dense=""
             class="tabular-nums"
             hide-details=""
@@ -15,32 +15,30 @@
                 <v-divider
                     class="my-2 me-3"
                     vertical="" />
-                <copy-button :value-to-copy="value" />
+                <copy-button :value-to-copy="props.value" />
             </template>
         </v-text-field>
     </form-row>
 </template>
 
-<script>
-export default {
-    props: {
-        label: {
-            type: String,
-            default: null
-        },
-        value: {
-            type: String,
-            default: null
-        },
-        isHighlighted: {
-            type: Boolean,
-            default: false
-        }
+<script setup="">
+const props = defineProps({
+    label: {
+        type: String,
+        default: null
+    },
+    value: {
+        type: String,
+        default: null
+    },
+    isHighlighted: {
+        type: Boolean,
+        default: false
     }
-};
+});
 </script>
 
-<style scoped="">
+<style lang="scss" scoped="">
 :deep(.v-input__append-inner) {
     padding-inline-start: .75rem !important;
     margin-block: auto !important

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 3/8] 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>

From 89ee81d49a7acd3622877f92d8492abce7719abf 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 23:03:29 +0300
Subject: [PATCH 4/8] components(calculator/share-dialog): major refactor

---
 assets/scss/components/_index.scss     |   3 +-
 assets/scss/components/dialog.scss     |  32 ----
 components/calculator/share-dialog.vue | 211 +++++++++++++------------
 3 files changed, 108 insertions(+), 138 deletions(-)
 delete mode 100644 assets/scss/components/dialog.scss

diff --git a/assets/scss/components/_index.scss b/assets/scss/components/_index.scss
index ce42a70c..751c56aa 100644
--- a/assets/scss/components/_index.scss
+++ b/assets/scss/components/_index.scss
@@ -1 +1,2 @@
-@import "./dialog.scss";
+// FIXME: Removing this causes SASS error.
+@import "~vuetify/src/styles/styles.sass";
diff --git a/assets/scss/components/dialog.scss b/assets/scss/components/dialog.scss
deleted file mode 100644
index 305a8ed0..00000000
--- a/assets/scss/components/dialog.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "~vuetify/src/styles/styles.sass";
-
-$vh-dialog-selector: ".vh-dialog";
-
-#{$vh-dialog-selector} {
-    display: flex;
-    flex-flow: column nowrap;
-    background: map-get($material-dark-elevation-colors, "1");
-    &__header {
-        flex: 0
-    }
-    &__content {
-        height: 100%;
-        overflow-y: auto;
-        flex: 1
-    }
-}
-
-@media #{map-get($display-breakpoints, "sm-and-down")} {
-    html:has(#{$vh-dialog-selector}.v-dialog--active) {
-        position: fixed;
-        &, body {
-            width: 100%;
-            height: 100%;
-            inset: 0;
-            overflow: hidden
-        }
-        body {
-            position: absolute
-        }
-    }
-}
diff --git a/components/calculator/share-dialog.vue b/components/calculator/share-dialog.vue
index 6044224c..97554f03 100644
--- a/components/calculator/share-dialog.vue
+++ b/components/calculator/share-dialog.vue
@@ -1,140 +1,141 @@
 <template>
     <v-dialog
-        :value="value"
+        :value="props.value"
         :fullscreen="$vuetify.breakpoint.smAndDown"
-        :transition="transition"
-        content-class="vh-dialog"
+        :transition="$vuetify.breakpoint.smAndDown ? 'dialog-bottom-transition' : 'dialog-transition'"
         overlay-color="#000"
         overlay-opacity=".75"
         width="700"
         @click:outside="close()"
         @close="close()">
-        <div class="vh-dialog__header">
-            <v-toolbar
-                class="px-2"
-                elevation="0">
-                <v-toolbar-title class="text-center">
-                    Sonuçları paylaş
-                </v-toolbar-title>
+        <v-toolbar flat="">
+            <v-toolbar-title>
+                Sonuçları paylaş
+            </v-toolbar-title>
 
-                <v-spacer />
+            <v-spacer />
 
-                <v-btn
-                    icon=""
-                    @click="close()">
-                    <v-icon>
-                        {{ icons.mdiClose }}
-                    </v-icon>
-                </v-btn>
-            </v-toolbar>
+            <v-btn
+                icon=""
+                @click="close()">
+                <v-icon>
+                    {{ mdiClose }}
+                </v-icon>
+            </v-btn>
 
-            <v-tabs
-                v-model="currentTab"
-                :grow="$vuetify.breakpoint.mdAndDown"
-                :fixed-tabs="!$vuetify.breakpoint.mdAndDown"
-                class="vh-share-tabs"
-                background-color="transparent">
-                <v-tab>
-                    <v-icon left="">
-                        {{ icons.mdiLink }}
-                    </v-icon>
-                    <span>Bağlantı</span>
-                </v-tab>
-                <v-tab>
-                    <v-icon left="">
-                        {{ icons.mdiCellphoneScreenshot }}
-                    </v-icon>
-                    <span>Ekran Görüntüsü</span>
-                </v-tab>
-            </v-tabs>
-        </div>
+            <template #extension>
+                <v-tabs
+                    v-model="currentTab"
+                    fixed-tabs="">
+                    <v-tab>
+                        <v-icon left="">
+                            {{ mdiLink }}
+                        </v-icon>
+                        <span>Bağlantı</span>
+                    </v-tab>
+                    <v-tab>
+                        <v-icon left="">
+                            {{ mdiCellphoneScreenshot }}
+                        </v-icon>
+                        <span>Ekran Görüntüsü</span>
+                    </v-tab>
+                </v-tabs>
+            </template>
+        </v-toolbar>
 
-        <div class="vh-dialog__content">
+        <div class="body">
             <template v-if="currentTab === 0">
-                <div class="d-flex flex-column h-100">
-                    <div class="mt-auto py-10 px-6 py-lg-12 px-lg-8">
-                        <lazy-calculator-share-dialog-url :form="form" />
-                    </div>
+                <div class="mt-auto py-10 px-6 py-lg-12 px-lg-8">
+                    <lazy-calculator-share-dialog-url :form="props.form" />
                 </div>
             </template>
             <template v-else-if="currentTab === 1">
-                <div class="d-flex flex-column h-100">
-                    <div class="mt-auto py-10 py-lg-6 px-2">
-                        <calculator-share-dialog-screenshot
-                            :input="screenshotInput"
-                            :output="screenshotOutput"
-                            :calculator-title="calculatorTitle"
-                            :preset-title="presetTitle"
-                            :preset-option-title="presetOptionTitle" />
-                    </div>
+                <div class="mt-auto py-10 py-lg-6 px-2">
+                    <calculator-share-dialog-screenshot
+                        :input="props.screenshotInput"
+                        :output="props.screenshotOutput"
+                        :calculator-title="props.calculatorTitle"
+                        :preset-title="props.presetTitle"
+                        :preset-option-title="props.presetOptionTitle" />
                 </div>
             </template>
         </div>
     </v-dialog>
 </template>
 
-<script>
+<script setup="">
 import { mdiCellphoneScreenshot, mdiClose, mdiLink } from "@mdi/js";
+import { ref } from "vue";
 
-export default {
-    data: () => ({
-        icons: {
-            mdiClose,
-            mdiLink,
-            mdiCellphoneScreenshot
-        },
-        currentTab: 0
-    }),
-    props: {
-        value: {
-            type: Boolean
-        },
-        form: {
-            type: Object,
-            required: true
-        },
-        screenshotInput: {
-            type: Array,
-            default: () => ([])
-        },
-        screenshotOutput: {
-            type: Array,
-            required: true
-        },
-        calculatorTitle: {
-            type: String,
-            required: true
-        },
-        presetTitle: {
-            type: String,
-            default: null
-        },
-        presetOptionTitle: {
-            type: String,
-            default: null
-        }
+const props = defineProps({
+    value: {
+        type: Boolean
     },
-    methods: {
-        close() {
-            const vm = this;
-            vm.$emit("input", false);
-        }
+    form: {
+        type: Object,
+        required: true
     },
-    computed: {
-        transition() {
-            const vm = this;
-            return vm.$vuetify.breakpoint.smAndDown ?
-                "dialog-bottom-transition" :
-                "dialog-transition";
-        }
+    screenshotInput: {
+        type: Array,
+        default: () => ([])
+    },
+    screenshotOutput: {
+        type: Array,
+        required: true
+    },
+    calculatorTitle: {
+        type: String,
+        required: true
+    },
+    presetTitle: {
+        type: String,
+        default: null
+    },
+    presetOptionTitle: {
+        type: String,
+        default: null
     }
+});
+const emit = defineEmits(["input"]);
+
+const currentTab = ref(0);
+
+const close = () => {
+    emit("input", false);
 };
 </script>
 
 <style lang="scss" scoped="">
 @import "~vuetify/src/styles/styles.sass";
 
-.vh-share-tabs {
-    background: map-get($material-dark-elevation-colors, "4")
+:deep(.v-dialog) {
+    display: flex;
+    flex-flow: column nowrap;
+    background: map-get($material-dark-elevation-colors, "1");
+    .v-toolbar {
+        flex: 0
+    }
+    .body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow-y: auto;
+        flex: 1
+    }
+}
+
+@media #{map-get($display-breakpoints, "sm-and-down")} {
+    html:has(.v-dialog.v-dialog--active) {
+        position: fixed;
+        &, body {
+            width: 100%;
+            height: 100%;
+            inset: 0;
+            overflow: hidden
+        }
+        body {
+            position: absolute
+        }
+    }
 }
 </style>

From bc5dc25356e07c4278a5a062f9a078a0f5dc8fd5 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 23:06:38 +0300
Subject: [PATCH 5/8] components(calculator/share-dialog-url): minor refactor

---
 components/calculator/share-dialog-url.vue | 33 ++++------------------
 1 file changed, 6 insertions(+), 27 deletions(-)

diff --git a/components/calculator/share-dialog-url.vue b/components/calculator/share-dialog-url.vue
index 7a2892b1..7b75815b 100644
--- a/components/calculator/share-dialog-url.vue
+++ b/components/calculator/share-dialog-url.vue
@@ -19,15 +19,9 @@
                         elevation="0"
                         block=""
                         rounded="">
-                        <template v-if="isCustomIcon(_item)">
-                            <!-- eslint-disable vue/no-v-html -->
-                            <div v-html="loadCustomIconAsHtml(_item)" />
-                        </template>
-                        <template v-else>
-                            <v-icon size="28">
-                                {{ _item.icon }}
-                            </v-icon>
-                        </template>
+                        <vh-icon
+                            :icon="_item.icon"
+                            :size="28" />
                     </v-btn>
                 </v-col>
             </template>
@@ -84,7 +78,6 @@ import {
     createXShareUrl,
     createWhatsAppShareUrl
 } from "@/utils/create-social-media-share-url.js";
-import { isCustomIcon, loadCustomIconAsHtml } from "@/utils/custom-icon.js";
 
 export default {
     data: () => ({
@@ -107,12 +100,6 @@ export default {
                 });
             } catch {
             }
-        },
-        isCustomIcon(item) {
-            return isCustomIcon(item.icon);
-        },
-        loadCustomIconAsHtml(item) {
-            return loadCustomIconAsHtml(item.icon);
         }
     },
     computed: {
@@ -135,7 +122,7 @@ export default {
             const vm = this;
             return [
                 {
-                    url: createFacebookShareUrl(vm.url, document.title),
+                    url: createFacebookShareUrl(vm.url),
                     title: "Facebook'ta paylaş",
                     color: "#1877f2",
                     icon: mdiFacebook
@@ -147,7 +134,7 @@ export default {
                     icon: "x.svg"
                 },
                 {
-                    url: createWhatsAppShareUrl(vm.url, document.title),
+                    url: createWhatsAppShareUrl(vm.url),
                     title: "WhatsApp ile gönder",
                     color: "#25d366",
                     icon: mdiWhatsapp
@@ -170,15 +157,7 @@ export default {
 };
 </script>
 
-<style scoped="">
-/* Custom icons for social media sharing */
-:deep(svg) {
-    vertical-align: middle;
-    width: 1.75rem;
-    height: 1.75rem
-}
-
-/* Copy button for URL sharing */
+<style lang="scss" scoped="">
 :deep(.v-input__append-inner) {
     padding-inline-start: .75rem !important;
     margin-block: auto !important

From 6622773ff4e7952a5d756c1fbd5259c1527ad869 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 23:09:17 +0300
Subject: [PATCH 6/8] 
 components(calculator/share-dialog-screenshot-exchange-rate-item): refactor

---
 ...e-dialog-screenshot-exchange-rate-item.vue | 40 +++++++------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/components/calculator/share-dialog-screenshot-exchange-rate-item.vue b/components/calculator/share-dialog-screenshot-exchange-rate-item.vue
index 3dfbb62d..3047a514 100644
--- a/components/calculator/share-dialog-screenshot-exchange-rate-item.vue
+++ b/components/calculator/share-dialog-screenshot-exchange-rate-item.vue
@@ -12,30 +12,22 @@
                 width="100%"
                 type="image" />
         </template>
+        <template v-else-if="exchangeRate !== null">
+            <span class="grey--text text--lighten-1">
+                {{ moneyFormat(exchangeRate.rate, "TRY") }}
+            </span>
+        </template>
         <template v-else>
-            <div class="grey--text text--lighten-1">
-                <template v-if="exchangeRate">
-                    {{ moneyFormat(exchangeRate.rate, "TRY") }}
-                </template>
-                <template v-else>
-                    <v-icon
-                        color="red"
-                        size="20">
-                        {{ errorIcon }}
-                    </v-icon>
-                </template>
-            </div>
+            Hata 😊
         </template>
     </div>
 </template>
 
 <script>
-import { mdiAlertCircle } from "@mdi/js";
 import { moneyFormat } from "@/utils/formatter.js";
 
 export default {
     data: () => ({
-        errorIcon: mdiAlertCircle,
         isLoading: true,
         exchangeRate: null
     }),
@@ -47,18 +39,16 @@ export default {
     },
     methods: {
         moneyFormat,
-        _load() {
+        async _load() {
             const vm = this;
-            vm.$store.dispatch("exchange-rates/loadExchangeRateFromApi", vm.currencyCode)
-                .then(exchangeRate => {
-                    vm.exchangeRate = exchangeRate;
-                })
-                .catch(() => {
-                    vm.exchangeRate = null;
-                })
-                .finally(() => {
-                    vm.isLoading = false;
-                });
+            vm.exchangeRate = null;
+            try {
+                vm.exchangeRate = await vm.$store.dispatch("exchange-rates/loadExchangeRateFromApi", vm.currencyCode);
+            } catch (error) {
+                vm.exchangeRate = null;
+            } finally {
+                vm.isLoading = false;
+            }
         }
     },
     mounted() {

From a6e1f8f55d3473340b41bc804158276541053fbd 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 23:10:35 +0300
Subject: [PATCH 7/8] components(calculator/share-dialog): fix ESC close state

---
 components/calculator/share-dialog.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/calculator/share-dialog.vue b/components/calculator/share-dialog.vue
index 97554f03..267fa880 100644
--- a/components/calculator/share-dialog.vue
+++ b/components/calculator/share-dialog.vue
@@ -7,6 +7,7 @@
         overlay-opacity=".75"
         width="700"
         @click:outside="close()"
+        @keydown.esc="close()"
         @close="close()">
         <v-toolbar flat="">
             <v-toolbar-title>

From 85642b797e47195dc7566c60e219c8c58ca6801d 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 23:10:46 +0300
Subject: [PATCH 8/8] 7.6.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 881d2c74..a7e21355 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "vergihesaplayici.com",
-    "version": "7.5.1",
+    "version": "7.6.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "vergihesaplayici.com",
-            "version": "7.5.1",
+            "version": "7.6.0",
             "license": "MIT",
             "dependencies": {
                 "firebase": "10.10.0",
diff --git a/package.json b/package.json
index 999fb00f..7bbb7904 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vergihesaplayici.com",
-    "version": "7.5.1",
+    "version": "7.6.0",
     "description": "vergihesaplayici.com, vergi hesaplar.",
     "license": "MIT",
     "homepage": "https://vergihesaplayici.com/",