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

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

@@ -0,0 +1,219 @@
+<template>
+  <div class="contact-friend-info">
+    <div class="contact-friend-info__header">
+      <div class="contact-friend-info__main-info">
+        <div class="contact-friend-info__name">
+          {{ displayName }}
+        </div>
+        <div class="contact-friend-info__id">
+          {{ t('TUIContact.ID') }}：{{ friend.userID }}
+        </div>
+        <div class="contact-friend-info__intro">
+          {{ t('TUIContact.Personal signature') }}：{{ friend?.selfSignature || '' }}
+        </div>
+      </div>
+      <Avatar
+        :src="friend.avatar"
+        :alt="displayName"
+        size="xl"
+      />
+    </div>
+
+    <div class="contact-friend-info__rows">
+      <div class="contact-friend-info__row">
+        <div class="contact-friend-info__row-label">
+          {{ t('TUIContact.Remark name') }}
+        </div>
+        <div class="contact-friend-info__row-value">
+          <template v-if="isEditing">
+            <TUIInput
+              v-model="remarkInput"
+              :max-length="32"
+              :disabled="remarkLoading"
+              auto-focus
+              @blur="handleRemarkSave"
+              @keydown.enter="handleRemarkSave"
+            />
+            <TUIButton
+              size="small"
+              type="primary"
+              :loading="remarkLoading"
+              @click="handleRemarkSave"
+            >
+              {{ t('TUIContact.Save') }}
+            </TUIButton>
+          </template>
+          <template v-else>
+            <span class="remark-edit">
+              {{ remark || t('TUIContact.None') }}
+            </span>
+            <IconEditNameCard
+              class="remark-edit-icon"
+              @click="startEditRemark"
+              />
+          </template>
+        </div>
+      </div>
+
+      <div class="contact-friend-info__row">
+        <div class="contact-friend-info__row-label">
+          {{ t('TUIContact.Add to blacklist') }}
+        </div>
+        <div class="contact-friend-info__row-value">
+          <TUISwitch
+            v-model="isBlacklisted"
+            :disabled="blackLoading"
+            @change="handleBlacklistChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="showActions"
+      class="contact-friend-info__actions"
+    >
+      <TUIButton
+        type="default"
+        size="big"
+        color="red"
+        @click="visible = true;"
+      >
+        {{ t('TUIContact.Delete friend') }}
+      </TUIButton>
+      <TUIButton
+        type="primary"
+        size="big"
+        @click="handleSendMessage"
+      >
+        {{ t('TUIContact.Send message') }}
+      </TUIButton>
+      <TUIDialog
+        :visible="visible"
+        :title="t('TUIContact.Confirm delete friend')"
+        :confirm-text="t('TUIContact.Submit')"
+        :cancel-text="t('TUIContact.Cancel')"
+        @confirm="handleDeleteFriend"
+        @cancel="visible = false;"
+        @close="visible = false;"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useUIKit, TUIButton, TUIInput, TUISwitch, IconEditNameCard, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { useConversationListState } from '../../../../states/ConversationListState';
+import { Avatar } from '../../../Avatar';
+import type { Friend, FriendInfoProps } from '../../../../types';
+
+const props = withDefaults(defineProps<FriendInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  close: [];
+  sendMessage: [friend: Friend];
+  deleteFriend: [friend: Friend];
+  addToBlacklist: [friend: Friend];
+  updateFriendRemark: [friend: Friend, remark: string];
+}>();
+
+const { t } = useUIKit();
+const {
+  deleteFriend,
+  addToBlacklist,
+  removeFromBlacklist,
+  setFriendRemark,
+  blackList,
+} = useContactListState();
+const { setActiveConversation } = useConversationListState();
+
+const isEditing = ref(false);
+const currentUserID = ref('');
+const remark = ref(props.friend.remark || '');
+const remarkInput = ref(props.friend.remark || '');
+const remarkLoading = ref(false);
+const blackLoading = ref(false);
+const visible = ref(false);
+
+watch(() => props.friend.remark, (newRemark) => {
+  remark.value = newRemark || '';
+  remarkInput.value = newRemark || '';
+});
+
+watch(() => props.friend.userID, () => {
+  if (props.friend.userID !== currentUserID.value) {
+    isEditing.value = false;
+  }
+  currentUserID.value = props.friend.userID;
+});
+
+const displayName = computed(() => remark.value || props.friend?.nick || props.friend.userID);
+
+const isBlacklisted = computed(() => blackList.value.some(item => item.userID === props.friend.userID));
+
+const startEditRemark = () => {
+  remarkInput.value = remark.value;
+  isEditing.value = true;
+};
+
+const handleRemarkSave = async () => {
+  if (remarkInput.value.trim() === remark.value) {
+    isEditing.value = false;
+    return;
+  }
+
+  remarkLoading.value = true;
+  try {
+    await setFriendRemark({ userID: props.friend.userID, remark: remarkInput.value.trim() });
+    remark.value = remarkInput.value.trim();
+    isEditing.value = false;
+    emit('updateFriendRemark', { ...props.friend, remark: remarkInput.value.trim() }, remarkInput.value.trim());
+  } catch (err) {
+    console.error('[ContactInfo setFriendRemark] error', err);
+  } finally {
+    remarkLoading.value = false;
+  }
+};
+
+const handleBlacklistChange = async (checked: string | number | boolean) => {
+  blackLoading.value = true;
+  try {
+    if (checked) {
+      await addToBlacklist([props.friend.userID]);
+      emit('addToBlacklist', props.friend);
+    } else {
+      await removeFromBlacklist([props.friend.userID]);
+    }
+  } catch (err) {
+    console.error(`[ContactInfo ${checked ? 'addToBlacklist' : 'removeFromBlacklist'}] error`, err);
+  } finally {
+    blackLoading.value = false;
+  }
+};
+
+const handleDeleteFriend = async () => {
+  try {
+    await deleteFriend({ userIDList: [props.friend.userID] });
+    emit('deleteFriend', props.friend);
+  } catch (err) {
+    console.error('[ContactInfo deleteFriend] error', err);
+  }
+
+  visible.value = false;
+  emit('close');
+};
+
+const handleSendMessage = () => {
+  emit('sendMessage', props.friend);
+  setActiveConversation(`C2C${props.friend.userID}`);
+  emit('close');
+};
+</script>
+
+<style scoped lang="scss">
+@import './FriendInfo.scss';
+</style>

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

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

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

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

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="contact-group-application-info">
+    <div class="contact-group-application-info__header">
+      <div class="contact-group-application-info__main-info">
+        <div class="contact-group-application-info__name">
+          {{ displayName }}
+        </div>
+        <div class="contact-group-application-info__id">
+          {{ t('TUIContact.ID') }}：{{ application.applicant }}
+        </div>
+        <div class="contact-group-application-info__intro">
+          {{ applicationText }}
+        </div>
+      </div>
+      <Avatar
+        :alt="displayName"
+        size="xl"
+      />
+    </div>
+    <div class="contact-group-application-info__rows">
+      <div class="contact-group-application-info__row">
+        <div class="contact-group-application-info__row-label">
+          {{ t('TUIContact.Application note') }}：
+        </div>
+        <div class="contact-group-application-info__row-value">
+          {{ application.note || t('TUIContact.None') }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="showActions"
+      class="contact-group-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 { computed } from 'vue';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import type { GroupApplication, GroupApplicationInfoProps } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<GroupApplicationInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  accept: [application: GroupApplication];
+  refuse: [application: GroupApplication];
+  groupApplicationAction: [action: 'accept' | 'refuse', application: GroupApplication];
+  close: [];
+}>();
+
+const { t } = useUIKit();
+const { acceptGroupApplication, refuseGroupApplication } = useContactListState();
+
+const displayName = computed(() => props.application.applicantNick || props.application.applicant);
+const groupName = computed(() => props.application.groupName || props.application.groupID);
+const applicationText = computed(() =>
+  props.application.applicationType === 0
+    ? `${t('TUIContact.Apply to join group')}"${groupName.value}"`
+    : `${t('TUIContact.Invite you to join group')}"${groupName.value}"`,
+);
+
+const handleAccept = () => {
+  emit('accept', props.application);
+  emit('groupApplicationAction', 'accept', props.application);
+  acceptGroupApplication({ application: props.application });
+  emit('close');
+};
+
+const handleRefuse = () => {
+  emit('refuse', props.application);
+  emit('groupApplicationAction', 'refuse', props.application);
+  refuseGroupApplication({ application: props.application });
+  emit('close');
+};
+</script>
+
+<style scoped lang="scss">
+@import './GroupApplicationInfo.scss';
+</style>

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

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

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

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

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="contact-group-info">
+    <div class="contact-group-info__header">
+      <div class="contact-group-info__main-info">
+        <div class="contact-group-info__name">
+          {{ displayName }}
+        </div>
+        <div class="contact-group-info__id">
+          {{ t('TUIContact.Group ID') }}：{{ group.groupID }}
+        </div>
+        <div class="contact-group-info__id">
+          {{ t('TUIContact.Group type') }}：{{ group.type }}
+        </div>
+        <div class="contact-group-info__intro">
+          {{ t('TUIContact.Group introduction') }}：{{ group.introduction || t('TUIContact.No introduction') }}
+        </div>
+      </div>
+      <Avatar
+        :src="group.avatar"
+        :alt="displayName"
+        size="xl"
+      />
+    </div>
+
+    <div
+      v-if="showActions"
+      class="contact-group-info__actions"
+    >
+      <TUIButton
+        v-if="canDismissGroup"
+        type="default"
+        size="big"
+        color="red"
+        @click="visible = true;"
+      >
+        {{ t('TUIContact.dismiss group') }}
+      </TUIButton>
+
+      <TUIButton
+        v-if="canQuitGroup"
+        type="default"
+        size="big"
+        color="red"
+        @click="visible = true"
+      >
+        {{ t('TUIContact.quit group') }}
+      </TUIButton>
+
+      <TUIButton
+        type="primary"
+        size="big"
+        @click="handleEnterGroup"
+      >
+        {{ t('TUIContact.Enter group chat') }}
+      </TUIButton>
+      <TUIDialog
+        :visible="visible"
+        :title="canDismissGroup ? t('TUIContact.Confirm dismiss group'): t('TUIContact.Confirm quit group')"
+        :confirm-text="t('TUIContact.Submit')"
+        :cancel-text="t('TUIContact.Cancel')"
+        @confirm="handleGroupAction"
+        @cancel="visible = false;"
+        @close="visible = false;"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { TUIButton, TUIDialog, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useConversationListState } from '../../../../states/ConversationListState';
+import { useGroupSettingState } from '../../../../states/GroupSettingState';
+import { GroupMemberRole, GroupPermission } from '../../../../states/GroupSettingState/types';
+import { Avatar } from '../../../Avatar';
+import type { GroupType } from '../../../../states/GroupSettingState/types';
+import type { GroupInfoProps, GroupModel } from '../../../../types';
+
+const props = withDefaults(defineProps<GroupInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  close: [];
+  enterGroup: [group: GroupModel];
+  leaveGroup: [group: GroupModel];
+  dismissGroup: [group: GroupModel];
+}>();
+
+const { t } = useUIKit();
+const { quitGroup, dismissGroup, hasPermission } = useGroupSettingState();
+const { setActiveConversation } = useConversationListState();
+
+const visible = ref(false);
+
+const displayName = computed(() => props.group.name || props.group.groupID);
+
+const role = computed(() => (props.group.selfInfo?.role as GroupMemberRole) || GroupMemberRole.COMMON);
+const groupType = computed(() => props.group.type as unknown as GroupType);
+
+const canDismissGroup = computed(() =>
+  hasPermission(GroupPermission.DISMISS_GROUP, role.value, groupType.value),
+);
+const canQuitGroup = computed(() =>
+  hasPermission(GroupPermission.QUIT_GROUP, role.value, groupType.value),
+);
+
+const handleEnterGroup = () => {
+  setActiveConversation(`GROUP${props.group.groupID}`);
+  emit('enterGroup', props.group);
+  emit('close');
+};
+
+const handleLeaveGroup = async () => {
+  try {
+    await quitGroup(props.group.groupID);
+    emit('leaveGroup', props.group);
+  } catch (err) {
+    console.error('[ContactInfo quitGroup] error', err);
+  }
+  visible.value = false;
+  emit('close');
+};
+
+const handleDismissGroup = async () => {
+  try {
+    await dismissGroup(props.group.groupID);
+    emit('dismissGroup', props.group);
+  } catch (err) {
+    console.error('[ContactInfo dismissGroup] error', err);
+  }
+  visible.value = false;
+  emit('close');
+};
+
+const handleGroupAction = () => {
+  if (canDismissGroup.value) {
+    handleDismissGroup();
+  } else {
+    handleLeaveGroup();
+  }
+}
+</script>
+<style scoped lang="scss">
+@import './GroupInfo.scss';
+</style>

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

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