From 663fce9cd7b396ad9eeca6daa7ef22201c09c51f 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: Sat, 30 Mar 2024 22:55:50 +0300
Subject: [PATCH] components(form-row): refactor

---
 components/form-row.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/components/form-row.vue b/components/form-row.vue
index a75d55e3..f93c7d6d 100644
--- a/components/form-row.vue
+++ b/components/form-row.vue
@@ -1,9 +1,9 @@
 <template>
     <v-row
-        :class="{'vh-form-row--horizontal': props.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">
+        class="flex-column flex-sm-row">
+        <v-col>
             <template v-if="props.label">
                 <label>
                     {{ props.label }}
@@ -12,7 +12,7 @@
         </v-col>
 
         <v-col>
-            <slot />
+            <slot v-if="$slots.default" />
         </v-col>
     </v-row>
 </template>
@@ -33,20 +33,19 @@ const props = defineProps({
 <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 {
@@ -56,8 +55,5 @@ const props = defineProps({
             justify-content: var(--vh-form-row-label-justify-content)
         }
     }
-    :deep(.v-input__append-outer) {
-        margin-block-start: 0 !important
-    }
 }
 </style>