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

package/dist/utils/call.js

@@ -82,7 +82,7 @@ function H(a) {
   let s = c || a.nameCard || a.nick || n;
   switch (s = S(s), t.actionType) {
     case 1:
-      return (((d = e == null ? void 0 : e.data) == null ? void 0 : d.cmd) === "audioCall" || ((g = e == null ? void 0 : e.data) == null ? void 0 : g.cmd) === "videoCall") && t.groupID ? i.t("CallMessage.start_call", { messageSender: s }) : ((_ = e == null ? void 0 : e.data) == null ? void 0 : _.cmd) === "hangup" ? t.groupID ? i.t("CallMessage.call_ended") : `${i.t("CallMessage.call_duration")}: ${N(e == null ? void 0 : e.call_end)}` : ((m = e == null ? void 0 : e.data) == null ? void 0 : m.cmd) === "switchToAudio" ? i.t("CallMessage.switch_to_audio_call") : ((p = e == null ? void 0 : e.data) == null ? void 0 : p.cmd) === "switchToVideo" ? i.t("CallMessage.switch_to_video_call") : i.t("CallMessage.start_call");
+      return (((d = e == null ? void 0 : e.data) == null ? void 0 : d.cmd) === "audioCall" || ((g = e == null ? void 0 : e.data) == null ? void 0 : g.cmd) === "videoCall") && t.groupID ? i.t("CallMessage.start_call", { messageSender: s }) : ((_ = e == null ? void 0 : e.data) == null ? void 0 : _.cmd) === "hangup" ? t.groupID ? i.t("CallMessage.call_ended") : `${i.t("CallMessage.call_duration")}: ${N(e == null ? void 0 : e.call_end)}` : ((m = e == null ? void 0 : e.data) == null ? void 0 : m.cmd) === "switchToAudio" ? i.t("CallMessage.switch_to_audio_call") : ((p = e == null ? void 0 : e.data) == null ? void 0 : p.cmd) === "switchToVideo" ? i.t("CallMessage.switch_to_video_call") : i.t("CallMessage.start_call", { messageSender: "" });
     case 2:
       return t.groupID ? `${s} ${i.t("CallMessage.cancel_call")}` : t.inviter === l ? i.t("CallMessage.canceled") : i.t("CallMessage.canceled_by_recipient");
     case 3:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "4.4.0-beta.1",
+  "version": "4.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -52,7 +52,7 @@
     "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.6",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.5.0-beta.1",
+    "@tencentcloud/tuiroom-engine-js": "~3.4.3",
     "@tencentcloud/uikit-base-component-vue3": "1.1.1",
     "vue": "^3.4.21"
   },

package/src/chat/server.ts

@@ -111,7 +111,6 @@ export default class ChatLoginServer {
   }
 
   public logout() {
-    TUIChatEngine.logout();
     this.isLogin.value = false;
     this.isEngineLoggingIn = false;
   }

package/src/components/ContactList/ContactInfo/BlacklistInfo/BlacklistInfo.vue

@@ -67,5 +67,5 @@ const handleRemoveFromBlacklist = async () => {
 </script>
 
 <style scoped lang="scss">
-@import './BlacklistInfo.scss';
+@use './BlacklistInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/ContactInfo.vue

@@ -260,5 +260,5 @@ const handleJoinGroup = (data: GroupModel, note: string) => emit('joinGroup', da
 </script>
 
 <style scoped lang="scss">
-@import './ContactInfo.scss';
+@use './ContactInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/FriendApplicationInfo/FriendApplicationInfo.vue

@@ -84,5 +84,5 @@ const handleRefuse = () => {
 </script>
 
 <style scoped lang="scss">
-@import './FriendApplicationInfo.scss';
+@use './FriendApplicationInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/FriendInfo/FriendInfo.vue

@@ -215,5 +215,5 @@ const handleSendMessage = () => {
 </script>
 
 <style scoped lang="scss">
-@import './FriendInfo.scss';
+@use './FriendInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/GroupApplicationInfo/GroupApplicationInfo.vue

@@ -95,5 +95,5 @@ const handleRefuse = () => {
 </script>
 
 <style scoped lang="scss">
-@import './GroupApplicationInfo.scss';
+@use './GroupApplicationInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/GroupInfo/GroupInfo.vue

@@ -143,5 +143,5 @@ const handleGroupAction = () => {
 }
 </script>
 <style scoped lang="scss">
-@import './GroupInfo.scss';
+@use './GroupInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/SearchGroupInfo/SearchGroupInfo.vue

@@ -143,5 +143,5 @@ const handleJoinGroup = async () => {
 </script>
 
 <style scoped lang="scss">
-@import './SearchGroupInfo.scss';
+@use './SearchGroupInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/SearchUserInfo/SearchUserInfo.vue

@@ -124,5 +124,5 @@ const handleAddFriend = async () => {
 </script>
 
 <style scoped lang="scss">
-@import './SearchUserInfo.scss';
+@use './SearchUserInfo.scss';
 </style>

package/src/components/ContactList/ContactList.vue

@@ -310,5 +310,5 @@ const emptyText = computed(() => props.emptyText || t('TUIContact.No contacts'))
 </script>
 
 <style scoped lang="scss">
-@import './ContactList.scss';
+@use './ContactList.scss';
 </style>

package/src/components/ContactList/ContactListItem/BlacklistItem/BlacklistItem.vue

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

package/src/components/ContactList/ContactListItem/FriendApplicationItem/FriendApplicationItem.vue

@@ -66,5 +66,5 @@ const handleAccept = () => {
 </script>
 
 <style scoped lang="scss">
-@import './FriendApplicationItem.scss';
+@use './FriendApplicationItem.scss';
 </style>

package/src/components/ContactList/ContactListItem/FriendItem/FriendItem.vue

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

package/src/components/ContactList/ContactListItem/GroupApplicationItem/GroupApplicationItem.vue

@@ -74,5 +74,5 @@ const handleAction = (action: 'accept' | 'refuse', event: Event) => {
 </script>
 
 <style scoped lang="scss">
-@import './GroupApplicationItem.scss';
+@use './GroupApplicationItem.scss';
 </style>

package/src/components/ContactList/ContactListItem/GroupItem/GroupItem.vue

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

package/src/components/ContactList/ContactSearch/ContactSearch.vue

@@ -94,5 +94,5 @@ const CustomSearchBar = (searchBarProps: SearchBarProps) => h('div', { class: 'c
 </script>
 
 <style scoped lang="scss">
-@import './ContactSearch.scss';
+@use './ContactSearch.scss';
 </style>

package/src/components/ConversationList/ConversationActions/ConversationActions.vue

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

package/src/components/ConversationList/ConversationCreate/ConversationCreate.vue

@@ -195,7 +195,7 @@ const handleCreateGroupConversation = async () => {
 
 const generateGroupName = (userList: Friend[]) => {
   const selfName = loginUserInfo.value?.userName || loginUserInfo.value?.userId || '';
-  const name = `${selfName}、` + userList.map(item => item?.remark || item?.nick || item?.userID).join('、');
+  const name = `${selfName}、${userList.map(item => item?.remark || item?.nick || item?.userID).join('、')}`;
   return name.length >= GROUP_NAME_LIMIT ? name.slice(0, GROUP_NAME_LIMIT) : name;
 };
 
@@ -231,5 +231,5 @@ const handleCancel = () => {
 </script>
 
 <style lang="scss" scoped>
-@import './ConversationCreate.scss';
+@use './ConversationCreate.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateButton/ConversationCreateButton.vue

@@ -83,5 +83,5 @@ const handleClick = (action: CreateConvTypes) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationCreateButton.scss';
+@use './ConversationCreateButton.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateGroupDetail/ConversationCreateGroupDetail.vue

@@ -120,5 +120,5 @@ const groupInfoChange = (value: string, type: string) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationCreateGroupDetail.scss';
+@use './ConversationCreateGroupDetail.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue

@@ -61,5 +61,5 @@ const handleSelectListUpdate = (list: UserPickerResult) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationCreateUserSelectList.scss';
+@use './ConversationCreateUserSelectList.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationGroupTypeInfo/ConversationGroupTypeInfo.vue

@@ -57,5 +57,5 @@ const selectGroupType = (type: GroupType) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationGroupTypeInfo.scss';
+@use './ConversationGroupTypeInfo.scss';
 </style>

package/src/components/ConversationList/ConversationList.vue

@@ -44,7 +44,7 @@
         :Preview="Preview"
         :ConversationActions="ConversationActions"
         :actions-config="actionsConfig"
-        @select="handleSelectConversation"
+        @select-conversation="handleSelectConversation"
       />
     </component>
   </div>
@@ -185,5 +185,5 @@ const handleCreated = (conversation: ConversationModel) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationList.scss';
+@use './ConversationList.scss';
 </style>

package/src/components/ConversationList/ConversationListContent/ConversationListContent.vue

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

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.vue

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

package/src/components/ConversationList/ConversationPlaceHolder/ConversationPlaceHolder.vue

@@ -74,5 +74,5 @@ const placeholderText = computed(() => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationPlaceHolder.scss';
+@use './ConversationPlaceHolder.scss';
 </style>

package/src/components/ConversationList/ConversationPreview/ConversationPreview.vue

@@ -14,7 +14,7 @@
       :actionsConfig="actionsConfig"
       :className="className"
       :style="style"
-      @select="handleSelectConversation"
+      @select-conversation="handleSelectConversation"
     >
       <slot />
     </component>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewAbstract.vue

@@ -33,5 +33,5 @@ const latestMessagePreview = computed(() => getLatestMessagePreview(props.conver
 </script>
 
 <style lang="scss" module>
-@import './ConversationPreview.scss';
+@use './ConversationPreview.scss';
 </style>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewTimestamp.vue

@@ -23,5 +23,5 @@ const time = getTimeStamp({
 </script>
 
 <style lang="scss" module>
-@import './ConversationPreview.scss';
+@use './ConversationPreview.scss';
 </style>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewTitle.vue

@@ -15,5 +15,5 @@ const title =props?.conversation?.getShowName?.() || '';
 </script>
 
 <style lang="scss" module>
-@import './ConversationPreview.scss';
+@use './ConversationPreview.scss';
 </style>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUI.vue

@@ -96,7 +96,7 @@ const props = withDefaults(defineProps<ConversationPreviewUIProps>(), {
 });
 
 const emit = defineEmits<{
-  select: [conversation: ConversationModel];
+  selectConversation: [conversation: ConversationModel];
 }>();
 
 const { activeConversation, setActiveConversation } = useConversationListState();
@@ -120,7 +120,7 @@ watch(isHovered, (newValue) => {
 });
 
 const handleClick = () => {
-  emit('select', props.conversation);
+  emit('selectConversation', props.conversation);
   setActiveConversation(props.conversation.conversationID);
 };
 
@@ -130,5 +130,5 @@ const handleCloseActionsModal = () => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationPreview.scss';
+@use './ConversationPreview.scss';
 </style>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUnread.vue

@@ -30,5 +30,5 @@ const isUnreadMarked = computed(() => props.conversation?.markList?.includes(TUI
 </script>
 
 <style lang="scss" module>
-@import './ConversationPreview.scss';
+@use './ConversationPreview.scss';
 </style>

package/src/components/ConversationList/ConversationSearch/ConversationSearch.vue

@@ -188,5 +188,5 @@ watch(keyword, handleSearchChange, { immediate: true });
 </script>
 
 <style lang="scss" module>
-@import './ConversationSearch.scss';
+@use './ConversationSearch.scss';
 </style>

package/src/components/MessageInput/EmojiPicker/EmojiPicker.vue

@@ -1,6 +1,9 @@
 <template>
-  <div>
-    <PopoverRoot :open="isOpen" @update:open="handleOpenChange">
+  <View>
+    <PopoverRoot
+      :open="isOpen"
+      @update:open="handleOpenChange"
+    >
       <PopoverTrigger
         as="div"
         :disabled="props.disabled"
@@ -45,7 +48,7 @@
         </PopoverContent>
       </PopoverPortal>
     </PopoverRoot>
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
@@ -53,6 +56,7 @@ import { onMounted, defineProps, useCssModule, ref } from 'vue';
 import { useUIKit, IconEmoji } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import { View } from '../../../baseComp/View';
 import { emojiUrlMap, emojiBaseUrl } from '../../../constants/emoji';
 import { useMessageInputState, MessageContentType } from '../../../states/MessageInputState';
 import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';

package/src/components/MessageInput/MessageInput.module.scss

@@ -14,6 +14,7 @@
     align-items: center;
     color: var(--text-color-secondary);
     gap: 2px;
+    margin-left: -6px;
   }
 
   &__wrapper {

package/src/components/MessageInput/MessageInput.vue

@@ -76,7 +76,7 @@ const props = withDefaults(defineProps<MessageInputProps>(), {
   autoFocus: true,
   disabled: false,
   hideSendButton: false,
-  placeholder: '',
+  placeholder: undefined,
   attachmentPickerMode: 'collapsed',
   actions: () => ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'],
 });

package/src/components/MessageInput/TextEditor/EditorCore.ts

@@ -4,8 +4,7 @@ import StarterKit from '@tiptap/starter-kit';
 import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
 import type { InputContent } from '../../../states/MessageInputState';
-import type { JSONContent } from '@tiptap/vue-3';
-import type { EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
+import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
 
 function createEmojiExtension() {
@@ -111,6 +110,7 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
+  isPlaceholderOnlyShowWhenEditable?: boolean;
   onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
   onFocus?: () => void;
@@ -122,6 +122,7 @@ function createEditor({
   placeholder = '',
   autoFocus = false,
   disabled = false,
+  isPlaceholderOnlyShowWhenEditable = true,
   onUpdate,
   onEnter,
   onFocus,
@@ -134,6 +135,7 @@ function createEditor({
     createImageExtension(),
     Placeholder.configure({
       placeholder,
+      showOnlyWhenEditable: isPlaceholderOnlyShowWhenEditable,
     }),
   ];
 

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -32,7 +32,7 @@ interface TextEditorProps {
 const props = withDefaults(defineProps<TextEditorProps>(), {
   autoFocus: true,
   disabled: false,
-  placeholder: '',
+  placeholder: undefined,
 });
 
 const { t } = useUIKit();
@@ -42,8 +42,6 @@ const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessag
 const editorDomRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
-const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
-
 let editorInstance: Editor | null = null;
 
 onMounted(() => {
@@ -57,7 +55,8 @@ onMounted(() => {
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,
-      placeholder: placeholderText.value,
+      placeholder: props.placeholder ?? t('MessageInput.enter_a_message'),
+      isPlaceholderOnlyShowWhenEditable: props.placeholder === undefined,
       autoFocus: props.autoFocus,
       disabled: props.disabled,
       onUpdate: (content) => {

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

@@ -1,25 +1,21 @@
 <template>
   <div
     class="wave-form"
-    @click="handleClick"
     :style="waveFormStyle"
+    @click="handleClick"
   >
     <div
       v-for="(height, index) in waveBarHeights"
       :key="index"
       class="wave-form__bar"
-      :class="{ 'wave-form__bar--active': isBarActive(index) }"
+      :class="{ 'wave-form__bar--active': activeStates[index] }"
       :style="{ height: `${height}px` }"
     />
-    <div
-      class="wave-form__cursor"
-      :style="cursorStyle"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { computed } from 'vue';
 
 interface WaveFormProps {
   progress: number | undefined;
@@ -29,7 +25,7 @@ interface WaveFormProps {
 
 const props = withDefaults(defineProps<WaveFormProps>(), {
   barsCount: 30,
-  width: '100%'
+  width: '100%',
 });
 
 const emit = defineEmits<{
@@ -38,32 +34,27 @@ const emit = defineEmits<{
 
 // Calculate wave form container style
 const waveFormStyle = computed(() => ({
-  width: typeof props.width === 'number' ? `${props.width}px` : props.width
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
 }));
 
 // Generate fixed wave bar heights array to avoid height changes on re-render
-const waveBarHeights = ref<number[]>([]);
-
-// Generate random heights on component mount and keep them constant during component lifecycle
-onMounted(() => {
-  const heights = [];
-  for (let i = 0; i < props.barsCount; i++) {
-    // Generate random heights between 8px and 24px
-    heights.push(Math.random() * 16 + 8);
+const waveBarHeights = Array.from({ length: props.barsCount }, () => Math.random() * 16 + 4);
+
+// Compute active states for all bars
+const activeStates = computed(() => {
+  const currentProgress = props.progress || 0;
+
+  if (currentProgress === 0) {
+    return Array(props.barsCount).fill(false);
   }
-  waveBarHeights.value = heights;
-});
 
-// Check if wave bar is active
-const isBarActive = (index: number) => {
-  const barProgress = (index + 1) / props.barsCount;
-  return (props.progress || 0) >= barProgress;
-};
+  const _activeStates = Array.from({ length: props.barsCount }, (_, index) => {
+    const barProgress = index / props.barsCount;
+    return currentProgress >= barProgress;
+  });
 
-// Calculate cursor position style
-const cursorStyle = computed(() => ({
-  left: `${(props.progress || 0) * 100}%`
-}));
+  return _activeStates;
+});
 
 // Handle click event, calculate new progress
 const handleClick = (event: MouseEvent) => {
@@ -71,7 +62,7 @@ const handleClick = (event: MouseEvent) => {
   const rect = waveElement.getBoundingClientRect();
   const offsetX = event.clientX - rect.left;
   const newProgress = offsetX / rect.width;
-  
+
   // Ensure progress value is between 0-1
   const validProgress = Math.max(0, Math.min(1, newProgress));
   emit('seek', validProgress);
@@ -102,13 +93,5 @@ const handleClick = (event: MouseEvent) => {
     }
   }
 
-  &__cursor {
-    position: absolute;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 20%);
-    pointer-events: none;
-  }
 }
 </style>

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

@@ -25,7 +25,7 @@ const callAgain = () => {
 
   startCall({
     type: payload.value.data.data.call_type,
-    userIDList: payload.value.data.inviteeList,
+    userIDList: [activeConversation.value.userProfile?.userID],
   });
 };
 </script>

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/MessageList.vue

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

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.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.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.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.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.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>