tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.8

package/dist/components/StreamView/manager/mediaManager.js

@@ -1,75 +1,69 @@
 var R = Object.defineProperty;
-var w = (o, t, e) => t in o ? R(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var y = (o, t, e) => w(o, typeof t != "symbol" ? t + "" : t, e);
-import P, { TUIVideoStreamType as c, TRTCVideoStreamType as V, TRTCVideoFillMode as M, TRTCVideoRotation as D, TRTCVideoMirrorType as E, TUIRoomEvents as S } from "@tencentcloud/tuiroom-engine-js";
-import { useUserState as U } from "../../../states/UserState/index.js";
-import { innerUserStore as L } from "../../../states/UserState/store.js";
-import { useRoomEngine as O } from "../../../hooks/useRoomEngine.js";
-import { useLiveState as k } from "../../../states/LiveState/index.js";
-import { useVideoMixerState as A } from "../../../states/VideoMixerState.js";
-import { watch as _ } from "vue";
-import { LiveStatus as $ } from "../../../types/live.js";
+var w = (a, t, e) => t in a ? R(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var p = (a, t, e) => w(a, typeof t != "symbol" ? t + "" : t, e);
+import P, { TUIVideoStreamType as c, TRTCVideoStreamType as V, TRTCVideoFillMode as M, TRTCVideoRotation as D, TRTCVideoMirrorType as E, TUIRoomEvents as f } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as U } from "../../../hooks/useRoomEngine.js";
+import { useUserState as O } from "../../../states/UserState/index.js";
+import { innerUserStore as k } from "../../../states/UserState/store.js";
+import { useVideoMixerState as L } from "../../../states/VideoMixerState/VideoMixerState.js";
 import { StreamPlayStatus as h } from "../../../types/user.js";
-const { localUser: v } = U(), { isVideoMixerEnabled: C } = A(), { localLiveStatus: x } = k(), l = O(), f = /* @__PURE__ */ new Map();
-function B(o, t) {
+const { localUser: S } = O(), { isVideoMixerEnabled: C } = L(), l = U(), T = /* @__PURE__ */ new Map();
+function A(a, t) {
   var r;
-  f.get(`${o.userId}-${o.streamType}`) || f.set(`${o.userId}-${o.streamType}`, /* @__PURE__ */ new Map()), (r = f.get(`${o.userId}-${o.streamType}`)) == null || r.set(t.view, t.streamType);
+  T.get(`${a.userId}-${a.streamType}`) || T.set(`${a.userId}-${a.streamType}`, /* @__PURE__ */ new Map()), (r = T.get(`${a.userId}-${a.streamType}`)) == null || r.set(t.view, t.streamType);
 }
-function T(o) {
-  return f.get(`${o.userId}-${o.streamType}`);
+function v(a) {
+  return T.get(`${a.userId}-${a.streamType}`);
 }
-_(x, (o) => {
-  o === $.IDLE && f.clear();
-});
-function b(o) {
-  if (o.userId === "local_fake_user")
+function b(a) {
+  if (a.userId === "local_fake_user")
     return;
-  const { userId: t, streamType: e, playStatus: r } = o, a = e === c.kScreenStream ? {
+  const { userId: t, streamType: e, playStatus: r } = a, o = e === c.kScreenStream ? {
     screenPlayStatus: r
   } : {
     cameraPlayStatus: r
   };
-  L.updateUserInfo({ userId: t, ...a });
+  k.updateUserInfo({ userId: t, ...o });
 }
-var F = /* @__PURE__ */ ((o) => (o.PLAY = "play", o.STOP = "stop", o.PLAY_IN_VISIBLE = "playInVisible", o))(F || {}), z = /* @__PURE__ */ ((o) => (o.HIGH = "high", o.LOW = "low", o.Default = "default", o))(z || {});
-class Z {
+var _ = /* @__PURE__ */ ((a) => (a.PLAY = "play", a.STOP = "stop", a.PLAY_IN_VISIBLE = "playInVisible", a))(_ || {}), $ = /* @__PURE__ */ ((a) => (a.HIGH = "high", a.LOW = "low", a.Default = "default", a))($ || {});
+class G {
   constructor() {
-    y(this, "intersectionObserver", null);
-    y(this, "observerDataMap", /* @__PURE__ */ new Map());
-    y(this, "observerRoot", null);
-    y(this, "onUserVideoStateChanged", (t) => {
+    p(this, "intersectionObserver", null);
+    p(this, "observerDataMap", /* @__PURE__ */ new Map());
+    p(this, "observerRoot", null);
+    p(this, "onUserVideoStateChanged", (t) => {
     });
     this.bindRoomEngineEvents();
   }
   async startPlayVideo(t) {
     var s, n;
-    const { userId: e, streamType: r, view: a, observerViewInVisible: i } = t;
+    const { userId: e, streamType: r, view: o, observerViewInVisible: i } = t;
     if (console.info(
       "MediaManager.startPlayVideo",
       e,
       r,
-      a,
+      o,
       i
-    ), B({ userId: e, streamType: r }, { view: a, streamType: r }), !i) {
+    ), A({ userId: e, streamType: r }, { view: o, streamType: r }), !i) {
       await this.doStartPlayVideo({ userId: e, streamType: r });
       return;
     }
     this.initIntersectionObserver(), this.observerDataMap.set(
-      a,
-      Object.assign(this.observerDataMap.get(a) || {}, {
+      o,
+      Object.assign(this.observerDataMap.get(o) || {}, {
         userId: e,
         streamType: r
       })
-    ), (s = this.intersectionObserver) == null || s.observe(a), (n = this.observerDataMap.get(a)) != null && n.isIntersection && await this.doStartPlayVideo({ userId: e, streamType: r });
+    ), (s = this.intersectionObserver) == null || s.observe(o), (n = this.observerDataMap.get(o)) != null && n.isIntersection && await this.doStartPlayVideo({ userId: e, streamType: r });
   }
   // If only one view wants to stop playing, update the viewList, but don't stop the stream.
   // If no view is passed in, the stream is stopped.
   async stopPlayVideo(t) {
     var s;
-    const { userId: e, streamType: r, view: a } = t;
-    console.info("MediaManager.stopPlayVideo", e, r, a);
-    const i = T({ userId: e, streamType: r });
-    !i || i.size === 0 || (this.observerDataMap.get(a) && (this.observerDataMap.delete(a), (s = this.intersectionObserver) == null || s.unobserve(a)), i.delete(a), i.size > 0 ? await this.doStartPlayVideo({
+    const { userId: e, streamType: r, view: o } = t;
+    console.info("MediaManager.stopPlayVideo", e, r, o);
+    const i = v({ userId: e, streamType: r });
+    !i || i.size === 0 || (this.observerDataMap.get(o) && (this.observerDataMap.delete(o), (s = this.intersectionObserver) == null || s.unobserve(o)), i.delete(o), i.size > 0 ? await this.doStartPlayVideo({
       userId: e,
       streamType: r
     }) : await this.doStopPlayVideo(t));
@@ -88,16 +82,16 @@ class Z {
   }
   intersectionObserverCallback(t) {
     t.forEach((e) => {
-      const { isIntersecting: r, target: a } = e, i = this.observerDataMap.get(a);
+      const { isIntersecting: r, target: o } = e, i = this.observerDataMap.get(o);
       if (!i)
         return;
-      const { userId: s, streamType: n } = i, d = T({ userId: s, streamType: n });
+      const { userId: s, streamType: n } = i, d = v({ userId: s, streamType: n });
       d && (r ? (i.isIntersection = !0, d && d.size > 0 && this.doStartPlayVideo({ userId: s, streamType: n })) : (i.isIntersection = !1, Array.from(
         (d == null ? void 0 : d.keys()) || []
       ).find(
-        (m) => {
-          var p;
-          return !this.observerDataMap.get(m) || ((p = this.observerDataMap.get(m)) == null ? void 0 : p.isIntersection);
+        (y) => {
+          var m;
+          return !this.observerDataMap.get(y) || ((m = this.observerDataMap.get(y)) == null ? void 0 : m.isIntersection);
         }
       ) || this.doStopPlayVideo({ userId: s, streamType: n })));
     });
@@ -105,16 +99,16 @@ class Z {
   getPlayStreamType(t, e) {
     if (e === c.kScreenStream)
       return e;
-    const r = T({ userId: t, streamType: e });
+    const r = v({ userId: t, streamType: e });
     return r && r.size > 0 ? Array.from(r.values()).includes(c.kCameraStream) ? c.kCameraStream : c.kCameraStreamLow : e;
   }
   async doStartPlayVideo(t) {
-    var n, d, g, m, p, I;
-    const { userId: e, streamType: r } = t, a = T({ userId: e, streamType: r });
-    if (!a)
+    var n, d, g, y, m, I;
+    const { userId: e, streamType: r } = t, o = v({ userId: e, streamType: r });
+    if (!o)
       return;
-    const i = this.getPlayStreamType(e, r), s = Array.from(a.keys()).map((u) => u instanceof HTMLElement ? u == null ? void 0 : u.id : u);
-    b({ userId: e, streamType: r, playStatus: h.Loading }), e === ((n = v.value) == null ? void 0 : n.userId) ? r === c.kCameraStream ? C.value ? ((d = l.instance) == null ? void 0 : d.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById(s[0])) : (g = l.instance) == null || g.setLocalVideoView({ view: s }) : await ((m = l.instance) == null ? void 0 : m.getTRTCCloud()._trtc).updateScreenShare({ view: document.getElementById(s[0]) }) : ((p = l.instance) == null || p.setRemoteVideoView({
+    const i = this.getPlayStreamType(e, r), s = Array.from(o.keys()).map((u) => u instanceof HTMLElement ? u == null ? void 0 : u.id : u);
+    b({ userId: e, streamType: r, playStatus: h.Loading }), e === ((n = S.value) == null ? void 0 : n.userId) ? r === c.kCameraStream ? C.value ? ((d = l.instance) == null ? void 0 : d.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById(s[0])) : (g = l.instance) == null || g.setLocalVideoView({ view: s }) : await ((y = l.instance) == null ? void 0 : y.getTRTCCloud()._trtc).updateScreenShare({ view: document.getElementById(s[0]) }) : ((m = l.instance) == null || m.setRemoteVideoView({
       userId: e,
       streamType: i,
       view: s
@@ -124,9 +118,9 @@ class Z {
     }))), b({ userId: e, streamType: r, playStatus: h.Playing });
   }
   async setVideoRenderParams(t) {
-    var a, i;
+    var o, i;
     const { userId: e, streamType: r } = t;
-    if (e !== ((a = v.value) == null ? void 0 : a.userId)) {
+    if (e !== ((o = S.value) == null ? void 0 : o.userId)) {
       const s = (i = l.instance) == null ? void 0 : i.getTRTCCloud(), n = r === c.kScreenStream ? V.TRTCVideoStreamTypeSub : V.TRTCVideoStreamTypeBig;
       if (e.indexOf("livekit_") !== 0) {
         let d = M.TRTCVideoFillMode_Fit;
@@ -139,9 +133,9 @@ class Z {
     }
   }
   async doStopPlayVideo(t) {
-    var a, i, s, n;
+    var o, i, s, n;
     const { userId: e, streamType: r } = t;
-    e === ((a = v.value) == null ? void 0 : a.userId) && C.value || (b({ userId: e, streamType: r, playStatus: h.Stopped }), e === ((i = v.value) == null ? void 0 : i.userId) && r === c.kCameraStream ? (s = l.instance) == null || s.setLocalVideoView({ view: null }) : await ((n = l.instance) == null ? void 0 : n.stopPlayRemoteVideo({
+    e === ((o = S.value) == null ? void 0 : o.userId) && C.value || (b({ userId: e, streamType: r, playStatus: h.Stopped }), e === ((i = S.value) == null ? void 0 : i.userId) && r === c.kCameraStream ? (s = l.instance) == null || s.setLocalVideoView({ view: null }) : await ((n = l.instance) == null ? void 0 : n.stopPlayRemoteVideo({
       userId: e,
       streamType: r
     })));
@@ -155,10 +149,10 @@ class Z {
     P.once("ready", () => {
       var t, e;
       (t = l.instance) == null || t.on(
-        S.onUserVideoStateChanged,
+        f.onUserVideoStateChanged,
         this.onUserVideoStateChanged.bind(this)
       ), (e = l.instance) == null || e.on(
-        S.onUserAudioStateChanged,
+        f.onUserAudioStateChanged,
         this.onUserAudioStateChanged.bind(this)
       );
     });
@@ -166,16 +160,16 @@ class Z {
   unbindRoomEngineEvents() {
     var t, e;
     (t = l.instance) == null || t.off(
-      S.onUserVideoStateChanged,
+      f.onUserVideoStateChanged,
       this.onUserVideoStateChanged
     ), (e = l.instance) == null || e.off(
-      S.onUserAudioStateChanged,
+      f.onUserAudioStateChanged,
       this.onUserAudioStateChanged
     );
   }
 }
 export {
-  Z as MediaManager,
-  F as StreamPlayMode,
-  z as StreamPlayQuality
+  G as MediaManager,
+  _ as StreamPlayMode,
+  $ as StreamPlayQuality
 };

package/dist/components/UIKitModal/UIKitModal.d.ts

@@ -0,0 +1,7 @@
+import { UIKitModalOptions } from './type';
+
+export declare const UIKitModal: {
+    openModal: (config: UIKitModalOptions) => Promise<{
+        action: string;
+    }>;
+};

package/dist/components/UIKitModal/UIKitModal.js

@@ -0,0 +1,156 @@
+import { defineComponent as A, computed as S, createBlock as l, openBlock as r, Teleport as U, createVNode as y, Transition as $, withCtx as C, createElementBlock as H, createCommentVNode as s, withModifiers as B, createElementVNode as d, unref as i, toDisplayString as p, createTextVNode as M, createApp as N } from "vue";
+import { IconSuccessToast as R, IconInfoToast as V, IconErrorToast as W, IconWarningToast as K, IconClose as P, TUIButton as _ } from "@tencentcloud/uikit-base-component-vue3";
+import { g as q } from "../../index-CeQ4nl87.js";
+import { useI18n as z } from "../../locales/index.js";
+import { useUIKitModalState as D } from "../../states/UIKitModalState/UIKitModalState.js";
+const F = { class: "uikit-modal-default uikit-modal-container" }, G = { class: "uikit-modal-header" }, X = { class: "uikit-modal-title" }, O = ["innerHTML"], j = { class: "uikit-modal-footer" }, J = /* @__PURE__ */ A({
+  __name: "index",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    id: {},
+    title: { default: "" },
+    content: { default: "" },
+    type: { default: "info" },
+    onConfirm: {},
+    onCancel: {}
+  },
+  emits: ["confirm", "cancel"],
+  setup(t, { emit: c }) {
+    const m = q() === "pc", { t: f } = z(), n = t, T = c, x = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i, b = /(https?:\/\/[^\s]+)/g, I = S(() => {
+      const { content: e } = n;
+      if (!e || typeof e != "string")
+        return e;
+      if (x.test(e.trim())) {
+        const o = e.trim(), h = o.startsWith("http") ? o : `https://${o}`;
+        return `<a href="${k(h)}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${k(o)}</a>`;
+      }
+      return e.includes("<a ") || e.includes("<a>") ? E(e) : b.test(e) ? k(e).replace(b, (o) => `<a href="${o}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${o}</a>`) : k(e);
+    });
+    function k(e) {
+      const o = document.createElement("div");
+      return o.textContent = e, o.innerHTML;
+    }
+    function E(e) {
+      const h = new DOMParser().parseFromString(e, "text/html");
+      return h.querySelectorAll("a").forEach((a) => {
+        if (a.getAttribute("href")) {
+          a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer"), a.classList.add("uikit-modal-link");
+          const L = a.textContent || "";
+          a.innerHTML = `<span style="padding: 0 0.2em; display: inline-block; color: var(--text-color-link)">${L}</span>`;
+        }
+      }), h.body.innerHTML;
+    }
+    function g() {
+      var e;
+      (e = n.onConfirm) == null || e.call(n), T("confirm");
+    }
+    function v() {
+      var e;
+      (e = n.onCancel) == null || e.call(n), T("cancel");
+    }
+    return (e, o) => (r(), l(U, { to: "body" }, [
+      y($, { name: "fade" }, {
+        default: C(() => [
+          t.visible ? (r(), H("div", {
+            key: 0,
+            class: "uikit-modal-mask",
+            onClick: B(g, ["self"])
+          }, [
+            d("div", F, [
+              d("div", G, [
+                t.type === "success" ? (r(), l(i(R), {
+                  key: 0,
+                  class: "uikit-modal-type-icon"
+                })) : s("", !0),
+                t.type === "info" ? (r(), l(i(V), {
+                  key: 1,
+                  class: "uikit-modal-type-icon"
+                })) : s("", !0),
+                t.type === "error" ? (r(), l(i(W), {
+                  key: 2,
+                  class: "uikit-modal-type-icon"
+                })) : s("", !0),
+                t.type === "warning" ? (r(), l(i(K), {
+                  key: 3,
+                  class: "uikit-modal-type-icon"
+                })) : s("", !0),
+                d("span", X, p(t.title), 1),
+                m ? (r(), l(i(P), {
+                  key: 4,
+                  class: "uikit-modal-close-icon",
+                  onClick: v
+                })) : s("", !0)
+              ]),
+              d("div", {
+                class: "uikit-modal-body",
+                innerHTML: I.value
+              }, null, 8, O),
+              d("div", j, [
+                y(i(_), {
+                  type: "default",
+                  style: { "min-width": "88px" },
+                  onClick: v
+                }, {
+                  default: C(() => [
+                    M(p(i(f)("Cancel")), 1)
+                  ]),
+                  _: 1
+                }),
+                y(i(_), {
+                  type: "primary",
+                  style: { "min-width": "88px" },
+                  onClick: g
+                }, {
+                  default: C(() => [
+                    M(p(i(f)("Confirm")), 1)
+                  ]),
+                  _: 1
+                })
+              ])
+            ])
+          ])) : s("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+let u = null;
+const { openModal: Q, closeModal: Y } = D(), Z = () => {
+  const t = window.location.hostname, c = window.location.href;
+  return !!(t === "localhost" || t === "127.0.0.1" || t.startsWith("192.168.") || c.startsWith("https://web.sdk.qcloud.com/trtc/livekit"));
+}, w = () => {
+  u && (u.unmount(), u = null);
+}, tt = (t) => new Promise((c) => {
+  if (w(), Q({
+    id: t.id,
+    title: t.title,
+    content: t.content,
+    type: t.type,
+    onConfirm: t.onConfirm,
+    onCancel: t.onCancel
+  }), !Z()) {
+    c({ action: "confirm" });
+    return;
+  }
+  const m = (n) => {
+    Y(n), w(), c({ action: n });
+  }, f = {
+    ...t,
+    visible: !0,
+    onConfirm: () => {
+      var n;
+      (n = t.onConfirm) == null || n.call(t), m("confirm");
+    },
+    onCancel: () => {
+      var n;
+      (n = t.onCancel) == null || n.call(t), m("cancel");
+    }
+  };
+  u = N(J, f), u.mount(document.createElement("div"));
+}), lt = {
+  openModal: (t) => tt(t)
+};
+export {
+  lt as UIKitModal
+};

package/dist/components/UIKitModal/index.d.ts

@@ -0,0 +1 @@
+export { UIKitModal } from './UIKitModal';

package/dist/components/UIKitModal/index.js

@@ -0,0 +1,4 @@
+import { UIKitModal as t } from "./UIKitModal.js";
+export {
+  t as UIKitModal
+};

package/dist/components/{BarrageList/Message/FaceMessage/FaceMessage.vue.d.ts → UIKitModal/index.vue.d.ts}

@@ -1,14 +1,29 @@
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { UIKitModalOptions } from './type';
 
-interface IFaceMessageProps {
-    message: IMessageModel;
+interface Props extends UIKitModalOptions {
+    visible: boolean;
 }
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IFaceMessageProps>, {
-    message: () => IMessageModel;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IFaceMessageProps>, {
-    message: () => IMessageModel;
-}>>> & Readonly<{}>, {
-    message: IMessageModel;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    type: string;
+    title: string;
+    content: string;
+    visible: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    confirm: () => void;
+    cancel: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    type: string;
+    title: string;
+    content: string;
+    visible: boolean;
+}>>> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    visible: boolean;
+    title: string;
+    type: "info" | "warning" | "error" | "success";
+    content: string | import('vue').VNode;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/UIKitModal/type.d.ts

@@ -0,0 +1,21 @@
+import { VNode } from 'vue';
+
+export type ButtonType = 'primary' | 'default' | 'text';
+export type Action = 'cancel' | 'confirm' | 'close' | 'mask';
+export interface UIKitModalEvents {
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+export interface UIKitModalOptions extends UIKitModalEvents {
+    id: number;
+    title: string;
+    content: string | VNode;
+    type: 'info' | 'warning' | 'error' | 'success';
+}
+export interface IUIKitModalBtn {
+    type?: ButtonType;
+    text?: string;
+    customClasses?: string[];
+    action?: () => void;
+    disabled?: boolean;
+}

package/dist/components/UIKitModal/type.js

@@ -0,0 +1 @@
+

package/dist/components/UserPicker/UserPicker.js

@@ -41,8 +41,7 @@ const J = ["data-display-mode"], R = ["data-display-mode"], Y = /* @__PURE__ */
     }), i = w({
       dataSource: d,
       isTreeMode: c.value,
-      onSearch: a.onSearch || (() => {
-      })
+      onSearch: a.onSearch
     }), m = O({
       onExpand: (t) => {
         a.onExpand && a.onExpand(t);

package/dist/components/UserPicker/components/SelectedPanel/SelectedPanel.js

@@ -1,4 +1,4 @@
-import { defineComponent as h, computed as I, createElementBlock as c, createCommentVNode as i, openBlock as a, normalizeClass as t, createElementVNode as l, toDisplayString as d, unref as o, createTextVNode as m, Fragment as u, renderList as f, createVNode as p } from "vue";
+import { defineComponent as h, computed as I, createElementBlock as c, createCommentVNode as i, openBlock as a, normalizeClass as t, createElementVNode as l, toDisplayString as n, unref as o, createTextVNode as m, Fragment as p, renderList as f, createVNode as y } from "vue";
 import { useUIKit as k, IconClose as b } from "@tencentcloud/uikit-base-component-vue3";
 import $ from "../../../Avatar/Avatar.js";
 import { _ as N } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
@@ -12,8 +12,8 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
     maxCount: { default: Number.POSITIVE_INFINITY }
   },
   setup(_) {
-    const { t: y } = k(), n = _, r = I(() => n.displayMode === "list" ? n.selectedItems : n.displayMode === "tree" ? n.selectedItems.filter((e) => e.isLeafNode) : []), v = Number.POSITIVE_INFINITY;
-    return (e, F) => r.value.length > 0 ? (a(), c("div", {
+    const { t: u } = k(), d = _, r = I(() => d.displayMode === "list" ? d.selectedItems : d.displayMode === "tree" ? d.selectedItems.filter((e) => e.isLeafNode) : []), v = Number.POSITIVE_INFINITY;
+    return (e, z) => r.value.length > 0 ? (a(), c("div", {
       key: 0,
       class: t(e.$style.selected__panel)
     }, [
@@ -22,27 +22,28 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
       }, [
         l("span", {
           class: t(e.$style.selected__title)
-        }, d(o(y)("UserPicker.selected")), 3),
+        }, n(o(u)("UserPicker.selected")), 3),
         l("span", {
           class: t(e.$style.selected__count)
         }, [
-          m(d(r.value.length) + " ", 1),
-          _.maxCount < o(v) ? (a(), c(u, { key: 0 }, [
-            m(" / " + d(_.maxCount), 1)
-          ], 64)) : i("", !0)
+          m(n(r.value.length) + " ", 1),
+          _.maxCount < o(v) ? (a(), c(p, { key: 0 }, [
+            m(" / " + n(_.maxCount), 1)
+          ], 64)) : i("", !0),
+          m(" " + n(o(u)("UserPicker.people_unit")), 1)
         ], 2)
       ], 2),
       l("div", {
         class: t(e.$style.selected__list)
       }, [
-        (a(!0), c(u, null, f(r.value, (s) => (a(), c("div", {
+        (a(!0), c(p, null, f(r.value, (s) => (a(), c("div", {
           key: s.key,
           class: t(e.$style.selected__item)
         }, [
           l("div", {
             class: t(e.$style["selected__item-content"])
           }, [
-            p(o($), {
+            y(o($), {
               src: s.avatarUrl,
               class: t(e.$style["selected__item-avatar"]),
               size: "sm",
@@ -50,16 +51,16 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
             }, null, 8, ["src", "class", "alt"]),
             l("div", {
               class: t(e.$style["selected__item-label"])
-            }, d(s.label), 3)
+            }, n(s.label), 3)
           ], 2),
           _.lockedKeys.has(s.key) ? i("", !0) : (a(), c("button", {
             key: 0,
             type: "button",
             class: t(e.$style["selected__remove-button"]),
             "aria-label": "remove",
-            onClick: (K) => _.onRemove(s.key)
+            onClick: (F) => _.onRemove(s.key)
           }, [
-            p(o(b), {
+            y(o(b), {
               name: "close",
               size: "12px"
             })
@@ -68,10 +69,10 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
       ], 2)
     ], 2)) : i("", !0);
   }
-}), V = "_selected__panel_1phj6_12", M = "_selected__header_1phj6_17", P = "_selected__title_1phj6_23", S = "_selected__count_1phj6_28", T = "_selected__list_1phj6_32", g = "_selected__item_1phj6_55", E = {
+}), V = "_selected__panel_1phj6_12", P = "_selected__header_1phj6_17", M = "_selected__title_1phj6_23", S = "_selected__count_1phj6_28", T = "_selected__list_1phj6_32", g = "_selected__item_1phj6_55", E = {
   selected__panel: V,
-  selected__header: M,
-  selected__title: P,
+  selected__header: P,
+  selected__title: M,
   selected__count: S,
   selected__list: T,
   selected__item: g,
@@ -79,9 +80,9 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
   "selected__item-avatar": "_selected__item-avatar_1phj6_70",
   "selected__item-label": "_selected__item-label_1phj6_83",
   "selected__remove-button": "_selected__remove-button_1phj6_91"
-}, z = {
+}, U = {
   $style: E
-}, R = /* @__PURE__ */ N(C, [["__cssModules", z]]);
+}, R = /* @__PURE__ */ N(C, [["__cssModules", U]]);
 export {
   R as default
 };

package/dist/components/UserPicker/hooks/useSearchFilter.d.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'vue';
-import { UserPickerDataSource } from '../type';
+import { UserPickerDataSource, UserPickerRow } from '../type';
 
 interface UseSearchFilterOptions<T = unknown> {
     dataSource: Ref<UserPickerDataSource<T>>;
     isTreeMode?: boolean;
-    onSearch?: (value: string) => void;
+    onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>;
     debounceTime?: number;
 }
 interface UseSearchFilterReturn<T = unknown> {