tuikit-atomicx-vue3 3.4.1 → 4.3.0

package/src/components/BarrageList/Message/ImageMessage/ImageMessage.vue

@@ -1,181 +0,0 @@
-<script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-
-interface IImageMessageProps {
-  message: IMessageModel;
-  isLastInChunk?: boolean;
-}
-
-interface IImageMessageContent {
-  url: string;
-  width: number;
-  height: number;
-  showName: string;
-}
-
-const props = withDefaults(defineProps<IImageMessageProps>(), {
-  isLastInChunk: false,
-  message: () => ({} as IMessageModel),
-});
-
-const messageContent = props.message.getMessageContent() as IImageMessageContent;
-
-const windowResize = ref(false);
-const loaded = ref(false);
-const naturalSize = ref<{ height: number; aspectRatio: number } | null>(
-  messageContent.width && messageContent.height
-    ? { height: messageContent.height, aspectRatio: messageContent.width / messageContent.height }
-    : null,
-);
-
-const isMessageOwner = computed(() => props.message.flow === 'out');
-
-// Calculate final display size
-const displaySize = computed(() => {
-  const MAX_HEIGHT = 400;
-  const DEFAULT_RATIO = 3 / 4;
-
-  if (!naturalSize.value) {
-    return {
-      height: MAX_HEIGHT,
-      aspectRatio: DEFAULT_RATIO,
-    };
-  }
-
-  const { aspectRatio } = naturalSize.value;
-
-  if (aspectRatio > 1) {
-    // If image is horizontal, reduce height to 200
-    return {
-      aspectRatio,
-      height: 200,
-    };
-  }
-  // If image is vertical, fix height to 400
-  return {
-    aspectRatio,
-    height: 400,
-  };
-});
-
-const onResize = () => {
-  windowResize.value = true;
-};
-
-const onImageLoad = (e: Event) => {
-  const img = e.target as HTMLImageElement;
-  naturalSize.value = {
-    aspectRatio: img.naturalWidth / img.naturalHeight,
-    height: img.naturalHeight,
-  };
-  loaded.value = true;
-};
-
-onMounted(() => {
-  window.addEventListener('resize', onResize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', onResize);
-});
-
-// Reset loading state when message ID changes
-watch(() => props.message.ID, () => {
-  loaded.value = false;
-  naturalSize.value = messageContent.width && messageContent.height
-    ? { height: messageContent.height, aspectRatio: messageContent.width / messageContent.height }
-    : null;
-});
-</script>
-
-<template>
-  <div
-    :class="cs('image-message', {
-      'image-message--last--self': isMessageOwner && isLastInChunk,
-      'image-message--last--other': !isMessageOwner && isLastInChunk,
-      'image-message--loaded': loaded
-    })"
-    :style="{
-      minHeight: windowResize ? 'auto' : `${displaySize.height}px`,
-      maxHeight: `${displaySize.height}px`,
-      aspectRatio: naturalSize ? `${displaySize.aspectRatio}` : 'auto',
-      width: !loaded ? `${displaySize.height * displaySize.aspectRatio}px` : undefined
-    }"
-  >
-    <div
-      v-if="!loaded"
-      class="image-placeholder"
-    />
-    <img
-      :src="messageContent.url"
-      :class="cs('image', {
-        'image--loaded': loaded
-      })"
-      @load="onImageLoad"
-    >
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.image-message {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: #f5f5f5;
-  width: 100%;
-
-  &--last--self {
-    border-bottom-right-radius: 4px;
-  }
-
-  &--last--other {
-    border-bottom-left-radius: 4px;
-  }
-}
-
-.image-placeholder {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background:
-    linear-gradient(
-      90deg,
-      rgba(245, 245, 245, 100%) 0%,
-      rgba(235, 235, 235, 100%) 50%,
-      rgba(245, 245, 245, 100%) 100%
-    );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-}
-
-.image {
-  max-width: 100%; // Ensure image doesn't exceed container
-  max-height: 100%;
-  width: 100%; // Keep original image ratio
-  height: auto;
-  object-fit: contain;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-
-  &--loaded {
-    opacity: 1;
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-
-  100% {
-    background-position: -200% 0;
-  }
-}
-</style>

package/src/components/BarrageList/Message/ImageMessage/index.ts

@@ -1,3 +0,0 @@
-import ImageMessage from './ImageMessage.vue';
-
-export { ImageMessage };

package/src/components/BarrageList/Message/MergerMessage/MergerMessage.vue

@@ -1,6 +0,0 @@
-<script lang='ts' setup>
-</script>
-
-<template>
-  [Merger Message]
-</template>

package/src/components/BarrageList/Message/MergerMessage/index.ts

@@ -1,3 +0,0 @@
-import MergerMessage from "./MergerMessage.vue";
-
-export { MergerMessage };

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/MessageMeta.vue

@@ -1,70 +0,0 @@
-<template>
-  <div
-    :class="cs('message-meta', props.class)"
-    :style="props.style"
-  >
-    <span
-      v-if="props.isShowTime"
-      class="message-meta__time"
-    >{{ getTimeStampAuto(props.timestamp) }}</span>
-    <div
-      v-if="showStatus"
-      class="message-meta__status"
-    >
-      <MessageStatusIcon :status="props.status" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import cs from 'classnames';
-import { getTimeStampAuto } from '../../../../../utils/time';
-import MessageStatusIcon from './MessageStatusIcon.vue';
-
-interface IMessageMetaProps {
-  timestamp: number;
-  /**
-   * - unSend: not sent
-   * - success: sent successfully
-   * - fail: sending failed
-   */
-  isShowSendStatus?: boolean;
-  isShowReadStatus?: boolean;
-  isShowTime?: boolean;
-  status?: string;
-  class?: string;
-  style?: Record<string, any>;
-}
-
-const props = withDefaults(defineProps<IMessageMetaProps>(), {
-  isShowSendStatus: false,
-  isShowReadStatus: false,
-  isShowTime: false,
-  status: '',
-  class: undefined,
-  style: undefined,
-});
-
-const showStatus = computed(() => (props.status && props.isShowSendStatus) || props.status === 'fail');
-</script>
-
-<style lang="scss" scoped>
-.message-meta {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: #999;
-  margin-top: 4px;
-
-  .time {
-    line-height: 1;
-  }
-
-  &__status {
-    color: #2a7bfa;
-  }
-}
-</style>

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/MessageStatusIcon.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { IconErrorToast, IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
-
-defineProps<{
-  status: string;
-}>();
-</script>
-
-<template>
-  <IconLoading
-    v-if="status === 'unSend'"
-    class="message-meta__status--unSend"
-    :size="14"
-  />
-  <IconSuccess
-    v-else-if="status === 'success'"
-    name="&#xe60a;"
-    :size="14"
-  />
-  <IconErrorToast
-    v-else-if="status === 'fail'"
-    :size="14"
-  />
-</template>
-
-<style lang="scss" scoped>
-.message-meta__status--unSend {
-  animation: rotate-infinite 1s linear infinite;
-}
-
-@keyframes rotate-infinite {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/index.ts

@@ -1,3 +0,0 @@
-import MessageMeta from './MessageMeta.vue';
-
-export { MessageMeta };

package/src/components/BarrageList/Message/RecalledMessage/RecalledMessage.vue

@@ -1,82 +0,0 @@
-<template>
-  <div
-    :class="cs('recalled-message', props.class)"
-    :style="props.style"
-  >
-    <template v-if="isMessageOwner">
-      {{ t('TUIChat.You') }}{{ t('TUIChat.recalled a message') }}
-      <div
-        v-if="isTextMessage"
-        role="button"
-        class="recalled-message__button"
-        @click="recallMessageToInput"
-      >
-        {{ t('TUIChat.Re-edit') }}
-      </div>
-    </template>
-    <template v-else>
-      {{ otherDisplayName }} {{ t('TUIChat.recalled a message') }}
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-
-interface IRecalledMessageProps {
-  message: IMessageModel;
-  class?: string;
-  style?: Record<string, any>;
-}
-
-const props = withDefaults(defineProps<IRecalledMessageProps>(), {
-  class: undefined,
-  style: undefined,
-});
-
-const { t } = useUIKit();
-
-// Assuming Vue version has similar inputStore
-// Need to implement or import the corresponding store when actually used
-const setInputValue = (text: string) => {
-  // Implement logic to set input value
-  console.log('Set input value:', text);
-};
-const inputElementRef = {
-  current: null as HTMLElement | null,
-};
-
-const isTextMessage = computed(() => props.message.type === TUIChatEngine.TYPES.MSG_TEXT);
-const isMessageOwner = computed(() => props.message.flow === 'out');
-const otherDisplayName = computed(() => props.message.nick || props.message.from || '');
-
-function recallMessageToInput() {
-  // Assuming Vue version has similar transformTextWithEmojiKeyToName function
-  // Need to implement or import the corresponding function when actually used
-  const transformedText = props.message.payload.text;
-  setInputValue(transformedText);
-  inputElementRef.current?.focus();
-}
-</script>
-
-<style lang="scss" scoped>
-.recalled-message {
-  display: flex;
-  flex-direction: row;
-  align-self: center;
-  justify-content: center;
-  font-size: 14px;
-  white-space: pre-wrap;
-  color: var(--text-color-secondary);
-
-  &__button {
-    cursor: pointer;
-    text-decoration: underline;
-    color: var(--text-color-link);
-  }
-}
-</style>

package/src/components/BarrageList/Message/RecalledMessage/index.ts

@@ -1,3 +0,0 @@
-import RecalledMessage from "./RecalledMessage.vue";
-
-export { RecalledMessage };

package/src/components/BarrageList/MessageForward/ForwardListItem.vue

@@ -1,67 +0,0 @@
-<script lang="ts" setup>
-import { defineProps, computed } from 'vue';
-import { IconCheckSm } from '@tencentcloud/uikit-base-component-vue3';
-import cs from 'classnames';
-import { Avatar } from '../../Avatar';
-import { useConversationListState } from '../../../states/ConversationListState';
-
-const props = defineProps<{
-  conversationID: string;
-  isSelected: boolean;
-}>();
-
-const { conversationList } = useConversationListState();
-
-const conversation = computed(() =>
-  conversationList.value?.find(_conversation => _conversation.conversationID === props.conversationID)
-);
-
-const conversationName = computed(() => conversation.value?.getShowName() || conversation.value?.conversationID || '');
-
-const conversationAvatar = computed(() => conversation.value?.getAvatar());
-</script>
-
-<template>
-  <div :class="cs('forward-list-item', { 'forward-list-item--selected': props.isSelected })">
-    <Avatar :src="conversationAvatar" :style="{ marginRight: '8px' }" />
-    <div class="forward-item__info">
-      <div class="forward-item__name">
-        {{ conversationName }}
-      </div>
-    </div>
-    <IconCheckSm v-if="props.isSelected" class="forward-item__checkbox" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@use '../../../styles/mixins/index' as mixin;
-
-.forward-list-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 12px 8px;
-  border-radius: 8px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--dropdown-color-hover);
-  }
-}
-
-.forward-item {
-  &__info {
-    flex: 1;
-    margin-left: 12px;
-  }
-
-  &__name {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  &__checkbox {
-    color: #1890ff;
-  }
-}
-</style>