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

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { ref, nextTick } from 'vue';
+import { ref, nextTick, useCssModule } from 'vue';
+import cs from 'classnames';
 import { IconEditNameCard, TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 // Base props shared by all types
@@ -58,7 +59,9 @@ const SettingItemType = {
   DISPLAY: 'display',
 } as const;
 
+
 const { t } = useUIKit();
+const classes = useCssModule();
 
 // Edit state management
 const isEditing = ref(false);
@@ -152,46 +155,46 @@ function handleSwitchChange(event: Event) {
 <template>
   <div
     :class="[
-      'setting-item',
+      classes['setting-item'],
       {
-        [`setting-item--${type}`]: !!type,
-        'setting-item--disabled': disabled,
-        'setting-item--editing': isEditing,
-        'setting-item--error': !!errorMessage,
+        [classes[`setting-item--${type}`]]: !!type,
+        [classes['setting-item--disabled']]: disabled,
+        [classes['setting-item--editing']]: isEditing,
+        [classes['setting-item--error']]: !!errorMessage,
       }
     ]"
   >
-    <div class="setting-item__label">
+    <div :class="classes['setting-item__label']">
       {{ label }}
     </div>
-    <div class="setting-item__content-wrapper">
+    <div :class="classes['setting-item__content-wrapper']">
       <!-- Switch type content -->
       <label
         v-if="type === SettingItemType.SWITCH"
-        class="setting-item__switch"
+        :class="classes['setting-item__switch']"
       >
         <input
-          class="setting-item__switch-input"
+          :class="classes['setting-item__switch-input']"
           type="checkbox"
           :checked="value"
           :disabled="disabled"
           @change="handleSwitchChange"
         >
-        <span class="setting-item__switch-slider" />
+        <span :class="classes['setting-item__switch-slider']" />
       </label>
 
       <!-- Input type content -->
       <template v-else-if="type === SettingItemType.INPUT">
         <div
           v-if="isEditing && editable"
-          class="setting-item__edit-container"
+          :class="classes['setting-item__edit-container']"
         >
           <div>
             <input
               ref="inputRef"
               :class="[
-                'setting-item__input',
-                { 'setting-item__input--error': !!errorMessage }
+                classes['setting-item__input'],
+                { [classes['setting-item__input--error']]: !!errorMessage }
               ]"
               type="text"
               :value="editValue"
@@ -202,14 +205,14 @@ function handleSwitchChange(event: Event) {
             >
             <div
               v-if="errorMessage"
-              class="setting-item__error"
+              :class="classes['setting-item__error']"
             >
               {{ errorMessage }}
             </div>
           </div>
-          <div class="setting-item__actions">
+          <div :class="classes['setting-item__actions']">
             <TUIButton
-              class="setting-item__btn--cancel"
+              :class="classes['setting-item__btn--cancel']"
               color="gray"
               radius="rect"
               :disabled="disabled"
@@ -218,7 +221,7 @@ function handleSwitchChange(event: Event) {
               {{ t('ChatSetting.cancel') }}
             </TUIButton>
             <TUIButton
-              class="setting-item__btn--confirm"
+              :class="classes['setting-item__btn--confirm']"
               color="blue"
               radius="rect"
               :disabled="disabled || !!errorMessage || props.value === editValue"
@@ -230,14 +233,14 @@ function handleSwitchChange(event: Event) {
         </div>
         <div
           v-else
-          class="setting-item__content"
+          :class="classes['setting-item__content']"
         >
-          <span class="setting-item__value">
+          <span :class="[classes['setting-item__value'], { [classes['setting-item__value--placeholder']]: !value }]">
             {{ value || placeholder || t('ChatSetting.not_set') }}
           </span>
           <IconEditNameCard
             v-if="editable"
-            class="setting-item__edit-btn unique-icon-btn"
+            :class="cs(classes['setting-item__edit-btn'], 'unique-icon-btn')"
             :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
             @click="startEdit"
           />
@@ -248,14 +251,14 @@ function handleSwitchChange(event: Event) {
       <template v-else-if="type === SettingItemType.TEXTAREA">
         <div
           v-if="isEditing && editable"
-          class="setting-item__edit-container"
+          :class="classes['setting-item__edit-container']"
         >
           <div>
             <textarea
               ref="textareaRef"
               :class="[
-                'setting-item__textarea',
-                { 'setting-item__textarea--error': !!errorMessage }
+                classes['setting-item__textarea'],
+                { [classes['setting-item__textarea--error']]: !!errorMessage }
               ]"
               :value="editValue"
               :rows="rows || 3"
@@ -266,14 +269,14 @@ function handleSwitchChange(event: Event) {
             />
             <div
               v-if="errorMessage"
-              class="setting-item__error"
+              :class="classes['setting-item__error']"
             >
               {{ errorMessage }}
             </div>
           </div>
-          <div class="setting-item__actions">
+          <div :class="classes['setting-item__actions']">
             <TUIButton
-              class="setting-item__btn--cancel"
+              :class="classes['setting-item__btn--cancel']"
               color="gray"
               radius="rect"
               :disabled="disabled"
@@ -282,7 +285,7 @@ function handleSwitchChange(event: Event) {
               {{ t('ChatSetting.cancel') }}
             </TUIButton>
             <TUIButton
-              class="setting-item__btn--confirm"
+              :class="classes['setting-item__btn--confirm']"
               color="blue"
               radius="rect"
               :disabled="disabled || !!errorMessage || props.value === editValue"
@@ -294,14 +297,14 @@ function handleSwitchChange(event: Event) {
         </div>
         <div
           v-else
-          class="setting-item__content"
+          :class="classes['setting-item__content']"
         >
-          <span class="setting-item__value">
+          <span :class="[classes['setting-item__value'], { [classes['setting-item__value--placeholder']]: !value }]">
             {{ value || placeholder || t('ChatSetting.not_set') }}
           </span>
           <IconEditNameCard
             v-if="editable"
-            class="setting-item__edit-btn unique-icon-btn"
+            :class="cs(classes['setting-item__edit-btn'], 'unique-icon-btn')"
             :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
             @click="startEdit"
           />
@@ -311,7 +314,7 @@ function handleSwitchChange(event: Event) {
       <!-- Display type content -->
       <span
         v-else-if="type === SettingItemType.DISPLAY"
-        class="setting-item__value"
+        :class="classes['setting-item__value']"
       >
         {{ value || placeholder || t('ChatSetting.not_set') }}
       </span>
@@ -319,7 +322,7 @@ function handleSwitchChange(event: Event) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .setting-item {
   display: flex;
   flex: 1;
@@ -376,10 +379,11 @@ function handleSwitchChange(event: Event) {
     word-break: break-word;
 
     color: var(--text-color-secondary);
-  }
 
-  &__placeholder {
-    color: var(--text-color-placeholder);
+    &--placeholder {
+      font-style: italic;
+      color: var(--text-color-tertiary);
+    }
   }
 
   // Switch styles

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

@@ -1,5 +1,3 @@
-import { i18next } from '@tencentcloud/uikit-base-component-vue3';
-
 import enUS from './en-US';
 import zhCN from './zh-CN';
 
@@ -8,6 +6,6 @@ const resources = {
   'zh-CN': zhCN,
 };
 
-Object.entries(resources).forEach(([lng, resource]) => {
-  i18next.addResourceBundle(lng, 'translation', { ChatSetting: resource }, true, false);
-});
+export {
+  resources,
+}

package/src/components/ChatSetting/index.ts

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

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

@@ -0,0 +1,50 @@
+@use '../../../../styles/mixins' as mixins;
+.contact-blacklist-info {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+
+.contact-blacklist-info__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.contact-blacklist-info__main-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+
+.contact-blacklist-info__name {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  @include mixins.text-ellipsis();
+}
+
+.contact-blacklist-info__id,
+.contact-blacklist-info__intro {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  @include mixins.multi-line-ellipsis(3);
+}
+
+.contact-blacklist-info__actions {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="contact-blacklist-info">
+    <div class="contact-blacklist-info__header">
+      <div class="contact-blacklist-info__main-info">
+        <div class="contact-blacklist-info__name">
+          {{ displayName }}
+        </div>
+        <div class="contact-blacklist-info__id">
+          {{ t('TUIContact.ID') }}：{{ profile?.userID }}
+        </div>
+        <div class="contact-blacklist-info__intro">
+          {{ t('TUIContact.Personal signature') }}：{{ profile?.selfSignature || '' }}
+        </div>
+      </div>
+      <Avatar
+        :src="profile?.avatar"
+        :alt="displayName"
+        size="xl"
+      />
+    </div>
+
+    <div
+      v-if="showActions"
+      class="contact-blacklist-info__actions"
+    >
+      <TUIButton
+        type="primary"
+        size="big"
+        @click="handleRemoveFromBlacklist"
+      >
+        {{ t('TUIContact.Remove from blacklist') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import type { BlacklistInfoProps, UserProfile } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<BlacklistInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  removeFromBlacklist: [profile: UserProfile];
+  close: [];
+}>();
+
+const { t } = useUIKit();
+const { removeFromBlacklist } = useContactListState();
+
+const displayName = computed(() => props.profile?.nick || props.profile?.userID);
+
+const handleRemoveFromBlacklist = async () => {
+  try {
+    await removeFromBlacklist([props.profile?.userID]);
+    emit('removeFromBlacklist', props.profile);
+    emit('close');
+  } catch (err) {
+    console.error('[ContactInfo removeFromBlacklist] error', err);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './BlacklistInfo.scss';
+</style>

package/src/components/ContactList/ContactInfo/BlacklistInfo/index.ts

@@ -0,0 +1 @@
+export { default as BlacklistInfo } from './BlacklistInfo.vue';

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

@@ -0,0 +1,33 @@
+.contact-info {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-operate);
+}
+
+.contact-info__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-color-secondary);
+}
+
+.contact-info__header {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+.contact-info__title {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  line-height: 100%;
+  font-weight: 500;
+  padding-right: 24px;
+  color: var(--text-color-primary);
+}

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

@@ -0,0 +1,256 @@
+<template>
+  <div class="contact-info">
+    <header
+      v-if="isH5 && contactInfo"
+      class="contact-info__header"
+    >
+      <IconChevronLeft
+        size="24px"
+        @click="handleCloseContactInfo"
+      />
+      <h1 class="contact-info__title">
+        {{ contactGroupTitles[contactInfo?.type] }}
+      </h1>
+    </header>
+    <component
+      :is="getComponentByType(contactInfo?.type)"
+      v-if="contactInfo"
+      v-bind="getComponentProps(contactInfo.type)"
+      :show-actions="showActions"
+      @close="handleCloseContactInfo"
+      @send-message="handleSendMessage"
+      @delete-friend="handleDeleteFriend"
+      @add-to-blacklist="handleAddToBlacklist"
+      @remove-from-blacklist="handleRemoveFromBlacklist"
+      @update-friend-remark="handleUpdateFriendRemark"
+      @enter-group="handleEnterGroup"
+      @leave-group="handleLeaveGroup"
+      @dismiss-group="handleDismissGroup"
+      @friend-application-action="handleFriendApplicationAction"
+      @group-application-action="handleGroupApplicationAction"
+      @add-friend="handleAddFriend"
+      @join-group="handleJoinGroup"
+    />
+    <div
+      v-else-if="PlaceholderEmpty"
+      class="contact-info__empty"
+    >
+      <component :is="PlaceholderEmpty" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from 'vue';
+import { IconChevronLeft } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../states/ContactListState';
+import { ContactItemType } from '../../../types/contact';
+import { isH5 } from '../../../utils/env';
+import { useContactList } from '../hooks';
+import { BlacklistInfo } from './BlacklistInfo';
+import { FriendApplicationInfo } from './FriendApplicationInfo';
+import { FriendInfo } from './FriendInfo';
+import { GroupApplicationInfo } from './GroupApplicationInfo';
+import { GroupInfo } from './GroupInfo';
+import { SearchGroupInfo } from './SearchGroupInfo';
+import { SearchUserInfo } from './SearchUserInfo';
+import type { Friend, GroupModel, UserProfile } from '../../../types';
+import type { ContactInfoProps, ContactGroupItem, FriendApplication, GroupApplication } from '../../../types/contact';
+
+const props = withDefaults(defineProps<ContactInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  close: [];
+  sendMessage: [data: Friend];
+  deleteFriend: [data: Friend];
+  addToBlacklist: [data: Friend];
+  removeFromBlacklist: [data: UserProfile];
+  updateFriendRemark: [data: Friend];
+  enterGroup: [data: GroupModel];
+  leaveGroup: [data: GroupModel];
+  dismissGroup: [data: GroupModel];
+  friendApplicationAction: [action: 'accept' | 'refuse', application: FriendApplication];
+  groupApplicationAction: [action: 'accept' | 'refuse', application: GroupApplication];
+  addFriend: [data: UserProfile, wording: string];
+  joinGroup: [data: GroupModel, note: string];
+}>();
+
+const { friendList, groupList, blackList } = useContactListState();
+const { activeContact, setActiveContact, contactGroupTitles } = useContactList();
+
+const contactInfo = ref<ContactGroupItem | undefined>(undefined);
+
+const handleContactInfo = (contactGroupItem?: ContactGroupItem) => {
+  const newContactInfo = contactGroupItem ? { ...contactGroupItem } : undefined;
+
+  if (contactGroupItem?.type === ContactItemType.SEARCH_USER) {
+    const blackUser = blackList.value.find(
+      userInfo => userInfo.userID === (contactGroupItem?.data as UserProfile).userID,
+    );
+    const friend = friendList.value.find(
+      userInfo => userInfo.userID === (contactGroupItem?.data as UserProfile).userID,
+    );
+
+    if (blackUser && newContactInfo) {
+      newContactInfo.type = ContactItemType.BLACK;
+      newContactInfo.data = blackUser;
+    } else if (friend && newContactInfo) {
+      newContactInfo.type = ContactItemType.FRIEND;
+      newContactInfo.data = friend;
+    }
+  } else if (contactGroupItem?.type === ContactItemType.SEARCH_GROUP) {
+    const group = groupList.value.find(
+      g => g.groupID === (contactGroupItem?.data as GroupModel).groupID,
+    );
+    if (group && newContactInfo) {
+      newContactInfo.type = ContactItemType.GROUP;
+      newContactInfo.data = group;
+    }
+  } else if (contactGroupItem?.type === ContactItemType.FRIEND) {
+    const blackUser = blackList.value.find(
+      userInfo => userInfo.userID === (contactGroupItem?.data as Friend).userID,
+    );
+    if (blackUser && newContactInfo) {
+      newContactInfo.type = ContactItemType.BLACK;
+      newContactInfo.data = blackUser;
+    }
+  }
+
+  contactInfo.value = newContactInfo;
+};
+
+watch(
+  () => props.contactItem,
+  (newContactItem, oldContactItem) => {
+    if (newContactItem !== oldContactItem) {
+      setActiveContact(newContactItem);
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => activeContact.value,
+  (newActiveContact) => {
+    handleContactInfo(newActiveContact || undefined);
+  },
+  { immediate: true },
+);
+
+watch(
+  (): [GroupModel[], ContactGroupItem | undefined] => [groupList.value, activeContact.value],
+  ([newGroupList, newActiveContact]) => {
+    if (newGroupList.length > 0 && newActiveContact && newActiveContact.type === ContactItemType.GROUP) {
+      const group = newGroupList.find(
+        g => g?.groupID === (newActiveContact?.data as GroupModel)?.groupID,
+      );
+      if (group) {
+        if (newActiveContact?.data !== group) {
+          setActiveContact({
+            type: ContactItemType.GROUP,
+            data: group,
+          });
+        }
+      } else {
+        setActiveContact(undefined);
+      }
+    }
+  },
+);
+
+watch(
+  (): [UserProfile[], Friend[], ContactGroupItem | undefined] => [blackList.value, friendList.value, activeContact.value],
+  ([newBlackList, newFriendList, newActiveContact]) => {
+    if (newActiveContact) {
+      const blackUser = newBlackList?.find(
+        userInfo => userInfo?.userID === (newActiveContact?.data as UserProfile)?.userID,
+      );
+      const user = newFriendList?.find(
+        userInfo => userInfo?.userID === (newActiveContact?.data as UserProfile)?.userID,
+      );
+
+      if (blackUser && newActiveContact.type !== ContactItemType.BLACK) {
+        setActiveContact({
+          type: ContactItemType.BLACK,
+          data: blackUser,
+        });
+      } else if (user && newActiveContact.type === ContactItemType.FRIEND && newActiveContact.data !== user) {
+        setActiveContact({
+          type: ContactItemType.FRIEND,
+          data: user,
+        });
+      }
+    }
+  },
+);
+
+const getComponentByType = (type?: ContactItemType) => {
+  switch (type) {
+    case ContactItemType.FRIEND:
+      return FriendInfo;
+    case ContactItemType.GROUP:
+      return GroupInfo;
+    case ContactItemType.BLACK:
+      return BlacklistInfo;
+    case ContactItemType.FRIEND_REQUEST:
+      return FriendApplicationInfo;
+    case ContactItemType.GROUP_REQUEST:
+      return GroupApplicationInfo;
+    case ContactItemType.SEARCH_USER:
+      return SearchUserInfo;
+    case ContactItemType.SEARCH_GROUP:
+      return SearchGroupInfo;
+    default:
+      return 'div';
+  }
+};
+
+const getComponentProps = (type?: ContactItemType) => {
+  if (!contactInfo.value) {
+    return {};
+  }
+
+  switch (type) {
+    case ContactItemType.FRIEND:
+      return { friend: contactInfo.value.data };
+    case ContactItemType.GROUP:
+      return { group: contactInfo.value.data };
+    case ContactItemType.BLACK:
+      return { profile: contactInfo.value.data };
+    case ContactItemType.FRIEND_REQUEST:
+      return { application: contactInfo.value.data };
+    case ContactItemType.GROUP_REQUEST:
+      return { application: contactInfo.value.data };
+    case ContactItemType.SEARCH_USER:
+      return { user: contactInfo.value.data };
+    case ContactItemType.SEARCH_GROUP:
+      return { group: contactInfo.value.data };
+    default:
+      return {};
+  }
+};
+
+const handleCloseContactInfo = () => {
+  setActiveContact(undefined);
+  emit('close');
+};
+
+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 handleEnterGroup = (data: GroupModel) => emit('enterGroup', data);
+const handleLeaveGroup = (data: GroupModel) => emit('leaveGroup', data);
+const handleDismissGroup = (data: GroupModel) => emit('dismissGroup', data);
+const handleFriendApplicationAction = (action: 'accept' | 'refuse', application: FriendApplication) => emit('friendApplicationAction', action, application);
+const handleGroupApplicationAction = (action: 'accept' | 'refuse', application: GroupApplication) => emit('groupApplicationAction', action, application);
+const handleAddFriend = (data: UserProfile, wording: string) => emit('addFriend', data, wording);
+const handleJoinGroup = (data: GroupModel, note: string) => emit('joinGroup', data, note);
+</script>
+
+<style scoped lang="scss">
+@import './ContactInfo.scss';
+</style>