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

2023-01-16 16:28:11 +03:00
parent 76754ab544
commit bf2a81aaba
15 changed files with 126 additions and 126 deletions
--- 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="Описание"
--- 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>
--- 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>
--- 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>

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

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