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

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

@@ -0,0 +1,72 @@
+.conversationActions {
+  position: relative;
+
+  &__popup-icon {
+    padding: 4px 8px;
+    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;
+    }
+  }
+
+  &__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 {
+    background-color: var(--bg-color-operate);
+    border-radius: 8px 8px 0 0;
+    box-shadow: 0 0 10px var(--shadow-color);
+
+    .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 {
+    font-size: 14px;
+    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);
+    }
+
+    &--delete {
+      color: var(--text-color-error);
+    }
+  }
+} 

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

@@ -0,0 +1,182 @@
+<template>
+  <div
+    :class="[$style.conversationActions, {
+      [$style.conversationActions__h5]: isH5,
+    }, className]"
+    :style="style"
+    @click="handleMaskClick"
+  >
+    <div
+      v-if="isH5"
+      :class="$style.conversationActions__h5__container"
+      @click.stop
+    >
+      <div
+        v-for="(action, key) in enabledActions"
+        :key="key"
+        :class="[$style.conversationActions__item, {
+          [$style['conversationActions__item--delete']]: key === 'delete'
+        }]"
+        @click="(e) => onClickMenuItem(e, key)"
+      >
+        {{ action.label }}
+      </div>
+    </div>
+    <TUIDropdown
+      v-else
+      trigger="click"
+      placement="bottom-end"
+    >
+      <div
+        :class="$style.conversationActions__popupIcon"
+        @click="toggleClick"
+      >
+        <IconEllipsis />
+      </div>
+      <template #dropdown>
+        <div
+          v-for="(action, key) in enabledActions"
+          :key="key"
+          :class="[$style.conversationActions__item, {
+            [$style['conversationActions__item--delete']]: key === 'delete'
+          }]"
+          @click="(e) => onClickMenuItem(e, key)"
+        >
+          {{ action.label }}
+        </div>
+      </template>
+    </TUIDropdown>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { IconEllipsis, useUIKit, TUIDropdown } from '@tencentcloud/uikit-base-component-vue3';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { isH5 } from '../../../utils';
+import type {
+  ConversationModel,
+  ConversationActionItem,
+  ConversationActionsProps,
+} from '../../../types';
+
+const props = withDefaults(defineProps<ConversationActionsProps>(), {
+  enablePin: true,
+  enableMute: true,
+  enableDelete: true,
+  enableMarkUnread: true,
+});
+
+const emit = defineEmits<{
+  click: [e: Event, key?: string, conversation?: ConversationModel];
+  close: [];
+  markConversationUnread: [conversation: ConversationModel, e?: Event];
+  conversationPin: [conversation: ConversationModel, e?: Event];
+  conversationMute: [conversation: ConversationModel, e?: Event];
+  conversationDelete: [conversation: ConversationModel, e?: Event];
+}>();
+
+const { t } = useUIKit();
+const { markConversationUnread } = useConversationListState();
+
+const markUnreadStatus = ref(true);
+const anchor = ref<HTMLElement | null>(null);
+const conversationActions = ref<Record<string, ConversationActionItem>>({});
+
+const enabledActions = computed(() => Object.entries(conversationActions.value)
+  .filter(([, action]) => action.enable !== false)
+  .reduce((acc, [key, action]) => {
+    acc[key] = action;
+    return acc;
+  }, {} as Record<string, ConversationActionItem>));
+
+const generateConversationActions = (): Record<string, ConversationActionItem> => ({
+  pin: {
+    enable: !!props.enablePin,
+    label: props.conversation.isPinned ? t('TUIConversation.Unpin') : t('TUIConversation.Pin'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      _conversation.pinConversation();
+      emit('conversationPin', _conversation, e);
+    },
+  },
+  mute: {
+    enable: !!props.enableMute,
+    label: props.conversation.isMuted ? t('TUIConversation.Unmute') : t('TUIConversation.Mute'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      _conversation.muteConversation();
+      emit('conversationMute', _conversation, e);
+    },
+  },
+  markUnread: {
+    enable: !!props.enableMarkUnread,
+    label: markUnreadStatus.value ? t('TUIConversation.MarkRead') : t('TUIConversation.MarkUnRead'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      markConversationUnread(_conversation.conversationID, !markUnreadStatus.value);
+      emit('markConversationUnread', _conversation, e);
+    },
+  },
+  delete: {
+    enable: !!props.enableDelete,
+    label: t('TUIConversation.Delete'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      _conversation.deleteConversation();
+      emit('conversationDelete', _conversation, e);
+    },
+  },
+});
+
+watch(
+  () => props.conversation,
+  (newConversation) => {
+    if (newConversation.unreadCount > 0) {
+      markUnreadStatus.value = true;
+    } else {
+      const targetValue = TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD;
+      const unreadStatus = newConversation?.markList?.includes(targetValue);
+      markUnreadStatus.value = unreadStatus;
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  [() => props.conversation, () => props.customConversationActions],
+  ([newConversation, newCustomActions]) => {
+    conversationActions.value = {
+      ...generateConversationActions(),
+      ...(newCustomActions || {}),
+    };
+  },
+  { immediate: true, deep: true },
+);
+
+const toggleClick = (e: Event) => {
+  anchor.value = anchor.value ? null : (e.currentTarget as HTMLElement);
+};
+
+const onClickMenuItem = (e: Event, key: string) => {
+  toggleClick(e);
+  emit('click', e, key, props.conversation);
+
+  const action = conversationActions.value[key];
+  if (action) {
+    action.onClick(props.conversation, e);
+  }
+
+  if (props.onClose) {
+    props.onClose();
+  }
+};
+
+const handleMaskClick = (e: Event) => {
+  e.stopPropagation();
+  if ((e.target as HTMLElement) === (e.currentTarget as HTMLElement) && isH5 && props.onClose) {
+    props.onClose();
+  }
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationActions.scss';
+</style>

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

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

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

@@ -0,0 +1,21 @@
+.conversationCreate {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__detail {
+    flex: 1;
+  }
+} 
+
+:deep(.conversationCreate__dialog) {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  border-radius: 0;
+  .dialog-body {
+    height: 0;
+  }
+}

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

@@ -0,0 +1,234 @@
+<template>
+  <div
+    :class="['conversationCreate__container', {['conversationCreate__detail']: !enableSearch }]"
+  >
+    <ConversationCreateButton @click="openCreateConversation" />
+
+    <TUIDialog
+      :visible="showCreateConversation"
+      :title="dialogTitles"
+      :confirm-text="dialogConfirmText"
+      :cancel-text="dialogCancelText"
+      :custom-classes="[isH5 ? 'conversationCreate__dialog' : '']"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+      @close="resetCreatePageState"
+    >
+      <ConversationCreateUserSelectList
+        v-if="pageState === PageStateTypes.USER_SELECT"
+        :is-create-group="isCreateGroup"
+        :select-list="selectList"
+        :set-select-list="setSelectList"
+        :set-page-state="setPageState"
+      />
+
+      <ConversationCreateGroupDetail
+        v-else
+        :page-state="pageState"
+        :profile-list="selectList"
+        :group-info="groupInfo"
+        :set-page-state="setPageState"
+        @update-group-info="updateGroupInfo"
+      />
+    </TUIDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+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, 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>(), {
+  conversationList: () => [],
+});
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean];
+  'beforeCreateConversation': [params: string | any];
+  'conversationCreated': [conversation: ConversationModel];
+}>();
+
+const showCreateConversation = ref(false);
+const isCreateGroup = ref(false);
+const pageState = ref<PageStateTypes>(PageStateTypes.USER_SELECT);
+const selectList = ref<Friend[]>([]);
+const groupInfo = ref<CreateGroupInfo>({
+  avatar: getDefaultAvatar(GroupType.WORK),
+  name: '',
+  groupID: '',
+  type: GroupType.WORK,
+});
+
+const setIsCreateGroup = (value: boolean) => {
+  isCreateGroup.value = value;
+};
+
+const setPageState = (value: PageStateTypes) => {
+  pageState.value = value;
+};
+
+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) => {
+  resetCreatePageState();
+  TUIConversationService.switchConversation(conversation.conversationID);
+  emit('conversationCreated', conversation);
+  props.onConversationCreated?.(conversation);
+};
+
+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 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 });
+  }
+};
+
+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 });
+  }
+};
+
+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" scoped>
+@import './ConversationCreate.scss';
+</style>

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

@@ -0,0 +1,43 @@
+.conversation-create-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  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

@@ -0,0 +1,87 @@
+<template>
+  <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 { 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 { t } = useUIKit();
+const { enableSearch } = useConversation();
+
+withDefaults(defineProps<ConversationCreateButtonProps>(), {
+  size: 24,
+});
+
+const emit = defineEmits<{
+  click: [key: CreateConvTypes];
+}>();
+
+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>
+
+<style lang="scss" module>
+@import './ConversationCreateButton.scss';
+</style>

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

@@ -0,0 +1,55 @@
+@use '../../../../styles/mixins/_scrollbar.scss' as scrollbar;
+.conversationCreateGroupDetail {
+  flex: 1;
+  height: 640px;
+  display: flex;
+  &--h5 {
+    height: 100%;
+  }
+  &__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;
+    @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 {
+    flex: 1;
+    border-bottom: 1px solid var(--stroke-color-primary);
+    color: var(--text-color-primary);
+  }
+}
+
+.from__label {
+  min-width: 85px;
+  font-weight: 400;
+  font-size: 14px;
+  color: var(--text-color-primary);
+}