components(form-row): refactor

ozgurg · Mar 30, 2024 · 663fce9 · 663fce9
1 parent d28ea2a
commit 663fce9
Showing 1 changed file with 8 additions and 12 deletions.
diff --git 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>