WIP Улучшен textarea

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -64,9 +64,10 @@
           span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
           client-detail-input.text-sm.w-max-fit(
             v-if="section!=='docs' && isChange && settings[section].options[key] !== 'Дата выдачи'",
-            :style="{fontWeight:key === 'numba'&&600, maxHeight: settings[section].options[key] !== 'Выдан' ? '40px' : ''}",
+            :style="{fontWeight:key === 'numba'&&600, maxHeight: settings[section].options[key] !== 'Выдан' ? '' : ''}",
             v-model:value="sectionInfo[key]",
             :width="settings[section].width",
+            :rows="section ==='pass' ? 2 : 1",
             :placeholder="settings[section].placeholder[key]"
             :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
           )

src/pages/clients/components/ClientDetailInput.vue

@@ -2,14 +2,14 @@
   .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit(class="py-2.5")
     textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none.font-medium(
       v-if="!sharp"
-      :rows="Math.ceil(value.length/heightInput)",
+      :rows="textareaRows",
       :value="value",
+      :cols="24",
       @input="$emit('update:value', $event.target.value)",
       :placeholder="placeholder",
     )
     input.place-input.w-full.outline-0.text-sm.not-italic.resize-none.font-medium(
       v-else,
-      :rows="Math.ceil(value.length/heightInput)",
       :value="value",
       @input="$emit('update:value', $event.target.value)",
       :placeholder="placeholder",
@@ -29,12 +29,17 @@ export default {
     placeholder: {
       default: "Поиск",
     },
+    rows: Number,
   },
   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);
+    },
   },
 };
 </script>
@@ -44,4 +49,6 @@ export default {
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
   background-color: var(--default-white)
+textarea
+  overflow: hidden
 </style>