@webitel/ui-sdk 2.0.15 → 2.0.16-11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.15",
+  "version": "2.0.16-11",
   "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/index.js

@@ -40,6 +40,7 @@ import WtFiltersPanelWrapper from './organisms/wt-filters-panel-wrapper/wt-filte
 import WtHeaderActions from './organisms/wt-app-header/wt-header-actions.vue';
 import WtErrorPage from './organisms/wt-error-page/wt-error-page.vue';
 import WtHeadline from './organisms/wt-headline/wt-headline.vue';
+import WtHeadlineNav from './organisms/wt-headline-nav/wt-headline-nav.vue';
 import WtNavigationBar from './organisms/wt-navigation-bar/wt-navigation-bar.vue';
 import WtNotificationsBar from './organisms/wt-notifications-bar/wt-notifications-bar.vue';
 import WtPageWrapper from './organisms/wt-page-wrapper/wt-page-wrapper.vue';
@@ -84,6 +85,7 @@ const Components = {
   WtTextarea,
   WtAppHeader,
   WtHeadline,
+  WtHeadlineNav,
   WtNavigationBar,
   WtAppNavigator,
   WtFiltersPanelWrapper,

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/organisms/wt-headline-nav/__tests__/wt-headline-nav.spec.js

@@ -0,0 +1,13 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeadlineNav from '../wt-headline-nav.vue';
+
+describe('WtHeadlineNav', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeadlineNav, {
+      propsData: {
+        path: [],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/organisms/wt-headline-nav/wt-headline-nav.vue

@@ -0,0 +1,85 @@
+<template>
+  <nav class="wt-headline-nav">
+    <div
+      class="wt-headline-nav__wrapper"
+      v-for="(singlePath, key) of path"
+      :key="key"
+    >
+      <span v-if="key !== 0" class="wt-headline-nav__indicator"></span>
+      <h1 class="wt-headline-nav__title">
+        <router-link
+          v-if="singlePath.route"
+          class="wt-headline-nav__text wt-headline-nav__title-link"
+          :to="singlePath.route"
+        >{{ singlePath.name }}
+        </router-link>
+        <span v-else class="wt-headline-nav__text">{{ singlePath.name }}</span>
+      </h1>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'wt-headline-nav',
+  props: {
+    path: {
+      type: Array,
+      required: true,
+      // PATH EXAMPLE
+      // default: () => [
+      //   { name: 'directory' },
+      //   { name: 'users', route: '/directory/users' },
+      //   { name: 'adm', route: '/directory/users/3' },
+      // ],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-headline-nav {
+  display: flex;
+  align-items: center;
+}
+
+.wt-headline-nav__wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.wt-headline-nav__indicator {
+  display: inline-block;
+  width: var(--headline-nav-indicator-size);
+  height: var(--headline-nav-indicator-size);
+  margin: 0 var(--headline-nav-indicator-margin);
+  background: var(--icon-color);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.wt-headline-nav__title {
+  @extend %typo-subtitle-1;
+}
+
+.wt-headline-nav__text {
+  color: var(--text-outline-color);
+}
+
+.wt-headline-nav__wrapper:last-child {
+  min-width: 0;
+
+  .wt-headline-nav__indicator {
+    background: var(--icon-color-accent);
+  }
+
+  .wt-headline-nav__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .wt-headline-nav__text {
+    color: var(--text-primary-color);
+  }
+}
+</style>

package/src/css/components/_components.scss

@@ -32,6 +32,7 @@
 @import "molecules/wt-button-select/variables";
 
 @import "organisms/wt-headline/variables";
+@import "organisms/wt-headline-nav/variables";
 @import "organisms/wt-app-header/variables";
 @import "organisms/wt-navigation-bar/variables";
 @import "organisms/wt-notifications-bar/variables";

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/css/components/organisms/wt-headline-nav/_variables.scss

@@ -0,0 +1,5 @@
+
+:root {
+  --headline-nav-indicator-size: 6px;
+  --headline-nav-indicator-margin: 19px;
+}

package/src/enums/WebitelApplications/AdminSections.enum.js

@@ -34,6 +34,7 @@ const AdminSections = Object.freeze({
   // INTEGRATIONS
   STORAGE: 'storage',                   // scope: storage_profile
   COGNITIVE_PROFILES: 'cognitive-profiles',  // scope: cognitive_profile
+  EMAIL_PROFILES: 'email-profiles',  // scope: email_profile
 
   // PERMISSIONS
   OBJECTS: 'objects',                // permissions: add

package/src/locale/en/en.js

@@ -38,6 +38,7 @@ export default {
     to: 'To',
     tts: 'Text-to-Speech',
     state: 'State',
+    refresh: 'Refresh',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {
@@ -45,6 +46,14 @@ export default {
     voice: 'Voice',
     format: 'Format',
     text: 'Text',
+    yes: 'Yes',
+    no: 'No',
+    description: 'Description',
+    login: 'Login',
+    host: 'Host',
+    time: 'Time',
+    channel: 'Channel',
+    file: 'File',
   },
   // date-related texts
   date: {
@@ -144,6 +153,7 @@ export default {
         [AdminSections.QUEUES]: 'Queues',
         [AdminSections.STORAGE]: 'Storage',
         [AdminSections.COGNITIVE_PROFILES]: 'Cognitive profiles',
+        [AdminSections.EMAIL_PROFILES]: 'Email profiles',
         [AdminSections.MEDIA]: 'Media',
         [AdminSections.BLACKLIST]: 'Call lists',
         [AdminSections.ROLES]: 'Roles',

package/src/locale/ru/ru.js

@@ -38,12 +38,21 @@ export default {
     to: 'До',
     tts: 'Text-to-Speech',
     state: 'Состояние',
+    refresh: 'Обновить',
   },
   vocabulary: {
     language: 'Язык',
     voice: 'Голос',
     format: 'Формат',
     text: 'Текст',
+    yes: 'Да',
+    no: 'Нет',
+    description: 'Описание',
+    login: 'Логин',
+    host: 'Хост',
+    time: 'Время',
+    channel: 'Канал',
+    file: 'Файл',
   },
   // date-related texts
   date: {
@@ -143,6 +152,7 @@ export default {
         [AdminSections.QUEUES]: 'Очереди',
         [AdminSections.STORAGE]: 'Хранилища',
         [AdminSections.COGNITIVE_PROFILES]: 'Языковые профили',
+        [AdminSections.EMAIL_PROFILES]: 'Email профили',
         [AdminSections.ROLES]: 'Роли',
         [AdminSections.OBJECTS]: 'Разделы',
       },

package/src/locale/ua/ua.js

@@ -38,12 +38,21 @@ export default {
     to: 'До',
     tts: 'Text-to-Speech',
     state: 'Стан',
+    refresh: 'Оновити',
   },
   vocabulary: {
     language: 'Мова',
     voice: 'Голос',
     format: 'Формат',
     text: 'Текст',
+    yes: 'Так',
+    no: 'Ні',
+    description: 'Опис',
+    login: 'Логін',
+    host: 'Хост',
+    time: 'Час',
+    channel: 'Канал',
+    file: 'Файл',
   },
   // date-related texts
   date: {
@@ -143,6 +152,7 @@ export default {
         [AdminSections.QUEUES]: 'Черги',
         [AdminSections.STORAGE]: 'Сховища',
         [AdminSections.COGNITIVE_PROFILES]: 'Мовні профілі',
+        [AdminSections.EMAIL_PROFILES]: 'Email профілі',
         [AdminSections.ROLES]: 'Ролі',
         [AdminSections.OBJECTS]: 'Розділи',
       },

package/src/modules/Userinfo/classes/ApplicationsAccess.js

@@ -128,6 +128,10 @@ const applicationsAccess = (value = true) => ({
       _enabled: value,
       _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.COGNITIVE_PROFILES}`,
     },
+    [AdminSections.EMAIL_PROFILES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.EMAIL_PROFILES}`,
+    },
     [AdminSections.ROLES]: {
       _enabled: value,
       _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.ROLES}`,