@webitel/ui-sdk 1.0.5 → 1.0.9

package/src/components/organisms/wt-navigation-bar/wt-navigation-bar.vue

@@ -1,44 +1,64 @@
 <template>
-  <aside class="wt-navigation-bar" v-clickaway="close">
+  <aside v-clickaway="close" class="wt-navigation-bar">
     <wt-icon-btn
+      :class="{'active': isOpened}"
       class="wt-navigation-bar__menu-btn"
       icon="menu"
-      :class="{'active': isOpened}"
       @click="isOpened = !isOpened"
     ></wt-icon-btn>
     <transition name="fade">
-      <nav class="wt-navigation-bar__nav" v-show="isOpened">
+      <nav v-show="isOpened" class="wt-navigation-bar__nav">
         <header class="wt-navigation-bar__nav-header">
           <!--        vue cli build target lib cant handle dynamic require :( -->
-          <img v-if="currentApp === 'admin'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg" alt="admin">
-          <img v-if="currentApp === 'agent'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg" alt="agent">
-          <img v-if="currentApp === 'audit'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg" alt="audit">
-          <img v-if="currentApp === 'history'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg" alt="history">
-          <img v-if="currentApp === 'supervisor'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg" alt="supervisor">
+          <img
+            v-if="currentApp === 'admin'"
+            alt="admin"
+            class="wt-navigation-bar__app-pic"
+            src="../../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg"
+          >
+          <img
+            v-if="currentApp === 'agent'"
+            alt="agent"
+            class="wt-navigation-bar__app-pic"
+            src="../../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg"
+          >
+          <img
+            v-if="currentApp === 'audit'"
+            alt="audit"
+            class="wt-navigation-bar__app-pic"
+            src="../../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg"
+          >
+          <img
+            v-if="currentApp === 'history'"
+            alt="history"
+            class="wt-navigation-bar__app-pic"
+            src="../../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg"
+          >
+          <img
+            v-if="currentApp === 'supervisor'"
+            alt="supervisor"
+            class="wt-navigation-bar__app-pic"
+            src="../../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg"
+          >
           <wt-icon-btn
             class="wt-navigation-bar__nav-close"
             icon="close"
             @click="isOpened = false"
           ></wt-icon-btn>
         </header>
-        <wt-divider/>
+        <wt-divider />
         <ul class="wt-navigation-bar__nav-list">
           <li
             v-for="(navItem, key) of nav"
-            class="wt-navigation-bar__nav-item"
             :key="key"
+            class="wt-navigation-bar__nav-item"
           >
             <div v-if="!navItem.subNav">
               <div class="wt-navigation-bar__nav-item-wrapper">
                 <router-link
-                  class="wt-navigation-bar__nav-item-link"
                   :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === navItem.value}"
                   :to="navItem.route"
+                  class="wt-navigation-bar__nav-item-link"
                   @click.native="close"
                 > {{ navItem.name || navItem.value }}
                 </router-link>
@@ -46,33 +66,33 @@
             </div>
             <div v-else>
               <button
-                class="wt-navigation-bar__nav-expansion"
                 :class="{
                   'wt-navigation-bar__nav-expansion--expanded': isExpanded(navItem),
                   'wt-navigation-bar__nav-expansion--active': currentNav.expansion === navItem.value,
                 }"
+                class="wt-navigation-bar__nav-expansion"
                 type="button"
                 @click="expand(navItem)"
               >
                 <span class="wt-navigation-bar__nav-expansion-name">{{ navItem.name || navItem.value }}</span>
                 <wt-icon
                   class="wt-navigation-bar__expansion-arrow"
-                  icon="arrow-right"
                   color="active"
+                  icon="arrow-right"
                 ></wt-icon>
               </button>
               <expand-transition>
                 <ul v-if="isExpanded(navItem)">
                   <li
                     v-for="(subNavItem, subNavKey) of navItem.subNav"
-                    class="wt-navigation-bar__nav-item"
                     :key="subNavKey"
+                    class="wt-navigation-bar__nav-item"
                   >
                     <div class="wt-navigation-bar__nav-item-wrapper">
                       <router-link
-                        class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                         :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === subNavItem.value}"
                         :to="nestedRoute(subNavItem, navItem)"
+                        class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                         @click.native="close"
                       >{{ subNavItem.name || subNavItem.value }}
                       </router-link>
@@ -113,14 +133,14 @@ export default {
     currentNav() {
       const path = this.$route.fullPath;
       const currentNav = this.nav
-        .reduce((flatNav, currentNavItem) => {
-          if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
-          return [...flatNav, currentNavItem];
-        }, [])
-        .find((navItem) => path.includes(navItem.route));
+                             .reduce((flatNav, currentNavItem) => {
+                               if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
+                               return [...flatNav, currentNavItem];
+                             }, [])
+                             .find((navItem) => path.includes(navItem.route));
       const currentExpansion = this.nav
-        .filter((nav) => nav.subNav)
-        .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
+                                   .filter((nav) => nav.subNav)
+                                   .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
       return {
         nav: currentNav?.value,
         expansion: currentExpansion?.value,
@@ -154,21 +174,21 @@ export default {
 .wt-navigation-bar__nav {
   @extend %wt-scrollbar;
   position: fixed;
+  z-index: var(--navigation-bar-z-index);
   top: 0;
   bottom: 0;
   left: 0;
+  overflow: auto;
   width: var(--navigation-bar-width);
   padding: var(--navigation-bar-padding);
-  overflow: auto;
-  z-index: var(--navigation-bar-z-index);
   border-radius: var(--border-radius);
-  box-shadow: var(--elevation-10);
   background: var(--navigation-bar-bg-color);
+  box-shadow: var(--elevation-10);
 
   // expand animation optimization
   * {
-    will-change: height;
     transform: translateZ(0);
+    will-change: height;
     backface-visibility: hidden;
     perspective: 1000px;
   }
@@ -176,11 +196,16 @@ export default {
 
 .wt-navigation-bar__nav-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   padding: var(--navigation-bar-header-padding);
 }
 
+.wt-navigation-bar__app-pic {
+  width: var(--navigation-bar-app-pic-width);
+  height: var(--navigation-bar-app-pic-height);
+}
+
 .wt-navigation-bar__nav-item-link {
   @extend %typo-body-1;
   display: block;
@@ -198,26 +223,26 @@ export default {
 }
 
 .wt-navigation-bar__nav-expansion {
-  @extend %typo-heading-3;
+  @extend %typo-subtitle-1;
   position: relative;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   padding: var(--navigation-bar-link-padding);
   outline: none;
 
   &:before {
-    opacity: 0;
-    content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     width: var(--navigation-bar-active-expansion-flag-width);
+    content: '';
+    transition: var(--transition);
+    opacity: 0;
     border-radius: var(--border-radius);
     background: var(--accent-color);
-    transition: var(--transition);
   }
 
   .wt-navigation-bar__expansion-arrow {

package/src/components/organisms/wt-table/wt-table.vue

@@ -2,38 +2,38 @@
   <div class="wt-table">
     <table class="wt-table__table">
       <thead class="wt-table__head">
-      <tr class="wt-table__tr wt-table__tr__head" :style="columnsStyle">
-        <th class="wt-table__th wt-table__th--checkbox" v-if="selectable">
+      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__head">
+        <th v-if="selectable" class="wt-table__th wt-table__th--checkbox">
           <wt-checkbox
             :selected="isAllSelected"
             @change="selectAll"
           ></wt-checkbox>
         </th>
         <th
-          class="wt-table__th"
+          v-for="(col, key) of dataHeaders"
+          :key="key"
           :class="[
            {'wt-table__th--sortable': sortable},
            `wt-table__th--sort-${col.sort}`,
         ]"
-          v-for="(col, key) of dataHeaders"
-          :key="key"
+          class="wt-table__th"
           @click="sort(col)"
         >
           <div class="wt-table__th__text">{{ col.text }}</div>
           <wt-icon
-            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
             v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
             icon="sort-arrow-up"
             size="sm"
           ></wt-icon>
           <wt-icon
-            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
             v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
             icon="sort-arrow-down"
             size="sm"
           ></wt-icon>
         </th>
-        <th class="wt-table__th__actions" v-if="gridActions">
+        <th v-if="gridActions" class="wt-table__th__actions">
           <slot name="actions-header"></slot>
         </th>
       </tr>
@@ -41,44 +41,44 @@
 
       <tbody class="wt-table__body">
       <tr
-        class="wt-table__tr wt-table__tr__body"
         v-for="(row, dataKey) of data"
-        :class="`wt-table__tr__${row.id || dataKey}`"
         :key="dataKey"
+        :class="`wt-table__tr__${row.id || dataKey}`"
         :style="columnsStyle"
+        class="wt-table__tr wt-table__tr__body"
       >
-        <td class="wt-table__td wt-table__td--checkbox" v-if="selectable">
+        <td v-if="selectable" class="wt-table__td wt-table__td--checkbox">
           <wt-checkbox
             v-model="row._isSelected"
           ></wt-checkbox>
         </td>
 
         <td
-          class="wt-table__td"
           v-for="(col, headerKey) of dataHeaders"
           :key="headerKey"
+          class="wt-table__td"
         >
-          <slot :name="col.value" :item="row" :index="dataKey">
+          <slot :index="dataKey" :item="row" :name="col.value">
             <div>{{ row[col.value] }}</div>
           </slot>
         </td>
 
-        <td class="wt-table__td__actions" v-if="gridActions">
-          <slot name="actions" :item="row" :index="dataKey"></slot>
+        <td v-if="gridActions" class="wt-table__td__actions">
+          <slot :index="dataKey" :item="row" name="actions"></slot>
         </td>
       </tr>
       </tbody>
 
-      <tfoot class="wt-table__foot" v-if="isTableFooter">
-      <tr class="wt-table__tr wt-table__tr__foot" :style="columnsStyle">
+      <tfoot v-if="isTableFooter" class="wt-table__foot">
+      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__foot">
         <!--        empty checkbox column -->
-        <th class="wt-table__th__checkbox" v-if="selectable"></th>
+        <th v-if="selectable" class="wt-table__th__checkbox"></th>
         <td
-          class="wt-table__td"
           v-for="(col, headerKey) of dataHeaders"
           :key="headerKey"
+          class="wt-table__td"
         >
-          <slot :name="`${col.value}-footer`" :header="col" :index="headerKey"></slot>
+          <slot :header="col" :index="headerKey" :name="`${col.value}-footer`"></slot>
         </td>
       </tr>
       </tfoot>
@@ -165,15 +165,16 @@ export default {
 }
 
 .wt-table__table {
-  border-collapse: collapse;
   width: 100%;
+  border-collapse: collapse;
 }
 
 .wt-table__head {
   display: block;
-  border-radius: var(--border-radius);
+  box-sizing: border-box;
   border: var(--table-head-border);
   border-color: var(--table-head-border-color);
+  border-radius: var(--border-radius);
 }
 
 //.wt-table__head {
@@ -182,10 +183,10 @@ export default {
 
 .wt-table__tr {
   display: grid;
-  grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
-  grid-column-gap: var(--table-column-gap);
   padding: var(--table-row-padding);
   transition: var(--transition);
+  grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
+  grid-column-gap: var(--table-column-gap);
 
   &:nth-child(2n) {
     background: var(--table-secondary-color);
@@ -197,13 +198,13 @@ export default {
   @extend %typo-body-1;
   display: flex;
   align-items: center;
-  padding: 0;
   width: 100%;
   max-width: 100%;
-  min-height: var(--table-min-height);
   height: fit-content;
-  overflow-wrap: break-word;
+  min-height: var(--table-min-height);
+  padding: 0;
   word-break: break-all;
+  overflow-wrap: break-word;
 
   &__actions {
     display: flex;
@@ -238,7 +239,7 @@ export default {
 }
 
 .wt-table__foot {
-  border-top: var(--table-head-border);
   border-color: var(--table-head-border-color);
+  border-top: var(--table-head-border);
 }
 </style>

package/src/components/organisms/wt-table-actions/wt-table-actions.vue

@@ -81,7 +81,6 @@ export default {
 .wt-table-actions {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
   gap: var(--table-actions-icon-gap);
   padding: var(--table-actions-padding);
 }

package/src/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --tooltip-padding: var(--spacing-3xs) var(--spacing-2xs);
+  --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
   --tooltip-z-index: 100;
 
   --tooltip-light-text-color: var(--text-primary-color);

package/src/css/components/organisms/wt-navigation-bar/_variables.scss

@@ -5,6 +5,8 @@
   --navigation-bar-padding: var(--spacing-sm);
 
   --navigation-bar-header-padding: var(--spacing-xs);
+  --navigation-bar-app-pic-width: 200px;
+  --navigation-bar-app-pic-height: 30px;
 
   --navigation-bar-list-padding: var(--navigation-bar-padding);
   --navigation-bar-link-padding: var(--navigation-bar-padding);

package/src/css/styleguide/colors/_colors.scss

@@ -22,7 +22,7 @@
   --_main-color: var(--_accent-color-hue), 20%, 99%;
   --_contrast-color: var(--_accent-color-hue), 20%, 1%;
   --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
-  --_secondary-color-50: var(--_secondary-color-hue), 22%, 94%;
+  --_secondary-color-50: var(--_secondary-color-hue), 22%, 95%;
   --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
   --_header-color: var(--_page-bg-color-hue), 20%, 90%;
   --_positive-color: var(--_positive-color-hue), 60%, 40%;