@itfin/components 1.0.79 → 1.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.79",
+  "version": "1.0.83",
   "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,6 +1,6 @@
 <template>
 
-  <div class="itf-modal modal" ref="modal" tabindex="-1" :aria-labelledby="modalId" aria-hidden="true">
+  <div class="itf-modal modal fade" ref="modal" tabindex="-1" :aria-labelledby="modalId" aria-hidden="true">
     <div
       class="modal-dialog modal-fullscreen-sm-down"
       :class="{[`modal-${size}`]: size}"
@@ -35,11 +35,6 @@
     }
   }
 }
-//.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';
@@ -98,7 +93,7 @@ class itfModal extends Vue {
       setTimeout(() => {
         this.modalEl.show();
         modalStack.push(this);
-      }, 500);
+      }, modalStack.length ? 500 : 0);
     } else {
       this.modalEl.hide();
       modalStack.pop();
@@ -106,7 +101,7 @@ class itfModal extends Vue {
         setTimeout(() => {
           modalStack[modalStack.length - 1].show();
           modalStack[modalStack.length - 1].bindEvents();
-        }, 500);
+        }, modalStack.length ? 500 : 0);
       }
     }
   }
@@ -133,12 +128,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/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