@itfin/components 1.0.78 → 1.0.79

package/package.json

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

package/src/components/modal/Modal.vue

@@ -1,13 +1,15 @@
 <template>
 
-  <div class="itf-modal modal fade" ref="modal" tabindex="-1" :aria-labelledby="modalId" aria-hidden="true">
+  <div class="itf-modal modal" ref="modal" tabindex="-1" :aria-labelledby="modalId" aria-hidden="true">
     <div
       class="modal-dialog modal-fullscreen-sm-down"
       :class="{[`modal-${size}`]: size}"
     >
       <div class="modal-content itf-append-context" ref="content">
         <div class="modal-header">
-          <h5 class="modal-title" :id="modalId">{{title}}</h5>
+          <slot name="title">
+            <h5 class="modal-title" :id="modalId">{{title}}</h5>
+          </slot>
           <itf-button icon data-bs-dismiss="modal" aria-label="Close" class="btn-close"></itf-button>
         </div>
         <div class="modal-body" v-if="value">
@@ -33,11 +35,11 @@
     }
   }
 }
-.modal-open .itf-app {
-  -webkit-filter: blur(5px) grayscale(1);
-  -moz-filter: blur(5px) grayscale(1);
-  filter: blur(5px) grayscale(1);
-}
+//.modal-open .itf-app {
+//  -webkit-filter: blur(5px) grayscale(1);
+//  -moz-filter: blur(5px) grayscale(1);
+//  filter: blur(5px) grayscale(1);
+//}
 </style>
 <script>
 import { Vue, Component, Prop, Watch, PropSync, Inject } from 'vue-property-decorator';

package/src/components/segmented-control/SegmentedControl.vue

@@ -165,6 +165,8 @@ class itfSegmentedControl extends Vue {
   @Prop({ type: Boolean, default: false }) returnObject;
   @Prop({ type: Boolean, default: false }) disabled;
 
+  timers = [];
+
   get name () {
     return `sc${this._uid}`;
   }
@@ -210,20 +212,25 @@ class itfSegmentedControl extends Vue {
     updatePillPosition(this);
 
     function updatePillPosition (component) {
+      component.timers.forEach((timer) => {
+        clearTimeout(timer);
+      });
+      component.timers = [];
       component.$refs.input.forEach((elem, index) => {
         if (elem.checked) {
           component.$nextTick(() => moveBackgroundPillToElement(component, elem, index));
-          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 500);
-          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 750);
-          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 1500);
-          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 3000);
+          component.timers = [
+            setTimeout(() => moveBackgroundPillToElement(component, elem, index), 500),
+            setTimeout(() => moveBackgroundPillToElement(component, elem, index), 750),
+            setTimeout(() => moveBackgroundPillToElement(component, elem, index), 1500),
+            setTimeout(() => moveBackgroundPillToElement(component, elem, index), 3000)
+          ];
         }
       })
     }
 
     function moveBackgroundPillToElement (component, elem, index) {
       const slider = component.$refs.slider;
-      console.info('init 2', slider);
       if (slider) {
         slider.style.transform = 'translateX(' + (elem.offsetWidth * index) + 'px)';
       }