tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -0,0 +1,149 @@
+<template>
+  <div
+    v-if="visible"
+    :class="[$style.conversationCreate__container, className]"
+    :style="style"
+  >
+    <ConversationCreateButton
+      v-if="!showCreateConversation"
+      @click="toggleCreateConversation(true)"
+    />
+
+    <div
+      v-if="showCreateConversation"
+      :class="$style.conversationCreate__main"
+    >
+      <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"
+        :set-page-state="setPageState"
+        :on-before-create-conversation="handleBeforeCreate"
+        :on-conversation-created="handleCreated"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import { IconArrowStrokeBack, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { PageStateTypes } from '../../../types';
+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';
+
+const props = withDefaults(defineProps<ConversationCreateProps>(), {
+  visible: true,
+  conversationList: () => [],
+});
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean];
+  'beforeCreateConversation': [params: string | any];
+  '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 setIsCreateGroup = (value: boolean) => {
+  isCreateGroup.value = value;
+};
+
+const setPageState = (value: PageStateTypes) => {
+  pageState.value = value;
+};
+
+const setSelectList = (value: any[]) => {
+  selectList.value = value;
+};
+
+const toggleCreateConversation = (value: boolean) => {
+  showCreateConversation.value = value;
+};
+
+const resetCreatePageState = () => {
+  isCreateGroup.value = false;
+  pageState.value = PageStateTypes.USER_SELECT;
+  selectList.value = [];
+};
+
+const _onConversationCreated = (conversation: ConversationModel) => {
+  toggleCreateConversation(false);
+  resetCreatePageState();
+  TUIConversationService.switchConversation(conversation.conversationID);
+  emit('conversationCreated', 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 handleBeforeCreate = (params: string | CreateGroupParams) => {
+  if (props.onBeforeCreateConversation) {
+    return props.onBeforeCreateConversation(params);
+  }
+  return params;
+};
+
+const handleCreated = (conversation: ConversationModel) => {
+  _onConversationCreated(conversation);
+};
+
+watch(showCreateConversation, (newValue) => {
+  emit('update:visible', newValue);
+});
+</script>
+
+<style lang="scss" module>
+@import './ConversationCreate.scss';
+</style>

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

@@ -0,0 +1,7 @@
+.conversation-create-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--text-color-link);
+  margin-right: 10px;
+}

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

@@ -0,0 +1,32 @@
+<template>
+  <IconSearchMore
+    v-if="visible"
+    :class="[$style['conversation-create-button'], className]"
+    size="24px"
+    @click="handleClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { IconSearchMore } from '@tencentcloud/uikit-base-component-vue3';
+import type { ConversationCreateButtonProps } from '../../../../types';
+
+const props = withDefaults(defineProps<ConversationCreateButtonProps>(), {
+  visible: true,
+  height: 24,
+  width: 24,
+});
+
+const emit = defineEmits<{
+  click: [event: Event];
+}>();
+
+const handleClick = (event: Event) => {
+  emit('click', event);
+  props.onClick?.(event);
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationCreateButton.scss';
+</style>

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

@@ -0,0 +1,102 @@
+.conversationCreateGroupDetail {
+  &__nextContainer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin: 20px auto 10px;
+  }
+
+  &__next {
+    cursor: pointer;
+    text-align: center;
+    border-radius: 31px;
+    font-size: 14px;
+    padding: 12px 36px;
+    background-color: var(--text-color-link);
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    padding: 0 10px;
+    overflow-y: auto;
+    color: var(--text-color-primary);
+  }
+
+  &__box {
+    padding: 10px 0;
+    position: relative;
+  }
+
+  &__inputText {
+    font-weight: 600;
+    font-size: 16px !important;
+    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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,191 @@
+<template>
+  <div :class="$style.conversationCreateGroupDetail">
+    <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>
+
+      <div :class="$style.conversationCreateGroupDetail__box">
+        <TUIInput
+          v-model="groupID"
+          :class="$style.conversationCreateGroupDetail__inputText"
+          :border="false"
+          :placeholder="t('TUIConversation.Group ID')"
+          @update:model-value="(value) => groupInfoChange(String(value), 'id')"
+        />
+      </div>
+
+      <div :class="$style.conversationCreateGroupDetail__box">
+        <div
+          :class="$style.conversationCreateGroupDetail__inputReadonly"
+          @click.self="setPageState(PageStateTypes.GROUP_TYPE)"
+        />
+        <TUIInput
+          :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}`)"
+        />
+      </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>
+    </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';
+
+const props = defineProps<ConversationCreateGroupDetailProps>();
+
+const emit = defineEmits<{
+  'update:page-state': [state: PageStateTypes];
+  'beforeCreateConversation': [params: CreateGroupParams];
+  'conversationCreated': [conversation: IConversationModel];
+}>();
+
+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 groupName = ref(name.value.length >= 15 ? `${name.value.slice(0, 12)}...` : name.value);
+const groupID = ref('');
+const groupType = ref<GroupType>(GroupType.WORK);
+
+const groupInfoChange = (value: string, type: string) => {
+  switch (type) {
+    case 'name':
+      groupName.value = value;
+      break;
+    case 'id':
+      groupID.value = value;
+      break;
+    case 'type':
+      groupType.value = value as GroupType;
+      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 });
+  }
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationCreateGroupDetail.scss';
+</style>

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

@@ -0,0 +1,36 @@
+.conversationCreateSelectView {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  color: var(--text-color-primary);
+
+  &__item {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: calc((100% - 40px) / 5);
+    padding: 6px;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  &__close {
+    position: absolute;
+    right: 12px;
+    top: 0;
+    z-index: 2;
+    color: var(--text-color-primary);
+  }
+
+  &__nick {
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,44 @@
+<template>
+  <div :class="$style.conversationCreateSelectView">
+    <div
+      v-for="(profile, index) in selectList"
+      :key="profile.userID"
+      :class="$style.conversationCreateSelectView__item"
+    >
+      <div
+        :class="$style.conversationCreateSelectView__close"
+        @click="close(index)"
+      >
+        <IconCancel />
+      </div>
+      <Avatar :src="profile.avatar" />
+      <div :class="$style.conversationCreateSelectView__nick">
+        {{ profile.nick || profile.userID }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IconCancel } from '@tencentcloud/uikit-base-component-vue3';
+import { Avatar } from '../../../Avatar';
+import type { ConversationCreateSelectViewProps, UserProfile } from '../../../../types';
+
+const props = defineProps<ConversationCreateSelectViewProps>();
+
+const emit = defineEmits<{
+  'update:select-list': [list: UserProfile[]];
+}>();
+
+const close = (index: number) => {
+  const newList = [...props.selectList];
+  newList.splice(index, 1);
+  props.setSelectList(newList);
+  emit('update:select-list', newList);
+};
+
+</script>
+
+<style lang="scss" module>
+@import './ConversationCreateSelectView.scss';
+</style>

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

@@ -0,0 +1 @@
+export { default as ConversationCreateSelectView } from './ConversationCreateSelectView.vue';

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

@@ -0,0 +1,135 @@
+.conversationCreateUserSelectList {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__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);
+  }
+}