@itfin/components 1.0.58 → 1.0.62

package/package.json

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

package/src/components/app/message.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import ToastContainer from './ToastContainer.vue';
+
 const MessageConstructor = Vue.extend(ToastContainer);
 
 const instances = [];
@@ -19,8 +20,8 @@ const Message = function (options) {
       'itf-toast-container toast-container',
       'is-' + position,
       hasMask ? 'has-mask' : ''
-    ].filter(function (e) { return !!e; }).join(' ');
-    document.getElementById('itf-app').appendChild(containerEl);
+    ].filter(Boolean).join(' ');
+    document.body.appendChild(containerEl);
   }
 
   if (options.zIndex) {

package/src/components/datepicker/DateRangePickerInline.vue

@@ -58,7 +58,7 @@
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
-import AirDatepicker from 'air-datepicker';
+import AirDatepicker from 'air-datepicker/air-datepicker.js';
 import localeEn from 'air-datepicker/locale/en';
 import ITFSettings from '../../ITFSettings';
 
@@ -105,6 +105,7 @@ class itfDatePickerInline extends Vue {
       firstDay: 1,
       locale: localeEn,
       range: true,
+      toggleSelected: false,
       selectedDates: this.valueAsLuxon
         ? [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()]
         : [],

package/src/components/modal/Modal.vue

@@ -121,8 +121,7 @@ class itfModal extends Vue {
     }
     if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
-      const elContext = document.getElementById('app') || document.body; // @todo getElementById remove when cleanup vuetify
-      elContext.appendChild(this.$el);
+      document.body.appendChild(this.$el); // should append only to body
     }
     const { default: Modal } = await import('bootstrap/js/src/modal.js');
     this.modalEl = new Modal(this.$el);

package/src/components/text-field/TextField.vue

@@ -13,7 +13,7 @@
       :placeholder="placeholder"
       :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
       class="itf-text-field__input form-control"
-      type="text"
+      :type="type"
       :value="value"
       :disabled="disabled"
       :readonly="readonly"
@@ -71,6 +71,7 @@ class itfTextField extends Vue {
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
   @Prop(Boolean) readonly;
+  @Prop({ type: String, default: 'text' }) type;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 
   onInput = null;