@itfin/components 1.0.102 → 1.0.105

package/package.json

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

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -1,25 +1,31 @@
 <template>
 
   <nav aria-label="breadcrumb">
-    <ol class="breadcrumb mb-1">
+    <ol class="breadcrumb mb-1" itemscope itemtype="https://schema.org/BreadcrumbList">
       <li
         v-for="(crumb, n) of items"
         class="breadcrumb-item"
         :key="n"
         :class="{'active': n === items.length - 1}"
         :aria-current="n === items.length - 1 ? 'page' : null"
+        itemprop="itemListElement"
+        itemscope
+        itemtype="https://schema.org/ListItem"
       >
-        <span v-if="crumb.disabled || !crumb.to">{{crumb.text}}</span>
-        <nuxt-link v-else :to="crumb.to" :exact="crumb.exact">{{crumb.text}}</nuxt-link>
+        <span itemprop="item" v-if="crumb.disabled || !crumb.to">
+          <span class="d-none d-md-inline" itemprop="name">{{crumb.text}}</span>
+          <span class="d-md-none" aria-hidden="true">{{crumb.mobileText || crumb.text}}</span>
+        </span>
+        <nuxt-link itemprop="item" v-else :to="crumb.to" :exact="crumb.exact">
+          <span class="d-none d-md-inline" itemprop="name">{{crumb.text}}</span>
+          <span class="d-md-none" aria-hidden="true">{{crumb.mobileText || crumb.text}}</span>
+        </nuxt-link>
+        <meta itemprop="position" :content="n + 1" />
       </li>
     </ol>
   </nav>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/breadcrumb';
-</style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 

package/src/components/button/Button.vue

@@ -161,10 +161,12 @@ class itfButton extends Vue {
   @Prop({ type: [String, Object] }) to;
   @Prop(String) href;
   @Prop(String) target;
+  @Prop() class;
 
   render (createElement, { data, slots, children, props }) {
     const {
-      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText
+      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText,
+      class: classNames
     } = props;
     const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
     const staticClass = (data.staticClass || '') + ' itf-button btn';
@@ -175,7 +177,6 @@ class itfButton extends Vue {
         tabindex: 0
       },
       class: {
-        ...(data.class || {}),
         [`btn-${color}`]: color,
         'itf-button__block': block,
         'labeled': labeled,
@@ -194,6 +195,16 @@ class itfButton extends Vue {
       props,
       staticClass
     };
+    if (data.class) {
+      if (typeof data.class === 'string') {
+        comProps.class[data.class] = true;
+      } else {
+        comProps.class = {
+          ...data.class,
+          ...comProps.class
+        };
+      }
+    }
     if (component === 'button') {
       comProps.attrs.type = 'button';
     }

package/src/components/dropdown/Dropdown.vue

@@ -86,7 +86,7 @@ class itfDropdown extends Vue {
       return;
     }
     const { default: Dropdown } = await import('bootstrap/js/src/dropdown.js');
-    this.modalEl = new Dropdown(this.$refs.toggle.$el, {
+    this.modalEl = new Dropdown(this.$refs.toggle, {
       reference: 'toggle',
       autoClose: this.autoclose
     });

package/src/components/tabs/Tab.vue

@@ -32,7 +32,7 @@ class itfTab extends Vue {
   get active() {
     if (this.to) {
       const route = this.$router.resolve(this.to);
-      return this.$route.path === (route && route.href);
+      return this.$route.fullPath === (route && route.href);
     }
     return this.tabsManager && this.tabsManager.getValue() === this.id;
   }