tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/src/components/UserPicker/hooks/useSearchFilter.ts

@@ -5,7 +5,7 @@ import type { UserPickerDataSource, UserPickerNode, UserPickerRow } from '../typ
 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;
 }
 
@@ -33,15 +33,18 @@ function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string
     return nodes;
   }
 
-  // Helper function: check if node matches
+  const lowerSearchValue = searchValue.toLowerCase();
+
+  // Helper function: check if node matches (support both key and label)
   const isNodeMatched = (node: UserPickerNode<T>): boolean =>
-    node.label.toLowerCase().includes(searchValue.toLowerCase());
+    node.key.toLowerCase().includes(lowerSearchValue)
+    || node.label.toLowerCase().includes(lowerSearchValue);
 
   // Helper function: recursively search nodes
   const searchNodes = (nodesList: Array<UserPickerNode<T>>): Array<UserPickerNode<T>> => {
     const matchedNodes: Array<UserPickerNode<T>> = [];
 
-    nodesList.forEach(node => {
+    nodesList.forEach((node) => {
       const isMatched = isNodeMatched(node);
       let matchedChildren: Array<UserPickerNode<T>> = [];
 
@@ -64,13 +67,18 @@ function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string
   return searchNodes(nodes);
 }
 
-// Search list structure
+// Search list structure (default implementation)
 function searchListItems<T>(items: Array<UserPickerRow<T>>, searchValue: string): Array<UserPickerRow<T>> {
   if (!searchValue.trim()) {
     return items;
   }
 
-  return items.filter(item => item.label.toLowerCase().includes(searchValue.toLowerCase()));
+  const lowerSearchValue = searchValue.toLowerCase();
+
+  return items.filter(item =>
+    item.key.toLowerCase().includes(lowerSearchValue)
+    || item.label.toLowerCase().includes(lowerSearchValue),
+  );
 }
 
 export function useSearchFilter<T = unknown>({
@@ -85,35 +93,36 @@ export function useSearchFilter<T = unknown>({
 
   // Filter data based on search value
   const filteredData = computed(() => {
-    if (!searchValue.value.trim()) {
+    const keyword = searchValue.value.trim();
+
+    // No search keyword, return original data
+    if (!keyword) {
       return dataSource.value;
     }
 
+    // Tree mode: always use default search (custom search not supported)
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, searchValue.value);
+      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, keyword);
+    }
+
+    // List mode: use custom search if provided, otherwise use default search
+    if (onSearch) {
+      return onSearch(dataSource.value as Array<UserPickerRow<T>>, keyword);
     }
-    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, searchValue.value);
+
+    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, keyword);
   });
 
   // Handle search input
   const handleSearch = (value: string) => {
     isSearching.value = true;
     searchValue.value = value;
-
-    // Trigger external search callback
-    if (onSearch) {
-      onSearch(value);
-    }
-
     isSearching.value = false;
   };
 
   // Clear search
   const clearSearch = () => {
     searchValue.value = '';
-    if (onSearch) {
-      onSearch('');
-    }
   };
 
   // Set search value

package/src/components/UserPicker/i18n/en-US.ts

@@ -3,6 +3,7 @@ const UserPicker = {
   no_result: 'No result',
   no_data_available: 'No data available',
   selected: 'Selected',
+  people_unit: 'people',
 };
 
 export default UserPicker;

package/src/components/UserPicker/i18n/zh-CN.ts

@@ -3,6 +3,7 @@ const UserPicker = {
   no_result: '没有结果',
   no_data_available: '无数据',
   selected: '已选择',
+  people_unit: '人',
 };
 
 export default UserPicker;

package/src/components/UserPicker/type.ts

@@ -47,7 +47,7 @@ export interface UserPickerProps<T = unknown> {
   // Search related
   enableSearch?: boolean; // Whether to enable search
   searchPlaceholder?: string; // Search placeholder text
-  onSearch?: (value: string) => void; // Search callback
+  onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>; // Custom search function for list mode only
 
   // Custom rendering
   renderItem?: (data: UserPickerRow<T> | UserPickerNode<T>) => any; // Vue render function or component

package/src/components/VideoSetting/CameraSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <tui-select
+  <TUISelect
     v-model="currentDeviceId"
     placeholder="placeholder"
     class="select"
@@ -8,21 +8,21 @@
     :popper-append-to-body="false"
     @change="handleChange"
   >
-    <tui-option
+    <TUIOption
       v-for="item in cameraList"
       :key="item.deviceId"
       :label="item.deviceName"
       :value="item.deviceId"
     />
-  </tui-select>
+  </TUISelect>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
-import TuiSelect from '../../baseComp/Select';
-import TuiOption from '../../baseComp/Option';
-import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
+import type { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
 interface Props {
@@ -36,12 +36,12 @@ const currentDeviceId = ref(currentCamera.value?.deviceId);
 
 watch(
   () => currentCamera.value?.deviceId,
-  val => {
+  (val) => {
     if (currentDeviceId.value !== val) {
       currentDeviceId.value = val;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 async function handleChange(deviceId: string) {
@@ -52,8 +52,8 @@ async function handleChange(deviceId: string) {
     });
   } catch (error) {
     if (
-      currentCamera.value?.deviceId &&
-      cameraList.value
+      currentCamera.value?.deviceId
+      && cameraList.value
         .map((item: TUIDeviceInfo) => item.deviceId)
         .includes(currentCamera.value?.deviceId)
     ) {
@@ -64,7 +64,7 @@ async function handleChange(deviceId: string) {
 
 onBeforeMount(async () => {
   await getCameraList();
-})
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/VideoSetting/VideoMediaControl.vue

@@ -16,47 +16,48 @@
       @click-more="handleMore"
     >
       <template v-if="!currentRoom">
-        <IconCameraOn size="24" v-if="isCameraTesting" />
-        <IconCameraOff size="24" v-else />
+        <IconCameraOn v-if="isCameraTesting" size="24" />
+        <IconCameraOff v-else size="24" />
       </template>
       <template v-else>
         <IconCameraOn
-          size="24"
           v-if="cameraStatus === DeviceStatus.On"
+          size="24"
         />
-        <IconCameraOff size="24" v-else />
+        <IconCameraOff v-else size="24" />
       </template>
     </icon-button>
-    <video-setting-tab v-show="showVideoSettingTab" class="video-tab" />
+    <video-setting-tab v-if="showVideoSettingTab" class="video-tab" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, defineEmits, inject } from 'vue';
+import type { Ref } from 'vue';
+import { ref, defineEmits, inject } from 'vue';
 import {
   IconCameraOn,
   IconCameraOff,
 } from '@tencentcloud/uikit-base-component-vue3';
 import IconButton from '../../baseComp/IconButton.vue';
-import VideoSettingTab from './VideoSettingTab.vue';
-import { useI18n } from '../../locales';
 import vClickOutside from '../../directives/vClickOutside';
-import {
-  MediaSettingDisplayMode,
-  VideoSettingProps,
-} from '../../types';
+import { useI18n } from '../../locales';
 import { useDeviceState } from '../../states/DeviceState';
-import { DeviceStatus, DeviceError } from '../../types';
-import useUserState from '../../states/UserState/index';
+import { useRoomParticipantState } from '../../states/RoomParticipantState';
 import { useRoomState } from '../../states/RoomState';
+import {
+  MediaSettingDisplayMode,
+  DeviceStatus, DeviceError } from '../../types';
+import VideoSettingTab from './VideoSettingTab.vue';
+import type {
+  VideoSettingProps } from '../../types';
 
-const videoSettingProps: VideoSettingProps | undefined =
-  inject('videoSettingProps');
+const videoSettingProps: VideoSettingProps | undefined
+  = inject('videoSettingProps');
 
 const emits = defineEmits(['click-icon']);
-const { cameraStatus, cameraLastError, isCameraTesting, startCameraDeviceTest, stopCameraDeviceTest, openLocalCamera, closeLocalCamera } = useDeviceState();
-const { localUser } = useUserState();
+const { cameraStatus, cameraLastError, isCameraTesting, startCameraTest, stopCameraTest, openLocalCamera, closeLocalCamera } = useDeviceState();
 const { currentRoom } = useRoomState();
+const { localParticipant } = useRoomParticipantState();
 
 const { t } = useI18n();
 const showVideoSettingTab: Ref<boolean> = ref(false);
@@ -66,13 +67,13 @@ async function handleClickIcon() {
   emits('click-icon');
   if (!currentRoom.value) {
     if (isCameraTesting.value) {
-      await stopCameraDeviceTest();
+      await stopCameraTest();
     } else {
-      await startCameraDeviceTest({ view: 'video-preview' });
+      await startCameraTest({ view: 'video-preview' });
     }
     return;
   }
-  if (localUser.value?.cameraStatus === DeviceStatus.On) {
+  if (localParticipant.value?.cameraStatus === DeviceStatus.On) {
     await closeLocalCamera();
   } else {
     await openLocalCamera();

package/src/components/VideoSetting/VideoPreview.vue

@@ -1,31 +1,37 @@
 <template>
   <div class="video-preview-container">
-    <div id="video-preview" class="video-preview"></div>
+    <div :id="previewId" class="video-preview" />
     <div class="attention-info">
       <span
         v-if="!isCameraTesting && !isCameraTestLoading"
         class="off-camera-info"
-        >{{ t('Off Camera') }}
+      >{{ t('Off Camera') }}
       </span>
-      <IconLoading size="36" v-if="isCameraTestLoading" class="loading" />
+      <IconLoading
+        v-if="isCameraTestLoading"
+        size="36"
+        class="loading"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref, onBeforeMount } from 'vue';
 import { IconLoading } from '@tencentcloud/uikit-base-component-vue3';
 import { useI18n } from '../../locales';
-import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
 import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useI18n();
 const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
+const previewId = ref<string>('');
+
+onBeforeMount(() => {
+  previewId.value = `atomicx-video-preview-${Math.random().toString(36).substring(2, 15)}`;
+});
 
 onMounted(async () => {
-  TUIRoomEngine.once('ready', () => {
-    startCameraDeviceTest({ view: 'video-preview' });
-  });
+  await startCameraDeviceTest({ view: previewId.value });
 });
 
 onUnmounted(async () => {

package/src/components/VideoSetting/VideoProfile.vue

@@ -1,49 +1,48 @@
 <template>
-  <tui-select
+  <TUISelect
     v-model="localVideoQuality"
     placeholder="placeholder"
     class="select"
     :teleported="false"
     :popper-append-to-body="false"
   >
-    <tui-option
+    <TUIOption
       v-for="(item, index) in videoQualityList"
       :key="index"
       :label="item.label"
       :value="item.value"
     />
-  </tui-select>
+  </TUISelect>
 </template>
 
 <script setup lang="ts">
-import { watch, computed, ComputedRef } from 'vue';
-import TuiSelect from '../../baseComp/Select';
-import TuiOption from '../../baseComp/Option';
+import type { ComputedRef } from 'vue';
+import { watch, computed } from 'vue';
+import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { useI18n } from '../../locales';
-
-import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
 import { useDeviceState } from '../../states/DeviceState';
+import { VideoQuality } from '../../types';
 
 const { t } = useI18n();
 
 const videoQualityList: ComputedRef<
-  { label: string; value: TUIVideoQuality }[]
+  { label: string; value: VideoQuality }[]
 > = computed(() => [
-  { label: t('Low Definition'), value: TUIVideoQuality.kVideoQuality_360p },
+  { label: t('Low Definition'), value: VideoQuality.Quality360P },
   {
     label: t('Standard Definition'),
-    value: TUIVideoQuality.kVideoQuality_540p,
+    value: VideoQuality.Quality540P,
   },
-  { label: t('High Definition'), value: TUIVideoQuality.kVideoQuality_720p },
+  { label: t('High Definition'), value: VideoQuality.Quality720P },
   {
     label: t('Super Definition'),
-    value: TUIVideoQuality.kVideoQuality_1080p,
+    value: VideoQuality.Quality1080P,
   },
 ]);
 
 const { localVideoQuality, updateVideoQuality } = useDeviceState();
 
-watch(localVideoQuality, (val: TUIVideoQuality) => {
+watch(localVideoQuality, (val: VideoQuality) => {
   updateVideoQuality({ quality: val });
 });
 </script>
@@ -54,4 +53,3 @@ watch(localVideoQuality, (val: TUIVideoQuality) => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSetting/VideoSettingTab.vue

@@ -14,36 +14,36 @@
     </div>
     <div v-if="videoSettingProps?.supportSwitchMirror" class="mirror-container">
       <span>{{ t('Mirror') }}</span>
-      <tui-switch v-model="isLocalMirror" />
+      <TUISwitch v-model="isLocalMirror" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { watch, inject, ref } from 'vue';
-import CameraSelect from './CameraSelect.vue';
-import VideoProfile from './VideoProfile.vue';
-import VideoPreview from './VideoPreview.vue';
-import TuiSwitch from '../../baseComp/TuiSwitch.vue';
+import { TUISwitch } from '@tencentcloud/uikit-base-component-vue3';
 import { useI18n } from '../../locales';
 import { useDeviceState } from '../../states/DeviceState';
-import { VideoSettingProps } from '../../types';
 import { MirrorType } from '../../types';
+import CameraSelect from './CameraSelect.vue';
+import VideoPreview from './VideoPreview.vue';
+import VideoProfile from './VideoProfile.vue';
+import type { VideoSettingProps } from '../../types';
 
 const { t } = useI18n();
 const { switchMirror } = useDeviceState();
 
 const isLocalMirror = ref(true);
 
-const videoSettingProps: VideoSettingProps | undefined =
-  inject('videoSettingProps');
+const videoSettingProps: VideoSettingProps | undefined
+  = inject('videoSettingProps');
 
 watch(
   isLocalMirror,
   async (val: boolean) => {
     switchMirror({ mirror: val ? MirrorType.Auto : MirrorType.Disable });
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

package/src/components/VideoSettingPanel/CameraSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <TUISelect
     v-model="currentDeviceId"
-    placeholder="placeholder"
+    :placeholder="t('VideoSettingPanel.SelectCamera')"
     class="select"
     :disabled="disabled"
     :teleported="false"
@@ -18,12 +18,15 @@
 </template>
 
 <script setup lang="ts">
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
-import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import TUIRoomEngine, { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
 import { useDeviceState } from '../../states/DeviceState';
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
+const { t } = useUIKit();
+
 interface Props {
   onChange?: (id: string) => void;
   disabled?: boolean;
@@ -62,7 +65,9 @@ async function handleChange(deviceId: string) {
 }
 
 onBeforeMount(async () => {
-  await getCameraList();
+  TUIRoomEngine.once('ready', async () => {
+    await getCameraList();
+  });
 })
 </script>
 

package/src/components/VideoSettingPanel/VideoPreview.vue

@@ -8,7 +8,7 @@
       <span
         v-if="!isCameraTesting && !isCameraTestLoading"
         class="off-camera-info"
-      >{{ t('Off Camera') }}
+      >{{ t('VideoSettingPanel.OffCamera') }}
       </span>
       <IconLoading
         v-if="isCameraTestLoading"
@@ -26,16 +26,16 @@ import { IconLoading, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useUIKit();
-const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
+const { isCameraTesting, isCameraTestLoading, startCameraTest, stopCameraTest } = useDeviceState();
 
 onMounted(async () => {
   TUIRoomEngine.once('ready', () => {
-    startCameraDeviceTest({ view: 'video-preview' });
+    startCameraTest({ view: 'video-preview' });
   });
 });
 
 onUnmounted(async () => {
-  await stopCameraDeviceTest();
+  await stopCameraTest();
 });
 </script>
 

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -1,7 +1,7 @@
 <template>
   <TUISelect
     v-model="localVideoQuality"
-    placeholder="placeholder"
+    :placeholder="t('VideoSettingPanel.Resolution')"
     class="select"
     :teleported="false"
     :popper-append-to-body="false"
@@ -27,14 +27,14 @@ const { t } = useUIKit();
 const videoQualityList: ComputedRef<
   { label: string; value: VideoQuality }[]
 > = computed(() => [
-  { label: t('Low Definition'), value: VideoQuality.Quality360P },
+  { label: t('VideoSettingPanel.LowDefinition'), value: VideoQuality.Quality360P },
   {
-    label: t('Standard Definition'),
+    label: t('VideoSettingPanel.StandardDefinition'),
     value: VideoQuality.Quality540P,
   },
-  { label: t('High Definition'), value: VideoQuality.Quality720P },
+  { label: t('VideoSettingPanel.HighDefinition'), value: VideoQuality.Quality720P },
   {
-    label: t('Super Definition'),
+    label: t('VideoSettingPanel.SuperDefinition'),
     value: VideoQuality.Quality1080P,
   },
 ]);
@@ -43,7 +43,7 @@ const { localVideoQuality, updateVideoQuality } = useDeviceState();
 
 watch(localVideoQuality, (val: VideoQuality) => {
   updateVideoQuality({ quality: val });
-});
+}, { immediate: true });
 </script>
 
 <style lang="scss" scoped>

package/src/components/VideoSettingPanel/i18n/en-US/index.ts

@@ -1,12 +1,15 @@
 export const resource = {
-  'Camera': 'Camera',
-  'Select device': 'Select device',
-  'Preview': 'Preview',
-  'Video profile': 'Video profile',
-  'Resolution': 'Resolution',
-  'Low Definition': 'Low Definition',
-  'Standard Definition': 'Standard Definition',
-  'High Definition': 'High Definition',
-  'Super Definition': 'Super Definition',
-  'Off Camera': 'Off Camera',
+  VideoSettingPanel: {
+    Camera: 'Camera',
+    SelectCamera: 'Select camera',
+    Preview: 'Preview',
+    VideoProfile: 'Video profile',
+    Resolution: 'Resolution',
+    LowDefinition: 'Low Definition',
+    StandardDefinition: 'Standard Definition',
+    HighDefinition: 'High Definition',
+    SuperDefinition: 'Super Definition',
+    OffCamera: 'Off Camera',
+    Mirror: 'Mirror',
+  },
 };

package/src/components/VideoSettingPanel/i18n/zh-CN/index.ts

@@ -1,12 +1,15 @@
 export const resource = {
-  'Camera': '摄像头',
-  'Select device': '选择设备',
-  'Preview': '预览',
-  'Video profile': '视频设置',
-  'Resolution': '分辨率',
-  'Low Definition': '流畅',
-  'Standard Definition': '标清',
-  'High Definition': '高清',
-  'Super Definition': '超清',
-  'Off Camera': '摄像头已关闭',
+  VideoSettingPanel: {
+    Camera: '摄像头',
+    SelectCamera: '选择摄像头',
+    Preview: '预览',
+    VideoProfile: '视频设置',
+    Resolution: '分辨率',
+    LowDefinition: '流畅',
+    StandardDefinition: '标清',
+    HighDefinition: '高清',
+    SuperDefinition: '超清',
+    OffCamera: '摄像头已关闭',
+    Mirror: '镜像',
+  },
 };

package/src/components/VideoSettingPanel/index.ts

@@ -1,10 +1,10 @@
-import VideoSettingPanelPC from './index.vue';
 import { addI18n } from '../../i18n';
 import { enResource, zhResource } from './i18n';
+import VideoSettingPanelComp from './index.vue';
 
 addI18n('en-US', { translation: enResource });
 addI18n('zh-CN', { translation: zhResource });
 
-const VideoSettingPanel = VideoSettingPanelPC;
+const VideoSettingPanel = VideoSettingPanelComp;
 
 export { VideoSettingPanel };