@webitel/ui-sdk 0.9.65 → 1.0.2

package/src/components/organisms/wt-app-header/wt-header-actions.vue

@@ -1,177 +1,178 @@
 <template>
   <div class="wt-header-actions">
     <wt-icon-btn
-      class="wt-header-actions__btn"
+      v-clickaway="close"
       :class="{'active': isOpened}"
       :tooltip="$t('webitelUI.headerActions.account')"
+      class="wt-header-actions__btn"
       icon="account"
       @click="isOpened = !isOpened"
-      v-clickaway="close"
     ></wt-icon-btn>
     <transition name="fade">
-    <section class="wt-header-actions__panel-wrapper" v-show="isOpened">
-      <header class="wt-header-actions__header" v-if="isHeader">
-        <h3
-          class="wt-header-actions__name">{{ userName }}</h3>
-        <p
-          class="wt-header-actions__account">{{ userAccount }}</p>
-      </header>
-      <ul class="wt-header-actions__actions-wrapper">
-        <li class="wt-header-actions__action">
-          <a
-            class="wt-header-actions__action__link"
-            href="https://docs.webitel.com/display/WEP/Webitel+Elastic+Platform"
-            target="_blank"
-            @click="close"
-          >
-            <wt-icon icon="docs" size="sm"></wt-icon>
-            <span>{{$t('webitelUI.headerActions.docs')}}</span>
-          </a>
-        </li>
-        <li class="wt-header-actions__action">
-          <a
-            class="wt-header-actions__action__link"
-            @click.prevent="settings"
-          >
-            <wt-icon icon="settings" size="sm"></wt-icon>
-            <span>{{$t('webitelUI.headerActions.settings')}}</span>
-          </a>
-        </li>
-        <li class="wt-header-actions__action wt-header-actions__action--logout">
-          <a
-            class="wt-header-actions__action__link"
-            @click.prevent="logout"
-          >
-            <wt-icon icon="logout" size="sm" color="danger"></wt-icon>
-            <span>{{$t('webitelUI.headerActions.logout')}}</span>
-          </a>
-        </li>
-      </ul>
-      <footer class="wt-header-actions__footer" v-if="isFooter">
-        <p class="wt-header-actions__build__version">
-          {{ buildVersion }}
-        </p>
-      </footer>
-    </section>
+      <section v-show="isOpened" class="wt-header-actions__panel-wrapper">
+        <header v-if="isHeader" class="wt-header-actions__header">
+          <h3
+            class="wt-header-actions__name"
+          >{{ userName }}</h3>
+          <p
+            class="wt-header-actions__account"
+          >{{ userAccount }}</p>
+        </header>
+        <ul class="wt-header-actions__actions-wrapper">
+          <li class="wt-header-actions__action">
+            <a
+              class="wt-header-actions__action__link"
+              href="https://docs.webitel.com/display/WEP/Webitel+Elastic+Platform"
+              target="_blank"
+              @click="close"
+            >
+              <wt-icon icon="docs" size="sm"></wt-icon>
+              <span>{{ $t('webitelUI.headerActions.docs') }}</span>
+            </a>
+          </li>
+          <li class="wt-header-actions__action">
+            <a
+              class="wt-header-actions__action__link"
+              @click.prevent="settings"
+            >
+              <wt-icon icon="settings" size="sm"></wt-icon>
+              <span>{{ $t('webitelUI.headerActions.settings') }}</span>
+            </a>
+          </li>
+          <li class="wt-header-actions__action wt-header-actions__action--logout">
+            <a
+              class="wt-header-actions__action__link"
+              @click.prevent="logout"
+            >
+              <wt-icon color="danger" icon="logout" size="sm"></wt-icon>
+              <span>{{ $t('webitelUI.headerActions.logout') }}</span>
+            </a>
+          </li>
+        </ul>
+        <footer v-if="isFooter" class="wt-header-actions__footer">
+          <p class="wt-header-actions__build__version">
+            {{ buildVersion }}
+          </p>
+        </footer>
+      </section>
     </transition>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'wt-header-actions',
-    data: () => ({
-      isOpened: false,
-    }),
-    props: {
-      user: {
-        type: Object,
-        default: () => ({}),
-      },
-      buildInfo: {
-        type: Object,
-      },
+export default {
+  name: 'wt-header-actions',
+  data: () => ({
+    isOpened: false,
+  }),
+  props: {
+    user: {
+      type: Object,
+      default: () => ({}),
     },
+    buildInfo: {
+      type: Object,
+    },
+  },
 
-    computed: {
-      isHeader() {
-        return !!(this.userName || this.userAccount);
-      },
-      isFooter() {
-        return this.buildInfo;
-      },
-      userName() {
-        return this.user.name || this.user.username;
-      },
-      userAccount() {
-        return this.user.preferredUsername || this.user.account;
-      },
-      buildVersion() {
-        return `${this.$t('webitelUI.headerActions.buildVersion')}: v${this.buildInfo.release}-${this.buildInfo.build}`;
-      },
+  computed: {
+    isHeader() {
+      return !!(this.userName || this.userAccount);
+    },
+    isFooter() {
+      return this.buildInfo;
+    },
+    userName() {
+      return this.user.name || this.user.username;
     },
+    userAccount() {
+      return this.user.preferredUsername || this.user.account;
+    },
+    buildVersion() {
+      return `${this.$t('webitelUI.headerActions.buildVersion')}: v${this.buildInfo.release}-${this.buildInfo.build}`;
+    },
+  },
 
-    methods: {
-      settings() {
-        this.$emit('settings');
-        this.close();
-      },
+  methods: {
+    settings() {
+      this.$emit('settings');
+      this.close();
+    },
 
-      logout() {
-        this.$emit('logout');
-        this.close();
-      },
+    logout() {
+      this.$emit('logout');
+      this.close();
+    },
 
-      close() {
-        this.isOpened = false;
-      },
+    close() {
+      this.isOpened = false;
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-header-actions {
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin-left: var(--wt-app-header-content-gap);
-    z-index: var(--wt-app-header-content-z-index);
-  }
-
-  .wt-header-actions__panel-wrapper {
-    @extend %typo-body-md;
-    position: absolute;
-    top: 100%; // icon
-    right: 0;
-    min-width: var(--wt-header-actions-min-width);
-    margin-top: var(--wt-app-header-content-panel-margin);
-    background: var(--wt-app-header-content-bg-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-    transition: var(--transition);
-  }
-
-  .wt-header-actions__header, .wt-header-actions__footer {
-    padding: var(--wt-app-header-content-gap);
-  }
-
-  .wt-header-actions__name {
-    @extend %typo-body-lg;
-    white-space: nowrap;
-  }
-
-  .wt-header-actions__account {
-    @extend %typo-body-lg;
-    white-space: nowrap;
+.wt-header-actions {
+  position: relative;
+  z-index: var(--wt-app-header-content-z-index);
+  display: flex;
+  align-items: center;
+}
+
+.wt-header-actions__panel-wrapper {
+  position: absolute;
+  top: 100%; // icon
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-header-actions-content-sections-gap);
+  min-width: var(--wt-header-actions-min-width);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  padding: var(--wt-header-actions-padding);
+  transition: var(--transition);
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-1);
+}
+
+.wt-header-actions__name {
+  @extend %typo-subtitle-1;
+  white-space: nowrap;
+}
+
+.wt-header-actions__account {
+  @extend %typo-body-1;
+  white-space: nowrap;
+}
+
+.wt-header-actions__action {
+  display: flex;
+  transition: var(--transition);
+
+  &:hover {
+    background: var(--wt-header-actions-action-bg-color--hover);
   }
 
-  .wt-header-actions__action {
+  .wt-header-actions__action__link {
+    @extend %typo-body-1;
     display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--wt-header-actions-action-link-padding);
+    cursor: pointer;
 
-    &:hover {
-      background: var(--wt-header-actions-action-bg-color--hover);
-    }
-
-    .wt-header-actions__action__link {
-      @extend %typo-body-md;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: var(--wt-header-actions-action-link-padding);
-      cursor: pointer;
-
-      .wt-icon {
-        margin-right: 10px;
-      }
-    }
-
-    &--logout .wt-header-actions__action__link {
-      color: var(--false-color);
+    .wt-icon {
+      margin-right: var(--wt-header-actions-action-link-padding);
     }
   }
 
-  .wt-header-actions__build__version {
-    @extend %typo-body-sm;
-    white-space: nowrap;
+  &--logout .wt-header-actions__action__link {
+    color: var(--false-color);
   }
+}
+
+.wt-header-actions__build__version {
+  @extend %typo-caption;
+  white-space: nowrap;
+}
 </style>

package/src/components/organisms/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$actions-width: calc(2 * (24px + var(--table-actions-icon-gap)));
+$actions-width: calc(2 * (var(--icon-md-size) + var(--table-actions-icon-gap)));
 
 .filters-panel-wrapper {
   display: flex;
@@ -67,7 +67,7 @@ $actions-width: calc(2 * (24px + var(--table-actions-icon-gap)));
 // -- sass doesnt work with css variables :(
 $width-except-filters: 60px + 60px + 88px;
 $filter-width: 230px;
-$filter-gap: 10px; // var(--component-spacing)
+$filter-gap: 10px; // var(--spacing-xs)
 @function filters-width($num) {
   // 1px corrects max width
   @return ($filter-width * $num) + $filter-gap * $num + $width-except-filters - 1px;
@@ -76,7 +76,7 @@ $filter-gap: 10px; // var(--component-spacing)
 .filters-wrap {
   display: grid;
   flex-wrap: wrap;
-  grid-gap: var(--component-spacing);
+  grid-gap: var(--spacing-xs);
 
   .filters-panel-wrapper & > * {
   }

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

@@ -27,14 +27,13 @@ export default {
   justify-content: space-between;
   flex-wrap: wrap;
   min-height: var(--headline-min-height);
-  padding: var(--headline-padding);
   box-sizing: border-box;
   background: var(--headline-background);
   border-radius: var(--border-radius);
 }
 
 .wt-headline__title {
-  @extend %typo-heading-md;
+  @extend %typo-heading-2;
   margin-right: var(--headline-title-margin);
 }
 

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

@@ -158,10 +158,11 @@ export default {
   bottom: 0;
   left: 0;
   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(--box-shadow);
+  box-shadow: var(--elevation-10);
   background: var(--navigation-bar-bg-color);
 
   // expand animation optimization
@@ -180,28 +181,24 @@ export default {
   padding: var(--navigation-bar-header-padding);
 }
 
-.wt-navigation-bar__nav-list {
-  padding: var(--navigation-bar-list-padding);
-}
-
 .wt-navigation-bar__nav-item-link {
-  @extend %typo-body-lg;
+  @extend %typo-body-1;
   display: block;
   padding: var(--navigation-bar-link-padding);
   transition: var(--transition);
   word-wrap: break-word;
 
   &:hover {
-    background: var(--main-option-hover-color);
+    background: var(--accent-secondary-color);
   }
 
   &--active {
-    background: var(--main-option-hover-color);
+    background: var(--accent-secondary-color);
   }
 }
 
 .wt-navigation-bar__nav-expansion {
-  @extend %typo-heading-sm;
+  @extend %typo-heading-3;
   position: relative;
   display: flex;
   justify-content: space-between;
@@ -216,10 +213,10 @@ export default {
     position: absolute;
     top: 0;
     bottom: 0;
-    left: calc(var(--navigation-bar-horizontal-padding) * -1);
+    left: 0;
     width: var(--navigation-bar-active-expansion-flag-width);
     border-radius: var(--border-radius);
-    background: var(--main-accent-color);
+    background: var(--accent-color);
     transition: var(--transition);
   }
 

package/src/components/organisms/wt-page-wrapper/wt-page-wrapper.vue

@@ -3,7 +3,7 @@
     <div class="wt-page-wrapper__header">
       <slot name="header"></slot>
     </div>
-    <div class="wt-page-wrapper__actions-panel" v-if="actionsPanel">
+    <div v-if="actionsPanel" class="wt-page-wrapper__actions-panel">
       <slot name="actions-panel"></slot>
     </div>
     <div class="wt-page-wrapper__main">
@@ -28,33 +28,25 @@ export default {
 .wt-page-wrapper {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
   box-sizing: border-box;
+  min-height: 100%;
   padding: var(--page-wrapper-padding);
+  gap: var(--page-wrapper-section-gap);
 }
 
 .wt-page-wrapper__header,
 .wt-page-wrapper__actions-panel,
 .wt-page-wrapper__main {
   box-sizing: border-box;
-  background: var(--main-primary-color);
+  padding: var(--page-wrapper-section-padding);
   border-radius: var(--border-radius);
-}
-
-.wt-page-wrapper__header,
-.wt-page-wrapper__actions-panel {
-  margin-bottom: var(--page-wrapper-section-margin);
-}
-
-.wt-page-wrapper__actions-panel {
-  padding: var(--page-wrapper-padding);
+  background: var(--main-color);
 }
 
 .wt-page-wrapper__main {
-  flex: 1;
   display: flex;
+  flex: 1;
   width: 100%;
-  padding: var(--page-wrapper-main-section-padding);
 }
 
 </style>

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

@@ -77,7 +77,7 @@ export default {
 
   methods: {
     inputHandler(value) {
-      const size = (value > 0 && value <= 1000)
+      const size = (value >= 0 && value <= 1000)
         ? value
         : this.defaultSize;
       this.$emit('input', size);
@@ -98,7 +98,7 @@ export default {
 
 <style lang="scss" scoped>
 .wt-pagination {
-  @extend %typo-body-md;
+  @extend %typo-body-1;
 
   display: inline-flex;
   align-items: center;
@@ -108,11 +108,11 @@ export default {
 .wt-pagination__size {
   display: flex;
   align-items: center;
-  margin-right: var(--pagination-margin-right);
+  margin-right: var(--pagination-gap);
 }
 
 .wt-pagination__size-text {
-  margin-right: var(--pagination-size-text-margin-right);
+  margin-right: var(--pagination-gap);
 }
 
 .wt-pagination__size-input {
@@ -125,7 +125,7 @@ export default {
 }
 
 .wt-pagination__page-control {
-  margin-left: var(--pagination-page-controls-margin);
+  margin-left: var(--pagination-gap);
 
   &:first-child {
     margin-left: 0;

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

@@ -106,7 +106,7 @@ export default {
 @import "~plyr/src/sass/plyr.scss";
 
 .wt-player {
-  @extend %typo-body-md;
+  @extend %typo-body-2;
   position: sticky;
   bottom: 60px;
 

package/src/components/organisms/wt-status-select/wt-status-select.vue

@@ -42,6 +42,11 @@ export default {
     options: {
       type: Array,
     },
+    // size: {
+    //   type: String,
+    //   default: 'md',
+    //   options: ['sm', 'md'],
+    // },
   },
   model: {
     prop: 'status',
@@ -90,19 +95,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wt-select ::v-deep {
-  box-shadow: var(--box-shadow);
+.wt-status-select.wt-select ::v-deep {
+  box-shadow: var(--elevation-5);
+
+  .multiselect {
+    min-height: 0;
+  }
 
   .multiselect__tags {
-    padding: var(--status-select-select-tags-padding);
+    min-height: 0;
+    padding: var(--status-select-padding);
     border: none;
   }
 
+  .wt-select__arrow-caret {
+    top: 0;
+    right: 0;
+  }
+
   .multiselect__content-wrapper {
     border: none;
 
+    .multiselect__option {
+      min-height: 0;
+      padding: 0;
+      color: var(--status-select-option-color);
+    }
+
     .multiselect__option--highlight {
-      color: var(--status-select--hover-color);
       background: var(--status-select-bg--hover-color);
     }
   }

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

@@ -3,7 +3,7 @@
     <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__checkbox" v-if="selectable">
+        <th class="wt-table__th wt-table__th--checkbox" v-if="selectable">
           <wt-checkbox
             :selected="isAllSelected"
             @change="selectAll"
@@ -24,11 +24,13 @@
             class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
             v-if="sortable"
             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"
             icon="sort-arrow-down"
+            size="sm"
           ></wt-icon>
         </th>
         <th class="wt-table__th__actions" v-if="gridActions">
@@ -45,7 +47,7 @@
         :key="dataKey"
         :style="columnsStyle"
       >
-        <td class="wt-table__td__checkbox" v-if="selectable">
+        <td class="wt-table__td wt-table__td--checkbox" v-if="selectable">
           <wt-checkbox
             v-model="row._isSelected"
           ></wt-checkbox>
@@ -69,7 +71,7 @@
 
       <tfoot class="wt-table__foot" v-if="isTableFooter">
       <tr class="wt-table__tr wt-table__tr__foot" :style="columnsStyle">
-<!--        empty checkbox column -->
+        <!--        empty checkbox column -->
         <th class="wt-table__th__checkbox" v-if="selectable"></th>
         <td
           class="wt-table__td"
@@ -121,7 +123,7 @@ export default {
 
     dataHeaders() {
       return this.headers
-        .filter((header) => header.show === undefined || header.show);
+                 .filter((header) => header.show === undefined || header.show);
     },
 
     columnsStyle() {
@@ -168,9 +170,10 @@ export default {
 }
 
 .wt-table__head {
-  //display: block;
-  border-bottom: var(--table-head-borer-bottom);
-  border-color: var(--table-head-borer-color);
+  display: block;
+  border-radius: var(--border-radius);
+  border: var(--table-head-border);
+  border-color: var(--table-head-border-color);
 }
 
 //.wt-table__head {
@@ -181,7 +184,6 @@ export default {
   display: grid;
   grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
   grid-column-gap: var(--table-column-gap);
-  min-height: var(--table-min-height);
   padding: var(--table-row-padding);
   transition: var(--transition);
 
@@ -192,12 +194,14 @@ export default {
 
 .wt-table__th,
 .wt-table__td {
-  @extend %typo-body-md;
+  @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;
   word-break: break-all;
 
@@ -209,7 +213,6 @@ export default {
 }
 
 .wt-table__th {
-  min-height: 24px; // prevent sort arrow toggling layout shift
   font-weight: normal;
 
   &--sortable {
@@ -235,7 +238,7 @@ export default {
 }
 
 .wt-table__foot {
-  border-top: var(--table-head-borer-bottom);
-  border-color: var(--table-head-borer-color);
+  border-top: var(--table-head-border);
+  border-color: var(--table-head-border-color);
 }
 </style>