tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/src/components/UIKitModal/UIKitModal.ts

@@ -0,0 +1,71 @@
+import { createApp } from 'vue';
+import { useUIKitModalState } from '../../states/UIKitModalState';
+import UIKitModalComponent from './index.vue';
+import type { UIKitModalOptions } from './type';
+
+let instance: any = null;
+
+const { openModal: openModalState, closeModal } = useUIKitModalState();
+
+const isLocalEnvironment = (): boolean => {
+  const host = window.location.hostname;
+  const href = window.location.href;
+  if (host === 'localhost' || host === '127.0.0.1' || host.startsWith('192.168.')) {
+    return true;
+  }
+  if (href.startsWith('https://web.sdk.qcloud.com/trtc/livekit')) {
+    return true;
+  }
+  return false;
+};
+
+const cleanup = () => {
+  if (instance) {
+    instance.unmount();
+    instance = null;
+  }
+};
+
+const createUIKitModal = (options: UIKitModalOptions): Promise<{ action: string }> => new Promise((resolve) => {
+  cleanup();
+
+  openModalState({
+    id: options.id,
+    title: options.title,
+    content: options.content,
+    type: options.type,
+    onConfirm: options.onConfirm,
+    onCancel: options.onCancel,
+  });
+
+  if (!isLocalEnvironment()) {
+    resolve({ action: 'confirm' });
+    return;
+  }
+
+  const handleAction = (action: 'confirm' | 'cancel') => {
+    closeModal(action);
+    cleanup();
+    resolve({ action });
+  };
+
+  const props = {
+    ...options,
+    visible: true,
+    onConfirm: () => {
+      options.onConfirm?.();
+      handleAction('confirm');
+    },
+    onCancel: () => {
+      options.onCancel?.();
+      handleAction('cancel');
+    },
+  };
+
+  instance = createApp(UIKitModalComponent, props);
+  instance.mount(document.createElement('div'));
+});
+
+export const UIKitModal = {
+  openModal: (config: UIKitModalOptions) => createUIKitModal(config),
+};

package/src/components/UIKitModal/index.scss

@@ -0,0 +1,134 @@
+.uikit-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--uikit-color-black-3);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-mask {
+  background: transparent;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.uikit-modal-default {
+  width: 480px;
+  max-width: calc(100% - 40px);
+  border-radius: var(--tui-dialog-round-radius);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+}
+
+.uikit-modal-container {
+  box-sizing: border-box;
+  background: var(--bg-color-dialog);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 24px;
+}
+
+.uikit-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+
+  .uikit-modal-type-icon {
+    margin-right: 6px;
+  }
+}
+
+.uikit-modal-close-icon {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  cursor: pointer;
+  color: var(--text-color-primary);
+}
+
+.uikit-modal-title {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  color: var(--text-color-primary);
+  flex: 1;
+}
+
+.uikit-modal-body {
+  flex: 1;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--text-color-primary);
+  word-break: break-word;
+
+  :deep(.uikit-modal-link) {
+    color: var(--text-color-link);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border-bottom: 1px solid transparent;
+    margin: 0 0.2em;
+  }
+}
+
+.uikit-modal-footer {
+  padding-top: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.uikit-modal-header:not(:has(:not(:empty))),
+.uikit-modal-body:not(:has(:not(:empty))),
+.uikit-modal-footer:not(:has(:not(:empty))) {
+  padding: 0;
+}
+
+.uikit-modal-container-mobile {
+  padding: 0;
+  .uikit-modal-header {
+    padding: 0;
+    justify-content: center;
+  }
+  .uikit-modal-header .uikit-modal-title:not(:empty) {
+    padding: 20px 20px 0;
+  }
+  .uikit-modal-body{
+    justify-content: center;
+  }
+  .uikit-modal-body:not(:has(*)) {
+    padding: 20px;
+  }
+  .uikit-modal-footer {
+    padding: 0;
+    border-top: 0.5px solid var(--stroke-color-module);
+    gap: 12px;
+    .uikit-modal-footer-btn {
+      flex: 1;
+      border-radius: 0;
+      border: 0;
+      height: 56px;
+    }
+    .uikit-modal-footer-btn + .uikit-modal-footer-btn {
+      margin: 0;
+      border-left: 0.5px solid var(--stroke-color-module);
+    }
+  }
+}
+

package/src/components/UIKitModal/index.ts

@@ -0,0 +1 @@
+export { UIKitModal } from './UIKitModal';

package/src/components/UIKitModal/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <teleport to="body">
+    <transition name="fade">
+      <div
+        v-if="visible"
+        class="uikit-modal-mask"
+        @click.self="handleConfirm"
+      >
+        <div class="uikit-modal-default uikit-modal-container">
+          <div class="uikit-modal-header">
+            <IconSuccessToast
+              v-if="type === 'success'"
+              class="uikit-modal-type-icon"
+            />
+            <IconInfoToast
+              v-if="type === 'info'"
+              class="uikit-modal-type-icon"
+            />
+            <IconErrorToast
+              v-if="type === 'error'"
+              class="uikit-modal-type-icon"
+            />
+            <IconWarningToast
+              v-if="type === 'warning'"
+              class="uikit-modal-type-icon"
+            />
+            <span class="uikit-modal-title">{{ title }}</span>
+            <IconClose
+              v-if="IS_PC"
+              class="uikit-modal-close-icon"
+              @click="handleCancel"
+            />
+          </div>
+          <div
+            class="uikit-modal-body"
+            v-html="processedContent"
+          />
+          <div class="uikit-modal-footer">
+            <TUIButton
+              type="default"
+              style="min-width: 88px"
+              @click="handleCancel"
+            >
+              {{ t('Cancel') }}
+            </TUIButton>
+            <TUIButton
+              type="primary"
+              style="min-width: 88px"
+              @click="handleConfirm"
+            >
+              {{ t('Confirm') }}
+            </TUIButton>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  withDefaults,
+  defineProps,
+  defineEmits,
+  computed,
+} from 'vue';
+import {
+  TUIButton,
+  IconClose,
+  IconSuccessToast,
+  IconInfoToast,
+  IconErrorToast,
+  IconWarningToast,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { getPlatform } from '@tencentcloud/universal-api';
+import { useI18n } from '../../locales';
+import type { UIKitModalOptions } from './type';
+
+const IS_PC = getPlatform() === 'pc';
+const { t } = useI18n();
+
+interface Props extends UIKitModalOptions {
+  visible: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  title: '',
+  content: '',
+  visible: false,
+});
+
+const emit = defineEmits<{
+  (_e: 'confirm'): void;
+  (_e: 'cancel'): void;
+}>();
+
+const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i;
+const FULL_URL_REGEX = /(https?:\/\/[^\s]+)/g;
+
+const processedContent = computed(() => {
+  const { content } = props;
+
+  if (!content || typeof content !== 'string') {
+    return content;
+  }
+
+  if (URL_REGEX.test(content.trim())) {
+    const url = content.trim();
+    const href = url.startsWith('http') ? url : `https://${url}`;
+    return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${escapeHtml(url)}</a>`;
+  }
+
+  if (content.includes('<a ') || content.includes('<a>')) {
+    return processAnchorTags(content);
+  }
+
+  if (FULL_URL_REGEX.test(content)) {
+    return escapeHtml(content).replace(FULL_URL_REGEX, url => `<a href="${url}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${url}</a>`);
+  }
+
+  return escapeHtml(content);
+});
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function processAnchorTags(content: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, 'text/html');
+  const anchors = doc.querySelectorAll('a');
+  anchors.forEach((anchor) => {
+    const href = anchor.getAttribute('href');
+    if (href) {
+      anchor.setAttribute('target', '_blank');
+      anchor.setAttribute('rel', 'noopener noreferrer');
+      anchor.classList.add('uikit-modal-link');
+      const originalText = anchor.textContent || '';
+      anchor.innerHTML = `<span style="padding: 0 0.2em; display: inline-block; color: var(--text-color-link)">${originalText}</span>`;
+    }
+  });
+
+  return doc.body.innerHTML;
+}
+
+function handleConfirm() {
+  props.onConfirm?.();
+  emit('confirm');
+}
+
+function handleCancel() {
+  props.onCancel?.();
+  emit('cancel');
+}
+</script>
+
+<style lang="scss" src="./index.scss"></style>

package/src/components/UIKitModal/type.ts

@@ -0,0 +1,24 @@
+import type { VNode } from 'vue';
+
+export type ButtonType = 'primary' | 'default' | 'text';
+export type Action = 'cancel' | 'confirm' | 'close' | 'mask';
+
+export interface UIKitModalEvents {
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+export interface UIKitModalOptions extends UIKitModalEvents {
+  id: number;
+  title: string;
+  content: string | VNode;
+  type: 'info' | 'warning' | 'error' | 'success';
+}
+
+export interface IUIKitModalBtn {
+  type?: ButtonType;
+  text?: string;
+  customClasses?: string[];
+  action?: () => void;
+  disabled?: boolean;
+}

package/src/components/UserPicker/UserPicker.vue

@@ -102,7 +102,7 @@ const selectionManager = useSelection<any>({
 const searchManager = useSearchFilter<any>({
   dataSource: internalDataSource,
   isTreeMode: isTreeMode.value,
-  onSearch: props.onSearch || (() => {}),
+  onSearch: props.onSearch,
 });
 
 // Use custom hook to manage tree state (if in tree mode)

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

@@ -8,6 +8,7 @@
       <span :class="$style.selected__count">
         {{ leafItems.length }}
         <template v-if="maxCount < InfinityValue"> / {{ maxCount }} </template>
+        {{ t('UserPicker.people_unit') }}
       </span>
     </div>
     <div :class="$style.selected__list">

package/src/components/UserPicker/hooks/useSearchFilter.ts

@@ -5,7 +5,7 @@ import type { UserPickerDataSource, UserPickerNode, UserPickerRow } from '../typ
 interface UseSearchFilterOptions<T = unknown> {
   dataSource: Ref<UserPickerDataSource<T>>;
   isTreeMode?: boolean;
-  onSearch?: (value: string) => void;
+  onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>;
   debounceTime?: number;
 }
 
@@ -33,15 +33,18 @@ function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string
     return nodes;
   }
 
-  // Helper function: check if node matches
+  const lowerSearchValue = searchValue.toLowerCase();
+
+  // Helper function: check if node matches (support both key and label)
   const isNodeMatched = (node: UserPickerNode<T>): boolean =>
-    node.label.toLowerCase().includes(searchValue.toLowerCase());
+    node.key.toLowerCase().includes(lowerSearchValue)
+    || node.label.toLowerCase().includes(lowerSearchValue);
 
   // Helper function: recursively search nodes
   const searchNodes = (nodesList: Array<UserPickerNode<T>>): Array<UserPickerNode<T>> => {
     const matchedNodes: Array<UserPickerNode<T>> = [];
 
-    nodesList.forEach(node => {
+    nodesList.forEach((node) => {
       const isMatched = isNodeMatched(node);
       let matchedChildren: Array<UserPickerNode<T>> = [];
 
@@ -64,13 +67,18 @@ function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string
   return searchNodes(nodes);
 }
 
-// Search list structure
+// Search list structure (default implementation)
 function searchListItems<T>(items: Array<UserPickerRow<T>>, searchValue: string): Array<UserPickerRow<T>> {
   if (!searchValue.trim()) {
     return items;
   }
 
-  return items.filter(item => item.label.toLowerCase().includes(searchValue.toLowerCase()));
+  const lowerSearchValue = searchValue.toLowerCase();
+
+  return items.filter(item =>
+    item.key.toLowerCase().includes(lowerSearchValue)
+    || item.label.toLowerCase().includes(lowerSearchValue),
+  );
 }
 
 export function useSearchFilter<T = unknown>({
@@ -85,35 +93,36 @@ export function useSearchFilter<T = unknown>({
 
   // Filter data based on search value
   const filteredData = computed(() => {
-    if (!searchValue.value.trim()) {
+    const keyword = searchValue.value.trim();
+
+    // No search keyword, return original data
+    if (!keyword) {
       return dataSource.value;
     }
 
+    // Tree mode: always use default search (custom search not supported)
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, searchValue.value);
+      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, keyword);
+    }
+
+    // List mode: use custom search if provided, otherwise use default search
+    if (onSearch) {
+      return onSearch(dataSource.value as Array<UserPickerRow<T>>, keyword);
     }
-    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, searchValue.value);
+
+    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, keyword);
   });
 
   // Handle search input
   const handleSearch = (value: string) => {
     isSearching.value = true;
     searchValue.value = value;
-
-    // Trigger external search callback
-    if (onSearch) {
-      onSearch(value);
-    }
-
     isSearching.value = false;
   };
 
   // Clear search
   const clearSearch = () => {
     searchValue.value = '';
-    if (onSearch) {
-      onSearch('');
-    }
   };
 
   // Set search value

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

@@ -3,6 +3,7 @@ const UserPicker = {
   no_result: 'No result',
   no_data_available: 'No data available',
   selected: 'Selected',
+  people_unit: 'people',
 };
 
 export default UserPicker;

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

@@ -3,6 +3,7 @@ const UserPicker = {
   no_result: '没有结果',
   no_data_available: '无数据',
   selected: '已选择',
+  people_unit: '人',
 };
 
 export default UserPicker;

package/src/components/UserPicker/type.ts

@@ -47,7 +47,7 @@ export interface UserPickerProps<T = unknown> {
   // Search related
   enableSearch?: boolean; // Whether to enable search
   searchPlaceholder?: string; // Search placeholder text
-  onSearch?: (value: string) => void; // Search callback
+  onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>; // Custom search function for list mode only
 
   // Custom rendering
   renderItem?: (data: UserPickerRow<T> | UserPickerNode<T>) => any; // Vue render function or component

package/src/components/VideoSetting/CameraSelect.vue

@@ -22,7 +22,7 @@ import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import TuiSelect from '../../baseComp/Select';
 import TuiOption from '../../baseComp/Option';
 import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
 interface Props {
@@ -73,4 +73,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSetting/VideoMediaControl.vue

@@ -45,7 +45,7 @@ import {
   MediaSettingDisplayMode,
   VideoSettingProps,
 } from '../../types';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { DeviceStatus, DeviceError } from '../../types';
 import useUserState from '../../states/UserState/index';
 import { useRoomState } from '../../states/RoomState';

package/src/components/VideoSetting/VideoPreview.vue

@@ -17,7 +17,7 @@ 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 { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useI18n();
 const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
@@ -83,4 +83,3 @@ onUnmounted(async () => {
   }
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSetting/VideoProfile.vue

@@ -22,7 +22,7 @@ import TuiOption from '../../baseComp/Option';
 import { useI18n } from '../../locales';
 
 import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useI18n();
 

package/src/components/VideoSetting/VideoSettingTab.vue

@@ -20,23 +20,28 @@
 </template>
 
 <script setup lang="ts">
-import { watch, inject } from 'vue';
+import { watch, inject, ref } from 'vue';
 import CameraSelect from './CameraSelect.vue';
 import VideoProfile from './VideoProfile.vue';
 import VideoPreview from './VideoPreview.vue';
 import TuiSwitch from '../../baseComp/TuiSwitch.vue';
 import { useI18n } from '../../locales';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { VideoSettingProps } from '../../types';
+import { MirrorType } from '../../types';
+
 const { t } = useI18n();
-const { isLocalMirror, switchMirror } = useDeviceState();
+const { switchMirror } = useDeviceState();
+
+const isLocalMirror = ref(true);
+
 const videoSettingProps: VideoSettingProps | undefined =
   inject('videoSettingProps');
 
 watch(
   isLocalMirror,
   async (val: boolean) => {
-    switchMirror({ mirror: val });
+    switchMirror({ mirror: val ? MirrorType.Auto : MirrorType.Disable });
   },
   { immediate: true }
 );
@@ -91,4 +96,3 @@ watch(
   }
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSettingPanel/CameraSelect.vue

@@ -21,7 +21,7 @@
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
 interface Props {
@@ -72,4 +72,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -18,30 +18,30 @@
 <script setup lang="ts">
 import { watch, computed } from 'vue';
 import type { ComputedRef } from 'vue';
-import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
 import { TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
+import { VideoQuality } from '../../types';
 
 const { t } = useUIKit();
 
 const videoQualityList: ComputedRef<
-  { label: string; value: TUIVideoQuality }[]
+  { label: string; value: VideoQuality }[]
 > = computed(() => [
-  { label: t('Low Definition'), value: TUIVideoQuality.kVideoQuality_360p },
+  { label: t('Low Definition'), value: VideoQuality.Quality360P },
   {
     label: t('Standard Definition'),
-    value: TUIVideoQuality.kVideoQuality_540p,
+    value: VideoQuality.Quality540P,
   },
-  { label: t('High Definition'), value: TUIVideoQuality.kVideoQuality_720p },
+  { label: t('High Definition'), value: VideoQuality.Quality720P },
   {
     label: t('Super Definition'),
-    value: TUIVideoQuality.kVideoQuality_1080p,
+    value: VideoQuality.Quality1080P,
   },
 ]);
 
 const { localVideoQuality, updateVideoQuality } = useDeviceState();
 
-watch(localVideoQuality, (val: TUIVideoQuality) => {
+watch(localVideoQuality, (val: VideoQuality) => {
   updateVideoQuality({ quality: val });
 });
 </script>