Merge branch 'ASTRA-156' into 'master'

WIP Переделала инпуты See merge request andrusyakka/urban-couscous!472
2023-07-13 15:38:39 +00:00
parent f0640b6a3d 25dbf78915
commit ee3c828a22
8 changed files with 260 additions and 49 deletions
--- a/src/components/BaseInput.vue
+++ b/src/components/BaseInput.vue
@@ -0,0 +1,217 @@
+<template lang="pug">
+  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px', ...sizeVariable}")
+    q-input.input(
+      v-model="value",
+      :name="name",
+      :multiple="multiple",
+      :class="{'font-input': true, 'doc': doc}",
+      :input-style="{resize: resize,}",
+      :borderless="borderless",
+      :placeholder="placeholder",
+      outlined,
+      :type="type",
+      :readonly="readonly",
+      :disable="disabled",
+      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      no-error-icon,
+      :standout="readonly",
+      :mask="mask",
+      :autogrow="autogrow",
+      :accept="accept",
+      :debounce="debounce",
+      :shadow-text="shadowText",
+      :autofocus="autofocus",
+      hide-bottom-space,
+    )
+      template(v-slot:prepend, v-if="iconLeft")
+        slot
+      template(v-slot:append, v-if="iconRight")
+        slot
+      slot(v-if="!iconLeft && !iconRight")
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
+export default {
+  name: "BaseInput",
+  components: { BaseInputContainer },
+  props: {
+    multiple: Boolean,
+    doc: Boolean,
+    autofocus: Boolean,
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      default: "text",
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    resize: {
+      type: String,
+      default: "none",
+    },
+    shadowText: String,
+    mask: String,
+    debounce: [String, Number],
+    width: Number,
+    rule: Array,
+    lazyRule: [Boolean, String],
+    itemAligned: Boolean,
+    modelValue: [String, Date, Number],
+    placeholder: String,
+    disabled: Boolean,
+    label: String,
+    readonly: Boolean,
+    iconLeft: Boolean,
+    iconRight: Boolean,
+    name: String,
+    important: Boolean,
+    size: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        if (this.type === "date") {
+          return this.modelValue
+            ? this.modelValue?.toISOString().split("T")[0]
+            : null;
+        }
+        return this.modelValue;
+      },
+      set(value) {
+        this.type === "date"
+          ? this.$emit("update:modelValue", value ? new Date(value) : null)
+          : this.$emit("update:modelValue", value);
+      },
+    },
+    sizeVariable() {
+      switch (this.size) {
+        case "XS":
+          return {
+            "--input-height": "28px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "S":
+          return {
+            "--input-height": "32px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "M":
+          return {
+            "--input-height": "40px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        case "L":
+          return {
+            "--input-height": "48px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        default:
+          return {
+            "--input-height": "56px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+
+.circle
+  width: 100%
+  height: 100%
+  border-radius: 50%
+  z-index: 5
+  opacity: 0
+  cursor: pointer
+
+.doc
+  width: 100%
+  height: 100%
+  z-index: 5
+  opacity: 0
+  cursor: pointer
+  ::file-selector-button
+    cursor: pointer
+
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: var(--text-size)
+  line-height: var(--line-height)
+  color: var(--font-dark-blue-color)
+  padding: var(--py)
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.input :deep(.q-field__control)
+  height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: var(--px)
+  &:before
+    border-color: var(--border-light-grey-color) !important
+    transition: none
+  &:hover:before
+    border-color: var(--font-grey-color) !important
+  &:after
+    border-width: 1px !important
+    transition: none
+    transform: none !important
+
+.q-field--disabled :deep(.q-field__control > div)
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled :deep(.q-field__native)
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+  &:before
+    border-color: var(--bg-light-grey) !important
+    transition: none
+  &:hover:before
+    border-color: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__native)
+  cursor: default
+
+.q-field--error :deep(.q-field__bottom)
+  padding: 4px 0 0 0
+  font-weight: 500
+  font-size: 12px
+  line-height: 135% !important
+</style>
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -51,13 +51,6 @@ export default {
        "min-height": "40px",
      };
    },
-    btnWidth() {
-      return !this.width === "auto"
-        ? {
-            "min-width": this.width,
-          }
-        : {};
-    },
    miniSize() {
      return this.type === "mini";
    },
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -63,7 +63,11 @@
                      padding="2px 0 0 0"
                    )
                      q-icon(name="app:ok", size="20px")
-          base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
+          base-input.w-full(
+            v-model="infoClient.basic.full_name",
+            placeholder="ФИО*",
+            size="M"
+          )
      .flex.flex-col.flex-auto.l.gap-y-8
        .flex
          button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
@@ -94,7 +98,6 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
 import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
 import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
-import BaseInput from "@/components/base/BaseInput";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
 import addImageIcon from "@/assets/icons/photo.svg";
@@ -103,6 +106,7 @@ import { addNotification } from "@/components/Notifications/notificationContext"
 import * as moment from "moment";
 import { v_model } from "@/shared/mixins/v-model";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/BaseInput.vue";

 export default {
  name: "BaseClientFormClient",
--- a/src/components/base/BaseInputContainer.vue
+++ b/src/components/base/BaseInputContainer.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+  .flex.flex-col.gap-y-6px
+    .label.font-semibold.text-sm(v-if="label") {{ label }}
      span.-mt-2(v-if="important", :style="{color: 'var(--font-obligatory-color)'}") *
    slot
 </template>
@@ -14,3 +14,9 @@ export default {
  },
 };
 </script>
+
+<style lang="sass" scoped>
+.label
+  color: var(--font-grey-color)
+  line-height: 135%
+</style>
--- a/src/components/base/Calendar/BaseCalendar.vue
+++ b/src/components/base/Calendar/BaseCalendar.vue
@@ -56,6 +56,10 @@ export default {
      type: Function,
      default: () => {},
    },
+    width: {
+      type: String,
+      default: "286px",
+    },
  },
  data() {
    return {
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -11,29 +11,24 @@
          ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
        .flex.flex-col.gap-y-5
          .flex.flex-col.gap-y-px
-            base-input.input(
-              :rule="[wrongData => !!wrongData]",
+            base-input.blue-color(
+              :rule="[wrongData => !!wrongData || 'Этого телефона нет в системе']",
              v-model="user.username",
              placeholder="+7 (915) 224–21–31",
              label="Номер телефона",
-              outlined,
-              no-error-icon
+              size="L"
            )
-            .red-color.text-smm.font-semibold(v-if="wrongData") Этого телефона нет в системе
          .flex.flex-col.gap-y-px
-            base-input.input(
-              :rule="[wrongData => !!wrongData]",
+            base-input.blue-color(
+              :rule="[wrongData => !!wrongData || 'Неверный пароль']",
              v-model="user.password",
              :type="changeType",
              placeholder="Введите ваш пароль",
              label="Пароль",
-              outlined,
-              no-error-icon
+              size="L"
            )
              .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
-                img(:src="eye_close", v-if="!isView")
-                img(:src="eye_open", v-else)
-            .red-color.text-smm.font-semibold(v-if="wrongData") Неверный пароль
+                img(:src="!isView ? eye_close : eye_open")
          .flex.items-center.gap-x-8px.-ml-2
            q-checkbox(@click="persist", v-model="person", type="checkbox")
            .flex.non-italic.font-medium.base Запомнить меня
@@ -49,11 +44,11 @@

 <script>
 import { fetchWrapper } from "@/shared/fetchWrapper";
-import BaseInput from "@/components/base/BaseInput";
 import logoMark from "@/assets/images/logoMark.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
 import eye_open from "@/assets/icons/eye_open.svg";
 import eye_close from "@/assets/icons/eye_close.svg";
+import BaseInput from "@/components/BaseInput.vue";

 export default {
  name: "TheLogin",
@@ -161,15 +156,6 @@ export default {
 .q-btn
  height: 48px

-.input :deep(.label)
-  opacity: 1
+.blue-color :deep(.label)
  color: var(--font-dark-blue-color)
-  line-height: 135%
-
-.input :deep(.q-field__control)
-  color: var(--font-dark-blue-color)
-  &:hover:before
-    border: 1px solid var(--font-dark-blue-color)
-  &:after
-    border-width: 1px !important
 </style>
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -1,14 +1,12 @@
 <template lang="pug">
  .calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
-    base-input(
+    base-input.search(
      iconLeft,
-      outlined,
      :width="280",
+      size="M",
      placeholder="Найти ...",
-      fontSize="16px",
-      lineHeight="19px"
    )
-      q-icon(name="app:icon-search", size="20px")
+      q-icon(name="app:search", size="20px")
    .flex.gap-x-4.items-center.justify-center
      q-btn(
        color="secondary",
@@ -20,26 +18,23 @@
        padding="2px 11px 2px 8px",
        @click="previousWeek"
      )
-      base-input(
-        outlined,
+      base-input.search(
+        size="M"
        :width="300",
-        fontSize="16px",
-        lineHeight="19px",
        iconRight,
        v-model="currentWeek",
-        readonly
      )
        .h-5.w-5.flex.items-center.justify-center
          q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
-            :size="calendarVisibility ? '10px' : '16px'",
+            :size="calendarVisibility ? '12px' : '18px'",
          )
            q-menu(
-              :style="{'margin-top': '4px !important'}"
+              :style="{'margin-top': '8px !important'}"
              v-model="calendarVisibility",
              transition-show="scale",
              transition-hide="scale"
              self="top middle",
-              :offset="[122, 14]"
+              :offset="[118, 14]"
            )
              base-calendar(
                v-model="dates",
@@ -74,11 +69,11 @@
 </template>

 <script>
-import BaseInput from "@/components/base/BaseInput";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import { mapState, mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 import DateSwitcherSvg from "@/pages/newCalendar/components/CalendarDateSwitcherSvg.vue";
+import BaseInput from "@/components/BaseInput.vue";
 export default {
  name: "CalendarHeader",
  mixins: [v_model],
@@ -179,6 +174,12 @@ export default {

 .q-btn-group :deep(.q-btn-item)
  border-radius: 4px !important
+
+.search :deep(.q-field__marginal)
+  height: auto !important
+
+.search :deep(.q-field__prepend)
+  padding-right: 6px !important
 </style>
 <style lang="sass">
 .q-field--outlined.q-field--readonly .q-field__control:before
--- a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
@@ -56,7 +56,7 @@
            :rule="[(val) => !personDataField.includes(field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
            :autogrow="field.key === 'issued_by_org'"
          )
-            .icon-copy.my-auto.text-lg.label-field(
+            .icon-copy.my-auto.text-lg.label-field.cursor-pointer(
              v-if="checkCopiedFields(field.key) && !!docData[data.dataKey][field.key]",
              @click="copyValue(docData[data.dataKey][field.key])"
            )