@webitel/ui-sdk 2.0.16 → 2.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -7,7 +7,10 @@
   >
     <slot name="activator"></slot>
     <template #popper="{ hide }">
-      <ul class="wt-context-menu__menu">
+      <ul
+        class="wt-context-menu__menu"
+        :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
+      >
         <li
           class="wt-context-menu__option-wrapper"
           v-for="(option, index) in options"
@@ -42,6 +45,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    width: {
+      type: [String],
+      default: 'auto',
+    },
+    minWidth: {
+      type: [String],
+      default: '160px',
+    },
+    maxWidth: {
+      type: [String],
+      default: '300px',
+    },
   },
   methods: {
     handleOptionClick({ option, index, hide }) {
@@ -59,8 +74,6 @@ export default {
 
 .wt-context-menu__menu {
   @extend %typo-body-2;
-  min-width: var(--context-menu-min-width);
-  max-width: var(--context-menu-max-width);
   background-color: var(--context-menu-background-color);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);

package/src/components/atoms/wt-icon/wt-icon.vue

@@ -29,7 +29,7 @@ export default {
     color: {
       type: String,
       default: 'default',
-      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'job', 'hold', 'secondary-50'],
+      options: ['default', 'contrast', 'active', 'accent', 'secondary', 'disabled', 'success', 'danger', 'transfer', 'job', 'hold', 'secondary-50'],
     },
     iconPrefix: {
       type: String,
@@ -85,6 +85,10 @@ svg {
     fill: var(--icon-color-active);
   }
 
+  &-secondary .wt-icon__icon {
+    fill: var(--secondary-color);
+  }
+
   &-success .wt-icon__icon {
     fill: var(--icon-color-success);
   }

package/src/components/atoms/wt-loader/_internals/wt-loader--sm.vue

@@ -14,7 +14,7 @@ export default {
     color: {
       type: String,
       default: 'contrast',
-      description: '["main", "contrast"]',
+      description: '["main", "contrast", "icon"]',
     },
   },
 };
@@ -44,6 +44,9 @@ export default {
   &--main circle {
     stroke: var(--main-color);
   }
+  &--icon circle {
+    stroke: var(--icon-color);
+  }
 }
 
 @keyframes rotate {

package/src/components/molecules/wt-search-bar/wt-search-bar.vue

@@ -13,10 +13,13 @@
         type="search"
         v-on="listeners"
       >
-      <wt-icon
-        class="wt-search-bar__search-icon"
-        icon="search"
-      ></wt-icon>
+      <div class="wt-search-bar__search-icon">
+        <slot name="search-icon">
+          <wt-icon
+            icon="search"
+          ></wt-icon>
+        </slot>
+      </div>
       <wt-icon-btn
         class="wt-search-bar__reset-icon-btn"
         :class="{ 'hidden': !value }"
@@ -112,6 +115,7 @@
   }
 
   .wt-search-bar__search-icon {
+    line-height: 0;
     position: absolute;
     top: 50%;
     left: var(--input-icon-margin);

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

@@ -39,7 +39,7 @@
       <!--      Slot that is used for all selected options (tags)-->
       <template slot="tag" slot-scope="{ option }">
         <span class="multiselect__custom-tag">
-          {{ option[optionLabel] || option }}
+            {{ getOptionLabel({ option, optionLabel }) }}
         </span>
       </template>
 
@@ -141,7 +141,6 @@ export default {
 
     optionLabel: {
       type: String,
-      default: 'name',
     },
 
     searchMethod: {
@@ -226,11 +225,14 @@ export default {
 
   methods: {
     getOptionLabel({ option, optionLabel }) {
+      const defaultOptionLabel = 'name';
+
+      if (optionLabel) return option[optionLabel];
       if (option.locale) {
         if (Array.isArray(option.locale)) return this.$tc(...option.locale);
         return this.$t(option.locale);
       }
-      return option[optionLabel] || option;
+      return option[defaultOptionLabel] || option;
     },
     handleSearchChange(search) {
       if (!this.isApiMode) return;

package/src/css/components/atoms/wt-context-menu/_variables.scss

@@ -1,7 +1,4 @@
 :root {
-  --context-menu-min-width : 160px;
-  --context-menu-max-width : 300px;
-
   --context-menu-option-color--hover: var(--secondary-color);
 
   --context-menu-background-color: var(--main-color);

package/src/locale/en/en.js

@@ -38,6 +38,8 @@ export default {
     to: 'To',
     tts: 'Text-to-Speech',
     state: 'State',
+    refresh: 'Refresh',
+    retry: 'Retry',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {
@@ -47,6 +49,12 @@ export default {
     text: 'Text',
     yes: 'Yes',
     no: 'No',
+    description: 'Description',
+    login: 'Login',
+    host: 'Host',
+    time: 'Time',
+    channel: 'Channel',
+    file: 'File',
   },
   // date-related texts
   date: {

package/src/locale/ru/ru.js

@@ -38,6 +38,8 @@ export default {
     to: 'До',
     tts: 'Text-to-Speech',
     state: 'Состояние',
+    refresh: 'Обновить',
+    retry: 'Повторить',
   },
   vocabulary: {
     language: 'Язык',
@@ -46,6 +48,12 @@ export default {
     text: 'Текст',
     yes: 'Да',
     no: 'Нет',
+    description: 'Описание',
+    login: 'Логин',
+    host: 'Хост',
+    time: 'Время',
+    channel: 'Канал',
+    file: 'Файл',
   },
   // date-related texts
   date: {

package/src/locale/ua/ua.js

@@ -38,6 +38,8 @@ export default {
     to: 'До',
     tts: 'Text-to-Speech',
     state: 'Стан',
+    refresh: 'Оновити',
+    retry: 'Повторити',
   },
   vocabulary: {
     language: 'Мова',
@@ -46,6 +48,12 @@ export default {
     text: 'Текст',
     yes: 'Так',
     no: 'Ні',
+    description: 'Опис',
+    login: 'Логін',
+    host: 'Хост',
+    time: 'Час',
+    channel: 'Канал',
+    file: 'Файл',
   },
   // date-related texts
   date: {

package/src/scripts/__tests__/caseConverters.spec.js

@@ -2,6 +2,8 @@ import {
   camelToKebab,
   camelToSnake,
   kebabToCamel,
+  snakeToKebab,
+  kebabToSnake,
   objCamelToSnake,
   objSnakeToCamel,
   snakeToCamel,
@@ -15,6 +17,13 @@ describe('Case converters', () => {
     expect(kebabToCamel(kebabStr)).toBe(camelStr);
   });
 
+  it('Snake-Kebab', () => {
+    const snakeStr = 'snake_to_kebab';
+    const kebabStr = 'snake-to-kebab';
+    expect(snakeToKebab(snakeStr)).toBe(kebabStr);
+    expect(kebabToSnake(kebabStr)).toBe(snakeStr);
+  });
+
   it('Camel-Snake', () => {
     const camelStr = 'camelToSnake';
     const snakeStr = 'camel_to_snake';

package/src/scripts/caseConverters.js

@@ -20,6 +20,18 @@ export const camelToKebab = (str) => str.replace(
     .replace('', '-'),
 );
 
+export const kebabToSnake = (str) => str.replace(
+  /([-_][a-z])/g,
+  (group) => group
+    .replace('-', '_'),
+);
+
+export const snakeToKebab = (str) => str.replace(
+  /([-_][a-z])/g,
+  (group) => group
+    .replace('_', '-'),
+);
+
 export const objSnakeToCamel = (obj, skipKeys = []) => {
   if (!obj) return obj;
   const newObj = {};