@webitel/ui-datalist 1.1.30 → 1.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.30",
+	"version": "1.1.32",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -p ./tsconfig.build.json",
@@ -45,7 +45,7 @@
 		"zod": "^4.x"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.10",
+		"@biomejs/biome": "2.4.16",
 		"@standard-schema/spec": "^1.x",
 		"@tsconfig/node22": "^22.0.0",
 		"@types/node": "^24.x",

package/src/modules/filters/components/config/dynamic-view/dynamic-filter-config-form.vue

@@ -1,15 +1,15 @@
 <template>
   <form class="dynamic-filter-config-form">
-    <wt-select
-      :clearable="false"
+    <wt-single-select
+      :show-clear="false"
       :disabled="editMode"
       :label="t('webitelUI.filters.filterName')"
       :options="filterConfigOptions"
       option-label="label"
-      :value="filterName"
-      track-by="name"
-      use-value-from-options-by-prop="name"
-      @input="onFilterNameUpdate($event)"
+      :model-value="filterName"
+      data-key="name"
+      option-value="name"
+      @update:model-value="onFilterNameUpdate($event)"
     />
 
     <slot
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { WtButton, WtSelect } from '@webitel/ui-sdk/components';
+import { WtButton, WtSingleSelect } from '@webitel/ui-sdk/components';
 import deepcopy from 'deep-copy';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

package/src/modules/filters/components/dynamic-filter-add-action.vue

@@ -81,7 +81,9 @@ onClickOutside(
 		ignore: [
 			'.wt-chip',
 			'.p-popover',
-		], // Exclude activator and popover
+			'.p-select-overlay',
+			'.p-multiselect-overlay',
+		], // Exclude activator, popover content, and teleported select/multiselect panels
 	},
 );
 </script>

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-field.vue

@@ -10,10 +10,10 @@
       <has-option-filter-value-field v-bind="defaultProps" v-model:model-value="model"/>
     </template>
     <template #[WtTypeExtensionFieldKind.Select]="{ defaultProps }">
-      <wt-select
+      <wt-single-select
         v-bind="defaultProps"
         :v="v$.model"
-        :value="
+        :model-value="
           model ??
           [] /* so that component won't break when model is nullish at init */
         "
@@ -21,15 +21,15 @@
           (...params) => props.filterConfig.searchRecords(...params)
         "
         :required="false /* https://github.com/webitel/webitel-ui-sdk/pull/1359#discussion_r3180877255 */"
-        use-value-from-options-by-prop="id"
-        @input="model = $event"
+        option-value="id"
+        @update:model-value="model = $event"
       />
     </template>
     <template #[WtTypeExtensionFieldKind.Multiselect]="{ defaultProps }">
-      <wt-select
+      <wt-single-select
         v-bind="defaultProps"
         :v="v$.model"
-        :value="
+        :model-value="
           model ??
           [] /* so that component won't break when model is nullish at init */
         "
@@ -38,8 +38,8 @@
         "
 
         :required="false /* https://github.com/webitel/webitel-ui-sdk/pull/1359#discussion_r3180877255 */""
-        use-value-from-options-by-prop="id"
-        @input="model = $event"
+        option-value="id"
+        @update:model-value="model = $event"
       />
     </template>
     <template #[WtTypeExtensionFieldKind.Calendar]>
@@ -52,7 +52,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import {
-	WtSelect,
+	WtSingleSelect,
 	WtTypeExtensionValueInput,
 } from '@webitel/ui-sdk/components';
 import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums'; // DO NOT REMOVE THIS IMPORT!! : Webstorm lies you, import is used for dynamic slot computation

package/src/modules/filters/modules/filterConfig/components/_shared/has-options/has-option-filter-value-field.vue

@@ -1,18 +1,17 @@
 <template>
-  <wt-select
+  <wt-single-select
     :label="labelValue"
     :options="BooleanOptions"
-    :value="strModel"
+    v-model:model-value="strModel"
     class="has-option-filter-value-field"
-    track-by="value"
-    use-value-from-options-by-prop="value"
+    data-key="value"
+    option-value="value"
     v-bind="attrs"
-    @input="strModel = $event"
   />
 </template>
 
 <script lang="ts" setup>
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/agent/agent-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
-    :value="model"
+    :model-value="model"
     :v="v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/agent-status/agent-status-filter-value-field.vue

@@ -1,21 +1,19 @@
 <template>
-  <wt-select
+  <wt-multi-select
     :label="labelValue"
     :options="options"
-    :value="model"
+    v-model:model-value="model"
     :v="!disableValidation && v$.model"
-    track-by="value"
-    multiple
+    data-key="value"
     option-label="label"
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';

package/src/modules/filters/modules/filterConfig/components/amd-result/amd-result-filter-value-field.vue

@@ -1,21 +1,19 @@
 <template>
-  <wt-select
-    :clearable="false"
+  <wt-multi-select
+    :show-clear="false"
     :label="t('webitelUI.filters.filterValue')"
     :options="AmdResultOptions"
-    :value="model"
+    v-model:model-value="model"
     :v="v$.model"
-    multiple
-    track-by="value"
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    data-key="value"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/auditor/auditor-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
-    :value="model"
+    :model-value="model"
     :v="!disableValidation && v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/call-direction/call-direction-filter-value-field.vue

@@ -1,20 +1,19 @@
 <template>
-  <wt-select
+  <wt-single-select
     :clearable="false"
     :label="t('webitelUI.filters.filterValue')"
     :options="CallDirectionFilterOptions"
-    :value="model"
+    v-model:model-value="model"
     :v="v$.model"
-    track-by="value"
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    data-key="value"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-assignee/case-assignee-filter-value-field.vue

@@ -1,14 +1,11 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="props.filterConfig.searchRecords"
     :v="v$.model.list"
-    :value="model?.list"
-    multiple
-    track-by="id"
-    use-value-from-options-by-prop="id"
-    @input="model.list = $event"
+    v-model:model-value="model.list"
+    data-key="id"
+    option-value="id"
   />
   <wt-checkbox
     :label="t('reusable.showUnassigned')"
@@ -21,7 +18,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
-import { WtCheckbox, WtSelect } from '@webitel/ui-sdk/components';
+import { WtCheckbox, WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-author/case-author-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    :model-value="model"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-close-reason-groups/case-close-reason-groups-filter-value-field.vue

@@ -1,29 +1,27 @@
 <template>
   <div>
-    <wt-select
-      :clearable="false"
+    <wt-single-select
+      :show-clear="false"
       :label="t('cases.reason')"
       :search-method="caseCloseReasonsGroupsSearchMethod"
       :v="v$.model.selection"
-      :value="model?.selection"
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="updateSelected"
+      :model-value="model?.selection"
+      data-key="id"
+      option-value="id"
+      @update:model-value="updateSelected"
     />
 
-    <wt-select
+    <wt-multi-select
       v-if="model?.selection"
       :key="model.selection"
-      :clearable="false"
+      :show-clear="false"
       :disabled="!model.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
       :v="v$.model.conditions"
-      :value="model.conditions"
-      multiple
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="model.conditions = $event"
+      v-model:model-value="model.conditions"
+      data-key="id"
+      option-value="id"
     />
   </div>
 </template>
@@ -31,7 +29,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect, WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-impacted/case-impacted-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    :model-value="model"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-priority/case-priority-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    :model-value="model"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-reporter/case-reporter-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    :model-value="model"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-sla/case-sla-filter-value-field.vue

@@ -1,12 +1,10 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
+    :model-value="model"
+    option-value="id"
     @input="handleInput"
   />
 </template>
@@ -14,7 +12,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-sla-condition/case-sla-condition-filter-value-field.vue

@@ -1,29 +1,28 @@
 <template>
   <div>
-    <wt-select
-      :clearable="false"
+    <wt-single-select
+      :show-clear="false"
       :label="t('cases.appliedSLA')"
       :search-method="slasSearchMethod"
       :v="v$.model.selection"
-      :value="model?.selection"
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="updateSelected"
+      :model-value="model?.selection"
+      data-key="id"
+      option-value="id"
+      @update:model-value="updateSelected"
     />
 
-    <wt-select
+    <wt-multi-select
       v-if="model?.selection"
       :key="model.selection"
-      :clearable="false"
+      :show-clear="false"
       :disabled="!model.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
       :v="v$.model.conditions"
-      :value="model?.conditions"
-      multiple
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="model.conditions = $event"
+      :model-value="model?.conditions"
+      data-key="id"
+      option-value="id"
+      @update:model-value="model.conditions = $event"
     />
   </div>
 </template>
@@ -31,7 +30,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect, WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-source/case-source-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    :model-value="model"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/case-status/case-status-filter-value-field.vue

@@ -1,29 +1,27 @@
 <template>
   <div>
-    <wt-select
-      :clearable="false"
+    <wt-single-select
+      :show-clear="false"
       :label="t('cases.status')"
       :search-method="caseStatusesSearchMethod"
       :v="v$.model.selection"
-      :value="model?.selection"
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="updateSelected"
+      :model-value="model?.selection"
+      data-key="id"
+      option-value="id"
+      @update:model-value="updateSelected"
     />
 
-    <wt-select
+    <wt-multi-select
       v-if="model?.selection"
       :key="model.selection"
-      :clearable="false"
+      :show-clear="false"
       :disabled="!model.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
       :v="v$.model.conditions"
-      :value="model.conditions"
-      multiple
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="model.conditions = $event"
+      v-model:model-value="model.conditions"
+      data-key="id"
+      option-value="id"
     />
   </div>
 </template>
@@ -31,7 +29,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect, WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/contact/contact-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
-    :value="model"
+    :model-value="model"
     :v="v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/contact-group/contact-group-filter-value-field.vue

@@ -1,15 +1,13 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
     :v="!disableValidation && v$?.model?.list"
-    :value="model?.list"
-    multiple
-    track-by="id"
-    use-value-from-options-by-prop="id"
+    :model-value="model?.list"
+    data-key="id"
+    option-value="id"
     v-bind="$attrs"
-    @input="changeListValue"
+    @update:model-value="changeListValue"
   />
   <wt-checkbox
     v-if="!props.filterConfig?.hideUnassigned"
@@ -23,7 +21,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
-import { WtCheckbox, WtSelect } from '@webitel/ui-sdk/components';
+import { WtCheckbox, WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/contact-label/contact-label-filter-value-field.vue

@@ -1,21 +1,20 @@
 <template>
-  <wt-select
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
     :v="!disableValidation && v$?.model"
-    :value="model"
-    multiple
+    :model-value="model"
     option-label="label"
-    track-by="label"
+    data-key="label"
     v-bind="$attrs"
-    @input="handleInput"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/contact-owner/contact-owner-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="props.filterConfig.searchRecords"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    :model-value="model"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/gateway/gateway-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchGateway"
     :v="v$.model"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    :model-value="model"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/grantee/grantee-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
-    :value="model"
+    :model-value="model"
     :v="v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/hangup-cause/hangup-cause-filter-value-field.vue

@@ -1,21 +1,19 @@
 <template>
-  <wt-select
-    :clearable="false"
+  <wt-multi-select
+    :show-clear="false"
     :label="t('webitelUI.filters.filterValue')"
     :options="HangupCauseOptions"
-    :value="model"
+    v-model:model-value="model"
     :v="v$.model"
-    multiple
-    track-by="value"
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    data-key="value"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/queue/queue-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
-    :value="model"
+    :model-value="model"
     :v="!disableValidation && v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/queue-period/queue-period-filter-value-field.vue

@@ -1,20 +1,19 @@
 <template>
-  <wt-select
+  <wt-single-select
     :label="labelValue"
     :options="options"
-    :value="model"
+    v-model:model-value="model"
     :v="!disableValidation && v$.model"
-    track-by="value"
+    data-key="value"
     option-label="label"
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';

package/src/modules/filters/modules/filterConfig/components/queue-type/queue-type-filter-value-field.vue

@@ -1,21 +1,19 @@
 <template>
-  <wt-select
+  <wt-multi-select
     :label="labelValue"
     :options="options"
-    :value="model"
+    v-model:model-value="model"
     :v="!disableValidation && v$.model"
-    track-by="value"
+		data-key="value"
     option-label="label"
-    multiple
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';

package/src/modules/filters/modules/filterConfig/components/rated-by/rated-by-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
-    :value="model"
+    :model-value="model"
     :v="v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/region/region-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
-    :value="model"
+    :model-value="model"
     :v="!disableValidation && v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/skill/skill-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
-    :value="model"
+    :model-value="model"
     :v="!disableValidation && v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/supervisor/supervisor-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
-    :value="model"
+    :model-value="model"
     :v="!disableValidation && v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/tag/tag-filter-value-field.vue

@@ -1,21 +1,19 @@
 <template>
-  <wt-select
-    :clearable="false"
+  <wt-multi-select
+    :show-clear="false"
     :label="t('webitelUI.filters.filterValue')"
     :options="CallHistoryTagFilterOptions"
-    :value="model"
+    v-model:model-value="model"
     :v="v$.model"
-    multiple
-    track-by="value"
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    data-key="value"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/team/team-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
-    :value="model"
+    :model-value="model"
     :v="!disableValidation && v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/user/user-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
-    :value="model"
+    :model-value="model"
     :v="v$.model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
+    option-value="id"
+    @update:model-value="handleInput"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/modules/filters/modules/filterConfig/components/utilization-progress/utilization-progress-filter-value-field.vue

@@ -1,20 +1,18 @@
 <template>
-  <wt-select
-    :close-on-select="false"
+  <wt-single-select
     :label="labelValue"
     :options="UtilizationProgressOptions"
-    :value="model"
+    v-model:model-value="model"
     :v="!disableValidation && v$.model"
-    track-by="value"
-    use-value-from-options-by-prop="value"
-    @input="model = $event"
+    data-key="value"
+    option-value="value"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/components';
+import { WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';