im-ui-mobile 0.0.46 → 0.0.48

package/components/im-chat-at-box/im-chat-at-box.vue

@@ -10,7 +10,7 @@
 			<scroll-view v-show="atUserIds.length > 0" scroll-x="true" scroll-left="120">
 				<view class="at-user-items">
 					<view v-for="m in checkedMembers" class="at-user-item" :key="m.userId">
-						<head-image :name="m.showNickName" :url="m.headImage" size="mini"></head-image>
+						<im-head-image :name="m.showNickName" :url="m.headImage" size="mini" />
 					</view>
 				</view>
 			</scroll-view>
@@ -18,23 +18,25 @@
 				<u-search v-model="searchText" :show-action="false" shape="round" placeholder="搜索"></u-search>
 			</view>
 			<view class="member-items">
-				<virtual-scroller :items="memberItems">
+				<im-virtual-scroller :items="memberItems">
 					<template v-slot="{ item }">
 						<view class="member-item" @click="onSwitchChecked(item)">
-							<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
-								size="small"></head-image>
+							<im-head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+								size="small" />
 							<view class="member-name">{{ item.showNickName }}</view>
 							<radio :checked="item.checked" :disabled="item.locked"
 								@click.stop="onSwitchChecked(item)" />
 						</view>
 					</template>
-				</virtual-scroller>
+				</im-virtual-scroller>
 			</view>
 		</view>
 	</u-popup>
 </template>
 
 <script setup lang="ts">
+import ImHeadImage from '../im-head-image/im-head-image.vue'
+import ImVirtualScroller from '../im-virtual-scroller/im-virtual-scroller.vue'
 import { GroupMember } from '../../libs';
 
 interface Props {

package/components/im-chat-group-readed/im-chat-group-readed.vue

@@ -6,26 +6,26 @@
 			</view>
 			<view class="content">
 				<view v-if="current === 0">
-					<virtual-scroller :items="readedMembers">
+					<im-virtual-scroller :items="readedMembers">
 						<template v-slot="{ item }">
 							<view class="member-item">
-								<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
-									:size="90"></head-image>
+								<im-head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+									:size="90" />
 								<view class="member-name">{{ item.showNickName }}</view>
 							</view>
 						</template>
-					</virtual-scroller>
+					</im-virtual-scroller>
 				</view>
 				<view v-if="current === 1">
-					<virtual-scroller :items="unreadMembers">
+					<im-virtual-scroller :items="unreadMembers">
 						<template v-slot="{ item }">
 							<view class="member-item">
-								<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
-									:size="90"></head-image>
+								<im-head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+									:size="90" />
 								<view class="member-name">{{ item.showNickName }}</view>
 							</view>
 						</template>
-					</virtual-scroller>
+					</im-virtual-scroller>
 				</view>
 			</view>
 		</view>
@@ -33,6 +33,8 @@
 </template>
 
 <script setup lang="ts">
+import ImHeadImage from '../im-head-image/im-head-image.vue'
+import ImVirtualScroller from '../im-virtual-scroller/im-virtual-scroller.vue'
 import { Chat, Message } from '../../libs';
 
 interface Props {

package/components/im-chat-item/im-chat-item.vue

@@ -3,7 +3,7 @@
 		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
 		<view class="mask" @tap="showChatBox()"></view>
 		<view class="left">
-			<head-image :url="chat.headImage" :name="chat.showName" :online="online"></head-image>
+			<im-head-image :url="chat.headImage" :name="chat.showName" :online="online" />
 		</view>
 		<view class="chat-right">
 			<view class="chat-name">
@@ -25,6 +25,7 @@
 </template>
 
 <script setup lang="ts">
+import ImHeadImage from '../im-head-image/im-head-image.vue'
 import datetime from '../../utils/datetime'
 import dom from '../../utils/dom'
 import messageType from '../../utils/messageType'
@@ -35,7 +36,7 @@ interface Props {
 	chat?: any;
 	index?: number;
 	active?: boolean;
-	online:boolean
+	online: boolean
 }
 
 const $datetime = datetime
@@ -112,7 +113,7 @@ const showChatBox = () => {
 	// 	url: "/pages-chat/pages/chat/chat-box?targetId=" + props.chat.targetId
 	// });
 
-	emit('click',props.chat.targetId)
+	emit('click', props.chat.targetId)
 };
 </script>
 

package/components/im-chat-message-item/im-chat-message-item.vue

@@ -7,8 +7,8 @@
 			{{ $datetime.toTimeText(msgInfo.sendTime) }}
 		</view>
 		<view class="message-normal" v-else-if="isNormal" :class="{ 'message-mine': msgInfo.selfSend }">
-			<head-image class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId"
-				:url="avatar" :name="showName" size="small"></head-image>
+			<im-head-image class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="avatar"
+				:name="showName" size="small" />
 			<view class="content">
 				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="top">
 					<text>{{ showName }}</text>
@@ -16,27 +16,27 @@
 				<view class="bottom">
 					<view class="message-content-wrapper">
 						<view v-if="msgInfo.type == MESSAGE_TYPE.TEXT">
-							<long-press-menu :items="menuItems" @select="onSelectMenu">
+							<im-long-press-menu :items="menuItems" @select="onSelectMenu">
 								<!-- up-parse支持点击a标签,但是不支持显示emo表情，也不支持换行 -->
 								<up-parse
 									v-if="$url.containUrl(msgInfo.content) && !$emotion.containEmoji(msgInfo.content)"
 									class="message-text" :showImgMenu="false" :content="nodesText"></up-parse>
 								<!-- rich-text支持显示emo表情以及消息换行，但是不支持点击a标签 -->
 								<rich-text v-else class="message-text" :nodes="nodesText"></rich-text>
-							</long-press-menu>
+							</im-long-press-menu>
 						</view>
 						<view class="message-image" v-else-if="msgInfo.type == MESSAGE_TYPE.IMAGE">
-							<long-press-menu :items="menuItems" @select="onSelectMenu">
+							<im-long-press-menu :items="menuItems" @select="onSelectMenu">
 								<view class="image-box">
 									<image class="send-image" :style="imageStyle" mode="aspectFill"
 										:src="contentData.thumbUrl" lazy-load="true" @click.stop="onShowFullImage()">
 									</image>
 									<im-loading v-if="sending"></im-loading>
 								</view>
-							</long-press-menu>
+							</im-long-press-menu>
 						</view>
 						<view class="message-file" v-else-if="msgInfo.type == MESSAGE_TYPE.FILE">
-							<long-press-menu :items="menuItems" @select="onSelectMenu">
+							<im-long-press-menu :items="menuItems" @select="onSelectMenu">
 								<view class="file-box">
 									<view class="file-info" style="overflow: hidden;">
 										<u-link class="file-name" :under-line="true" color="#007BFF"
@@ -46,9 +46,9 @@
 									<view class="file-icon iconfont icon-file"></view>
 									<im-loading v-if="sending"></im-loading>
 								</view>
-							</long-press-menu>
+							</im-long-press-menu>
 						</view>
-						<long-press-menu v-else-if="msgInfo.type == MESSAGE_TYPE.AUDIO" :items="menuItems"
+						<im-long-press-menu v-else-if="msgInfo.type == MESSAGE_TYPE.AUDIO" :items="menuItems"
 							@select="onSelectMenu">
 							<view class="message-audio message-text" @click="onPlayAudio()">
 								<text class="iconfont icon-voice-play"></text>
@@ -56,8 +56,8 @@
 								<text v-if="audioPlayState == 'PAUSE'" class="iconfont icon-play"></text>
 								<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
 							</view>
-						</long-press-menu>
-						<long-press-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
+						</im-long-press-menu>
+						<im-long-press-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
 							<view class="chat-realtime message-text" @click="$emit('call')">
 								<text v-if="msgInfo.type == MESSAGE_TYPE.ACT_RT_VOICE"
 									class="iconfont icon-chat-voice"></text>
@@ -65,7 +65,7 @@
 									class="iconfont icon-chat-video"></text>
 								<text>{{ msgInfo.content }}</text>
 							</view>
-						</long-press-menu>
+						</im-long-press-menu>
 						<view v-if="sending && isTextMessage" class="sending">
 							<im-loading :size="40" icon-color="#656adf" :mask="false"></im-loading>
 						</view>
@@ -83,12 +83,14 @@
 				</view>
 			</view>
 		</view>
-		<chat-group-readed ref="chatGroupReaded" :groupMembers="groupMembers" :msgInfo="msgInfo"></chat-group-readed>
+		<im-chat-group-readed ref="chatGroupReaded" :groupMembers="groupMembers" :msgInfo="msgInfo" />
 	</view>
 </template>
 
 <script setup lang="ts">
-import ChatGroupReaded from '../im-chat-group-readed/im-chat-group-readed.vue'
+import ImHeadImage from '../im-head-image/im-head-image.vue'
+import ImChatGroupReaded from '../im-chat-group-readed/im-chat-group-readed.vue'
+import ImLongPressMenu from '../im-long-press-menu/im-long-press-menu.vue'
 import { MESSAGE_TYPE, MESSAGE_STATUS, } from '../../utils/enums'
 import emoji from '../../utils/emoji';
 import url from '../../utils/url';

package/components/im-file-upload/im-file-upload.vue

@@ -1,5 +1,5 @@
 <template>
-	<view v-if="visible" class="u-upload-wrapper">
+	<view v-if="visible" class="file-upload">
 		<u-upload ref="uploadRef" :max-count="props.maxCount" :max-size="props.maxSize" :size-type="props.sizeType"
 			:source-type="props.sourceType" :deletable="props.deletable" :preview-full-image="props.previewFullImage"
 			:multiple="props.multiple" :disabled="props.disabled" :custom-btn="props.customBtn"

package/components/im-friend-item/im-friend-item.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="friend-item" @click="showFriendInfo()">
-		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage" size="small"></head-image>
+		<im-head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage" size="small"/>
 		<view class="friend-info">
 			<view class="friend-name">{{ friend.nickName }}</view>
 			<view class="friend-online">
@@ -13,6 +13,8 @@
 </template>
 
 <script setup lang="ts">
+import ImHeadImage from '../im-head-image/im-head-image.vue'
+
 interface Props {
 	friend?: any;
 	detail?: boolean;

package/components/im-group-item/im-group-item.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="group-item" @click="showGroupInfo()">
-		<head-image :name="group.showGroupName" :url="group.headImageThumb" size="small"></head-image>
+		<im-head-image :name="group.showGroupName" :url="group.headImageThumb" size="small"/>
 		<view class="group-name">
 			<view>{{ group.showGroupName }}</view>
 		</view>
@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+import ImHeadImage from '../im-head-image/im-head-image.vue'
+
 interface Props {
 	group?: any;
 }

package/components/im-group-member-selector/im-group-member-selector.vue

@@ -10,7 +10,7 @@
 			<scroll-view v-show="checkedIds.length > 0" scroll-x="true" scroll-left="120">
 				<view class="checked-users">
 					<view v-for="m in checkedMembers" class="user-item" :key="m.userId">
-						<head-image :name="m.showNickName" :url="m.headImage" :size="60"></head-image>
+						<im-head-image :name="m.showNickName" :url="m.headImage" :size="60"/>
 					</view>
 				</view>
 			</scroll-view>
@@ -18,11 +18,11 @@
 				<u-search v-model="searchText" :show-action="false" placeholder="搜索"></u-search>
 			</view>
 			<view class="member-items">
-				<virtual-scroller :items="showMembers">
+				<im-virtual-scroller :items="showMembers">
 					<template v-slot="{ item }">
 						<view class="member-item" @click="onSwitchChecked(item)">
-							<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
-								:size="90"></head-image>
+							<im-head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+								:size="90"/>
 							<view class="member-name">{{ item.showNickName }}
 							</view>
 							<view class="member-checked">
@@ -31,7 +31,7 @@
 							</view>
 						</view>
 					</template>
-				</virtual-scroller>
+				</im-virtual-scroller>
 			</view>
 		</view>
 	</u-popup>
@@ -39,6 +39,9 @@
 
 
 <script setup lang="ts">
+import ImHeadImage from '../im-head-image/im-head-image.vue'
+import ImVirtualScroller from '../im-virtual-scroller/im-virtual-scroller.vue'
+
 interface Props {
 	group?: any;
 	members?: any[];

package/components/im-group-rtc-join/im-group-rtc-join.vue

@@ -4,14 +4,14 @@
 			<div class="group-rtc-join">
 				<div class="host-info">
 					<div>发起人</div>
-					<head-image :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80"></head-image>
+					<im-head-image :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80" />
 				</div>
 				<div class="user-info">
 					<div>{{ rtcInfo.userInfos.length + '人正在通话中' }}</div>
 					<scroll-view scroll-x="true" scroll-left="120">
 						<view class="user-list">
 							<view v-for="user in rtcInfo.userInfos" class="user-item" :key="user.id">
-								<head-image :name="user.nickName" :url="user.headImage" :size="80"></head-image>
+								<im-head-image :name="user.nickName" :url="user.headImage" :size="80" />
 							</view>
 						</view>
 					</scroll-view>
@@ -22,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+import ImHeadImage from '../im-head-image/im-head-image.vue'
 import { ref } from 'vue';
 import { UserInfo } from '../../libs';
 

package/index.js

@@ -1,13 +1,5 @@
 import { Pinia } from './plugins/pinia.js'
 import { UViewPlusPlugin } from './plugins/uview-plus.js'
-// import ImSample from './components/im-sample/im-sample.vue'
-
-// // 重要：为组件添加名称，以支持开发环境
-// ImSample.name = 'ImSample'
-
-// const components = [
-//     ImSample
-// ]
 
 const importFn = import.meta.glob('./components/im-*/im-*.vue', { eager: true })
 const components = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.js",

package/types/components.d.ts

@@ -8,7 +8,7 @@ declare module 'vue' {
         ['im-chat-item']: typeof import('./components/chat-item')['ChatItem']
         ['im-chat-message-item']: typeof import('./components/chat-message-item')['ChatMessageItem']
         ['im-chat-record']: typeof import('./components/chat-record')['ChatRecord']
-        ['im-chat-upload']: typeof import('./components/chat-upload')['ChatUpload']
+        ['im-file-upload']: typeof import('./components/file-upload')['FileUpload']
         ['im-friend-item']: typeof import('./components/friend-item')['FriendItem']
         ['im-group-item']: typeof import('./components/group-item')['GroupItem']
         ['im-group-member-selector']: typeof import('./components/group-member-selector')['GroupMemberSelector']