tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/src/components/Search/SearchAdvanced/SearchAdvanced.vue

@@ -58,5 +58,5 @@ const handleUserAdvancedChange = (params: Map<SearchType, any>) => {
 </script>
 
 <style lang="scss" module>
-@import './SearchAdvanced.scss';
+@use './SearchAdvanced.scss';
 </style>

package/src/components/Search/SearchAdvanced/SearchTab/SearchTab.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchTab {
   position: sticky;
   top: 0;
@@ -37,4 +34,4 @@
       font-weight: 500;
     }
   }
-} 
+}

package/src/components/Search/SearchAdvanced/SearchTab/SearchTab.vue

@@ -53,5 +53,5 @@ const handleTabClick = (tabKey: SearchTabType) => {
 </script>
 
 <style lang="scss" module>
-@import './SearchTab.scss';
+@use './SearchTab.scss';
 </style>

package/src/components/Search/SearchAdvanced/Slider/Slider.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchSlider {
   width: 100%;
   padding: 8px 0;
@@ -44,4 +41,4 @@
       transform: translate(-50%, -50%) scale(1.2);
     }
   }
-} 
+}

package/src/components/Search/SearchAdvanced/Slider/Slider.vue

@@ -78,5 +78,5 @@ const handleStart = (type: 'min' | 'max', e: MouseEvent | TouchEvent) => {
 </script>
 
 <style lang="scss" module>
-@import './Slider.scss';
+@use './Slider.scss';
 </style>

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchUserAdvanced {
   padding: 10px 20px;
   background-color: var(--bg-color-operate);
@@ -306,4 +303,4 @@
   cursor: pointer;
   background: var(--text-color-link);
   color: #fff;
-} 
+}

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.vue

@@ -378,5 +378,5 @@ const getGenderText = (gender: string) => {
 </script>
 
 <style lang="scss" module>
-@import './UserAdvanced.scss';
+@use './UserAdvanced.scss';
 </style>

package/src/components/Search/SearchBar/SearchBar.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchBar {
   display: flex;
   align-items: center;
@@ -27,7 +24,7 @@
 
     .tui-input {
       width: 100%;
-      
+
       .tui-input__native-input {
         height: 40px;
         padding: 8px 12px 8px 40px;
@@ -91,7 +88,7 @@
 
     .clearIcon {
       color: var(--text-color-disabled);
-      
+
       &:hover {
         color: var(--text-color-secondary);
       }
@@ -117,4 +114,4 @@
   &--h5 {
     padding: 10px;
   }
-} 
+}

package/src/components/Search/SearchBar/SearchBar.vue

@@ -128,5 +128,5 @@ const handleClear = () => {
 </script>
 
 <style lang="scss" module>
-@import './SearchBar.scss';
+@use './SearchBar.scss';
 </style>

package/src/components/Search/SearchResults/EmptyResult/EmptyResult.vue

@@ -28,5 +28,5 @@ const text = computed(() => props.text || t('Search.status.noContent'));
 </script>
 
 <style lang="scss" module>
-@import './EmptyResult.scss';
+@use './EmptyResult.scss';
 </style>

package/src/components/Search/SearchResults/Loading/Loading.vue

@@ -13,5 +13,5 @@ const props = defineProps<ILoadingProps>();
 </script>
 
 <style lang="scss" module>
-@import './Loading.scss';
+@use './Loading.scss';
 </style>

package/src/components/Search/SearchResults/SearchResults.vue

@@ -396,5 +396,5 @@ const generateKey = (type: SearchType, item: SearchResultItemType, index: number
 </script>
 
 <style lang="scss" module>
-@import './SearchResults.scss';
+@use './SearchResults.scss';
 </style>

package/src/components/Search/SearchResults/SearchResultsItem/Conversation/Conversation.vue

@@ -54,5 +54,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './Conversation.scss';
+@use './Conversation.scss';
 </style>

package/src/components/Search/SearchResults/SearchResultsItem/Group/Group.vue

@@ -35,5 +35,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './Group.scss';
+@use './Group.scss';
 </style>

package/src/components/Search/SearchResults/SearchResultsItem/Message/Message.vue

@@ -259,5 +259,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './Message.scss';
+@use './Message.scss';
 </style>

package/src/components/Search/SearchResults/SearchResultsItem/SearchResultsItem.vue

@@ -59,5 +59,5 @@ const props = withDefaults(defineProps<ISearchResultsItemProps>(), {
 </script>
 
 <style lang="scss" module>
-@import './SearchResultsItem.scss';
+@use './SearchResultsItem.scss';
 </style>

package/src/components/Search/SearchResults/SearchResultsItem/User/User.vue

@@ -68,5 +68,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './User.scss';
+@use './User.scss';
 </style>

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

@@ -210,8 +210,13 @@ const re = new ResizeObserver(() => {
 onMounted(() => {
   re.observe(localMixerRef.value);
   TUIRoomEngine.once('ready', async () => {
+    const mixerView = document.getElementById('local-video-mixer');
+    if (!mixerView) {
+      return;
+    }
+
     const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-    await mediaSourceManager.bindPreviewArea(document.getElementById('local-video-mixer') as HTMLElement);
+    await mediaSourceManager.bindPreviewArea(mixerView as HTMLElement);
     getMixControlStyle();
   });
 

package/src/components/StreamMixer/index.ts

@@ -1,7 +1,10 @@
-import StreamMixer from './index.vue';
 import { addI18n } from '../../i18n';
 import { enUSResource, zhCNResource } from './i18n';
+import StreamMixerComp from './index.vue';
+
 addI18n('en-US', { translation: enUSResource });
 addI18n('zh-CN', { translation: zhCNResource });
 
+const StreamMixer = StreamMixerComp;
+
 export { StreamMixer };

package/src/components/StreamView/Layout/CustomLayout.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="custom-layout-container" ref="streamListContainerRef">
-    <div class="stream-list" ref="streamListRef" :style="streamListStyle">
+  <div ref="streamListContainerRef" class="custom-layout-container">
+    <div
+      ref="streamListRef"
+      class="stream-list"
+      :style="streamListStyle"
+    >
       <StreamRegion
         v-for="(renderUserInfo, index) in renderUserInfoList"
-        class="stream-list-item"
         :key="`${renderUserInfo.userInfo.userId}_${renderUserInfo.streamType}`"
+        class="stream-list-item"
         :userInfo="renderUserInfo.userInfo"
         :stream-type="renderUserInfo.streamType"
         :style="getStreamStyle(index)"
@@ -12,7 +16,7 @@
         @stream-view-dblclick="handleStreamDblClick"
       >
         <template #streamViewUI="slotProps">
-          <slot name="streamViewUI" v-bind="slotProps"></slot>
+          <slot name="streamViewUI" v-bind="slotProps" />
         </template>
       </StreamRegion>
     </div>
@@ -22,13 +26,13 @@
 <script setup lang="ts">
 import { defineProps, ref, computed, onMounted, onBeforeUnmount, defineEmits, watch, withDefaults } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
-import StreamRegion from '../common/StreamRegion';
-import { UserInfo } from '../../../types';
-import useUserState from '../../../states/UserState/index';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import { useRoomState } from '../../../states/RoomState';
-import useLoginState from '../../../states/LoginState';
 import { useLiveListState } from '../../../states/LiveListState';
+import useLoginState from '../../../states/LoginState';
+import { useRoomState } from '../../../states/RoomState';
+import useUserState from '../../../states/UserState/index';
+import StreamRegion from '../common/StreamRegion';
+import type { UserInfo } from '../../../types';
 
 const { userList, localUser, userListOnSeat } = useUserState();
 const { currentRoom } = useRoomState();
@@ -98,17 +102,17 @@ const renderUserInfoList: ComputedRef<{ userInfo: UserInfo; streamType: TUIVideo
   // }
   // return videoUserList;
 
-  if (!totalUserList.value || totalUserList.value.length === 0) return [];
+  if (!totalUserList.value || totalUserList.value.length === 0) {
+    return [];
+  }
 
   return totalUserList.value
     ?.filter(props.filterFn)
     .sort(props.sortFn)
-    .map(item => {
-      return {
-        userInfo: item,
-        streamType: TUIVideoStreamType.kCameraStream,
-      };
-    });
+    .map(item => ({
+      userInfo: item,
+      streamType: TUIVideoStreamType.kCameraStream,
+    }));
 });
 
 const streamListContainerRef = ref();
@@ -116,9 +120,7 @@ const streamListRef = ref();
 
 // ------------ 处理 layout 布局 START ------------
 
-const aspectRatio = computed(() => {
-  return '16:9';
-});
+const aspectRatio = computed(() => '16:9');
 
 // Single video stream window margin size
 // 根据 streamView 的父亲元素 A 大小获取一个流布局的容器 B，容器 B 符合 aspectRatio 比例
@@ -135,20 +137,20 @@ const originStreamListStyle: Ref<Record<string, any>> = ref({
   scale: 1,
 });
 
-const streamListStyle = computed(() => {
-  return {
-    width: `${originStreamListStyle.value.width * originStreamListStyle.value.scale}px`,
-    height: `${originStreamListStyle.value.height * originStreamListStyle.value.scale}px`,
-    transform: `translate(${originStreamListStyle.value.transformX * originStreamListStyle.value.scale}px, ${
-      originStreamListStyle.value.transformY * originStreamListStyle.value.scale
-    }px)`,
-  };
-});
+const streamListStyle = computed(() => ({
+  width: `${originStreamListStyle.value.width * originStreamListStyle.value.scale}px`,
+  height: `${originStreamListStyle.value.height * originStreamListStyle.value.scale}px`,
+  transform: `translate(${originStreamListStyle.value.transformX * originStreamListStyle.value.scale}px, ${
+    originStreamListStyle.value.transformY * originStreamListStyle.value.scale
+  }px)`,
+}));
 
 const customConfig = computed(() => {
   const { layoutList } = JSON.parse(props.config);
-  if (!layoutList) return [];
-  const absoluteLayoutList = layoutList.map(item => {
+  if (!layoutList) {
+    return [];
+  }
+  const absoluteLayoutList = layoutList.map((item) => {
     if (item.width > 1 || item.height > 1) {
       return {
         left: stringToNumber(originStreamListStyle.value.width) * (item.x / 720),
@@ -200,10 +202,10 @@ function handleStreamListTransform() {
   const scaleHeight = containerHeight / streamContainerSize.value.height;
   originStreamListStyle.value.scale = Math.min(scaleWidth, scaleHeight);
 
-  originStreamListStyle.value.transformX =
-    stringToNumber(originStreamListStyle.value.width) / 2 - streamContainerSize.value.centerX;
-  originStreamListStyle.value.transformY =
-    stringToNumber(originStreamListStyle.value.height) / 2 - streamContainerSize.value.centerY;
+  originStreamListStyle.value.transformX
+    = stringToNumber(originStreamListStyle.value.width) / 2 - streamContainerSize.value.centerX;
+  originStreamListStyle.value.transformY
+    = stringToNumber(originStreamListStyle.value.height) / 2 - streamContainerSize.value.centerY;
 }
 
 const widthRatio: ComputedRef<number> = computed(() => {
@@ -252,7 +254,9 @@ function stringToNumber(str: string) {
 
 function getStreamStyle(index: number) {
   const streamLayoutConfig = JSON.parse(props.config).layoutList[index];
-  if (!streamLayoutConfig) return;
+  if (!streamLayoutConfig) {
+    return;
+  }
   // Todo: 暂时兼容绝对值和百分比，后续需要统一
   if (streamLayoutConfig?.width > 1) {
     return {
@@ -281,7 +285,7 @@ watch(
   () => currentLive.value?.layoutTemplate,
   () => {
     handleLayout();
-  }
+  },
 );
 
 const resizeObserver = new ResizeObserver(() => {

package/src/components/StreamView/Layout/GridLayout.vue

@@ -8,15 +8,15 @@
     }"
   >
     <div
-      class="stream-list"
       ref="streamListRef"
+      class="stream-list"
       :style="streamListStyle"
       @wheel="handleWheel"
     >
       <StreamRegion
         v-for="renderUserInfo in renderUserInfoList"
-        class="stream-list-item"
         :key="`${renderUserInfo.userInfo.userId}_${renderUserInfo.streamType}`"
+        class="stream-list-item"
         :userInfo="renderUserInfo.userInfo"
         :stream-type="renderUserInfo.streamType"
         :style="streamStyle"
@@ -42,23 +42,22 @@ import {
   nextTick,
 } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
-import StreamRegion from '../common/StreamRegion';
-import { getContentSize } from '../../../utils/domOperation';
-import { UserInfo, LocalRoomStatus } from '../../../types';
-import useUserState from '../../../states/UserState/index';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import { safelyParse } from '../../../utils/utils';
-import { useRoomState } from '../../../states/RoomState';
 import { useDeviceState } from '../../../states/DeviceState';
 import useLoginState from '../../../states/LoginState';
+import { useRoomState } from '../../../states/RoomState';
+import useUserState from '../../../states/UserState/index';
 import { getNewUserInfo } from '../../../states/UserState/store';
+import { getContentSize } from '../../../utils/domOperation';
+import { safelyParse } from '../../../utils/utils';
+import StreamRegion from '../common/StreamRegion';
+import type { UserInfo } from '../../../types';
 
 const { userList, userListOnSeat, userWithScreenOn } = useUserState();
 const { microphoneStatus, cameraStatus } = useDeviceState();
-const { currentRoom, localRoomStatus } = useRoomState();
+const { currentRoom } = useRoomState();
 const { loginUserInfo } = useLoginState();
 
-
 const emits = defineEmits(['stream-view-dblclick']);
 
 interface Props {
@@ -75,16 +74,14 @@ const props = withDefaults(defineProps<Props>(), {
     columnSpacing: 8,
   })),
   filterFn: () => true,
-  sortFn: () => 0
+  sortFn: () => 0,
 });
 
-const gridConfig = computed(() => {
-  return safelyParse(props.config) || {
-    maxRows: 3,
-    maxColumns: 3,
-    rowSpacing: 8,
-    columnSpacing: 8,
-  };
+const gridConfig = computed(() => safelyParse(props.config) || {
+  maxRows: 3,
+  maxColumns: 3,
+  rowSpacing: 8,
+  columnSpacing: 8,
 });
 
 const localFakeUser = computed(() => {
@@ -92,26 +89,24 @@ const localFakeUser = computed(() => {
   localUser.cameraStatus = cameraStatus.value;
   localUser.microphoneStatus = microphoneStatus.value;
   return localUser;
-})
+});
 
 const totalUserList = computed(() => {
   if (!currentRoom.value && localRoomStatus.value === LocalRoomStatus.IDLE) {
-    return [localFakeUser.value]
+    return [localFakeUser.value];
   }
   return currentRoom.value?.isSeatEnabled ? userListOnSeat.value : userList.value;
 });
 
-const renderUserInfoList: ComputedRef<({ userInfo: UserInfo, streamType: TUIVideoStreamType })[]> = computed(() => {
-  const videoUserList = totalUserList.value.filter(props.filterFn).map(item => {
-    return {
-      userInfo: item,
-      streamType: TUIVideoStreamType.kCameraStream
-    }
-  });
+const renderUserInfoList: ComputedRef<({ userInfo: UserInfo; streamType: TUIVideoStreamType })[]> = computed(() => {
+  const videoUserList = totalUserList.value.filter(props.filterFn).map(item => ({
+    userInfo: item,
+    streamType: TUIVideoStreamType.kCameraStream,
+  }));
   if (userWithScreenOn.value && [userWithScreenOn.value].filter(props.filterFn).length > 0) {
     videoUserList.unshift({
       userInfo: userWithScreenOn.value,
-      streamType: TUIVideoStreamType.kScreenStream
+      streamType: TUIVideoStreamType.kScreenStream,
     });
   }
   return videoUserList;
@@ -123,7 +118,7 @@ const column = computed(() => {
   }
   return Math.min(
     Math.ceil(Math.sqrt(renderUserInfoList.value.length)),
-    gridConfig.value.maxColumns
+    gridConfig.value.maxColumns,
   );
 });
 const row = computed(() => {
@@ -132,7 +127,7 @@ const row = computed(() => {
   }
   return Math.min(
     Math.ceil(renderUserInfoList.value.length / column.value),
-    gridConfig.value.maxRows
+    gridConfig.value.maxRows,
   );
 });
 
@@ -140,7 +135,7 @@ const streamListContainerRef = ref();
 const streamListRef = ref();
 
 const isEqualPointsLayout = computed(
-  () => gridConfig.value.maxRows !== Infinity && gridConfig.value.maxColumns !== Infinity
+  () => gridConfig.value.maxRows !== Infinity && gridConfig.value.maxColumns !== Infinity,
 );
 const isHorizontalInfinityLayout = computed(() => gridConfig.value.maxColumns === Infinity);
 const isVerticalInfinityLayout = computed(() => gridConfig.value.maxRows === Infinity);
@@ -151,7 +146,7 @@ watch(
     await nextTick();
     handleLayout();
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 function handleLayout() {
@@ -165,7 +160,6 @@ function handleLayout() {
   }
   if (isEqualPointsLayout.value) {
     handleEqualPointsLayout();
-    return;
   }
 }
 
@@ -204,10 +198,10 @@ async function handleEqualPointsLayout() {
   const containerWidth = Math.floor(containerRect.width);
   const containerHeight = Math.floor(containerRect.height);
   // Subtract the margin size of a single video stream to ensure that the ratio of width and height is 16:9
-  const contentWidth =
-    (containerWidth - (column.value - 1) * gridConfig.value.columnSpacing) / column.value;
-  const contentHeight =
-    (containerHeight - (row.value - 1) * gridConfig.value.rowSpacing) / row.value;
+  const contentWidth
+    = (containerWidth - (column.value - 1) * gridConfig.value.columnSpacing) / column.value;
+  const contentHeight
+    = (containerHeight - (row.value - 1) * gridConfig.value.rowSpacing) / row.value;
 
   let width = contentWidth;
   let height = contentHeight;
@@ -342,6 +336,3 @@ function handleWheel(event: WheelEvent) {
   }
 }
 </style>
-../../../states/DeviceState
-../../../states/LoginState
-../../../states/RoomState