From bda481cfe54c9d57a81fef90d0ccbc4a5e4692fc Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 30 Dec 2022 17:07:40 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20inputs=20=D0=B2=20SectionAddress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseCustomSelect.vue      |  15 ++-
 src/components/base/BaseInput.vue             |  28 ++++-
 src/components/base/BaseSelect.vue            |  56 ++++++----
 .../components/ClientDetailSectionAddress.vue | 104 ++++++++----------
 .../schedule/components/ScheduleHeader.vue    |   2 +-
 5 files changed, 125 insertions(+), 80 deletions(-)

diff --git a/src/components/base/BaseCustomSelect.vue b/src/components/base/BaseCustomSelect.vue
index 4d3853b..ddeb22e 100644
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -1,6 +1,9 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+    .font-semibold.text-sm.opacity-40(
+      v-if="label",
+      :class="labelClass"
+    ) {{ label }}
     .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
       ref="select",
       @click="open = !open",
@@ -46,6 +49,7 @@ export default {
     center: Boolean,
     label: String,
     textStyle: String,
+    labelStyle: String,
   },
   emits: ["update:modelValue"],
   data() {
@@ -71,6 +75,15 @@ export default {
             "text-base": true,
           };
     },
+    labelClass() {
+      return this.labelStyle
+        ? {
+            [this.labelStyle]: true,
+          }
+        : {
+            "text-sm": true,
+          };
+    },
   },
   methods: {
     clickItem(id, label) {
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 9adb94c..59aaf82 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,13 +1,17 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+    .label.font-semibold.text-sm.opacity-40(
+      v-if="label",
+      :class="labelClass"
+    ) {{ label }}
     .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
       :class="{'border-none': borderNone, 'border-error': borderError }"
       :style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
     )
       input.input.w-full.outline-0.not-italic(
         v-model="value",
-        :style="{'color': disabled && 'var(--font-grey-color-0)'}"
+        :style="{'color': disabled && 'var(--font-grey-color-0)'}",
+        :class="textClass",
         :placeholder="placeholder",
         :disabled="disabled",
         :type="type"
@@ -35,6 +39,8 @@ export default {
     borderError: Boolean,
     disabled: Boolean,
     label: String,
+    textStyle: String,
+    labelStyle: String,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -46,6 +52,24 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
+    textClass() {
+      return this.textStyle
+        ? {
+            [this.textStyle]: true,
+          }
+        : {
+            "text-base": true,
+          };
+    },
+    labelClass() {
+      return this.labelStyle
+        ? {
+            [this.labelStyle]: true,
+          }
+        : {
+            "text-sm": true,
+          };
+    },
   },
 };
 </script>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 98d7c67..028a483 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,23 +1,29 @@
 <template lang="pug">
-  .base-select(
-    @click="invertOpen",
-    :class="{'open': open && !disable, 'border-none': borderNone}",
-    ref="select"
-  )
-    .placeholder(
-      :class="{'value-color': value || placeholderOpacity, ...textClass}",
-      :style="{'color': !disable || '#9ca3af', 'opacity': 1}"
-    ) {{ value || placeholder }}
-    .flex.items-center
-      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
-      span.icon-down-arrow.open-icon(:class="{'open': open && !disable }")
-    base-menu(v-if="open")
-      .items-container(
-        @click="open = false",
-        v-click-outside="leaveSelect",
-        :class="textClass"
-      )
-        .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
+  .flex.flex-col.gap-y-2
+    .font-semibold.opacity-40(
+      v-if="label",
+      :class="labelClass"
+    ) {{ label }}
+    .base-select(
+      @click="invertOpen",
+      :class="{'open': open && !disable, 'border-none': borderNone}",
+      :style="{'background-color': disable && 'var(--bg-disable-grey-color)'}"
+      ref="select"
+    )
+      .placeholder(
+        :class="{'value-color': value || placeholderOpacity, ...textClass}",
+        :style="{'color': !disable || '#9ca3af', 'opacity': 1}"
+      ) {{ value || placeholder }}
+      .flex.items-center
+        .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+        span.icon-down-arrow.open-icon(:class="{'open': open && !disable }")
+      base-menu(v-if="open")
+        .items-container(
+          @click="open = false",
+          v-click-outside="leaveSelect",
+          :class="textClass"
+        )
+          .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
 </template>
 
 <script>
@@ -37,6 +43,8 @@ export default {
     placeholderOpacity: Boolean,
     disable: Boolean,
     textStyle: String,
+    labelStyle: String,
+    label: String,
   },
   emits: ["update:modelValue"],
   data() {
@@ -62,6 +70,15 @@ export default {
             "text-base": true,
           };
     },
+    labelClass() {
+      return this.labelStyle
+        ? {
+            [this.labelStyle]: true,
+          }
+        : {
+            "text-sm": true,
+          };
+    },
   },
   methods: {
     clickItem(id) {
@@ -80,6 +97,7 @@ export default {
 <style scoped lang="sass">
 .base-select
   width: 100%
+  height: 40px
   border: 1.5px solid #D3D4DC
   border-radius: 4px
   padding: 9px 16px
diff --git a/src/pages/clients/components/ClientDetailSectionAddress.vue b/src/pages/clients/components/ClientDetailSectionAddress.vue
index 2dbb071..3e8d9de 100644
--- a/src/pages/clients/components/ClientDetailSectionAddress.vue
+++ b/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>
diff --git a/src/pages/schedule/components/ScheduleHeader.vue b/src/pages/schedule/components/ScheduleHeader.vue
index 0282513..c730d96 100644
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/src/pages/schedule/components/ScheduleHeader.vue
@@ -28,7 +28,7 @@
           )
           .text.flex.items-center
             .text.font-medium.text-base {{ dateString }}
-              .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
+            .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
         base-button.font-semibold(:size="40", @click="openForm") Замена смен
 </template>