@webitel/ui-sdk 24.2.42 → 24.2.44

package/package.json

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

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

@@ -105,11 +105,11 @@
 }
 
 .multiselect--active :deep {
-  .multiselect__select .wt-icon__icon {
+  .multiselect__select.multiselect__arrow .wt-icon__icon {
     fill: var(--icon-active-color);
   }
 
-  .multiselect__custom-value-arrow {
+  .multiselect__select.multiselect__custom-value {
     transform: none;
   }
 }

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

@@ -34,7 +34,7 @@
       :loading="false"
       :model-value="selectValue"
       :multiple="multiple"
-      :options="selectOptions"
+      :options="optionsWithCustomValues"
       :placeholder="placeholder || label"
       :track-by="trackBy"
       class="wt-select__select"
@@ -88,8 +88,8 @@
         <wt-icon-btn
           v-if="allowCustomValues && searchParams.search"
           :disabled="disabled"
-          class="multiselect__select multiselect__custom-value-arrow"
-          icon="call-merge-filled"
+          class="multiselect__select multiselect__custom-value"
+          icon="select-custom-value-enter"
           @mousedown.prevent
           @click="handleCustomValue(toggle)"
         />
@@ -98,7 +98,7 @@
         <wt-icon-btn
           v-else
           :disabled="disabled"
-          class="multiselect__select"
+          class="multiselect__select multiselect__arrow"
           icon="arrow-down"
           @mousedown.prevent
           @click="toggle"
@@ -165,7 +165,10 @@ export default {
       type: Boolean,
       default: true,
     },
-    // for taggableMixin functionality
+    /*
+     for taggableMixin functionality
+     for more info, see WTEL-3181
+     */
     allowCustomValues: {
       type: Boolean,
       default: false,
@@ -193,12 +196,52 @@ export default {
     taggable() { return this.allowCustomValues; },
     // for taggableMixin
     manualTagging() { return this.handleCustomValuesAdditionManually; },
+    optionsWithCustomValues() {
+      if (!this.allowCustomValues) return this.selectOptions;
+
+      /**
+        custom values could be restored after refresh, so that they could be not included in options prop,
+       so that we should add them to options manually (but filter duplicates, which are already in options)
+
+       i assume it's bad decision and it's better to include custom values to options prop,
+       but current filters logic restores value at filter component, but options value are pre-defined at store state
+       */
+
+      const customValuesToOptions = Array.isArray(this.value) ? this.value : [this.value];
+      const optionsWithoutValues = this.selectOptions.filter((opt) => {
+        const optKey = this.trackBy ? opt[this.trackBy] : opt;
+        return !customValuesToOptions.some((customValue) => {
+          const customValueKey = this.trackBy ? customValue[this.trackBy] : customValue;
+          return customValueKey === optKey;
+        });
+      });
+      return [
+        ...customValuesToOptions,
+        ...optionsWithoutValues,
+      ];
+    },
   },
   methods: {
     // for taggableMixin functionality
-    handleCustomValue(toggle) {
-      toggle();
+    async handleCustomValue(toggle) {
+      /**
+       * tag emits input event, but there is a drawback
+       * there are causes, when input handler is async, but close event, emitted by toggle(),
+       * is performing some operations with input value.
+       * filter selects (abstract-enum(api)-filter.vue) for instance
+       *
+       * 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);
+      // await this.$nextTick();
+
+      /**
+       * call toggle strictly after tag() method because tag() emits input,
+       * 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();
     },
     // for taggableMixin functionality
     emitTagEvent(searchQuery, id) {

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -4,6 +4,7 @@
     :value="value"
     :options="localizedOptions"
     :label="label"
+    :allow-custom-values="allowCustomValues"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"
     @input="setValue({ filter: filterQuery, value: $event })"

package/src/modules/QueryFilters/mixins/enumFilterMixin.js

@@ -2,6 +2,13 @@ import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
 
 export default {
   mixins: [baseFilterMixin],
+  props: {
+    // for more detail, see allowCustomValues wt-select component prop
+    allowCustomValues: {
+      type: Boolean,
+      default: false,
+    },
+  },
   computed: {
     options() {
       return this.filterSchema?.options;
@@ -38,12 +45,34 @@ export default {
     restoreValue(value) {
       let newValue;
       if (Array.isArray(value)) {
+        /*
+        restore not just value, but value with all client-side properties like locale
+         */
         newValue = this.localizedOptions
           .filter((option) => value
             .some((value) => value === option[this.storedProp]));
+
+        /*
+        but if allowCustomValues is true, we should also restore custom values,
+        which isn't present in localizedOptions
+         */
+        if (this.allowCustomValues) {
+          newValue = newValue.concat(
+            value
+              .filter((val) => !this.localizedOptions
+                .some((option) => val === option[this.storedProp]))
+              .map((val) => ({ [this.storedProp]: val, name: val })),
+          );
+        }
       } else {
+        /*
+        see comments above
+         */
         newValue = this.localizedOptions
           .find((option) => value === option[this.storedProp]);
+          if (this.allowCustomValues) {
+            newValue = newValue || { [this.storedProp]: value, name: value };
+          }
       }
       this.setValue({ filter: this.filterQuery, value: newValue });
     },