@trtc/calls-uikit-vue2 4.4.4 → 4.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-vue2",
-  "version": "4.4.4",
+  "version": "4.4.5",
   "main": "./tuicall-uikit-vue2.umd.js",
   "module": "./tuicall-uikit-vue2.es.js",
   "types": "./types/index.d.ts",

package/src/Components/components/base/CustomSelect/CustomSelect.ts

@@ -5,7 +5,8 @@ export interface SelectOption {
 }
 
 export const CustomSelectProps = {
-  modelValue: {
+  // Vue2 compatible: use 'value' instead of 'modelValue'
+  value: {
     type: [String, Number],
     default: '',
   },
@@ -37,7 +38,8 @@ export const CustomSelectProps = {
 };
 
 export const CustomSelectEmits = {
-  'update:modelValue': (value: string | number) => true,
+  // Vue2 compatible: use 'input' instead of 'update:modelValue'
+  'input': (value: string | number) => true,
   'change': (value: string | number) => true,
   'clear': () => true,
 };

package/src/Components/components/base/CustomSelect/CustomSelect.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="custom-select-wrapper">
+  <div class="custom-select-wrapper" ref="wrapperRef">
     <div 
       class="custom-select" 
       :class="{ 'is-open': isOpen, 'is-disabled': disabled }"
-      @click="toggleDropdown"
+      @click.stop="toggleDropdown"
     >
       <span class="select-text">{{ displayText }}</span>
       <svg 
@@ -28,8 +28,8 @@
         v-for="option in options" 
         :key="option.value"
         class="custom-option" 
-        :class="{ 'is-selected': modelValue === option.value }"
-        @click="selectOption(option.value)"
+        :class="{ 'is-selected': value === option.value }"
+        @click.stop="selectOption(option.value)"
       >
         {{ option.label }}
       </div>
@@ -38,16 +38,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
 import { CustomSelectProps, CustomSelectEmits, type SelectOption } from './CustomSelect';
 
 const props = defineProps(CustomSelectProps);
 const emit = defineEmits(CustomSelectEmits);
 
 const isOpen = ref(false);
+const wrapperRef = ref<HTMLElement | null>(null);
 
 const displayText = computed(() => {
-  const selectedOption = props.options.find(option => option.value === props.modelValue);
+  const selectedOption = props.options.find(option => option.value === props.value);
   return selectedOption ? selectedOption.label : props.placeholder;
 });
 
@@ -57,16 +58,19 @@ const toggleDropdown = () => {
 };
 
 const selectOption = (value: string | number) => {
-  emit('update:modelValue', value);
+  // Vue2 compatible: emit 'input' event for v-model
+  emit('input', value);
   emit('change', value);
   isOpen.value = false;
 };
 
 // Close dropdown when clicking outside
-const handleClickOutside = (event: Event) => {
+const handleClickOutside = (event: MouseEvent) => {
+  if (!wrapperRef.value) return;
+  
   const target = event.target as HTMLElement;
-  const wrapper = target.closest('.custom-select-wrapper');
-  if (!wrapper) {
+  // Check if click is outside the wrapper element
+  if (!wrapperRef.value.contains(target)) {
     isOpen.value = false;
   }
 };

package/src/Components/components/common/AIAssistant/AISubtitle.vue

@@ -21,7 +21,8 @@
     <!-- Settings Modal Component (Same Level) -->
     <SubtitleSettingsPC 
       v-if="isPC"
-      v-model:visible="showSettingsModal"
+      :visible="showSettingsModal"
+      @update:visible="showSettingsModal = $event"
       @confirm="handleSettingsConfirm"
       class="ai-subtitle-pc__settings"
     />
@@ -29,7 +30,8 @@
     <!-- Settings Modal Component (H5) -->
     <SubtitleSettingsH5
       v-else 
-      v-model:visible="showSettingsModal"
+      :visible="showSettingsModal"
+      @update:visible="showSettingsModal = $event"
       @confirm="handleSettingsConfirm"
       class="ai-subtitle-h5__settings"
     />

package/src/Components/components/common/AIAssistant/components/SubtitleContent.vue

@@ -9,7 +9,7 @@
     <div 
       v-show="isH5 || showSettingsIcon"
       :class="['subtitle-content__settings-btn', { 'subtitle-content__settings-btn--h5': isH5 }]"
-      @click="$emit('openSettings')"
+      @click="handleSettingsClick"
     >
        <TKImage
         :src="settingsIcon" 
@@ -56,7 +56,12 @@ const settingsIcon = computed(() => {
 const iconSize = '16px';
 
 // Events
-defineEmits(['openSettings']);
+const emit = defineEmits(['open-settings']);
+
+// Handle settings button click
+const handleSettingsClick = () => {
+  emit('open-settings');
+};
 
 // Auto scroll to bottom when new messages arrive
 const scrollToBottom = () => {

package/src/Components/components/common/AIAssistant/components/SubtitleSettingsH5.vue

@@ -121,7 +121,9 @@ interface Emits {
   }): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  visible: false
+});
 const emit = defineEmits<Emits>();
 
 // Use i18n translation

package/src/Components/components/common/AIAssistant/components/SubtitleSettingsPC.vue

@@ -15,7 +15,8 @@
         <div class="setting-item">
           <label class="setting-label">{{ t('recognition-language') }}</label>
           <CustomSelect 
-            v-model="recognitionLanguage" 
+            :value="recognitionLanguage"
+            @input="handleLanguageChange"
             :options="languageOptions"
             @change="handleLanguageChange"
           />
@@ -25,7 +26,8 @@
         <div class="setting-item">
           <label class="setting-label">{{ t('translation-language') }}</label>
           <CustomSelect 
-            v-model="translationLanguage" 
+            :value="translationLanguage"
+            @input="handleTranslationChange"
             :options="translationOptions"
             @change="handleTranslationChange"
           />
@@ -35,7 +37,8 @@
         <div class="setting-item">
           <label class="setting-label">{{ t('subtitle-display-settings') }}</label>
           <CustomSelect 
-            v-model="subtitleDisplay" 
+            :value="subtitleDisplay"
+            @input="handleSubtitleDisplayChange"
             :options="subtitleDisplayOptions"
             @change="handleSubtitleDisplayChange"
           />
@@ -69,7 +72,9 @@ interface Emits {
   }): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  visible: false
+});
 const emit = defineEmits<Emits>();
 
 // Use i18n translation
@@ -208,7 +213,6 @@ watch(recognitionLanguage, (newRecognitionLang) => {
   background: white;
   border-radius: 12px;
   width: 480px;
-  height: 430px;
   overflow: hidden;
 }
 

package/src/Components/hooks/useAIAssistant.ts

@@ -2,7 +2,7 @@
  * AI Assistant Hook
  * @description Vue 3 composable for AI Transcriber functionality
  */
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted } from '../../adapter-vue';
 import { TUIStore, StoreName, NAME } from '../../TUICallService/index';
 import { TranscriberMessage } from '../../TUICallService/CallService/AIAssistant';
 

package/src/TUICallService/CallService/index.ts

@@ -27,7 +27,7 @@ const TUIGlobal: ITUIGlobal = TuiGlobal.getInstance();
 const TUIStore: ITUIStore = TuiStore.getInstance();
 const uiDesign = UIDesign.getInstance();
 uiDesign.setTUIStore(TUIStore);
-const version = '4.4.4';
+const version = '4.4.5';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'vue2.7';
 export { TUIGlobal, TUIStore, uiDesign };

package/src/index.ts

@@ -37,7 +37,7 @@ const TUICallType = {
   AUDIO_CALL: 1,
   VIDEO_CALL: 2,
 };
-const Version = '4.4.4'; // basic-demo 原来上报使用
+const Version = '4.4.5'; // basic-demo 原来上报使用
 
 // 输出产物
 export {