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

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';

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

@@ -0,0 +1,111 @@
+@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
+@use '../../../../styles/mixins' as mixins;
+.contact-search-group-info {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+
+.contact-search-group-info__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.contact-search-group-info__main-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+
+.contact-search-group-info__name {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  @include mixins.text-ellipsis();
+}
+
+.contact-search-group-info__id,
+.contact-search-group-info__intro {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  @include mixins.multi-line-ellipsis(3);
+}
+
+.contact-search-group-info__status {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.contact-search-group-info__status--success {
+  background-color: var(--success-color-bg);
+  color: var(--success-color);
+}
+
+.contact-search-group-info__status--error {
+  background-color: var(--error-color-bg);
+  color: var(--error-color);
+}
+
+.contact-search-group-info__form {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.contact-search-group-info__form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+}
+
+.contact-search-group-info__form-input-wrapper {
+  position: relative;
+  background-color: var(--bg-color-operate);
+}
+
+.contact-search-group-info__form-input {
+  width: 100%;
+  height: 80px;
+  padding: 8px 12px;
+  border: none;
+  font-size: 14px;
+  color: var(--text-color-primary);
+  resize: none;
+  @include scrollbar.scrollbar-hidden();
+}
+
+.contact-search-group-info__form-input:focus {
+  outline: none;
+  border: none;
+}
+
+.contact-search-group-info__form-counter {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: var(--text-color-secondary);
+}
+
+.contact-search-group-info__actions {
+  padding-top: 64px;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,147 @@
+<template>
+  <div class="contact-search-group-info">
+    <div class="contact-search-group-info__header">
+      <div class="contact-search-group-info__main-info">
+        <div class="contact-search-group-info__name">
+          {{ displayName }}
+        </div>
+        <div class="contact-search-group-info__id">
+          {{ t('TUIContact.Group ID') }}：{{ group.groupID }}
+        </div>
+        <div class="contact-search-group-info__intro">
+          {{ t('TUIContact.Group type') }}：{{ getGroupTypeName(group.type) }}
+        </div>
+        <div class="contact-search-group-info__intro">
+          {{ t('TUIContact.Group introduction') }}：{{ group.introduction || t('TUIContact.No introduction') }}
+        </div>
+      </div>
+      <Avatar
+        :src="group.avatar"
+        :alt="displayName"
+        size="xl"
+      />
+    </div>
+
+    <template v-if="status !== 'idle'">
+      <div :class="statusClasses">
+        {{ status === 'success'
+          ? t('TUIContact.Group application sent, waiting for admin approval')
+          : errorMessage }}
+      </div>
+    </template>
+    <template v-else>
+      <div class="contact-search-group-info__form">
+        <label class="contact-search-group-info__form-label">
+          {{ t('TUIContact.Application info') }}
+        </label>
+        <div class="contact-search-group-info__form-input-wrapper">
+          <textarea
+            v-model="note"
+            class="contact-search-group-info__form-input"
+            name="joinGroupNote"
+            :placeholder="t('TUIContact.Please enter application info...')"
+            :maxlength="TEXTAREA_LENGTH_LIMIT"
+          />
+          <div class="contact-search-group-info__form-counter">
+            {{ note.length }}/{{ TEXTAREA_LENGTH_LIMIT }}
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div
+      v-if="showActions && status !== 'success'"
+      class="contact-search-group-info__actions"
+    >
+      <TUIButton
+        type="primary"
+        size="big"
+        :loading="loading"
+        @click="handleJoinGroup"
+      >
+        {{ t('TUIContact.Apply to join group') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import ChatEngine from '@tencentcloud/chat-uikit-engine';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import { TEXTAREA_LENGTH_LIMIT } from '../../constants/const';
+import type { SearchGroupInfoProps } from '../../../../types/contact';
+import type { GroupModel } from '../../../../types/engine';
+import type { IGroupModel } from '@tencentcloud/chat-uikit-engine';
+
+const props = withDefaults(defineProps<SearchGroupInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  joinGroup: [group: GroupModel, note: string];
+}>();
+
+const { t } = useUIKit();
+const { joinGroup } = useContactListState();
+
+const note = ref('');
+const loading = ref(false);
+const status = ref<'idle' | 'success' | 'error'>('idle');
+const errorMessage = ref('');
+
+const displayName = computed(() => props.group.name || props.group.groupID);
+
+const statusClasses = computed(() => [
+  'contact-search-group-info__status',
+  `contact-search-group-info__status--${status.value}`,
+]);
+
+const getGroupTypeName = (type: IGroupModel['type']) => {
+  switch (type) {
+    case ChatEngine.TYPES.GRP_WORK:
+      return t('TUIContact.Work group');
+    case ChatEngine.TYPES.GRP_PUBLIC:
+      return t('TUIContact.Public group');
+    case ChatEngine.TYPES.GRP_MEETING:
+      return t('TUIContact.Meeting group');
+    case ChatEngine.TYPES.GRP_AVCHATROOM:
+      return t('TUIContact.Live group');
+    case ChatEngine.TYPES.GRP_COMMUNITY:
+      return t('TUIContact.Community');
+    default:
+      return t('TUIContact.Unknown');
+  }
+};
+
+const handleJoinGroup = async () => {
+  if (loading.value) {
+    return;
+  }
+
+  loading.value = true;
+  status.value = 'idle';
+  errorMessage.value = '';
+
+  const applyMessage = note.value.trim();
+  emit('joinGroup', props.group, applyMessage);
+  try {
+    await joinGroup({
+      groupID: props.group.groupID,
+      applyMessage,
+    });
+    status.value = 'success';
+  } catch (error: any) {
+    status.value = 'error';
+    errorMessage.value = error?.message || t('TUIContact.Apply to join group failed');
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './SearchGroupInfo.scss';
+</style>

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

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

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

@@ -0,0 +1,111 @@
+@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
+@use '../../../../styles/mixins' as mixins;
+.contact-search-user-info {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+
+.contact-search-user-info__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.contact-search-user-info__main-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+
+.contact-search-user-info__name {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  @include mixins.text-ellipsis();
+}
+
+.contact-search-user-info__id,
+.contact-search-user-info__intro {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  @include mixins.multi-line-ellipsis(3);
+}
+
+.contact-search-user-info__status {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.contact-search-user-info__status--success {
+  background-color: var(--success-color-bg);
+  color: var(--success-color);
+}
+
+.contact-search-user-info__status--error {
+  background-color: var(--error-color-bg);
+  color: var(--error-color);
+}
+
+.contact-search-user-info__form {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.contact-search-user-info__form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+}
+
+.contact-search-user-info__form-input-wrapper {
+  position: relative;
+  background-color: var(--bg-color-operate);
+}
+
+.contact-search-user-info__form-input {
+  width: 100%;
+  height: 80px;
+  padding: 8px 12px;
+  border: none;
+  font-size: 14px;
+  color: var(--text-color-primary);
+  resize: none;
+  @include scrollbar.scrollbar-hidden();
+}
+
+.contact-search-user-info__form-input:focus {
+  outline: none;
+  border: none;
+}
+
+.contact-search-user-info__form-counter {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: var(--text-color-secondary);
+}
+
+.contact-search-user-info__actions {
+  padding-top: 64px;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,128 @@
+<template>
+  <div class="contact-search-user-info">
+    <div class="contact-search-user-info__header">
+      <div class="contact-search-user-info__main-info">
+        <div class="contact-search-user-info__name">
+          {{ displayName }}
+        </div>
+        <div class="contact-search-user-info__id">
+          {{ t('TUIContact.ID') }}：{{ user.userID }}
+        </div>
+        <div class="contact-search-user-info__intro">
+          {{ t('TUIContact.Personal signature') }}：{{ user.selfSignature || '' }}
+        </div>
+      </div>
+      <Avatar
+        :src="user.avatar"
+        :alt="displayName"
+        size="xl"
+      />
+    </div>
+
+    <div
+      v-if="status !== 'idle'"
+      :class="[
+        'contact-search-user-info__status',
+        `contact-search-user-info__status--${status}`
+      ]"
+    >
+      {{ status === 'success'
+        ? t('TUIContact.Friend request sent, waiting for confirmation')
+        : errorMessage }}
+    </div>
+
+    <div
+      v-else
+      class="contact-search-user-info__form"
+    >
+      <label class="contact-search-user-info__form-label">
+        {{ t('TUIContact.Application info') }}
+      </label>
+      <div class="contact-search-user-info__form-input-wrapper">
+        <textarea
+          v-model="wording"
+          class="contact-search-user-info__form-input"
+          name="addFriendWording"
+          :placeholder="t('TUIContact.Please enter application info...')"
+          :maxlength="TEXTAREA_LENGTH_LIMIT"
+        />
+        <div class="contact-search-user-info__form-counter">
+          {{ wording.length }}/{{ TEXTAREA_LENGTH_LIMIT }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="showActions && status !== 'success'"
+      class="contact-search-user-info__actions"
+    >
+      <TUIButton
+        type="primary"
+        size="big"
+        :loading="loading"
+        @click="handleAddFriend"
+      >
+        {{ t('TUIContact.Apply to add friend') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import { TEXTAREA_LENGTH_LIMIT } from '../../constants/const';
+import type { SearchUserInfoProps, UserProfile } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<SearchUserInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  addFriend: [user: UserProfile, wording: string];
+  close: [];
+}>();
+
+const { t } = useUIKit();
+const { addFriend } = useContactListState();
+
+const wording = ref('');
+const loading = ref(false);
+const status = ref<'idle' | 'success' | 'error'>('idle');
+const errorMessage = ref('');
+
+const displayName = computed(() => props.user.nick || props.user.userID);
+
+const handleAddFriend = async () => {
+  if (loading.value) {
+    return;
+  }
+
+  loading.value = true;
+  status.value = 'idle';
+  errorMessage.value = '';
+
+  const addWording = wording.value.trim();
+  emit('addFriend', props.user, addWording);
+  try {
+    await addFriend({
+      userID: props.user.userID,
+      addSource: 'AddSource_Type_Web',
+      wording: addWording,
+    });
+
+    status.value = 'success';
+  } catch (error: any) {
+    status.value = 'error';
+    errorMessage.value = error?.message || t('TUIContact.Add friend failed');
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './SearchUserInfo.scss';
+</style>

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

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