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

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

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

@@ -0,0 +1,8 @@
+export { default as ContactInfo } from './ContactInfo.vue';
+export * from './FriendInfo';
+export * from './GroupInfo';
+export * from './BlacklistInfo';
+export * from './FriendApplicationInfo';
+export * from './GroupApplicationInfo';
+export * from './SearchUserInfo';
+export * from './SearchGroupInfo';

package/src/components/ContactList/ContactList.scss

@@ -0,0 +1,124 @@
+@use '../../styles/mixins/_scrollbar.scss' as scrollbar;
+
+.contact-list {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-operate);
+
+  &__container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__search {
+    padding: 12px;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+    @include scrollbar.scrollbar-hidden();
+    padding: 6px 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__group {
+    margin-bottom: 8px;
+  }
+
+  &__group-header {
+    padding: 8px 20px;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--bg-color-secondary);
+    }
+
+    &:focus {
+      outline: none;
+      background-color: var(--bg-color-secondary);
+    }
+  }
+
+  &__group-title {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-primary);
+    gap: 8px;
+    flex: 1;
+  }
+
+  &__group-icon {
+    color: var(--text-color-secondary);
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease;
+    &--expanded {
+      transform: rotate(0deg);
+    }
+  }
+
+  &__group-name {
+    flex: 1;
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 400;
+  }
+
+  &__unread-badge {
+    background-color: var(--text-color-error);
+    color: var(--bg-color-topbar);
+    border-radius: 16px;
+    padding: 2px 6px;
+    font-size: 12px;
+    min-width: 16px;
+    height: 16px;
+    text-align: center;
+    margin-left: 8px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+  }
+
+  &__group-content {
+    background-color: var(--bg-color-operate);
+    padding: 0;
+  }
+
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: var(--text-color-tertiary);
+    flex-direction: column;
+  }
+
+  &__empty-text {
+    font-size: 14px;
+    margin-top: 16px;
+  }
+}