@itfin/components 1.2.46 → 1.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.46",
+  "version": "1.2.47",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/components/_tabs.scss

@@ -81,7 +81,10 @@
       flex-grow: 1;
       z-index: 1;
       margin-right: -1px;
-      max-width: calc(100% - var(--itf-tabs-panel-width));
+      
+      @include media-breakpoint-up(lg) {
+        max-width: calc(100% - var(--itf-tabs-panel-width));
+      }
     }
   }
 

package/src/assets/scss/components/select/_dropdown-option.scss

@@ -9,6 +9,20 @@
   cursor: pointer;
 }
 
+@include media-breakpoint-down(md) {
+  .itf-select__dropdown-menu {
+    .dropdown-item.active {
+      background: transparent;
+      color: var(--bs-dropdown-link-color);
+    }
+
+    .dropdown-item.vs__dropdown-option--selected {
+      background: var(--bs-primary);
+      color: $vs-state-active-color;
+    }
+  }
+}
+
 .vs__dropdown-option--highlight {
   background: $vs-state-active-bg;
   color: $vs-state-active-color;

package/src/components/tabs/Tab.vue

@@ -1,7 +1,7 @@
 <template>
-  <a :href="href" class="itf-tab" :data-test="`itf-tab-${id || _uid}`" @click="setActive" :class="{ 'active': isActive }">
-    <span><slot /></span>
-  </a>
+  <span :data-test="`itf-tab-${tabId}`">
+    <slot />
+  </span>
 </template>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
@@ -17,31 +17,8 @@ class itfTab extends Vue {
   @Prop() to;
   @Prop({ type: Boolean, default: undefined }) active;
 
-  get href() {
-    if (this.to) {
-      const route = this.$router.resolve(this.to);
-      return route && route.href;
-    }
-    return 'javascript:;';
-  }
-
-  get isActive() {
-    if (this.active === true || this.active === false) {
-      return this.active;
-    }
-    if (this.to) {
-      const route = this.$router.resolve(this.to);
-      return this.$route.fullPath === (route && route.href);
-    }
-    return this.tabsManager && this.tabsManager.getValue() === this.id;
-  }
-
-  setActive(e) {
-    if (this.to) {
-      this.$router.push(this.to);
-      e.preventDefault();
-    }
-    this.tabsManager.setValue(this.id || this._uid);
+  get tabId() {
+    return this.id || this._uid;
   }
 }
 </script>

package/src/components/tabs/TabDropdown.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="d-lg-none itf-tab-dropdown my-2">
+    <itf-select
+      :options="getOptions()"
+      :reduce="(item) => item.id"
+      :get-option-key="(item) => item.id"
+      :get-option-label="(item) => item.text"
+      :value="value"
+      @input="onTabSelect"
+    >
+      <template #option="{ option }">
+        <v-nodes :nodes="[option.node]" />
+      </template>
+      <template #selected-option="{ option }">
+        <v-nodes :nodes="[option.node]" />
+      </template>
+    </itf-select>
+  </div>
+</template>
+<style lang="scss">
+.itf-tab-dropdown {
+  .itf-tab a {
+    pointer-events: none;
+  }
+}
+</style>
+<script>
+import {Vue, Component, Prop, Provide, Inject} from 'vue-property-decorator';
+import itfSelect from '../select/Select';
+
+export default @Component({
+  name: 'itfTabDropdown',
+  components: {
+    itfSelect,
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.nodes
+    }
+  }
+})
+class itfTabDropdown extends Vue {
+  @Inject({ default: null }) tabsManager;
+  @Prop(Array) nodes;
+
+  get value() {
+    const option = this.getOptions().find(({ node }) => this.tabsManager.isActive(node));
+    return option && option.id;
+  }
+
+  getOptions() {
+    const opts = this.nodes.map(node => {
+      const id = node.componentInstance ? (node.componentInstance.id || node.componentInstance._uid) : '-';
+      const text = node.elm ? node.elm.textContent : '';
+      return { id, text: text.trim(), node }
+    });
+    return opts;
+  }
+
+  onTabSelect(itemId) {
+    const option = this.getOptions().find(({ id }) => itemId === id);
+    if (option) {
+      if (option.node.componentInstance.to) {
+        this.$router.push(option.node.componentInstance.to);
+      }
+    }
+    this.tabsManager.setValue(itemId);
+  }
+}
+</script>

package/src/components/tabs/Tabs.vue

@@ -3,11 +3,13 @@ import {
   Vue, Component, Model, Emit, Prop
 } from 'vue-property-decorator';
 import itfTab from './Tab';
+import itfTabDropdown from './TabDropdown';
 
 export default @Component({
   name: 'itfTabs',
   components: {
-    itfTab
+    itfTab,
+    itfTabDropdown
   },
   provide() {
     return { tabsManager: this }; // do not use Provide from vue-property-decorator
@@ -27,9 +29,16 @@ class itfTabs extends Vue {
     if (this.vertical) {
       staticClass += ' itf-tabs__vertical';
     }
+
+    const list = (this.vertical ? tabNodes : [...tabNodes].reverse());
+    const tabs = list.map((node) => createElement('a', this.createTab(node), [node]));
     return createElement('div', { staticClass }, [
-      createElement('div', { staticClass: 'itf-tabs-panel' }, this.vertical ? tabNodes : tabNodes.reverse()),
-      createElement('div', { staticClass: 'itf-tabs-content' }, contents)
+      createElement('div', { staticClass: 'itf-tabs-panel d-lg-flex d-none' }, tabs),
+      createElement('div', { staticClass: 'itf-tabs-content' }, [createElement(itfTabDropdown, {
+        props: {
+          nodes: tabNodes
+        }
+      }), ...contents])
     ]);
 
     function parseNodes(slots) {
@@ -53,8 +62,50 @@ class itfTabs extends Vue {
     }
   }
 
+  isActive(node) {
+    const options = (node.componentOptions && node.componentOptions.propsData) || {};
+    const id = options.id || Math.random();
+    let isActive = this.getValue() === id;
+    if (options.active === true || options.active === false) {
+      isActive = options.active;
+    } else if (options.to) {
+      const route = this.$router.resolve(options.to);
+      isActive = this.$route.fullPath === (route && route.href);
+    }
+    return isActive;
+  }
+
+  createTab(node) {
+    const options = node.componentOptions.propsData || {};
+    const id = options.id || node.componentOptions.Ctor.cid;
+
+    let href = 'javascript:;';
+    if (options.to) {
+      const route = this.$router.resolve(options.to);
+      href = route && route.href;
+    }
+
+    return {
+      staticClass: 'itf-tab',
+      class: {
+        'active': this.isActive(node)
+      },
+      attrs: { href },
+      on: {
+        click: (e) => {
+          if (options.to) {
+            this.$router.push(options.to);
+            e.preventDefault();
+          }
+          this.setValue(id);
+        }
+      }
+    };
+  }
+
   @Emit('input')
   setValue(value) {
+    console.info(value);
     this.tabNodes = null;
   }