tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    :class="[$style.conversationListHeader, className]"
+    :style="style"
+  >
+    <div
+      v-if="left || $slots.left"
+      :class="$style.conversationListHeader__left"
+    >
+      <component
+        :is="left"
+        v-if="left"
+      />
+      <slot
+        v-else
+        name="left"
+      />
+    </div>
+
+    <slot />
+
+    <div
+      v-if="right || $slots.right"
+      :class="$style.conversationListHeader__right"
+    >
+      <component
+        :is="right"
+        v-if="right"
+      />
+      <slot
+        v-else
+        name="right"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ConversationListHeaderProps } from '../../../types';
+
+const props = withDefaults(defineProps<ConversationListHeaderProps>(), {
+  left: undefined,
+  right: undefined,
+  className: undefined,
+  style: () => ({}),
+});
+</script>
+
+<style lang="scss" module>
+@import './ConversationListHeader.scss';
+</style>

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

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

package/src/components/ConversationList/ConversationPlaceHolder/ConversationPlaceHolder.scss

@@ -0,0 +1,51 @@
+.conversationPlaceHolder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--text-color-secondary, #666);
+  font-size: 14px;
+
+  &__icon {
+    margin-bottom: 16px;
+  }
+
+  &__label {
+    margin-bottom: 16px;
+    text-align: center;
+  }
+}
+
+.conversationPlaceHolder__loading {
+  width: 42px;
+  height: 42px;
+  animation: spin 1s linear infinite;
+}
+
+.conversationPlaceHolder-empty {
+  .conversationPlaceHolder__emptyIcon {
+    width: 42px;
+    height: 42px;
+    opacity: 0.5;
+    color: var(--text-color-secondary, #666);
+  }
+}
+
+.conversationPlaceHolder-error {
+  .conversationPlaceHolder__errorIcon {
+    width: 42px;
+    height: 42px;
+    opacity: 0.5;
+    color: var(--text-color-secondary, #666);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 

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

@@ -0,0 +1,78 @@
+<template>
+  <div :class="[$style.conversationPlaceHolder, className]">
+    <div :class="$style.conversationPlaceHolder__icon">
+      <IconLoading
+        v-if="type === PlaceHolderTypes.LOADING"
+        :class="$style.conversationPlaceHolder__loading"
+      />
+      <div
+        v-else-if="type === PlaceHolderTypes.NO_CONVERSATIONS"
+        :class="$style.conversationPlaceHolder__empty"
+      >
+        <img
+          :class="$style.conversationPlaceHolder__emptyIcon"
+          src="./images/cry.png"
+          alt="empty"
+        >
+      </div>
+      <div
+        v-else-if="type === PlaceHolderTypes.WRONG"
+        :class="$style.conversationPlaceHolder__error"
+      >
+        <img
+          :class="$style.conversationPlaceHolder__errorIcon"
+          src="./images/effort.png"
+          alt="error"
+        >
+      </div>
+    </div>
+
+    <div
+      v-if="placeholderText"
+      :class="$style.conversationPlaceHolder__label"
+    >
+      {{ searchString ? `${placeholderText} '${searchString}'` : placeholderText }}
+    </div>
+    <TUIButton
+      v-if="type === PlaceHolderTypes.WRONG && retry"
+      type="primary"
+      @click="retry"
+    >
+      {{ t('TUIConversation.Retry') }}
+    </TUIButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults, defineProps } from 'vue';
+import { TUIButton, useUIKit, IconLoading } from '@tencentcloud/uikit-base-component-vue3';
+import { PlaceHolderTypes } from '../../../types/conversation';
+import type { ConversationPlaceHolderProps } from '../../../types/conversation';
+
+const props = withDefaults(defineProps<ConversationPlaceHolderProps>(), {
+  className: '',
+  type: PlaceHolderTypes.NO_CONVERSATIONS,
+  iconSize: 42,
+  searchString: '',
+  retry: undefined,
+});
+
+const { t } = useUIKit();
+
+const placeholderText = computed(() => {
+  switch (props.type) {
+    case PlaceHolderTypes.LOADING:
+      return t('TUIConversation.Loading');
+    case PlaceHolderTypes.NO_CONVERSATIONS:
+      return t('TUIConversation.No conversations');
+    case PlaceHolderTypes.WRONG:
+      return t('TUIConversation.Load failed');
+    default:
+      return '';
+  }
+});
+</script>
+
+<style lang="scss" module>
+@import './ConversationPlaceHolder.scss';
+</style>

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

@@ -0,0 +1,4 @@
+import { default as ConversationPlaceHolder } from './ConversationPlaceHolder.vue';
+
+export * from './ConversationPlaceHolder.vue';
+export default ConversationPlaceHolder;

package/src/components/ConversationList/ConversationPreview/ConversationPreview.scss

@@ -0,0 +1,116 @@
+.conversationPreview {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  color: var(--text-color-primary);
+  background-color: var(--list-color-default);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  position: relative;
+
+  &:hover {
+    background-color: var(--list-color-hover, #f8f9fa);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--active {
+    background-color: var(--list-color-hover, #e3f2fd);
+  }
+
+  &--pin {
+    background-color: var(--list-color-hover, #f3e5f5);
+  }
+
+  &__avatar {
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  &__title {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--text-color-primary, #333);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+  }
+
+  &__time {
+    font-size: 12px;
+    line-height: 24px;
+    color: var(--text-color-secondary, #666);
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__abstract {
+    font-size: 12px;
+    color: var(--text-color-secondary, #666);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+  }
+
+  &__external {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: space-between;
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  &__unread {
+    flex-shrink: 0;
+    margin-left: 8px;
+
+    .unread-count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 18px;
+      height: 18px;
+      padding: 0 6px;
+      background-color: var(--text-color-error);
+      color: #FFF;
+      border-radius: 9px;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+
+  &__actions {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 100;
+    background-color: white;
+    border: 1px solid var(--border-color, #e0e0e0);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+} 

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

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <component
+      :is="Preview"
+      :conversation="conversation"
+      :is-selected="isSelected"
+      :enable-actions="enableActions"
+      :highlight-match-string="highlightMatchString"
+      :avatar="Avatar"
+      :conversation-actions="ConversationActions"
+      :title="Title"
+      :last-message-timestamp="LastMessageTimestamp"
+      :last-message-abstract="LastMessageAbstract"
+      :unread="Unread"
+      :actions-config="actionsConfig"
+      :class-name="className"
+      :style="style"
+      @select="handleSelectConversation"
+    >
+      <slot />
+    </component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, h } from 'vue';
+import { Avatar as DefaultAvatar } from '../../Avatar';
+import { ConversationActions as DefaultConversationActions } from '../ConversationActions';
+import {
+  ConversationPreviewUI,
+  ConversationPreviewAbstract,
+  ConversationPreviewTimestamp,
+  ConversationPreviewTitle,
+  ConversationPreviewUnread } from '.';
+import type {
+  ConversationModel,
+  ConversationPreviewProps,
+} from '../../../types';
+
+const props = withDefaults(defineProps<ConversationPreviewProps>(), {
+  isSelected: false,
+  enableActions: true,
+  Preview: () => ConversationPreviewUI,
+  Avatar: () => DefaultAvatar,
+  ConversationActions: () => DefaultConversationActions,
+});
+
+const emit = defineEmits<{
+  selectConversation: [conversation: ConversationModel];
+}>();
+
+const Title = computed(() => h(ConversationPreviewTitle, {
+  conversation: props.conversation,
+  highlightMatchString: props.highlightMatchString,
+}));
+
+const LastMessageTimestamp = computed(() => h(ConversationPreviewTimestamp, {
+  conversation: props.conversation,
+}));
+
+const LastMessageAbstract = computed(() => h(ConversationPreviewAbstract, {
+  conversation: props.conversation,
+}));
+
+const Unread = computed(() => h(ConversationPreviewUnread, {
+  conversation: props.conversation,
+}));
+
+const handleSelectConversation = (conversation: ConversationModel) => {
+  emit('selectConversation', conversation);
+};
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <div :class="$style.conversationPreview__abstract">
+    <template v-if="draftTextAbstract">
+      <label :class="$style.conversationPreview__drafts">{{ t('TUIChat.[Drafts]') }}</label>
+      {{ ' ' }}
+      {{ draftTextAbstract }}
+    </template>
+    <template v-else>
+      {{ latestMessagePreview }}
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { JSONStringToParse } from '../../../utils';
+import { getLatestMessagePreview } from './utils';
+import type { ConversationModel } from '../../../types';
+
+const props = defineProps<{
+  conversation: ConversationModel;
+}>();
+
+const { t } = useUIKit();
+
+const draftTextAbstract = computed(() => {
+  const { draftText = '' } = props?.conversation || {};
+  return JSONStringToParse(draftText)?.abstract || draftText;
+});
+
+const latestMessagePreview = computed(() => getLatestMessagePreview(props.conversation, t));
+</script>
+
+<style lang="scss" module>
+@import './ConversationPreview.scss';
+</style>

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

@@ -0,0 +1,27 @@
+<template>
+  <div :class="$style.conversationPreview__time">
+    {{ time }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { getTimeStamp } from '../../../utils/time';
+import type { ConversationModel } from '../../../types';
+
+const props = defineProps<{
+  conversation: ConversationModel;
+}>();
+
+const { language } = useUIKit();
+
+const time = getTimeStamp({
+  time: Number(props.conversation?.lastMessage?.lastTime || 0) * 1000,
+  language,
+}) || '';
+
+</script>
+
+<style lang="scss" module>
+@import './ConversationPreview.scss';
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <div :class="[$style.conversationPreview__title, $style.textEllipsis]">
+    <span
+      v-for="(item, index) in titleItems"
+      :key="index"
+      :class="{
+        [$style['conversationPreview__title--highlight']]: item.isHighlight,
+        [$style['conversationPreview__title--normal']]: !item.isHighlight,
+      }"
+    >
+      {{ item.text }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { generateHighlightTitle } from './utils';
+import type { ConversationModel } from '../../../types';
+
+const props = defineProps<{
+  conversation: ConversationModel;
+  highlightMatchString?: string;
+}>();
+
+const titleItems = computed(() => generateHighlightTitle(props.conversation, props.highlightMatchString));
+</script>
+
+<style lang="scss" module>
+@import './ConversationPreview.scss';
+</style>

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

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div
+      ref="conversationPreviewRef"
+      :class="[$style.conversationPreview, className,
+               isH5 && [$style['conversationPreview--mobile']],
+               (isSelected || conversation?.conversationID === activeConversation?.conversationID)
+                 && [$style['conversationPreview--active']],
+               (!conversation?.isMuted && (conversation?.unreadCount > 0 || conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD)))
+                 && [$style['conversationPreview--unread']],
+               conversation?.isPinned && [$style['conversationPreview--pin']],
+               conversation?.isMuted && [$style['conversationPreview--mute']],
+      ]"
+      :style="style"
+      @click="handleClick"
+      @touchstart="handleTouchStart"
+      @touchend="handleTouchEnd"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    >
+      <slot>
+        <div :class="$style['conversationPreview__avatar']">
+          <component
+            :is="Avatar"
+            :src="conversation?.getAvatar?.()"
+            :unreadCount="conversation?.isMuted && conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD) ? 1 : undefined"
+            :isDotUnreadCount="conversation?.isMuted && conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD)"
+          />
+        </div>
+
+        <div :class="$style['conversationPreview__content']">
+          <component
+            :is="Title"
+            :conversation="conversation"
+          />
+          <component
+            :is="LastMessageAbstract"
+            :conversation="conversation"
+          />
+        </div>
+
+        <div :class="$style['conversationPreview__external']">
+          <component
+            :is="Unread"
+            :conversation="conversation"
+          />
+          <component
+            :is="ConversationActions"
+            v-if="enableActions && isActionMenuActive && !isH5"
+            :conversation="conversation"
+            v-bind="actionsConfig"
+            @close="handleCloseActionsModal"
+          />
+          <component
+            :is="LastMessageTimestamp"
+            v-else
+            :conversation="conversation"
+          />
+        </div>
+      </slot>
+    </div>
+
+    <component
+      :is="ConversationActions"
+      v-if="isH5 && enableActions && isActionMenuActive"
+      :conversation="conversation"
+      v-bind="actionsConfig"
+      @close="handleCloseActionsModal"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { useLongPress, useMouseHover } from '../../../hooks';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { isH5 } from '../../../utils';
+import { Avatar as DefaultAvatar } from '../../Avatar';
+import { ConversationActions as DefaultConversationActions } from '../ConversationActions';
+import { default as DefaultLastMessageAbstract } from './ConversationPreviewAbstract.vue';
+import { default as DefaultLastMessageTimestamp } from './ConversationPreviewTimestamp.vue';
+import { default as DefaultTitle } from './ConversationPreviewTitle.vue';
+import { default as DefaultUnread } from './ConversationPreviewUnread.vue';
+import type {
+  ConversationModel,
+  ConversationPreviewUIProps,
+} from '../../../types';
+
+const props = withDefaults(defineProps<ConversationPreviewUIProps>(), {
+  isSelected: false,
+  enableActions: true,
+  Avatar: () => DefaultAvatar,
+  ConversationActions: () => DefaultConversationActions,
+  Title: () => DefaultTitle,
+  LastMessageAbstract: () => DefaultLastMessageAbstract,
+  Unread: () => DefaultUnread,
+  LastMessageTimestamp: () => DefaultLastMessageTimestamp,
+});
+
+const emit = defineEmits<{
+  select: [conversation: ConversationModel];
+}>();
+
+const { activeConversation, setActiveConversation } = useConversationListState();
+
+const conversationPreviewRef = ref<HTMLElement>();
+const isActionMenuActive = ref(false);
+
+const { isHovering } = useMouseHover(conversationPreviewRef);
+const { handleTouchStart, handleTouchEnd } = useLongPress(() => {
+  if (isH5) {
+    isActionMenuActive.value = true;
+  }
+});
+
+watch(isHovering, (newValue) => {
+  if (!isH5) {
+    isActionMenuActive.value = newValue;
+  }
+});
+
+const handleClick = () => {
+  emit('select', props.conversation);
+  setActiveConversation(props.conversation.conversationID);
+};
+
+const handleMouseEnter = () => {
+  if (!isH5) {
+    isActionMenuActive.value = true;
+  }
+};
+
+const handleMouseLeave = () => {
+  if (!isH5) {
+    isActionMenuActive.value = false;
+  }
+};
+
+const handleCloseActionsModal = () => {
+  isActionMenuActive.value = false;
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationPreview.scss';
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <div :class="$style.conversationPreview__unread">
+    <IconMute v-if="conversation?.isMuted" />
+    <span
+      v-else-if="conversation?.unreadCount > 99"
+      :class="$style['unread-count']"
+    >99+</span>
+    <span
+      v-else-if="conversation?.unreadCount > 0"
+      :class="$style['unread-count']"
+    >{{ conversation?.unreadCount }}</span>
+    <span
+      v-else-if="isUnreadMarked"
+      :class="$style['unread-count']"
+    >1</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { IconMute } from '@tencentcloud/uikit-base-component-vue3';
+import type { ConversationModel } from '../../../types';
+
+const props = defineProps<{
+  conversation: ConversationModel;
+}>();
+
+const isUnreadMarked = computed(() => props.conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD));
+</script>
+
+<style lang="scss" module>
+@import './ConversationPreview.scss';
+</style>

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

@@ -0,0 +1,7 @@
+export { default as ConversationPreview } from './ConversationPreview.vue';
+export { default as ConversationPreviewUI } from './ConversationPreviewUI.vue';
+export { default as ConversationPreviewTitle } from './ConversationPreviewTitle.vue';
+export { default as ConversationPreviewTimestamp } from './ConversationPreviewTimestamp.vue';
+export { default as ConversationPreviewAbstract } from './ConversationPreviewAbstract.vue';
+export { default as ConversationPreviewUnread } from './ConversationPreviewUnread.vue';
+export { generateHighlightTitle, getLatestMessagePreview } from './utils';