Merge pull request #300 from ozgurg/dev

release: v7.6.0

assets/scss/_utilities.scss

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

assets/scss/components/_index.scss

@@ -1 +1,2 @@
-@import "./dialog.scss";
+// FIXME: Removing this causes SASS error.
+@import "~vuetify/src/styles/styles.sass";

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>

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

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>

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() {

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