Merge pull request #297 from ozgurg/dev

release: v7.4.0

components/affordability-alert.vue

@@ -1,44 +1,27 @@
 <template>
-    <!-- DO NOT use v-html on the root element -->
     <vh-alert type="info">
-        <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
-        <div v-html="text" />
+        Türkiye'de asgari ücretle ({{ formattedMinimumWage }}) çalışan birisi yemeden içmeden bu ürünü <span
+        class="text-h6 font-weight-bold">{{ count }}</span> {{ timeUnit }} maaşıyla satın alabilir.
     </vh-alert>
 </template>
 
-<script>
+<script setup="">
 import { calculateMinimumWageDayCount, calculateMinimumWageMonthCount } from "@/utils/calculate-minimum-wage-count.js";
 import { moneyFormat } from "@/utils/formatter.js";
 
 const { MINIMUM_WAGE } = process.env;
 
-export default {
-    props: {
-        price: {
-            type: Number,
-            required: true
-        }
-    },
-    computed: {
-        text() {
-            const vm = this;
+const props = defineProps({
+    price: {
+        type: Number,
+        required: true
+    }
+});
 
-            const count = vm.minimumWageMonthCount > 1 ? vm.minimumWageMonthCount : vm.minimumWageDayCount;
-            const timeUnit = vm.minimumWageMonthCount > 1 ? "aylık" : "günlük";
+const minimumWageMonthCount = calculateMinimumWageMonthCount(props.price, MINIMUM_WAGE);
+const minimumWageDayCount = calculateMinimumWageDayCount(props.price, MINIMUM_WAGE);
 
-            return `Türkiye'de asgari ücretle (${vm.formattedMinimumWage}) çalışan birisi yemeden içmeden bu ürünü <span class="text-h6 font-weight-bold">${count}</span> ${timeUnit} maaşıyla satın alabilir.`;
-        },
-        formattedMinimumWage() {
-            return moneyFormat(MINIMUM_WAGE, "TRY");
-        },
-        minimumWageDayCount() {
-            const vm = this;
-            return calculateMinimumWageDayCount(vm.price, MINIMUM_WAGE);
-        },
-        minimumWageMonthCount() {
-            const vm = this;
-            return calculateMinimumWageMonthCount(vm.price, MINIMUM_WAGE);
-        }
-    }
-};
+const formattedMinimumWage = moneyFormat(MINIMUM_WAGE, "TRY");
+const count = minimumWageMonthCount > 1 ? minimumWageMonthCount : minimumWageDayCount;
+const timeUnit = minimumWageMonthCount > 1 ? "aylık" : "günlük";
 </script>

components/article-card-item.vue

@@ -1,32 +1,29 @@
 <template>
     <v-card
-        :to="article.url"
+        :to="props.article.url"
         outlined=""
-        class="px-4 py-6 px-lg-6 py-lg-8">
-        <v-card-title class="pa-0 mb-4">
-            {{ article.title }}
+        class="px-4 py-6">
+        <v-card-title class="pa-0 mb-6">
+            {{ props.article.title }}
         </v-card-title>
-        <v-card-text class="pa-0">
-            {{ article.description }}…
-        </v-card-text>
+        <v-card-subtitle class="pa-0">
+            {{ props.article.description }}…
+        </v-card-subtitle>
     </v-card>
 </template>
 
-<script>
-export default {
-    props: {
-        article: {
-            type: Object,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    article: {
+        type: Object,
+        required: true
     }
-};
+});
 </script>
 
 <style lang="scss" scoped="">
 .v-card {
-    min-height: 192px;
-    &__text {
+    .v-card__subtitle {
         @include vh-ellipsis-multiline(4)
     }
 }

components/article-grid.vue

@@ -1,6 +1,6 @@
 <template>
     <v-row>
-        <template v-for="_article in articles">
+        <template v-for="_article in props.articles">
             <v-col
                 :key="_article.title"
                 cols="12"
@@ -12,13 +12,11 @@
     </v-row>
 </template>
 
-<script>
-export default {
-    props: {
-        articles: {
-            type: Array,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    articles: {
+        type: Array,
+        required: true
     }
-};
+});
 </script>

components/calculator-card-item.vue

@@ -1,53 +1,51 @@
 <template>
     <v-card
-        :to="calculator.url"
+        :to="props.calculator.url"
         outlined=""
-        class="vh-calculator-card-item px-4 py-6 px-lg-6 py-lg-8">
-        <div class="vh-calculator-card-item__icon d-inline-block pa-4 rounded-circle mb-4">
+        class="px-4 py-6 px-lg-6 py-lg-8">
+        <div class="icon d-inline-block pa-4 rounded-circle mb-4">
             <v-icon
                 color="primary"
                 size="40">
-                {{ calculator.icon }}
+                {{ props.calculator.icon }}
             </v-icon>
         </div>
 
         <v-card-title class="pa-0 mb-4">
-            {{ calculator.title }}
+            {{ props.calculator.title }}
         </v-card-title>
 
         <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
-        <v-card-text
+        <v-card-subtitle
             class="pa-0"
-            v-html="calculator.summary" />
+            v-html="props.calculator.summary" />
 
         <v-icon
             color="white"
-            class="vh-calculator-card-item__bg-icon"
+            class="bg-icon"
             size="128">
-            {{ calculator.icon }}
+            {{ props.calculator.icon }}
         </v-icon>
     </v-card>
 </template>
 
-<script>
-export default {
-    props: {
-        calculator: {
-            type: Object,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    calculator: {
+        type: Object,
+        required: true
     }
-};
+});
 </script>
 
 <style lang="scss" scoped="">
-.vh-calculator-card-item {
+.v-card {
     position: relative;
-    &__icon {
-        background: rgba($vh-color-primary, .08)
+    .icon {
+        background: rgba($vh-color-primary, $vh-card-hover-opacity)
     }
-    &__bg-icon {
-        position: absolute !important;
+    .bg-icon {
+        position: absolute;
         inset-inline-end: 0;
         inset-block-end: 0;
         transform: translate(30%, -10%) rotate(-15deg);

components/calculator-grid.vue

@@ -11,12 +11,6 @@
     </v-row>
 </template>
 
-<script>
+<script setup="">
 import { calculators } from "@/domain/hesaplayicilar/calculator-list.js";
-
-export default {
-    data: () => ({
-        calculators
-    })
-};
 </script>

components/calculator-list-item.vue

@@ -1,26 +1,22 @@
 <template>
-    <v-list-item
-        :to="calculator.url"
-        color="primary">
+    <v-list-item :to="props.calculator.url">
         <v-list-item-icon>
             <v-icon>
-                {{ calculator.icon }}
+                {{ props.calculator.icon }}
             </v-icon>
         </v-list-item-icon>
 
         <v-list-item-title>
-            {{ calculator.shortTitle }}
+            {{ props.calculator.shortTitle }}
         </v-list-item-title>
     </v-list-item>
 </template>
 
-<script>
-export default {
-    props: {
-        calculator: {
-            type: Object,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    calculator: {
+        type: Object,
+        required: true
     }
-};
+});
 </script>

components/calculator-list.vue

@@ -14,12 +14,6 @@
     </v-list>
 </template>
 
-<script>
+<script setup="">
 import { calculators } from "@/domain/hesaplayicilar/calculator-list.js";
-
-export default {
-    data: () => ({
-        calculators
-    })
-};
 </script>

components/form-row.vue

@@ -2,7 +2,7 @@
     <v-row
         :class="{'horizontal': props.direction === 'horizontal'}"
         no-gutters=""
-        class="flex-column flex-sm-row">
+        class="form-row flex-column flex-sm-row">
         <v-col>
             <template v-if="props.label">
                 <label>
@@ -33,19 +33,18 @@ const props = defineProps({
 <style lang="scss" scoped="">
 @import "~vuetify/src/components/VTextField/_variables.scss";
 
-.row {
-    --vh-form-row-gap: .375rem;
+.form-row {
     --vh-form-row-label-col-width: 100%;
     --vh-form-row-label-justify-content: flex-start;
-    gap: var(--vh-form-row-gap);
+    gap: .375rem;
     &.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
+            --vh-form-row-label-justify-content: flex-end;
+            gap: 1rem
         }
     }
-    .col:first-child {
+    & > .col:first-child {
         flex: 0 0 var(--vh-form-row-label-col-width);
         max-width: var(--vh-form-row-label-col-width);
         label {

components/radio-grid.vue

@@ -42,31 +42,28 @@ const emitInput = item => emit("input", item.value);
 <style lang="scss" scoped="">
 @import "~vuetify/src/styles/styles.sass";
 
-// I chose to set it individually for each item count
-// to give more control over the user experience
-// on different screen resolutions and with different item counts.
+$optimal-width: 144px;
+
 .radio-grid {
-    --vh-radio-grid-optimal-width: 144px;
     display: grid;
-    grid-template-columns: var(--vh-radio-grid-columns);
     grid-gap: .75rem;
     grid-auto-rows: 1fr;
     &:has(> .v-card:nth-child(1)) {
-        --vh-radio-grid-columns: repeat(auto-fill, minmax(var(--vh-radio-grid-optimal-width), 1fr))
+        grid-template-columns: repeat(auto-fill, minmax(#{$optimal-width}, 1fr))
     }
     &:has(> .v-card:nth-child(2)) {
-        --vh-radio-grid-columns: repeat(2, 1fr)
+        grid-template-columns: repeat(2, 1fr)
     }
     &:has(> .v-card:nth-child(3)) {
-        --vh-radio-grid-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         @media #{map-get($display-breakpoints, "sm-and-up")} {
-            --vh-radio-grid-columns: repeat(auto-fill, minmax(var(--vh-radio-grid-optimal-width), 1fr))
+            grid-template-columns: repeat(auto-fill, minmax(#{$optimal-width}, 1fr))
         }
     }
     &:has(> .v-card:nth-child(4)) {
-        --vh-radio-grid-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         @media #{map-get($display-breakpoints, "sm-and-up")} {
-            --vh-radio-grid-columns: repeat(4, 1fr)
+            grid-template-columns: repeat(4, 1fr)
         }
     }
     .v-card {

components/retail-price-update-info.vue

@@ -1,12 +1,16 @@
 <template>
-    <p class="text--secondary subtitle-2 mb-0 text-balance">
-        Piyasa fiyatı <b>{{ formattedDate }}</b> tarihinde <a
-        :href="sourceUrl"
-        class="text--secondary"
-        target="_blank"
-        rel="nofollow noopener noreferrer">{{ domain }}</a>
-        sitesinden elle güncellenmiştir. Güncel fiyat farklı olabilir.
-    </p>
+    <div class="text--secondary subtitle-2">
+        <p class="mb-0">
+            Son güncellenme: {{ formattedUpdatedDate }}
+        </p>
+        <p class="mb-0">
+            Kaynak: <a
+            :href="sourceUrl"
+            class="text--secondary"
+            target="_blank"
+            rel="nofollow noopener noreferrer">{{ domain }}</a>
+        </p>
+    </div>
 </template>
 
 <script setup="">
@@ -24,6 +28,6 @@ const props = defineProps({
     }
 });
 
+const formattedUpdatedDate = dateFormat(props.lastUpdatedDate);
 const domain = getDomainFromUrl(props.sourceUrl);
-const formattedDate = dateFormat(props.lastUpdatedDate);
 </script>