tuikit-atomicx-vue3 0.1.1 → 3.3.0

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,264 @@
+<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,
+  PlaceholderEmpty: undefined,
+  FriendInfoComponent: undefined,
+  GroupInfoComponent: undefined,
+  BlacklistInfoComponent: undefined,
+  FriendApplicationInfoComponent: undefined,
+  GroupApplicationInfoComponent: undefined,
+  SearchGroupInfoComponent: undefined,
+  SearchUserInfoComponent: undefined,
+});
+
+const emit = defineEmits<{
+  close: [];
+  sendMessage: [data: Friend];
+  deleteFriend: [data: Friend];
+  addToBlacklist: [data: Friend];
+  removeFromBlacklist: [data: UserProfile];
+  updateFriendRemark: [data: Friend, remark: string];
+  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 props.FriendInfoComponent || FriendInfo;
+    case ContactItemType.GROUP:
+      return props.GroupInfoComponent || GroupInfo;
+    case ContactItemType.BLACK:
+      return props.BlacklistInfoComponent || BlacklistInfo;
+    case ContactItemType.FRIEND_REQUEST:
+      return props.FriendApplicationInfoComponent || FriendApplicationInfo;
+    case ContactItemType.GROUP_REQUEST:
+      return props.GroupApplicationInfoComponent || GroupApplicationInfo;
+    case ContactItemType.SEARCH_USER:
+      return props.SearchUserInfoComponent || SearchUserInfo;
+    case ContactItemType.SEARCH_GROUP:
+      return props.SearchGroupInfoComponent || 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, 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);
+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>

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

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

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="contact-friend-application-info">
+    <div class="contact-friend-application-info__header">
+      <div class="contact-friend-application-info__main-info">
+        <div class="contact-friend-application-info__name">
+          {{ application?.nick || application?.userID }}
+        </div>
+        <div class="contact-friend-application-info__id">
+          {{ t('TUIContact.ID') }}：{{ application?.userID }}
+        </div>
+      </div>
+      <Avatar
+        :src="application.avatar"
+        :alt="application?.nick || application.userID"
+        size="xl"
+      />
+    </div>
+    <div class="contact-friend-application-info__rows">
+      <div class="contact-friend-application-info__row">
+        <div class="contact-friend-application-info__row-label">
+          {{ t('TUIContact.Verification info') }}：
+        </div>
+        <div class="contact-friend-application-info__row-value">
+          {{ application?.wording || t('TUIContact.None') }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="showActions"
+      class="contact-friend-application-info__actions"
+    >
+      <TUIButton
+        type="default"
+        size="big"
+        color="red"
+        @click="handleRefuse"
+      >
+        {{ t('TUIContact.Refuse') }}
+      </TUIButton>
+      <TUIButton
+        type="primary"
+        size="big"
+        @click="handleAccept"
+      >
+        {{ t('TUIContact.Agree') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import type { FriendApplication, FriendApplicationInfoProps } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<FriendApplicationInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  accept: [application: FriendApplication];
+  refuse: [application: FriendApplication];
+  friendApplicationAction: [action: 'accept' | 'refuse', application: FriendApplication];
+  close: [];
+}>();
+
+const { t } = useUIKit();
+const { acceptFriendApplication, refuseFriendApplication } = useContactListState();
+
+const handleAccept = () => {
+  emit('accept', props.application);
+  emit('friendApplicationAction', 'accept', props.application);
+  acceptFriendApplication(props.application);
+  emit('close');
+};
+
+const handleRefuse = () => {
+  emit('refuse', props.application);
+  emit('friendApplicationAction', 'refuse', props.application);
+  refuseFriendApplication(props.application.userID);
+  emit('close');
+};
+</script>
+
+<style scoped lang="scss">
+@import './FriendApplicationInfo.scss';
+</style>

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

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

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

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