@itfin/components 1.0.101 → 1.0.104

package/package.json

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

package/src/components/button/Button.vue

@@ -1,37 +1,3 @@
-<template>
-
-  <nuxt-link
-    @click.native="$emit('click', $event)"
-    class="itf-button btn"
-    tabindex="0"
-    type="button"
-    :to="toLink || {}"
-    :disabled="disabled"
-    :target="target"
-    :tag="isLink ? 'a' : 'button'"
-    :event="isLink ? 'click' : []"
-    :class="{
-      [`btn-${color}`]: color,
-      'itf-button__block': block,
-      'labeled': labeled,
-      'disabled': disabled || loading,
-      'btn-primary': primary,
-      'btn-basic': !primary && !secondary && !color,
-      'btn-secondary': secondary,
-      'btn-sm': small,
-      'btn-lg': large,
-      // 'px-3': small && !icon,
-      // 'px-5': large && !icon,
-      // 'px-4': !icon && !large && !small,
-      'btn-icon': icon,
-      'loading': loading
-    }">
-    <div class="itf-spinner" :class="{'itf-spinner__white': primary}" v-if="loading"></div>
-    <div v-if="loading && loadingText">{{loadingText}}</div>
-    <slot v-else></slot>
-  </nuxt-link>
-
-</template>
 <style lang="scss">
 @import '../../assets/scss/main';
 //@import '~bootstrap/scss/buttons';
@@ -141,10 +107,41 @@
   }
 }
 </style>
+<!---template>
+
+  <nuxt-link
+    @click.native="$emit('click', $event)"
+    :disabled="disabled"
+    :target="target"
+    :tag="isLink ? 'a' : 'button'"
+    :event="isLink ? 'click' : []"
+    :class="{
+      [`btn-${color}`]: color,
+      'itf-button__block': block,
+      'labeled': labeled,
+      'disabled': disabled || loading,
+      'btn-primary': primary,
+      'btn-basic': !primary && !secondary && !color,
+      'btn-secondary': secondary,
+      'btn-sm': small,
+      'btn-lg': large,
+      // 'px-3': small && !icon,
+      // 'px-5': large && !icon,
+      // 'px-4': !icon && !large && !small,
+      'btn-icon': icon,
+      'loading': loading
+    }">
+    <div class="itf-spinner" :class="{'itf-spinner__white': primary}" v-if="loading"></div>
+    <div v-if="loading && loadingText">{{loadingText}}</div>
+    <slot v-else></slot>
+  </nuxt-link>
+
+</template-->
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 export default @Component({
+  functional: true,
   name: 'itfButton',
   components: {
   }
@@ -164,18 +161,73 @@ class itfButton extends Vue {
   @Prop({ type: [String, Object] }) to;
   @Prop(String) href;
   @Prop(String) target;
+  @Prop() class;
 
-  get toLink() {
-    if (this.to) {
-      return this.to || {};
-    } else if (this.href) {
-      return { path: this.href };
+  render (createElement, { data, slots, children, props }) {
+    const {
+      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';
+    const comProps = {
+      ...data,
+      attrs: {
+        ...data.attrs,
+        tabindex: 0
+      },
+      class: {
+        [`btn-${color}`]: color,
+        'itf-button__block': block,
+        'labeled': labeled,
+        'disabled': disabled || loading,
+        'btn-primary': primary,
+        'btn-basic': !primary && !secondary && !color,
+        'btn-secondary': secondary,
+        'btn-sm': small,
+        'btn-lg': large,
+        // 'px-3': small && !icon,
+        // 'px-5': large && !icon,
+        // 'px-4': !icon && !large && !small,
+        'btn-icon': icon,
+        'loading': loading
+      },
+      props,
+      staticClass
+    };
+    if (data.class) {
+      if (typeof data.class === 'string') {
+        comProps.class[data.class] = true;
+      } else {
+        comProps.class = {
+          ...data.class,
+          ...comProps.class
+        };
+      }
     }
-    return {};
-  }
-
-  get isLink() {
-    return this.href || this.to;
+    if (component === 'button') {
+      comProps.attrs.type = 'button';
+    }
+    if (href) {
+      comProps.attrs.href = href;
+    }
+    if (target) {
+      comProps.attrs.target = target;
+    }
+    let childs = [];
+    if (loading) {
+      childs.push([createElement('div', { staticClass: 'itf-spinner', class: { 'itf-spinner__white': primary } })]);
+    }
+    if (loading && loadingText) {
+      childs.push([createElement('div', loadingText)]);
+    } else if (children && children.length) {
+      childs.push(...children);
+    }
+    return createElement(
+      component,
+      comProps,
+      childs
+    )
   }
 }
 </script>

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/select/Select.vue

@@ -1103,7 +1103,7 @@ export default {
         this.searchEl === undefined ||
         ignoredButtons
           .filter(Boolean)
-          .some((ref) => ref.$el.contains(event.target) || ref === event.target)
+          .some((ref) => ref === event.target || (ref.$el || ref).contains(event.target))
       ) {
         event.preventDefault()
         return

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;
   }