@webitel/ui-sdk 24.2.7 → 24.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.7",
+  "version": "24.2.8",
   "private": false,
   "scripts": {
     "dev": "vite",

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

@@ -1,16 +1,16 @@
 
 .multiselect :deep {
-  cursor: pointer;
   position: relative;
+  cursor: pointer;
 
   .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
+    padding: 0; // reset default
+    transition: var(--transition);
     background: transparent;
 
     &:before {
@@ -45,10 +45,10 @@
   .multiselect__placeholder {
     @extend %typo-body-1;
     @include wt-placeholder;
-    background: transparent;
-    color: var(--wt-text-field-text-color);
-    padding: 0; // reset default
     margin: 0; // reset default
+    padding: 0; // reset default
+    color: var(--wt-text-field-text-color);
+    background: transparent;
   }
 
   .multiselect__custom-tag,
@@ -58,9 +58,9 @@
 
   .multiselect__placeholder {
     @extend %wt-placeholder;
+    display: block;
     overflow: hidden;
     max-width: 100%;
-    display: block;
 
     // text overflow 3 dots
     white-space: nowrap;
@@ -74,8 +74,8 @@
     border: var(--select-tags-border);
     border-color: var(--wt-text-field-select-option-wrapper-border-color);
     border-radius: var(--border-radius);
-    box-shadow: var(--elevation-10);
     background: transparent;
+    box-shadow: var(--elevation-10);
   }
 
   // select options
@@ -108,6 +108,10 @@
   .multiselect__select .wt-icon__icon {
     fill: var(--icon-active-color);
   }
+
+  .multiselect__custom-value-arrow {
+    transform: none;
+  }
 }
 
 .wt-select--loading,

package/src/components/wt-select/mixins/multiselectMixin.js

@@ -110,10 +110,12 @@ export default {
       return option[this.defaultOptionLabel] || option;
     },
     handleSearchChange(search) {
+      // search can be used in non-api mode too
+      this.searchParams.search = search;
+
       if (!this.isApiMode) return;
       this.isLoading = true;
       this.searchParams.page = 1;
-      this.searchParams.search = search;
       this.fetchOptions();
     },
 

package/src/components/wt-select/wt-select.vue

@@ -11,21 +11,20 @@
   >
     <wt-label
       v-if="hasLabel"
-      v-bind="labelProps"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-select__label"
+      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label }"
         name="label"
+        v-bind="{ label }"
       >
         {{ requiredLabel }}
       </slot>
     </wt-label>
     <vue-multiselect
-      v-bind="$attrs"
       ref="vue-multiselect"
       :allow-empty="allowEmpty"
       :disabled="disabled"
@@ -33,12 +32,13 @@
       :label="selectOptionLabel"
       :limit="1"
       :loading="false"
+      :model-value="selectValue"
       :multiple="multiple"
       :options="selectOptions"
       :placeholder="placeholder || label"
       :track-by="trackBy"
-      :model-value="selectValue"
       class="wt-select__select"
+      v-bind="$attrs"
       @close="isOpened = false"
       @open="isOpened = true"
       v-on="listeners"
@@ -62,8 +62,8 @@
       <!--      Slot for custom label template for single select-->
       <template #singleLabel="{ option }">
         <slot
-          v-bind="{ option, optionLabel }"
           name="singleLabel"
+          v-bind="{ option, optionLabel }"
         >
           <span class="multiselect__single-label">
             {{ getOptionLabel({ option, optionLabel }) }}
@@ -74,8 +74,8 @@
       <!--      Slot for custom option template -->
       <template #option="{ option }">
         <slot
-          v-bind="{ option, optionLabel }"
           name="option"
+          v-bind="{ option, optionLabel }"
         >
           {{ getOptionLabel({ option, optionLabel }) }}
         </slot>
@@ -83,8 +83,19 @@
 
       <!--      Element for opening and closing the dropdown -->
       <template #caret="{ toggle }">
+        <!--    In mode allowCustomValues, adding is done by clicking on this icon  -->
+        <!--    [https://my.webitel.com/browse/WTEL-3181]-->
+        <wt-icon-btn
+          v-if="allowCustomValues && searchParams.search"
+          :disabled="disabled"
+          class="multiselect__select multiselect__custom-value-arrow"
+          icon="call-merge-filled"
+          @mousedown.prevent.stop="handleCustomValue(toggle)"
+        />
+        <!--    To view a list of possible values, click on this icon  -->
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
+          v-else
           :disabled="disabled"
           class="multiselect__select"
           icon="arrow-down"
@@ -130,11 +141,16 @@
 </template>
 
 <script>
+import taggableMixin from '../wt-tags-input/mixin/taggableMixin';
 import multiselectMixin from './mixins/multiselectMixin';
 
 export default {
   name: 'WtSelect',
-  mixins: [multiselectMixin],
+  mixins: [
+    multiselectMixin,
+    // taggableMixin is used to add custom select values, see [https://my.webitel.com/browse/WTEL-3181]
+    taggableMixin,
+  ],
   props: {
     value: {},
 
@@ -147,12 +163,45 @@ export default {
       type: Boolean,
       default: true,
     },
+    // for taggableMixin functionality
+    allowCustomValues: {
+      type: Boolean,
+      default: false,
+      description: 'See wt-tags-input "taggable" prop.',
+    },
+    // for taggableMixin functionality
+    handleCustomValuesAdditionManually: {
+      type: Boolean,
+      default: false,
+      description: 'See wt-tags-input "manualTagging" prop.',
+    },
   },
-  emits: ['reset', 'search-change', 'input', 'closed'],
+  emits: [
+    'reset',
+    'search-change',
+    'input',
+    'closed',
+    'custom-value', // fires when allowCustomValues and new customValue is added
+  ],
   data: () => ({
     isOpened: false,
   }),
+  computed: {
+    // for taggableMixin
+    taggable() { return this.allowCustomValues; },
+    // for taggableMixin
+    manualTagging() { return this.handleCustomValuesAdditionManually; },
+  },
   methods: {
+    // for taggableMixin functionality
+    handleCustomValue(toggle) {
+      toggle();
+      this.tag(this.searchParams.search);
+    },
+    // for taggableMixin functionality
+    emitTagEvent(searchQuery, id) {
+      this.$emit('custom-value', searchQuery, id);
+    },
     clearValue() {
       let value = '';
       if (Array.isArray(this.value)) value = [];
@@ -215,17 +264,19 @@ export default {
 .wt-select.wt-select--multiple:not(.wt-select--clearable) {
   .multiselect :deep {
     $multiselect-limit-right-pos: calc(
-      var(--select-caret-right-pos) // caret offet from border
-      + var(--icon-md-size) // caret size
+      var(--select-caret-right-pos)// caret offet from border
+      + var(--icon-md-size)// caret size
       + var(--input-padding) // caret-to-chip offset
     );
+
     .multiselect__tags {
       padding-right: calc(
         $multiselect-limit-right-pos
-        + 50px // chip
+        + 50px// chip
         + var(--input-padding) // chip-to-content offset
       );
     }
+
     .multiselect__limit {
       right: $multiselect-limit-right-pos;
     }
@@ -236,14 +287,15 @@ export default {
 .wt-select.wt-select--clearable:not(.wt-select--multiple) {
   .multiselect :deep {
     $multiselect-clear-right-pos: calc(
-      var(--select-caret-right-pos) // caret offset from border
-      + var(--icon-md-size) // caret size
+      var(--select-caret-right-pos)// caret offset from border
+      + var(--icon-md-size)// caret size
       + var(--input-padding) // caret-to-chip offset
     );
+
     .multiselect__tags {
       padding-right: calc(
         $multiselect-clear-right-pos
-        + var(--icon-md-size) // clear
+        + var(--icon-md-size)// clear
         + var(--input-padding) // clear-to-content offset
       );
     }

package/src/components/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -25,7 +25,7 @@ describe('WtTagsInput', () => {
       },
     });
     wrapper.findComponent({ name: 'vue-multiselect' }).vm.$emit('tag', tag);
-    expect(wrapper.emitted().input[0][0]).toEqual([tag]);
+    expect(wrapper.emitted().input[0]).toEqual([tag]);
   });
 
   it('in manual mode doesnt emit "input" event at native "tag" event', () => {

package/src/components/wt-tags-input/mixin/__tests__/taggableMixin.spec.js

@@ -0,0 +1,24 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import taggableMixin from '../taggableMixin';
+
+describe('taggableMixin', () => {
+  const Component = {
+    render() {},
+    mixins: [taggableMixin],
+  };
+
+  it('renders a component', () => {
+    const wrapper = shallowMount(Component);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('Methods are called correctly', () => {
+    const searchQuery = '123';
+    const wrapper = mount(Component);
+
+    wrapper.vm.$emit('tag', searchQuery);
+
+    expect(wrapper.emitted().tag).toBeTruthy()
+    expect(wrapper.emitted().input).toBeFalsy();
+  });
+})

package/src/components/wt-tags-input/mixin/taggableMixin.js

@@ -0,0 +1,36 @@
+export default {
+  methods: {
+    // TODO: WHAT IS "ID" PARAM?!
+    // this functionality allows you to add custom values to the list of values
+    // [https://my.webitel.com/browse/WTEL-3181]
+    tag(searchQuery, id) {
+      this.emitTagEvent(searchQuery, id);
+
+      const tag = this.trackBy ? {
+        [this.optionLabel || 'name']: searchQuery,
+        [this.trackBy]: id || searchQuery,
+      } : searchQuery;
+
+      const isTagExist = (newTag) => {
+        if (typeof newTag === 'string') {
+          return this.options.some((elem) => elem === newTag);
+        }
+        return this.options.some((elem) => elem[this.trackBy] ===
+          newTag[this.trackBy]);
+      };
+
+      if (isTagExist(tag)) return;
+
+      this.options.unshift(tag);
+      if (!this.manualTagging) {
+        const value = this.multiple ? [...this.value, tag] : tag;
+        this.input(value);
+      }
+    },
+    // method to override
+    emitTagEvent(searchQuery, id) {
+      this.$emit('tag', searchQuery, id);
+    },
+  },
+};
+

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

@@ -9,35 +9,35 @@
   >
     <wt-label
       v-if="hasLabel"
-      v-bind="labelProps"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-tags-input__label"
+      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label }"
         name="label"
+        v-bind="{ label }"
       >
         {{ requiredLabel }}
       </slot>
     </wt-label>
 
     <vue-multiselect
-      v-bind="$attrs"
       ref="vue-multiselect"
       :close-on-select="false"
       :disabled="disabled"
       :internal-search="!searchMethod"
       :label="selectOptionLabel"
       :loading="false"
+      :model-value="selectValue"
       :options="selectOptions"
       :placeholder="placeholder || label"
       :taggable="taggable"
       :track-by="trackBy"
-      :model-value="selectValue"
       class="wt-tags-input__select"
       multiple
+      v-bind="$attrs"
       v-on="listeners"
     >
       <!--      Slot that is used for all selected options (tags)-->
@@ -45,9 +45,9 @@
         <wt-chip class="multiselect__custom-tag">
           {{ getTagOptionLabel({ option, optionLabel }) }}
           <wt-icon-btn
+            color="on-primary"
             icon="close--filled"
             size="sm"
-            color="on-primary"
             @click="remove(option)"
           />
         </wt-chip>
@@ -56,8 +56,8 @@
       <!--      Slot for custom option template -->
       <template #option="{ option }">
         <slot
-          v-bind="{ option, optionLabel }"
           name="option"
+          v-bind="{ option, optionLabel }"
         >
           {{ getTagOptionLabel({ option, optionLabel }) }}
         </slot>
@@ -103,10 +103,15 @@
 
 <script>
 import multiselectMixin from '../wt-select/mixins/multiselectMixin';
+import taggableMixin from './mixin/taggableMixin';
 
 export default {
   name: 'WtTagsInput',
-  mixins: [multiselectMixin],
+  mixins: [
+    multiselectMixin,
+    // taggableMixin is used to add custom select values, see [https://my.webitel.com/browse/WTEL-3181
+    taggableMixin,
+  ],
   props: {
     value: {
       type: Array,
@@ -135,29 +140,6 @@ export default {
     defaultOptionLabel: 'label',
   }),
   methods: {
-    tag(searchQuery, id) {
-      this.$emit('tag', searchQuery, id);
-
-      const tag = this.trackBy ? {
-        [this.optionLabel || 'name']: searchQuery,
-        [this.trackBy]: id || searchQuery,
-      } : searchQuery;
-
-      const isTagExist = (newTag) => {
-        if (typeof newTag === 'string') {
-          return this.options.some((elem) => elem === newTag);
-        }
-        return this.options.some((elem) => elem[this.trackBy] === newTag[this.trackBy]);
-      }
-
-      if (isTagExist(tag)) return;
-
-      this.options.unshift(tag);
-      if (!this.manualTagging) {
-        const value = [...this.value, tag];
-        this.input(value);
-      }
-    },
     getTagOptionLabel({ optionLabel, option }) {
       /*
       Multiselect creates new tags with "label" property by default, so we need to handle
@@ -187,12 +169,12 @@ export default {
 // paddings recalc
 .wt-tags-input .multiselect :deep {
   .multiselect__tags {
-    padding-bottom: 0;
     padding-right: calc(
       var(--input-padding)
       + var(--icon-md-size)
       + var(--select-caret-right-pos)
     );
+    padding-bottom: 0;
 
     .multiselect__tags-wrap {
       display: flex;