tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "0.1.1",
+  "version": "3.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -22,15 +22,37 @@
     "./rtc": {
       "types": "./dist/rtc/index.d.ts",
       "import": "./dist/rtc/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
     }
   },
-  "scripts": {},
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "lint": "eslint .",
+    "check-chinese": "node scripts/check-chinese-simple.js",
+    "check-chinese:src": "node scripts/check-chinese-simple.js directory src",
+    "check-chinese:staged": "node scripts/check-chinese-simple.js staged",
+    "pre-commit": "npm run check-chinese:staged",
+    "publish": "npm publish --access public",
+    "test:pre": "node scripts/test-pre.js",
+    "test": "playwright test",
+    "test:ci": "playwright test || exit 0",
+    "test:ui": "playwright test --ui",
+    "test:serve": "node scripts/dev-test-app.js",
+    "docs:html": "node scripts/generate-test-docs.js",
+    "docs:serve": "npx http-server docs/html -p 8080 -o",
+    "publish:npm": "node scripts/publish-npm.js",
+    "publish:github": "node scripts/publish-github.js"
+  },
   "peerDependencies": {
     "@tencentcloud/chat": "^3.5.4",
     "@tencentcloud/chat-uikit-engine": "~2.5.1",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.2.1",
-    "@tencentcloud/uikit-base-component-vue3": "0.3.6",
+    "@tencentcloud/tuiroom-engine-js": "~3.3.0",
+    "@tencentcloud/uikit-base-component-vue3": "1.0.0",
     "vue": "^3.4.21"
   },
   "dependencies": {
@@ -60,4 +82,4 @@
     "vite-plugin-static-copy": "^2.2.0",
     "vue-tsc": "^2.0.6"
   }
-}
+}

package/src/baseComp/View/View.vue

@@ -20,7 +20,7 @@ defineOptions({
 
 interface ViewProps {
   gap?: number;
-  // 方向：row | column
+  // dir: row | column
   dir?: 'row' | 'column';
   // main aix：flex-start | flex-end | center | space-between | space-around | space-evenly
   justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
@@ -35,7 +35,6 @@ const props = withDefaults(defineProps<ViewProps>(), {
   align: undefined,
 });
 
-// 计算最终的 class
 const computedClass = computed(() => cs(
   'view__v',
   {

package/src/baseComp/index.ts

@@ -1,2 +1 @@
-export { Popup } from './Popup';
-export { default as Input } from './Input';
+export { default as Input } from './Input';

package/src/chat/index.ts

@@ -1,18 +1,28 @@
 // Chat related exports
 import { View as ViewComponent } from '../baseComp/View';
 import { ChatSetting as ChatSettingComponent } from '../components/ChatSetting';
+import {
+  ContactList as ContactListComponent,
+  ContactListItem as ContactListItemComponent,
+  ContactInfo as ContactInfoComponent,
+} from '../components/ContactList';
 import {
   ConversationList as ConversationListComponent,
   ConversationActions as ConversationActionsComponent,
   ConversationListHeader as ConversationListHeaderComponent,
   ConversationListContent as ConversationListContentComponent,
   ConversationPreview as ConversationPreviewComponent,
+  ConversationPreviewUI as ConversationPreviewUIComponent,
+  ConversationSearch as ConversationSearchComponent,
 } from '../components/ConversationList';
 import {
   MessageInput as MessageInputComponent,
   EmojiPicker as EmojiPickerComponent,
 } from '../components/MessageInput';
-import { MessageList as MessageListComponent } from '../components/MessageList';
+import {
+  MessageList as MessageListComponent,
+  Message as MessageComponent,
+} from '../components/MessageList';
 import {
   Search as SearchComponent,
   SearchAdvanced as SearchAdvancedComponent,
@@ -28,7 +38,6 @@ import { useMessageActionState as messageActionState } from '../states/MessageAc
 import { useMessageInputState as messageInputState } from '../states/MessageInputState';
 import { useMessageListState as messageListState } from '../states/MessageListState';
 import { useSearchState as searchState } from '../states/SearchState';
-import { useUIOpenControlState as uiOpenControlState } from '../states/UIOpenControlState';
 
 import ChatLoginServer from './server';
 
@@ -47,8 +56,14 @@ const ConversationActions = ConversationActionsComponent;
 const ConversationListHeader = ConversationListHeaderComponent;
 const ConversationListContent = ConversationListContentComponent;
 const ConversationPreview = ConversationPreviewComponent;
+const ConversationPreviewUI = ConversationPreviewUIComponent;
+const ConversationSearch = ConversationSearchComponent;
+const ContactList = ContactListComponent;
+const ContactListItem = ContactListItemComponent;
+const ContactInfo = ContactInfoComponent;
 
 const MessageList = MessageListComponent;
+const Message = MessageComponent;
 const MessageInput = MessageInputComponent;
 const EmojiPicker = EmojiPickerComponent;
 const ChatSetting = ChatSettingComponent;
@@ -63,7 +78,6 @@ const useMessageActionState = messageActionState;
 const useMessageInputState = messageInputState;
 const useMessageListState = messageListState;
 const useSearchState = searchState;
-const useUIOpenControlState = uiOpenControlState;
 
 export {
   // component
@@ -79,11 +93,17 @@ export {
   ConversationListHeader,
   ConversationListContent,
   ConversationPreview,
+  ConversationPreviewUI,
+  ConversationSearch,
   MessageList,
+  Message,
   MessageInput,
   EmojiPicker,
   ChatSetting,
   View,
+  ContactList,
+  ContactListItem,
+  ContactInfo,
 
   // Hooks
   useMessageActions,
@@ -94,5 +114,4 @@ export {
   useMessageActionState,
   useConversationListState,
   useSearchState,
-  useUIOpenControlState,
 };

package/src/components/Avatar/Avatar.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useSlots, h } from 'vue';
+import { computed, ref, useSlots, h, useCssModule } from 'vue';
 import type { CSSProperties } from 'vue';
 import { Badge } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
@@ -94,6 +94,7 @@ const props = withDefaults(defineProps<AvatarProps>(), {
 });
 
 const slots = useSlots();
+const classes = useCssModule();
 
 // State management
 const imageError = ref(false);
@@ -174,9 +175,9 @@ const fontSizeStyle = computed(() => {
 });
 
 const avatarClasses = computed(() => cs(
-  'avatar',
-  `avatar--shape-${props.shape}`,
-  typeof props.size !== 'number' && `size-${props.size}`,
+  classes['avatar'],
+  classes[`avatar--shape-${props.shape}`],
+  typeof props.size !== 'number' && classes[`size-${props.size}`],
   props.className,
 ));
 
@@ -195,11 +196,11 @@ const baseAvatar = computed(() => h(
     // Render avatar content
     (() => {
       if (children.value) {
-        return h('div', { class: 'avatar__fallback' }, children.value);
+        return h('div', { class: classes['avatar__fallback'] }, children.value);
       }
       if (props.src && !imageError.value) {
         return h('img', {
-          class: cs('avatar__image'),
+          class: classes['avatar__image'],
           src: props.src,
           alt: props.alt || 'avatar',
           onLoad: handleImageLoad,
@@ -207,10 +208,10 @@ const baseAvatar = computed(() => h(
         });
       }
       if (props.alt) {
-        return h('div', { class: 'avatar__fallback' }, getAltText());
+        return h('div', { class: classes['avatar__fallback'] }, getAltText());
       }
       return h('img', {
-        class: 'avatar__image',
+        class: classes['avatar__image'],
         src: DEFAULT_USER_AVATAR,
         alt: 'default avatar',
         onLoad: () => setIsLoading(false),
@@ -219,7 +220,7 @@ const baseAvatar = computed(() => h(
     })(),
 
     // Loading skeleton
-    isLoading.value && h('div', { class: 'avatar__skeleton' }),
+    isLoading.value && h('div', { class: classes['avatar__skeleton'] }),
   ],
 ));
 
@@ -258,10 +259,10 @@ defineOptions({
 export type { AvatarSize, AvatarShape, BaseAvatarProps, AvatarProps };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .avatar {
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -1,15 +1,23 @@
 <template>
   <div class="live-message-input-h5">
+    <div v-if="!editorShow" class="placeholder-container" :style="{width: props.width}"  @click="handleShowEditor">
+      <div class="input-actions">
+        <EmojiPicker :disabled="disabled" :trigger-style="{ display: 'flex' }" />
+      </div>
+      <span>{{ placeholderText }}</span>
+    </div>
+
     <BarrageInput
+      v-if="editorShow"
       :autoFocus="props.autoFocus"
-      :containerClass="props.containerClass"
+      :containerClass="inputClass"
       :containerStyle="props.containerStyle"
       :width="props.width"
       :height="props.height"
       :minHeight="props.minHeight"
       :maxHeight="props.maxHeight"
-      :placeholder="props.placeholder"
-      :disabled="props.disabled"
+      :placeholder="placeholderText"
+      :disabled="disabled"
       :maxLength="props.maxLength"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -26,10 +34,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, withDefaults, defineProps, defineEmits } from 'vue';
-import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, withDefaults, defineProps, defineEmits, computed, nextTick } from 'vue';
+import { useUIKit, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import { useLiveAudienceState } from '../../states/LiveAudienceState';
+import { useLoginState } from '../../states/LoginState';
 import { useMessageInputState } from '../../states/MessageInputState';
 import BarrageInput from './BarrageInput.vue';
+import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
+import { ERROR_MESSAGE } from './constants';
 
 const emit = defineEmits<{
   (e: 'focus'): void;
@@ -49,31 +61,50 @@ interface Props {
   maxLength?: number;
 }
 
+const { t } = useUIKit();
+
 const props = withDefaults(defineProps<Props>(), {
   containerClass: '',
   containerStyle: () => ({}),
   height: '',
-  minHeight: '40px',
-  maxHeight: '140px',
+  minHeight: '',
+  maxHeight: '',
   disabled: false,
   autoFocus: false,
   maxLength: 80,
 });
 
-const { t } = useUIKit();
-const { inputRawValue, setContent, sendMessage, blurEditor } = useMessageInputState();
+const placeholderText = computed(() => props.placeholder || t('Say something'));
+const { loginUserInfo } = useLoginState();
+const { audienceList } = useLiveAudienceState();
+
+const inputClass = computed(() => ['message-input-container-h5', props.containerClass].join(' '));
+const disabled = computed(() => {
+  const localUser = audienceList.value.find(item => item.userId === loginUserInfo.value?.userId);
+  return props.disabled || localUser?.isMessageDisabled;
+});
+
+const { inputRawValue, setContent, sendMessage, blurEditor, focusEditor } = useMessageInputState();
 const isFocus = ref(false);
+const editorShow = ref(false);
 const isTouching = ref(false);
 
 const handleTouchStart = () => {
   isTouching.value = true;
 };
 
-const handleSend = () => {
+const handleSend = async () => {
   if (inputRawValue.value) {
-    sendMessage();
-    setContent('');
     blurEditor();
+    try {
+      const inputValue = inputRawValue.value;
+      setContent('');
+      await sendMessage(inputValue);
+    } catch (err: any) {
+      TUIToast.error({
+        message: t(ERROR_MESSAGE[err.code as keyof typeof ERROR_MESSAGE] || 'send message failed'),
+      });
+    }
   }
 };
 const handleTouchEnd = () => {
@@ -94,6 +125,12 @@ const handleBlur = () => {
   isFocus.value = false;
   emit('blur');
 };
+
+const handleShowEditor = async () => {
+  editorShow.value = true;
+  await nextTick();
+  focusEditor();
+}
 </script>
 
 <style lang="scss" scoped>
@@ -102,5 +139,41 @@ const handleBlur = () => {
   align-items: center;
   gap: 12px;
   width: 100%;
+  :deep(.message-input-container-h5) {
+    height: 36px;
+    max-height: 140px;
+    min-height: 36px;
+    padding: 2px 12px;
+    border-radius: 100px;
+    border: 1px solid var(--stroke-color-primary)
+  }
+
+  .placeholder-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--bg-color-operate);
+    overflow: auto;
+    box-sizing: border-box;
+    height: 36px;
+    max-height: 140px;
+    min-height: 36px;
+    padding: 2px 12px;
+    border-radius: 100px;
+    border: 1px solid var(--stroke-color-primary);
+    color: var(--text-color-secondary);
+    text-align: center;
+    line-height: 1.5;
+    font-size: 14px;
+    user-select: none;
+
+    .input-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-right: 12px;
+      flex-shrink: 0;
+    }
+  }
 }
 </style>

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

@@ -13,6 +13,7 @@
     margin-bottom: 10px;
     background-color: var(--dropdown-color-default);
     box-shadow: 0 0 10px 0 var(--shadow-color);
+    user-select: none;
 
     &-item {
       display: flex;

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.vue

@@ -6,7 +6,7 @@
       </PopoverTrigger>
       <PopoverPortal>
         <PopoverContent side="top" align="center" :side-offset="8" style="box-sizing: border-box; z-index: 1000">
-          <div class="flex flex-col gap-2.5">
+          <div class="flex flex-col gap-2.5" tabindex="-1" style="outline: none;">
             <div :class="styles['emoji-picker__list']">
               <div
                 v-for="emojiKey in Object.keys(emojiUrlMap)"

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

@@ -1,6 +1,5 @@
 .tiptap.ProseMirror {
   height: 100%;
-  flex: 1 0 auto;
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
@@ -12,6 +11,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  flex: auto;
 
   &::-webkit-scrollbar {
     width: 6px;

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

@@ -33,6 +33,8 @@
   min-width: 0;
   overflow: auto;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .disabled-editor {

package/src/components/BarrageInput/TextEditor/TextEditor.vue

@@ -22,9 +22,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, watch, withDefaults, defineProps, nextTick, defineEmits } from 'vue';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageInputState } from '../../../states/MessageInputState';
+import { ERROR_MESSAGE } from '../constants';
 import { createEditor } from './EditorCore';
 import styles from './TextEditor.module.scss';
 import type { Editor } from './EditorCore';
@@ -48,7 +49,7 @@ const emit = defineEmits<{
 }>();
 const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
-const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
+const { inputRawValue, updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
@@ -72,16 +73,29 @@ const createEditorInstance = (p: ITextEditorProps) => {
       onUpdate: (content) => {
         updateRawValue(content);
       },
-      onEnter: () => {
-        sendMessage();
-        setContent('');
+      onEnter: async () => {
+        try {
+          const inputValue = inputRawValue.value;
+          setContent('');
+          await sendMessage(inputValue);
+        } catch (err: any) {
+          TUIToast.error({
+            message: t(ERROR_MESSAGE[err.code as keyof typeof ERROR_MESSAGE] || 'send message failed'),
+          });
+        }
       },
       onFocus: () => {
         isFocused.value = true;
+        if (navigator && "virtualKeyboard" in navigator) {
+          (navigator?.virtualKeyboard as any)?.show()
+        }
         emit('focus');
       },
       onBlur: () => {
         isFocused.value = false;
+        if (navigator && "virtualKeyboard" in navigator) {
+          (navigator?.virtualKeyboard as any)?.hide()
+        }
         emit('blur');
       },
     });

package/src/components/BarrageInput/constants.ts

@@ -0,0 +1,3 @@
+export const ERROR_MESSAGE = {
+  10017: 'you have been forbidden to speak',
+};

package/src/components/BarrageInput/i18n/en-US/index.ts

@@ -2,4 +2,6 @@ export const resource = {
   'Say something': 'Say something...',
   'You have been muted': 'You have been muted',
   Send: 'Send',
+  'you have been forbidden to speak': 'You have been forbidden to speak',
+  'send message failed': 'Send message failed',
 };

package/src/components/BarrageInput/i18n/zh-CN/index.ts

@@ -2,4 +2,6 @@ export const resource = {
   'Say something': '说点什么...',
   'You have been muted': '您已被禁言',
   Send: '发送',
+  'you have been forbidden to speak': '您已被禁言',
+  'send message failed': '发送失败',
 };

package/src/components/BarrageList/BarrageList.vue

@@ -244,7 +244,7 @@ onUnmounted(() => {
       </ObserverView>
 
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked">
+        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
           <component
             :style="props.itemStyle"
             :is="props.Message || DefaultMessage"
@@ -365,7 +365,7 @@ onUnmounted(() => {
   letter-spacing: 0.1em;
 
   .message-group-tip-name {
-    color: var(--text-color-link);
+    color: var(--uikit-color-theme-8);
   }
   .message-group-tip-action {
   }

package/src/components/BarrageList/BarrageListH5.vue

@@ -244,7 +244,7 @@ onUnmounted(() => {
       </ObserverView>
 
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked">
+        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
           <component
             class="message-item"
             :style="props.itemStyle"
@@ -365,7 +365,7 @@ onUnmounted(() => {
   letter-spacing: 0.1em;
 
   .message-group-tip-name {
-    color: var(--text-color-link);
+    color: var(--uikit-color-theme-8);
   }
   .message-group-tip-action {
   }

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

@@ -2,19 +2,19 @@
 import { defineProps } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IGroupTipMessageProps {
-  message: IMessageModel;
+interface GroupTipMessageProps {
+  message: MessageModel;
 }
 
-interface IGroupTipMessageContent {
+interface GroupTipMessageContent {
   text: string;
   businessID?: string;
   showName?: string;
 }
 
-interface ICustomMessageContent {
+interface CustomMessageContent {
   businessID?: string;
   showName?: string;
   custom?: string;
@@ -24,11 +24,11 @@ enum CustomMessageAsGroupTipEnum {
   GROUP_CREATE = 'group_create',
 }
 
-const props = defineProps<IGroupTipMessageProps>();
+const props = defineProps<GroupTipMessageProps>();
 
 const { t } = useUIKit();
 
-const messageContent = props.message.getMessageContent() as IGroupTipMessageContent & ICustomMessageContent;
+const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
 const renderText = () => {
   switch (messageContent.businessID) {
@@ -50,6 +50,6 @@ const renderText = () => {
 .group-tip-message {
   color: var(--text-color-secondary);
   text-align: center;
-  font-size: 14px;
+  font-size: 12px;
 }
 </style>

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

@@ -185,7 +185,6 @@ $message-bubble-border-radius: 8px;
 
   &__meta {
     flex: 0 0 auto;
-    align-self: flex-end;
   }
 
   &__failed {

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

@@ -8,7 +8,7 @@
       class="message-meta__time"
     >{{ getTimeStampAuto(props.timestamp) }}</span>
     <div
-      v-if="props.status && props.isShowSendStatus"
+      v-if="showStatus"
       class="message-meta__status"
     >
       <MessageStatusIcon :status="props.status" />
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import cs from 'classnames';
 import { getTimeStampAuto } from '../../../../../utils/time';
 import MessageStatusIcon from './MessageStatusIcon.vue';
@@ -40,10 +41,12 @@ const props = withDefaults(defineProps<IMessageMetaProps>(), {
   isShowSendStatus: false,
   isShowReadStatus: false,
   isShowTime: false,
-  status: undefined,
+  status: '',
   class: undefined,
   style: undefined,
 });
+
+const showStatus = computed(() => (props.status && props.isShowSendStatus) || props.status === 'fail');
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
+import { IconErrorToast, IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
 
 defineProps<{
   status: string;
@@ -10,12 +10,16 @@ defineProps<{
   <IconLoading
     v-if="status === 'unSend'"
     class="message-meta__status--unSend"
-    :size="16"
+    :size="14"
   />
   <IconSuccess
     v-else-if="status === 'success'"
     name="&#xe60a;"
-    :size="16"
+    :size="14"
+  />
+  <IconErrorToast
+    v-else-if="status === 'fail'"
+    :size="14"
   />
 </template>