@webitel/ui-sdk 2.1.25 → 2.1.27

package/package.json

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

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

@@ -1,13 +1,13 @@
 <template>
   <nav class="wt-tabs">
     <button
-      class="wt-tab"
+      v-for="(tab) in tabs"
+      :key="tab.value"
       :class="{
         'wt-tab--highlight': tab.value === current.value
       }"
-      v-for="(tab) in tabs"
       :value="tab.text"
-      :key="tab.value"
+      class="wt-tab"
       type="button"
       @click="open(tab)"
     >
@@ -18,98 +18,99 @@
 
     <div class="wt-tabs__underline">
       <div
-        class="wt-tab__underline--highlight"
         :style="{
           width: `${activeLineWidth}px`,
           transform: `translateX(${activeLineOffset}px)`
         }"
+        class="wt-tab__underline--highlight"
       ></div>
     </div>
   </nav>
 </template>
 
 <script>
-  export default {
-    name: 'wt-tabs',
-    props: {
-      current: {
-        type: Object,
-        default: () => ({}),
-      },
-      tabs: {
-        type: Array,
-        default: () => [],
-      },
+export default {
+  name: 'wt-tabs',
+  props: {
+    current: {
+      type: Object,
+      default: () => ({}),
     },
-
-    model: {
-      prop: 'current',
-      event: 'change',
+    tabs: {
+      type: Array,
+      default: () => [],
     },
+  },
 
-    data: () => ({
-      activeLineWidth: 0,
-      activeLineOffset: 0,
-    }),
+  model: {
+    prop: 'current',
+    event: 'change',
+  },
 
-    methods: {
-      open(value) {
-        this.$emit('change', value);
-        this.moveActiveLine(value);
-      },
+  data: () => ({
+    activeLineWidth: 0,
+    activeLineOffset: 0,
+  }),
+
+  methods: {
+    open(value) {
+      this.$emit('change', value);
+      this.moveActiveLine(value);
+    },
 
-      moveActiveLine(newValue) {
-        if (!this.current) return;
-        if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0]) return;
-        const element = this.$refs[newValue][0];
-        this.activeLineWidth = element.clientWidth;
-        this.activeLineOffset = element.offsetLeft;
-      },
+    moveActiveLine(newValue) {
+      if (!this.current) return;
+      if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0]) return;
+      const element = this.$refs[newValue][0];
+      this.activeLineWidth = element.clientWidth;
+      this.activeLineOffset = element.offsetLeft;
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-tabs {
-    position: relative;
-  }
+.wt-tabs {
+  position: relative;
+}
 
-  .wt-tab {
-    @extend %typo-body-1;
-    position: relative;
-    display: inline-block;
-    padding-bottom: var(--tab-padding);
-    margin: var(--tab-margin);
-    color: var(--tab-color);
-    background: transparent;
-    border: none;
-    border-bottom: var(--tab-border);
-    border-bottom-color: transparent;
-    transition: var(--transition);
-    cursor: pointer;
-    z-index: var(--tab-z-index);
-    outline: none;
+.wt-tab {
+  @extend %typo-body-1;
+  position: relative;
+  z-index: var(--tab-z-index);
+  display: flex;
+  flex-wrap: nowrap;
+  padding-bottom: var(--tab-padding);
+  cursor: pointer;
+  transition: var(--transition);
+  color: var(--tab-color);
+  border: none;
+  border-bottom: var(--tab-border);
+  border-bottom-color: transparent;
+  outline: none;
+  background: transparent;
+  gap: var(--tab-gap);
 
-    &:hover,
-    &:focus, {
-      color: var(--tab--hover-color);
-      border-bottom-color: var(--tab--active-border-color);
-    }
+  &:hover,
+  &:focus, {
+    color: var(--tab--hover-color);
+    border-bottom-color: var(--tab--active-border-color);
+  }
 
-    &.wt-tab--highlight {
-      color: var(--tab--active-color);
-      border-bottom-color: var(--tab--active-border-color);
-    }
+  &.wt-tab--highlight {
+    color: var(--tab--active-color);
+    border-bottom-color: var(--tab--active-border-color);
+  }
 
-    //// disables bold font resize on hover
-    &:after {
-      display: block;
-      content: attr(value);
-      font-weight: bold;
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-    }
+  //// disables bold font resize on hover
+  &:after {
+    display: block;
+    visibility: hidden;
+    overflow: hidden;
+    height: 0;
+    content: attr(value);
+    font-weight: bold;
   }
+}
 
 </style>

package/src/components/organisms/wt-table/__tests__/WtTable.spec.js

@@ -6,6 +6,7 @@ const headers = [
   {
     text: 'heading 1',
     value: 'h1',
+    sort: null,
   },
   {
     text: 'heading2',

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

@@ -13,7 +13,7 @@
           v-for="(col, key) of dataHeaders"
           :key="key"
           :class="[
-           {'wt-table__th--sortable': sortable},
+           {'wt-table__th--sortable': isColSortable(col)},
            `wt-table__th--sort-${col.sort}`,
         ]"
           class="wt-table__th"
@@ -146,10 +146,17 @@ export default {
 
   methods: {
     sort(col) {
+      if (!this.isColSortable(col)) return;
       const nextSort = getNextSortOrder(col.sort);
-      if (this.sortable) this.$emit('sort', col, nextSort);
+      this.$emit('sort', col, nextSort);
+    },
+    isColSortable({ sort }) {
+      /*       --sortable = sortable && col.sort === undefined cause there may be some columns we don't want to sort
+            strict check for  === undefined is used because col.sort = null is sort order too (actualu, without sort)
+            so we need to check if this property is present
+    */
+      return this.sortable && sort !== undefined;
     },
-
     selectAll() {
       const { isAllSelected } = this;
       // eslint-disable-next-line no-param-reassign,no-return-assign

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

@@ -4,11 +4,11 @@
   --tabs-underiline-color: transparent;
 
   --tab-padding: var(--spacing-2xs);
-  --tab-margin: 0 5px;
+  --tab-gap: var(--spacing-2xs);
   --tab-color: var(--text-outline-color);
   --tab--hover-color: var(--text-primary-color);
   --tab--active-color: var(--text-primary-color);
   --tab-border: 4px solid;
   --tab--active-border-color: var(--accent-color);
   --tab-z-index: 1;
-}
+}