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

package/src/components/ConversationList/ConversationCreate/ConversationCreateGroupDetail/ConversationCreateGroupDetail.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    :class="[
+      $style.conversationCreateGroupDetail,
+      isH5 && $style['conversationCreateGroupDetail--h5'],
+    ]"
+  >
+    <div
+      v-if="pageState !== PageStateTypes.GROUP_TYPE"
+      :class="$style.conversationCreateGroupDetail__main"
+    >
+      <div :class="$style.conversationCreateGroupDetail__box">
+        <label
+          :class="$style.from__label"
+          for="group-avatar"
+        >{{ t('TUIConversation.Group Avatar') }}</label>
+        <Avatar
+          size="sm"
+          :src="groupInfo.avatar"
+        />
+      </div>
+      <div :class="$style.conversationCreateGroupDetail__box">
+        <label
+          :class="$style.from__label"
+          for="group-name"
+        >{{ t('TUIConversation.Group Name') }}</label>
+        <TUIInput
+          id="group-name"
+          v-model="groupInfo.name"
+          clearable
+          :class="$style.conversationCreateGroupDetail__inputText"
+          :max-length="30"
+          :border="false"
+          :placeholder="t('TUIConversation.Group Name')"
+          @update:model-value="(value) => groupInfoChange(String(value), GroupLabelTypes.NAME)"
+        />
+      </div>
+
+      <div :class="$style.conversationCreateGroupDetail__box">
+        <label
+          :class="$style.from__label"
+          for="group-id"
+        >{{ t('TUIConversation.Group ID') }}</label>
+        <TUIInput
+          id="group-id"
+          v-model="groupInfo.groupID"
+          clearable
+          :class="$style.conversationCreateGroupDetail__inputText"
+          :border="false"
+          :placeholder="t('TUIConversation.Group ID')"
+          @update:model-value="(value) => groupInfoChange(String(value), GroupLabelTypes.GROUP_ID)"
+        />
+      </div>
+
+      <div
+        :class="$style.conversationCreateGroupDetail__box"
+        :style="{ alignItems: 'flex-start' }"
+      >
+        <label
+          :class="$style.from__label"
+          for="group-type"
+        >{{ t('TUIConversation.Group Type') }}</label>
+        <ConversationGroupTypeInfo
+          id="group-type"
+          :group-type="groupInfo.type"
+          :set-group-type="(type: GroupType) => groupInfoChange(type, GroupLabelTypes.TYPE)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { TUIInput, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { PageStateTypes, GroupLabelTypes } from '../../../../types';
+import { isH5 } from '../../../../utils/env';
+import { Avatar } from '../../../Avatar';
+import { useConversationCreate } from '../../hooks/useConversationCreate';
+import { ConversationGroupTypeInfo } from '../ConversationGroupTypeInfo';
+import type {
+  ConversationCreateGroupDetailProps,
+  ConversationModel,
+  CreateGroupInfo,
+  CreateGroupParams,
+  GroupType,
+} from '../../../../types';
+
+const props = defineProps<ConversationCreateGroupDetailProps>();
+
+const emit = defineEmits<{
+  'update:page-state': [state: PageStateTypes];
+  'beforeCreateConversation': [params: CreateGroupParams];
+  'conversationCreated': [conversation: ConversationModel];
+  'update-group-info': [groupInfo: CreateGroupInfo];
+}>();
+
+const { t } = useUIKit();
+const { getDefaultAvatar } = useConversationCreate();
+
+const groupInfo = ref<CreateGroupInfo>(props.groupInfo);
+
+const groupInfoChange = (value: string, type: string) => {
+  switch (type) {
+    case GroupLabelTypes.NAME:
+      groupInfo.value.name = value;
+      break;
+    case GroupLabelTypes.GROUP_ID:
+      groupInfo.value.groupID = value;
+      break;
+    case GroupLabelTypes.TYPE:
+      groupInfo.value.type = value as GroupType;
+      groupInfo.value.avatar = getDefaultAvatar(groupInfo.value.type);
+      break;
+    default:
+      break;
+  }
+  emit('update-group-info', groupInfo.value);
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationCreateGroupDetail.scss';
+</style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateUserSelectList/ConversationCreateUserSelectList.scss

@@ -0,0 +1,11 @@
+.conversationCreateUserSelectList {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 640px;
+
+  &--h5 {
+    height: 100%;
+    padding: 0 20px;
+  }
+}

package/src/components/ConversationList/ConversationCreate/ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    :class="[
+      $style.conversationCreateUserSelectList,
+      isH5 && $style['conversationCreateUserSelectList--h5'],
+    ]"
+  >
+    <UserPicker
+      displayMode="list"
+      :data-source="renderFriendList"
+      :default-selected-items="selectList"
+      :maxCount="!isCreateGroup ? 1: undefined"
+      :onSelectedChange="handleSelectListUpdate"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useContactListState } from '../../../../states/ContactListState';
+import { isH5 } from '../../../../utils/env';
+import { UserPicker } from '../../../UserPicker';
+import type {
+  ConversationCreateUserSelectListProps,
+  Friend,
+} from '../../../../types';
+import type { IUserPickerResult } from '../../../UserPicker';
+
+const props = defineProps<ConversationCreateUserSelectListProps>();
+
+const emit = defineEmits<{
+  'update:is-create-group': [value: boolean];
+  'update:select-list': [list: Friend[]];
+}>();
+
+const { friendList } = useContactListState();
+
+const selectList = computed(() => props.selectList.map((item) => {
+  const { userID, nick, avatar, remark } = item;
+  return {
+    key: userID,
+    label: remark || nick || userID,
+    avatarUrl: avatar,
+  };
+}));
+
+const renderFriendList = computed(() => friendList.value.map((item) => {
+  const { userID, nick, avatar, remark } = item;
+  return {
+    key: userID,
+    label: remark || nick || userID,
+    avatarUrl: avatar,
+  };
+}));
+
+const handleSelectListUpdate = (list: IUserPickerResult) => {
+  const selectFriendList = friendList.value.filter(item => list.some(selected => selected.key === item.userID));
+  emit('update:select-list', selectFriendList);
+  props.setSelectList(selectFriendList);
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationCreateUserSelectList.scss';
+</style>

package/src/components/ConversationList/ConversationCreate/ConversationGroupTypeInfo/ConversationGroupTypeInfo.scss

@@ -0,0 +1,66 @@
+@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
+
+.conversationGroupTypeInfo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: scroll;
+  @include scrollbar.scrollbar-hidden();
+  color: var(--text-color-primary);
+
+  &__box {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 16px;
+    padding: 12px 16px;
+    cursor: pointer;
+    background-color: var(--bg-color-operate);
+    border: 1px solid var(--stroke-color-primary);
+
+    &:hover {
+      border: 1px solid var(--text-color-link);
+    }
+
+    &--active {
+      border: 1px solid var(--text-color-link);
+    }
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__title {
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__description {
+    font-size: 12px;
+    line-height: 16px;
+    text-align: justify;
+    hyphens: auto;
+  }
+
+  &__document {
+    font-size: 12px;
+    line-height: 16px;
+    text-decoration: none;
+
+    &:link,
+    &:active,
+    &:visited {
+      color: var(--text-color-link);
+    }
+  }
+
+  &__activeIcon {
+    color: var(--checkbox-color-selected);
+  }
+}

package/src/components/ConversationList/ConversationCreate/ConversationGroupTypeInfo/ConversationGroupTypeInfo.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="$style.conversationGroupTypeInfo">
+    <div
+      v-for="{ type, name, des } in typeInfoList"
+      :key="type"
+      role="presentation"
+      :class="[$style.conversationGroupTypeInfo__box, {
+        [$style['conversationGroupTypeInfo__box--active']]: type === groupType
+      }]"
+      @click="selectGroupType(type)"
+    >
+      <div :class="$style.conversationGroupTypeInfo__header">
+        <div :class="$style.conversationGroupTypeInfo__title">
+          <Avatar
+            size="sm"
+            :src="getDefaultAvatar(type)"
+          />
+          {{ t(`TUIConversation.${name}`) }}
+        </div>
+        <IconCheckSm
+          v-if="type === groupType"
+          :class="$style.conversationGroupTypeInfo__activeIcon"
+        />
+      </div>
+      <div :class="$style.conversationGroupTypeInfo__description">
+        {{ t(`TUIConversation.${des}`) }}
+        <a
+          :class="$style.conversationGroupTypeInfo__document"
+          target="_blank"
+          href="https://trtc.io/document/33529?platform=web&product=chat&menulabel=uikit#group-types"
+          rel="bookmark noreferrer"
+        >
+          {{ t('TUIConversation.See the documentation for details') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IconCheckSm, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import {
+  Avatar,
+} from '../../../Avatar';
+import { useConversationCreate } from '../../hooks/useConversationCreate';
+import { typeInfoList } from './type';
+import type { GroupType, ConversationGroupTypeInfoProps } from '../../../../types';
+
+const props = defineProps<ConversationGroupTypeInfoProps>();
+
+const { t } = useUIKit();
+const { getDefaultAvatar } = useConversationCreate();
+
+const selectGroupType = (type: GroupType) => {
+  props.setGroupType(type);
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationGroupTypeInfo.scss';
+</style>

package/src/components/ConversationList/ConversationCreate/ConversationGroupTypeInfo/index.ts

@@ -0,0 +1,5 @@
+import ConversationGroupTypeInfo from './ConversationGroupTypeInfo.vue';
+
+export { ConversationGroupTypeInfo };
+export * from './ConversationGroupTypeInfo.vue';
+export * from './type';

package/src/components/ConversationList/ConversationCreate/ConversationGroupTypeInfo/type.ts

@@ -0,0 +1,15 @@
+import { GroupType } from '../../../../types';
+
+export interface ConversationGroupTypeInfoItem {
+  type: GroupType;
+  name: string;
+  des: string;
+}
+
+export const typeInfoList: ConversationGroupTypeInfoItem[] = [
+  { type: GroupType.WORK, name: 'Work', des: 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.' },
+  { type: GroupType.PUBLIC, name: 'Public', des: 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.' },
+  { type: GroupType.MEETING, name: 'Meeting', des: 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.' },
+  { type: GroupType.AVCHATROOM, name: 'AVChatRoom', des: 'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.' },
+  { type: GroupType.COMMUNITY, name: 'Community', des: 'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.' },
+];

package/src/components/ConversationList/ConversationCreate/index.ts

@@ -0,0 +1,6 @@
+export { default as ConversationCreate } from './ConversationCreate.vue';
+export { default as ConversationCreateButton } from './ConversationCreateButton/ConversationCreateButton.vue';
+export { default as ConversationCreateGroupDetail } from './ConversationCreateGroupDetail/ConversationCreateGroupDetail.vue';
+export { default as ConversationCreateUserSelectList } from './ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue';
+export { default as ConversationGroupTypeInfo } from './ConversationGroupTypeInfo/ConversationGroupTypeInfo.vue';
+export { typeInfoList } from './ConversationGroupTypeInfo';

package/src/components/ConversationList/ConversationList.scss

@@ -0,0 +1,19 @@
+.conversationList {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
+  background-color: var(--bg-color-operate, #f5f5f5);
+  color: var(--text-color-primary, #333);
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+}

package/src/components/ConversationList/ConversationList.vue

@@ -1,45 +1,215 @@
+<template>
+  <div
+    :class="[$style.conversationList, className, {
+      [$style['conversationList--mobile']]: isH5
+    }]"
+    :style="style"
+  >
+    <component
+      :is="Header"
+      v-if="Header"
+      :class="{
+        [$style.conversationList__headerCreating]: isCreateModelShow
+      }"
+    >
+      <component
+        :is="ConversationSearch"
+        v-if="enableSearch"
+      />
+      <component
+        :is="ConversationCreate"
+        v-if="enableCreate"
+        :conversation-list="conversationList"
+        @update:visible="setIsCreateModelShow"
+        @before-create="handleBeforeCreate"
+        @created="handleCreated"
+      />
+    </component>
+
+    <component
+      :is="List"
+      :empty="renderConversationList.length === 0"
+      :loading="!conversationList"
+      :error="false"
+      :placeholder-empty-list="PlaceholderEmptyList"
+      :placeholder-loading="PlaceholderLoading"
+      :placeholder-load-error="PlaceholderLoadError"
+    >
+      <ConversationPreview
+        v-for="conversation in renderConversationList"
+        :key="conversation.conversationID"
+        :conversation="conversation"
+        :enable-actions="enableActions"
+        :avatar="Avatar"
+        :preview="Preview"
+        :conversation-actions="ConversationActions"
+        :actions-config="actionsConfig"
+        @select="handleSelectConversation"
+      />
+    </component>
+  </div>
+</template>
+
 <script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
 import { useConversationListState } from '../../states/ConversationListState';
+import {
+  PlaceHolderTypes,
+} from '../../types';
+import { isH5 } from '../../utils';
+import { Avatar as DefaultAvatar } from '../Avatar';
+import { ConversationActions as DefaultConversationActions } from './ConversationActions';
+import { ConversationCreate as DefaultConversationCreate } from './ConversationCreate';
+import { ConversationListContent as DefaultConversationListContent } from './ConversationListContent';
+import { ConversationListHeader as DefaultConversationListHeader } from './ConversationListHeader';
+import PlaceHolder from './ConversationPlaceHolder';
+import { ConversationPreview, ConversationPreviewUI as DefaultConversationPreviewUI } from './ConversationPreview';
+import { ConversationSearch as DefaultConversationSearch } from './ConversationSearch';
+import { useConversation } from './hooks/useConversation';
+import type {
+  CreateGroupParams,
+  ConversationModel,
+  ConversationListProps,
+  ConversationActionsConfig,
+  ConversationActionsBaseConfig,
+} from '../../types';
+
+interface Props extends ConversationListProps {
+  children?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  enableActions: true,
+  enableCreate: true,
+  enableSearch: true,
+  Header: () => DefaultConversationListHeader,
+  List: () => DefaultConversationListContent,
+  Preview: () => DefaultConversationPreviewUI,
+  ConversationCreate: () => DefaultConversationCreate,
+  ConversationSearch: () => DefaultConversationSearch,
+  ConversationActions: () => DefaultConversationActions,
+  PlaceholderEmptyList: () => ({
+    component: PlaceHolder,
+    props: { type: PlaceHolderTypes.NO_CONVERSATIONS },
+  }),
+  PlaceholderLoading: () => ({
+    component: PlaceHolder,
+    props: { type: PlaceHolderTypes.LOADING },
+  }),
+  PlaceholderLoadError: () => ({
+    component: PlaceHolder,
+    props: { type: PlaceHolderTypes.WRONG },
+  }),
+  Avatar: () => DefaultAvatar,
+});
+
+const emit = defineEmits<{
+  selectConversation: [conversation: ConversationModel];
+  beforeCreateConversation: [params: string | any];
+  conversationCreated: [conversation: ConversationModel];
+}>();
 
 const {
-  conversationList,
-  switchConversation,
-} = useConversationListState();
+  filter,
+  sort,
+  enableActions,
+  actionsConfig: propActionsConfig,
+  enableCreate: propEnableCreate,
+  enableSearch: propEnableSearch,
+  onBeforeCreateConversation,
+  onConversationCreated,
+} = props;
+const { conversationList, setActiveConversation } = useConversationListState();
+const { setEnableCreate, setEnableSearch } = useConversation();
 
-function handleConversationClick(conversationID: string) {
-  switchConversation(conversationID);
-}
-</script>
+const conversationActionList = ref<string[]>([]);
 
-<template>
-  <div class="conversation-list">
-    <div
-      v-for="conversation in conversationList"
-      :key="conversation.conversationID"
-      class="conversationItem"
-    >
-      <div
-        class="conversation-item"
-        @click="handleConversationClick(conversation.conversationID)"
-      >
-        {{ conversation.getShowName() }}
-      </div>
-    </div>
-  </div>
-</template>
+const renderConversationList = computed(() => {
+  if (!conversationList.value) {
+    return [];
+  }
 
-<style scoped>
-.conversation-list {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  gap: 8px;
-}
+  let _conversationList = conversationList.value;
 
-.conversation-item {
-  height: 80px;
-  font-size: 14px;
-  background-color: aquamarine;
-  cursor: pointer;
-}
+  if (filter && typeof filter === 'function') {
+    _conversationList = filter(_conversationList);
+  }
+
+  if (sort && typeof sort === 'function') {
+    _conversationList = sort(_conversationList);
+  }
+
+  return _conversationList;
+});
+
+const isCreateModelShow = ref(false);
+const actionsConfig = ref<ConversationActionsConfig>({
+  enableDelete: true,
+  enableMute: true,
+  enableMarkUnread: true,
+  enablePin: true,
+});
+
+const enableCreate = computed(() => propEnableCreate);
+const enableSearch = computed(() => propEnableSearch);
+setEnableCreate(enableCreate.value);
+setEnableSearch(enableSearch.value);
+
+watch(
+  (): [ConversationActionsConfig | undefined, string[] | null] => [propActionsConfig, conversationActionList.value],
+  ([newActionsConfig, newConversationActionList]) => {
+    if (!newActionsConfig && !newConversationActionList) {
+      actionsConfig.value = {
+        enableDelete: true,
+        enableMute: true,
+        enableMarkUnread: true,
+        enablePin: true,
+      };
+      return;
+    }
+
+    if (newActionsConfig) {
+      actionsConfig.value = newActionsConfig;
+      return;
+    }
+
+    if (newConversationActionList && newConversationActionList.length > 0) {
+      const config: ConversationActionsConfig = {};
+      newConversationActionList.forEach((action: string) => {
+        const key = `enable${action.charAt(0).toUpperCase()}${action.slice(1)}` as keyof ConversationActionsBaseConfig;
+        config[key] = config[key] ?? true;
+      });
+      actionsConfig.value = config;
+    }
+  },
+  { immediate: true },
+);
+
+const handleSelectConversation = (conversation: ConversationModel) => {
+  setActiveConversation(conversation.conversationID);
+  emit('selectConversation', conversation);
+};
+
+const setIsCreateModelShow = (visible: boolean) => {
+  isCreateModelShow.value = visible;
+};
+
+const handleBeforeCreate = (params: string | CreateGroupParams) => {
+  emit('beforeCreateConversation', params);
+  if (onBeforeCreateConversation) {
+    return onBeforeCreateConversation(params);
+  }
+  return params;
+};
+
+const handleCreated = (conversation: ConversationModel) => {
+  emit('conversationCreated', conversation);
+  if (onConversationCreated) {
+    onConversationCreated(conversation);
+  }
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationList.scss';
 </style>

package/src/components/ConversationList/ConversationListContent/ConversationListContent.scss

@@ -0,0 +1,21 @@
+@use '../../../styles/mixins/_scrollbar.scss' as scrollbar;
+.conversationListContent {
+  flex: 1;
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  background-color: var(--bg-color-operate, #f5f5f5);
+  color: var(--text-color-primary, #333);
+  @include scrollbar.scrollbar-hidden();
+
+  .placeholder-error,
+  .placeholder-loading,
+  .placeholder-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: var(--text-color-secondary, #666);
+    font-size: 14px;
+  }
+}