release: v7.3.0

assets/scss/_utilities.scss

@@ -27,3 +27,7 @@
 .flex-1 {
     flex: 1
 }
+
+.text-balance {
+    text-wrap: balance
+}

assets/scss/style.scss

@@ -26,3 +26,7 @@ video {
     max-width: 100%;
     height: auto
 }
+
+h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance
+}

components/Calculator/CalculatorResultFormRow.vue

@@ -14,7 +14,7 @@
                 <v-divider
                     class="my-2 me-3"
                     vertical="" />
-                <copy-icon-button :value-to-copy="value" />
+                <copy-button :value-to-copy="value" />
             </template>
         </v-text-field>
     </form-row>

components/Calculator/CalculatorShareDialogUrl.vue

@@ -50,9 +50,7 @@
             </template>
         </v-row>
 
-        <div
-            id="calculatorShareDialogCopyUrlContainer"
-            class="mt-8">
+        <div class="mt-8">
             <v-text-field
                 :value="url"
                 hide-details=""
@@ -62,9 +60,7 @@
                     <v-divider
                         class="my-2 me-3"
                         vertical="" />
-                    <lazy-copy-icon-button
-                        :value-to-copy="url"
-                        container-selector="#calculatorShareDialogCopyUrlContainer" />
+                    <lazy-copy-button :value-to-copy="url" />
                 </template>
             </v-text-field>
         </div>

components/copy-icon-button.vue → components/copy-button.vue

@@ -44,10 +44,6 @@ export default {
         valueToCopy: {
             type: String,
             required: true
-        },
-        containerSelector: {
-            type: String,
-            default: null
         }
     },
     methods: {
@@ -66,11 +62,7 @@ export default {
         },
         _copyValue() {
             const vm = this;
-
-            // DO NOT pass "null" as the default value.
-            // When "null" is used instead of "false", "$copyText" doesn't behave as expected.
-            const container = vm.containerSelector ? document.querySelector(vm.containerSelector) : false;
-            vm.$copyText(vm.valueToCopy, container);
+            navigator.clipboard.writeText(vm.valueToCopy);
         },
         _destroyTimeout() {
             const vm = this;

components/exchange-rate-card-item.vue

@@ -1,37 +1,27 @@
 <template>
-    <v-card
-        elevation="0"
-        class="pa-4">
-        <v-card-text class="pa-0">
+    <v-card elevation="0">
+        <v-card-subtitle class="pb-0">
             {{ currencyCode }}
-        </v-card-text>
+        </v-card-subtitle>
 
-        <template v-if="isLoading">
-            <v-skeleton-loader
-                class="mb-0"
-                max-width="68"
-                max-height="32"
-                width="100%"
-                type="image" />
-        </template>
-        <template v-else>
-            <v-card-title class="pa-0">
-                <template v-if="exchangeRate">
-                    <span class="tabular-nums">
-                        {{ moneyFormat(exchangeRate.rate, "TRY") }}
-                    </span>
-                </template>
-                <template v-else>
-                    <!--
-                    Wrapping with "div" makes height same as "v-skeleton-loader".
-                    This prevents layout shifting.
-                    -->
-                    <div class="red--text">
-                        Hata 😊
-                    </div>
-                </template>
-            </v-card-title>
-        </template>
+        <v-card-title class="pt-0">
+            <template v-if="isLoading">
+                <v-skeleton-loader
+                    class="mb-0"
+                    max-width="68"
+                    max-height="32"
+                    width="100%"
+                    type="image" />
+            </template>
+            <template v-else-if="exchangeRate !== null">
+                <span class="tabular-nums">
+                    {{ moneyFormat(exchangeRate.rate, "TRY") }}
+                </span>
+            </template>
+            <template v-else>
+                Hata 😊
+            </template>
+        </v-card-title>
     </v-card>
 </template>
 
@@ -51,20 +41,15 @@ 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(() => {
-                    setTimeout(() => {
-                        vm.isLoading = false;
-                    }, 195);
-                });
+            try {
+                vm.exchangeRate = await vm.$store.dispatch("exchange-rates/loadExchangeRateFromApi", vm.currencyCode);
+            } catch (error) {
+                vm.exchangeRate = null;
+            } finally {
+                vm.isLoading = false;
+            }
         }
     },
     mounted() {

components/form-row.vue

@@ -1,54 +1,51 @@
 <template>
     <v-row
-        :class="{'vh-form-row--horizontal': direction === 'horizontal'}"
+        :class="{'horizontal': props.direction === 'horizontal'}"
         no-gutters=""
-        class="vh-form-row flex-column flex-sm-row">
-        <v-col class="vh-form-row__label-col">
-            <template v-if="label">
+        class="flex-column flex-sm-row">
+        <v-col>
+            <template v-if="props.label">
                 <label>
-                    {{ label }}
+                    {{ props.label }}
                 </label>
             </template>
         </v-col>
 
         <v-col>
-            <slot />
+            <slot v-if="$slots.default" />
         </v-col>
     </v-row>
 </template>
 
-<script>
-export default {
-    props: {
-        label: {
-            type: String,
-            default: null
-        },
-        direction: {
-            type: String,
-            default: "vertical"
-        }
+<script setup="">
+const props = defineProps({
+    label: {
+        type: String,
+        default: null
+    },
+    direction: {
+        type: String,
+        default: "vertical"
     }
-};
+});
 </script>
 
 <style lang="scss" scoped="">
 @import "~vuetify/src/components/VTextField/_variables.scss";
 
-.vh-form-row {
-    $self: &;
-    gap: var(--vh-form-row-gap);
+.row {
     --vh-form-row-gap: .375rem;
     --vh-form-row-label-col-width: 100%;
     --vh-form-row-label-justify-content: flex-start;
-    &--horizontal {
+    gap: var(--vh-form-row-gap);
+    &.horizontal {
         @media #{map-get($display-breakpoints, "sm-and-up")} {
             --vh-form-row-gap: 1rem;
             --vh-form-row-label-col-width: 170px; // Optimized for "TRT bandrolü (€20,00)" text
             --vh-form-row-label-justify-content: flex-end
         }
     }
-    &__label-col {
+    .col:first-child {
         flex: 0 0 var(--vh-form-row-label-col-width);
         max-width: var(--vh-form-row-label-col-width);
         label {
@@ -58,8 +55,5 @@ export default {
             justify-content: var(--vh-form-row-label-justify-content)
         }
     }
-    :deep(.v-input__append-outer) {
-        margin-block-start: 0 !important
-    }
 }
 </style>

components/heading-1.vue

@@ -1,28 +1,17 @@
 <template>
-    <div class="mb-12">
-        <component
-            :is="tag"
-            class="vh-heading-1 text-h4 text-lg-h3 mb-4 font-weight-bold text-center text-md-start">
-            <slot />
-        </component>
-
-        <v-divider />
-    </div>
+    <component
+        :is="props.tag"
+        class="text-h4 text-lg-h3 font-weight-bold text-center text-md-start">
+        <slot v-if="$slots.default" />
+        <v-divider class="mb-12 mt-4" />
+    </component>
 </template>
 
-<script>
-export default {
-    props: {
-        tag: {
-            type: String,
-            default: "h1"
-        }
+<script setup="">
+const props = defineProps({
+    tag: {
+        type: String,
+        default: "h1"
     }
-};
+});
 </script>
-
-<style lang="scss" scoped="">
-.vh-heading-1 {
-    text-wrap: balance
-}
-</style>

components/heading-2.vue

@@ -1,39 +1,37 @@
 <template>
     <component
-        :is="tag"
-        class="vh-heading-2 text-h5 font-weight-bold mb-6">
-        <template v-if="to">
+        :is="props.tag"
+        class="heading-2 text-h5 font-weight-bold mb-6">
+        <template v-if="props.to">
             <nuxt-link
-                :to="to"
+                :to="props.to"
                 class="text-decoration-none">
-                <slot />
+                <slot v-if="$slots.default" />
             </nuxt-link>
         </template>
         <template v-else>
-            <slot />
+            <slot v-if="$slots.default" />
         </template>
     </component>
 </template>
 
-<script>
-export default {
-    props: {
-        to: {
-            type: String,
-            default: null
-        },
-        tag: {
-            type: String,
-            default: "h2"
-        }
+<script setup="">
+const props = defineProps({
+    to: {
+        type: String,
+        default: null
+    },
+    tag: {
+        type: String,
+        default: "h2"
     }
-};
+});
 </script>
 
 <style lang="scss" scoped="">
 @import "~vuetify/src/styles/settings/_variables.scss";
 
-.vh-heading-2 {
+.heading-2 {
     position: relative;
     padding-inline-start: 1.125rem;
     color: #fff;

components/inner-container.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="vh-inner-container">
-        <slot />
+    <div>
+        <slot v-if="$slots.default" />
     </div>
 </template>
 
 <style lang="scss" scoped="">
-.vh-inner-container {
+div {
     max-width: 900px
 }
 </style>

components/main-container.vue

@@ -1,8 +1,8 @@
 <template>
     <v-main>
-        <!-- px-5 set to align to v-app-bar-nav-icon -->
+        <!-- `px-5` is set to align with `v-app-bar-nav-icon` -->
         <v-container class="px-5 px-md-12 my-8 my-md-16">
-            <slot />
+            <slot v-if="$slots.default" />
         </v-container>
     </v-main>
 </template>