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

package/src/components/ConversationList/ConversationList.vue

@@ -31,18 +31,18 @@
       :empty="renderConversationList.length === 0"
       :loading="!conversationList"
       :error="false"
-      :placeholder-empty-list="PlaceholderEmptyList"
-      :placeholder-loading="PlaceholderLoading"
-      :placeholder-load-error="PlaceholderLoadError"
+      :PlaceholderEmptyList="PlaceholderEmptyList"
+      :PlaceholderLoading="PlaceholderLoading"
+      :PlaceholderLoadError="PlaceholderLoadError"
     >
       <ConversationPreview
         v-for="conversation in renderConversationList"
         :key="conversation.conversationID"
         :conversation="conversation"
         :enable-actions="enableActions"
-        :avatar="Avatar"
-        :preview="Preview"
-        :conversation-actions="ConversationActions"
+        :Avatar="Avatar"
+        :Preview="Preview"
+        :ConversationActions="ConversationActions"
         :actions-config="actionsConfig"
         @select="handleSelectConversation"
       />
@@ -53,16 +53,12 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { useConversationListState } from '../../states/ConversationListState';
-import {
-  PlaceHolderTypes,
-} from '../../types';
 import { isH5 } from '../../utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { ConversationActions as DefaultConversationActions } from './ConversationActions';
 import { ConversationCreate as DefaultConversationCreate } from './ConversationCreate';
 import { ConversationListContent as DefaultConversationListContent } from './ConversationListContent';
 import { ConversationListHeader as DefaultConversationListHeader } from './ConversationListHeader';
-import PlaceHolder from './ConversationPlaceHolder';
 import { ConversationPreview, ConversationPreviewUI as DefaultConversationPreviewUI } from './ConversationPreview';
 import { ConversationSearch as DefaultConversationSearch } from './ConversationSearch';
 import { useConversation } from './hooks/useConversation';
@@ -88,30 +84,19 @@ const props = withDefaults(defineProps<Props>(), {
   ConversationCreate: () => DefaultConversationCreate,
   ConversationSearch: () => DefaultConversationSearch,
   ConversationActions: () => DefaultConversationActions,
-  PlaceholderEmptyList: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.NO_CONVERSATIONS },
-  }),
-  PlaceholderLoading: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.LOADING },
-  }),
-  PlaceholderLoadError: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.WRONG },
-  }),
+  PlaceholderEmptyList: undefined,
+  PlaceholderLoading: undefined,
+  PlaceholderLoadError: undefined,
   Avatar: () => DefaultAvatar,
 });
 
 const emit = defineEmits<{
   selectConversation: [conversation: ConversationModel];
-  beforeCreateConversation: [params: string | any];
+  beforeCreateConversation: [params: string | CreateGroupParams];
   conversationCreated: [conversation: ConversationModel];
 }>();
 
 const {
-  filter,
-  sort,
   enableActions,
   actionsConfig: propActionsConfig,
   enableCreate: propEnableCreate,
@@ -131,24 +116,19 @@ const renderConversationList = computed(() => {
 
   let _conversationList = conversationList.value;
 
-  if (filter && typeof filter === 'function') {
-    _conversationList = filter(_conversationList);
+  if (props.filter && typeof props.filter === 'function') {
+    _conversationList = props.filter(_conversationList);
   }
 
-  if (sort && typeof sort === 'function') {
-    _conversationList = sort(_conversationList);
+  if (props.sort && typeof props.sort === 'function') {
+    _conversationList = props.sort(_conversationList);
   }
 
   return _conversationList;
 });
 
 const isCreateModelShow = ref(false);
-const actionsConfig = ref<ConversationActionsConfig>({
-  enableDelete: true,
-  enableMute: true,
-  enableMarkUnread: true,
-  enablePin: true,
-});
+const actionsConfig = ref<ConversationActionsConfig>({});
 
 const enableCreate = computed(() => propEnableCreate);
 const enableSearch = computed(() => propEnableSearch);
@@ -159,12 +139,6 @@ watch(
   (): [ConversationActionsConfig | undefined, string[] | null] => [propActionsConfig, conversationActionList.value],
   ([newActionsConfig, newConversationActionList]) => {
     if (!newActionsConfig && !newConversationActionList) {
-      actionsConfig.value = {
-        enableDelete: true,
-        enableMute: true,
-        enableMarkUnread: true,
-        enablePin: true,
-      };
       return;
     }
 

package/src/components/ConversationList/ConversationListContent/ConversationListContent.scss

@@ -6,6 +6,7 @@
   flex-direction: column;
   background-color: var(--bg-color-operate, #f5f5f5);
   color: var(--text-color-primary, #333);
+  
   @include scrollbar.scrollbar-hidden();
 
   .placeholder-error,

package/src/components/ConversationList/ConversationListContent/ConversationListContent.vue

@@ -6,26 +6,24 @@
     <slot v-if="!error && !loading && !empty" />
 
     <component
-      :is="PlaceholderLoadError.component"
+      :is="PlaceholderLoadError"
       v-else-if="error"
-      v-bind="PlaceholderLoadError.props"
     />
 
     <component
-      :is="PlaceholderLoading.component"
+      :is="PlaceholderLoading"
       v-else-if="loading"
-      v-bind="PlaceholderLoading.props"
     />
 
     <component
-      :is="PlaceholderEmptyList.component"
+      :is="PlaceholderEmptyList"
       v-else-if="empty"
-      v-bind="PlaceholderEmptyList.props"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { h } from 'vue';
 import { PlaceHolderTypes } from '../../../types';
 import PlaceHolder from '../ConversationPlaceHolder';
 import type { ConversationListContentProps } from '../../../types';
@@ -34,18 +32,15 @@ const props = withDefaults(defineProps<ConversationListContentProps>(), {
   empty: false,
   loading: false,
   error: false,
-  PlaceholderEmptyList: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.NO_CONVERSATIONS },
-  }),
-  PlaceholderLoading: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.LOADING },
-  }),
-  PlaceholderLoadError: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.WRONG },
-  }),
+  PlaceholderEmptyList: () => (h(PlaceHolder, {
+    type: PlaceHolderTypes.NO_CONVERSATIONS
+  })),
+  PlaceholderLoading: () => (h(PlaceHolder, {
+    type: PlaceHolderTypes.LOADING
+  })),
+  PlaceholderLoadError: () => (h(PlaceHolder, {
+    type: PlaceHolderTypes.WRONG
+  }))
 });
 
 </script>

package/src/components/ConversationList/ConversationPreview/ConversationPreview.scss

@@ -1,3 +1,4 @@
+@use '../../../styles/mixins' as mixins;
 .conversationPreview {
   display: flex;
   align-items: center;
@@ -42,18 +43,17 @@
   }
 
   &__title {
+    flex: 1;
     font-weight: 500;
     font-size: 14px;
     color: var(--text-color-primary, #333);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
+
+    @include mixins.text-ellipsis();
   }
 
   &__time {
     font-size: 12px;
-    line-height: 24px;
+    line-height: 18px;
     color: var(--text-color-secondary, #666);
     flex-shrink: 0;
     margin-left: 8px;
@@ -66,12 +66,11 @@
   }
 
   &__abstract {
+    flex: 1;
     font-size: 12px;
     color: var(--text-color-secondary, #666);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
+
+    @include mixins.text-ellipsis();
   }
 
   &__external {
@@ -87,6 +86,9 @@
   &__unread {
     flex-shrink: 0;
     margin-left: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     .unread-count {
       display: inline-flex;

package/src/components/ConversationList/ConversationPreview/ConversationPreview.vue

@@ -3,17 +3,16 @@
     <component
       :is="Preview"
       :conversation="conversation"
-      :is-selected="isSelected"
-      :enable-actions="enableActions"
-      :highlight-match-string="highlightMatchString"
-      :avatar="Avatar"
-      :conversation-actions="ConversationActions"
-      :title="Title"
-      :last-message-timestamp="LastMessageTimestamp"
-      :last-message-abstract="LastMessageAbstract"
-      :unread="Unread"
-      :actions-config="actionsConfig"
-      :class-name="className"
+      :isSelected="isSelected"
+      :enableActions="enableActions"
+      :Avatar="Avatar"
+      :ConversationActions="ConversationActions"
+      :Title="Title"
+      :LastMessageTimestamp="LastMessageTimestamp"
+      :LastMessageAbstract="LastMessageAbstract"
+      :Unread="Unread"
+      :actionsConfig="actionsConfig"
+      :className="className"
       :style="style"
       @select="handleSelectConversation"
     >
@@ -49,20 +48,19 @@ const emit = defineEmits<{
   selectConversation: [conversation: ConversationModel];
 }>();
 
-const Title = computed(() => h(ConversationPreviewTitle, {
+const Title = computed(() => h(props.Title || ConversationPreviewTitle, {
   conversation: props.conversation,
-  highlightMatchString: props.highlightMatchString,
 }));
 
-const LastMessageTimestamp = computed(() => h(ConversationPreviewTimestamp, {
+const LastMessageTimestamp = computed(() => h(props.LastMessageTimestamp || ConversationPreviewTimestamp, {
   conversation: props.conversation,
 }));
 
-const LastMessageAbstract = computed(() => h(ConversationPreviewAbstract, {
+const LastMessageAbstract = computed(() => h(props.LastMessageAbstract || ConversationPreviewAbstract, {
   conversation: props.conversation,
 }));
 
-const Unread = computed(() => h(ConversationPreviewUnread, {
+const Unread = computed(() => h(props.Unread || ConversationPreviewUnread, {
   conversation: props.conversation,
 }));
 

package/src/components/ConversationList/ConversationPreview/ConversationPreviewTitle.vue

@@ -1,29 +1,17 @@
 <template>
   <div :class="[$style.conversationPreview__title, $style.textEllipsis]">
-    <span
-      v-for="(item, index) in titleItems"
-      :key="index"
-      :class="{
-        [$style['conversationPreview__title--highlight']]: item.isHighlight,
-        [$style['conversationPreview__title--normal']]: !item.isHighlight,
-      }"
-    >
-      {{ item.text }}
-    </span>
+    {{ title }}
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { generateHighlightTitle } from './utils';
 import type { ConversationModel } from '../../../types';
 
 const props = defineProps<{
   conversation: ConversationModel;
-  highlightMatchString?: string;
 }>();
 
-const titleItems = computed(() => generateHighlightTitle(props.conversation, props.highlightMatchString));
+const title =props?.conversation?.getShowName?.() || '';
 </script>
 
 <style lang="scss" module>

package/src/components/ConversationList/ConversationPreview/index.ts

@@ -4,4 +4,4 @@ export { default as ConversationPreviewTitle } from './ConversationPreviewTitle.
 export { default as ConversationPreviewTimestamp } from './ConversationPreviewTimestamp.vue';
 export { default as ConversationPreviewAbstract } from './ConversationPreviewAbstract.vue';
 export { default as ConversationPreviewUnread } from './ConversationPreviewUnread.vue';
-export { generateHighlightTitle, getLatestMessagePreview } from './utils';
+export { getLatestMessagePreview } from './utils';

package/src/components/ConversationList/ConversationSearch/ConversationSearch.vue

@@ -37,6 +37,7 @@
       </div>
 
       <TUIDialog
+        appendTo="body"
         :customClasses="[$style.conversationSearch__advanced]"
         :visible="isShowStandard"
         :show-close="false"

package/src/components/LiveAudienceList/LiveAudienceListH5.vue

@@ -77,7 +77,7 @@ $text-color2: var(--text-color-secondary);
 
 .viewers-panel {
   box-sizing: border-box;
-  height: 500px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   color: $text-color1;
@@ -147,7 +147,7 @@ $text-color2: var(--text-color-secondary);
     &:hover {
       background-color: var(--uikit-color-gray-3);
     }
-    
+
     .viewer-info {
       display: flex;
       align-items: center;