@webitel/ui-sdk 24.4.21 → 24.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.4.21",
+  "version": "24.4.22",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -85,5 +85,8 @@
     "vitest": "^1.4.0",
     "vue": "^3.4.15",
     "vuex": "^4.1.0"
+  },
+  "overrides": {
+    "axios": "^1.6.8"
   }
 }

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

@@ -101,6 +101,10 @@ export default {
 
   methods: {
     getOptionLabel({ option, optionLabel }) {
+      // https://webitel.atlassian.net/browse/WTEL-3181
+      // if allowCustomValue select mode, return vue-multiselect label as is
+      if (this.allowCustomValues && option.isTag) return option.label;
+
       if (optionLabel && option[optionLabel]) return option[optionLabel];
       if (option.locale) {
         if (Array.isArray(option.locale)) return this.$t(...option.locale);

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

@@ -37,6 +37,7 @@
       :options="optionsWithCustomValues"
       :placeholder="placeholder || label"
       :track-by="trackBy"
+      :taggable="taggable"
       class="wt-select__select"
       v-bind="$attrs"
       @close="isOpened = false"
@@ -85,18 +86,17 @@
       <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"
-          icon="select-custom-value-enter"
-          @mousedown.prevent
-          @click="handleCustomValue(toggle)"
-        />
+<!--        <wt-icon-btn-->
+<!--          v-if="allowCustomValues && searchParams.search"-->
+<!--          :disabled="disabled"-->
+<!--          class="multiselect__select multiselect__custom-value"-->
+<!--          icon="select-custom-value-enter"-->
+<!--          @mousedown.prevent-->
+<!--          @click="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 multiselect__arrow"
           icon="arrow-down"
@@ -197,7 +197,14 @@ export default {
     // for taggableMixin
     manualTagging() { return this.handleCustomValuesAdditionManually; },
     optionsWithCustomValues() {
-      if (!this.allowCustomValues) return this.selectOptions;
+      // https://webitel.atlassian.net/browse/WTEL-3181
+
+      // if (!this.allowCustomValues) return this.selectOptions;
+
+      // when it "taggable" vue-multiselect mode, vue-multiselect adds tag to options automatically
+      return this.selectOptions;
+
+      // old code, but can be useful in future
 
       /**
         custom values could be restored after refresh, so that they could be not included in options prop,
@@ -222,8 +229,14 @@ export default {
     },
   },
   methods: {
+
     // for taggableMixin functionality
-    async handleCustomValue(toggle) {
+    async handleCustomValue(value) {
+      // https://webitel.atlassian.net/browse/WTEL-3181
+      this.tag(value);
+
+
+      // OLD CODE, but can be useful in future
       /**
        * tag emits input event, but there is a drawback
        * there are causes, when input handler is async, but close event, emitted by toggle(),
@@ -233,7 +246,7 @@ export default {
        * for now, i've tested this cause and it works well even without waiting for $nextTick()
        * however, this is a potential problem, so, i've left this comment here
        */
-      this.tag(this.searchParams.search);
+      // this.tag(this.searchParams.search);
       // await this.$nextTick();
 
       /**
@@ -241,7 +254,7 @@ export default {
        * because there could be code, which performs operation with input only after select close
        * so that, it's crucial to emit input before close
        */
-      toggle();
+      // toggle();
     },
     // for taggableMixin functionality
     emitTagEvent(searchQuery, id) {