@webitel/ui-sdk 24.10.39 → 24.10.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.39",
+  "version": "24.10.41",
   "private": false,
   "scripts": {
     "dev": "vite",

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

@@ -124,10 +124,18 @@ const badgeColorVar = computed(() => {
 
 <style lang="scss" scoped>
 
+%wt-avatar-typo-xs {
+  font-size: 10px;
+}
+
 %wt-avatar-typo-sm {
   font-size: 12px;
 }
 
+%wt-avatar-typo-md {
+  font-size: 14px;
+}
+
 %wt-avatar-typo-lg {
   font-size: 20px;
 }
@@ -163,6 +171,7 @@ const badgeColorVar = computed(() => {
   }
 
   &--size-xs {
+    @extend %wt-avatar-typo-xs;
     width: var(--wt-avatar-size--size-xs);
     height: var(--wt-avatar-size--size-xs);
   }
@@ -174,6 +183,7 @@ const badgeColorVar = computed(() => {
   }
 
   &--size-md {
+    @extend %wt-avatar-typo-md;
     width: var(--wt-avatar-size--size-md);
     height: var(--wt-avatar-size--size-md);
   }

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 expanded prop is passed', () => {
+  it('emits "Enter" event if autoresize prop is passed', () => {
     const wrapper = shallowMount(WtTextarea, {
       stubs: {
         WtLabel,
       },
-      props: { expanded: true },
+      props: { autoresize: true },
     });
     wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeTruthy();
   });
 
-  it('do not emit "Enter" event if expanded prop is not passed', () => {
+  it('do not emit "Enter" event if autoresize prop is not passed', () => {
     const wrapper = shallowMount(WtTextarea, {
       stubs: {
         WtLabel,

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

@@ -31,6 +31,7 @@
         rows="1"
         class="wt-textarea__textarea"
         v-on="listeners"
+        @input="autoGrow"
       />
       <div
         ref="after-wrapper"
@@ -43,7 +44,7 @@
           class="wt-textarea__reset-icon-btn"
           icon="close--filled"
           size="sm"
-          @click="cleanInput"
+          @click="$emit('input', '')"
         />
       </div>
     </div>
@@ -57,7 +58,6 @@
 </template>
 
 <script>
-import autosize from 'autosize';
 import validationMixin from '../../mixins/validationMixin/validationMixin.js';
 
 export default {
@@ -125,27 +125,35 @@ export default {
   },
   mounted() {
     this.updateInputPaddings();
-    if (this.autoresize) this.setupAutosize();
   },
-  beforeUpdate() {
-    if(!this.value) this.$nextTick(() => autosize.update(this.$refs['wt-textarea']));
+  updated() {
+    if(this.autoresize && !this.value) this.resetGrow();
   },
 
   methods: {
-    cleanInput() {
-      this.$emit('input', '');
-      this.$nextTick(() => autosize.update(this.$refs['wt-textarea']));
-    },
-
     handleKeypress(event) {
       if (!this.autoresize) return;
 
       if (event.key === 'Enter' && !event.shiftKey) {
         this.$emit('enter');
         event.preventDefault();
-        this.$nextTick(() => autosize.update(this.$refs['wt-textarea']));
       }
     },
+
+    autoGrow() {
+      if (!this.autoresize) return;
+      const inputEl = this.$refs['wt-textarea'];
+      const bordersSize = 2; // + 2px for height because of --rounded-action-border-size
+
+      inputEl.style.height = 'auto';
+      inputEl.style.height = (inputEl.scrollHeight + bordersSize) + "px";
+    },
+
+    resetGrow() {
+      const inputEl = this.$refs['wt-textarea'];
+      inputEl.style.height = 'auto'; // reset text-area height
+    },
+
     updateInputPaddings() {
       // cant test this thing cause vue test utils doesnt render elements width :/
       const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
@@ -155,9 +163,6 @@ export default {
       );
       inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
-    setupAutosize() {
-      autosize(this.$refs['wt-textarea']);
-    },
   },
 };
 </script>