[WIP] Изменил ширину столбцов клиентов, добавил ограничение на поле email

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -6,7 +6,7 @@
       span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
       .flex.items-center.gap-x-8
         base-button(
-          v-if="isChange",
+          v-if="isChange && (this.isData || this.isAddress || this.isAttachments)",
           @click.stop="changeDoc",
           confirm,
           rounded,
@@ -15,7 +15,7 @@
         )
           .icon-ok.text-xsm(class="pt-[3px]")
         .edit.icon-edit.cursor-pointer.text-sm(
-          v-if="!isChange",
+          v-if="!isChange && (this.isData || this.isAddress || this.isAttachments)",
           @click="changeClientData"
         )
         .flex.relative
@@ -28,7 +28,11 @@
             :size="24"
           )
             .icon-plus(class="pt-[2px]")
-          base-popup.right-3.top-5(v-if="section === 'docs' && isOpenAddingWrap", :width="244")
+          base-popup.right-3.top-5(
+            v-if="section === 'docs' && isOpenAddingWrap",
+            v-click-outside="closePopup",
+            :width="244"
+          )
             table-choice-adding-doc(
               :add-new-doc="addNewDoc",
               :save-docs="saveDocs",
@@ -46,6 +50,7 @@
               :add-new-doc="addNewDoc",
               :new-docs="docData",
               :close-modal="changeShowModal",
+              v-click-outside="closeAddDocs"
             )
             table-create-package-doc(v-if="isOpenPackage")
           table-adding-new-additional(
@@ -226,6 +231,12 @@ export default {
       this.showModal = false;
       this.saveDocs();
     },
+    closePopup() {
+      this.isOpenAddingWrap = false;
+    },
+    closeAddDocs() {
+      this.isAttachments = false;
+    },
     checkDataPresence(data) {
       let postData = JSON.parse(JSON.stringify(data));
       let keys = Object.keys(postData);

src/pages/clients/components/cells/ClientsTableCellHeader.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-  .flex.box-border.justify-between.px-4.items-center(:style="{ minWidth : width + 'px' }" :class="{width:generateWidth}")
+  .flex.box-border.justify-between.items-center(
+    :style="{ minWidth : width + 'px', maxWidth: width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }",
+    :class="{width:generateWidth}"
+  )
     span.text-sm(v-if="title") {{title}}
     slot
 </template>

src/pages/clients/components/cells/TableCellBodyAge.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     span(v-if="!isOpenChange") {{value.age ? value.age.split("-").reverse().join(".") : ""}}
     base-input-date.input.max-h-10(
       v-if="isOpenChange",

src/pages/clients/components/cells/TableCellBodyEmail.vue

@@ -1,6 +1,12 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(
-    span(v-if="!isOpenChange") {{value.email.username}}
+    :style="{ minWidth: width + 'px', maxWidth: isHover && this.value.email.username.length >= 25 ? width + 30 + 'px' : width + 'px' }"
+  )
+    span.z-10(
+      v-if="!isOpenChange",
+      @mouseover="changeHover",
+      @mouseleave="changeHover"
+    ) {{maxValue}}
     base-input(
       v-if="isOpenChange",
       :width-input="234",
@@ -20,5 +26,22 @@ export default {
     width: Number,
     isOpenChange: Boolean,
   },
+  data() {
+    return {
+      isHover: false,
+    };
+  },
+  computed: {
+    maxValue() {
+      return this.value.email.username.length >= 25 && !this.isHover
+        ? this.value.email.username.substr(0, 25) + "..."
+        : this.value.email.username;
+    },
+  },
+  methods: {
+    changeHover() {
+      this.isHover = !this.isHover;
+    },
+  },
 };
 </script>

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
-    :style="{ minWidth : width + 'px' }",
+    :style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
     :class="{'open-change': isOpenChange}"
   )
     base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     .flex.gap-x-1
       .text-xl.icon.relative(
         v-for="network in getNetworks",

src/pages/clients/components/cells/TableCellBodyPhone.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     span.text-sm(
       v-if="!isOpenChange"
     ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     .flex.gap-x-2.items-center(v-if="!isOpenChange")
       .dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority).color }")
       span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority).color }") {{value.priority}}

src/pages/clients/utils/tableConfig.js

@@ -15,7 +15,7 @@ export const column = [
     name: "age",
     title: "Дата рождения",
     iconHead: true,
-    width: 140,
+    width: 180,
   },
   {
     name: "priority",
@@ -47,7 +47,7 @@ export const column = [
       },
     ],
     iconHead: true,
-    width: 124,
+    width: 180,
   },
   {
     name: "phone",