@itfin/components 1.0.78 → 1.0.82

package/package.json

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

package/src/components/modal/Modal.vue

@@ -7,7 +7,9 @@
     >
       <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">
@@ -96,7 +98,7 @@ class itfModal extends Vue {
       setTimeout(() => {
         this.modalEl.show();
         modalStack.push(this);
-      }, 500);
+      }, modalStack.length ? 500 : 0);
     } else {
       this.modalEl.hide();
       modalStack.pop();
@@ -104,7 +106,7 @@ class itfModal extends Vue {
         setTimeout(() => {
           modalStack[modalStack.length - 1].show();
           modalStack[modalStack.length - 1].bindEvents();
-        }, 500);
+        }, modalStack.length ? 500 : 0);
       }
     }
   }
@@ -131,12 +133,16 @@ class itfModal extends Vue {
 
   bindEvents() {
     this.preventEvents = false;
-    this.$refs.modal.addEventListener('hidden.bs.modal', this.onClose);
+    if (this.$refs.modal) {
+      this.$refs.modal.addEventListener('hidden.bs.modal', this.onClose);
+    }
   }
 
   unbindEvents() {
     this.preventEvents = true;
-    this.$refs.modal.removeEventListener('hidden.bs.modal', this.onClose);
+    if (this.$refs.modal) {
+      this.$refs.modal.removeEventListener('hidden.bs.modal', this.onClose);
+    }
   }
 
   show() {

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

package/src/components/select/AirSelect.vue

@@ -14,7 +14,7 @@
 
       <slot
         v-if="!isValueEmpty && !multiple && customRender"
-        v-bind="getOption(localValue)"
+        :option="getOption(localValue)"
       />
       <template v-else>
         {{ getOptionLabel(localValue) }}
@@ -28,11 +28,9 @@
         >
           <slot
             v-if="customRender"
-            v-bind="{
-              ...getOption(optionValue),
-              optionValue,
-              remove: removeOptionValue
-            }"
+            :option="getOption(optionValue)"
+            :value="optionValue"
+            :remove="removeOptionValue"
           />
           <div v-else class="valueMultiItem text-textDarkest" :style="getOptionColor(optionValue) ? `background-color: #${getOptionColor(optionValue)}; color: #fff` : ''">
             <div class="valueMultiItemLabel">
@@ -68,11 +66,11 @@
         </div>
       </div>
 
-      <j-icon
+      <icon
         v-if="(!multiple || isValueEmpty) && variant !== 'empty'"
         class="ml-auto mr-1"
-        name="chevron-down"
-      ></j-icon>
+        name="chevron_down"
+      ></icon>
     </div>
 
     <Dropdown
@@ -92,9 +90,9 @@
       @change="handleChange"
       @searchValueChange="handleSearchValueChange"
     >
-      <template v-slot:option="props">
-        <slot v-if="customRenderOption" name="option" v-bind="props" />
-        <slot v-else v-bind="props" />
+      <template #option="{ option }">
+        <slot v-if="customRenderOption" name="option" :option="option" />
+        <slot v-else :option="option" />
       </template>
     </Dropdown>
   </div>
@@ -103,6 +101,7 @@
 <script>
 import { Component, Model, Prop, Ref } from 'vue-property-decorator';
 import Vue from 'vue';
+import Icon from '../icon/Icon.vue';
 import Dropdown from './Dropdown.vue';
 import { useOutsideClick } from './useOutsideClick';
 
@@ -110,7 +109,7 @@ const { bind, unbind } = useOutsideClick();
 
 export default @Component({
   name: 'itfAirSelect',
-  components: { Dropdown },
+  components: { Dropdown, Icon },
 })
 class itfAirSelect extends Vue {
   @Model('input', { type: [Array, String, Number], default: undefined }) value;
@@ -139,6 +138,9 @@ class itfAirSelect extends Vue {
 
   @Prop({ type: Boolean, default: false }) withClearValue;
 
+  @Prop({ type: Boolean, default: false }) customRender;
+  @Prop({ type: Boolean, default: false }) customRenderOption;
+
   @Ref('selectRef') selectRef;
 
   @Ref('dropdownRef') dropdownRef;
@@ -147,14 +149,6 @@ class itfAirSelect extends Vue {
 
   searchValue = '';
 
-  get customRender() {
-    return !!this.$slots.default;
-  }
-
-  get customRenderOption() {
-    return !!this.$slots.option;
-  }
-
   data() {
     return {
       stateValue: this.defaultValue || (this.multiple ? [] : null),
@@ -170,7 +164,6 @@ class itfAirSelect extends Vue {
   }
 
   getOptionColor(optionValue) {
-    console.info((this.getOption(optionValue) || { [this.itemColor]: '' })[this.itemColor])
     return (this.getOption(optionValue) || { [this.itemColor]: '' })[this.itemColor];
   }
 
@@ -267,6 +260,7 @@ class itfAirSelect extends Vue {
   align-items: center;
   width: 100%;
   min-height: 32px;
+  justify-content: space-between;
 }
 .placeholder {
   color: #8993a4;

package/src/components/select/Dropdown.vue

@@ -20,7 +20,7 @@
         @mouseenter="handleOptionMouseEnter"
         @click="selectOptionValue(option[itemKey])"
       >
-        <slot name="option" v-bind="option">{{ option[itemText] }}</slot>
+        <slot name="option" :option="option">{{ option[itemText] }}</slot>
       </div>
 
       <div