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

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

@@ -1,204 +1,63 @@
 <template>
-  <div :class="[$style.conversationCreateUserSelectList]">
-    <div :class="$style.conversationCreateUserSelectList__searchInput">
-      <TUIInput
-        v-model="searchValue"
-        :prefixIcon="IconSearchChat"
-        :placeholder="t('TUIConversation.Search')"
-        @change="searchValueChange"
-      />
-    </div>
-
-    <ConversationCreateSelectView
-      v-if="isCreateGroup"
-      :select-list="selectList"
-      :set-select-list="handleSelectListUpdate"
+  <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
-      v-if="!isCreateGroup"
-      role="presentation"
-      :class="[$style.conversationCreateUserSelectList__user, $style['conversationCreateUserSelectList__user--active']]"
-      @click="createGroup"
-    >
-      <IconSearchMore size="24px" />
-      <div :class="$style.conversationCreateUserSelectList__userName">
-        {{ t('TUIConversation.New group chat') }}
-      </div>
-    </div>
-
-    <div :class="[$style.conversationCreateUserSelectList__container, className]">
-      <div :class="$style.conversationCreateUserSelectList__list">
-        <div :class="$style.conversationCreateUserSelectList__groupContainer">
-          <div
-            v-for="(group, key) in friendList"
-            v-show="group.length !== 0"
-            :key="key"
-            :class="$style.conversationCreateUserSelectList__groupBox"
-          >
-            <div :class="$style.conversationCreateUserSelectList__title">
-              {{ key }}
-            </div>
-            <label
-              v-for="profile in group"
-              :key="profile.userID"
-              role="presentation"
-              :class="$style.conversationCreateUserSelectList__user"
-              :for="`userChecked-${key}-${profile.userID}`"
-              @click="handleUserItem(profile)"
-            >
-              <Avatar :src="profile.avatar" />
-              <div :class="$style.conversationCreateUserSelectList__userName">
-                {{ profile.nick || profile.userID }}
-              </div>
-              <div
-                v-if="isCreateGroup"
-                :class="$style.conversationCreateUserSelectList__userCheckbox"
-              >
-                <IconCheckSm
-                  v-if="selectList.find(item => item.userID === profile.userID)"
-                  :class="$style.conversationCreateUserSelectList__activeIcon"
-                />
-                <IconAddCircle v-else />
-              </div>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="isCreateGroup"
-      :class="$style.conversationCreateUserSelectList__nextContainer"
-    >
-      <TUIButton @click="next">
-        {{ t('TUIConversation.Next') }}
-      </TUIButton>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import {
-  TUIInput,
-  TUIButton,
-  IconSearchMore,
-  IconCheckSm,
-  IconAddCircle,
-  IconSearchChat,
-  TUIToast,
-  useUIKit,
-} from '@tencentcloud/uikit-base-component-vue3';
+import { computed } from 'vue';
 import { useContactListState } from '../../../../states/ContactListState';
-import { useConversationListState } from '../../../../states/ConversationListState';
-import { PageStateTypes } from '../../../../types';
-import { Avatar } from '../../../Avatar';
-import { ConversationCreateSelectView } from '../ConversationCreateSelectView';
-import { useConversationCreate } from '../hooks/useConversationCreate';
+import { isH5 } from '../../../../utils/env';
+import { UserPicker } from '../../../UserPicker';
 import type {
   ConversationCreateUserSelectListProps,
-  UserProfile,
-  ConversationCreateUsers,
-  ConversationModel,
+  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: UserProfile[]];
-  'update:page-state': [state: PageStateTypes];
-  'beforeCreateConversation': [userID: string];
-  'conversationCreated': [conversation: ConversationModel];
+  'update:select-list': [list: Friend[]];
 }>();
 
-const { t } = useUIKit();
-const { friendList: friendListResult } = useContactListState();
-const { createC2CConversation } = useConversationListState();
-
-const searchValue = ref('');
-const conversationList = ref(props.conversationList);
-const friendList = ref<ConversationCreateUsers>({});
-
-const {
-  friendListSortResult,
-  getFriendListSortSearchResult,
-} = useConversationCreate(
-  conversationList,
-  friendListResult,
-);
-
-// Methods
-const searchValueChange = (value: string | number) => {
-  const stringValue = String(value);
-  searchValue.value = stringValue;
-  friendList.value = getFriendListSortSearchResult(stringValue);
-};
-
-const createGroup = () => {
-  emit('update:is-create-group', true);
-  props.setSelectList([]);
-  props.setIsCreateGroup(true);
-};
-
-const userSelectListChange = (profile: UserProfile) => {
-  const { userID } = profile;
-  const newList = [...props.selectList];
-
-  if (!newList.find(item => item.userID === userID)) {
-    newList.push(profile);
-  } else {
-    const index = newList.findIndex(item => item.userID === userID);
-    newList.splice(index, 1);
-  }
-  emit('update:select-list', newList);
-  props.setSelectList(newList);
+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);
 };
-
-const _createConversation = async (profile: UserProfile) => {
-  if (props.isCreateGroup) {
-    return;
-  }
-
-  const { userID } = profile;
-  emit('beforeCreateConversation', userID);
-  props.onBeforeCreateConversation?.(userID);
-
-  try {
-    const conversation = await createC2CConversation(userID);
-    emit('conversationCreated', conversation);
-    props.onConversationCreated?.(conversation);
-  } catch (error: any) {
-    TUIToast.error({ message: error.message });
-  }
-};
-
-const handleUserItem = (profile: UserProfile) => {
-  if (props.isCreateGroup) {
-    userSelectListChange(profile);
-  } else {
-    _createConversation(profile);
-  }
-};
-
-const next = () => {
-  if (!props.selectList || props.selectList.length === 0) {
-    TUIToast.error({ message: t('TUIConversation.Participant cannot be empty') });
-    return;
-  }
-  emit('update:page-state', PageStateTypes.CREATE_DETAIL);
-  props.setPageState(PageStateTypes.CREATE_DETAIL);
-};
-
-const handleSelectListUpdate = (list: UserProfile[]) => {
-  emit('update:select-list', list);
-  props.setSelectList(list);
-};
-
-watch(friendListSortResult, (newValue) => {
-  friendList.value = newValue;
-}, { immediate: true });
 </script>
 
 <style lang="scss" module>

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

@@ -1,14 +1,13 @@
+@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
+
 .conversationGroupTypeInfo {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0 10px;
+  gap: 10px;
   overflow-y: scroll;
+  @include scrollbar.scrollbar-hidden();
   color: var(--text-color-primary);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
 
   &__box {
     display: flex;
@@ -16,7 +15,6 @@
     gap: 8px;
     border-radius: 16px;
     padding: 12px 16px;
-    margin-top: 12px;
     cursor: pointer;
     background-color: var(--bg-color-operate);
     border: 1px solid var(--stroke-color-primary);
@@ -30,6 +28,12 @@
     }
   }
 
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &__title {
     font-size: 16px;
     display: flex;
@@ -45,10 +49,9 @@
   }
 
   &__document {
-    font-size: 16px;
-    text-align: justify;
+    font-size: 12px;
+    line-height: 16px;
     text-decoration: none;
-    margin: 1rem auto;
 
     &:link,
     &:active,
@@ -58,6 +61,6 @@
   }
 
   &__activeIcon {
-    fill: var(--text-color-link) !important;
+    color: var(--checkbox-color-selected);
   }
 }

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

@@ -9,45 +9,50 @@
       }]"
       @click="selectGroupType(type)"
     >
-      <div :class="$style.conversationGroupTypeInfo__title">
+      <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"
         />
-        {{ t(`TUIConversation.${name}`) }}
       </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>
-    <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.Details') }}
-    </a>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { IconCheckSm, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { PageStateTypes } from '../../../../types';
+import {
+  Avatar,
+} from '../../../Avatar';
+import { useConversationCreate } from '../../hooks/useConversationCreate';
 import { typeInfoList } from './type';
-import type { GroupType } from './type';
+import type { GroupType, ConversationGroupTypeInfoProps } from '../../../../types';
 
-const props = defineProps<{
-  groupType: GroupType;
-  setGroupType: (type: GroupType) => void;
-  setPageState: (state: PageStateTypes) => void;
-}>();
+const props = defineProps<ConversationGroupTypeInfoProps>();
 
 const { t } = useUIKit();
+const { getDefaultAvatar } = useConversationCreate();
 
 const selectGroupType = (type: GroupType) => {
   props.setGroupType(type);
-  props.setPageState(PageStateTypes.CREATE_DETAIL);
 };
 </script>
 

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

@@ -1,10 +1,4 @@
-export enum GroupType {
-  WORK = 'Private',
-  PUBLIC = 'Public',
-  MEETING = 'ChatRoom',
-  AVCHATROOM = 'AVChatRoom',
-  COMMUNITY = 'Community',
-}
+import { GroupType } from '../../../../types';
 
 export interface ConversationGroupTypeInfoItem {
   type: GroupType;
@@ -18,4 +12,4 @@ export const typeInfoList: ConversationGroupTypeInfoItem[] = [
   { 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

@@ -1,8 +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 ConversationCreateSelectView } from './ConversationCreateSelectView/ConversationCreateSelectView.vue';
 export { default as ConversationCreateUserSelectList } from './ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue';
 export { default as ConversationGroupTypeInfo } from './ConversationGroupTypeInfo/ConversationGroupTypeInfo.vue';
-export { useConversationCreate } from './hooks/useConversationCreate';
 export { typeInfoList } from './ConversationGroupTypeInfo';

package/src/components/ConversationList/ConversationList.scss

@@ -1,5 +1,6 @@
 .conversationList {
   width: 100%;
+  height: 100%;
   flex-shrink: 1;
   box-sizing: border-box;
   overflow: hidden;

package/src/components/ConversationList/ConversationList.vue

@@ -14,11 +14,11 @@
     >
       <component
         :is="ConversationSearch"
-        v-if="ConversationSearch"
+        v-if="enableSearch"
       />
       <component
         :is="ConversationCreate"
-        :visible="enableCreate"
+        v-if="enableCreate"
         :conversation-list="conversationList"
         @update:visible="setIsCreateModelShow"
         @before-create="handleBeforeCreate"
@@ -65,6 +65,7 @@ import { ConversationListHeader as DefaultConversationListHeader } from './Conve
 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,
@@ -79,6 +80,8 @@ interface Props extends ConversationListProps {
 
 const props = withDefaults(defineProps<Props>(), {
   enableActions: true,
+  enableCreate: true,
+  enableSearch: true,
   Header: () => DefaultConversationListHeader,
   List: () => DefaultConversationListContent,
   Preview: () => DefaultConversationPreviewUI,
@@ -106,25 +109,38 @@ const emit = defineEmits<{
   conversationCreated: [conversation: ConversationModel];
 }>();
 
-const enableCreateConversation = ref(false);
+const {
+  filter,
+  sort,
+  enableActions,
+  actionsConfig: propActionsConfig,
+  enableCreate: propEnableCreate,
+  enableSearch: propEnableSearch,
+  onBeforeCreateConversation,
+  onConversationCreated,
+} = props;
+const { conversationList, setActiveConversation } = useConversationListState();
+const { setEnableCreate, setEnableSearch } = useConversation();
+
 const conversationActionList = ref<string[]>([]);
-const renderConversationList = ref<ConversationModel[]>([]);
-const { conversationList = [], setActiveConversation } = useConversationListState();
 
-watch(
-  () => conversationList,
-  (newList) => {
-    let _conversationList = newList.value as ConversationModel[];
-    if (props.filter) {
-      _conversationList = props.filter(_conversationList);
-    }
-    if (props.sort) {
-      _conversationList = props.sort(_conversationList);
-    }
-    renderConversationList.value = _conversationList;
-  },
-  { deep: true },
-);
+const renderConversationList = computed(() => {
+  if (!conversationList.value) {
+    return [];
+  }
+
+  let _conversationList = conversationList.value;
+
+  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>({
@@ -134,10 +150,13 @@ const actionsConfig = ref<ConversationActionsConfig>({
   enablePin: true,
 });
 
-const enableCreate = computed(() => (props.enableCreate || enableCreateConversation) ?? true);
+const enableCreate = computed(() => propEnableCreate);
+const enableSearch = computed(() => propEnableSearch);
+setEnableCreate(enableCreate.value);
+setEnableSearch(enableSearch.value);
 
 watch(
-  () => [props.actionsConfig, conversationActionList],
+  (): [ConversationActionsConfig | undefined, string[] | null] => [propActionsConfig, conversationActionList.value],
   ([newActionsConfig, newConversationActionList]) => {
     if (!newActionsConfig && !newConversationActionList) {
       actionsConfig.value = {
@@ -177,16 +196,16 @@ const setIsCreateModelShow = (visible: boolean) => {
 
 const handleBeforeCreate = (params: string | CreateGroupParams) => {
   emit('beforeCreateConversation', params);
-  if (props.onBeforeCreateConversation) {
-    return props.onBeforeCreateConversation(params);
+  if (onBeforeCreateConversation) {
+    return onBeforeCreateConversation(params);
   }
   return params;
 };
 
 const handleCreated = (conversation: ConversationModel) => {
   emit('conversationCreated', conversation);
-  if (props.onConversationCreated) {
-    props.onConversationCreated(conversation);
+  if (onConversationCreated) {
+    onConversationCreated(conversation);
   }
 };
 </script>

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

@@ -1,3 +1,4 @@
+@use '../../../styles/mixins/_scrollbar.scss' as scrollbar;
 .conversationListContent {
   flex: 1;
   display: flex;
@@ -5,11 +6,7 @@
   flex-direction: column;
   background-color: var(--bg-color-operate, #f5f5f5);
   color: var(--text-color-primary, #333);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  @include scrollbar.scrollbar-hidden();
 
   .placeholder-error,
   .placeholder-loading,

package/src/components/ConversationList/ConversationPlaceHolder/ConversationPlaceHolder.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="[$style.conversationPlaceHolder, className]">
     <div :class="$style.conversationPlaceHolder__icon">
-      <IconLoading
+      <IconLiveLoading
         v-if="type === PlaceHolderTypes.LOADING"
         :class="$style.conversationPlaceHolder__loading"
       />
@@ -45,7 +45,7 @@
 
 <script setup lang="ts">
 import { computed, withDefaults, defineProps } from 'vue';
-import { TUIButton, useUIKit, IconLoading } from '@tencentcloud/uikit-base-component-vue3';
+import { TUIButton, useUIKit, IconLiveLoading } from '@tencentcloud/uikit-base-component-vue3';
 import { PlaceHolderTypes } from '../../../types/conversation';
 import type { ConversationPlaceHolderProps } from '../../../types/conversation';
 

package/src/components/ConversationList/ConversationPreview/ConversationPreviewAbstract.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.conversationPreview__abstract">
     <template v-if="draftTextAbstract">
-      <label :class="$style.conversationPreview__drafts">{{ t('TUIChat.[Drafts]') }}</label>
+      <label :class="$style.conversationPreview__drafts">[{{ t('TUIConversation.Drafts') }}]</label>
       {{ ' ' }}
       {{ draftTextAbstract }}
     </template>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUI.vue

@@ -12,11 +12,8 @@
                conversation?.isMuted && [$style['conversationPreview--mute']],
       ]"
       :style="style"
+      v-bind="longPressEvents"
       @click="handleClick"
-      @touchstart="handleTouchStart"
-      @touchend="handleTouchEnd"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handleMouseLeave"
     >
       <slot>
         <div :class="$style['conversationPreview__avatar']">
@@ -107,14 +104,16 @@ const { activeConversation, setActiveConversation } = useConversationListState()
 const conversationPreviewRef = ref<HTMLElement>();
 const isActionMenuActive = ref(false);
 
-const { isHovering } = useMouseHover(conversationPreviewRef);
-const { handleTouchStart, handleTouchEnd } = useLongPress(() => {
+const { isHovered } = useMouseHover(conversationPreviewRef);
+const { getEventHandlers } = useLongPress(() => {
   if (isH5) {
     isActionMenuActive.value = true;
   }
 });
 
-watch(isHovering, (newValue) => {
+const longPressEvents = getEventHandlers();
+
+watch(isHovered, (newValue) => {
   if (!isH5) {
     isActionMenuActive.value = newValue;
   }
@@ -125,18 +124,6 @@ const handleClick = () => {
   setActiveConversation(props.conversation.conversationID);
 };
 
-const handleMouseEnter = () => {
-  if (!isH5) {
-    isActionMenuActive.value = true;
-  }
-};
-
-const handleMouseLeave = () => {
-  if (!isH5) {
-    isActionMenuActive.value = false;
-  }
-};
-
 const handleCloseActionsModal = () => {
   isActionMenuActive.value = false;
 };