@itfin/components 1.0.74 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.74",
+  "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/form/Label.vue

@@ -1,10 +1,12 @@
 <template>
 
   <div class="itf-label" :class="{'has-validation': hasState, 'no-details': hideDetails}">
-    <label class="itf-label__label form-label" v-if="label">
-      {{label}}
-      <span class="star" v-if="required">*</span>
-    </label>
+    <slot name="label" v-bind="{ required, label }">
+      <label class="itf-label__label form-label" v-if="label">
+        {{label}}
+        <span class="star" v-if="required">*</span>
+      </label>
+    </slot>
 
     <div :class="{'is-invalid': hasState && hasError, 'is-valid': hasState && hasSuccess}">
       <slot :validate="doValidation"></slot>

package/src/components/overlay/SensitiveOverlay.vue

@@ -41,6 +41,7 @@
 
     @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
       backdrop-filter: blur(5px);
+      -webkit-backdrop-filter: blur(5px);
       background-color: rgba(255, 255, 255, .5);
     }
   }

package/src/components/select/AirSelect.vue

@@ -0,0 +1,361 @@
+<template>
+  <div
+    class="select"
+    ref="selectRef"
+    :class="[variant]"
+    @keydown="handleFocusedSelectKeydown"
+  >
+    <div
+      class="valueContainer text-textDarkest"
+      :data-testid="name ? `select:${name}` : 'select'"
+      @click="activateDropdown"
+    >
+      <div class="placeholder" v-if="isValueEmpty">{{ placeholder }}</div>
+
+      <slot
+        v-if="!isValueEmpty && !multiple && customRender"
+        v-bind="getOption(localValue)"
+      />
+      <template v-else>
+        {{ getOptionLabel(localValue) }}
+      </template>
+
+      <div v-if="!isValueEmpty && multiple" class="valueMulti text-textDarkest">
+        <div
+          class="my-1 mx-1 flex items-center"
+          v-for="optionValue in localValue"
+          :key="optionValue"
+        >
+          <slot
+            v-if="customRender"
+            v-bind="{
+              ...getOption(optionValue),
+              optionValue,
+              remove: removeOptionValue
+            }"
+          />
+          <div v-else class="valueMultiItem text-textDarkest" :style="getOptionColor(optionValue) ? `background-color: #${getOptionColor(optionValue)}; color: #fff` : ''">
+            <div class="valueMultiItemLabel">
+              {{ getOptionLabel(optionValue) }}
+            </div>
+            <div
+              @click="removeOptionValue(optionValue)"
+              class="valueMultiItemClose"
+            >
+              <svg class="icon" viewBox="0 0 24 24">
+                <path
+                  d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="addMore m-1">
+          <svg
+            class="icon"
+            viewBox="0 0 24 24"
+            focusable="false"
+            role="presentation"
+          >
+            <path
+              d="M13 11V3.993A.997.997 0 0 0 12 3c-.556 0-1 .445-1 .993V11H3.993A.997.997 0 0 0 3 12c0 .557.445 1 .993 1H11v7.007c0 .548.448.993 1 .993.556 0 1-.445 1-.993V13h7.007A.997.997 0 0 0 21 12c0-.556-.445-1-.993-1H13z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            ></path>
+          </svg>
+          <div class="font-medium">Add more</div>
+        </div>
+      </div>
+
+      <j-icon
+        v-if="(!multiple || isValueEmpty) && variant !== 'empty'"
+        class="ml-auto mr-1"
+        name="chevron-down"
+      ></j-icon>
+    </div>
+
+    <Dropdown
+      v-if="isDropdownOpen"
+      ref="dropdownRef"
+      isValueEmpty
+      :dropdownWidth="dropdownWidth"
+      :searchable="searchable"
+      :searchValue="searchValue"
+      :value="localValue"
+      :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>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+import { Component, Model, Prop, Ref } from 'vue-property-decorator';
+import Vue from 'vue';
+import Dropdown from './Dropdown.vue';
+import { useOutsideClick } from './useOutsideClick';
+
+const { bind, unbind } = useOutsideClick();
+
+export default @Component({
+  name: 'itfAirSelect',
+  components: { Dropdown },
+})
+class itfAirSelect extends Vue {
+  @Model('input', { type: [Array, String, Number], default: undefined }) value;
+
+  @Prop({ type: Number, default: undefined }) dropdownWidth;
+
+  @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;
+
+  @Prop({ type: [String, Array, Number], default: undefined }) defaultValue;
+
+  @Prop({ type: String, default: 'Select' }) placeholder;
+
+  @Prop({ type: Boolean, default: false }) invalid;
+
+  @Prop({ type: Array, required: true }) options;
+
+  @Prop({ type: Boolean, default: false }) multiple;
+
+  @Prop({ type: Boolean, default: false }) withClearValue;
+
+  @Ref('selectRef') selectRef;
+
+  @Ref('dropdownRef') dropdownRef;
+
+  isDropdownOpen = false;
+
+  searchValue = '';
+
+  get customRender() {
+    return !!this.$slots.default;
+  }
+
+  get customRenderOption() {
+    return !!this.$slots.option;
+  }
+
+  data() {
+    return {
+      stateValue: this.defaultValue || (this.multiple ? [] : null),
+    };
+  }
+
+  getOption(optionValue) {
+    return this.options.find((option) => option[this.itemKey] === optionValue);
+  }
+
+  getOptionLabel(optionValue) {
+    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() {
+    return this.value !== undefined;
+  }
+
+  get localValue() {
+    return this.isControlled ? this.value : this.stateValue;
+  }
+
+  preserveValueType(newValue) {
+    const areOptionValuesNumbers = this.options.some(
+      (option) => typeof option[this.itemKey] === 'number',
+    );
+    if (areOptionValuesNumbers) {
+      if (this.multiple) {
+        return (newValue).map(Number);
+      }
+      if (newValue) {
+        return Number(newValue);
+      }
+    }
+    return newValue;
+  }
+
+  handleChange(newValue) {
+    if (!this.isControlled) {
+      this.stateValue = this.preserveValueType(newValue);
+    }
+    this.$emit('input', this.preserveValueType(newValue));
+  }
+
+  removeOptionValue(optionValue) {
+    this.handleChange(this.localValue.filter((val) => val !== optionValue));
+  }
+
+  get isValueEmpty() {
+    return this.multiple ? !this.localValue.length : !this.getOption(this.localValue);
+  }
+
+  handleFocusedSelectKeydown(event) {
+    if (this.isDropdownOpen) return;
+    if (event.keyCode === 13) {
+      event.preventDefault();
+    }
+    if (event.keyCode !== 27 && event.keyCode !== 9 && !event.shiftKey) {
+      this.isDropdownOpen = true;
+    }
+  }
+
+  async deactivateDropdown() {
+    this.isDropdownOpen = false;
+    this.searchValue = '';
+    await this.$nextTick();
+    this.selectRef && this.selectRef.focus();
+  }
+
+  async activateDropdown() {
+    this.isDropdownOpen = true;
+    await this.$nextTick();
+    this.selectRef && this.selectRef.blur();
+    // eslint-disable-next-line
+    this.searchable && this.dropdownRef && this.dropdownRef.$refs.inputRef.focus()
+  }
+
+  handleSearchValueChange(newValue) {
+    this.searchValue = newValue;
+  }
+
+  mounted () {
+    bind(this.selectRef, this.deactivateDropdown);
+  }
+
+  beforeDestroy () {
+    unbind();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select {
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.1s;
+  &:focus {
+    outline: none;
+  }
+}
+.valueContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 32px;
+}
+.placeholder {
+  color: #8993a4;
+}
+.valueMulti {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  // padding-top: 5px;
+}
+.valueMultiItem {
+  height: 22px;
+  overflow: hidden;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  background: #f0f0f0;
+  font-size: 14px;
+  .valueMultiItemLabel {
+    flex: auto;
+    padding: 0 4px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #ddd;
+  }
+  .valueMultiItemClose {
+    border-left: none;
+    overflow: hidden;
+    padding: 0 2px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+      background: #ff4757;
+      color: white;
+    }
+    .icon {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+  }
+}
+.addMore {
+  font-size: 12.5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: #0052cc;
+  &:hover,
+  &:visited,
+  &:active {
+    color: #0052cc;
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+  .icon {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+    margin-right: 2px;
+  }
+}
+.select.normal {
+  width: 100%;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-width: 1px;
+  border-color: #dfe1e6;
+  background-color: #f4f5f7;
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  -webkit-transition: background .1s;
+  transition: background .1s;
+}
+.select.normal:hover {
+  @apply bg-backgroundLight;
+}
+.select.normal:focus {
+  @apply border border-borderInputFocus bg-white text-borderInputFocus;
+  box-shadow: 0 0 0 1px currentColor;
+}
+.select.empty {
+  display: inline-block;
+}
+</style>

package/src/components/select/Dropdown.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="dropdown" :style="{ width: `${dropdownWidth}px` }">
+    <input
+      v-if="searchable"
+      class="dropdownInput"
+      type="text"
+      ref="inputRef"
+      placeholder="Search"
+      @input="handleSearchValueChange"
+      @keydown="handleInputKeyDown"
+    />
+
+    <div class="options" ref="optionsRef">
+      <div
+        class="option text-textDarkest"
+        v-for="option in filteredOptions"
+        :key="option[itemKey]"
+        :data-select-option-value="option[itemKey]"
+        :data-testid="`select-option:${option[itemText]}`"
+        @mouseenter="handleOptionMouseEnter"
+        @click="selectOptionValue(option[itemKey])"
+      >
+        <slot name="option" v-bind="option">{{ option[itemText] }}</slot>
+      </div>
+
+      <div
+        v-if="isOptionCreatable"
+        class="option text-textDarkest"
+        :data-create-option-label="{ searchValue }"
+        @mouseenter="handleOptionMouseEnter"
+        @click="createOption(searchValue)"
+      >
+        {{
+          isCreatingOption
+            ? `Creating "${searchValue}"...`
+            : `Create
+        "${searchValue}"`
+        }}
+      </div>
+    </div>
+
+    <div v-if="filteredOptions.length === 0" class="optionsNoResults">
+      No results
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { Component, Prop, Ref } from 'vue-property-decorator';
+
+const activeOptionClass = 'select-option-is-active';
+
+export default @Component({
+  name: 'itfDropdown',
+  components: {}
+})
+class itfSegmentedControl extends Vue {
+  @Prop({ type: Number, default: undefined }) dropdownWidth;
+  @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;
+  @Prop({ type: Function, default: undefined }) onCreate;
+  @Prop({ type: Boolean }) multiple;
+  @Prop({ type: Boolean }) withClearValue;
+
+  @Ref('optionsRef') optionsRef;
+  @Ref('inputRef') inputRef;
+
+  isCreatingOption = false;
+
+  get optionsFilteredBySearchValue() {
+    return this.options.filter((option) => option[this.itemText]
+      .toString()
+      .toLowerCase()
+      .includes(this.searchValue.toLowerCase()));
+  }
+
+  get filteredOptions() {
+    return this.multiple
+      ? this.optionsFilteredBySearchValue.filter(
+        (option) => !(this.value).includes(option[this.itemKey]),
+      )
+      : this.optionsFilteredBySearchValue.filter(
+        (option) => this.value !== option[this.itemKey],
+      );
+  }
+
+  get isOptionCreatable() {
+    return this.onCreate
+      && this.searchValue
+      && !this.options.map((option) => option[this.itemText]).includes(this.searchValue);
+  }
+
+  handleSearchValueChange(event) {
+    this.$emit('searchValueChange', (event.target)[this.itemKey]);
+  }
+
+  async getActiveOptionNode() {
+    await this.$nextTick();
+    return this.optionsRef
+      ? this.optionsRef.querySelector(`.${activeOptionClass}`)
+      : null;
+  }
+
+  selectOptionValue (optionValue) {
+    if (this.multiple) {
+      this.$emit('change', [
+        ...new Set([...(this.value), optionValue]),
+      ]);
+    } else {
+      this.deactivateDropdown();
+      this.$emit('change', optionValue);
+    }
+  }
+
+  createOption (newOptionLabel) {
+    this.isCreatingOption = true;
+    this.onCreate(
+      newOptionLabel,
+      (createdOptionValue) => {
+        this.isCreatingOption = false;
+        this.selectOptionValue(createdOptionValue);
+      },
+    );
+  };
+
+  async handleInputEnterKeyDown (event) {
+    event.preventDefault();
+    const $active = await this.getActiveOptionNode();
+    if (!$active) return;
+    const optionValueToSelect = $active.getAttribute(
+      'data-select-option-value',
+    );
+    const optionLabelToCreate = $active.getAttribute(
+      'data-create-option-label',
+    );
+    console.info($active, optionValueToSelect);
+    if (optionValueToSelect) {
+      this.selectOptionValue(optionValueToSelect);
+    } else if (optionLabelToCreate) {
+      this.createOption(optionLabelToCreate);
+    }
+  }
+
+  async handleInputArrowUpOrDownKeyDown (event) {
+    const $active = (await this.getActiveOptionNode());
+    const $options = this.optionsRef;
+    if (!$active || !$options) return;
+    const $optionsHeight = $options.getBoundingClientRect().height;
+    const $activeHeight = $active.getBoundingClientRect().height;
+    if (event.keyCode === 40) {
+      if ($options.lastElementChild === $active) {
+        $active.classList.remove(activeOptionClass);
+        $options.firstElementChild?.classList.add(activeOptionClass);
+        $options.scrollTop = 0;
+      } else {
+        $active.classList.remove(activeOptionClass);
+        $active.nextElementSibling?.classList.add(activeOptionClass);
+        if ($active.offsetTop > $options.scrollTop + $optionsHeight / 1.4) {
+          $options.scrollTop += $activeHeight;
+        }
+      }
+    } else if (event.keyCode === 38) {
+      if ($options.firstElementChild === $active) {
+        $active.classList.remove(activeOptionClass);
+        $options.lastElementChild?.classList.add(activeOptionClass);
+        $options.scrollTop = $options.scrollHeight;
+      } else {
+        $active.classList.remove(activeOptionClass);
+        $active.previousElementSibling?.classList.add(activeOptionClass);
+        if ($active.offsetTop < $options.scrollTop + $optionsHeight / 2.4) {
+          $options.scrollTop -= $activeHeight;
+        }
+      }
+    }
+  }
+
+  handleInputEscapeKeyDown(event) {
+    event.stopImmediatePropagation();
+    this.deactivateDropdown();
+  }
+
+  handleInputKeyDown(event) {
+    if (event.keyCode === 27) {
+      this.handleInputEscapeKeyDown(event);
+    } else if (event.keyCode === 13) {
+      this.handleInputEnterKeyDown(event);
+    } else if (event.keyCode === 40 || event.keyCode === 38) {
+      this.handleInputArrowUpOrDownKeyDown(event);
+    }
+  }
+
+  async handleOptionMouseEnter(event) {
+    const $active = await this.getActiveOptionNode();
+    if ($active) $active.classList.remove(activeOptionClass);
+    (event.currentTarget).classList.add(activeOptionClass);
+  }
+
+  async setFirstOptionAsActive() {
+    const $active = await this.getActiveOptionNode();
+    if (!this.optionsRef) return;
+    if ($active) $active.classList.remove(activeOptionClass);
+    if (this.optionsRef.firstElementChild) {
+      this.optionsRef.firstElementChild.classList.add(activeOptionClass);
+    }
+  }
+
+  mounted() {
+    this.setFirstOptionAsActive();
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dropdown {
+  z-index: 101;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: -1px;
+  border-radius: 0 0 4px 4px;
+  background: #fff;
+  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
+  rgba(9, 30, 66, 0.31) 0px 0px 1px;
+  width: 100%;
+}
+
+.dropdownInput {
+  padding: 10px 14px 8px;
+  width: 100%;
+  border: none;
+  color: #172b4d;
+  background: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.options {
+  padding: 5px 0;
+  max-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  // &::-webkit-scrollbar {
+  //   width: 7px;
+  // }
+  // &::-webkit-scrollbar-track {
+  //   background: none;
+  // }
+  // &::-webkit-scrollbar-thumb {
+  //   // border-radius: 99px;
+  //   background: #d1d1d1;
+  // }
+}
+
+.option {
+  padding: 8px 14px;
+  word-break: break-word;
+  cursor: pointer;
+
+  &.select-option-is-active {
+    background: #e8ecee;
+  }
+}
+
+.optionsNoResults {
+  padding: 0px 15px 10px;
+  color: #8993a4;
+}
+</style>

package/src/components/select/Select.vue

@@ -195,12 +195,14 @@
   }
   &__dropdown-menu {
     background-color: $body-bg;
-    border: 2px solid $input-focus-border;
+    //border: 2px solid $input-focus-border;
+    border: 0 none;
     padding-left: 0.125rem !important;
     padding-right: 0.125rem !important;
     left: -2px;
     right: -2px;
     width: auto;
+    box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 31%) 0px 0px 1px;
 
     @media (prefers-color-scheme: notdark) {
       background-color: $dark-body-bg;

package/src/components/select/index.stories.js

@@ -1,5 +1,7 @@
 import { storiesOf } from '@storybook/vue';
 import itfSelect from './Select.vue';
+import itfDropdown from './Dropdown';
+import itfSelect2 from './AirSelect';
 import itfForm from '../form/Form.vue';
 import itfLabel from '../form/Label.vue';
 import itfButton from '../button/Button.vue';
@@ -15,6 +17,8 @@ storiesOf('Common', module)
       itfLabel,
       itfButton,
       itfSelect,
+      itfSelect2,
+      itfDropdown,
       itfDatePicker,
       itfDateRangePicker
     },
@@ -29,11 +33,16 @@ storiesOf('Common', module)
         customDays: {
           '2021-10-21': { text: '🎉', class: 'test' }
         },
+        value: [],
         countries: [
           {code: 'CA', country: 'Canada'},
           {code: 'US', country: 'United states'},
           {code: 'UA', country: 'Ukraine'},
           {code: 'TEST', country: 'ASdasd sdas dasd sad sadas da ad asdsad ad d ada dsadsadsadasd sadsa das dasd asdasd asdas da '}
+        ],
+        issuePriorityOptions: [
+          { label: 'High', value: 1 },
+          { label: 'Low', value: 2 }
         ]
       }
     },
@@ -65,6 +74,25 @@ storiesOf('Common', module)
 
         <itf-form ref="form">
 
+          <itf-select2
+            multiple
+            searchable
+            variant="normal"
+            :dropdownWidth="300"
+            v-model="value"
+            :options="issuePriorityOptions"
+            customRender
+          >
+            <template #default="{ label, icon, color }">
+              <itf-button secondary>
+                <div class="flex items-center">
+                  <div class="pr-1 pl-2">
+                    {{ label }}
+                  </div>
+                </div>
+              </itf-button>
+            </template>
+          </itf-select2>
           <div class="row">
             <div class="col-6">
               <itf-label :rules="[$v.emptyValidation()]" :value="selected" label="From" required>

package/src/components/select/useOutsideClick.js

@@ -0,0 +1,36 @@
+export const useOutsideClick = () => {
+  const root = typeof document !== 'undefined' ? document.body : null;
+  let handleClickOutside = null;
+  let handleKeydown = null;
+
+  return {
+    bind(element, onOutsideClick) {
+      handleClickOutside = (e) => {
+        if (element && !element.contains(e.target)) {
+          onOutsideClick();
+        }
+      };
+      handleKeydown = (e) => {
+        if (e.key === 'Escape') {
+          onOutsideClick();
+        }
+      };
+      if (root) {
+        root.addEventListener(
+          'mousedown',
+          handleClickOutside,
+        );
+        root.addEventListener('keydown', handleKeydown);
+      }
+    },
+    unbind() {
+      if (root) {
+        root.removeEventListener(
+          'mousedown',
+          handleClickOutside,
+        );
+        root.removeEventListener('keydown', handleKeydown);
+      }
+    }
+  };
+};

package/src/components/tabs/TabContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="tabsManager && tabsManager.getValue() === id" :class="{ filled }" class="itf-tab-content" :data-test="`itf-tab-content-${id || _uid}`">
+  <div v-if="tabsManager && tabsManager.getValue() === id" :class="{ filled }" class="itf-tab-content" :data-test="`itf-tab-content-${id || _uid}`">
     <slot />
   </div>
 </template>