From bf2a81aaba853422f831084b86f30f8b0d0a7ed5 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 16 Jan 2023 16:28:11 +0300
Subject: [PATCH 1/3] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20quasar=20input,=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
 =?UTF-8?q?,=20=D0=B7=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20=D0=BC=D0=B0?=
 =?UTF-8?q?=D1=81=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             | 67 ++++++++++++++-----
 src/components/base/BaseInputDate.vue         | 13 ++--
 .../components/ClientDetailInfoSection.vue    |  7 +-
 .../clients/components/ClientDetailInput.vue  | 48 ++++---------
 .../components/ClientDetailSectionAddress.vue |  5 +-
 .../components/FormCreateAddresses.vue        | 11 ++-
 .../components/FormCreateBasicInfo.vue        |  5 +-
 .../FormCreateIdentityDocuments.vue           | 13 ++--
 .../FormsAgreementCreate/AgreementPerson.vue  |  6 +-
 .../components/cells/TableCellBodyPhone.vue   |  5 +-
 src/pages/login/TheLogin.vue                  | 54 +++++++--------
 .../components/MedicalBaseData.vue            |  6 +-
 .../components/MedicalIdentityDocuments.vue   |  2 -
 .../components/MedicalPolicyDocuments.vue     |  6 +-
 src/pages/schedule/components/ScheduleBar.vue |  4 +-
 15 files changed, 126 insertions(+), 126 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 1276fbf..0d7deeb 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -4,31 +4,68 @@
       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="disabledBackgroundStyle"
+    q-input(
+      v-model="value",
+      :input-class="textClass",
+      :placeholder="placeholder",
+      :outlined="outlined",
+      :dense="dense",
+      :type="type",
+      :filled="filled",
+      :disable="disabled",
+      :rules="rule",
+      :mask="mask",
+      :maxlength="maxLength"
+      hide-bottom-space,
+      autogrow
     )
-      input.input.w-full.outline-0.not-italic(
-        v-model="value",
-        :class="textClass",
-        :placeholder="placeholder",
-        :disabled="disabled",
-        :type="type"
-      )
-      slot(name='icon')
+      .flex.items-center(:v-if="withIcon")
+        slot.cursor-pointer
+   
+    //- slot(name='icon')
+    //- .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
+    //-   :class="{'border-none': borderNone, 'border-error': borderError }"
+    //-   :style="disabledBackgroundStyle"
+    //- )
+    //-   input.input.w-full.outline-0.not-italic(
+    //-     v-model="value",
+    //-     :class="textClass",
+    //-     :placeholder="placeholder",
+    //-     :disabled="disabled",
+    //-     :type="type"
+    //-   )
+    //-   slot(name='icon')
 </template>
 
 <script>
 export default {
   name: "BaseInput",
   props: {
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: true,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
     type: {
       default: "text",
     },
+    withIcon: {
+      type: Boolean,
+      default: false,
+    },
+    mask: String,
+    maxLength: String,
+    rule: Array,
     modelValue: String,
     placeholder: String,
     borderNone: Boolean,
-    borderError: Boolean,
     disabled: Boolean,
     label: String,
     textStyle: String,
@@ -81,15 +118,13 @@ export default {
   background-color: var(--default-white)
   color: var(--font-black-color)
   height: 40px
-.border-none
-  border: none
-.border-error
-  border-color: var(--border-red-color)
+
 .input
   background-color: inherit
   &:disabled, &[disabled]
     background-color: var(--bg-disable-grey-color)
     color: var(--font-grey-color-0)
+
 .label
   color: var(--font-black-color)
 </style>
diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index e94ca5a..ceb7a5a 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -1,13 +1,12 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
     .label(v-if="!!label") {{label}}
-    .field(:class="{'placeholder-color': !modelValue}")
-      input(
-        v-model="value",
-        type="date",      
-        max="9999-12-31",
-        min="0000-01-01"
-)    
+    q-input(
+      v-model="value",
+      type="date",
+      outlined,
+      dense
+    )
 </template>
 
 <script>
diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index 9782642..d6a912b 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -107,7 +107,6 @@
               v-if="section!=='docs' && section!=='additional' && isChange && settings[section].options[key] !== 'Дата выдачи'",
               :style="{fontWeight:key === 'number'&&600}",
               v-model="sectionInfo[key]",
-              :rows="section ==='pass' ? 2 : 1",
               :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
               :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
             )
@@ -135,8 +134,8 @@
                   :id="item.id",
                   @click="deleteNote(item.id)"
                 )
-              client-detail-input.text-sm.w-max-fit.pr-12.relative(
-                :maxLength="40",
+              client-detail-input.text-sm.w-max-fit.relative(
+                maxLength="40",
                 :style="{fontWeight:key === 'number'&&600}",
                 v-model="sectionInfo[key].title",
                 placeholder="Заголовок"
@@ -147,7 +146,7 @@
                 ) {{`${sectionInfo[key].title.length}/40`}}
               .title-section.text-xxs.font-semibold Описание
               client-detail-input.text-sm.w-max-fit(
-                :maxLength="40",
+                maxLength="40",
                 :style="{fontWeight:key === 'number'&&600}",
                 v-model="sectionInfo[key].description",
                 placeholder="Описание"
diff --git a/src/pages/clients/components/ClientDetailInput.vue b/src/pages/clients/components/ClientDetailInput.vue
index 908a8bb..fb1109b 100644
--- a/src/pages/clients/components/ClientDetailInput.vue
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -1,43 +1,30 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit.text-sm(class="py-2.5")
-    textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium(
-      v-if="!sharp"
-      :rows="textareaRows",
-      v-model="value",
-      :cols="24",
-      :placeholder="placeholder",
-      :maxLength="maxLength"
-    )
-    input.w-full.outline-0.not-italic.font-medium(
-      v-else,
-      v-model="value",
-      :placeholder="placeholder",
-      v-mask="sharp"
-    ) 
+  base-input(
+    :type="choiceType"
+    v-model="value",
+    :placeholder="placeholder",
+    :maxLength="maxLength",
+    :mask="sharp"
+  )
     slot
 </template>
 
 <script>
-import { mask } from "vue-the-mask";
+import BaseInput from "@/components/base/BaseInput";
+
 export default {
   name: "ClientDetailInput",
+  components: { BaseInput },
   emits: ["update:modelValue"],
   props: {
     modelValue: String,
-    width: Number,
     sharp: String,
-    rows: Number,
-    maxLength: Number,
+    maxLength: String,
     placeholder: String,
   },
-  directives: { mask },
   computed: {
-    heightInput() {
-      return ((this.width / 100) * 70) / 11;
-    },
-    textareaRows() {
-      if (this.value.length <= 22) return this.rows;
-      return Math.ceil(this.value.length / 22);
+    choiceType() {
+      return !this.sharp ? "textarea" : "text";
     },
     value: {
       get() {
@@ -50,12 +37,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.input-wrapper
-  border: 2px solid var(--border-light-grey-color)
-  border-radius: 4px
-  background-color: var(--default-white)
-textarea
-  overflow: hidden
-</style>
diff --git a/src/pages/clients/components/ClientDetailSectionAddress.vue b/src/pages/clients/components/ClientDetailSectionAddress.vue
index 3e8d9de..f0bb291 100644
--- a/src/pages/clients/components/ClientDetailSectionAddress.vue
+++ b/src/pages/clients/components/ClientDetailSectionAddress.vue
@@ -43,7 +43,7 @@
       )
     base-input(
       disabled,
-      v-mask="'######'",
+      mask="######",
       placeholder="000000",
       label="Индекс",
       v-model="dopeAddress.index",
@@ -55,7 +55,7 @@
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseSelect from "@/components/base/BaseSelect";
-import { mask } from "vue-the-mask";
+
 export default {
   name: "ClientDetailSectionAddress",
   components: {
@@ -65,6 +65,5 @@ export default {
   props: {
     dopeAddress: Object,
   },
-  directives: { mask },
 };
 </script>
diff --git a/src/pages/clients/components/FormCreateAddresses.vue b/src/pages/clients/components/FormCreateAddresses.vue
index ca03c76..139e516 100644
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -12,38 +12,44 @@
       .grid.grid-cols-2.gap-y-6.gap-x-4
         base-input.input-info(
           disabled,
+          filled,
           placeholder="Введите город",
           v-model="addresses.city",
           label="Город"
         )
         base-input.input-info(
           disabled,
+          filled,
           placeholder="Введите область",
           v-model="addresses.region",
           label="Область"
         )
         base-input.input-info(
           disabled,
+          filled,
           placeholder="Введите улицу",
           v-model="addresses.street",
           label="Введите улицу"
         )
         base-input.input-info(
           disabled,
+          filled,
           placeholder="Номер дома",
           v-model="addresses.house_number",
           label="Дом"
         )
         base-input.input-info(
           disabled,
+          filled,
           placeholder="Номер квартиры",
           v-model="addresses.apartment_number",
           label="Квартира"
         )
         base-input.input-info(
           disabled,
+          filled,
           placeholder="000000",
-          v-mask="'######'",
+          mask="######",
           v-model="addresses.zip_code",
           label="Индекс"
         )
@@ -56,7 +62,7 @@
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect";
-import { mask } from "vue-the-mask";
+
 export default {
   name: "FormCreateAddresses",
   components: { BaseInput, BaseButton, BaseCustomSelect },
@@ -65,7 +71,6 @@ export default {
     saveClient: Function,
     saveFile: Function,
   },
-  directives: { mask },
 };
 </script>
 
diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue
index a134313..7d7d51f 100644
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -14,7 +14,7 @@
       base-input.input-info(
         v-model="phone.username",
         placeholder="+7 (915) 644–92–23",
-        v-mask="'+7 (###) ###-##-##'",
+        mask="+7 (###) ###-##-##",
         label="Номер телефона"
       )
       base-input.input-info(
@@ -48,7 +48,7 @@ import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import { column } from "@/pages/clients/utils/tableConfig";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect";
-import { mask } from "vue-the-mask";
+
 export default {
   name: "FormCreateBasicInfo",
   components: {
@@ -69,7 +69,6 @@ export default {
     saveClient: Function,
     addNetwork: Function,
   },
-  directives: { mask },
   data() {
     return {
       networks: column.find((el) => el.name === "networks"),
diff --git a/src/pages/clients/components/FormCreateIdentityDocuments.vue b/src/pages/clients/components/FormCreateIdentityDocuments.vue
index b104114..0347a21 100644
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -4,7 +4,7 @@
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input.input-info(
-          v-mask="'#### ######'",
+          mask="#### ######",
           v-model="identityDocument.pass.series_number",
           placeholder="0000 000000",
           label="Серия и номер"
@@ -15,7 +15,7 @@
           label="Кем выдан"
         )
         base-input.input-info(
-          v-mask="'###-###'",
+          mask="###-###",
           v-model="identityDocument.pass.issued_by_org_code",
           placeholder="000–000",
           label="Код подразделения"
@@ -30,14 +30,16 @@
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input.input-info(
           disabled,
-          v-mask="'###-###-### ##'",
+          filled,
+          mask="###-###-### ##",
           v-model="identityDocument.snils.number",
           placeholder="000–000–000 00",
           label="Номер СНИЛС"
         )
         base-input.input-info(
           disabled,
-          v-mask="'############'",
+          filled,
+          mask="############",
           v-model="identityDocument.inn.number",
           placeholder="000000000000",
           label="Номер ИНН"
@@ -51,7 +53,7 @@
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
 import BaseInputDate from "@/components/base/BaseInputDate";
-import { mask } from "vue-the-mask";
+
 export default {
   name: "FormCreateIdentityDocuments",
   components: { BaseInput, BaseInputDate, BaseButton },
@@ -59,7 +61,6 @@ export default {
     identityDocument: Object,
     saveClient: Function,
   },
-  directives: { mask },
 };
 </script>
 
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
index f58e5a1..8328737 100644
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -16,7 +16,7 @@
       base-input(
         v-model="patient.seriesAndNumber", 
         disabled,
-        v-mask="'#### ######'"  
+        mask="#### ######"  
         label="Серия и номер" 
       )
     .flex.justify-between
@@ -48,7 +48,7 @@
       base-input(
         v-model="patient.seriesAndNumber", 
         disabled,
-        v-mask="'#### ######'"  
+        mask="#### ######"  
         label="Серия и номер" 
       )
     .flex.justify-between
@@ -73,7 +73,6 @@ import KitShortList from "@/components/kit/KitShortList.vue";
 import KitToggle from "@/components/kit/KitToggle.vue";
 //import { fetchWrapper } from "@/shared/fetchWrapper";
 
-import { mask } from "vue-the-mask";
 export default {
   name: "AgreementPerson",
   components: {
@@ -84,7 +83,6 @@ export default {
     KitShortList,
     KitToggle,
   },
-  directives: { mask },
   data() {
     return {
       patientEqualClient: true,
diff --git a/src/pages/clients/components/cells/TableCellBodyPhone.vue b/src/pages/clients/components/cells/TableCellBodyPhone.vue
index 7d90f55..f0b2cc5 100644
--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPhone.vue
@@ -8,13 +8,13 @@
         @click.stop,
         v-model="value.phone.username",
         :placeholder="value.phone.username",
-        v-mask="'+7 (###) ###-##-##'"
+        mask="+7 (###) ###-##-##"
       )
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-import { mask } from "vue-the-mask";
+
 export default {
   name: "TableCellBodyPhone",
   components: { BaseInput },
@@ -23,7 +23,6 @@ export default {
     width: Number,
     isOpenChange: Boolean,
   },
-  directives: { mask },
 };
 </script>
 
diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue
index 6047fae..7ce87aa 100644
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -1,29 +1,34 @@
 <template lang="pug">
-  .login-wrapper.flex
-    .left-col.flex.flex-col.items-center
+  .flex.h-full.w-full.relative.overflow-hidden
+    .left-col.flex.flex-col.items-center.justify-center
       .logo-wrapper.absolute.left-12.top-12
         img(:src="logoMark")
       .login-panel.flex.flex-col.justify-center.gap-y-10
         .flex.flex-col.gap-y-2
           .text-welcome.flex.not-italic.font-bold.text-5xl Добро пожаловать!
           .text-under.flex.not-italic.font-medium.text-base(
-            :style="{color: this.underTextColor}") Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
-        .flex.flex-col.gap-y-5
+            :style="{color: this.underTextColor}"
+          ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+        .flex.flex-col.gap-y-2
           base-input.font-medium(
-            :borderError="wrongData",
+            :rule="[wrongData => !!wrongData]",
             v-model="user.username",
             placeholder="Введите ваш логин",
             label="Логин"
           )
-          .flex.flex-col.gap-y-6px.relative
-            .flex.non-italic.font-semibold.text-sm.opacity-40 Пароль
-            base-input(
-              :borderError="wrongData",
-              v-model="user.password",
-              :type="changeType",
-              placeholder="Введите ваш пароль"
+          base-input(
+            :rule="[wrongData => !!wrongData]",
+            v-model="user.password",
+            :type="changeType",
+            placeholder="Введите ваш пароль",
+            label="Пароль",
+            withIcon
+          )
+            q-icon(
+              v-if="!wrongData && user.password"
+              :name="isView ? 'visibility_off' : 'visibility'",
+              @click="changeView"
             )
-            img.absolute.z-10.right-4.bottom-10px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
           span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
@@ -37,8 +42,6 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
-import viewPasswordIcon from "@/assets/icons/eye.svg";
-import hidePasswordIcon from "@/assets/icons/openEye.svg";
 import logoMark from "@/assets/images/logoMark.svg";
 export default {
   name: "TheLogin",
@@ -47,8 +50,6 @@ export default {
     return {
       underTextColor: "var(--font-grey-color)",
       isView: false,
-      viewPassword: viewPasswordIcon,
-      hidePassword: hidePasswordIcon,
       logoMark,
       authorized: true,
       user: { username: "", password: "" },
@@ -60,9 +61,6 @@ export default {
     wrongData() {
       return !this.authorized && !this.user.username && !this.user.password;
     },
-    changeIcon() {
-      return !this.isView ? this.viewPassword : this.hidePassword;
-    },
     changeType() {
       return !this.isView ? "password" : "text";
     },
@@ -118,28 +116,26 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.login-wrapper
-  width: 100%
-  height: 100%
-  position: relative
-  overflow: hidden
 .left-col
-  display: flex
-  justify-content: center
   background-color: var(--default-white)
   height: 100%
   width: 40%
+
 .logo-wrapper
-  width: 89.28px
-  height: 74.64px
+  width: 90px
+  height: 75px
+
 .login-panel
   width: 444px
   height: 422px
+
 .text-welcome
   letter-spacing: 0.02em
   color: var(--font-dark-blue-color)
+
 .input-wrapper
   border-width: 1.5px
+
 .right-col
   height: 100%
   background-color: var(--font-dark-blue-color)
diff --git a/src/pages/medicalCard/components/MedicalBaseData.vue b/src/pages/medicalCard/components/MedicalBaseData.vue
index 2beaa2b..7043dc2 100644
--- a/src/pages/medicalCard/components/MedicalBaseData.vue
+++ b/src/pages/medicalCard/components/MedicalBaseData.vue
@@ -22,7 +22,7 @@
           .input
             base-input(
               placeholder="000–000–000 00",
-              v-mask="'###-###-### ##'",
+              mask="###-###-### ##",
               label="СНИЛС",
               v-model="clientDetail.insurance_number",
             )
@@ -40,7 +40,7 @@
             base-input(
               label="Номер телефона",
               placeholder="+7 (915) 644–92–23",
-              v-mask="'+7 (###) ###-##-##'",
+              mask="+7 (###) ###-##-##",
               v-model="clientDetail.phone",
             )
           .input
@@ -56,7 +56,6 @@ import BaseInput from "@/components/base/BaseInput";
 import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
-import { mask } from "vue-the-mask";
 import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
 import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
 
@@ -69,7 +68,6 @@ export default {
     BaseButton,
     BaseRadioButtonsGroup,
   },
-  directives: { mask },
   props: {
     clientDetail: Object,
   },
diff --git a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
index 9ab78e2..6f5d4f5 100644
--- a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
@@ -30,12 +30,10 @@ import BaseInput from "@/components/base/BaseInput";
 import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
-import { mask } from "vue-the-mask";
 
 export default {
   name: "MedicalIdentityDocuments",
   components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
-  directives: { mask },
   props: {
     changeIdentityDoc: Function,
     clientDetail: Object,
diff --git a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
index 259e5fd..ffc919c 100644
--- a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
@@ -12,7 +12,7 @@
           label="Серия и номер полиса ОМС",
           placeholder="000000 0000000000",
           v-model="clientDetail.OMSPolicy.number",
-          v-mask="'###### ##########'",
+          mask="###### ##########",
           :disabled="!selectedOMSPolicy"
         )
         base-input.input(
@@ -25,7 +25,7 @@
           label="Серия и номер полиса ДМС",
           placeholder="000000 0000000000",
           v-model="clientDetail.DMSPolicy.number",
-          v-mask="'###### ##########'",
+          mask="###### ##########",
           :disabled="selectedOMSPolicy"
         )
         base-input.input(
@@ -52,7 +52,6 @@
 import BaseInput from "@/components/base/BaseInput";
 import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
-import { mask } from "vue-the-mask";
 import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
 import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
 
@@ -64,7 +63,6 @@ export default {
     BaseSelect,
     BaseRadioButtonsGroup,
   },
-  directives: { mask },
   props: {
     clientDetail: Object,
   },
diff --git a/src/pages/schedule/components/ScheduleBar.vue b/src/pages/schedule/components/ScheduleBar.vue
index 023bc5b..0dd52f6 100644
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -30,7 +30,7 @@
         )
         base-input.w-28(
           v-if="template.item.id === 1"
-          v-mask="'#/#'",
+          mask="#/#",
           placeholder="0/0",
           label="Введите график",
           v-model="template.item.label"
@@ -49,7 +49,6 @@ import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
-import { mask } from "vue-the-mask";
 
 export default {
   name: "ScheduleBar",
@@ -67,7 +66,6 @@ export default {
     createSchedules: Function,
     deleteSchedule: Function,
   },
-  directives: { mask },
   data() {
     return {
       templateList: [

From fa974470a5610c7b024b139db5fcaa0c0d1d723f Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 16 Jan 2023 17:53:00 +0300
Subject: [PATCH 2/3] =?UTF-8?q?[WIP]=20=D0=A4=D0=B8=D0=BA=D1=81=20=D0=B8?=
 =?UTF-8?q?=D0=BD=D0=BF=D1=83=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             | 51 ++-----------------
 .../clients/components/ClientsTableHat.vue    |  3 +-
 src/pages/login/TheLogin.vue                  | 11 ++--
 3 files changed, 11 insertions(+), 54 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 0d7deeb..5fd9780 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -2,7 +2,8 @@
   .flex.flex-col.gap-y-2
     .label.font-semibold.text-sm.opacity-40(
       v-if="label",
-      :class="labelClass"
+      :class="labelClass",
+      :style="{color: 'var(--font-black-color)'}"
     ) {{ label }}
     q-input(
       v-model="value",
@@ -19,22 +20,7 @@
       hide-bottom-space,
       autogrow
     )
-      .flex.items-center(:v-if="withIcon")
-        slot.cursor-pointer
-   
-    //- slot(name='icon')
-    //- .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
-    //-   :class="{'border-none': borderNone, 'border-error': borderError }"
-    //-   :style="disabledBackgroundStyle"
-    //- )
-    //-   input.input.w-full.outline-0.not-italic(
-    //-     v-model="value",
-    //-     :class="textClass",
-    //-     :placeholder="placeholder",
-    //-     :disabled="disabled",
-    //-     :type="type"
-    //-   )
-    //-   slot(name='icon')
+      slot.cursor-pointer
 </template>
 
 <script>
@@ -56,16 +42,11 @@ export default {
     type: {
       default: "text",
     },
-    withIcon: {
-      type: Boolean,
-      default: false,
-    },
     mask: String,
     maxLength: String,
     rule: Array,
     modelValue: String,
     placeholder: String,
-    borderNone: Boolean,
     disabled: Boolean,
     label: String,
     textStyle: String,
@@ -99,32 +80,6 @@ export default {
             "text-sm": true,
           };
     },
-    disabledBackgroundStyle() {
-      return this.disabled
-        ? {
-            "background-color": "var(--bg-disable-grey-color)",
-          }
-        : false;
-    },
   },
 };
 </script>
-
-<style lang="sass" scoped>
-//TODO: Вынести grey borders в taiwindConfig
-.input-wrapper
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-  background-color: var(--default-white)
-  color: var(--font-black-color)
-  height: 40px
-
-.input
-  background-color: inherit
-  &:disabled, &[disabled]
-    background-color: var(--bg-disable-grey-color)
-    color: var(--font-grey-color-0)
-
-.label
-  color: var(--font-black-color)
-</style>
diff --git a/src/pages/clients/components/ClientsTableHat.vue b/src/pages/clients/components/ClientsTableHat.vue
index a0aa22e..5bbb8f9 100644
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -9,7 +9,8 @@
           placeholder="Введите фамилию",
           @keyup.enter="searchLastName"
         )
-          .icon-search
+          .flex.items-center.cursor-pointer
+            .icon-search
       base-button.font-semibold(
         v-if="createdClientName === ''",
         @click="searchLastName",
diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue
index 7ce87aa..7addb8a 100644
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -24,11 +24,12 @@
             label="Пароль",
             withIcon
           )
-            q-icon(
-              v-if="!wrongData && user.password"
-              :name="isView ? 'visibility_off' : 'visibility'",
-              @click="changeView"
-            )
+            .flex.items-center.cursor-pointer
+              q-icon(
+                v-if="!wrongData && user.password"
+                :name="isView ? 'visibility_off' : 'visibility'",
+                @click="changeView"
+              )
           span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")

From 2a48ee9b66a1124610610cdea29fde32b0f3bb28 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 16 Jan 2023 18:19:29 +0300
Subject: [PATCH 3/3] =?UTF-8?q?[WIP]=20=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=BB=20vue-the-mask?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 11 -----------
 package.json      |  1 -
 2 files changed, 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 909a36b..63c3fd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "moment": "^2.29.4",
         "vue": "^3.2.13",
         "vue-router": "^4.1.5",
-        "vue-the-mask": "^0.11.1",
         "vuex": "^4.0.2"
       },
       "devDependencies": {
@@ -11575,11 +11574,6 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "node_modules/vue-the-mask": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
-      "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ=="
-    },
     "node_modules/vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
@@ -20940,11 +20934,6 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "vue-the-mask": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
-      "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ=="
-    },
     "vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
diff --git a/package.json b/package.json
index 8ded5fd..d9502ff 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.1.5",
-    "vue-the-mask": "^0.11.1",
     "vuex": "^4.0.2"
   },
   "devDependencies": {