tuikit-atomicx-vue3 3.3.0-beta.3 → 3.3.0

package/src/components/ChatSetting/GroupChatSetting/GroupMembers/GroupMembers.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { IconArrowStrokeRight, IconMinus, IconAdd, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { IconArrowStrokeRight, IconMinus, IconPlus, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import {
   useGroupSettingState,
   GroupPermission,
@@ -13,7 +13,7 @@ interface GroupMembersProps {
   showAddButton: boolean; // Whether to show add button
   showRemoveButton: boolean; // Whether to show remove button
   // Basic configuration
-  title?: string; // Title, default "群成员"
+  title?: string; // Title
   members?: GroupMember[] | undefined; // Member list
   memberCount?: number; // Total member count
   maxDisplayCount?: number; // Mini version display count, default 6
@@ -239,7 +239,7 @@ onUnmounted(() => {
         @click="handleAddMember"
       >
         <div class="group-members__action-btn__icon">
-          <IconAdd />
+          <IconPlus />
         </div>
         <div class="group-members__action-btn__label">
           {{ t('ChatSetting.add') }}

package/src/components/ChatSetting/SettingItem/SettingItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, nextTick, useCssModule } from 'vue';
-import cs from 'classnames';
 import { IconEditNameCard, TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
 
 // Base props shared by all types
 interface BaseSettingItemProps {
@@ -59,7 +59,6 @@ const SettingItemType = {
   DISPLAY: 'display',
 } as const;
 
-
 const { t } = useUIKit();
 const classes = useCssModule();
 
@@ -464,15 +463,19 @@ function handleSwitchChange(event: Event) {
     &:focus {
       outline: none;
 
-      border-color: var(--primary-color);
+      border-color: var(--text-color-link);
     }
 
     &::placeholder {
-      color: var(--text-color-placeholder);
+      color: var(--text-color-secondary);
     }
 
     &--error {
-      border-color: var(--error-color);
+      border-color: var(--text-color-error);
+
+      &:focus {
+        border-color: var(--text-color-error);
+      }
     }
   }
 
@@ -485,7 +488,7 @@ function handleSwitchChange(event: Event) {
     font-size: 12px;
     margin-top: 4px;
 
-    color: var(--error-color);
+    color: var(--text-color-error);
   }
 
   &__actions {
@@ -504,7 +507,7 @@ function handleSwitchChange(event: Event) {
 </style>
 
 <style lang="scss">
-.unique-icon-btn {
+span.unique-icon-btn {
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -44,13 +44,13 @@ const ChatSetting = {
   // Validation messages
   group_name_required_string: 'Group name must be a string',
   group_name_required: 'Group name cannot be empty',
-  group_name_max_length: 'Group name cannot exceed 25 characters',
+  group_name_max_length: 'Group name cannot exceed 30 characters',
   group_name_unchanged: 'Please modify the group name before submitting',
   group_introduction_required_string: 'Group introduction must be a string',
-  group_introduction_max_length: 'Group introduction cannot exceed 100 characters',
+  group_introduction_max_length: 'Group introduction cannot exceed 130 characters',
   group_introduction_unchanged: 'Please modify the group introduction before submitting',
   group_notification_required_string: 'Group notification must be a string',
-  group_notification_max_length: 'Group notification cannot exceed 100 characters',
+  group_notification_max_length: 'Group notification cannot exceed 130 characters',
   group_notification_unchanged: 'Please modify the group notification before submitting',
   group_name_card_required_string: 'Name card must be a string',
   group_name_card_unchanged: 'Please modify the name card before submitting',

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

@@ -44,13 +44,13 @@ const ChatSetting = {
   // Validation messages
   group_name_required_string: '群名称必须是字符串',
   group_name_required: '群名称不能为空',
-  group_name_max_length: '群名称不能超过25个字符',
+  group_name_max_length: '群名称不能超过30个字符',
   group_name_unchanged: '请修改群名称后再提交',
   group_introduction_required_string: '群简介必须是字符串',
-  group_introduction_max_length: '群简介不能超过100个字符',
+  group_introduction_max_length: '群简介不能超过130个字符',
   group_introduction_unchanged: '请修改群简介后再提交',
   group_notification_required_string: '群公告必须是字符串',
-  group_notification_max_length: '群公告不能超过100个字符',
+  group_notification_max_length: '群公告不能超过130个字符',
   group_notification_unchanged: '请修改群公告后再提交',
   group_name_card_required_string: '群名片必须是字符串',
   group_name_card_unchanged: '请修改群名片后再提交',

package/src/components/ChatSetting/index.ts

@@ -1,10 +1,10 @@
-import ChatSetting from './ChatSetting.vue';
+import ChatSettingComponent from './ChatSetting.vue';
 import { addI18n } from '../../i18n';
 import { resources } from './i18n';
 
 addI18n('zh-CN', { translation: { ChatSetting: resources['zh-CN'] } });
 addI18n('en-US', { translation: { ChatSetting: resources['en-US'] } });
 
+const ChatSetting = ChatSettingComponent;
+
 export { ChatSetting };
-export { C2CChatSetting } from './C2CChatSetting';
-export { GroupChatSetting } from './GroupChatSetting';

package/src/components/CoGuestPanel/CoGuestPanel.vue

@@ -384,8 +384,17 @@ const handleDisconnect = async (userId: string) => {
         font-size: 16px;
         font-weight: 500;
         color: var(--text-color-primary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 200px;
       }
     }
+
+    .user-actions {
+      display: flex;
+      gap: 6px;
+    }
   }
 }
 

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

@@ -30,6 +30,7 @@
   font-weight: 400;
   color: var(--text-color-primary);
   max-width: 100%;
+
   @include mixins.text-ellipsis();
 }
 
@@ -39,6 +40,7 @@
   color: var(--text-color-tertiary);
   width: 100%;
   word-break: break-word;
+  
   @include mixins.multi-line-ellipsis(3);
 }
 

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

@@ -59,6 +59,14 @@ import type { ContactInfoProps, ContactGroupItem, FriendApplication, GroupApplic
 
 const props = withDefaults(defineProps<ContactInfoProps>(), {
   showActions: true,
+  PlaceholderEmpty: undefined,
+  FriendInfoComponent: undefined,
+  GroupInfoComponent: undefined,
+  BlacklistInfoComponent: undefined,
+  FriendApplicationInfoComponent: undefined,
+  GroupApplicationInfoComponent: undefined,
+  SearchGroupInfoComponent: undefined,
+  SearchUserInfoComponent: undefined,
 });
 
 const emit = defineEmits<{
@@ -67,7 +75,7 @@ const emit = defineEmits<{
   deleteFriend: [data: Friend];
   addToBlacklist: [data: Friend];
   removeFromBlacklist: [data: UserProfile];
-  updateFriendRemark: [data: Friend];
+  updateFriendRemark: [data: Friend, remark: string];
   enterGroup: [data: GroupModel];
   leaveGroup: [data: GroupModel];
   dismissGroup: [data: GroupModel];
@@ -189,19 +197,19 @@ watch(
 const getComponentByType = (type?: ContactItemType) => {
   switch (type) {
     case ContactItemType.FRIEND:
-      return FriendInfo;
+      return props.FriendInfoComponent || FriendInfo;
     case ContactItemType.GROUP:
-      return GroupInfo;
+      return props.GroupInfoComponent || GroupInfo;
     case ContactItemType.BLACK:
-      return BlacklistInfo;
+      return props.BlacklistInfoComponent || BlacklistInfo;
     case ContactItemType.FRIEND_REQUEST:
-      return FriendApplicationInfo;
+      return props.FriendApplicationInfoComponent || FriendApplicationInfo;
     case ContactItemType.GROUP_REQUEST:
-      return GroupApplicationInfo;
+      return props.GroupApplicationInfoComponent || GroupApplicationInfo;
     case ContactItemType.SEARCH_USER:
-      return SearchUserInfo;
+      return props.SearchUserInfoComponent || SearchUserInfo;
     case ContactItemType.SEARCH_GROUP:
-      return SearchGroupInfo;
+      return props.SearchGroupInfoComponent || SearchGroupInfo;
     default:
       return 'div';
   }
@@ -241,7 +249,7 @@ const handleSendMessage = (data: Friend) => emit('sendMessage', data);
 const handleDeleteFriend = (data: Friend) => emit('deleteFriend', data);
 const handleAddToBlacklist = (data: Friend) => emit('addToBlacklist', data);
 const handleRemoveFromBlacklist = (data: UserProfile) => emit('removeFromBlacklist', data);
-const handleUpdateFriendRemark = (data: Friend) => emit('updateFriendRemark', data);
+const handleUpdateFriendRemark = (data: Friend, remark: string) => emit('updateFriendRemark', data, remark);
 const handleEnterGroup = (data: GroupModel) => emit('enterGroup', data);
 const handleLeaveGroup = (data: GroupModel) => emit('leaveGroup', data);
 const handleDismissGroup = (data: GroupModel) => emit('dismissGroup', data);

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

@@ -30,6 +30,7 @@
   font-weight: 400;
   color: var(--text-color-primary);
   max-width: 100%;
+
   @include mixins.text-ellipsis();
 }
 
@@ -39,6 +40,7 @@
   color: var(--text-color-tertiary);
   width: 100%;
   word-break: break-word;
+  
   @include mixins.multi-line-ellipsis(3);
 }
 

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

@@ -30,6 +30,7 @@
   font-weight: 400;
   color: var(--text-color-primary);
   max-width: 100%;
+
   @include mixins.text-ellipsis();
 }
 
@@ -39,6 +40,7 @@
   color: var(--text-color-tertiary);
   width: 100%;
   word-break: break-word;
+  
   @include mixins.multi-line-ellipsis(3);
 }
 
@@ -76,10 +78,9 @@
 
 .remark-edit {
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   word-break: break-all;
+  
+  @include mixins.text-ellipsis();
 }
 .remark-edit-icon {
   min-width: 16px;

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

@@ -30,6 +30,7 @@
   font-weight: 400;
   color: var(--text-color-primary);
   max-width: 100%;
+
   @include mixins.text-ellipsis();
 }
 
@@ -39,6 +40,7 @@
   color: var(--text-color-tertiary);
   width: 100%;
   word-break: break-word;
+  
   @include mixins.multi-line-ellipsis(3);
 }
 

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

@@ -30,6 +30,7 @@
   font-weight: 400;
   color: var(--text-color-primary);
   max-width: 100%;
+
   @include mixins.text-ellipsis();
 }
 
@@ -39,6 +40,7 @@
   color: var(--text-color-tertiary);
   width: 100%;
   word-break: break-word;
+  
   @include mixins.multi-line-ellipsis(3);
 }
 

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

@@ -54,6 +54,7 @@
         {{ t('TUIContact.Enter group chat') }}
       </TUIButton>
       <TUIDialog
+        appendTo="body"
         :visible="visible"
         :title="canDismissGroup ? t('TUIContact.Confirm dismiss group'): t('TUIContact.Confirm quit group')"
         :confirm-text="t('TUIContact.Submit')"

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

@@ -1,4 +1,3 @@
-@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
 @use '../../../../styles/mixins' as mixins;
 .contact-search-group-info {
   height: 100%;
@@ -88,7 +87,8 @@
   font-size: 14px;
   color: var(--text-color-primary);
   resize: none;
-  @include scrollbar.scrollbar-hidden();
+  
+  @include mixins.scrollbar-hidden();
 }
 
 .contact-search-group-info__form-input:focus {

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

@@ -1,4 +1,3 @@
-@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
 @use '../../../../styles/mixins' as mixins;
 .contact-search-user-info {
   height: 100%;
@@ -40,6 +39,7 @@
   color: var(--text-color-tertiary);
   width: 100%;
   word-break: break-word;
+
   @include mixins.multi-line-ellipsis(3);
 }
 
@@ -88,7 +88,8 @@
   font-size: 14px;
   color: var(--text-color-primary);
   resize: none;
-  @include scrollbar.scrollbar-hidden();
+  
+  @include mixins.scrollbar-hidden();
 }
 
 .contact-search-user-info__form-input:focus {

package/src/components/ContactList/ContactList.scss

@@ -32,10 +32,11 @@
   &__content {
     flex: 1;
     overflow-y: auto;
-    @include scrollbar.scrollbar-hidden();
     padding: 6px 0;
     display: flex;
     flex-direction: column;
+
+    @include scrollbar.scrollbar-hidden();
   }
 
   &__group {

package/src/components/ContactList/ContactList.vue

@@ -2,7 +2,8 @@
   <div class="contact-list">
     <div class="contact-list__container">
       <div class="contact-list__main">
-        <ContactSearch
+        <component
+          :is="ContactSearch"
           v-if="enableSearch"
           :placeholder="searchPlaceholder"
           @result-click="(item: ContactGroupItem) => {
@@ -51,7 +52,7 @@
                 class="contact-list__group-content"
               >
                 <component
-                  :is="ContactListItem"
+                  :is="ContactItem"
                   v-for="(contactItem, index) in group.items"
                   :key="`${group.type}_${getItemId(contactItem)}_${index}`"
                   :contact-item="{ type: group.type, data: contactItem }"
@@ -99,12 +100,17 @@ import type {
   ContactListProps,
   ContactGroup,
   CustomGroupConfig,
-  ContactItem } from '../../types/contact';
+  ContactItem,
+} from '../../types/contact';
 
 const props = withDefaults(defineProps<ContactListProps>(), {
   enableSearch: true,
   searchPlaceholder: undefined,
   emptyText: undefined,
+  ContactItem: () => ContactListItem,
+  ContactSearchComponent: () => ContactSearch,
+  GroupHeader: undefined,
+  PlaceholderEmptyList: () => undefined,
 });
 
 const emit = defineEmits<{
@@ -182,6 +188,9 @@ const handleContactClick = (type: ContactItemType, item: ContactItem) => {
   const contactGroupItem: ContactGroupItem = { type, data: item };
   emit('contact-item-click', contactGroupItem);
   setActiveContact(contactGroupItem);
+  if (props.onContactItemClick) {
+    props.onContactItemClick(contactGroupItem);
+  }
 };
 
 const handleFriendApplicationAction = async (
@@ -198,6 +207,9 @@ const handleFriendApplicationAction = async (
       await refuseFriendApplication(application.userID);
     }
     emit('friend-application-action', action, application);
+    if (props.onFriendApplicationAction) {
+      props.onFriendApplicationAction(action, application);
+    }
   } catch (error) {
     console.error(`[ContactList handleFriendApplicationAction] Failed to ${action} friend application:`, error);
   }
@@ -219,6 +231,9 @@ const handleGroupApplicationAction = async (
       await refuseGroupApplication(params);
     }
     emit('group-application-action', action, application);
+    if (props.onGroupApplicationAction) {
+      props.onGroupApplicationAction(action, application);
+    }
   } catch (error) {
     console.error(`[ContactList handleGroupApplicationAction] Failed to ${action} group application:`, error);
   }

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

@@ -1,3 +1,4 @@
+@use '../../../../styles//mixins' as mixins;
 .blacklist-item {
   display: flex;
   align-items: center;
@@ -32,8 +33,7 @@
   &__name {
     font-size: 14px;
     color: var(--text-color-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+    @include mixins.text-ellipsis();
   }
 }

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

@@ -1,3 +1,4 @@
+@use '../../../../styles/mixins' as mixins;
 .friendApplicationItem {
   padding: 12px 20px;
   display: flex;
@@ -35,20 +36,18 @@
     font-size: 12px;
     line-height: 14px;
     font-weight: 400;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     color: var(--text-color-primary);
+
+    @include mixins.text-ellipsis();
   }
 
   &__text {
     font-size: 12px;
     line-height: 14px;
     font-weight: 400;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     color: var(--text-color-tertiary);
+
+    @include mixins.text-ellipsis();
   }
 
   &__actions {

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

@@ -1,3 +1,4 @@
+@use '../../../../styles/mixins' as mixins;
 .friend-item {
   display: flex;
   align-items: center;
@@ -32,8 +33,7 @@
   &__name {
     font-size: 14px;
     color: var(--text-color-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+    @include mixins.text-ellipsis();
   }
 }

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

@@ -1,3 +1,4 @@
+@use '../../../../styles/mixins' as mixins;
 .groupApplicationItem {
   padding: 12px 20px;
   display: flex;
@@ -34,20 +35,18 @@
     font-size: 12px;
     line-height: 14px;
     font-weight: 400;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     color: var(--text-color-primary);
+
+    @include mixins.text-ellipsis();
   }
 
   &__text {
     font-size: 12px;
     line-height: 14px;
     font-weight: 400;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     color: var(--text-color-tertiary);
+
+    @include mixins.text-ellipsis();
   }
 
   &__actions {

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

@@ -1,3 +1,4 @@
+@use '../../../../styles/mixins' as mixins;
 .group-item {
   display: flex;
   align-items: center;
@@ -32,8 +33,7 @@
   &__name {
     font-size: 14px;
     color: var(--text-color-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+    @include mixins.text-ellipsis();
   }
 }

package/src/components/ConversationList/ConversationActions/ConversationActions.scss

@@ -1,21 +1,11 @@
 .conversationActions {
   position: relative;
+  display: flex;
 
   &__popup-icon {
-    padding: 4px 8px;
+    display: flex;
     cursor: pointer;
-    border-radius: 4px;
     transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--hover-bg-color, #f0f0f0);
-    }
-
-    .more-icon {
-      font-size: 16px;
-      color: var(--text-color-secondary, #666);
-      font-weight: bold;
-    }
   }
 
   &__h5 {

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

@@ -28,10 +28,10 @@
       placement="bottom-end"
     >
       <div
-        :class="$style.conversationActions__popupIcon"
+        :class="$style['conversationActions__popup-icon']"
         @click="toggleClick"
       >
-        <IconEllipsis />
+        <IconEllipsis size="18px" />
       </div>
       <template #dropdown>
         <div

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

@@ -5,6 +5,7 @@
     <ConversationCreateButton @click="openCreateConversation" />
 
     <TUIDialog
+      appendTo="body"
       :visible="showCreateConversation"
       :title="dialogTitles"
       :confirm-text="dialogConfirmText"

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

@@ -27,8 +27,9 @@
     flex-direction: column;
     padding: 0 10px;
     overflow-y: auto;
-    @include scrollbar.scrollbar-hidden();
     color: var(--text-color-primary);
+
+    @include scrollbar.scrollbar-hidden();
   }
 
   &__box {

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

@@ -24,7 +24,7 @@ import type {
   ConversationCreateUserSelectListProps,
   Friend,
 } from '../../../../types';
-import type { IUserPickerResult } from '../../../UserPicker';
+import type { UserPickerResult } from '../../../UserPicker';
 
 const props = defineProps<ConversationCreateUserSelectListProps>();
 
@@ -53,7 +53,7 @@ const renderFriendList = computed(() => friendList.value.map((item) => {
   };
 }));
 
-const handleSelectListUpdate = (list: IUserPickerResult) => {
+const handleSelectListUpdate = (list: UserPickerResult) => {
   const selectFriendList = friendList.value.filter(item => list.some(selected => selected.key === item.userID));
   emit('update:select-list', selectFriendList);
   props.setSelectList(selectFriendList);

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

@@ -6,9 +6,10 @@
   flex-direction: column;
   gap: 10px;
   overflow-y: scroll;
-  @include scrollbar.scrollbar-hidden();
   color: var(--text-color-primary);
 
+  @include scrollbar.scrollbar-hidden();
+
   &__box {
     display: flex;
     flex-direction: column;

package/src/components/ConversationList/ConversationList.scss

@@ -11,9 +11,4 @@
   text-align: initial;
   background-color: var(--bg-color-operate, #f5f5f5);
   color: var(--text-color-primary, #333);
-
-  &__content {
-    flex: 1;
-    overflow-y: auto;
-  }
 }