@itfin/components 1.0.87 → 1.0.88

package/package.json

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

package/src/components/button/Button.vue

@@ -40,6 +40,7 @@
 .itf-button.btn {
   display: inline-flex;
   align-items: center;
+  position: relative;
 
   &.btn-primary {
     color: #fff; // @todo remove when remove vuetify
@@ -52,23 +53,26 @@
     pointer-events: none;
   }
   .itf-spinner {
-    mix-blend-mode: normal;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -0.75rem;
   }
 
   &.loading {
     cursor: progress;
     pointer-events: none;
+    color: transparent;
 
-    .itf-spinner {
-      margin-right: 0.5rem;
-    }
     &.btn-sm .itf-spinner {
       width: 1rem;
       height: 1rem;
+      margin: -0.5rem;
     }
     &.btn-lg .itf-spinner {
       width: 1.75rem;
       height: 1.75rem;
+      margin: -0.875rem;
     }
   }
   &.btn-basic {

package/src/components/datepicker/DatePicker.vue

@@ -114,6 +114,7 @@ class itfDatePicker extends Vue {
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
+  @Prop({ type: String, default: 'bottom-start' }) placement;
   @Prop(Boolean) clearable;
 
   focused = false;
@@ -158,7 +159,7 @@ class itfDatePicker extends Vue {
       allowHTML: true,
       trigger: 'click',
       interactive: true,
-      placement: 'bottom-start',
+      placement: this.placement,
       appendTo: context
     });
 

package/src/components/datepicker/DateRangePicker.vue

@@ -156,6 +156,7 @@ class itfDateRangePicker extends Vue {
   @Prop({ type: Boolean, default: false }) clearable;
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
+  @Prop({ type: String, default: 'bottom-start' }) placement;
 
   focused = false;
 
@@ -199,7 +200,7 @@ class itfDateRangePicker extends Vue {
       allowHTML: true,
       trigger: 'click',
       interactive: true,
-      placement: 'bottom-start',
+      placement: this.placement,
       appendTo: context
     });
   }

package/src/components/datepicker/MonthPicker.vue

@@ -86,6 +86,7 @@ class itfMonthPicker extends Vue {
   @Prop({ type: String, default: 'MMMM, yyyy' }) displayFormat;
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
+  @Prop({ type: String, default: 'bottom-start' }) placement;
 
   focused = false;
 
@@ -111,7 +112,7 @@ class itfMonthPicker extends Vue {
       allowHTML: true,
       trigger: 'click',
       interactive: true,
-      placement: 'bottom-start',
+      placement: this.placement,
       appendTo: context
     });
   }