@webitel/ui-sdk 24.10.28 → 24.10.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.28",
+  "version": "24.10.30",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -99,6 +99,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.4.0",
     "@vueuse/components": "^10.7.2",
+    "autosize": "^6.0.1",
     "axios": "^1.7.1",
     "clipboard-copy": "^4.0.1",
     "csv-stringify": "^5.5.3",

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -36,6 +36,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 
 const props = defineProps({
   size: {

package/src/components/wt-textarea/__tests__/WtTextarea.spec.js

@@ -23,18 +23,18 @@ describe('WtTextarea', () => {
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });
 
-  it('emits "Enter" event if chat-mode prop is passed', () => {
+  it('emits "Enter" event if expanded prop is passed', () => {
     const wrapper = shallowMount(WtTextarea, {
       stubs: {
         WtLabel,
       },
-      props: { chatMode: true },
+      props: { expanded: true },
     });
     wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeTruthy();
   });
 
-  it('do not emit "Enter" event if chat-mode prop is not passed', () => {
+  it('do not emit "Enter" event if expanded prop is not passed', () => {
     const wrapper = shallowMount(WtTextarea, {
       stubs: {
         WtLabel,

package/src/components/wt-textarea/wt-textarea.vue

@@ -3,6 +3,7 @@
     :class="{
       'wt-textarea--disabled': disabled,
       'wt-textarea--invalid': invalid,
+      'wt-textarea--autoresize': autoresize,
     }"
     class="wt-textarea"
   >
@@ -22,11 +23,12 @@
     </wt-label>
     <div class="wt-textarea__wrapper">
       <textarea
-        :id="name"
         ref="wt-textarea"
+        :id="name"
         :disabled="disabled"
         :placeholder="placeholder || label"
         :value="value"
+        rows="1"
         class="wt-textarea__textarea"
         v-on="listeners"
       />
@@ -41,7 +43,7 @@
           class="wt-textarea__reset-icon-btn"
           icon="close--filled"
           size="sm"
-          @click="$emit('input', '')"
+          @click="cleanInput"
         />
       </div>
     </div>
@@ -55,6 +57,7 @@
 </template>
 
 <script>
+import autosize from 'autosize';
 import validationMixin from '../../mixins/validationMixin/validationMixin.js';
 
 export default {
@@ -96,14 +99,15 @@ export default {
       type: String,
       default: '',
     },
-    chatMode: {
-      type: Boolean,
-      default: false,
-    },
     labelProps: {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
     },
+    autoresize: {
+      type: Boolean,
+      default: false,
+      description: 'enables auto-grow for text-area',
+    },
   },
   emits: ['input', 'enter'],
   computed: {
@@ -121,17 +125,27 @@ export default {
   },
   mounted() {
     this.updateInputPaddings();
+    if (this.autoresize) this.setupAutosize();
+  },
+  beforeUpdate() {
+    if(!this.value) this.$nextTick(() => autosize.update(this.$refs['wt-textarea']));
   },
 
   methods: {
+    cleanInput() {
+      this.$emit('input', '');
+      this.$nextTick(() => autosize.update(this.$refs['wt-textarea']));
+    },
+
     handleKeypress(event) {
-      if (!this.chatMode) return;
+      if (!this.autoresize) return;
+
       if (event.key === 'Enter' && !event.shiftKey) {
         this.$emit('enter');
         event.preventDefault();
+        this.$nextTick(() => autosize.update(this.$refs['wt-textarea']));
       }
     },
-
     updateInputPaddings() {
       // cant test this thing cause vue test utils doesnt render elements width :/
       const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
@@ -141,6 +155,9 @@ export default {
       );
       inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
+    setupAutosize() {
+      autosize(this.$refs['wt-textarea']);
+    },
   },
 };
 </script>
@@ -154,10 +171,24 @@ export default {
 
 .wt-textarea {
   cursor: text;
+  max-height: 100%;
 
   &--disabled {
     pointer-events: none;
   }
+
+  &--autoresize {
+    .wt-textarea__textarea {
+      min-height: auto;
+      max-height: 100%;
+      transition: none;
+    }
+
+    .wt-textarea__wrapper {
+      height: 100%;
+    }
+
+  }
 }
 
 .wt-textarea__wrapper {