WIP Исправлены inputs в SectionAddress

src/pages/clients/components/ClientDetailSectionAddress.vue

@@ -1,56 +1,55 @@
 <template lang="pug">
   .flex.flex-col.gap-y-4
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Город
-      base-select.select.text-sm(
-        disable,
-        textStyle="text-sm",
-        placeholder="Введите город",
-        v-model="dopeAddress.city",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-      )
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Область
-      base-input.text-sm.input-info(
-        disabled,
-        placeholder="Введите область",
-        v-model="dopeAddress.region",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-      )
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Улица
-      base-input.text-sm.input-info(
-        disabled,
-        placeholder="Введите улицу",
-        v-model="dopeAddress.street",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-      )
+    base-select(
+      disable,
+      textStyle="text-sm",
+      labelStyle="text-xxs",
+      placeholder="Введите город",
+      v-model="dopeAddress.city",
+      label="Город"
+    )
+    base-input(
+      disabled,
+      placeholder="Введите область",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
+      v-model="dopeAddress.region",
+      label="Область"
+    )
+    base-input(
+      disabled,
+      placeholder="Введите улицу",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
+      v-model="dopeAddress.street",
+      label="Улица"
+    )
     .flex.gap-x-4
-      .flex.flex-col(class="gap-y-1.5")
-        .text-info.text-xxs.font-semibold Дом
-        base-input.text-sm.input-info(
-          disabled,
-          placeholder="Дом",
-          v-model="dopeAddress.house",
-          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-        )
-      .flex.flex-col(class="gap-y-1.5")
-        .text-info.text-xxs.font-semibold Квартира
-        base-input.text-sm.input-info(
-          disabled,
-          placeholder="Квартира",
-          v-model="dopeAddress.flat",
-          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-        )
-    .flex.flex-col(class="gap-y-1.5")
-      .text-info.text-xxs.font-semibold Индекс
-      base-input.text-sm.input-info(
+      base-input(
         disabled,
-        v-mask="'######'",
-        placeholder="000000",
-        v-model="dopeAddress.index",
-        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+        placeholder="Дом",
+        label="Дом"
+        v-model="dopeAddress.house",
+        labelStyle="text-xxs",
+        textStyle="text-sm",
       )
+      base-input(
+        disabled,
+        placeholder="Квартира",
+        label="Квартира",
+        v-model="dopeAddress.flat",
+        labelStyle="text-xxs",
+        textStyle="text-sm",
+      )
+    base-input(
+      disabled,
+      v-mask="'######'",
+      placeholder="000000",
+      label="Индекс",
+      v-model="dopeAddress.index",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
+    )
 </template>
 
 <script>
@@ -69,12 +68,3 @@ export default {
   directives: { mask },
 };
 </script>
-
-<style lang="sass" scoped>
-.input-info
-  color: var(--font-dark-blue-color)
-.text-info
-  color: var(--font-grey-color)
-.select
-  height: 40px
-</style>