[WIP] Добавил quasar input, стили, заменил маски

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(
+    q-input(
-      :class="{'border-none': borderNone, 'border-error': borderError }"
-      :style="disabledBackgroundStyle"
-    )
-      input.input.w-full.outline-0.not-italic(
       v-model="value",
-        :class="textClass",
+      :input-class="textClass",
       :placeholder="placeholder",
-        :disabled="disabled",
+      :outlined="outlined",
-        :type="type"
+      :dense="dense",
+      :type="type",
+      :filled="filled",
+      :disable="disabled",
+      :rules="rule",
+      :mask="mask",
+      :maxlength="maxLength"
+      hide-bottom-space,
+      autogrow
     )
-      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>

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}")
+    q-input(
-      input(
       v-model="value",
       type="date",
-        max="9999-12-31",
+      outlined,
-        min="0000-01-01"
+      dense
-)    
+    )
 </template>
 
 <script>

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(
+              client-detail-input.text-sm.w-max-fit.relative(
-                :maxLength="40",
+                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="Описание"

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")
+  base-input(
-    textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium(
+    :type="choiceType"
-      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"
+    :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: String,
-    maxLength: Number,
     placeholder: String,
   },
-  directives: { mask },
   computed: {
-    heightInput() {
+    choiceType() {
-      return ((this.width / 100) * 70) / 11;
+      return !this.sharp ? "textarea" : "text";
-    },
-    textareaRows() {
-      if (this.value.length <= 22) return this.rows;
-      return Math.ceil(this.value.length / 22);
     },
     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>

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>

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>
 

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"),

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>
 

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,

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>
 

src/pages/login/TheLogin.vue

@@ -1,29 +1,34 @@
 <template lang="pug">
-  .login-wrapper.flex
+  .flex.h-full.w-full.relative.overflow-hidden
-    .left-col.flex.flex-col.items-center
+    .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}") Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+            :style="{color: this.underTextColor}"
-        .flex.flex-col.gap-y-5
+          ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+        .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",
+            :rule="[wrongData => !!wrongData]",
             v-model="user.password",
             :type="changeType",
-              placeholder="Введите ваш пароль"
+            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
+  width: 90px
-  height: 74.64px
+  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)

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,
   },

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,

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,
   },

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: [