@webitel/ui-sdk 2.0.32 → 2.1.0-1

package/src/components/molecules/wt-tags-input/wt-tags-input.vue

@@ -1,41 +1,82 @@
 <template>
   <div
-    class="wt-tags-input"
     :class="{
       'wt-tags-input--disabled': disabled,
       'wt-tags-input--invalid': invalid,
+      'wt-tags-input--loading': isLoading,
     }"
+    class="wt-tags-input"
   >
     <wt-label
-      class="wt-tags-input__label"
       v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
+      class="wt-tags-input__label"
       v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
       <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
     </wt-label>
 
-    <vue-tags-input
-      class="wt-tags-input__tags-input"
-      v-model="input"
-      v-bind="{ ...$attrs, ...$props }"
-      :tags="tags"
-      :autocomplete-items="autocompleteOptions"
+    <vue-multiselect
+      ref="vue-multiselect"
+      :close-on-select="false"
+      :disabled="disabled"
+      :internal-search="!searchMethod"
+      :label="trackBy ? optionLabel : null"
+      :loading="false"
+      :options="selectOptions"
       :placeholder="placeholder || label"
-      :separators="['   ']"
+      :taggable="taggable"
+      :track-by="trackBy"
+      :value="selectValue"
+      class="wt-tags-input__select"
+      multiple
+      v-bind="$attrs"
       v-on="listeners"
     >
-      <template slot="tag-actions" slot-scope="{ index, performDelete }">
+
+      <!--      Slot that is used for all selected options (tags)-->
+      <template v-slot:tag="{ option, remove }">
+        <wt-chip class="multiselect__custom-tag">
+          {{ getTagOptionLabel({ option, optionLabel }) }}
+          <wt-icon-btn
+            icon="close--filled"
+            size="sm"
+            @click="remove(option)"
+          ></wt-icon-btn>
+        </wt-chip>
+      </template>
+
+      <!--      Slot for custom option template -->
+      <template v-slot:option="{ option }">
+        <slot name="option" v-bind="{ option, optionLabel }">
+          {{ getTagOptionLabel({ option, optionLabel }) }}
+        </slot>
+      </template>
+
+      <!--      Element for opening and closing the dropdown -->
+      <template v-slot:caret="{ toggle }">
+        <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
-          icon="close--filled"
-          size="sm"
+          :disabled="disabled"
+          class="multiselect__select"
           color="active"
-          @click="performDelete(index)"
+          icon="arrow-down"
+          @mousedown.native.prevent.stop="toggle"
         ></wt-icon-btn>
       </template>
-    </vue-tags-input>
+
+      <template v-slot:beforeList>
+        <div v-show="isLoading" class="multiselect__loading-wrapper">
+          <wt-loader size="sm"></wt-loader>
+        </div>
+      </template>
+
+      <template v-if="showIntersectionObserver" v-slot:afterList>
+        <div v-observe-visibility="handleAfterListIntersect"></div>
+      </template>
+    </vue-multiselect>
 
     <wt-input-info
       v-if="isValidation"
@@ -46,219 +87,74 @@
 </template>
 
 <script>
-import VueTagsInput from '@johmun/vue-tags-input';
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import multiselectMixin from '../wt-select/mixins/multiselectMixin';
 
 export default {
   name: 'wt-tags-input',
-  mixins: [validationMixin],
-  components: { VueTagsInput },
+  mixins: [multiselectMixin],
   props: {
     value: {
       type: Array,
     },
-
-    autocompleteItems: {
-      type: Array,
-      default: () => [],
-    },
-
-    label: {
+    trackBy: {
       type: String,
-      default: '',
+      default: null,
     },
-
-    placeholder: {
-      type: String,
-      default: '',
-    },
-
-    disabled: {
+    taggable: {
       type: Boolean,
       default: false,
     },
-
-    autocompleteMinLength: {
-      type: Number,
-      default: 0,
-    },
-
-    addOnlyFromAutocomplete: {
+    manualTagging: {
       type: Boolean,
       default: false,
-    },
+      description: `
+      False: "tag" method automatically pushes { optionLabel | "name", trackBy } object to value
+      array and $emits "input" event.
 
-    autocompleteFilterDuplicates: {
-      type: Boolean,
-      default: true,
-    },
-
-    labelProps: {
-      type: Object,
-      description: 'Object with props, passed down to wt-label as props',
-    },
-  },
-
-  data: () => ({
-    input: '',
-  }),
-
-  computed: {
-    hasLabel() {
-      return !!(this.label || this.$slots.label);
-    },
-
-    requiredLabel() {
-      return this.required ? `${this.label}*` : this.label;
-    },
-
-    tags() {
-      if (!this.value) return [];
-      return this.value.map((item) => ({ text: item.name || item.value, ...item }));
-    },
-
-    autocompleteOptions() {
-      return this.autocompleteItems
-        .map((item) => ({
-          text: typeof item === 'object' ? item.name || item.value : item,
-          ...item,
-        }))
-        .filter((item) => item.text?.includes(this.input));
-    },
-
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: this.searchTags,
-        'tags-changed': this.changeTags,
-      };
+      True: "tag" method only $emits "tag" event. Tag addition is responsibility of client side.
+    `,
     },
   },
 
   methods: {
-    searchTags(search) {
-      this.$emit('search', search);
+    tag(searchQuery, id) {
+      this.$emit('tag', searchQuery, id);
+
+      const tag = this.trackBy ? {
+        [this.optionLabel || 'name']: searchQuery,
+        [this.trackBy]: id || searchQuery,
+      } : searchQuery;
+
+      this.options.unshift(tag);
+      if (!this.manualTagging) {
+        const value = [...this.value, tag];
+        this.input(value);
+      }
     },
-
-    changeTags(tags) {
-      this.$emit('input', tags);
+    getTagOptionLabel({ optionLabel, option }) {
+      /*
+      Multiselect creates new tags with "label" property by default, so we need to handle
+      it as well
+       */
+      const label = this.getOptionLabel({ optionLabel, option });
+      return typeof label === 'object' ? option.label : label;
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import '../../../css/components/atoms/wt-chip/wt-chip';
+@import '../../../css/components/molecules/wt-select/multiselect';
 
 .wt-tags-input {
   width: 100%;
 }
 
-// increase specificity
-.wt-tags-input .wt-tags-input__tags-input {
-  width: 100%;
-  max-width: 100%; // reset default
-
-  ::v-deep {
-    .ti-input {
-      box-sizing: border-box;
-      min-height: var(--tags-input-min-height); // preserve height, if tags is empty
-      padding: 0; // reset default
-      border: var(--tags-input-border);
-      border-color: var(--tags-input-border-color);
-      border-radius: var(--border-radius);
-      transition: var(--transition);
-
-      .ti-tags {
-        display: flex;
-        align-items: center;
-        gap: var(--tags-input-tags-gap);
-        padding: var(--tags-input-padding);
-        margin: 0; // reset default
-        word-break: break-word; //break long word
-      }
-
-      .ti-new-tag-input-wrapper {
-        padding: 0; // reset default
-        margin: 0; // reset default
-      }
-
-      .ti-new-tag-input {
-        @extend %typo-body-1;
-        @include wt-placeholder;
-
-        border-radius: var(--border-radius);
-      }
-
-      .ti-tag {
-        @extend .wt-chip;
-        display: flex;
-        height: fit-content;
-        margin: 0;  // reset default
-        transition: var(--transition);
-
-        .ti-actions {
-          margin-left: var(--tags-input-tag-actions-margin-left);
-        }
-        // pre-delete state after 1 backspace press
-        &.ti-deletion-mark {   // FIXME
-          color: var(--tags-input-tag-text-color--deletion);
-          background: var(--tags-input-tag-bg-color--deletion);
-
-          .wt-icon__icon {
-            fill: var(--tags-input-tag-text-color--deletion);
-          }
-        }
-      }
-    }
-
-    .ti-autocomplete {
-      @extend %wt-distant-scrollbar;
-      max-height: var(--tags-input-autocomplete-max-height);
-      border: var(--tags-input-autocomplete-border);
-      border-color: var(--tags-input-autocomplete-border-color);
-      border-radius: var(--border-radius);
-      transition: var(--transition);
-      overflow: auto;
-
-      .ti-item {
-        background: transparent; // reset default
-
-        & > div {
-          @extend %typo-body-1;
-          padding: var(--tags-input-autocomplete-option-padding);
-          color: var(--tags-input-autocomplete-option--text-color);
-          transition: var(--transition);
-
-          &:hover {
-            color: var(--tags-input-option-text-color--hover);
-            background: var(--tags-input-option-bg-color--hover);
-          }
-        }
-      }
-    }
-  }
-}
-
 .wt-tags-input:hover,
 .wt-tags-input:focus-within {
   .wt-label {
     color: var(--form-label--hover-color);
   }
-
-  .wt-tags-input__tags-input ::v-deep {
-    .ti-new-tag-input {
-      border-color: var(--form-border--hover-color);
-    }
-  }
-}
-
-.wt-tags-input:focus-within {
-  .wt-tags-input__tags-input ::v-deep {
-    .ti-new-tag-input {
-      @include wt-placeholder('focus');
-    }
-  }
 }
 
 .wt-tags-input--invalid,
@@ -267,36 +163,37 @@ export default {
   .wt-label {
     color: var(--false-color);
   }
-
-  .wt-tags-input__tags-input {
-    ::v-deep {
-      .ti-input {
-        border-color: var(--false-color);
-      }
-    }
-  }
 }
 
 .wt-tags-input--disabled {
   .wt-tags-input__tags-input {
     width: 100%;
     max-width: 100%; // reset default
+  }
+}
 
-    ::v-deep {
-      .ti-input {
-        border-color: transparent;
+.wt-tags-input .multiselect ::v-deep {
+  .multiselect__tags {
+    padding-bottom: 0;
 
-        .ti-new-tag-input-wrapper {
-          display: none;
-        }
+    .multiselect__tags-wrap {
+      display: flex;
+      flex-wrap: wrap;
+    }
 
-        .ti-tag {
-          .ti-actions {
-            display: none;
-          }
-        }
-      }
+    .multiselect__custom-tag {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      max-width: 100%;
+      margin: 0 var(--spacing-xs) calc(var(--spacing-xs) - 1px) 0; // border bottom
+      word-break: break-all;
+      gap: var(--spacing-xs);
     }
   }
+
+  .multiselect__input {
+    margin-bottom: calc(var(--spacing-xs) - 1px); // border
+  }
 }
 </style>

package/src/css/components/atoms/wt-chip/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --chip-padding: var(--spacing-3xs) var(--spacing-sm);
+  --chip-padding: var(--spacing-2xs) var(--spacing-sm);
   --chip-border-radius: var(--spacing-lg);
   --chip-bg-color: var(--accent-secondary-color);
   --chip-bg-color--outline: var(--secondary-color);

package/src/css/components/molecules/wt-select/_multiselect.scss

@@ -0,0 +1,194 @@
+@import '~vue-multiselect/dist/vue-multiselect.min.css';
+
+.multiselect ::v-deep {
+  cursor: pointer;
+  position: relative;
+
+  .multiselect__select {
+    position: absolute;
+    top: var(--select-icon-top-pos);
+    right: var(--select-caret-right-pos);
+    padding: 0; // reset default
+    transition: var(--transition);
+    width: fit-content; // reset default
+    height: fit-content; // reset default
+
+    &:before {
+      display: none; // reset default
+    }
+  }
+
+  .multiselect__limit {
+    position: absolute;
+    top: var(--select-chip-top-pos);
+  }
+
+  .multiselect__clear {
+    position: absolute;
+    z-index: 1;
+    top: var(--select-icon-top-pos);
+  }
+
+
+  .multiselect__tags {
+    padding: calc(var(--spacing-xs) - 1px); // borders
+    color: var(--form-input-color);
+    border: var(--select-tags-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+  }
+
+
+  .multiselect__input,
+  .multiselect__single,
+  .multiselect__placeholder {
+    @extend %typo-body-1;
+    @include wt-placeholder;
+    background: transparent;
+    padding: 0; // reset default
+    margin: 0; // reset default
+  }
+
+  .multiselect__input:focus {
+    @include wt-placeholder('focus');
+  }
+
+  .multiselect__custom-tag,
+  .multiselect__single-label {
+    color: var(--form-input-color);
+  }
+
+  .multiselect__placeholder {
+    @extend %wt-placeholder;
+    overflow: hidden;
+    max-width: 100%;
+
+    // text overflow 3 dots
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .multiselect__content-wrapper {
+    @extend %wt-distant-scrollbar;
+    transition: var(--transition);
+    border: var(--select-tags-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+  }
+
+  .multiselect__option {
+    @extend %typo-body-1;
+    padding: var(--select-options-padding);
+
+    &:after {
+      display: none;
+    }
+
+
+    &--highlight {
+      color: var(--form-input-color);
+      //background: var(--select-option--hover-color);
+      background: none;
+    }
+
+
+    &--selected {
+      font-weight: normal;
+      background: var(--select-option--active-color)
+    }
+  }
+}
+
+.multiselect--active ::v-deep {
+  .multiselect__select .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+
+  .multiselect__tags {
+    border-color: var(--form-border--active-color);
+
+    .multiselect__placeholder {
+      @extend %wt-placeholder--focus;
+    }
+  }
+
+}
+
+.wt-select:hover,
+.wt-tags-input:hover {
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      border-color: var(--form-border--hover-color);
+    }
+
+    .multiselect__select,
+    .multiselect__clear {
+      .wt-icon__icon {
+        fill: var(--icon-color--hover);
+      }
+    }
+  }
+}
+
+.wt-select--loading ::v-deep {
+  .multiselect__content-wrapper {
+    overflow-y: hidden;
+  }
+
+  .multiselect__loading-wrapper {
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 300px; // max dropdown panel height
+    backdrop-filter: blur(4px);
+  }
+}
+
+
+.wt-select.wt-select--invalid,
+.wt-tags-input.wt-tags-input--invalid {
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
+  }
+}
+
+.wt-select--disabled,
+.wt-tags-input--disabled {
+  pointer-events: none;
+
+  .multiselect--disabled {
+    opacity: 1;
+    background: none;
+  }
+
+  .multiselect__select {
+    background: transparent; // reset default
+  }
+
+  .multiselect__arrow-caret ::v-deep .wt-icon__icon,
+  .multiselect__clear ::v-deep .wt-icon__icon {
+    fill: var(--icon-color-disabled);
+  }
+
+  .multiselect {
+    ::v-deep {
+      .multiselect__tags {
+        border-color: var(--form-border--disabled-color);
+        background: var(--form-border--disabled-color);
+
+        .multiselect__placeholder {
+          @extend %wt-placeholder--disabled;
+          //color: var(--form-placeholder--disabled-color);
+        }
+      }
+    }
+  }
+}

package/src/css/components/molecules/wt-select/_variables.scss

@@ -1,59 +1,12 @@
 
 :root {
-  --select-caret-top-pos: var(--spacing-xs);
-  --select-caret-right-pos: var(--spacing-xs);
-  --select-caret-z-index: 1;
+  --select-icon-top-pos: var(--spacing-xs);
+  --select-chip-top-pos: var(--spacing-xs);
 
-  --select-clear-top-pos: var(--spacing-xs);
-
-  --select-clear-right-pos: calc(
-    var(--input-padding)
-    + var(--icon-md-size)
-    + var(--select-caret-right-pos)
-    ); // spacing + caret icon + caret right pos
-
-  --select-clear-z-index: var(--select-caret-z-index);
-
-  --select-tags-min-height: calc(24px + var(--spacing-xs) * 2); // 24px %typo-body-1 line-height
-
-  --select-tags-padding:
-    var(--input-padding)
-    calc(
-      var(--input-padding)
-      + var(--icon-md-size)
-      + var(--select-caret-right-pos)
-    )
-    var(--input-padding)
-    var(--input-padding);  // right pos = 10px spacing + caret icon size + caret offset
-
-  --select-tags-padding--clearable:
-    var(--input-padding)
-    calc(
-      var(--input-padding)
-      + var(--icon-md-size)
-      + var(--select-clear-right-pos)
-    )
-    var(--input-padding)
-    var(--input-padding);
+  --select-caret-right-pos: var(--input-padding);
 
   --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
 
-  --select-input-min-height: 18px;
-
-  --select-chip-right-pos: calc(
-    var(--spacing-xs)
-    + var(--icon-md-size)
-    + var(--spacing-xs)
-  ); // 2 spacings + arrow down icon
-
-  --select-chip-right-pos--clearable: calc(
-    var(--spacing-xs)
-    + var(--icon-md-size)
-    + var(--select-chip-right-pos)
-  ); // spacing after bottom arrow + "reset" sm icon
-
-  --select-chip-z-index: 1;
-
   --select-options-padding: var(--input-padding);
 
   --select-option--hover-color: var(--accent-secondary-color);

package/src/locale/en/en.js

@@ -98,7 +98,6 @@ export default {
         [EngineRoutingSchemaType.Voice]: 'Voice',
         [EngineRoutingSchemaType.Service]: 'Service',
         [EngineRoutingSchemaType.Processing]: 'Processing',
-        [EngineRoutingSchemaType.Default]: 'Default',
       },
     },
   },

package/src/locale/ru/ru.js

@@ -96,7 +96,6 @@ export default {
         [EngineRoutingSchemaType.Voice]: 'Голос',
         [EngineRoutingSchemaType.Service]: 'Сервис',
         [EngineRoutingSchemaType.Processing]: 'Обработка',
-        [EngineRoutingSchemaType.Default]: 'По умолчанию',
       },
     },
   },

package/src/locale/ua/ua.js

@@ -96,7 +96,6 @@ export default {
         [EngineRoutingSchemaType.Voice]: 'Голос',
         [EngineRoutingSchemaType.Service]: 'Сервіс',
         [EngineRoutingSchemaType.Processing]: 'Обробка',
-        [EngineRoutingSchemaType.Default]: 'За замовчуванням',
       },
     },
   },