tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/src/components/MessageInput/AttachmentPicker/AttachmentPicker.vue

@@ -1,29 +1,26 @@
 <template>
-  <div :class="[styles['attachment-picker'], className]">
+  <div :class="[styles['attachment-picker']]">
     <template v-if="isCollapsed">
       <PopoverRoot>
         <PopoverTrigger as="span">
           <IconPlus
             :class="styles['attachment-picker__icon']"
-            size="24"
+            size="20"
           />
         </PopoverTrigger>
         <PopoverPortal>
           <PopoverContent
-            side="top"
-            align="start"
-            :side-offset="5"
-            class="rounded-lg p-5 w-[260px] bg-white shadow-sm border will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+          side="top"
+          align="start"
+          :side-offset="5"
           >
-            <div class="flex flex-col gap-2.5">
-              <div :class="styles['attachment-picker__popup']">
-                <component
-                  :is="picker.Component"
-                  v-for="(picker, index) in pickerItems"
-                  :key="index"
-                  v-bind="picker.props"
-                />
-              </div>
+            <div :class="styles['attachment-picker__popup']">
+              <component
+                :is="picker.Component"
+                v-for="(picker, index) in pickerItems"
+                :key="index"
+                v-bind="picker.props"
+              />
             </div>
           </PopoverContent>
         </PopoverPortal>
@@ -52,7 +49,6 @@ import ImagePicker from './ImagePicker.vue';
 import VideoPicker from './VideoPicker.vue';
 
 interface Props {
-  className?: string;
   attachmentPickerMode?: 'collapsed' | 'expanded';
 }
 
@@ -62,7 +58,6 @@ const ICON_SIZE = {
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  className: '',
   attachmentPickerMode: 'collapsed',
 });
 

package/src/components/MessageInput/AttachmentPicker/FilePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconFile } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

package/src/components/MessageInput/AttachmentPicker/ImagePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconImage } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

package/src/components/MessageInput/AttachmentPicker/VideoPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconVideo } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

package/src/components/MessageInput/EmojiPicker/EmojiPicker.module.scss

@@ -2,6 +2,7 @@
 
   &__icon {
     cursor: pointer;
+    display: flex;
   }
 
   &__list {

package/src/components/MessageInput/MessageInput.module.scss

@@ -5,7 +5,7 @@
   background-color: var(--bg-color-operate);
   height: 160px;
   flex-shrink: 0;
-  padding: 3px 10px 10px;
+  padding: 10px;
   gap: 4px;
 
   &__toolbar {

package/src/components/MessageInput/MessageInput.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="[styles['message-input'], className]"
-    :style="style"
+    :class="[styles['message-input']]"
   >
     <slot name="headerToolbar">
       <div :class="styles['message-input__toolbar']">
@@ -18,13 +17,21 @@
       <div :class="styles['message-input__leftInline']">
         <slot name="leftInline" />
       </div>
-      <TextEditor
-        :autoFocus="autoFocus"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :prefix="slots?.inputPrefix"
-        :suffix="slots?.inputSuffix"
-      />
+      <slot name="textEditor">
+        <DefaultTextEditor
+          :autoFocus="autoFocus"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :key="disabled ? 'disabled-editor' : 'enabled-editor'"
+        >
+          <template #inputPrefix>
+            <slot name="inputPrefix" />
+          </template>
+          <template #inputSuffix>
+            <slot name="inputSuffix" />
+          </template>
+        </DefaultTextEditor>
+      </slot>
       <div :class="styles['message-input__rightInline']">
         <slot name="rightInline" />
       </div>
@@ -34,7 +41,7 @@
         <SendButton
           v-if="!hideSendButton"
           :class="styles['message-input__send-button']"
-          :disabled="!inputRawValue"
+          :disabled="props.disabled"
           @click="sendInputMessage"
         />
       </div>
@@ -50,8 +57,8 @@ import { EmojiPicker } from './EmojiPicker';
 import styles from './MessageInput.module.scss';
 import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { SendButton } from './SendButton';
-import { TextEditor } from './TextEditor';
-import type { CustomAction, IMessageInputProps } from './types';
+import { TextEditor as DefaultTextEditor } from './TextEditor';
+import type { CustomAction, MessageInputProps } from './types';
 
 const DEFAULT_ACTIONS = [
   { key: 'EmojiPicker', component: EmojiPicker },
@@ -61,16 +68,15 @@ const DEFAULT_ACTIONS = [
   { key: 'VideoPicker', component: VideoPicker },
 ];
 
-const props = withDefaults(defineProps<IMessageInputProps>(), {
+const props = withDefaults(defineProps<MessageInputProps>(), {
   autoFocus: true,
   disabled: false,
   hideSendButton: false,
   placeholder: '',
-  className: '',
-  style: () => ({}),
   attachmentPickerMode: 'collapsed',
   actions: () => ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'],
 });
+
 const { inputRawValue, setContent, sendMessage } = useMessageInputState();
 
 const pickProps = <T extends object, K extends keyof T>(

package/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue

@@ -32,7 +32,7 @@ import styles from './QuotedMessagePreview.module.scss';
 import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
 const { t } = useUIKit();
-const { currentConversation } = useConversationListState();
+const { activeConversation } = useConversationListState();
 const { focusEditor } = useMessageInputState();
 const { quotedMessage, clearQuotedMessage } = useMessageActionState();
 
@@ -44,7 +44,7 @@ watch(quotedMessage, (newVal) => {
 });
 
 // Watch conversation changes
-watch(currentConversation, () => {
+watch(activeConversation, () => {
   clearQuotedMessage();
 });
 

package/src/components/MessageInput/SendButton/SendButton.vue

@@ -1,7 +1,7 @@
 <template>
   <TUIButton
     type="primary"
-    shape="round"
+    radius="round"
     size="medium"
     :disabled="disabled"
     @click="onSendButtonClick"

package/src/components/MessageInput/TextEditor/Editor.scss

@@ -1,8 +1,9 @@
 @use '../../../styles//mixins/scrollbar' as scrollbar;
 
-.tiptap.ProseMirror {
+
+.message-input .tiptap.ProseMirror {
   height: auto;
-  flex: 1 0 auto;
+  flex: 1;
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
@@ -11,6 +12,7 @@
   overflow-y: auto;
   border: none !important;
   outline: none !important;
+  justify-content: flex-start;
 
   @include scrollbar.scrollbar-base();
 

package/src/components/MessageInput/TextEditor/TextEditor.module.scss

@@ -22,4 +22,5 @@
 .editor {
   flex: 1;
   display: flex;
+  flex-direction: column;
 }

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -1,14 +1,15 @@
 <template>
   <div :class="[styles['input-wrapper'], props.disabled && styles.disabled]">
     <div :class="styles['input-prefix']">
-      <slot name="prefix" />
+      <slot name="inputPrefix" />
     </div>
     <div
-      ref="editorRef"
+      ref="editorDomRef"
+      :key="props.disabled ? 'disabled' : 'enabled'"
       :class="styles['editor']"
     />
     <div :class="styles['input-suffix']">
-      <slot name="suffix" />
+      <slot name="inputSuffix" />
     </div>
   </div>
 </template>
@@ -38,7 +39,7 @@ const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
-const editorRef = ref<HTMLDivElement | null>(null);
+const editorDomRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
 const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
@@ -46,11 +47,13 @@ const placeholderText = computed(() => (props.disabled ? '' : props.placeholder
 let editorInstance: Editor | null = null;
 
 onMounted(() => {
-  const element = editorRef.value;
+  const element = editorDomRef.value;
   if (!element) {
     return;
   }
 
+  element.classList.add('message-input');
+
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,
@@ -77,7 +80,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  const element = editorRef.value;
+  const element = editorDomRef.value;
   if (editorInstance && element) {
     editorInstance.destroy();
     element.removeAttribute('data-editor-created');
@@ -90,4 +93,13 @@ watch(activeConversation, (newConversation, oldConversation) => {
     setContent('');
   }
 });
+
+watch(() => props.disabled, (newDisabled) => {
+  if (editorInstance) {
+    editorInstance.setEditable(!newDisabled);
+    if (newDisabled) {
+      setContent('');
+    }
+  }
+});
 </script>

package/src/components/MessageInput/i18n/index.ts

@@ -1,13 +1,7 @@
-import { i18next } from '@tencentcloud/uikit-base-component-vue3';
-
 import enUS from './en-US';
 import zhCN from './zh-CN';
 
-const resources = {
+export const resources = {
   'en-US': enUS,
   'zh-CN': zhCN,
 };
-
-Object.entries(resources).forEach(([lng, resource]) => {
-  i18next.addResourceBundle(lng, 'translation', { MessageInput: resource }, true, false);
-});

package/src/components/MessageInput/index.ts

@@ -1,16 +1,33 @@
-import { AttachmentPicker, FilePicker, ImagePicker, VideoPicker } from './AttachmentPicker';
-import { EmojiPicker } from './EmojiPicker';
-import MessageInput from './MessageInput.vue';
-import { TextEditor } from './TextEditor';
+import {
+  AttachmentPicker as AttachmentPickerComponent,
+  FilePicker as FilePickerComponent,
+  ImagePicker as ImagePickerComponent,
+  VideoPicker as VideoPickerComponent,
+} from './AttachmentPicker';
+import { EmojiPicker as EmojiPickerComponent } from './EmojiPicker';
+import { TextEditor as TextEditorComponent } from './TextEditor';
+import MessageInputComponent from './MessageInput.vue';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
+
+addI18n('en-US', { translation: { MessageInput: resources['en-US'] } });
+addI18n('zh-CN', { translation: { MessageInput: resources['zh-CN'] } });
+
+const AttachmentPicker = AttachmentPickerComponent;
+const FilePicker = FilePickerComponent;
+const ImagePicker = ImagePickerComponent;
+const VideoPicker = VideoPickerComponent;
+const EmojiPicker = EmojiPickerComponent;
+const TextEditor = TextEditorComponent;
+const MessageInput = MessageInputComponent;
 
-import './i18n';
 
 export {
-  TextEditor,
-  MessageInput,
-  EmojiPicker,
   AttachmentPicker,
   FilePicker,
   ImagePicker,
   VideoPicker,
+  EmojiPicker,
+  TextEditor,
+  MessageInput,
 };

package/src/components/MessageInput/types.d.ts

@@ -20,13 +20,11 @@ export type MessageInputActions = Array<BuiltInAction | CustomAction>;
 
 export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
 
-export interface IMessageInputProps {
+export interface MessageInputProps {
   autoFocus?: boolean;
   disabled?: boolean;
   hideSendButton?: boolean;
   placeholder?: string;
-  className?: string;
-  style?: CSSProperties;
   attachmentPickerMode?: MessageInputAttachmentPickerMode;
   actions?: MessageInputActions;
   slots?: MessageInputSlots;
@@ -39,4 +37,5 @@ export interface MessageInputSlots {
   rightInline?: () => VNode[];
   inputPrefix?: () => VNode[];
   inputSuffix?: () => VNode[];
-}
+  textEditor?: () => VNode[];
+}

package/src/components/MessageList/Message/CustomMessage/CustomMessage.vue

@@ -3,5 +3,5 @@
 </script>
 
 <template>
-  [Custom Message]
+  <div>undefined custom Message</div>
 </template>

package/src/components/MessageList/Message/FaceMessage/FaceMessage.vue

@@ -9,13 +9,13 @@
 
 <script lang="ts" setup>
 import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
-interface IFaceMessageProps {
-  message: IMessageModel;
+interface FaceMessageProps {
+  message: MessageModel;
 }
 
-interface IFaceMessageContent {
+interface FaceMessageContent {
   /** sender show name */
   showName: string;
   /** face image name [yz00@2x] */
@@ -26,11 +26,14 @@ interface IFaceMessageContent {
   url: string;
 }
 
-const props = withDefaults(defineProps<IFaceMessageProps>(), {
-  message: () => ({} as IMessageModel),
+const props = withDefaults(defineProps<FaceMessageProps>(), {
+  message: () => ({} as MessageModel),
 });
 
-const messageContent = props.message.getMessageContent() as IFaceMessageContent;
+const messageContent = {
+  url: 'https://web.sdk.qcloud.com/im/assets/face-elem/yz13@2x.png',
+  name: 'yz13@2x',
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/MessageList/Message/LocationMessage/LocationMessage.vue

@@ -2,5 +2,7 @@
 </script>
 
 <template>
-  [Location Message]
+  <div>
+    [undefined location Message]
+  </div>
 </template>

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

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  [Merger Message]
+  <div>undefined merger Message</div>
 </template>

package/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue

@@ -12,16 +12,16 @@ import {
 import { useMessageActions } from '../../../../../hooks/useMessageActions';
 import classes from './MessageActionDropdown.module.scss';
 import type { MessageAction } from '../../../../../hooks/useMessageActions';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IMessageActionDropdownProps {
-  message: IMessageModel;
+interface MessageActionDropdownProps {
+  message: MessageModel;
   messageActionList?: MessageAction[] | undefined;
 }
 
-const props = withDefaults(defineProps<IMessageActionDropdownProps>(), {
+const props = withDefaults(defineProps<MessageActionDropdownProps>(), {
   messageActionList: undefined,
-  message: () => ({}) as IMessageModel,
+  message: () => ({}) as MessageModel,
 });
 
 const { t } = useUIKit();
@@ -74,7 +74,7 @@ const bodyElement = document.body;
             :message="message"
           />
           <template v-else-if="action.visible">
-            <span>{{ t(`TUIChat.${action.label}`, { defaultValue: action.label }) }}</span>
+            <span>{{ t(`MessageList.${action.label}`, { defaultValue: action.label }) }}</span>
             <template v-if="action.icon">
               <span v-if="typeof action.icon === 'string'">{{ action.icon }}</span>
               <component

package/src/components/MessageList/Message/MessageLayout/MessageLayout.vue

@@ -197,7 +197,6 @@ $message-avatar-gap: 8px;
     &.message-layout__wrapper--left {
       padding-left: calc(#{$message-avatar-size} + #{$message-avatar-gap});
     }
-    // 右侧聚合时反转 padding
     &.message-layout__wrapper--right {
       padding-right: calc(#{$message-avatar-size} + #{$message-avatar-gap});
     }

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

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { CSSProperties } from 'vue';
+import { computed, useCssModule } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import cs from 'classnames';
 import { View } from '../../../../../baseComp/View';
 import { getTimeStampAuto } from '../../../../../utils/time';
 
@@ -19,23 +17,20 @@ interface MessageMetaProps {
     isPeerRead: boolean;
   };
   status?: 'unSend' | 'success' | 'fail' | string;
-  class?: string;
-  style?: CSSProperties;
 }
 
 const props = withDefaults(defineProps<MessageMetaProps>(), {
   timestamp: 0,
-  flow: '',
+  flow: 'in',
   needReadReceipt: false,
   readReceiptInfo: undefined,
   status: undefined,
-  class: undefined,
-  style: undefined,
 });
 
 const emits = defineEmits(['onReadReceiptTextClick']);
 
 const { t } = useUIKit();
+const classes = useCssModule();
 
 const displayTime = computed(() => getTimeStampAuto(props.timestamp));
 
@@ -50,7 +45,12 @@ const shouldShowStatusIcon = computed(() => (
     || props.status === 'fail')));
 
 const readReceiptText = computed(() => {
-  if (!props.needReadReceipt || props.status !== 'success' || !props.readReceiptInfo) {
+  if (
+    !props.needReadReceipt
+    || props.status !== 'success'
+    || !props.readReceiptInfo
+    || props.flow === 'in'
+  ) {
     return '';
   }
 
@@ -69,10 +69,9 @@ const readReceiptText = computed(() => {
 
 <template>
   <View
-    :class="cs('message-meta', props.class)"
+    :class="classes['message-meta']"
     dir="row"
     align="center"
-    :style="props.style"
   >
     <!-- Show status icon case -->
     <template v-if="shouldShowStatusIcon">
@@ -83,23 +82,23 @@ const readReceiptText = computed(() => {
     </template>
 
     <!-- Show read receipt text case -->
-    <template v-else>
+    <template v-else-if="Boolean(readReceiptText)">
       <span
         v-if="readReceiptText && !props.isGroup"
-        class="message-meta__read-status"
+        :class="classes['message-meta__read-status']"
       >
         {{ readReceiptText }}
       </span>
       <span
         v-else-if="readReceiptText && props.isGroup && props.readReceiptInfo && props.readReceiptInfo.unreadCount > 0"
-        class="message-meta__group-unread"
+        :class="classes['message-meta__group-unread']"
         @click="handleGroupUnreadClick"
       >
         {{ readReceiptText }}
       </span>
       <span
         v-else-if="readReceiptText && props.isGroup"
-        class="message-meta__group-all-read"
+        :class="classes['message-meta__group-all-read']"
       >
         {{ readReceiptText }}
       </span>
@@ -108,14 +107,14 @@ const readReceiptText = computed(() => {
     <!-- Time display -->
     <span
       v-if="displayTime"
-      class="message-meta__time"
+      :class="classes['message-meta__time']"
     >
       {{ displayTime }}
     </span>
   </View>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .message-meta {
   gap: 4px;
   font-size: 12px;