@itfin/components 1.0.77 → 1.0.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.77",
+  "version": "1.0.81",
   "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,13 +28,11 @@
         >
           <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">
+          <div v-else class="valueMultiItem text-textDarkest" :style="getOptionColor(optionValue) ? `background-color: #${getOptionColor(optionValue)}; color: #fff` : ''">
             <div class="valueMultiItemLabel">
               {{ getOptionLabel(optionValue) }}
             </div>
@@ -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
@@ -86,13 +84,15 @@
       :deactivateDropdown="deactivateDropdown"
       :options="options"
       :multiple="multiple"
+      :item-key="itemKey"
+      :item-text="itemText"
       :withClearValue="withClearValue"
       @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>
@@ -101,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';
 
@@ -108,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;
@@ -117,6 +118,10 @@ class itfAirSelect extends Vue {
 
   @Prop({ type: String, default: 'normal' }) variant;
 
+  @Prop({ type: String, default: 'value' }) itemKey;
+  @Prop({ type: String, default: 'label' }) itemText;
+  @Prop({ type: String, default: 'color' }) itemColor;
+
   @Prop({ type: String, default: undefined }) name;
 
   @Prop({ type: Boolean, default: false }) searchable;
@@ -133,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;
@@ -141,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),
@@ -156,11 +156,15 @@ class itfAirSelect extends Vue {
   }
 
   getOption(optionValue) {
-    return this.options.find((option) => option.value === optionValue);
+    return this.options.find((option) => option[this.itemKey] === optionValue);
   }
 
   getOptionLabel(optionValue) {
-    return (this.getOption(optionValue) || { label: '' }).label;
+    return (this.getOption(optionValue) || { [this.itemText]: '' })[this.itemText];
+  }
+
+  getOptionColor(optionValue) {
+    return (this.getOption(optionValue) || { [this.itemColor]: '' })[this.itemColor];
   }
 
   get isControlled() {
@@ -173,7 +177,7 @@ class itfAirSelect extends Vue {
 
   preserveValueType(newValue) {
     const areOptionValuesNumbers = this.options.some(
-      (option) => typeof option.value === 'number',
+      (option) => typeof option[this.itemKey] === 'number',
     );
     if (areOptionValuesNumbers) {
       if (this.multiple) {
@@ -256,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

@@ -14,13 +14,13 @@
       <div
         class="option text-textDarkest"
         v-for="option in filteredOptions"
-        :key="option.value"
-        :data-select-option-value="option.value"
-        :data-testid="`select-option:${option.label}`"
+        :key="option[itemKey]"
+        :data-select-option-value="option[itemKey]"
+        :data-testid="`select-option:${option[itemText]}`"
         @mouseenter="handleOptionMouseEnter"
-        @click="selectOptionValue(option.value)"
+        @click="selectOptionValue(option[itemKey])"
       >
-        <slot name="option" v-bind="option">{{ option.label }}</slot>
+        <slot name="option" :option="option">{{ option[itemText] }}</slot>
       </div>
 
       <div
@@ -60,6 +60,8 @@ class itfSegmentedControl extends Vue {
   @Prop({ type: [Array, String, Number], default: undefined }) value;
   @Prop({ type: Boolean }) isValueEmpty;
   @Prop({ type: Boolean }) searchable;
+  @Prop({ type: String, default: 'value' }) itemKey;
+  @Prop({ type: String, default: 'label' }) itemText;
   @Prop({ type: String, default: '' }) searchValue;
   @Prop({ type: Function, required: true }) deactivateDropdown;
   @Prop({ type: Array, required: true }) options;
@@ -73,7 +75,7 @@ class itfSegmentedControl extends Vue {
   isCreatingOption = false;
 
   get optionsFilteredBySearchValue() {
-    return this.options.filter((option) => option.label
+    return this.options.filter((option) => option[this.itemText]
       .toString()
       .toLowerCase()
       .includes(this.searchValue.toLowerCase()));
@@ -82,21 +84,21 @@ class itfSegmentedControl extends Vue {
   get filteredOptions() {
     return this.multiple
       ? this.optionsFilteredBySearchValue.filter(
-        (option) => !(this.value).includes(option.value),
+        (option) => !(this.value).includes(option[this.itemKey]),
       )
       : this.optionsFilteredBySearchValue.filter(
-        (option) => this.value !== option.value,
+        (option) => this.value !== option[this.itemKey],
       );
   }
 
   get isOptionCreatable() {
     return this.onCreate
       && this.searchValue
-      && !this.options.map((option) => option.label).includes(this.searchValue);
+      && !this.options.map((option) => option[this.itemText]).includes(this.searchValue);
   }
 
   handleSearchValueChange(event) {
-    this.$emit('searchValueChange', (event.target).value);
+    this.$emit('searchValueChange', (event.target)[this.itemKey]);
   }
 
   async getActiveOptionNode() {

package/src/components/select/useOutsideClick.js

@@ -1,5 +1,5 @@
 export const useOutsideClick = () => {
-  const root = document.body;
+  const root = typeof document !== 'undefined' ? document.body : null;
   let handleClickOutside = null;
   let handleKeydown = null;
 
@@ -15,18 +15,22 @@ export const useOutsideClick = () => {
           onOutsideClick();
         }
       };
-      root.addEventListener(
-        'mousedown',
-        handleClickOutside,
-      );
-      root.addEventListener('keydown', handleKeydown);
+      if (root) {
+        root.addEventListener(
+          'mousedown',
+          handleClickOutside,
+        );
+        root.addEventListener('keydown', handleKeydown);
+      }
     },
     unbind() {
-      root.removeEventListener(
-        'mousedown',
-        handleClickOutside,
-      );
-      root.removeEventListener('keydown', handleKeydown);
+      if (root) {
+        root.removeEventListener(
+          'mousedown',
+          handleClickOutside,
+        );
+        root.removeEventListener('keydown', handleKeydown);
+      }
     }
   };
 };