tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/src/components/StreamMixer/LocalMixer/MixerControl.vue

@@ -1,15 +1,22 @@
 <template>
-  <div class="mixer-control" @mousedown="handleMouseDown">
+  <div
+    class="mixer-control"
+    @mousedown="handleMouseDown"
+  >
     <div
-      class="mixer-control-item"
       v-for="control in controlList"
-      :class="{ 'disable': control.disable }"
       :key="control.name"
+      class="mixer-control-item"
+      :class="{ 'disable': control.disable }"
       :style="control.style"
       @click.stop="control.onClick"
     >
       <div class="mixer-control-item-icon">
-        <component :is="control.icon" style="width: 100%; height: 100%" :style="control.style" />
+        <component
+          :is="control.icon"
+          style="width: 100%; height: 100%"
+          :style="control.style"
+        />
       </div>
       <span class="mixer-control-item-name">{{ control.text }}</span>
     </div>
@@ -17,16 +24,16 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { TRTCVideoMirrorType, TRTCVideoRotation } from '@tencentcloud/tuiroom-engine-js';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useVideoMixerState } from '../../../states/VideoMixerState';
 import CameraMirror from '../icons/CameraMirror.vue';
 import Delete from '../icons/Delete.vue';
+import Down from '../icons/Down.vue';
 import Rotation from '../icons/Rotation.vue';
 import Up from '../icons/Up.vue';
-import Down from '../icons/Down.vue';
-import { useVideoMixerState } from '../../../states/VideoMixerState';
-import { TRTCVideoMirrorType, TRTCVideoRotation } from '@tencentcloud/tuiroom-engine-js';
-import { computed, reactive } from 'vue';
-import { MediaSource } from '../../../types';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import type { MediaSource } from '../../../types';
 
 const { activeMediaSource, mediaSourceList, updateMediaSource, removeMediaSource } = useVideoMixerState();
 const { t } = useUIKit();
@@ -35,12 +42,10 @@ function handleMouseDown(event: Event) {
   event.stopPropagation();
 }
 
-const orderMediaSourceList = computed(() => {
-  return [...mediaSourceList.value].sort((a: MediaSource, b: MediaSource) => a.layout.zOrder - b.layout.zOrder);
-});
+const orderMediaSourceList = computed(() => [...mediaSourceList.value].sort((a: MediaSource, b: MediaSource) => a.layout.zOrder - b.layout.zOrder));
 
-const isActiveMediaSourceTop = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[0].id);
-const isActiveMediaSourceBottom = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[orderMediaSourceList.value.length - 1].id);
+const isActiveMediaSourceTop = computed(() => activeMediaSource.value?.id === orderMediaSourceList.value[0]?.id);
+const isActiveMediaSourceBottom = computed(() => activeMediaSource.value?.id === orderMediaSourceList.value[orderMediaSourceList.value.length - 1]?.id);
 
 const controlList = computed(() => [
   {

package/src/components/StreamMixer/LocalMixer/index.vue

@@ -1,37 +1,51 @@
 <template>
-  <div class="local-mixer-container" ref="localMixerRef">
-    <div class="local-mixer-content" id="local-video-mixer"></div>
-    <div class="mixer-control-container" v-if="activeMediaSource" :style="mixControlContainerStyle">
-      <MixerControl class="mixer-control" :style="mixControlStyle" />
-    </div>
-    <div class="local-mixer-placeholder" v-if="mediaSourceList.length === 0">
+  <div
+    ref="localMixerRef"
+    class="local-mixer-container"
+  >
+    <div
+      id="local-video-mixer"
+      class="local-mixer-content"
+    />
+    <MixerControl
+      v-if="activeMediaSource"
+      ref="mixControlRef"
+      class="mixer-control"
+      :style="mixControlStyle"
+    />
+    <div
+      v-if="mediaSourceList.length === 0"
+      class="local-mixer-placeholder"
+    >
       <span class="placeholder-text">{{ t('No video') }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, onUnmounted, Ref, computed } from 'vue';
-import { useRoomEngine } from '../../../hooks/useRoomEngine';
-import { useVideoMixerState } from '../../../states/VideoMixerState';
+import type { Ref } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount, computed, nextTick } from 'vue';
 import TUIRoomEngine, {
   TRTCVideoResolutionMode,
   TRTCVideoRotation,
   TUIVideoQuality,
 } from '@tencentcloud/tuiroom-engine-js';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomEngine } from '../../../hooks/useRoomEngine';
 import { useLiveState } from '../../../states/LiveState';
+import { useVideoMixerState } from '../../../states/VideoMixerState';
 import { LiveStatus, LiveOrientation } from '../../../types';
+import { debounce } from '../../../utils/utils';
 import MixerControl from './MixerControl.vue';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 const { t } = useUIKit();
 
 const { currentLive } = useLiveState();
 
+const mixControlRef = ref<InstanceType<typeof MixerControl> | null>(null);
 const { publishVideoQuality, activeMediaSource, enableLocalVideoMixer, mediaSourceList } = useVideoMixerState();
 enableLocalVideoMixer();
 
-
 const currentLiveOrientation = computed(() => {
   if (currentLive.value
     && currentLive.value?.layoutTemplate >= 200 && currentLive.value?.layoutTemplate <= 599) {
@@ -47,7 +61,7 @@ const localMixerRef = ref();
 
 function getCanvasSize(
   videoResolution: TUIVideoQuality,
-  resMode: TRTCVideoResolutionMode
+  resMode: TRTCVideoResolutionMode,
 ): { width: number; height: number } {
   const sizeMap = {
     [TUIVideoQuality.kVideoQuality_360p]: { width: 640, height: 360 },
@@ -62,28 +76,30 @@ function getCanvasSize(
   return { width, height };
 }
 
-const mixControlContainerStyle = ref({
-  top: '0px',
-  left: '0px',
-  width: '0px',
-  height: '0px',
+const mixControlStyle: Ref<{
+  transform: string;
+  position: string;
+}> = ref({
+  position: 'absolute',
+  transform: 'translate(0px, 0px)',
 });
 
-const mixControlStyle: Ref<{ top?: string; bottom?: string; transform: string }> = ref({
-  top: '-6px',
-  transform: 'translate(-50%, -100%)',
-});
+let mixControlWidth: number;
+let mixControlHeight: number;
+// margin between control and media source
+const CONTROL_MARGIN_WITH_MEDIA_SOURCE = 6;
 
 function getMixControlStyle() {
   if (!localMixerRef.value || !activeMediaSource.value) {
     return;
   }
+
   const { width: canvasWidth, height: canvasHeight } = getCanvasSize(
     publishVideoQuality.value,
-    currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait
+    currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait,
   );
-  const { width: realWidth, height: realHeight } = localMixerRef.value.getBoundingClientRect();
-  const scale = Math.max(realWidth / canvasWidth, realHeight / canvasHeight);
+  const { width: viewportWidth, height: viewportHeight } = localMixerRef.value.getBoundingClientRect();
+  const scale = Math.max(viewportWidth / canvasWidth, viewportHeight / canvasHeight);
 
   const previewWidth = canvasWidth * scale;
   const previewHeight = canvasHeight * scale;
@@ -92,67 +108,130 @@ function getMixControlStyle() {
   const mediaSourceWidth = right - left;
   const mediaSourceHeight = bottom - top;
   const rotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
+
+  const mediaSourceTop = top * scale - (previewHeight - viewportHeight) / 2;
+  const mediaSourceLeft = left * scale - (previewWidth - viewportWidth) / 2;
+  let mediaSourceDisplayWidth;
+  let mediaSourceDisplayHeight;
+
   if (rotation === TRTCVideoRotation.TRTCVideoRotation0 || rotation === TRTCVideoRotation.TRTCVideoRotation180) {
-    mixControlContainerStyle.value = {
-      top: `${top * scale - (previewHeight - realHeight) / 2}px`,
-      left: `${left * scale - (previewWidth - realWidth) / 2}px`,
-      width: `${mediaSourceWidth * scale}px`,
-      height: `${mediaSourceHeight * scale}px`,
-    };
+    mediaSourceDisplayWidth = mediaSourceWidth * scale;
+    mediaSourceDisplayHeight = mediaSourceHeight * scale;
   } else {
-    mixControlContainerStyle.value = {
-      top: `${top * scale - (previewHeight - realHeight) / 2}px`,
-      left: `${left * scale - (previewWidth - realWidth) / 2}px`,
-      width: `${mediaSourceHeight * scale}px`,
-      height: `${mediaSourceWidth * scale}px`,
-    };
+    mediaSourceDisplayWidth = mediaSourceHeight * scale;
+    mediaSourceDisplayHeight = mediaSourceWidth * scale;
+  }
+
+  const controlPosition = calculateOptimalControlPosition(
+    mediaSourceLeft,
+    mediaSourceTop,
+    mediaSourceDisplayWidth,
+    mediaSourceDisplayHeight,
+    viewportWidth,
+    viewportHeight,
+  );
+
+  mixControlStyle.value = {
+    ...controlPosition,
+    position: 'absolute',
+  };
+}
+
+function calculateOptimalControlPosition(
+  mediaSourceLeft: number,
+  mediaSourceTop: number,
+  mediaSourceWidth: number,
+  mediaSourceHeight: number,
+  viewportWidth: number,
+  viewportHeight: number,
+) {
+  // media source boundary
+  const mediaSourceBottom = mediaSourceTop + mediaSourceHeight;
+  const mediaSourceCenterX = mediaSourceLeft + mediaSourceWidth / 2;
+
+  // ideal position
+  let controlLeft = mediaSourceCenterX - mixControlWidth / 2;
+  let controlTop = mediaSourceTop - CONTROL_MARGIN_WITH_MEDIA_SOURCE - mixControlHeight;
+
+  // horizontal boundary detection and adjustment
+  if (controlLeft < 0) {
+    controlLeft = 0;
+  } else if (controlLeft + mixControlWidth > viewportWidth) {
+    controlLeft = viewportWidth - mixControlWidth;
   }
-  if (top < 60) {
-    mixControlStyle.value = {
-      bottom: '-6px',
-      transform: 'translate(-50%, 100%)',
-    };
+
+  // vertical boundary detection and adjustment
+  // check if there is enough space to display the control above
+  const topSpaceAvailable = mediaSourceTop;
+  const bottomSpaceAvailable = viewportHeight - mediaSourceBottom;
+
+  if (controlTop >= 0 && topSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
+    // top space is enough, keep it above
+    controlTop = Math.min(controlTop, viewportHeight - mixControlHeight);
+  } else if (bottomSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
+    // top space is not enough, but bottom space is enough, move to bottom
+    controlTop = Math.max(0, mediaSourceBottom + CONTROL_MARGIN_WITH_MEDIA_SOURCE);
   } else {
-    mixControlStyle.value = {
-      top: '-6px',
-      transform: 'translate(-50%, -100%)',
-    };
+    // top space is not enough, but bottom space is not enough, move to top
+    controlTop = Math.max(0, mediaSourceTop - mixControlHeight - CONTROL_MARGIN_WITH_MEDIA_SOURCE);
   }
+
+  return {
+    transform: `translate(${controlLeft}px, ${controlTop}px)`,
+  };
 }
 
+const debouncedGetMixControlStyle = debounce(getMixControlStyle, 16);
+
+watch(() => activeMediaSource.value, async (newVal, oldVal) => {
+  if (!oldVal && newVal) {
+    await nextTick();
+    const mixControlElement = mixControlRef.value?.$el as HTMLElement;
+    const { width, height } = mixControlElement?.getBoundingClientRect() || { width: 0, height: 0 };
+    mixControlWidth = width;
+    mixControlHeight = height;
+  }
+  getMixControlStyle();
+}, { immediate: true, deep: true });
+
 watch(
-  () => [publishVideoQuality.value, currentLiveOrientation.value, activeMediaSource.value?.layout],
-  ([newVideoQuality, newOrientation, newLayout]) => {
-    if (!newVideoQuality || !newOrientation || !newLayout) {
+  () => [publishVideoQuality.value, currentLiveOrientation.value],
+  ([newVideoQuality, newOrientation]) => {
+    if (!newVideoQuality || !newOrientation) {
       return;
     }
     getMixControlStyle();
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 
 const re = new ResizeObserver(() => {
-  getMixControlStyle();
+  debouncedGetMixControlStyle();
 });
 
 onMounted(() => {
   re.observe(localMixerRef.value);
   TUIRoomEngine.once('ready', async () => {
     const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-    await mediaSourceManager.setDisplayParams(document.getElementById('local-video-mixer') as HTMLElement);
+    await mediaSourceManager.bindPreviewArea(document.getElementById('local-video-mixer') as HTMLElement);
     getMixControlStyle();
   });
 
-  watch(localLiveStatus, async newVal => {
+  watch(localLiveStatus, async (newVal) => {
+    const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
     if (newVal === LiveStatus.Live) {
-      const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
       await mediaSourceManager?.startPublish();
     }
+    if (newVal === LiveStatus.IDLE) {
+      await mediaSourceManager?.stopPublish();
+    }
   });
 });
 
-onUnmounted(() => {
+onBeforeUnmount(async () => {
   re.unobserve(localMixerRef.value);
+  const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
+  await mediaSourceManager?.destroy();
 });
 </script>
 
@@ -169,14 +248,13 @@ onUnmounted(() => {
     width: 100%;
     height: 100%;
   }
-  .mixer-control-container {
+  .mixer-control {
     position: absolute;
-    pointer-events: none;
-    .mixer-control {
-      position: absolute;
-      left: 50%;
-    }
+    top: 0;
+    left: 0;
+    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
+
   .local-mixer-placeholder {
     position: absolute;
     top: 0;

package/src/components/StreamMixer/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <live-stream-view :ignore-local-video="true">
+  <live-core-view :ignore-local-video="true">
     <template #localVideo="{ style }">
       <local-mixer :style="style" />
     </template>
-  </live-stream-view>
+  </live-core-view>
 </template>
 
 <script setup lang="ts">
+import { LiveCoreView } from '../LiveCoreView';
 import LocalMixer from './LocalMixer/index.vue';
-import { LiveStreamView } from '../LiveStreamView';
 </script>
 
 <style scoped lang="scss"></style>

package/src/components/StreamView/manager/mediaManager.ts

@@ -250,7 +250,7 @@ export class MediaManager {
       if (streamType === TUIVideoStreamType.kCameraStream) {
         if (isVideoMixerEnabled.value) {
           const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-          mediaSourceManager.setDisplayParams(document.getElementById(viewIdList[0]) as HTMLElement);
+          mediaSourceManager.bindPreviewArea(document.getElementById(viewIdList[0]) as HTMLElement);
           // const publishParams = {
           //   videoEncoderParams: {
           //     videoResolution: TRTCVideoResolution.TRTCVideoResolution_1280_720,

package/src/components/UserPicker/UserPicker.vue

@@ -21,7 +21,7 @@
       </div>
       <ListMode
         v-else-if="!isTreeMode"
-        :data-source="searchManager.filteredData.value as IUserPickerRow<any>[]"
+        :data-source="searchManager.filteredData.value as UserPickerRow<any>[]"
         :selected-keys="selectionManager.selectedKeys.value"
         :locked-keys="selectionManager.lockedKeys.value"
         :on-item-click="selectionManager.toggle"
@@ -30,7 +30,7 @@
       />
       <TreeMode
         v-else
-        :data-source="searchManager.filteredData.value as IUserPickerNode<any>[]"
+        :data-source="searchManager.filteredData.value as UserPickerNode<any>[]"
         :selected-keys="selectionManager.selectedKeys.value"
         :half-selected-keys="selectionManager.halfSelectedKeys.value"
         :locked-keys="selectionManager.lockedKeys.value"
@@ -64,10 +64,7 @@ import TreeMode from './components/TreeMode';
 import { useSearchFilter } from './hooks/useSearchFilter';
 import { useSelection } from './hooks/useSelection';
 import { useTreeState } from './hooks/useTreeState';
-import type { IUserPickerProps, IUserPickerRef, IUserPickerNode, IUserPickerRow } from './type';
-
-// Define type for props (without generics for Vue3 compatibility)
-type UserPickerProps = IUserPickerProps<any>;
+import type { UserPickerProps, UserPickerRef, UserPickerNode, UserPickerRow } from './type';
 
 const props = withDefaults(defineProps<UserPickerProps>(), {
   dataSource: () => [],
@@ -129,7 +126,7 @@ watch(
 );
 
 // Generic node update function - can update any properties of a node
-const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+const updateNodeByKey = (nodeKey: string, partialNode: Partial<UserPickerNode<any>>) => {
   if (!isTreeMode.value) {
     return;
   }
@@ -187,7 +184,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
 };
 
 // Implement methods exposed by ref
-const refMethods: IUserPickerRef<any> = {
+const refMethods: UserPickerRef<any> = {
   getSelectedItems: () => selectionManager.getSelectedItems(),
   updateListData: (newDataSource: any[]) => {
     // Update list data
@@ -195,7 +192,7 @@ const refMethods: IUserPickerRef<any> = {
       internalDataSource.value = newDataSource;
     }
   },
-  updateTreeData: (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+  updateTreeData: (nodeKey: string, partialNode: Partial<UserPickerNode<any>>) => {
     // Use generic update function
     updateNodeByKey(nodeKey, partialNode);
   },

package/src/components/UserPicker/components/ListMode/ListMode.vue

@@ -27,10 +27,7 @@
         <!-- Checkbox -->
         <div :class="$style['list__checkbox-wrapper']">
           <div :class="[$style.list__checkbox, { [$style['list__checkbox--checked']]: isSelected(item.key) }]">
-            <IconCheckSm
-              v-if="isSelected(item.key)"
-              name="check"
-            />
+            <IconCheckSm v-if="isSelected(item.key)" />
           </div>
         </div>
 
@@ -61,10 +58,10 @@
 import { defineProps } from 'vue';
 import { useUIKit, IconCheckSm } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../../../Avatar';
-import type { IUserPickerRow } from '../../type';
+import type { UserPickerRow } from '../../type';
 
 interface ListModeProps<T = unknown> {
-  dataSource: IUserPickerRow<T>[];
+  dataSource: UserPickerRow<T>[];
   selectedKeys: Set<string>;
   lockedKeys: Set<string>;
   onItemClick: (key: string) => void;
@@ -150,7 +147,6 @@ const handleScroll = (e: Event) => {
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
-    color: #fff;
     border: 2px solid #d9d9d9;
 
     &--checked {

package/src/components/UserPicker/components/SelectedPanel/SelectedPanel.vue

@@ -48,13 +48,13 @@
 import { defineProps, computed, withDefaults } from 'vue';
 import { IconClose, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../../../Avatar';
-import type { IUserPickerResult } from '../../type';
+import type { UserPickerResult } from '../../type';
 
 const { t } = useUIKit();
 
 interface SelectedPanelProps {
   displayMode: 'list' | 'tree';
-  selectedItems: IUserPickerResult;
+  selectedItems: UserPickerResult;
   lockedKeys: Set<string>;
   onRemove: (key: string) => void;
   maxCount?: number;

package/src/components/UserPicker/components/TreeMode/TreeMode.vue

@@ -21,17 +21,17 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import TreeNode from './TreeNode.vue';
-import type { IUserPickerNode } from '../../type';
+import type { UserPickerNode } from '../../type';
 
 interface TreeModeProps<T = unknown> {
-  dataSource: IUserPickerNode<T>[];
+  dataSource: UserPickerNode<T>[];
   selectedKeys: Set<string>;
   halfSelectedKeys: Set<string>;
   lockedKeys: Set<string>;
   expandedKeys: Set<string>;
   loadingKeys: Set<string>;
   onItemClick: (key: string) => void;
-  onExpand: (node: IUserPickerNode<T>) => void;
+  onExpand: (node: UserPickerNode<T>) => void;
   renderItem?: any; // Vue component or render function
 }
 

package/src/components/UserPicker/components/TreeMode/TreeNode.vue

@@ -88,10 +88,10 @@
 import { defineProps, defineEmits, computed } from 'vue';
 import { IconArrowDown, IconCheckSm, IconLoading } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../../../Avatar';
-import type { IUserPickerNode } from '../../type';
+import type { UserPickerNode } from '../../type';
 
 interface TreeNodeProps<T = unknown> {
-  node: IUserPickerNode<T>;
+  node: UserPickerNode<T>;
   level: number;
   selectedKeys: Set<string>;
   halfSelectedKeys: Set<string>;
@@ -105,7 +105,7 @@ const props = defineProps<TreeNodeProps>();
 
 const emit = defineEmits<{
   'item-click': [key: string];
-  expand: [node: IUserPickerNode<any>];
+  expand: [node: UserPickerNode<any>];
 }>();
 
 const isSelected = computed(() => props.selectedKeys.has(props.node.key));

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

@@ -1,8 +1,9 @@
-import { ref, computed, type Ref } from 'vue';
-import type { IUserPickerDataSource, IUserPickerNode, IUserPickerRow } from '../type';
+import { ref, computed } from 'vue';
+import type { Ref } from 'vue';
+import type { UserPickerDataSource, UserPickerNode, UserPickerRow } from '../type';
 
 interface UseSearchFilterOptions<T = unknown> {
-  dataSource: Ref<IUserPickerDataSource<T>>;
+  dataSource: Ref<UserPickerDataSource<T>>;
   isTreeMode?: boolean;
   onSearch?: (value: string) => void;
   debounceTime?: number;
@@ -11,7 +12,7 @@ interface UseSearchFilterOptions<T = unknown> {
 interface UseSearchFilterReturn<T = unknown> {
   searchValue: Ref<string>;
   setSearchValue: (value: string) => void;
-  filteredData: Ref<IUserPickerDataSource<T>>;
+  filteredData: Ref<UserPickerDataSource<T>>;
   isSearching: Ref<boolean>;
   handleSearch: (value: string) => void;
   clearSearch: () => void;
@@ -19,7 +20,7 @@ interface UseSearchFilterReturn<T = unknown> {
 }
 
 // Check if it's tree data structure
-function isTreeDataSource<T>(data: IUserPickerDataSource<T>): data is Array<IUserPickerNode<T>> {
+function isTreeDataSource<T>(data: UserPickerDataSource<T>): data is Array<UserPickerNode<T>> {
   if (data.length === 0) {
     return false;
   }
@@ -27,22 +28,22 @@ function isTreeDataSource<T>(data: IUserPickerDataSource<T>): data is Array<IUse
 }
 
 // Search tree structure
-function searchTreeNodes<T>(nodes: Array<IUserPickerNode<T>>, searchValue: string): Array<IUserPickerNode<T>> {
+function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string): Array<UserPickerNode<T>> {
   if (!searchValue.trim()) {
     return nodes;
   }
 
   // Helper function: check if node matches
-  const isNodeMatched = (node: IUserPickerNode<T>): boolean =>
+  const isNodeMatched = (node: UserPickerNode<T>): boolean =>
     node.label.toLowerCase().includes(searchValue.toLowerCase());
 
   // Helper function: recursively search nodes
-  const searchNodes = (nodesList: Array<IUserPickerNode<T>>): Array<IUserPickerNode<T>> => {
-    const matchedNodes: Array<IUserPickerNode<T>> = [];
+  const searchNodes = (nodesList: Array<UserPickerNode<T>>): Array<UserPickerNode<T>> => {
+    const matchedNodes: Array<UserPickerNode<T>> = [];
 
     nodesList.forEach(node => {
       const isMatched = isNodeMatched(node);
-      let matchedChildren: Array<IUserPickerNode<T>> = [];
+      let matchedChildren: Array<UserPickerNode<T>> = [];
 
       if (node.children && node.children.length) {
         matchedChildren = searchNodes(node.children);
@@ -53,7 +54,7 @@ function searchTreeNodes<T>(nodes: Array<IUserPickerNode<T>>, searchValue: strin
         matchedNodes.push({
           ...node,
           children: matchedChildren.length > 0 ? matchedChildren : node.children,
-        } as IUserPickerNode<T>);
+        } as UserPickerNode<T>);
       }
     });
 
@@ -64,7 +65,7 @@ function searchTreeNodes<T>(nodes: Array<IUserPickerNode<T>>, searchValue: strin
 }
 
 // Search list structure
-function searchListItems<T>(items: Array<IUserPickerRow<T>>, searchValue: string): Array<IUserPickerRow<T>> {
+function searchListItems<T>(items: Array<UserPickerRow<T>>, searchValue: string): Array<UserPickerRow<T>> {
   if (!searchValue.trim()) {
     return items;
   }
@@ -89,9 +90,9 @@ export function useSearchFilter<T = unknown>({
     }
 
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return searchTreeNodes(dataSource.value as Array<IUserPickerNode<T>>, searchValue.value);
+      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, searchValue.value);
     }
-    return searchListItems(dataSource.value as Array<IUserPickerRow<T>>, searchValue.value);
+    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, searchValue.value);
   });
 
   // Handle search input