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

package/dist/{utils-CnPWv_hZ.js → utils-KP1QpeUS.js}

@@ -1,4 +1,4 @@
-import { g as getActiveElement } from "./Teleport-BnT1MTUO.js";
+import { g as getActiveElement } from "./Teleport-CMvGsENT.js";
 const ITEM_SELECT = "menu.itemSelect";
 const SELECTION_KEYS = ["Enter", " "];
 const FIRST_KEYS = [
@@ -12,10 +12,6 @@ const LAST_KEYS = [
   "End"
 ];
 const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
-({
-  ltr: [...SELECTION_KEYS, "ArrowRight"],
-  rtl: [...SELECTION_KEYS, "ArrowLeft"]
-});
 function getOpenState(open) {
   return open ? "open" : "closed";
 }

package/package.json

@@ -1,21 +1,61 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "0.1.0",
+  "version": "3.3.0-beta.3",
   "type": "module",
   "main": "./dist/index.js",
-  "scripts": {},
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "*.sass"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./chat": {
+      "types": "./dist/chat/index.d.ts",
+      "import": "./dist/chat/index.js"
+    },
+    "./rtc": {
+      "types": "./dist/rtc/index.d.ts",
+      "import": "./dist/rtc/index.js"
+    }
+  },
+  "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-beta.3",
+    "@tencentcloud/uikit-base-component-vue3": "0.3.7",
     "vue": "^3.4.21"
   },
   "dependencies": {
     "@tencentcloud/universal-api": "^2.4.0",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
+    "@tiptap/pm": "^3.1.0",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/vue-3": "^2.11.5",
     "@vue/tsconfig": "^0.7.0",
@@ -38,4 +78,4 @@
     "vite-plugin-static-copy": "^2.2.0",
     "vue-tsc": "^2.0.6"
   }
-}
+}

package/src/baseComp/AudioIcon.vue

@@ -60,7 +60,7 @@ const audioLevelStyle = computed(() => {
   }
 
   .audio-icon {
-    position: absolute;
+    position: relative;
     top: 0;
     left: 0;
   }

package/src/baseComp/View/View.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     :class="computedClass"
-    :style="props.style"
+    :style="{
+      gap: gap ? `${gap}px` : undefined,
+    }"
   >
     <slot />
   </div>
@@ -9,36 +11,30 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { CSSProperties } from 'vue';
 import cs from 'classnames';
 
 defineOptions({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'View',
-  inheritAttrs: true,
 });
 
 interface ViewProps {
-  // 方向：row | column
+  gap?: number;
+  // dir: row | column
   dir?: 'row' | 'column';
-  // 主轴对齐：flex-start | flex-end | center | space-between | space-around | space-evenly
+  // 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';
-  // 交叉轴对齐：flex-start | flex-end | center | baseline | stretch
+  // cross aix：flex-start | flex-end | center | baseline | stretch
   align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-  // 原有属性
-  class?: string;
-  style?: CSSProperties;
 }
 
 const props = withDefaults(defineProps<ViewProps>(), {
+  gap: undefined,
   dir: 'column',
   justify: undefined,
   align: undefined,
-  class: undefined,
-  style: undefined,
 });
 
-// 计算最终的 class
 const computedClass = computed(() => cs(
   'view__v',
   {
@@ -46,11 +42,10 @@ const computedClass = computed(() => cs(
     [`view__v--justify-${props.justify}`]: props.justify,
     [`view__v--align-${props.align}`]: props.align,
   },
-  props.class,
 ));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .view__v {
   box-sizing: border-box;
   display: flex;
@@ -62,12 +57,12 @@ const computedClass = computed(() => cs(
   padding: 0;
   min-width: 0;
 
-  // 方向类
+  // direction class
   &--dir-row {
     flex-direction: row;
   }
 
-  // justify-content 类
+  // justify-content class
   &--justify-flex-start {
     justify-content: flex-start;
   }
@@ -92,7 +87,7 @@ const computedClass = computed(() => cs(
     justify-content: space-evenly;
   }
 
-  // align-items 类
+  // align-items class
   &--align-flex-start {
     align-items: flex-start;
   }

package/src/baseComp/index.ts

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

package/src/chat/index.ts

@@ -0,0 +1,109 @@
+// 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,
+} from '../components/ConversationList';
+import {
+  MessageInput as MessageInputComponent,
+  EmojiPicker as EmojiPickerComponent,
+} from '../components/MessageInput';
+import { MessageList as MessageListComponent } from '../components/MessageList';
+import {
+  Search as SearchComponent,
+  SearchAdvanced as SearchAdvancedComponent,
+  MessageAdvanced as MessageAdvancedComponent,
+  UserAdvanced as UserAdvancedComponent,
+  SearchResultItem as SearchResultItemComponent,
+  SearchBar as SearchBarComponent,
+  SearchResults as SearchResultsComponent,
+} from '../components/Search';
+import { useMessageActions as useMessageActionsHook } from '../hooks/useMessageActions';
+import { useConversationListState as conversationListState } from '../states/ConversationListState';
+import { useMessageActionState as messageActionState } from '../states/MessageActionState';
+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';
+
+ChatLoginServer.getInstance().init();
+
+// component
+const Search = SearchComponent;
+const SearchAdvanced = SearchAdvancedComponent;
+const MessageAdvanced = MessageAdvancedComponent;
+const UserAdvanced = UserAdvancedComponent;
+const SearchBar = SearchBarComponent;
+const SearchResults = SearchResultsComponent;
+const SearchResultItem = SearchResultItemComponent;
+const ConversationList = ConversationListComponent;
+const ConversationActions = ConversationActionsComponent;
+const ConversationListHeader = ConversationListHeaderComponent;
+const ConversationListContent = ConversationListContentComponent;
+const ConversationPreview = ConversationPreviewComponent;
+const ContactList = ContactListComponent;
+const ContactListItem = ContactListItemComponent;
+const ContactInfo = ContactInfoComponent;
+
+const MessageList = MessageListComponent;
+const MessageInput = MessageInputComponent;
+const EmojiPicker = EmojiPickerComponent;
+const ChatSetting = ChatSettingComponent;
+const View = ViewComponent;
+
+// Hooks
+const useMessageActions = useMessageActionsHook;
+
+// States
+const useConversationListState = conversationListState;
+const useMessageActionState = messageActionState;
+const useMessageInputState = messageInputState;
+const useMessageListState = messageListState;
+const useSearchState = searchState;
+const useUIOpenControlState = uiOpenControlState;
+
+export {
+  // component
+  Search,
+  SearchAdvanced,
+  UserAdvanced,
+  MessageAdvanced,
+  SearchResults,
+  SearchResultItem,
+  SearchBar,
+  ConversationList,
+  ConversationActions,
+  ConversationListHeader,
+  ConversationListContent,
+  ConversationPreview,
+  MessageList,
+  MessageInput,
+  EmojiPicker,
+  ChatSetting,
+  View,
+  ContactList,
+  ContactListItem,
+  ContactInfo,
+
+  // Hooks
+  useMessageActions,
+
+  // States
+  useMessageListState,
+  useMessageInputState,
+  useMessageActionState,
+  useConversationListState,
+  useSearchState,
+  useUIOpenControlState,
+};

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, useCssModule } 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;
@@ -95,6 +94,7 @@ const props = withDefaults(defineProps<AvatarProps>(), {
 });
 
 const slots = useSlots();
+const classes = useCssModule();
 
 // State management
 const imageError = ref(false);
@@ -175,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,
 ));
 
@@ -196,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,
@@ -208,11 +208,11 @@ 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',
-        src: DEFAULT_AVATAR_URL,
+        class: classes['avatar__image'],
+        src: DEFAULT_USER_AVATAR,
         alt: 'default avatar',
         onLoad: () => setIsLoading(false),
         onError: () => setIsLoading(false),
@@ -220,7 +220,7 @@ const baseAvatar = computed(() => h(
     })(),
 
     // Loading skeleton
-    isLoading.value && h('div', { class: 'avatar__skeleton' }),
+    isLoading.value && h('div', { class: classes['avatar__skeleton'] }),
   ],
 ));
 
@@ -259,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/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';