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

package/src/components/LiveList/pullToRefresh.vue

@@ -0,0 +1,364 @@
+<template>
+  <div
+    class="pull-to-refresh"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <!-- Refresh indicator -->
+    <div
+      class="refresh-indicator"
+      :class="[refreshState, { visible: isIndicatorVisible }]"
+      :style="{ transform: `translateY(${translateY}px)` }"
+    >
+              <!-- refresh-arrow -->
+        <IconArrowUpNew
+          v-if="refreshState !== RefreshState.Loading && refreshState !== RefreshState.Success && refreshState !== RefreshState.Error"
+          class="refresh-arrow"
+          :class="{ releasing: refreshState === RefreshState.Releasing }"
+          :size="16"
+        />
+      <!-- refresh-loading -->
+      <div v-if="refreshState === RefreshState.Loading" class="refresh-loading"></div>
+      <!-- refresh-success -->
+      <IconCheck v-if="refreshState === RefreshState.Success" class="refresh-success" :size="16" />
+      <!-- refresh-error -->
+      <IconErrorToast v-if="refreshState === RefreshState.Error" class="refresh-error" :size="16" />
+      <!-- refresh-text -->
+      <span class="refresh-text">{{ statusText }}</span>
+    </div>
+
+    <!-- Content slot -->
+    <div ref="contentRef" class="refresh-content" :style="{ transform: `translateY(${contentTranslateY}px)` }"
+      @scroll="handleScroll"
+      @wheel="handleWheel">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { IconCheck, IconArrowUpNew, IconErrorToast } from '@tencentcloud/uikit-base-component-vue3';
+
+interface Props {
+  threshold?: number;
+  resistance?: number;
+  disabled?: boolean;
+  resultDuration?: number;
+  text?: {
+    pull: string;
+    release: string;
+    loading: string;
+    success: string;
+    error: string;
+  };
+}
+
+/**
+ * Pull-to-refresh state enumeration
+ * Defines the various states that the component can be in during the entire pull-to-refresh flow
+ */
+enum RefreshState {
+  /**
+   * Pulling state
+   * - User is dragging down but hasn't reached the refresh threshold yet
+   * - Shows down arrow icon, indicating user can continue pulling down
+   * - Content area follows finger movement, providing visual feedback
+   */
+  Pulling = 'pulling',
+
+  /**
+   * Releasing state
+   * - User has pulled down to or beyond the threshold (props.threshold)
+   * - Shows up arrow icon, indicating user can release to trigger refresh
+   * - Releasing at this point will immediately enter refresh state
+   */
+  Releasing = 'releasing',
+
+  /**
+   * Loading state
+   * - Component enters refresh state after user releases
+   * - Shows loading animation (spinning circle)
+   * - Content area stays at threshold height, displaying refresh indicator
+   * - Parent component starts executing actual refresh logic
+   */
+  Loading = 'loading',
+
+  /**
+   * Success state
+   * - Parent component refresh operation completed successfully
+   * - Shows green checkmark icon and success text
+   * - Content area stays at threshold height, displaying success indicator
+   * - Automatically resets after displaying for props.resultDuration time
+   */
+  Success = 'success',
+
+  /**
+   * Error state
+   * - Parent component refresh operation failed (e.g., network error, API exception)
+   * - Shows red error icon and failure text
+   * - Content area stays at threshold height, displaying error indicator
+   * - Automatically resets after displaying for props.resultDuration time
+   */
+  Error = 'error',
+}
+
+const refreshState = ref(RefreshState.Pulling);
+const startY = ref(0);
+const currentY = ref(0);
+const isTouching = ref(false);
+const contentRef = ref<HTMLElement | null>(null);
+let timer: number | null = null;
+
+const props = withDefaults(defineProps<Props>(), {
+  threshold: 60,
+  resistance: 2.5,
+  disabled: false,
+  resultDuration: 500,
+  text: () => ({
+    pull: 'Pull to refresh',
+    release: 'Release to refresh',
+    loading: 'Loading...',
+    success: 'Refresh success',
+    error: 'Refresh failed',
+  }),
+});
+
+const emit = defineEmits<{
+  refresh: [completeRefresh: (success?: boolean) => void];
+  loadMore: [];
+}>();
+
+defineExpose({
+  completeRefresh,
+});
+
+const pullDistance = computed(() => {
+  if (refreshState.value === RefreshState.Loading) {
+    return props.threshold;
+  }
+  if (!isTouching.value) return 0;
+  return Math.max(0, (currentY.value - startY.value) / props.resistance);
+});
+
+const contentTranslateY = computed(() => {
+  if (refreshState.value === RefreshState.Loading || refreshState.value === RefreshState.Success || refreshState.value === RefreshState.Error) {
+    return props.threshold;
+  }
+  return Math.min(pullDistance.value, props.threshold);
+});
+
+const translateY = computed(() => {
+  if (refreshState.value === RefreshState.Loading || refreshState.value === RefreshState.Success || refreshState.value === RefreshState.Error) {
+    return 0;
+  }
+  return Math.min(pullDistance.value, props.threshold) - props.threshold;
+});
+
+const isIndicatorVisible = computed(() => {
+  if (refreshState.value === RefreshState.Loading || refreshState.value === RefreshState.Success || refreshState.value === RefreshState.Error) {
+    return true;
+  }
+  return pullDistance.value > 10;
+});
+
+const statusText = computed(() => {
+  switch (refreshState.value) {
+    case RefreshState.Releasing:
+      return props.text.release;
+    case RefreshState.Loading:
+      return props.text.loading;
+    case RefreshState.Success:
+      return props.text.success;
+    case RefreshState.Error:
+      return props.text.error;
+    default:
+      return props.text.pull;
+  }
+});
+
+function isScrollAtBottom(threshold = 50) {
+  if (!contentRef.value) {
+    return false;
+  }
+
+  return (
+    contentRef.value.scrollTop + contentRef.value.clientHeight >=
+    contentRef.value.scrollHeight - threshold
+  );
+}
+
+function handleWheel(event: WheelEvent) {
+  if (!contentRef.value) {
+    return;
+  }
+
+  if (event.deltaY > 0 && isScrollAtBottom()) {
+    emit('loadMore');
+  }
+}
+
+function handleScroll() {
+  if (!contentRef.value) {
+    return;
+  }
+
+  if (isScrollAtBottom()) {
+    emit('loadMore');
+  }
+}
+
+function checkIsAtTop() {
+  if (!contentRef.value) return true;
+  return contentRef.value.scrollTop === 0;
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (props.disabled || refreshState.value === RefreshState.Loading) return;
+  if (!checkIsAtTop()) return;
+
+  isTouching.value = true;
+  startY.value = event.touches[0].clientY;
+  currentY.value = startY.value;
+  refreshState.value = RefreshState.Pulling;
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!isTouching.value || props.disabled || refreshState.value === RefreshState.Loading) return;
+  currentY.value = event.touches[0].clientY;
+
+  if (pullDistance.value > 0 && checkIsAtTop()) {
+    event.preventDefault();
+  }
+
+  refreshState.value = pullDistance.value > props.threshold ? RefreshState.Releasing : RefreshState.Pulling;
+}
+
+function onTouchEnd() {
+  if (!isTouching.value || props.disabled) return;
+  isTouching.value = false;
+
+  if (refreshState.value === RefreshState.Loading) return;
+
+  if (refreshState.value === RefreshState.Releasing) {
+    startRefresh();
+  } else {
+    resetPullState();
+  }
+}
+
+function startRefresh() {
+  refreshState.value = RefreshState.Loading;
+  emit('refresh', completeRefresh);
+}
+
+function completeRefresh(success: boolean = true) {
+  refreshState.value = success ? RefreshState.Success : RefreshState.Error;
+  
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    resetPullState();
+  }, props.resultDuration) as unknown as number;
+}
+
+function resetPullState() {
+  startY.value = 0;
+  currentY.value = 0;
+  if (refreshState.value !== RefreshState.Loading) {
+    refreshState.value = RefreshState.Pulling;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pull-to-refresh {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  touch-action: pan-y;
+
+  .refresh-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: v-bind('props.threshold + "px"');
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #666;
+    font-size: 14px;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-color: transparent;
+    z-index: 10;
+
+    &.visible {
+      opacity: 1;
+    }
+
+    .refresh-arrow {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      rotate: 180deg;
+      transition: transform 0.3s;
+      fill: currentColor;
+
+      &.releasing {
+        transform: rotate(180deg);
+      }
+    }
+
+    .refresh-loading {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      border: 2px solid #e0e0e0;
+      border-top: 2px solid #007aff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    .refresh-success {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      color: #4caf50;
+    }
+
+    .refresh-error {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      color: #f44336;
+    }
+
+    .refresh-text {
+      font-weight: 500;
+    }
+  }
+
+  .refresh-content {
+    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/LiveScenePanel/CameraSettingDialog.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { ref, Ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useDeviceState } from '../../states/DeviceState';
 import { MediaSource } from '../../types';
 import {
@@ -59,10 +59,6 @@ const props = defineProps<{
 
 const emits = defineEmits(['addCameraMaterial', 'updateCameraMaterial', 'close']);
 
-onUnmounted(async () => {
-  await previewTRTCCloud.stopCameraDeviceTest();
-});
-
 const title = computed(() => {
   return props.mediaSource ? t('Update Camera') : t('Add Camera');
 });
@@ -103,6 +99,11 @@ onMounted(async () => {
   await previewTRTCCloud.startCameraDeviceTest('video-preview');
 });
 
+onBeforeUnmount(async () => {
+  await previewTRTCCloud.stopCameraDeviceTest();
+  previewTRTCCloud.destroy();
+});
+
 watch(
   () => props.mediaSource,
   async (mediaSource: any) => {

package/src/components/LiveScenePanel/index.vue

@@ -39,7 +39,7 @@ import TUIRoomEngine, {
 } from '@tencentcloud/tuiroom-engine-js';
 import LiveSceneSelect from './LiveSceneSelect.vue';
 import { TUIToast, TOAST_TYPE, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { onUnmounted, ref, computed } from 'vue';
+import { onBeforeUnmount, ref, computed } from 'vue';
 import CameraSettingDialog from './CameraSettingDialog.vue';
 import MaterialRenameDialog from './MaterialRenameDialog.vue';
 import MaterialItem from './MaterialItem.vue';
@@ -241,7 +241,7 @@ const updateCameraSetting = (material: MediaSource) => {
   showCameraSettingDialog.value = true;
 };
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   clearMediaSource();
 })
 </script>

package/src/components/MessageInput/AttachmentPicker/AttachmentPicker.module.scss

@@ -4,6 +4,7 @@
 
   &__icon {
     cursor: pointer;
+    display: flex;
   }
 
   &__popup {
@@ -20,12 +21,15 @@
   &--expanded {
     display: flex;
     flex-direction: row;
+    gap: 8px;
+
     .attachment-picker__item {
       padding: 4px;
     }
   }
 
   &__item {
+    outline: none !important;
     border: none;
     display: flex;
     flex-direction: row;

package/src/components/MessageInput/AttachmentPicker/AttachmentPicker.vue

@@ -1,29 +1,26 @@
 <template>
-  <div :class="[styles['attachment-picker'], className]">
+  <div :class="[styles['attachment-picker']]">
     <template v-if="isCollapsed">
       <PopoverRoot>
         <PopoverTrigger as="span">
           <IconPlus
             :class="styles['attachment-picker__icon']"
-            size="24"
+            size="20"
           />
         </PopoverTrigger>
         <PopoverPortal>
           <PopoverContent
-            side="top"
-            align="start"
-            :side-offset="5"
-            class="rounded-lg p-5 w-[260px] bg-white shadow-sm border will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+          side="top"
+          align="start"
+          :side-offset="5"
           >
-            <div class="flex flex-col gap-2.5">
-              <div :class="styles['attachment-picker__popup']">
-                <component
-                  :is="picker.Component"
-                  v-for="(picker, index) in pickerItems"
-                  :key="index"
-                  v-bind="picker.props"
-                />
-              </div>
+            <div :class="styles['attachment-picker__popup']">
+              <component
+                :is="picker.Component"
+                v-for="(picker, index) in pickerItems"
+                :key="index"
+                v-bind="picker.props"
+              />
             </div>
           </PopoverContent>
         </PopoverPortal>
@@ -52,7 +49,6 @@ import ImagePicker from './ImagePicker.vue';
 import VideoPicker from './VideoPicker.vue';
 
 interface Props {
-  className?: string;
   attachmentPickerMode?: 'collapsed' | 'expanded';
 }
 
@@ -62,7 +58,6 @@ const ICON_SIZE = {
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  className: '',
   attachmentPickerMode: 'collapsed',
 });
 

package/src/components/MessageInput/AttachmentPicker/FilePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconFile } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

package/src/components/MessageInput/AttachmentPicker/ImagePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconImage } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

package/src/components/MessageInput/AttachmentPicker/VideoPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconVideo } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

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

@@ -2,6 +2,7 @@
 
   &__icon {
     cursor: pointer;
+    display: flex;
   }
 
   &__list {

package/src/components/MessageInput/MessageInput.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="[styles['message-input'], className]"
-    :style="style"
+    :class="[styles['message-input']]"
   >
     <slot name="headerToolbar">
       <div :class="styles['message-input__toolbar']">
@@ -18,13 +17,21 @@
       <div :class="styles['message-input__leftInline']">
         <slot name="leftInline" />
       </div>
-      <TextEditor
-        :autoFocus="autoFocus"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :prefix="slots?.inputPrefix"
-        :suffix="slots?.inputSuffix"
-      />
+      <slot name="textEditor">
+        <DefaultTextEditor
+          :autoFocus="autoFocus"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :key="disabled ? 'disabled-editor' : 'enabled-editor'"
+        >
+          <template #inputPrefix>
+            <slot name="inputPrefix" />
+          </template>
+          <template #inputSuffix>
+            <slot name="inputSuffix" />
+          </template>
+        </DefaultTextEditor>
+      </slot>
       <div :class="styles['message-input__rightInline']">
         <slot name="rightInline" />
       </div>
@@ -34,7 +41,7 @@
         <SendButton
           v-if="!hideSendButton"
           :class="styles['message-input__send-button']"
-          :disabled="!inputRawValue"
+          :disabled="props.disabled"
           @click="sendInputMessage"
         />
       </div>
@@ -50,8 +57,8 @@ import { EmojiPicker } from './EmojiPicker';
 import styles from './MessageInput.module.scss';
 import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { SendButton } from './SendButton';
-import { TextEditor } from './TextEditor';
-import type { CustomAction, IMessageInputProps } from './types';
+import { TextEditor as DefaultTextEditor } from './TextEditor';
+import type { CustomAction, MessageInputProps } from './types';
 
 const DEFAULT_ACTIONS = [
   { key: 'EmojiPicker', component: EmojiPicker },
@@ -61,16 +68,15 @@ const DEFAULT_ACTIONS = [
   { key: 'VideoPicker', component: VideoPicker },
 ];
 
-const props = withDefaults(defineProps<IMessageInputProps>(), {
+const props = withDefaults(defineProps<MessageInputProps>(), {
   autoFocus: true,
   disabled: false,
   hideSendButton: false,
   placeholder: '',
-  className: '',
-  style: () => ({}),
   attachmentPickerMode: 'collapsed',
   actions: () => ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'],
 });
+
 const { inputRawValue, setContent, sendMessage } = useMessageInputState();
 
 const pickProps = <T extends object, K extends keyof T>(

package/src/components/MessageInput/TextEditor/Editor.scss

@@ -12,6 +12,7 @@
   overflow-y: auto;
   border: none !important;
   outline: none !important;
+  justify-content: flex-start;
 
   @include scrollbar.scrollbar-base();