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

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>
 

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

@@ -1,4 +1,11 @@
+@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
 .conversationCreateGroupDetail {
+  flex: 1;
+  height: 640px;
+  display: flex;
+  &--h5 {
+    height: 100%;
+  }
   &__nextContainer {
     width: 100%;
     display: flex;
@@ -20,83 +27,29 @@
     flex-direction: column;
     padding: 0 10px;
     overflow-y: auto;
+    @include scrollbar.scrollbar-hidden();
     color: var(--text-color-primary);
   }
 
   &__box {
     padding: 10px 0;
     position: relative;
+    display: flex;
+    gap: 10px;
+    justify-content: flex-start;
+    align-items: center;
   }
 
   &__inputText {
-    font-weight: 600;
-    font-size: 16px !important;
+    flex: 1;
     border-bottom: 1px solid var(--stroke-color-primary);
     color: var(--text-color-primary);
-
-    &::placeholder {
-      font-weight: 400;
-      font-size: 16px;
-      color: var(--text-color-tertiary) 40%;
-    }
-  }
-
-  &__inputReadonly {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
   }
+}
 
-  &__inputTitle {
-    font-weight: 400;
-    font-size: 16px;
-    padding: 0 10px 0 6px;
-    color: var(--text-color-tertiary) 40%;
-  }
-
-  &__illustrate {
-    font-size: 12px;
-    line-height: 16px;
-    text-align: justify;
-    padding: 0 14px;
-    hyphens: auto;
-    color: var(--text-color-tertiary) 40%;
-  }
-
-  &__portrait {
-    &Title {
-      font-weight: 600;
-      font-size: 14px;
-      padding: 12px 0 12px 10px;
-      color: var(--text-color-primary);
-    }
-
-    &InfoContainer {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      margin-bottom: 10px;
-      padding: 0 10px;
-    }
-
-    &Info {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      padding: 6px;
-      box-sizing: border-box;
-
-      &Nick {
-        font-size: 12px;
-        margin-top: 6px;
-        max-width: 48px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
+.from__label {
+  min-width: 85px;
+  font-weight: 400;
+  font-size: 14px;
+  color: var(--text-color-primary);
 }

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

@@ -1,188 +1,121 @@
 <template>
-  <div :class="$style.conversationCreateGroupDetail">
+  <div
+    :class="[
+      $style.conversationCreateGroupDetail,
+      isH5 && $style['conversationCreateGroupDetail--h5'],
+    ]"
+  >
     <div
       v-if="pageState !== PageStateTypes.GROUP_TYPE"
       :class="$style.conversationCreateGroupDetail__main"
     >
-      <div :class="[$style.conversationCreateGroupDetail__box, $style.conversationCreateGroupDetail__name]">
-        <TUIInput
-          v-model="groupName"
-          :class="$style.conversationCreateGroupDetail__inputText"
-          :max-length="15"
-          :border="false"
-          :placeholder="t('TUIConversation.Group Name')"
-          @update:model-value="(value) => groupInfoChange(String(value), 'name')"
+      <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
-          v-model="groupID"
+          id="group-name"
+          v-model="groupInfo.name"
+          clearable
           :class="$style.conversationCreateGroupDetail__inputText"
+          :max-length="30"
           :border="false"
-          :placeholder="t('TUIConversation.Group ID')"
-          @update:model-value="(value) => groupInfoChange(String(value), 'id')"
+          :placeholder="t('TUIConversation.Group Name')"
+          @update:model-value="(value) => groupInfoChange(String(value), GroupLabelTypes.NAME)"
         />
       </div>
 
       <div :class="$style.conversationCreateGroupDetail__box">
-        <div
-          :class="$style.conversationCreateGroupDetail__inputReadonly"
-          @click.self="setPageState(PageStateTypes.GROUP_TYPE)"
-        />
+        <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"
-          readonly
           :border="false"
-          :prefix="h('div', { class: $style.conversationCreateGroupDetail__inputTitle }, t('TUIConversation.Group Type'))"
-          :suffix="IconChevronRight"
-          :model-value="t(`TUIConversation.${groupType}`)"
+          :placeholder="t('TUIConversation.Group ID')"
+          @update:model-value="(value) => groupInfoChange(String(value), GroupLabelTypes.GROUP_ID)"
         />
       </div>
 
-      <div :class="$style.conversationCreateGroupDetail__illustrate">
-        {{ t(`TUIConversation.${getDes()}`) }}
-      </div>
-
-      <div :class="$style.conversationCreateGroupDetail__portrait">
-        <div :class="$style.conversationCreateGroupDetail__portraitTitle">
-          {{ t('TUIConversation.Participants') }}
-        </div>
-        <div :class="$style.conversationCreateGroupDetail__portraitInfoContainer">
-          <div
-            v-for="{ avatar, userID, nick } in profileList"
-            :key="userID"
-            :class="$style.conversationCreateGroupDetail__portraitInfo"
-          >
-            <Avatar :src="avatar || DEFAULT_USER_AVATAR" />
-            <div :class="$style.conversationCreateGroupDetail__portraitInfoNick">
-              {{ nick || userID }}
-            </div>
-          </div>
-        </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
-      v-if="pageState !== PageStateTypes.GROUP_TYPE"
-      :class="$style.conversationCreateGroupDetail__nextContainer"
-    >
-      <TUIButton @click="next">
-        {{ t('TUIConversation.Create') }}
-      </TUIButton>
-    </div>
-
-    <ConversationGroupTypeInfo
-      v-else
-      :group-type="groupType"
-      :set-group-type="setGroupType"
-      :set-page-state="setPageState"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, h } from 'vue';
-import { StoreName, TUIStore } from '@tencentcloud/chat-uikit-engine';
-import { TUIButton, TUIInput, IconChevronRight, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { useConversationListState } from '../../../../states/ConversationListState';
-import {
-  Avatar,
-  DEFAULT_GROUP_AVATAR_WORK,
-  DEFAULT_GROUP_AVATAR_AVCHATROOM,
-  DEFAULT_GROUP_AVATAR_MEETING,
-  DEFAULT_GROUP_AVATAR_PUBLIC,
-  DEFAULT_USER_AVATAR,
-} from '../../../Avatar';
-import { ConversationGroupTypeInfo, GroupType, typeInfoList } from '../ConversationGroupTypeInfo';
-import type { PageStateTypes, ConversationCreateGroupDetailProps } from '../../../../types';
-import type { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+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: IConversationModel];
+  'conversationCreated': [conversation: ConversationModel];
+  'update-group-info': [groupInfo: CreateGroupInfo];
 }>();
 
 const { t } = useUIKit();
-const { createGroupConversation } = useConversationListState();
-
-const myProfile = computed(() => TUIStore.getData(StoreName.USER, 'userProfile'));
-const temp = computed(() => [myProfile.value, ...props.profileList]);
-const name = computed(() => temp.value.map(item => item?.nick || item?.userID).toString());
+const { getDefaultAvatar } = useConversationCreate();
 
-const groupName = ref(name.value.length >= 15 ? `${name.value.slice(0, 12)}...` : name.value);
-const groupID = ref('');
-const groupType = ref<GroupType>(GroupType.WORK);
+const groupInfo = ref<CreateGroupInfo>(props.groupInfo);
 
 const groupInfoChange = (value: string, type: string) => {
   switch (type) {
-    case 'name':
-      groupName.value = value;
+    case GroupLabelTypes.NAME:
+      groupInfo.value.name = value;
       break;
-    case 'id':
-      groupID.value = value;
+    case GroupLabelTypes.GROUP_ID:
+      groupInfo.value.groupID = value;
       break;
-    case 'type':
-      groupType.value = value as GroupType;
+    case GroupLabelTypes.TYPE:
+      groupInfo.value.type = value as GroupType;
+      groupInfo.value.avatar = getDefaultAvatar(groupInfo.value.type);
       break;
     default:
       break;
   }
-};
-
-const getDefaultAvatar = (type: GroupType) => {
-  switch (type) {
-    case GroupType.WORK:
-      return DEFAULT_GROUP_AVATAR_WORK;
-    case GroupType.PUBLIC:
-      return DEFAULT_GROUP_AVATAR_PUBLIC;
-    case GroupType.MEETING:
-      return DEFAULT_GROUP_AVATAR_MEETING;
-    case GroupType.AVCHATROOM:
-      return DEFAULT_GROUP_AVATAR_AVCHATROOM;
-    default:
-      return '';
-  }
-};
-
-const getDes = () => typeInfoList?.find((item: any) => item.type === groupType.value)?.des || '';
-
-const setGroupType = (type: GroupType) => {
-  groupType.value = type;
-};
-
-const setPageState = (state: PageStateTypes) => {
-  emit('update:page-state', state);
-  props?.setPageState?.(state);
-};
-
-const next = async () => {
-  const memberList = props.profileList.map(item => ({
-    userID: item.userID,
-  }));
-
-  const avatar = getDefaultAvatar(groupType.value);
-  const options: CreateGroupParams = {
-    name: groupName.value,
-    type: groupType.value,
-    groupID: groupID.value,
-    avatar,
-    memberList,
-  };
-
-  emit('beforeCreateConversation', options);
-  const _options = props.onBeforeCreateConversation?.(options) || options;
-
-  try {
-    const conversation = await createGroupConversation(_options);
-    emit('conversationCreated', conversation);
-    props.onConversationCreated?.(conversation);
-  } catch (error: any) {
-    TUIToast.error({ message: error.message });
-  }
+  emit('update-group-info', groupInfo.value);
 };
 </script>
 

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

@@ -1,135 +1,11 @@
 .conversationCreateUserSelectList {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  width: 100%;
+  height: 640px;
 
-  &__searchInput {
-    padding: 8px 16px;
-  }
-
-  &__user {
-    padding: 8px 16px;
-    display: flex;
-    align-items: center;
-    text-align: center;
-    gap: 8px;
-    cursor: pointer;
-    color: var(--text-color-link);
-
-    &:hover {
-      background-color: var(--list-color-hover);
-    }
-
-    &--active {
-      font-weight: 600;
-      font-size: 14px;
-      color: var(--text-color-link);
-    }
-
-    &Name {
-      flex: 1;
-      font-size: 14px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: keep-all;
-      text-align: left;
-      color: var(--text-color-primary);
-
-      &--active {
-        font-weight: 600;
-        font-size: 14px;
-        color: var(--text-color-link);
-      }
-    }
-  }
-
-  &__userCheckbox {
-    cursor: pointer;
-    color: var(--text-color-primary);
-  }
-
-  &__activeIcon {
-    color: var(--text-color-link);
-  }
-
-  &__nextContainer {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin: 20px auto 10px;
-  }
-
-  &__next {
-    cursor: pointer;
-    text-align: center;
-    border-radius: 31px;
-    font-size: 14px;
-    color: #fff;
-    padding: 12px 36px;
-    background-color: var(--text-color-link);
-  }
-
-  &__container {
-    height: 0;
-    overflow-y: auto;
-    flex: 1 1 auto;
-    padding: 0 10px;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &__list {
-    position: relative;
-  }
-
-  &__groupContainer {
-    width: 100%;
-  }
-
-  &__title {
-    font-weight: 600;
-    font-size: 12px;
-    padding: 8px 10px;
-    text-align: left;
-    color: var(--text-color-secondary);
-  }
-
-  &__groupBox {
-    width: 100%;
-  }
-
-  &__userAvatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    margin-right: 8px;
-  }
-
-  &__userInfo {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: left;
-  }
-
-  &__userName {
-    font-size: 14px;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text-color-primary);
-  }
-
-  &__userID {
-    font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text-color-secondary);
+  &--h5 {
+    height: 100%;
+    padding: 0 20px;
   }
 }