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

package/src/components/StreamMixer/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <live-stream-view :ignore-local-video="true">
+  <live-core-view :ignore-local-video="true">
     <template #localVideo="{ style }">
       <local-mixer :style="style" />
     </template>
-  </live-stream-view>
+  </live-core-view>
 </template>
 
 <script setup lang="ts">
+import { LiveCoreView } from '../LiveCoreView';
 import LocalMixer from './LocalMixer/index.vue';
-import { LiveStreamView } from '../LiveStreamView';
 </script>
 
 <style scoped lang="scss"></style>

package/src/components/UserPicker/UserPicker.vue

@@ -5,7 +5,7 @@
   >
     <SearchBar
       v-if="enableSearch"
-      :placeholder="searchPlaceholder || t('TUIConversation.Search')"
+      :placeholder="searchPlaceholder || t('UserPicker.search')"
       :on-search="searchManager.handleSearch"
     />
 
@@ -17,7 +17,7 @@
         v-if="searchManager.isSearchEmpty.value"
         :class="$style['empty-search']"
       >
-        {{ t('TUIChat.No Result') }}
+        {{ t('UserPicker.no_result') }}
       </div>
       <ListMode
         v-else-if="!isTreeMode"
@@ -138,7 +138,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
   const newData = JSON.parse(JSON.stringify(internalDataSource.value));
 
   // Recursive function: find and update node
-  const updateNode = (nodes: Array<IUserPickerNode<any>>): boolean => {
+  const updateNode = (nodes: any[]): boolean => {
     for (let i = 0; i < nodes.length; i += 1) {
       if (nodes[i].key === nodeKey) {
         // Found target node, apply updates
@@ -176,7 +176,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
 
   // Try to update, return original data if node is not found
   if (Array.isArray(newData)) {
-    updateNode(newData as Array<IUserPickerNode<any>>);
+    updateNode(newData as any[]);
   }
   internalDataSource.value = newData;
 
@@ -189,7 +189,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
 // Implement methods exposed by ref
 const refMethods: IUserPickerRef<any> = {
   getSelectedItems: () => selectionManager.getSelectedItems(),
-  updateListData: (newDataSource: Array<IUserPickerRow<any>>) => {
+  updateListData: (newDataSource: any[]) => {
     // Update list data
     if (!isTreeMode.value) {
       internalDataSource.value = newDataSource;

package/src/components/UserPicker/components/ListMode/ListMode.vue

@@ -3,7 +3,7 @@
     v-if="dataSource.length === 0"
     :class="$style.list__empty"
   >
-    {{ t('TUIChat.No Data Available') }}
+    {{ t('UserPicker.no_data_available') }}
   </div>
   <div
     v-else
@@ -64,7 +64,7 @@ import { Avatar } from '../../../Avatar';
 import type { IUserPickerRow } from '../../type';
 
 interface ListModeProps<T = unknown> {
-  dataSource: Array<IUserPickerRow<T>>;
+  dataSource: IUserPickerRow<T>[];
   selectedKeys: Set<string>;
   lockedKeys: Set<string>;
   onItemClick: (key: string) => void;

package/src/components/UserPicker/components/SelectedPanel/SelectedPanel.vue

@@ -4,7 +4,7 @@
     :class="$style.selected__panel"
   >
     <div :class="$style.selected__header">
-      <span :class="$style.selected__title">{{ t('TUIChat.Selected') }}</span>
+      <span :class="$style.selected__title">{{ t('UserPicker.selected') }}</span>
       <span :class="$style.selected__count">
         {{ leafItems.length }}
         <template v-if="maxCount < InfinityValue"> / {{ maxCount }} </template>

package/src/components/UserPicker/i18n/en-US.ts

@@ -0,0 +1,8 @@
+const UserPicker = {
+  search: 'Search',
+  no_result: 'No result',
+  no_data_available: 'No data available',
+  selected: 'Selected',
+};
+
+export default UserPicker;

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

@@ -0,0 +1,9 @@
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+export { resources };

package/src/components/UserPicker/i18n/zh-CN.ts

@@ -0,0 +1,8 @@
+const UserPicker = {
+  search: '搜索',
+  no_result: '没有结果',
+  no_data_available: '无数据',
+  selected: '已选择',
+};
+
+export default UserPicker;

package/src/components/UserPicker/index.ts

@@ -7,6 +7,11 @@ import type {
   IUserPickerDataSource,
   IUserPickerResult,
 } from './type';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
+
+addI18n('en-US', { translation: { UserPicker: resources['en-US'] } });
+addI18n('zh-CN', { translation: { UserPicker: resources['zh-CN'] } });
 
 export type {
   IUserPickerProps,
@@ -17,5 +22,3 @@ export type {
   IUserPickerResult,
 };
 export { UserPicker };
-
-export default UserPicker;

package/src/components/VideoSettingPanel/VideoPreview.vue

@@ -1,25 +1,31 @@
 <template>
   <div class="video-preview-container">
-    <div id="video-preview" class="video-preview"></div>
+    <div
+      id="video-preview"
+      class="video-preview"
+    />
     <div class="attention-info">
       <span
         v-if="!isCameraTesting && !isCameraTestLoading"
         class="off-camera-info"
-        >{{ t('Off Camera') }}
+      >{{ t('Off Camera') }}
       </span>
-      <IconLoading size="36" v-if="isCameraTestLoading" class="loading" />
+      <IconLoading
+        v-if="isCameraTestLoading"
+        size="36"
+        class="loading"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue';
-import { IconLoading } from '@tencentcloud/uikit-base-component-vue3';
-import { useI18n } from '../../locales';
 import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { IconLoading, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
 
-const { t } = useI18n();
+const { t } = useUIKit();
 const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
 
 onMounted(async () => {
@@ -83,4 +89,3 @@ onUnmounted(async () => {
   }
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -16,13 +16,13 @@
 </template>
 
 <script setup lang="ts">
-import { watch, computed, ComputedRef } from 'vue';
-import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
-import { useI18n } from '../../locales';
+import { watch, computed } from 'vue';
+import type { ComputedRef } from 'vue';
 import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
 
-const { t } = useI18n();
+const { t } = useUIKit();
 
 const videoQualityList: ComputedRef<
   { label: string; value: TUIVideoQuality }[]

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

@@ -1,7 +1,12 @@
 export const resource = {
-  Camera: 'Camera',
+  'Camera': 'Camera',
   'Select device': 'Select device',
-  Preview: 'Preview',
+  'Preview': 'Preview',
   'Video profile': 'Video profile',
-  Resolution: 'Resolution',
+  'Resolution': 'Resolution',
+  'Low Definition': 'Low Definition',
+  'Standard Definition': 'Standard Definition',
+  'High Definition': 'High Definition',
+  'Super Definition': 'Super Definition',
+  'Off Camera': 'Off Camera',
 };

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

@@ -1,7 +1,12 @@
 export const resource = {
-  Camera: '摄像头',
+  'Camera': '摄像头',
   'Select device': '选择设备',
-  Preview: '预览',
+  'Preview': '预览',
   'Video profile': '视频设置',
-  Resolution: '分辨率',
+  'Resolution': '分辨率',
+  'Low Definition': '流畅',
+  'Standard Definition': '标清',
+  'High Definition': '高清',
+  'Super Definition': '超清',
+  'Off Camera': '摄像头已关闭',
 };

package/src/components/VideoSettingPanel/index.ts

@@ -1,8 +1,10 @@
-import VideoSettingPanel from './index.vue';
+import VideoSettingPanelPC from './index.vue';
 import { addI18n } from '../../i18n';
 import { enResource, zhResource } from './i18n';
 
 addI18n('en-US', { translation: enResource });
 addI18n('zh-CN', { translation: zhResource });
 
+const VideoSettingPanel = VideoSettingPanelPC;
+
 export { VideoSettingPanel };

package/src/components/VideoSettingPanel/index.vue

@@ -2,30 +2,36 @@
   <div class="video-setting-panel">
     <template v-if="cameraSelectVisible">
       <div class="section">
-        <div class="section-title">{{ t('Camera') }}</div>
+        <div class="section-title">
+          {{ t('Camera') }}
+        </div>
         <div class="row">
           <span class="label">{{ t('Select device') }}</span>
           <camera-select />
         </div>
       </div>
 
-      <div class="divider"></div>
+      <div class="divider" />
     </template>
 
     <template v-if="videoPreviewVisible">
       <div class="section">
-        <div class="section-title">{{ t('Preview') }}</div>
+        <div class="section-title">
+          {{ t('Preview') }}
+        </div>
         <div class="preview-container">
           <video-preview class="video-preview" />
         </div>
       </div>
 
-      <div class="divider"></div>
+      <div class="divider" />
     </template>
 
     <template v-if="videoProfileVisible">
       <div class="section">
-        <div class="section-title">{{ t('Video profile') }}</div>
+        <div class="section-title">
+          {{ t('Video profile') }}
+        </div>
         <div class="row">
           <span class="label">{{ t('Resolution') }}</span>
           <video-profile />
@@ -36,15 +42,15 @@
 </template>
 
 <script setup lang="ts">
-import CameraSelect from './CameraSelect.vue';
-import VideoProfile from './VideoProfile.vue';
-import VideoPreview from './VideoPreview.vue';
 import { defineProps } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import CameraSelect from './CameraSelect.vue';
+import VideoPreview from './VideoPreview.vue';
+import VideoProfile from './VideoProfile.vue';
 
 const { t } = useUIKit();
 
-const props = defineProps({
+defineProps({
   cameraSelectVisible: {
     type: Boolean,
     default: true,

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useLongPress } from './useLongPress';
+export type { UseLongPressOptions } from './useLongPress';
+
+export { useMouseHover } from './useMouseHover';

package/src/hooks/useLongPress.ts

@@ -0,0 +1,113 @@
+import { ref, onUnmounted } from 'vue';
+
+interface UseLongPressOptions {
+  delay?: number;
+  preventDefault?: boolean;
+  cancelOutsideElement?: boolean;
+  cancelOnMove?: boolean | number;
+  onContextMenu?: (event: PointerEvent) => void;
+}
+
+const noop = () => {};
+
+/**
+ * Vue3 long press hook
+ * @param onLongPress - long press callback function
+ * @param options - configuration options for long press behavior
+ * @returns event handlers and state for long press
+ */
+export function useLongPress(
+  onLongPress: ((event: PointerEvent) => void) | null,
+  options?: UseLongPressOptions,
+) {
+  const effectiveCallback = onLongPress ?? noop;
+
+  const {
+    delay = 500,
+    preventDefault = true,
+    cancelOutsideElement = true,
+    cancelOnMove = true,
+    onContextMenu,
+  } = options || {};
+
+  let fixedThreshold = 5; // Default threshold for cancelOnMove
+  if (typeof cancelOnMove === 'number') {
+    fixedThreshold = cancelOnMove;
+  }
+
+  const isLongPressActive = ref(false);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let startCoords: { x: number; y: number } | null = null;
+
+  const clear = (event: PointerEvent) => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    startCoords = null;
+    isLongPressActive.value = false;
+  };
+
+  const start = (event: PointerEvent) => {
+    clear(event);
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    startCoords = { x: event.clientX, y: event.clientY };
+    timer = setTimeout(() => {
+      effectiveCallback(event);
+      isLongPressActive.value = true;
+      clear(event);
+    }, delay);
+  };
+
+  const move = (event: PointerEvent) => {
+    if (!startCoords || !cancelOnMove) {
+      return;
+    }
+    const diffX = Math.abs(event.clientX - startCoords.x);
+    const diffY = Math.abs(event.clientY - startCoords.y);
+    if (diffX > fixedThreshold || diffY > fixedThreshold) {
+      clear(event);
+    }
+  };
+
+  const end = (event: PointerEvent) => {
+    clear(event);
+  };
+
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  });
+
+  const getEventHandlers = () => {
+    if (onLongPress === null) {
+      return {};
+    }
+
+    const handlers: Record<string, (event: PointerEvent) => void> = {
+      onPointerdown: start,
+      onPointermove: move,
+      onPointerup: end,
+    };
+
+    if (onContextMenu) {
+      handlers.onContextmenu = onContextMenu;
+    }
+
+    if (cancelOutsideElement) {
+      handlers.onPointerleave = end;
+    }
+
+    return handlers;
+  };
+
+  return {
+    getEventHandlers,
+    isLongPressActive,
+  };
+}
+
+export type { UseLongPressOptions };

package/src/hooks/useMessageActions.ts

@@ -42,13 +42,13 @@ interface MessageAction {
 const DEFAULT_ACTIONS: Record<string, MessageAction> = {
   copy: {
     key: 'copy',
-    label: 'Copy',
+    label: 'copy',
     visible: (message: MessageModel) => message.type === ChatEngine.TYPES.MSG_TEXT,
     icon: IconCopy,
   },
   recall: {
     key: 'recall',
-    label: 'Recall',
+    label: 'recall',
     visible: (message: MessageModel) =>
       !isCallMessage(message) && message.flow === 'out'
       && message.status === 'success'
@@ -57,19 +57,19 @@ const DEFAULT_ACTIONS: Record<string, MessageAction> = {
   },
   quote: {
     key: 'quote',
-    label: 'Quote',
+    label: 'quote',
     visible: (message: MessageModel) => !isCallMessage(message),
     icon: IconMsgQuote,
   },
   forward: {
     key: 'forward',
-    label: 'Forward',
+    label: 'forward',
     visible: (message: MessageModel) => !isCallMessage(message),
     icon: IconMsgForward,
   },
   delete: {
     key: 'delete',
-    label: 'Delete',
+    label: 'delete',
     icon: IconMsgDel,
     visible: true,
     style: {

package/src/hooks/useMouseHover.ts

@@ -0,0 +1,42 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * Vue3 mouse hover hook
+ * @param elementRef - ref of the target element to monitor hover state
+ * @returns isHovered - reactive state indicating whether the mouse is hovering over the element
+ */
+export function useMouseHover<T extends HTMLElement = HTMLElement>(
+  elementRef: { value: T | undefined },
+) {
+  const isHovered = ref<boolean>(false);
+
+  const handleMouseEnter = () => {
+    isHovered.value = true;
+  };
+
+  const handleMouseLeave = () => {
+    isHovered.value = false;
+  };
+
+  onMounted(() => {
+    const element = elementRef.value;
+    if (element) {
+      element.addEventListener('mouseenter', handleMouseEnter);
+      element.addEventListener('mouseleave', handleMouseLeave);
+    }
+  });
+
+  onUnmounted(() => {
+    const element = elementRef.value;
+    if (element) {
+      element.removeEventListener('mouseenter', handleMouseEnter);
+      element.removeEventListener('mouseleave', handleMouseLeave);
+    }
+  });
+
+  return {
+    isHovered,
+  };
+}
+
+export default useMouseHover;

package/src/index.ts

@@ -1,74 +1,11 @@
-import { ConversationList } from './components/ConversationList';
-import { MessageList } from './components/MessageList';
-import { MessageInput, EmojiPicker } from './components/MessageInput';
-import { BarrageInput } from './components/BarrageInput';
-import { LiveStreamView } from './components/LiveStreamView';
-import { LiveMonitorView } from './components/LiveMonitorView';
-import { StreamMixer } from './components/StreamMixer';
-import { LiveScenePanel } from './components/LiveScenePanel';
-import { useMessageActions } from './hooks/useMessageActions';
-import { useMessageListState } from './states/MessageListState';
-import { useMessageActionState } from './states/MessageActionState';
-import { useMessageInputState } from './states/MessageInputState';
-import { useConversationListState } from './states/ConversationListState';
-import { useLiveState } from './states/LiveState';
-import { useRoomState } from './states/RoomState';
-import { useUserState } from './states/UserState';
-import { useDeviceState } from './states/DeviceState';
-import { useVideoMixerState } from './states/VideoMixerState';
 import { useLoginState } from './states/LoginState';
-import { useLiveSeatState } from './states/LiveSeatState';
-import { BarrageList } from './components/BarrageList';
-import { LiveAudienceList } from './components/LiveAudienceList';
-import { CoGuestPanel } from './components/CoGuestPanel';
-import { AudioSettingPanel } from './components/AudioSettingPanel';
-import { VideoSettingPanel } from './components/VideoSettingPanel';
-import { MicButton } from './components/MicButton';
-import { CameraButton } from './components/CameraButton';
-import { useCoGuestState } from './states/CoGuestState';
-import { useCoHostState } from './states/CoHostState';
-import { useLiveAudienceState } from './states/LiveAudienceState';
-import { useLiveMonitorState } from './states/LiveMonitorState';
-import { LiveList } from './components/LiveList';
-import { addI18n } from './i18n';
-import { Avatar } from './components/Avatar';
+
+export * from './chat';
+export * from './rtc';
+export * from './components/Avatar';
+export * from './i18n';
+export * from './types';
 
 export {
-  ConversationList,
-  MessageList,
-  BarrageList,
-  MessageInput,
-  BarrageInput,
-  EmojiPicker,
-  LiveStreamView,
-  LiveMonitorView,
-  StreamMixer,
-  LiveScenePanel,
-  LiveAudienceList,
-  CoGuestPanel,
-  AudioSettingPanel,
-  VideoSettingPanel,
-  MicButton,
-  CameraButton,
-  LiveList,
-  Avatar,
-  useMessageActions,
-  useMessageListState,
-  useMessageInputState,
-  useMessageActionState,
-  useConversationListState,
-  useLiveState,
-  useRoomState,
-  useUserState,
-  useDeviceState,
-  useVideoMixerState,
   useLoginState,
-  useLiveSeatState,
-  useCoGuestState,
-  useCoHostState,
-  useLiveAudienceState,
-  useLiveMonitorState,
-  addI18n,
 };
-
-export * from './types';