tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/src/components/ConversationList/ConversationActions/ConversationActions.scss

@@ -1,73 +1,62 @@
 .conversationActions {
   position: relative;
+  display: flex;
 
   &__popup-icon {
-    padding: 4px 8px;
+    display: flex;
     cursor: pointer;
-    border-radius: 4px;
     transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--hover-bg-color, #f0f0f0);
-    }
-
-    .more-icon {
-      font-size: 16px;
-      color: var(--text-color-secondary, #666);
-      font-weight: bold;
-    }
   }
 
-  &__container {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    border-radius: 4px;
-    box-shadow: 0 0 10px var(--shadow-color);
-    background-color: var(--bg-color-operate);
-    z-index: 100;
-    min-width: 120px;
+  &__h5 {
+    z-index: 5;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background: var(--bg-color-mask)
   }
 
   &__h5__container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
     background-color: var(--bg-color-operate);
     border-radius: 8px 8px 0 0;
     box-shadow: 0 0 10px var(--shadow-color);
-    z-index: 100;
-    padding: 16px;
+
+    .conversationActions__item {
+      text-align: center;
+      font-weight: 400;
+      font-size: 17px;
+      line-height: 22px;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--stroke-color-primary);
+      color: var(--button-color-primary-default);
+
+      &:last-child {
+        border-bottom: none;
+        color: var(--text-color-error);
+      }
+    }
   }
 
   &__item {
-    padding: 8px 12px;
-    cursor: pointer;
     font-size: 14px;
-    color: var(--text-color-primary, #333);
-    border-bottom: 1px solid var(--stroke-color-primary, #f0f0f0);
-    transition: background-color 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+    line-height: 19px;
+    padding: 9px 16px;
+    cursor: pointer;
+    font-weight: 400;
+    box-sizing: border-box;
+    color: var(--text-color-primary);
 
     &:hover {
-      background-color: var(--dropdown-color-active, #f8f9fa);
-    }
-
-    &:last-child {
-      border-bottom: none;
+      background-color: var(--dropdown-color-active);
     }
 
     &--delete {
-      color: var(--text-color-error, #dc3545);
-    }
-
-    .action-icon {
-      width: 16px;
-      height: 16px;
-      flex-shrink: 0;
+      color: var(--text-color-error);
     }
   }
 } 

package/src/components/ConversationList/ConversationActions/ConversationActions.vue

@@ -1,23 +1,14 @@
 <template>
   <div
     :class="[$style.conversationActions, {
-      [$style.conversationActions__H5]: isH5,
+      [$style.conversationActions__h5]: isH5,
     }, className]"
     :style="style"
     @click="handleMaskClick"
   >
     <div
-      :class="$style.conversationActions__popupIcon"
-      @click="toggleClick"
-    >
-      <slot name="popupIcon">
-        <IconEllipsis />
-      </slot>
-    </div>
-
-    <div
-      v-if="PopupElements || isH5"
-      :class="$style.conversationActions__H5__container"
+      v-if="isH5"
+      :class="$style.conversationActions__h5__container"
       @click.stop
     >
       <div
@@ -31,22 +22,18 @@
         {{ action.label }}
       </div>
     </div>
-
-    <Popup
+    <TUIDropdown
       v-else
-      :open="Boolean(anchor)"
-      :anchor="anchor"
+      trigger="click"
       placement="bottom-end"
-      disable-portal
-      :slot-props="{
-        root: {
-          style: {
-            zIndex: 5,
-          },
-        },
-      }"
     >
-      <div :class="$style.conversationActions__container">
+      <div
+        :class="$style['conversationActions__popup-icon']"
+        @click="toggleClick"
+      >
+        <IconEllipsis size="18px" />
+      </div>
+      <template #dropdown>
         <div
           v-for="(action, key) in enabledActions"
           :key="key"
@@ -57,16 +44,15 @@
         >
           {{ action.label }}
         </div>
-      </div>
-    </Popup>
+      </template>
+    </TUIDropdown>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { IconEllipsis, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { Popup } from '../../../baseComp';
+import { IconEllipsis, useUIKit, TUIDropdown } from '@tencentcloud/uikit-base-component-vue3';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { isH5 } from '../../../utils';
 import type {

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

@@ -5,43 +5,17 @@
     justify-content: center;
   }
 
-  &__main {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--bg-color-operate);
-    color: var(--text-color-primary);
-    z-index: 100;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    padding: 12px;
-    background-color: var(--bg-color-topbar, #f5f5f5);
-  }
-
-  &__icon {
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-    color: var(--text-color-link, #e0e0e0);
-  }
-
-  &__title {
-    margin-left: 12px;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text-color-primary, #333);
+  &__detail {
+    flex: 1;
   }
+} 
 
-  &__content {
-    flex: 1;
-    overflow: hidden;
+:deep(.conversationCreate__dialog) {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  border-radius: 0;
+  .dialog-body {
+    height: 0;
   }
-} 
+}

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

@@ -1,66 +1,70 @@
 <template>
   <div
-    v-if="visible"
-    :class="[$style.conversationCreate__container, className]"
-    :style="style"
+    :class="['conversationCreate__container', {['conversationCreate__detail']: !enableSearch }]"
   >
-    <ConversationCreateButton
-      v-if="!showCreateConversation"
-      @click="toggleCreateConversation(true)"
-    />
-
-    <div
-      v-if="showCreateConversation"
-      :class="$style.conversationCreate__main"
+    <ConversationCreateButton @click="openCreateConversation" />
+
+    <TUIDialog
+      appendTo="body"
+      :visible="showCreateConversation"
+      :title="dialogTitles"
+      :confirm-text="dialogConfirmText"
+      :cancel-text="dialogCancelText"
+      :custom-classes="[isH5 ? 'conversationCreate__dialog' : '']"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+      @close="resetCreatePageState"
     >
-      <div :class="$style.conversationCreate__header">
-        <div
-          :class="$style.conversationCreate__icon"
-          @click="back"
-        >
-          <IconArrowStrokeBack />
-        </div>
-        <div :class="$style.conversationCreate__title">
-          {{ !isCreateGroup ? t('TUIConversation.Start chat') : t('TUIConversation.Add Participants') }}
-        </div>
-      </div>
-
       <ConversationCreateUserSelectList
         v-if="pageState === PageStateTypes.USER_SELECT"
         :is-create-group="isCreateGroup"
-        :set-is-create-group="setIsCreateGroup"
         :select-list="selectList"
         :set-select-list="setSelectList"
-        :conversation-list="conversationList"
         :set-page-state="setPageState"
-        :on-before-create-conversation="handleBeforeCreate"
-        :on-conversation-created="handleCreated"
       />
 
       <ConversationCreateGroupDetail
         v-else
         :page-state="pageState"
         :profile-list="selectList"
+        :group-info="groupInfo"
         :set-page-state="setPageState"
-        :on-before-create-conversation="handleBeforeCreate"
-        :on-conversation-created="handleCreated"
+        @update-group-info="updateGroupInfo"
       />
-    </div>
+    </TUIDialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { IconArrowStrokeBack, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { PageStateTypes } from '../../../types';
+import { useUIKit, TUIDialog, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { useLoginState } from '../../../states/LoginState';
+import { PageStateTypes, CreateConvTypes, GroupType } from '../../../types';
+import { isH5 } from '../../../utils/env';
+import { useConversation } from '../hooks/useConversation';
+import { useConversationCreate } from '../hooks/useConversationCreate';
 import ConversationCreateButton from './ConversationCreateButton/ConversationCreateButton.vue';
 import ConversationCreateGroupDetail from './ConversationCreateGroupDetail/ConversationCreateGroupDetail.vue';
 import ConversationCreateUserSelectList from './ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue';
-import type { ConversationModel, ConversationCreateProps, CreateGroupParams } from '../../../types';
+import type { ConversationModel, ConversationCreateProps, CreateGroupParams, CreateGroupInfo, Friend } from '../../../types';
+
+const { t } = useUIKit();
+const { enableSearch } = useConversation();
+const { getDefaultAvatar } = useConversationCreate();
+const { loginUserInfo } = useLoginState();
+const { createC2CConversation, createGroupConversation } = useConversationListState();
+
+const GROUP_NAME_LIMIT = 20;
+const GROUP_INFO_DEFAULTS: CreateGroupInfo = {
+  avatar: getDefaultAvatar(GroupType.WORK),
+  name: '',
+  groupID: '',
+  type: GroupType.WORK,
+};
 
 const props = withDefaults(defineProps<ConversationCreateProps>(), {
-  visible: true,
   conversationList: () => [],
 });
 
@@ -70,12 +74,16 @@ const emit = defineEmits<{
   'conversationCreated': [conversation: ConversationModel];
 }>();
 
-const { t } = useUIKit();
-
 const showCreateConversation = ref(false);
 const isCreateGroup = ref(false);
 const pageState = ref<PageStateTypes>(PageStateTypes.USER_SELECT);
-const selectList = ref<any[]>([]);
+const selectList = ref<Friend[]>([]);
+const groupInfo = ref<CreateGroupInfo>({
+  avatar: getDefaultAvatar(GroupType.WORK),
+  name: '',
+  groupID: '',
+  type: GroupType.WORK,
+});
 
 const setIsCreateGroup = (value: boolean) => {
   isCreateGroup.value = value;
@@ -85,65 +93,143 @@ const setPageState = (value: PageStateTypes) => {
   pageState.value = value;
 };
 
-const setSelectList = (value: any[]) => {
+const setSelectList = (value: Friend[]) => {
   selectList.value = value;
 };
 
+const openCreateConversation = (value: CreateConvTypes) => {
+  if (value === CreateConvTypes.GROUP) {
+    setIsCreateGroup(true);
+  } else {
+    setIsCreateGroup(false);
+  }
+  showCreateConversation.value = true;
+};
+
 const toggleCreateConversation = (value: boolean) => {
   showCreateConversation.value = value;
 };
 
 const resetCreatePageState = () => {
+  toggleCreateConversation(false);
+  groupInfo.value = GROUP_INFO_DEFAULTS;
   isCreateGroup.value = false;
   pageState.value = PageStateTypes.USER_SELECT;
   selectList.value = [];
 };
 
 const _onConversationCreated = (conversation: ConversationModel) => {
-  toggleCreateConversation(false);
   resetCreatePageState();
   TUIConversationService.switchConversation(conversation.conversationID);
   emit('conversationCreated', conversation);
+  props.onConversationCreated?.(conversation);
 };
 
-const back = () => {
-  if (isCreateGroup.value) {
-    switch (pageState.value) {
-      case PageStateTypes.USER_SELECT:
-        setIsCreateGroup(false);
-        break;
-      case PageStateTypes.CREATE_DETAIL:
-        setPageState(PageStateTypes.USER_SELECT);
-        setSelectList([]);
-        break;
-      case PageStateTypes.GROUP_TYPE:
-        setPageState(PageStateTypes.CREATE_DETAIL);
-        break;
-      default:
-        break;
-    }
-  } else {
-    toggleCreateConversation(false);
-    resetCreatePageState();
+const pageStateTitle = {
+  [PageStateTypes.USER_SELECT]: t('TUIConversation.Add Participants'),
+  [PageStateTypes.CREATE_DETAIL]: t('TUIConversation.New group chat'),
+  [PageStateTypes.GROUP_TYPE]: t('TUIConversation.New group chat'),
+};
+
+const pageStateConfirmText = {
+  [PageStateTypes.USER_SELECT]: t('TUIConversation.Next'),
+  [PageStateTypes.CREATE_DETAIL]: t('TUIConversation.Start chat'),
+  [PageStateTypes.GROUP_TYPE]: t('TUIConversation.Confirm'),
+};
+const pageStateCancelText = {
+  [PageStateTypes.USER_SELECT]: t('TUIConversation.Cancel'),
+  [PageStateTypes.CREATE_DETAIL]: t('TUIConversation.Prev'),
+  [PageStateTypes.GROUP_TYPE]: t('TUIConversation.Prev'),
+};
+const dialogCancelText = computed(() => {
+  if (!isCreateGroup.value) {
+    return t('TUIConversation.Cancel');
+  }
+  return pageStateCancelText[pageState.value];
+});
+
+const dialogTitles = computed(() => {
+  if (!isCreateGroup.value) {
+    return t('TUIConversation.Start chat');
   }
+  return pageStateTitle[pageState.value];
+});
+
+const dialogConfirmText = computed(() => !isCreateGroup.value ? t('TUIConversation.Start chat') : pageStateConfirmText[pageState.value]);
+
+const updateGroupInfo = (value: CreateGroupInfo) => {
+  groupInfo.value = value;
 };
 
-const handleBeforeCreate = (params: string | CreateGroupParams) => {
-  if (props.onBeforeCreateConversation) {
-    return props.onBeforeCreateConversation(params);
+const handleCreateC2CConversation = async () => {
+  const { userID } = selectList.value[0];
+  emit('beforeCreateConversation', userID);
+  props.onBeforeCreateConversation?.(userID);
+
+  try {
+    const conversation = await createC2CConversation(userID);
+    _onConversationCreated(conversation);
+  } catch (error: any) {
+    TUIToast.error({ message: error.message });
   }
-  return params;
 };
 
-const handleCreated = (conversation: ConversationModel) => {
-  _onConversationCreated(conversation);
+const handleCreateGroupConversation = async () => {
+  const options = {
+    ...groupInfo.value,
+    memberList: selectList.value.map(item => ({
+      userID: item.userID,
+    })),
+  } as unknown as CreateGroupParams;
+
+  emit('beforeCreateConversation', options);
+  props.onBeforeCreateConversation?.(options);
+
+  try {
+    const conversation = await createGroupConversation(options);
+    _onConversationCreated(conversation);
+  } catch (error: any) {
+    TUIToast.error({ message: error.message });
+  }
 };
 
-watch(showCreateConversation, (newValue) => {
-  emit('update:visible', newValue);
-});
+const generateGroupName = (userList: Friend[]) => {
+  const selfName = loginUserInfo.value?.userName || loginUserInfo.value?.userId || '';
+  const name = selfName + userList.map(item => item?.remark || item?.nick || item?.userID).join('、');
+  return name.length >= GROUP_NAME_LIMIT ? name.slice(0, GROUP_NAME_LIMIT) : name;
+};
+
+const handleConfirm = () => {
+  if (selectList.value.length === 0) {
+    TUIToast.error({ message: t('TUIConversation.Participant cannot be empty') });
+    return;
+  }
+  if (!isCreateGroup.value) {
+    handleCreateC2CConversation();
+    toggleCreateConversation(false);
+  } else if (pageState.value === PageStateTypes.USER_SELECT) {
+    groupInfo.value.name = generateGroupName(selectList.value);
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  } else if (pageState.value === PageStateTypes.CREATE_DETAIL) {
+    handleCreateGroupConversation();
+    toggleCreateConversation(false);
+  } else {
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  }
+};
+
+const handleCancel = () => {
+  if (pageState.value === PageStateTypes.USER_SELECT) {
+    toggleCreateConversation(false);
+    resetCreatePageState();
+  } else if (pageState.value === PageStateTypes.CREATE_DETAIL) {
+    setPageState(PageStateTypes.USER_SELECT);
+  } else if (pageState.value === PageStateTypes.GROUP_TYPE) {
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  }
+};
 </script>
 
-<style lang="scss" module>
+<style lang="scss" scoped>
 @import './ConversationCreate.scss';
 </style>

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

@@ -2,6 +2,42 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--text-color-link);
   margin-right: 10px;
+}
+
+.conversation-create-dropdown {
+  display: flex;
+  justify-content: center;
+  padding: 5px 10px;
+}
+
+.conversation-create-list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 5px 0;
+  gap: 10px;
+}
+
+.conversation-create-list--detail {
+  padding: 10px 20px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.conversation-create-item {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  color: var(--text-color-primary);
+}
+
+.conversation-create-text {
+  font-size: 14px;
+  font-weight: 400;
 }

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

@@ -1,29 +1,84 @@
 <template>
-  <IconSearchMore
-    v-if="visible"
-    :class="[$style['conversation-create-button'], className]"
-    size="24px"
-    @click="handleClick"
-  />
+  <template v-if="!enableSearch">
+    <ul :class="[$style['conversation-create-list'], {[$style['conversation-create-list--detail']]: !enableSearch }]">
+      <li
+        v-for="(action, key) in createActions"
+        :key="key"
+        :class="[$style['conversation-create-item']]"
+        @click="() => handleClick(action.key)"
+      >
+        <component :is="action.icon" />
+        <span :class="[$style['conversation-create-text']]">{{ action.label }}</span>
+      </li>
+    </ul>
+  </template>
+  <template v-else>
+    <TUIDropdown
+      trigger="click"
+      placement="bottom-end"
+    >
+      <IconSearchMore
+        :class="[$style['conversation-create-button']]"
+        :size="`${size}px`"
+      />
+      <template #dropdown>
+        <div :class="[$style['conversation-create-dropdown']]">
+          <ul :class="[$style['conversation-create-list']]">
+            <li
+              v-for="(action, key) in createActions"
+              :key="key"
+              :class="[$style['conversation-create-item']]"
+              @click="() => handleClick(action.key)"
+            >
+              <component :is="action.icon" />
+              <span :class="[$style['conversation-create-text']]">{{ action.label }}</span>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </TUIDropdown>
+  </template>
 </template>
 
 <script lang="ts" setup>
-import { IconSearchMore } from '@tencentcloud/uikit-base-component-vue3';
+import { shallowRef } from 'vue';
+import {
+  IconSearchMore,
+  TUIDropdown,
+  IconIconC2c,
+  IconStartGroup,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { CreateConvTypes } from '../../../../types';
+import { useConversation } from '../../hooks/useConversation';
 import type { ConversationCreateButtonProps } from '../../../../types';
 
-const props = withDefaults(defineProps<ConversationCreateButtonProps>(), {
-  visible: true,
-  height: 24,
-  width: 24,
+const { t } = useUIKit();
+const { enableSearch } = useConversation();
+
+withDefaults(defineProps<ConversationCreateButtonProps>(), {
+  size: 24,
 });
 
 const emit = defineEmits<{
-  click: [event: Event];
+  click: [key: CreateConvTypes];
 }>();
 
-const handleClick = (event: Event) => {
-  emit('click', event);
-  props.onClick?.(event);
+const createActions = shallowRef([
+  {
+    icon: IconIconC2c,
+    key: CreateConvTypes.C2C,
+    label: t('TUIConversation.Start C2C Chat'),
+  },
+  {
+    icon: IconStartGroup,
+    key: CreateConvTypes.GROUP,
+    label: t('TUIConversation.Start Group Chat'),
+  },
+]);
+
+const handleClick = (action: CreateConvTypes) => {
+  emit('click', action);
 };
 </script>