tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/chat/server.ts

@@ -0,0 +1,113 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
+import { useLoginState } from '../states/LoginState';
+
+export default class ChatLoginServer {
+  static instance: ChatLoginServer;
+  private isReady = false;
+  private isEngineLoggingIn = false;
+  public isLogin: Ref<boolean> = ref(false);
+  private resolveList: any[] = [];
+  private rejectList: any[] = [];
+
+  constructor() {
+    this.init();
+  }
+
+  static getInstance() {
+    if (!ChatLoginServer.instance) {
+      ChatLoginServer.instance = new ChatLoginServer();
+    }
+    return ChatLoginServer.instance;
+  }
+
+  public init() {
+    if (!this.isReady) {
+      this.isReady = true;
+      TUICore.registerEvent(
+        TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED,
+        TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,
+        this,
+      );
+    }
+  }
+
+  /**
+   * @param { TUIInitParam } params
+   */
+  public onNotifyEvent(eventName: string, subKey: string) {
+    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
+          this.login();
+          break;
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGOUT_SUCCESS:
+          this.logout();
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  public async login() {
+    const {
+      chat,
+      SDKAppID,
+      userID,
+      userSig,
+    } = TUILogin.getContext();
+
+    if (this.isEngineLoggingIn) {
+      return new Promise((resolve, reject) => {
+        this.resolveList.push(resolve);
+        this.rejectList.push(reject);
+      });
+    }
+
+    try {
+      this.isEngineLoggingIn = true;
+      const res = await TUIChatEngine.login({
+        chat,
+        SDKAppID,
+        userID,
+        userSig,
+      });
+      this.isLogin.value = true;
+      this.resolveList.forEach((resolve) => {
+        resolve();
+      });
+      this.rejectList = [];
+      this.resolveList = [];
+      const { loginUserInfo } = useLoginState();
+      const result = await chat.getUserProfile({ userIDList: [userID] });
+      const localUserInfo = result.data[0];
+      if (!localUserInfo.value) {
+        loginUserInfo.value = {
+          userId: localUserInfo.userID,
+          userName: localUserInfo.nick,
+          avatarUrl: localUserInfo.avatar,
+          customInfo: localUserInfo.profileCustomField,
+        };
+      }
+      return res;
+    } catch (error) {
+      this.rejectList.forEach((reject) => {
+        reject(error);
+      });
+      this.rejectList = [];
+      this.resolveList = [];
+      throw error;
+    } finally {
+      this.isEngineLoggingIn = false;
+    }
+  }
+
+  public logout() {
+    TUIChatEngine.logout();
+    this.isLogin.value = false;
+    this.isEngineLoggingIn = false;
+  }
+}

package/src/components/AudioSettingPanel/index.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="audio-setting-panel">
     <div class="section">
-      <div class="section-title">{{ t('Microphone') }}</div>
+      <div class="section-title">
+        {{ t('Microphone') }}
+      </div>
       <div class="row">
         <span class="label">{{ t('Select device') }}</span>
-        <TUISelect v-model="currentMicrophoneId" class="select">
+        <TUISelect
+          v-model="currentMicrophoneId"
+          class="select"
+        >
           <TUIOption
             v-for="item in microphoneList"
             :key="item.deviceId"
@@ -15,25 +20,43 @@
       </div>
       <div class="row">
         <span class="label">{{ t('Input volume') }}</span>
-        <TUISlider v-model="captureVolumeValue" :min="0" :max="100" />
+        <TUISlider
+          v-model="captureVolumeValue"
+          :min="0"
+          :max="100"
+        />
         <span class="volume-value">{{ captureVolume }}</span>
       </div>
     </div>
 
-    <div class="divider"></div>
+    <div class="divider" />
 
     <div class="section">
-      <div class="section-title">{{ t('Speaker') }}</div>
+      <div class="section-title">
+        {{ t('Speaker') }}
+      </div>
       <div class="row">
         <span class="label">{{ t('Select device') }}</span>
-        <TUISelect v-model="currentSpeakerId" class="select">
-          <TUIOption v-for="item in speakerList" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
+        <TUISelect
+          v-model="currentSpeakerId"
+          class="select"
+        >
+          <TUIOption
+            v-for="item in speakerList"
+            :key="item.deviceId"
+            :label="item.deviceName"
+            :value="item.deviceId"
+          />
         </TUISelect>
       </div>
 
       <div class="row">
         <span class="label">{{ t('Output volume') }}</span>
-        <TUISlider v-model="outputVolumeValue" :min="0" :max="100" />
+        <TUISlider
+          v-model="outputVolumeValue"
+          :min="0"
+          :max="100"
+        />
         <span class="volume-value">{{ outputVolume }}</span>
       </div>
     </div>
@@ -42,8 +65,8 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
-import { useDeviceState } from '../../states/DeviceState';
 import { TUISelect, TUIOption, TUISlider, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useUIKit();
 
@@ -56,7 +79,6 @@ const {
   setCurrentSpeaker,
   getMicrophoneList,
   getSpeakerList,
-
   captureVolume,
   outputVolume,
   setCaptureVolume,
@@ -72,22 +94,37 @@ const outputVolumeValue = ref(outputVolume.value);
 onMounted(async () => {
   await getMicrophoneList();
   await getSpeakerList();
-  if (currentMicrophone.value) currentMicrophoneId.value = currentMicrophone.value.deviceId;
-  if (currentSpeaker.value) currentSpeakerId.value = currentSpeaker.value.deviceId;
+  if (currentMicrophone.value) {
+    currentMicrophoneId.value = currentMicrophone.value.deviceId;
+  }
+  if (currentSpeaker.value) {
+    currentSpeakerId.value = currentSpeaker.value.deviceId;
+  }
+});
+watch(currentMicrophone, (value) => {
+  if (value && value.deviceId !== currentMicrophoneId.value) {
+    currentMicrophoneId.value = value.deviceId;
+  }
+});
+
+watch(currentSpeaker, (value) => {
+  if (value && value.deviceId !== currentSpeakerId.value) {
+    currentSpeakerId.value = value.deviceId;
+  }
 });
 
-watch(captureVolumeValue, async value => {
+watch(captureVolumeValue, async (value) => {
   await setCaptureVolume(value);
 });
 
-watch(outputVolumeValue, async value => {
+watch(outputVolumeValue, async (value) => {
   await setOutputVolume(value);
 });
 
-watch(currentMicrophoneId, id => {
+watch(currentMicrophoneId, (id) => {
   setCurrentMicrophone({ deviceId: id });
 });
-watch(currentSpeakerId, id => {
+watch(currentSpeakerId, (id) => {
   setCurrentSpeaker({ deviceId: id });
 });
 </script>

package/src/components/Avatar/Avatar.vue

@@ -11,13 +11,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useSlots, h, CSSProperties } from 'vue';
+import { computed, ref, useSlots, h } from 'vue';
+import type { CSSProperties } from 'vue';
 import { Badge } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { AvatarBadge as AvatarOnlineBadge } from './AvatarBadge';
-
-// Default avatar image
-const DEFAULT_AVATAR_URL = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
+import { DEFAULT_USER_AVATAR } from './constants/avatar';
 
 // Avatar size type
 type AvatarSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number;
@@ -212,7 +211,7 @@ const baseAvatar = computed(() => h(
       }
       return h('img', {
         class: 'avatar__image',
-        src: DEFAULT_AVATAR_URL,
+        src: DEFAULT_USER_AVATAR,
         alt: 'default avatar',
         onLoad: () => setIsLoading(false),
         onError: () => setIsLoading(false),

package/src/components/Avatar/constants/avatar.ts

@@ -0,0 +1,15 @@
+const DEFAULT_USER_AVATAR = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_16.png';
+const DEFAULT_GROUP_AVATAR_WORK = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_work.png';
+const DEFAULT_GROUP_AVATAR_PUBLIC = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_public.png';
+const DEFAULT_GROUP_AVATAR_MEETING = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_meeting.png';
+const DEFAULT_GROUP_AVATAR_AVCHATROOM = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_AVChatRoom.png';
+const DEFAULT_GROUP_AVATAR_COMMON = 'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.png';
+
+export {
+  DEFAULT_USER_AVATAR,
+  DEFAULT_GROUP_AVATAR_WORK,
+  DEFAULT_GROUP_AVATAR_PUBLIC,
+  DEFAULT_GROUP_AVATAR_MEETING,
+  DEFAULT_GROUP_AVATAR_AVCHATROOM,
+  DEFAULT_GROUP_AVATAR_COMMON,
+};

package/src/components/Avatar/index.ts

@@ -1,4 +1,20 @@
 import Avatar from './Avatar.vue';
+import {
+  DEFAULT_USER_AVATAR,
+  DEFAULT_GROUP_AVATAR_WORK,
+  DEFAULT_GROUP_AVATAR_PUBLIC,
+  DEFAULT_GROUP_AVATAR_MEETING,
+  DEFAULT_GROUP_AVATAR_AVCHATROOM,
+  DEFAULT_GROUP_AVATAR_COMMON,
+} from './constants/avatar';
 
-export { Avatar };
+export {
+  Avatar,
+  DEFAULT_USER_AVATAR,
+  DEFAULT_GROUP_AVATAR_WORK,
+  DEFAULT_GROUP_AVATAR_PUBLIC,
+  DEFAULT_GROUP_AVATAR_MEETING,
+  DEFAULT_GROUP_AVATAR_AVCHATROOM,
+  DEFAULT_GROUP_AVATAR_COMMON,
+};
 export type { AvatarSize, AvatarShape, AvatarProps } from './Avatar.vue';

package/src/components/BarrageInput/BarrageInput.vue

@@ -9,12 +9,16 @@
         :placeholder="disabledAndPlaceholder.placeholder"
         :disabled="disabledAndPlaceholder.disabled"
         :autoFocus="autoFocus"
+        :maxLength="props.maxLength"
         @focus="emit('focus')"
         @blur="emit('blur')"
       >
         <template #prefix>
           <div class="input-actions">
-            <EmojiPicker :disabled="disabledAndPlaceholder.disabled" :trigger-style="{ display: 'flex' }" />
+            <EmojiPicker
+              :disabled="disabledAndPlaceholder.disabled"
+              :trigger-style="{ display: 'flex' }"
+            />
           </div>
         </template>
       </TextEditor>
@@ -24,11 +28,11 @@
 
 <script setup lang="ts">
 import { computed, defineProps, withDefaults, defineEmits } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useLiveAudienceState } from '../../states/LiveAudienceState';
+import { useLoginState } from '../../states/LoginState';
 import { EmojiPicker } from './EmojiPicker';
 import TextEditor from './TextEditor/TextEditor.vue';
-import { useLoginState } from '../../states/LoginState';
-import { useLiveAudienceState } from '../../states/LiveAudienceState';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 const emit = defineEmits<{
   (e: 'focus'): void;
@@ -41,12 +45,14 @@ const { audienceList } = useLiveAudienceState();
 interface Props {
   containerClass?: string;
   containerStyle?: Record<string, any>;
+  width?: string;
   height?: string;
   minHeight?: string;
   maxHeight?: string;
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,6 +63,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxHeight: '140px',
   disabled: false,
   autoFocus: true,
+  maxLength: 80,
 });
 
 const containerStyle = computed(() => {
@@ -69,6 +76,10 @@ const containerStyle = computed(() => {
     defaultStyle.height = props.height;
   }
 
+  if (props.width) {
+    defaultStyle.width = props.width;
+  }
+
   return { ...defaultStyle, ...props.containerStyle };
 });
 

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -4,11 +4,13 @@
       :autoFocus="props.autoFocus"
       :containerClass="props.containerClass"
       :containerStyle="props.containerStyle"
+      :width="props.width"
       :height="props.height"
       :minHeight="props.minHeight"
       :maxHeight="props.maxHeight"
       :placeholder="props.placeholder"
       :disabled="props.disabled"
+      :maxLength="props.maxLength"
       @focus="handleFocus"
       @blur="handleBlur"
     />
@@ -24,20 +26,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, withDefaults, defineProps } from 'vue';
+import { ref, withDefaults, defineProps, defineEmits } from 'vue';
 import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
 import { useMessageInputState } from '../../states/MessageInputState';
 import BarrageInput from './BarrageInput.vue';
 
+const emit = defineEmits<{
+  (e: 'focus'): void;
+  (e: 'blur'): void;
+}>();
+
 interface Props {
   containerClass?: string;
   containerStyle?: Record<string, any>;
   height?: string;
+  width?: string;
   minHeight?: string;
   maxHeight?: string;
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -48,6 +57,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxHeight: '140px',
   disabled: false,
   autoFocus: false,
+  maxLength: 80,
 });
 
 const { t } = useUIKit();
@@ -77,10 +87,12 @@ const handleTouchEnd = () => {
 
 const handleFocus = async () => {
   isFocus.value = true;
+  emit('focus');
 };
 
 const handleBlur = () => {
   isFocus.value = false;
+  emit('blur');
 };
 </script>
 

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

@@ -18,8 +18,8 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 20px;
-      height: 20px;
+      width: 26px;
+      height: 26px;
       cursor: pointer;
     }
   }

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

@@ -5,7 +5,7 @@
         <IconEmoji :class="styles['emoji-picker__icon']" size="24" />
       </PopoverTrigger>
       <PopoverPortal>
-        <PopoverContent side="top" align="start" :side-offset="5" style="box-sizing: border-box; z-index: 1000">
+        <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="styles['emoji-picker__list']">
               <div

package/src/components/BarrageInput/TextEditor/CharacterCountExtension.ts

@@ -0,0 +1,129 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Extension } from '@tiptap/vue-3';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+export interface CharacterCountOptions {
+  limit: number | null | undefined;
+  textCounter: (text: string) => number;
+  wordCounter: (text: string) => number;
+}
+
+export interface CharacterCountStorage {
+  characters: (options?: { node?: ProseMirrorNode; mode?: 'textSize' | 'nodeSize' }) => number;
+  words: (options?: { node?: ProseMirrorNode }) => number;
+}
+
+export const CharacterCount = Extension.create<CharacterCountOptions, CharacterCountStorage>({
+  name: 'characterCount',
+
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: text => text.length,
+      wordCounter: text => text.split(' ').filter(word => word !== '').length,
+    };
+  },
+
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0,
+    };
+  },
+
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = options?.node || this.editor.state.doc;
+      return node.nodeSize;
+    };
+
+    this.storage.words = (options) => {
+      const node = options?.node || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, ' ', ' ');
+      return this.options.wordCounter(text);
+
+      return node.nodeSize;
+    };
+  },
+
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+
+    return [
+      new Plugin({
+        key: new PluginKey('characterCount'),
+        appendTransaction: (transactions, oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+
+          const { limit } = this.options;
+
+          if (limit === null || limit === undefined || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+
+            console.warn(
+              `[CharacterCount] Initial content exceeded limit of ${limit} characters. Content was automatically trimmed.`,
+            );
+            const tr = newState.tr.deleteRange(from, to);
+
+            initialEvaluationDone = true;
+            return tr;
+          }
+
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const { limit } = this.options;
+
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === undefined) {
+            return true;
+          }
+
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+
+          if (newSize <= limit) {
+            return true;
+          }
+
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+
+          const isPaste = transaction.getMeta('paste');
+
+          if (!isPaste) {
+            return false;
+          }
+          const { pos } = transaction.selection.$head;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+          transaction.deleteRange(from, to);
+
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+
+          if (updatedSize > limit) {
+            return false;
+          }
+
+          return true;
+        },
+      }),
+    ];
+  },
+});

package/src/components/BarrageInput/TextEditor/EditorCore.ts

@@ -4,7 +4,8 @@ import StarterKit from '@tiptap/starter-kit';
 import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
 import { isMobile } from '../../../utils/environment';
-import type { IInputContent } from '../../../states/MessageInputState';
+import { CharacterCount } from './CharacterCountExtension';
+import type { InputContent } from '../../../states/MessageInputState';
 import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
 
@@ -71,7 +72,7 @@ function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined
   });
 }
 
-function convertEditorContent(node: JSONContent): IInputContent[] {
+function convertEditorContent(node: JSONContent): InputContent[] {
   if (!node?.content) {
     return [];
   }
@@ -123,10 +124,11 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
-  onUpdate?: (content: IInputContent[]) => void;
+  onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  maxLength?: number;
 }
 
 function createEditor({
@@ -134,6 +136,7 @@ function createEditor({
   placeholder = '',
   autoFocus = false,
   disabled = false,
+  maxLength,
   onUpdate,
   onEnter,
   onFocus,
@@ -141,6 +144,9 @@ function createEditor({
 }: EditorOptions) {
   const createBaseExtensions = (enterHandler?: () => void) => [
     StarterKit,
+    CharacterCount.configure({
+      limit: maxLength,
+    }),
     createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : undefined),
     createEmojiExtension(),
     createImageExtension(),