@itfin/components 1.0.56 → 1.0.60

package/package.json

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

package/src/components/app/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-app">
+  <div class="itf-app itf-append-context">
     <slot></slot>
   </div>
 </template>

package/src/components/app/ToastContainer.vue

@@ -31,6 +31,7 @@
 <style lang="scss">
 .itf-toast-wrapper {
   max-width: 100%;
+  z-index: $zindex-toaster;
 }
 .itf-toast-fade-enter-active {
   animation: itf-toast-fade-in-down 0.3s;

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

@@ -5,12 +5,12 @@
       class="modal-dialog modal-fullscreen-sm-down"
       :class="{[`modal-${size}`]: size}"
     >
-      <div class="modal-content" ref="content">
+      <div class="modal-content itf-append-context" ref="content">
         <div class="modal-header">
           <h5 class="modal-title" :id="modalId">{{title}}</h5>
           <itf-button icon data-bs-dismiss="modal" aria-label="Close" class="btn-close"></itf-button>
         </div>
-        <div class="modal-body">
+        <div class="modal-body" v-if="value">
           <slot></slot>
         </div>
         <div class="modal-footer" v-if="$slots.footer">
@@ -121,7 +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
+      const elContext = this.$el.closest('.itf-append-context') || document.body; // @todo getElementById remove when cleanup vuetify
       elContext.appendChild(this.$el);
     }
     const { default: Modal } = await import('bootstrap/js/src/modal.js');

package/src/components/popover/Popover.vue

@@ -3,7 +3,7 @@
   <div class="itf-popover-container">
     <slot name="activator" :on="{ click: show }"></slot>
 
-    <div class="itf-popover" ref="popover">
+    <div class="itf-popover itf-append-context" ref="popover">
       <slot></slot>
     </div>
   </div>

package/src/components/tooltip/Tooltip.vue

@@ -31,7 +31,7 @@ class itfTooltip extends Vue {
       allowHTML: true,
       theme: 'itfin',
       interactive: true,
-      delay: 500,
+      delay: this.openDelay,
       placement: this.placement,
       appendTo: document.body,
     });