@webitel/ui-sdk 26.6.17 → 26.6.18

package/dist/{wt-tree-table-DNr013Ft.js → wt-tree-table-CK9T8KmU.js}

@@ -1,7 +1,7 @@
-import { computed as C, unref as B, defineComponent as z, ref as D, onMounted as F, resolveComponent as L, createElementBlock as d, openBlock as l, Fragment as $, createElementVNode as u, createCommentVNode as b, normalizeClass as T, renderList as m, renderSlot as p, createBlock as x, createTextVNode as R, toDisplayString as H, createSlots as U, withCtx as I, toRef as G, normalizeStyle as O, withModifiers as Q, createVNode as j } from "vue";
-import { B as q, Q as W, R as J, _ as M, G as X } from "./install-Cu0d6sby.js";
+import { computed as C, unref as B, defineComponent as z, ref as O, onMounted as D, resolveComponent as L, createElementBlock as d, openBlock as l, Fragment as $, createElementVNode as u, createCommentVNode as b, normalizeClass as T, renderList as m, renderSlot as p, createBlock as x, createTextVNode as U, toDisplayString as H, createSlots as W, withCtx as N, toRef as F, normalizeStyle as G, withModifiers as j, createVNode as q } from "vue";
+import { B as J, N as R, O as Q, _ as M, G as X } from "./install-Cr0bk3L_.js";
 const Y = ({ headers: e }) => {
-  const { t: y } = q();
+  const { t: y } = J();
   return {
     tableHeaders: C(() => (B(e) ?? []).filter(
       (r) => r.show === void 0 || r.show
@@ -34,7 +34,7 @@ const Y = ({ headers: e }) => {
     "expanded-collapse"
   ],
   setup(e, { emit: y }) {
-    const a = e, r = y, h = D(!0), N = C(() => a.nestingLevel), A = C(() => a.nestingLevel + 1), P = C(() => a.selectedElements.includes(a.data)), k = () => {
+    const a = e, r = y, h = O(!0), I = C(() => a.nestingLevel), A = C(() => a.nestingLevel + 1), P = C(() => a.selectedElements.includes(a.data)), k = () => {
       h.value = !1, r("expanded-collapse");
     }, g = (c, i = 0) => {
       if (c[a.searchedProp] && i) return !0;
@@ -45,7 +45,7 @@ const Y = ({ headers: e }) => {
       }
       return !1;
     };
-    return F(() => {
+    return D(() => {
       a.searchedProp && g(a.data) && k();
     }), (c, i) => {
       const f = L("wt-tree-table-row", !0);
@@ -59,11 +59,11 @@ const Y = ({ headers: e }) => {
           }, [
             u("div", Z, [
               E ? b("", !0) : (l(), d("div", K, [
-                (l(!0), d($, null, m(N.value, (t) => (l(), d("div", {
+                (l(!0), d($, null, m(I.value, (t) => (l(), d("div", {
                   key: t,
                   class: "wt-tree-table-row__tree-space"
                 }))), 128)),
-                e.selectable ? (l(), x(W, {
+                e.selectable ? (l(), x(R, {
                   key: 0,
                   selected: P.value,
                   "onUpdate:selected": i[0] || (i[0] = (t) => c.$emit("update:selected", {
@@ -71,7 +71,7 @@ const Y = ({ headers: e }) => {
                     select: t
                   }))
                 }, null, 8, ["selected"])) : b("", !0),
-                e.data[e.childrenProp] ? (l(), x(J, {
+                e.data[e.childrenProp] ? (l(), x(Q, {
                   key: 1,
                   icon: h.value ? "tree-expand" : "tree-collapse",
                   onClick: i[1] || (i[1] = (t) => h.value = !h.value)
@@ -81,7 +81,7 @@ const Y = ({ headers: e }) => {
                 index: e.rowPosition,
                 item: e.data
               }, () => [
-                R(H(e.data[S.value]), 1)
+                U(H(e.data[S.value]), 1)
               ], !0)
             ])
           ]))), 128)),
@@ -109,8 +109,8 @@ const Y = ({ headers: e }) => {
             data: t.data,
             select: t.select
           }))
-        }, U({
-          actions: I(({ item: t }) => [
+        }, W({
+          actions: N(({ item: t }) => [
             p(c.$slots, "actions", {
               index: e.rowPosition,
               item: t
@@ -120,7 +120,7 @@ const Y = ({ headers: e }) => {
         }, [
           m(e.dataHeaders, (t, o) => ({
             name: t.value,
-            fn: I(({ item: n }) => [
+            fn: N(({ item: n }) => [
               p(c.$slots, t.value, {
                 index: e.rowPosition,
                 item: n
@@ -153,7 +153,7 @@ const Y = ({ headers: e }) => {
     "update:selected"
   ],
   setup(e, { emit: y }) {
-    const a = e, r = y, h = (t) => t[a.childrenProp] && Array.isArray(t[a.childrenProp]), N = (t) => {
+    const a = e, r = y, h = (t) => t[a.childrenProp] && Array.isArray(t[a.childrenProp]), I = (t) => {
       const o = [], n = (s) => {
         if (s._isSelected)
           return [
@@ -167,8 +167,8 @@ const Y = ({ headers: e }) => {
         o.push(s), h(s) && s[a.childrenProp].forEach(n);
       };
       return t.forEach(n), o;
-    }, P = C(() => a.selected || N(a.data)), k = C(() => P.value.length === A(a.data).length && A(a.data).length > 0), { tableHeaders: g } = Y({
-      headers: G(a, "headers")
+    }, P = C(() => a.selected || I(a.data)), k = C(() => P.value.length === A(a.data).length && A(a.data).length > 0), { tableHeaders: g } = Y({
+      headers: F(a, "headers")
     }), c = ({ sort: t }) => a.sortable && t !== void 0, i = (t) => {
       if (!c(t)) return;
       const o = X(t.sort);
@@ -207,7 +207,7 @@ const Y = ({ headers: e }) => {
                   },
                   `wt-tree-table-th--sort-${s.sort}`
                 ], "wt-tree-table-th typo-body-1"]),
-                style: O(s.width ? `min-width:${s.width}` : ""),
+                style: G(s.width ? `min-width:${s.width}` : ""),
                 onClick: (w) => i(s)
               }, [
                 u("div", {
@@ -215,10 +215,10 @@ const Y = ({ headers: e }) => {
                 }, [
                   v === 0 && e.selectable ? (l(), d("div", {
                     key: 0,
-                    onClick: o[0] || (o[0] = Q(() => {
+                    onClick: o[0] || (o[0] = j(() => {
                     }, ["stop"]))
                   }, [
-                    j(W, {
+                    q(R, {
                       selected: k.value,
                       "onUpdate:selected": S
                     }, null, 8, ["selected"])
@@ -256,20 +256,20 @@ const Y = ({ headers: e }) => {
               "selected-elements": P.value,
               "searched-prop": e.searchedProp,
               "onUpdate:selected": o[1] || (o[1] = (w) => E(w.data, w.select))
-            }, U({
-              actions: I(({ item: w }) => [
+            }, W({
+              actions: N(({ item: w }) => [
                 p(t.$slots, "actions", { item: w }, void 0, !0)
               ]),
               _: 2
             }, [
               m(B(g), (w, we) => ({
                 name: w.value,
-                fn: I(({ item: V }) => [
+                fn: N(({ item: V }) => [
                   p(t.$slots, w.value, {
                     index: v,
                     item: V
                   }, () => [
-                    R(H(V[w.value]), 1)
+                    U(H(V[w.value]), 1)
                   ], !0)
                 ])
               }))

package/dist/wt-type-extension-value-input-C3J9mXbz.js

@@ -0,0 +1,121 @@
+import { defineComponent as w, mergeModels as q, useModel as T, computed as r, resolveComponent as h, createBlock as S, renderSlot as m, createCommentVNode as U, unref as l, openBlock as V, mergeProps as s, createVNode as v } from "vue";
+import { S as W } from "./contacts-CW3-LZxF.js";
+import "./index-CVZdV0CY.js";
+import "lodash-es";
+import "@aliasedDeps/api-services/axios";
+import { B as $, a5 as x, a6 as N, a7 as E, a8 as I } from "./install-Cr0bk3L_.js";
+const a = {
+  Text: "string",
+  Number: "int32",
+  Select: "lookup",
+  Multiselect: "list",
+  Calendar: "datetime",
+  Boolean: "bool"
+}, F = /* @__PURE__ */ w({
+  __name: "wt-type-extension-value-input",
+  props: /* @__PURE__ */ q({
+    field: {},
+    label: {},
+    required: { type: Boolean },
+    v: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o) {
+    const f = T(o, "modelValue"), n = o;
+    n.v?.$touch();
+    const { t: P } = $(), M = r(() => n.label || P(n.field?.name || "vocabulary.labels")), B = r(() => n.required ?? n.field.required), u = r(() => f.value), t = r(() => ({
+      label: M.value,
+      required: B.value,
+      v: n.v
+    })), k = r(() => ({
+      clearable: !0,
+      dataKey: "id",
+      searchMethod: () => b(n.field.lookup)
+    })), y = r(() => ({
+      ...k.value
+    })), d = (e) => {
+      f.value = e;
+    }, b = ({ path: e, display: i, primary: c }) => (p) => W.getSysTypeRecordsLookup({
+      ...p,
+      path: e,
+      display: i,
+      primary: c
+    }), C = (e) => {
+      if (Object.values(e).length === 0)
+        return d(null);
+      d({
+        id: e.id,
+        name: e.name
+      });
+    }, g = (e) => {
+      d(
+        e.map((i) => ({
+          id: i.id,
+          name: i.name
+        }))
+      );
+    };
+    return (e, i) => {
+      const c = h("wt-input-text"), p = h("wt-input-number");
+      return o.field.kind === l(a).Text ? (V(), S(c, s({ key: 0 }, t.value, {
+        "model-value": u.value,
+        "onUpdate:modelValue": d
+      }), null, 16, ["model-value"])) : o.field.kind === l(a).Number ? (V(), S(p, s({ key: 1 }, t.value, {
+        "model-value": u.value,
+        "onUpdate:modelValue": d
+      }), null, 16, ["model-value"])) : o.field.kind === l(a).Boolean ? m(e.$slots, l(a).Boolean, {
+        key: 2,
+        defaultProps: { ...t.value }
+      }, () => [
+        v(l(x), s(t.value, {
+          "model-value": u.value,
+          "onUpdate:modelValue": d
+        }), null, 16, ["model-value"])
+      ]) : o.field.kind === l(a).Select ? m(e.$slots, l(a).Select, {
+        key: 3,
+        defaultProps: {
+          ...t.value,
+          ...k.value,
+          value: u.value
+        }
+      }, () => [
+        v(l(N), s(t.value, {
+          "model-value": u.value,
+          "search-method": b(o.field.lookup),
+          "data-key": "id",
+          "onUpdate:modelValue": C
+        }), null, 16, ["model-value", "search-method"])
+      ]) : o.field.kind === l(a).Multiselect ? m(e.$slots, l(a).Multiselect, {
+        key: 4,
+        defaultProps: {
+          ...t.value,
+          ...y.value,
+          value: u.value
+        }
+      }, () => [
+        v(l(E), s({ ...t.value, ...y.value }, {
+          "model-value": u.value,
+          "onUpdate:modelValue": g
+        }), null, 16, ["model-value"])
+      ]) : o.field.kind === l(a).Calendar ? m(e.$slots, l(a).Calendar, {
+        key: 5,
+        defaultProps: {
+          ...t.value,
+          value: u.value
+        }
+      }, () => [
+        v(l(I), s(t.value, {
+          value: u.value,
+          mode: "datetime",
+          onInput: d
+        }), null, 16, ["value"])
+      ]) : U("", !0);
+    };
+  }
+});
+export {
+  F as default
+};

package/dist/{wt-vidstack-player-BjA03boO.js → wt-vidstack-player-CW5GMIcG.js}

@@ -1,6 +1,6 @@
 import { defineComponent as ut, inject as se, createElementBlock as yt, openBlock as U, normalizeClass as ie, unref as et, createElementVNode as ht, renderSlot as ft, createVNode as W, computed as Hs, onMounted as Ii, onBeforeUnmount as Vi, createBlock as zt, createCommentVNode as Wt, toDisplayString as Di, createSlots as Fs, withCtx as jt, resolveComponent as Ri, useTemplateRef as Oi, ref as gs, provide as Ni, toRefs as Hi } from "vue";
-import { a as q, c as bt, i as G, b as Ne, d as S, e as lt, f as He, l as N, s as ae, g as Bs, E as Gs, D as L, h as z, o as P, j as Fi, k as f, m as l, n as M, p as Us, q as Bi, r as pe, t as j, V as st, v as w, C as b, S as vt, w as Ot, x as p, y as dt, z as Y, I as Ks, A as Gi, B as Ui, F as at, G as We, H as Qs, J as ys, K as je, L as zs, M as Ct, N as Ye, O as ge, P as Ki, Q as At, R as Qi, U as zi, W as Wi, X as ji, Y as Yi, Z as Xi, _ as Ji, $ as Zi, a0 as ta, a1 as Ws, a2 as T, a3 as I, a4 as ye, a5 as ea, a6 as Nt, a7 as K, a8 as sa, a9 as ia, aa, ab as na, ac as bs, ad as ra, ae as oa, af as v, ag as y, ah as ha, ai as la, T as da, u as ca } from "./useVidstackSrc-BhJ70gII.js";
-import { U as ua, V as pa, X as ma, Y as fa, _ as $t, R as be, C as Q, Z as ga } from "./install-Cu0d6sby.js";
+import { a as q, c as bt, i as G, b as Ne, d as S, e as lt, f as He, l as N, s as ae, g as Bs, E as Gs, D as L, h as z, o as P, j as Fi, k as f, m as l, n as M, p as Us, q as Bi, r as pe, t as j, V as st, v as w, C as b, S as vt, w as Ot, x as p, y as dt, z as Y, I as Ks, A as Gi, B as Ui, F as at, G as We, H as Qs, J as ys, K as je, L as zs, M as Ct, N as Ye, O as ge, P as Ki, Q as At, R as Qi, U as zi, W as Wi, X as ji, Y as Yi, Z as Xi, _ as Ji, $ as Zi, a0 as ta, a1 as Ws, a2 as T, a3 as I, a4 as ye, a5 as ea, a6 as Nt, a7 as K, a8 as sa, a9 as ia, aa, ab as na, ac as bs, ad as ra, ae as oa, af as v, ag as y, ah as ha, ai as la, T as da, u as ca } from "./useVidstackSrc-eIh94IOa.js";
+import { P as ua, Q as pa, R as ma, T as fa, _ as $t, O as be, C as Q, U as ga } from "./install-Cr0bk3L_.js";
 import { _ as ya } from "./wt-slider.vue_vue_type_script_setup_true_lang-DlaRDHxo.js";
 const js = bt();
 function $() {
@@ -2070,7 +2070,7 @@ class pn {
     return "audio";
   }
   async load(t) {
-    return new (await import("./vidstack-audio-BBZWJaJs.js")).AudioProvider(this.target, t);
+    return new (await import("./vidstack-audio-D57MQWMi.js")).AudioProvider(this.target, t);
   }
 }
 class ts {
@@ -2083,7 +2083,7 @@ class ts {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-video-BhR43aHZ.js")).VideoProvider(this.target, t);
+    return new (await import("./vidstack-video-0rGus1eV.js")).VideoProvider(this.target, t);
   }
 }
 class es extends ts {
@@ -2093,7 +2093,7 @@ class es extends ts {
     return es.supported && We(t);
   }
   async load(t) {
-    return new (await import("./vidstack-hls-B410PN9l.js")).HLSProvider(this.target, t);
+    return new (await import("./vidstack-hls-BJVMAGc7.js")).HLSProvider(this.target, t);
   }
 }
 class ss extends ts {
@@ -2103,7 +2103,7 @@ class ss extends ts {
     return ss.supported && je(t);
   }
   async load(t) {
-    return new (await import("./vidstack-dash-DioDLqSD.js")).DASHProvider(this.target, t);
+    return new (await import("./vidstack-dash-DQ3tW9tH.js")).DASHProvider(this.target, t);
   }
 }
 class mn {
@@ -2125,7 +2125,7 @@ class mn {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-vimeo-D8KMx3dH.js")).VimeoProvider(this.target, t);
+    return new (await import("./vidstack-vimeo-y__Gq7-Z.js")).VimeoProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { resolveVimeoVideoId: i, getVimeoVideoInfo: n } = await import("./vidstack-krOAtKMi-C50BTxmn.js");
@@ -2157,7 +2157,7 @@ class fn {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-youtube-B3lNuheF.js")).YouTubeProvider(this.target, t);
+    return new (await import("./vidstack-youtube-DP3qUcr_.js")).YouTubeProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { findYouTubePoster: i, resolveYouTubeVideoId: n } = await import("./vidstack-Dm1xEU9Q-CXHNvShT.js"), r = S(t.src) && n(t.src);
@@ -2625,7 +2625,7 @@ class $n extends Mt {
         throw i.code = "CAST_NOT_AVAILABLE", i;
       }
       if (ne("https://www.gstatic.com"), !this.#v) {
-        const i = await import("./vidstack-D2pY00kU-ByV8VY12.js").then((n) => n.v);
+        const i = await import("./vidstack-D2pY00kU-32fYwL0c.js").then((n) => n.v);
         this.#v = new i.GoogleCastLoader();
       }
       await this.#v.prompt(this.#s), t && this.#e.queue.enqueue("media-google-cast-request", t);
@@ -8022,7 +8022,7 @@ class qr extends v(HTMLElement, li) {
     if (this.#e?.classList.contains("vds-google-cast"))
       return this.#e;
     const t = document.createElement("div");
-    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-BYSsKBwR.js").then(({ insertContent: e }) => {
+    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-DU-Z0scc.js").then(({ insertContent: e }) => {
       e(t, this.#t.$state);
     }), t;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.6.17",
+	"version": "26.6.18",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

package/src/components/_internals/composables/useSelect/useSelectUtils.ts

@@ -5,10 +5,18 @@ export const toArray = (value) =>
 				value,
 			];
 
+// Handles mixed comparisons: when optionValue is used, selected array contains
+// primitives while filteredOptions contains full objects, so we compare by dataKey
+// against the primitive directly instead of trying to read dataKey from both sides.
 export const isOptionSelected = (option, selectedArray, dataKey) => {
-	return dataKey
-		? selectedArray.some((s) => s != null && s[dataKey] === option[dataKey])
-		: selectedArray.some((s) => s === option);
+	const isObj = (v) => v != null && typeof v === 'object';
+	return selectedArray.some((s) => {
+		if (!dataKey) return s === option;
+		if (isObj(s) && isObj(option)) return s[dataKey] === option[dataKey]; // both objects
+		if (!isObj(s) && isObj(option)) return s === option[dataKey]; // s is primitive (optionValue)
+		if (isObj(s) && !isObj(option)) return s[dataKey] === option; // option is primitive
+		return s === option; // both primitives
+	});
 };
 
 export const dedupeByKey = (items: unknown[], key: string): unknown[] => {

package/src/components/index.js

@@ -119,9 +119,6 @@ const WtTableColumnSelect = defineAsyncComponent(
 	() => import('./wt-table-column-select/wt-table-column-select.vue'),
 );
 const WtTabs = defineAsyncComponent(() => import('./wt-tabs/wt-tabs.vue'));
-const WtTagsInput = defineAsyncComponent(
-	() => import('./wt-tags-input/wt-tags-input.vue'),
-);
 const WtTimeInput = defineAsyncComponent(
 	() => import('./wt-time-input/wt-time-input.vue'),
 );
@@ -211,7 +208,6 @@ const Components = {
 	WtSlider,
 	WtSwitcher,
 	WtTabs,
-	WtTagsInput,
 	WtTimeInput,
 	WtTimepicker,
 	WtTextarea,
@@ -340,7 +336,6 @@ export {
 	WtTableActions,
 	WtTableColumnSelect,
 	WtTabs,
-	WtTagsInput,
 	WtTextarea,
 	WtTimeInput,
 	WtTimepicker,

package/src/components/on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue

@@ -31,13 +31,12 @@
       value,
     }"
   >
-    <wt-select
+    <wt-single-select
       v-bind="sharedChildrenProps"
-      :value="value"
+      :model-value="value"
       :search-method="loadLookupList(field.lookup)"
-      track-by="id"
-      clearable
-      @input="selectElement"
+      data-key="id"
+      @update:model-value="selectElement"
     />
   </slot>
   <slot
@@ -49,10 +48,10 @@
       value,
     }"
   >
-    <wt-select
+    <wt-multi-select
       v-bind="{ ...sharedChildrenProps, ...multiselectProps }"
-      :value="value"
-      @input="selectElements"
+      :model-value="value"
+      @update:model-value="selectElements"
     />
   </slot>
   <slot
@@ -74,7 +73,12 @@
 
 <script lang="ts" setup>
 import { SysTypesAPI } from '@webitel/api-services/api';
-import { WtDatepicker, WtSelect, WtSwitcher } from '@webitel/ui-sdk/components';
+import {
+	WtDatepicker,
+	WtMultiSelect,
+	WtSingleSelect,
+	WtSwitcher,
+} from '@webitel/ui-sdk/components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { WebitelProtoDataField } from 'webitel-sdk';
@@ -123,13 +127,12 @@ const sharedChildrenProps = computed(() => ({
  */
 const selectProps = computed(() => ({
 	clearable: true,
-	trackBy: 'id',
+	dataKey: 'id',
 	searchMethod: () => loadLookupList(props.field.lookup),
 }));
 
 const multiselectProps = computed(() => ({
 	...selectProps.value,
-	multiple: true,
 }));
 
 const setValue = (value) => {

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -43,14 +43,14 @@
           required
           @update:model-value="updateQuestion({ path: 'question', value: $event })"
         />
-        <wt-select
-          :clearable="false"
+        <wt-single-select
+          :show-clear="false"
           :label="t('webitelUI.auditForm.answerType')"
           :options="QuestionType"
-          :value="prettifiedQuestionType"
+          :model-value="prettifiedQuestionType"
           :disabled="readonly"
-          track-by="value"
-          @input="handleQuestionTypeChange($event.value)"
+          data-key="value"
+          @update:model-value="handleQuestionTypeChange($event.value)"
         />
       </div>
       <component
@@ -70,7 +70,7 @@ import { computed, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import WtIconBtn from '../../../components/wt-icon-btn/wt-icon-btn.vue';
-import WtSelect from '../../../components/wt-select/wt-select.vue';
+import WtSingleSelect from '../../../components/wt-single-select/wt-single-select.vue';
 import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
 import WtTooltip from '../../../components/wt-tooltip/wt-tooltip.vue';
 import { updateObject } from '../../../scripts';

package/src/modules/Filters/components/filter-select.vue

@@ -1,13 +1,22 @@
 <template>
-  <wt-select
-    :close-on-select="!filterSchema.multiple"
-    :multiple="filterSchema.multiple"
+  <wt-single-select
+		v-if="!filterSchema.multiple"
     :options="options"
     :search-method="search"
-    :track-by="trackBy"
-    :value="value"
+    :data-key="trackBy"
+    :model-value="value"
     v-bind="attrs"
-    @input="setValue"
+    @update:model-value="setValue"
+  />
+
+	<wt-multi-select
+		v-else
+    :options="options"
+    :search-method="search"
+    :data-key="trackBy"
+    :model-value="value"
+    v-bind="attrs"
+    @update:model-value="setValue"
   />
 </template>
 

package/src/modules/ObjectPermissions/_internals/components/permissions-role-select.vue

@@ -1,23 +1,22 @@
 <template>
-  <wt-select
+  <wt-single-select
     class="permissions-role-select"
     option-label="name"
     v-bind="attrs"
-    :value="model"
-    @input="model = $event"
+    v-model:model-value="model"
   >
-    <template #singleLabel="{ option, optionLabel }">
-      <role-row :role="option">
-        {{ option[optionLabel] || option }}
+    <template #value="{ value, getOptionLabel }">
+      <role-row :role="value">
+        {{ getOptionLabel(value) || value }}
       </role-row>
     </template>
 
-    <template #option="{ option, optionLabel }">
+    <template #option="{ option, getOptionLabel }">
       <role-row :role="option">
-        {{ option[optionLabel] || option }}
+        {{ getOptionLabel(option) || option }}
       </role-row>
     </template>
-  </wt-select>
+  </wt-single-select>
 </template>
 
 <script setup>

package/src/modules/ObjectPermissions/components/permissions-tab.vue

@@ -45,32 +45,32 @@
           </template>
 
           <template #read="{ item }">
-            <wt-select
-              :clearable="false"
+            <wt-single-select
+              :show-clear="false"
               :disabled="!access.edit"
               :options="accessOptions"
-              :value="item.access.r"
-              @input="changeAccessMode({ item, ruleName: 'r', mode: $event })"
+              :model-value="item.access.r"
+              @update:model-value="changeAccessMode({ item, ruleName: 'r', mode: $event })"
             />
           </template>
 
           <template #edit="{ item }">
-            <wt-select
-              :clearable="false"
+            <wt-single-select
+              :show-clear="false"
               :disabled="!access.edit"
               :options="accessOptions"
-              :value="item.access.w"
-              @input="changeAccessMode({ item, ruleName: 'w', mode: $event })"
+              :model-value="item.access.w"
+              @update:model-value="changeAccessMode({ item, ruleName: 'w', mode: $event })"
             />
           </template>
 
           <template #delete="{ item }">
-            <wt-select
-              :clearable="false"
+            <wt-single-select
+              :show-clear="false"
               :disabled="!access.edit"
               :options="accessOptions"
-              :value="item.access.d"
-              @input="changeAccessMode({ item, ruleName: 'd', mode: $event })"
+              :model-value="item.access.d"
+              @update:model-value="changeAccessMode({ item, ruleName: 'd', mode: $event })"
             />
           </template>
           <template #actions="{ item }">

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

@@ -1,20 +1,42 @@
 <template>
-  <wt-select
-    :close-on-select="filterSchema.closeOnSelect"
+  <wt-single-select
+    v-if="!filterSchema.multiple"
     :label="label"
-    :multiple="filterSchema.multiple"
     :search-method="search"
-    :track-by="filterSchema.storedProp"
-    :value="filterSchema.value"
+    :data-key="filterSchema.storedProp"
+    :model-value="filterSchema.value"
     v-bind="$attrs"
-    @closed="
+    @hide="
       setValueToQuery({
         value,
         filterQuery,
         storedProp: filterSchema.storedProp,
       })
     "
-    @input="setValue({ filter: filterQuery, value: $event })"
+    @update:model-value="setValue({ filter: filterQuery, value: $event })"
+    @reset="
+      setValueToQuery({
+        value,
+        filterQuery,
+        storedProp: filterSchema.storedProp,
+      })
+    "
+  />
+
+  <wt-multi-select
+    :label="label"
+    :search-method="search"
+    :data-key="filterSchema.storedProp"
+    :model-value="filterSchema.value"
+    v-bind="$attrs"
+    @hide="
+      setValueToQuery({
+        value,
+        filterQuery,
+        storedProp: filterSchema.storedProp,
+      })
+    "
+    @update:model-value="setValue({ filter: filterQuery, value: $event })"
     @reset="
       setValueToQuery({
         value,