@webitel/ui-datalist 1.1.29 → 1.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.29",
+	"version": "1.1.31",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -p ./tsconfig.build.json",

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/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';

package/src/modules/table/createTableStore.store.ts

@@ -10,6 +10,7 @@ import { createTableFiltersStore } from '../filters/createTableFiltersStore';
 import { createTableHeadersStore } from '../headers/createTableHeadersStore';
 import { createTablePaginationStore } from '../pagination/createTablePaginationStore';
 import type {
+	LoadDataListOptions,
 	PatchItemPropertyParams,
 	useTableStoreConfig,
 } from '../types/tableStore.types';
@@ -112,8 +113,13 @@ export const tableStoreBody = <
 		parentId: parentId.value,
 	});
 
-	const loadDataList = async () => {
-		isLoading.value = true;
+	const loadDataList = async ({
+		withLoading = true,
+	}: LoadDataListOptions = {}) => {
+		if (withLoading) {
+			isLoading.value = true;
+		}
+
 		$patchPaginationStore({
 			next: false,
 		});
@@ -141,7 +147,9 @@ export const tableStoreBody = <
 			error.value = err;
 			throw err;
 		} finally {
-			isLoading.value = false;
+			if (withLoading) {
+				isLoading.value = false;
+			}
 		}
 	};
 

package/src/modules/types/tableStore.types.ts

@@ -22,6 +22,10 @@ export interface PatchItemPropertyParams {
 	value: unknown;
 }
 
+export interface LoadDataListOptions {
+	withLoading?: boolean;
+}
+
 export interface TableStore<Entity> {
 	// tableStore
 	dataList: Ref<Entity[]>;
@@ -47,7 +51,7 @@ export interface TableStore<Entity> {
 
 	// tableStore
 	initialize: () => Promise<void>;
-	loadDataList: (query?: object) => Promise<void>;
+	loadDataList: (options?: LoadDataListOptions) => Promise<void>;
 	updateSelected: (selected: Entity[]) => void;
 	patchItemProperty: (payload: PatchItemPropertyParams) => Promise<void>;
 	deleteEls: (deleted: Entity[]) => Promise<void>;

package/types/modules/filter-presets/stores/createFilterPresetsStore.d.ts

@@ -89,7 +89,7 @@ export declare const filterPresetsStoreBody: (namespace?: string) => {
     initialize: ({ parentId: storeParentId, }?: {
         parentId?: string | number;
     }) => Promise<void>;
-    loadDataList: () => Promise<void>;
+    loadDataList: ({ withLoading, }?: import("../../types/tableStore.types").LoadDataListOptions) => Promise<void>;
     appendToDataList: () => Promise<void>;
     updateSelected: (value: EnginePresetQuery[]) => void;
     patchItemProperty: ({ index, path, value, }: import("../../types/tableStore.types").PatchItemPropertyParams) => Promise<void>;
@@ -202,7 +202,7 @@ export declare const createFilterPresetsStore: (namespace: string) => () => {
     initialize: ({ parentId: storeParentId, }?: {
         parentId?: string | number;
     }) => Promise<void>;
-    loadDataList: () => Promise<void>;
+    loadDataList: ({ withLoading, }?: import("../../types/tableStore.types").LoadDataListOptions) => Promise<void>;
     appendToDataList: () => Promise<void>;
     updateSelected: (value: EnginePresetQuery[]) => void;
     patchItemProperty: ({ index, path, value, }: import("../../types/tableStore.types").PatchItemPropertyParams) => Promise<void>;

package/types/modules/table/createTableStore.store.d.ts

@@ -1,6 +1,6 @@
 import deepEqual from 'deep-equal';
 import { type Ref } from 'vue';
-import type { PatchItemPropertyParams, useTableStoreConfig } from '../types/tableStore.types';
+import type { LoadDataListOptions, PatchItemPropertyParams, useTableStoreConfig } from '../types/tableStore.types';
 export declare const tableStoreBody: <Entity extends {
     id: string;
     etag?: string;
@@ -91,7 +91,7 @@ export declare const tableStoreBody: <Entity extends {
     initialize: ({ parentId: storeParentId, }?: {
         parentId?: string | number;
     }) => Promise<void>;
-    loadDataList: () => Promise<void>;
+    loadDataList: ({ withLoading, }?: LoadDataListOptions) => Promise<void>;
     appendToDataList: () => Promise<void>;
     updateSelected: (value: Entity[]) => void;
     patchItemProperty: ({ index, path, value, }: PatchItemPropertyParams) => Promise<void>;
@@ -204,7 +204,7 @@ export declare const createTableStore: <Entity extends {
     initialize: ({ parentId: storeParentId, }?: {
         parentId?: string | number;
     }) => Promise<void>;
-    loadDataList: () => Promise<void>;
+    loadDataList: ({ withLoading, }?: LoadDataListOptions) => Promise<void>;
     appendToDataList: () => Promise<void>;
     updateSelected: (value: Entity[]) => void;
     patchItemProperty: ({ index, path, value, }: PatchItemPropertyParams) => Promise<void>;

package/types/modules/types/tableStore.types.d.ts

@@ -16,6 +16,9 @@ export interface PatchItemPropertyParams {
     path: string;
     value: unknown;
 }
+export interface LoadDataListOptions {
+    withLoading?: boolean;
+}
 export interface TableStore<Entity> {
     dataList: Ref<Entity[]>;
     selected: Ref<Entity[]>;
@@ -32,7 +35,7 @@ export interface TableStore<Entity> {
     filtersManager: Ref<IFiltersManager>;
     isFiltersRestoring: Ref<boolean>;
     initialize: () => Promise<void>;
-    loadDataList: (query?: object) => Promise<void>;
+    loadDataList: (options?: LoadDataListOptions) => Promise<void>;
     updateSelected: (selected: Entity[]) => void;
     patchItemProperty: (payload: PatchItemPropertyParams) => Promise<void>;
     deleteEls: (deleted: Entity[]) => Promise<void>;