@itfin/components 1.0.77 → 1.0.78

package/package.json

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

package/src/components/select/AirSelect.vue

@@ -34,7 +34,7 @@
               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>
@@ -86,6 +86,8 @@
       :deactivateDropdown="deactivateDropdown"
       :options="options"
       :multiple="multiple"
+      :item-key="itemKey"
+      :item-text="itemText"
       :withClearValue="withClearValue"
       @change="handleChange"
       @searchValueChange="handleSearchValueChange"
@@ -117,6 +119,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;
@@ -156,11 +162,16 @@ 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) {
+    console.info((this.getOption(optionValue) || { [this.itemColor]: '' })[this.itemColor])
+    return (this.getOption(optionValue) || { [this.itemColor]: '' })[this.itemColor];
   }
 
   get isControlled() {
@@ -173,7 +184,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) {

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" v-bind="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);
+      }
     }
   };
 };