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

package/src/components/ConversationList/ConversationListContent/ConversationListContent.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    :class="[$style.conversationListContent, className]"
+    :style="style"
+  >
+    <slot v-if="!error && !loading && !empty" />
+
+    <component
+      :is="PlaceholderLoadError.component"
+      v-else-if="error"
+      v-bind="PlaceholderLoadError.props"
+    />
+
+    <component
+      :is="PlaceholderLoading.component"
+      v-else-if="loading"
+      v-bind="PlaceholderLoading.props"
+    />
+
+    <component
+      :is="PlaceholderEmptyList.component"
+      v-else-if="empty"
+      v-bind="PlaceholderEmptyList.props"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PlaceHolderTypes } from '../../../types';
+import PlaceHolder from '../ConversationPlaceHolder';
+import type { ConversationListContentProps } from '../../../types';
+
+const props = withDefaults(defineProps<ConversationListContentProps>(), {
+  empty: false,
+  loading: false,
+  error: false,
+  PlaceholderEmptyList: () => ({
+    component: PlaceHolder,
+    props: { type: PlaceHolderTypes.NO_CONVERSATIONS },
+  }),
+  PlaceholderLoading: () => ({
+    component: PlaceHolder,
+    props: { type: PlaceHolderTypes.LOADING },
+  }),
+  PlaceholderLoadError: () => ({
+    component: PlaceHolder,
+    props: { type: PlaceHolderTypes.WRONG },
+  }),
+});
+
+</script>
+
+<style lang="scss" module>
+@import './ConversationListContent.scss';
+</style>

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

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

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.scss

@@ -0,0 +1,25 @@
+.conversationListHeader {
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  min-width: 0;
+  background-color: var(--bg-color-operate, #f5f5f5);
+  color: var(--text-color-primary, #333);
+
+  &__left,
+  &__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+}

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">
+      <IconLiveLoading
+        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, IconLiveLoading } 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('TUIConversation.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>