@itfin/components 1.0.67 → 1.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "main": "dist/itfin-components.umd.js",
   "unpkg": "dist/itfin-components.common.js",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",

package/src/components/tabs/Tab.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="itf-tab" :data-test="`itf-tab-${id}`" @click="setActive" :class="{ active }">
+  <a :href="href" class="itf-tab" :data-test="`itf-tab-${id || _id}`" @click="setActive" :class="{ active }">
     <span><slot /></span>
-  </div>
+  </a>
 </template>
 <style lang="scss" scoped>
 .itf-tab {
@@ -21,6 +21,14 @@ class itfTab extends Vue {
   @Prop() id;
   @Prop() to;
 
+  get href() {
+    if (this.to) {
+      const route = this.$router.resolve(this.to);
+      return route && route.href;
+    }
+    return 'javascript:;';
+  }
+
   get active() {
     if (this.to) {
       const route = this.$router.resolve(this.to);
@@ -33,7 +41,7 @@ class itfTab extends Vue {
     if (this.to) {
       this.$router.push(this.to);
     }
-    this.tabsManager.setValue(id);
+    this.tabsManager.setValue(this.id || this._id);
   }
 }
 </script>

package/src/components/tabs/TabContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="tabsManager && tabsManager.getValue() === id" :class="{ filled }" class="itf-tab-content" :data-test="`itf-tab-content-${id}`">
+  <div v-show="tabsManager && tabsManager.getValue() === id" :class="{ filled }" class="itf-tab-content" :data-test="`itf-tab-content-${id || _id}`">
     <slot />
   </div>
 </template>

package/src/components/tabs/Tabs.vue

@@ -23,7 +23,7 @@ class itfTabs extends Vue {
     this.tabNodes = tabNodes;
 
     return createElement('div', { staticClass: 'itf-tabs' }, [
-      createElement('div', { staticClass: 'itf-tabs-panel' }, tabNodes),
+      createElement('div', { staticClass: 'itf-tabs-panel' }, tabNodes.reverse()),
       createElement('div', { staticClass: 'itf-tabs-content' }, contents)
     ]);
 

package/src/components/tabs/index.stories.js

@@ -49,6 +49,12 @@ storiesOf('Common', module)
     <itf-tab id="Test2">
     Content 2
     </itf-tab>
+    <itf-tab id="Test3">
+    Content 3
+    </itf-tab>
+    <itf-tab id="Test4">
+    Content 4
+    </itf-tab>
     <itf-tab-content id="Test1">
     asd
     </itf-tab-content>

package/src/components/tabs/tabs.scss

@@ -19,14 +19,17 @@
 
 .itf-tabs {
   .itf-tabs-panel {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
     overflow: hidden;
     padding-left: calc(var(--itf-tabs-tab-padding) * 2.1);
-    list-style-type: none;
     display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
+    flex-wrap: wrap;
 
     .itf-tab {
+      white-space: nowrap;
       display: block;
       //float: right;
       padding: 10px var(--itf-tabs-tab-padding) 8px;
@@ -39,7 +42,9 @@
       background-color: var(--itf-tabs-inactive-bg);
       color: var(--itf-tabs-inactive-color);
       border-top: 1px solid var(--itf-tabs-inactive-border-color);
-      border-bottom: 1px solid var(--itf-tabs-inactive-border-color);
+      tab-index: 0;
+      text-decoration: none;
+      outline: 0 none;
 
       & > span {
         position: relative;
@@ -69,7 +74,8 @@
         //transform: skew(-30deg, 0deg);
         box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
       }
-      &:hover, &:hover:before, &:hover:after {
+      &:hover, &:hover:before, &:hover:after,
+      &:focus, &:focus:before, &:focus:after {
         background-color: var(--itf-tabs-hover-bg);
         color: var(--itf-tabs-hover-color);
         border-top: 1px solid var(--itf-tabs-hover-border-color);
@@ -81,7 +87,6 @@
           background-color: var(--itf-tabs-active-bg);
           color: var(--itf-tabs-active-color);
           border-top: 1px solid var(--itf-tabs-active-border-color);
-          border-bottom: 0 none;
         }
       }
     }