@itfin/components 1.0.86 → 1.0.89

package/package.json

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

package/src/components/app/App.vue

@@ -92,6 +92,9 @@ class itfApp extends Vue {
   }
 
   showSuccess(message, title = '') {
+    if (typeof document === 'undefined') {
+      return;
+    }
     return Message.success({
       isCollapsed: false,
       showClose: true,
@@ -104,6 +107,9 @@ class itfApp extends Vue {
   }
 
   showError(message, opts = {}) {
+    if (typeof document === 'undefined') {
+      return;
+    }
     return Message.error({
       isCollapsed: false,
       showClose: true,
@@ -116,6 +122,9 @@ class itfApp extends Vue {
   }
 
   showMessage(options) {
+    if (typeof document === 'undefined') {
+      return;
+    }
     return Message.toast({
       isCollapsed: false,
       showClose: true,

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

package/src/components/form/Form.vue

@@ -90,9 +90,13 @@ class itfForm extends Vue {
   }
 
   doValidation(showError = true) {
+    const invalidComponents = this.components.filter(
+      (component) => (component.doValidation && !component.doValidation(true)) || (component.validate && !component.validate(true))
+    );
     // @todo remove validate when migrate from vuetify
-    const isValid = !this.components.filter(component => (component.doValidation && !component.doValidation(true)) || (component.validate && !component.validate(true))).length;
+    const isValid = !invalidComponents.length;
     if (showError && !isValid && this.$showError) {
+      console.debug('Invalid', invalidComponents);
       this.$showError('Please fix the errors below to proceed.', { duration: 3000 });
     }
     return isValid;

package/src/components/modal/Modal.vue

@@ -82,7 +82,7 @@ class itfModal extends Vue {
 
   @Watch('value')
   onVisibleChanged(newValue, oldValue) {
-    if (!this.modalEl || this.preventEvents || typeof oldValue === 'undefined') {
+    if (!this.modalEl || this.preventEvents || (typeof oldValue === 'undefined' && !newValue)) {
       return;
     }
     if (newValue) {

package/src/components/table/Table.vue

@@ -44,7 +44,7 @@
              @click="!row.summary && $emit('row-click', { row, index: r })">
           <div
             class="itf-table__cell"
-            :class="{'itf-table__cell--sorted': sortedColumns[column.name]}"
+            :class="{'itf-table__cell--sorted': sortedColumns[column.name], 'align-left': column.alignLeft}"
             v-for="(column, k) in columns" :key="`${r}-${k}`">
             <span>
               <slot v-if="$scopedSlots[`column.${column.name}${row.summary ? '.summary' : ''}`]" :name="`column.${column.name}${row.summary ? '.summary' : ''}`" :item="row" :column="column">
@@ -223,7 +223,7 @@ html {
     text-align: right;
     word-break: break-word;
 
-    &:first-child {
+    &:first-child, &.align-left {
       justify-content: flex-start;
       text-align: left;
     }