@webitel/ui-sdk 1.0.30 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.30",
+  "version": "1.0.33",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -25,7 +25,6 @@
   ],
   "dependencies": {
     "@johmun/vue-tags-input": "^2.1.0",
-    "bamboo-jest-reporter": "^1.0.3",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.1",
     "deep-copy": "^1.4.2",
@@ -34,7 +33,6 @@
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "plyr": "3.6.2",
-    "svg-sprite-loader": "^5.0.0",
     "vue": "^2.6.11",
     "vue-i18n": "^8.18.2",
     "vue-multiselect": "^2.1.6",
@@ -51,16 +49,18 @@
     "@vue/cli-plugin-unit-jest": "^5.0.4",
     "@vue/cli-service": "~4.4.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/vue2-jest": "^27.0.0-alpha.4",
     "@vue/test-utils": "^1.3.0",
+    "@vue/vue2-jest": "^27.0.0-alpha.4",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "bamboo-jest-reporter": "^1.0.3",
+    "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^8.7.1",
     "husky": "^7.0.0",
     "sass": "^1.49.11",
     "sass-loader": "^10.2.0",
-    "svg-url-loader": "^6.0.0",
+    "svg-sprite-loader": "^6.0.11",
+    "svg-url-loader": "^7.1.1",
     "vue-template-compiler": "^2.6.11",
     "vuex": "^3.6.2"
   }

package/src/components/molecules/wt-tags-input/wt-tags-input.vue

@@ -24,6 +24,7 @@
       :tags="tags"
       :autocomplete-items="autocompleteOptions"
       :placeholder="placeholder || label"
+      :separators="['   ']"
       v-on="listeners"
     >
       <template slot="tag-actions" slot-scope="{ index, performDelete }">

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

@@ -16,20 +16,24 @@
     <div class="wt-textarea__wrapper">
       <textarea
         :id="name"
+        ref="wt-textarea"
         class="wt-textarea__textarea"
         :value="value"
         :placeholder="placeholder || label"
         :disabled="disabled"
         v-on="listeners"
       ></textarea>
-      <wt-icon-btn
-        class="wt-textarea__reset-icon-btn"
-        :class="{ 'hidden': !value }"
-        icon="close--filled"
-        size="sm"
-        :disabled="disabled"
-        @click="$emit('input', '')"
-      ></wt-icon-btn>
+      <div class="wt-textarea__after-wrapper" ref="after-wrapper">
+        <slot name="after-input"></slot>
+        <wt-icon-btn
+          class="wt-textarea__reset-icon-btn"
+          :class="{ 'hidden': !value }"
+          icon="close--filled"
+          size="sm"
+          :disabled="disabled"
+          @click="$emit('input', '')"
+        ></wt-icon-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -101,6 +105,18 @@
           event.preventDefault();
         }
       },
+
+      updateInputPaddings() {
+        // cant test this thing cause vue test utils doesnt render elements width :/
+        const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
+        const inputEl = this.$refs['wt-textarea'];
+        const defaultInputPadding = getComputedStyle(document.documentElement)
+          .getPropertyValue('--textarea-padding');
+        inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
+      },
+    },
+    mounted() {
+      this.updateInputPaddings();
     },
   };
 </script>
@@ -125,17 +141,6 @@
     }
   }
 
-  .wt-textarea__reset-icon-btn {
-    position: absolute;
-    top: var(--input-icon-margin);
-    right: var(--input-icon-margin);
-
-    .wt-textarea:not(:focus-within) & {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
   .wt-textarea__textarea {
     @extend %typo-body-1;
     @include wt-placeholder;
@@ -167,8 +172,18 @@
   }
 
   /* make icons black */
-  .wt-textarea:hover ::v-deep .wt-icon__icon,
-  .wt-textarea:focus-within ::v-deep .wt-icon__icon {
+  .wt-textarea:hover ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon,
+  .wt-textarea:focus-within ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon {
     fill: var(--icon-color--hover);
   }
+
+  .wt-textarea__after-wrapper {
+    display: flex;
+    gap: var(--input-after-wrapper-gap);
+    align-items: center;
+    position: absolute;
+    top: var(--input-icon-margin);
+    right: var(--input-icon-margin);
+    pointer-events: auto; // override --disabled p-events none
+  }
 </style>

package/src/css/components/molecules/wt-textarea/_variables.scss

@@ -1,13 +1,5 @@
 
 :root {
   --textarea-min-height: 100px;
-  --textarea-padding:
-    var(--input-padding)
-    calc(
-      var(--input-padding)
-      + var(--icon-sm-size)
-      + var(--spacing-xs)
-    )
-    var(--input-padding)
-    var(--input-padding); // right reset icon 16px
-}
+  --textarea-padding: var(--input-padding);
+}

package/src/locale/en/en.js

@@ -26,6 +26,8 @@ export default {
     search: 'Search',
     open: 'Open',
     name: 'Name',
+    expand: 'Expand',
+    collapse: 'Collapse',
     lang: {
       en: 'English',
       ru: 'Русский',

package/src/locale/ru/ru.js

@@ -26,6 +26,8 @@ export default {
     search: 'Поиск',
     open: 'Открыть',
     name: 'Имя',
+    expand: 'Развернуть',
+    collapse: 'Свернуть',
     lang: {
       en: 'English',
       ru: 'Русский',

package/src/locale/ua/ua.js

@@ -26,6 +26,8 @@ export default {
     search: 'Пошук',
     open: 'Відкрити',
     name: 'Ім\'я',
+    expand: 'Розгорнути',
+    collapse: 'Згорнути',
     lang: {
       en: 'English',
       ru: 'Русский',