tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/src/components/MessageList/Message/GroupTipMessage/GroupTipMessage.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { ConversationType } from '../../../../types/engine';
@@ -28,20 +29,20 @@ const { t } = useUIKit();
 
 const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
-const renderText = () => {
+const renderText = computed(() => {
   if (messageContent.businessID === 'group_create') {
     return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
   }
   if (isCallMessage(props.message) && props.message.conversationType === ConversationType.GROUP) {
-    return parseCallMessageText(props.message);
+    return parseCallMessageText(props.message, t);
   }
   return resolveGroupTipMessage(props.message).text;
-};
+});
 </script>
 
 <template>
   <div :class="cs('group-tip-message')">
-    {{ renderText() }}
+    {{ renderText }}
   </div>
 </template>
 

package/src/components/MessageList/Message/Message.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { MessageLayout } from './MessageLayout';
 import type { MessageAction } from '../../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../types/engine';
 
 interface MessageProps {
   message: MessageModel;

package/src/components/MessageList/Message/MessageLayout/MessageLayout.vue

@@ -82,17 +82,17 @@ const MessageComponent = computed(() => MessageComponentsFactory[props.message.t
 
 const isMessageOwner = computed(() => props.message.flow === 'out');
 
-const {
-  layoutClasses,
-  wrapperClasses,
-  avatarClasses,
-  bubbleClasses,
-  metaClasses,
-} = useMessageLayoutClasses({
+const messageLayoutClasses = computed(() => useMessageLayoutClasses({
   isMessageOwner: isMessageOwner.value,
   alignment: props.alignment,
   isAggregated: props.isAggregated,
-});
+}));
+
+const layoutClasses = computed(() => messageLayoutClasses.value.layoutClasses);
+const wrapperClasses = computed(() => messageLayoutClasses.value.wrapperClasses);
+const avatarClasses = computed(() => messageLayoutClasses.value.avatarClasses);
+const bubbleClasses = computed(() => messageLayoutClasses.value.bubbleClasses);
+const metaClasses = computed(() => messageLayoutClasses.value.metaClasses);
 
 function handleReadReceiptOpen() {
   isReadReceiptInfoOpen.value = true;

package/src/components/MessageList/Message/VideoMessage/VideoMessage.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import cs from 'classnames';
 import { View } from '../../../../baseComp/View';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
-interface IVideoMessageProps {
-  message: IMessageModel;
+interface VideoMessageProps {
+  message: MessageModel;
   isLastInChunk?: boolean;
 }
 
-interface IVideoMessageContent {
+interface VideoMessageContent {
   showName: string;
   snapshotHeight: number;
   snapshotWidth: number;
@@ -17,33 +17,51 @@ interface IVideoMessageContent {
   url: string;
 }
 
-const props = withDefaults(defineProps<IVideoMessageProps>(), {
+const props = withDefaults(defineProps<VideoMessageProps>(), {
   isLastInChunk: false,
-  message: () => ({} as IMessageModel),
+  message: () => ({} as MessageModel),
 });
 
-const messageContent = props.message.getMessageContent() as IVideoMessageContent;
+// SDK uses 200×200 as placeholder before actual dimensions are available
+const isPlaceholderSize = (width: number, height: number): boolean => width === 200 && height === 200;
 
-const windowResize = ref(false);
-const loaded = ref(false);
-const naturalSize = ref<{ height: number; aspectRatio: number } | null>(
-  messageContent.snapshotWidth && messageContent.snapshotHeight
-    ? {
-      height: messageContent.snapshotHeight,
-      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
-    }
-    : null,
+const messageContent = computed(() =>
+  props.message.getMessageContent() as VideoMessageContent,
 );
 
-const isMessageOwner = computed(() => props.message.flow === 'out');
+const videoNaturalSize = ref<{ height: number; aspectRatio: number } | null>(null);
+const loaded = ref(false);
+
+// Priority: video metadata > snapshot > null (for placeholder data)
+const naturalSize = computed(() => {
+  if (videoNaturalSize.value) {
+    return videoNaturalSize.value;
+  }
+
+  const content = messageContent.value;
+
+  if (isPlaceholderSize(content.snapshotWidth, content.snapshotHeight)) {
+    return null;
+  }
+
+  if (content.snapshotWidth && content.snapshotHeight) {
+    return {
+      height: content.snapshotHeight,
+      aspectRatio: content.snapshotWidth / content.snapshotHeight,
+    };
+  }
+
+  return null;
+});
 
 const displaySize = computed(() => {
-  const MAX_HEIGHT = 400;
+  const MAX_HEIGHT = 300;
+  const PLACEHOLDER_HEIGHT = 200;
   const DEFAULT_RATIO = 3 / 4;
 
   if (!naturalSize.value) {
     return {
-      height: MAX_HEIGHT,
+      height: PLACEHOLDER_HEIGHT,
       aspectRatio: DEFAULT_RATIO,
     };
   }
@@ -56,41 +74,30 @@ const displaySize = computed(() => {
       height: 200,
     };
   }
+
   return {
     aspectRatio,
     height: MAX_HEIGHT,
   };
 });
 
-const onResize = () => {
-  windowResize.value = true;
-};
+const isMessageOwner = computed(() => props.message.flow === 'out');
 
 const onVideoLoad = (e: Event) => {
   const video = e.target as HTMLVideoElement;
-  naturalSize.value = {
+
+  videoNaturalSize.value = {
     aspectRatio: video.videoWidth / video.videoHeight,
     height: video.videoHeight,
   };
+
   loaded.value = true;
 };
 
-onMounted(() => {
-  window.addEventListener('resize', onResize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', onResize);
-});
-
+// Reset state when message ID changes (e.g., URL switches from blob to real)
 watch(() => props.message.ID, () => {
   loaded.value = false;
-  naturalSize.value = messageContent.snapshotWidth && messageContent.snapshotHeight
-    ? {
-      height: messageContent.snapshotHeight,
-      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
-    }
-    : null;
+  videoNaturalSize.value = null;
 });
 </script>
 
@@ -102,7 +109,6 @@ watch(() => props.message.ID, () => {
       'video-message--loaded': loaded
     })"
     :style="{
-      minHeight: windowResize ? 'auto' : `${displaySize.height}px`,
       maxHeight: `${displaySize.height}px`,
       aspectRatio: naturalSize ? `${displaySize.aspectRatio}` : 'auto',
       width: !loaded ? `${displaySize.height * displaySize.aspectRatio}px` : undefined
@@ -150,10 +156,7 @@ watch(() => props.message.ID, () => {
 
 .video-placeholder {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   background:
     linear-gradient(
       90deg,

package/src/components/MessageList/Message/VideoMessage/index.ts

@@ -1,3 +1,3 @@
 import VideoMessage from './VideoMessage.vue';
 
-export { VideoMessage };
+export { VideoMessage };

package/src/components/MessageList/MessageList.vue

@@ -243,6 +243,8 @@ watch(messageList, (newMessages, oldMessages) => {
       // TODO: new message notification
     }
   }
+}, {
+  immediate: true,
 });
 
 watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {

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

@@ -72,7 +72,73 @@ const CallMessage = {
   no_answer_timeout: 'Call not answered (timeout)',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Guffaw]',
+  '[TUIEmoji_KindSmile]': '[KindSmile]',
+  '[TUIEmoji_Haha]': '[Haha]',
+  '[TUIEmoji_Cheerful]': '[Cheerful]',
+  '[TUIEmoji_Speechless]': '[Speechless]',
+  '[TUIEmoji_Amazed]': '[Amazed]',
+  '[TUIEmoji_Sorrow]': '[Sorrow]',
+  '[TUIEmoji_Complacent]': '[Complacent]',
+  '[TUIEmoji_Silly]': '[Silly]',
+  '[TUIEmoji_Lustful]': '[Lustful]',
+  '[TUIEmoji_Giggle]': '[Giggle]',
+  '[TUIEmoji_Kiss]': '[Kiss]',
+  '[TUIEmoji_Wail]': '[Wail]',
+  '[TUIEmoji_TearsLaugh]': '[TearsLaugh]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[BareTeeth]',
+  '[TUIEmoji_FlareUp]': '[FlareUp]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[StarEyes]',
+  '[TUIEmoji_ShutUp]': '[ShutUp]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Shit]',
+  '[TUIEmoji_Monster]': '[Monster]',
+  '[TUIEmoji_Daemon]': '[Daemon]',
+  '[TUIEmoji_Rage]': '[Rage]',
+  '[TUIEmoji_Fool]': '[Fool]',
+  '[TUIEmoji_Pig]': '[Pig]',
+  '[TUIEmoji_Cow]': '[Cow]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[Skull]',
+  '[TUIEmoji_Bombs]': '[Bombs]',
+  '[TUIEmoji_Coffee]': '[Coffee]',
+  '[TUIEmoji_Cake]': '[Cake]',
+  '[TUIEmoji_Beer]': '[Beer]',
+  '[TUIEmoji_Flower]': '[Flower]',
+  '[TUIEmoji_Watermelon]': '[Watermelon]',
+  '[TUIEmoji_Rich]': '[Rich]',
+  '[TUIEmoji_Heart]': '[Heart]',
+  '[TUIEmoji_Moon]': '[Moon]',
+  '[TUIEmoji_Sun]': '[Sun]',
+  '[TUIEmoji_Star]': '[Star]',
+  '[TUIEmoji_RedPacket]': '[RedPacket]',
+  '[TUIEmoji_Celebrate]': '[Celebrate]',
+  '[TUIEmoji_Bless]': '[Bless]',
+  '[TUIEmoji_Fortune]': '[Fortune]',
+  '[TUIEmoji_Convinced]': '[Convinced]',
+  '[TUIEmoji_Prohibit]': '[Prohibit]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[Knife]',
+  '[TUIEmoji_Like]': '[Like]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 };

package/src/components/MessageList/i18n/index.ts

@@ -1,9 +1,9 @@
-import { MessageList as MessageListEn, CallMessage as CallMessageEn } from './en-US';
-import { MessageList as MessageListZh, CallMessage as CallMessageZh } from './zh-CN';
+import { MessageList as MessageListEn, CallMessage as CallMessageEn, Emoji as EmojiEn } from './en-US';
+import { MessageList as MessageListZh, CallMessage as CallMessageZh, Emoji as EmojiZh } from './zh-CN';
 
 const resources = {
-  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn },
-  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh },
+  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn, Emoji: EmojiEn},
+  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh, Emoji: EmojiZh },
 };
 
 export { resources };

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

@@ -71,7 +71,73 @@ const CallMessage = {
   no_answer_timeout: '超时无应答',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[眨眼]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[姨母笑]',
+  '[TUIEmoji_Haha]': '[哈哈哈]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[无语]',
+  '[TUIEmoji_Amazed]': '[惊讶]',
+  '[TUIEmoji_Sorrow]': '[悲伤]',
+  '[TUIEmoji_Complacent]': '[得意]',
+  '[TUIEmoji_Silly]': '[傻了]',
+  '[TUIEmoji_Lustful]': '[色]',
+  '[TUIEmoji_Giggle]': '[憨笑]',
+  '[TUIEmoji_Kiss]': '[亲亲]',
+  '[TUIEmoji_Wail]': '[大哭]',
+  '[TUIEmoji_TearsLaugh]': '[哭笑]',
+  '[TUIEmoji_Trapped]': '[困]',
+  '[TUIEmoji_Mask]': '[口罩]',
+  '[TUIEmoji_Fear]': '[恐惧]',
+  '[TUIEmoji_BareTeeth]': '[龇牙]',
+  '[TUIEmoji_FlareUp]': '[发怒]',
+  '[TUIEmoji_Yawn]': '[打哈欠]',
+  '[TUIEmoji_Tact]': '[机智]',
+  '[TUIEmoji_Stareyes]': '[星星眼]',
+  '[TUIEmoji_ShutUp]': '[闭嘴]',
+  '[TUIEmoji_Sigh]': '[叹气]',
+  '[TUIEmoji_Hehe]': '[呵呵]',
+  '[TUIEmoji_Silent]': '[收声]',
+  '[TUIEmoji_Surprised]': '[惊喜]',
+  '[TUIEmoji_Askance]': '[白眼]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[怪兽]',
+  '[TUIEmoji_Daemon]': '[恶魔]',
+  '[TUIEmoji_Rage]': '[恶魔怒]',
+  '[TUIEmoji_Fool]': '[衰]',
+  '[TUIEmoji_Pig]': '[猪]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骷髅]',
+  '[TUIEmoji_Bombs]': '[炸弹]',
+  '[TUIEmoji_Coffee]': '[咖啡]',
+  '[TUIEmoji_Cake]': '[蛋糕]',
+  '[TUIEmoji_Beer]': '[啤酒]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[瓜]',
+  '[TUIEmoji_Rich]': '[壕]',
+  '[TUIEmoji_Heart]': '[爱心]',
+  '[TUIEmoji_Moon]': '[月亮]',
+  '[TUIEmoji_Sun]': '[太阳]',
+  '[TUIEmoji_Star]': '[星星]',
+  '[TUIEmoji_RedPacket]': '[红包]',
+  '[TUIEmoji_Celebrate]': '[庆祝]',
+  '[TUIEmoji_Bless]': '[福]',
+  '[TUIEmoji_Fortune]': '[发]',
+  '[TUIEmoji_Convinced]': '[服]',
+  '[TUIEmoji_Prohibit]': '[禁]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[刀]',
+  '[TUIEmoji_Like]': '[赞]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 }

package/src/components/MicButton/index.vue

@@ -2,7 +2,7 @@
   <div class="mic-button-container">
     <div class="mic-button" :class="{ 'disabled': !hasPublishAudioPermission }" @click="handleClick">
       <audio-icon
-        :audio-volume="audioVolume"
+        :audio-volume="currentMicVolume"
         :is-muted="isMuted"
         :is-disabled="!hasPublishAudioPermission"
       />
@@ -19,7 +19,7 @@ import { DeviceStatus, DeviceError } from '../../types';
 import AudioIcon from './AudioIcon.vue';
 
 const {
-  audioVolume,
+  currentMicVolume,
   hasPublishAudioPermission,
   microphoneStatus,
   microphoneLastError,
@@ -60,4 +60,4 @@ async function handleClick() {
     }
   }
 }
-</style>
+</style>

package/src/components/Search/Search.vue

@@ -188,5 +188,5 @@ const stopClickPropagation = (e: Event) => {
 </script>
 
 <style lang="scss" module>
-@import './Search.scss';
+@use './Search.scss';
 </style>

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

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchDateRangePicker {
   background: var(--bg-color-dialog);
   box-shadow: 0 2px 8px var(--shadow-color);
@@ -305,4 +302,4 @@
     color: #fff;
     border-color: #1677ff;
   }
-} 
+}

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

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

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

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchMessageAdvanced {
   padding: 10px 20px;
   background-color: var(--bg-color-operate);
@@ -81,4 +78,4 @@
   left: 0;
   margin-top: 8px;
   z-index: 1000;
-} 
+}

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

@@ -259,5 +259,5 @@ const handleQuickOptionClick = (option: string) => {
 </script>
 
 <style lang="scss" module>
-@import './MessageAdvanced.scss';
+@use './MessageAdvanced.scss';
 </style>

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

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchAdvanced {
   display: flex;
   flex-direction: column;
@@ -53,4 +50,4 @@
     margin-top: 8px;
     z-index: 1000;
   }
-} 
+}

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>