im-ui-mobile 0.1.7 → 0.1.8

package/README.md

@@ -1,16 +1,39 @@
-# im-ui-mobile
+# im-ui-mobile 移动端组件库
 
-一个基于 Vue 3 + TypeScript 的即时通信 Uniapp 组件库
+<p align="center">
+  <img src="https://img.shields.io/badge/version-1.0.0-blue.svg" alt="version">
+  <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="license">
+  <img src="https://img.shields.io/badge/uni--app-3.0+-orange.svg" alt="uniapp">
+  <img src="https://img.shields.io/badge/vue-3.0+-brightgreen.svg" alt="vue">
+</p>
 
-## 安装
+<p align="center">
+  <strong>一个基于 Vue 3 + TypeScript 的即时通信 Uniapp 组件库</strong>
+</p>
+
+## ✨ 特性
+
+- 🚀 **基于 Vue 3 Composition API** - 现代化的组件开发方式
+- 📱 **uniapp 多端支持** - 一套代码，多端运行
+- 🎨 **TypeScript 支持** - 完整的类型定义，开发更友好
+- 🎯 **主题定制** - 支持自定义主题和样式
+- 📦 **按需引入** - 支持组件按需加载，减小包体积
+- 📖 **完整文档** - 详细的文档和示例
+- 🎮 **流畅动画** - 精心设计的交互动画
+
+## 📦 安装
+
+### NPM 安装
 
 ```bash
-npm install im-ui-mobile
+npm install im-ui-mobile --save
+# 或
+yarn add im-ui-mobile
 ```
 
 ## 演示
 
-微信扫码，查看演示。
+微信扫码，查看演示
 
 ![微信小程序码](https://fdm-shop-25.oss-cn-shenzhen.aliyuncs.com/fdm26010502453644377ae6e77.jpg)
 

package/components/im-button/im-button.vue

@@ -20,12 +20,6 @@
 		@chooseavatar="onChooseAvatar">
 		<!-- 加载状态 -->
 		<view v-if="loading && showLoading" class="im-button__loading">
-			<!-- <view class="im-button__loading-spinner" :style="loadingStyle">
-				<view v-for="n in loadingDotCount" :key="n" class="im-button__loading-dot" :style="{
-					animationDelay: `${(n - 1) * 0.15}s`,
-					backgroundColor: loadingColor
-				}" />
-			</view> -->
 			<text v-if="loadingText" class="im-button__loading-text">
 				{{ loadingText }}
 			</text>
@@ -63,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 import { validator } from '../../index'
 
 // 定义类型
@@ -377,7 +371,7 @@ uni-button:after {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border: 1rpx solid currentColor;//
+			border: 1rpx solid currentColor; //
 			border-radius: inherit;
 			pointer-events: none;
 			transform: scale(0.5);

package/components/im-cell/im-cell.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, withDefaults, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 
 // 定义类型
 type CellType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'

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

@@ -13,8 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import ImAvatar from '../im-avatar/im-avatar.vue'
-
 interface Props {
 	friend?: any;
 	detail?: boolean;

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

@@ -40,8 +40,6 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import ImVirtualList from '../im-virtual-list/im-virtual-list.vue'
 
 interface Props {
 	group?: any;

package/components/im-mention-picker/im-mention-picker.vue

@@ -36,8 +36,6 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import ImVirtualList from '../im-virtual-list/im-virtual-list.vue'
 import { GroupMember } from '../../libs';
 
 interface Props {

package/components/im-search/im-search.vue

@@ -1,9 +1,9 @@
 <template>
   <view class="im-search" :class="[
-     isFocused?'im-search--focus': '',
-     disabled?'im-search--disabled': '', 
-     `im-search--${size}` 
-     ]">
+    isFocused ? 'im-search--focus' : '',
+    disabled ? 'im-search--disabled' : '',
+    `im-search--${size}`
+  ]">
     <!-- 搜索图标 -->
     <view class="im-search__icon" @tap="handleIconClick">
       <slot name="icon">
@@ -11,52 +11,29 @@
         <im-icon size="38" name="search" />
       </slot>
     </view>
-    
+
     <!-- 搜索输入框 -->
-    <input
-      ref="inputRef"
-      class="im-search__input"
-      :type="inputType"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :placeholder-style="placeholderStyle"
-      :maxlength="maxlength"
-      :disabled="disabled"
-      :focus="autoFocus"
-      :confirm-type="confirmType"
-      :adjust-position="adjustPosition"
-      :cursor-spacing="cursorSpacing"
-      :show-confirm-bar="showConfirmBar"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @confirm="handleConfirm"
-      @keyboardheightchange="handleKeyboardHeightChange"
-    />
-    
+    <input ref="inputRef" class="im-search__input" :type="inputType" :value="modelValue" :placeholder="placeholder"
+      :placeholder-style="placeholderStyle" :maxlength="maxlength" :disabled="disabled" :focus="autoFocus"
+      :confirm-type="confirmType" :adjust-position="adjustPosition" :cursor-spacing="cursorSpacing"
+      :show-confirm-bar="showConfirmBar" @input="handleInput" @focus="handleFocus" @blur="handleBlur"
+      @confirm="handleConfirm" @keyboardheightchange="handleKeyboardHeightChange" />
+
     <!-- 清除按钮 -->
-    <view 
-      v-if="showClear && modelValue && !disabled"
-      class="im-search__clear"
-      @tap="handleClear"
-    >
+    <view v-if="showClear && modelValue && !disabled" class="im-search__clear" @tap="handleClear">
       <slot name="clear-icon">
         <text class="im-search__clear-text">✕</text>
       </slot>
     </view>
-    
+
     <!-- 取消按钮 -->
-    <view 
-      v-if="showCancel"
-      class="im-search__cancel"
-      :class="{ 'im-search__cancel--show': modelValue || isFocused || alwaysShowCancel }"
-      @tap="handleCancel"
-    >
+    <view v-if="showCancel" class="im-search__cancel"
+      :class="{ 'im-search__cancel--show': modelValue || isFocused || alwaysShowCancel }" @tap="handleCancel">
       <slot name="cancel-text">
         <text class="im-search__cancel-text">{{ cancelText }}</text>
       </slot>
     </view>
-    
+
     <!-- 搜索历史 -->
     <view v-if="showHistory && historyVisible && searchHistory.length > 0" class="im-search__history">
       <view class="im-search__history-header">
@@ -66,48 +43,37 @@
         </view>
       </view>
       <view class="im-search__history-list">
-        <view 
-          v-for="(item, index) in searchHistory"
-          :key="index"
-          class="im-search__history-item"
-          @tap="handleHistoryClick(item)"
-        >
+        <view v-for="(item, index) in searchHistory" :key="index" class="im-search__history-item"
+          @tap="handleHistoryClick(item)">
           <text class="im-search__history-item-text">{{ item }}</text>
-          <text 
-            class="im-search__history-item-delete"
-            @tap.stop="deleteHistoryItem(index)"
-          >✕</text>
+          <text class="im-search__history-item-delete" @tap.stop="deleteHistoryItem(index)">✕</text>
         </view>
       </view>
     </view>
-    
+
     <!-- 搜索建议 -->
     <view v-if="showSuggestions && suggestionsVisible && suggestions.length > 0" class="im-search__suggestions">
-      <view 
-        v-for="(item, index) in suggestions"
-        :key="index"
-        class="im-search__suggestion-item"
-        @tap="handleSuggestionClick(item)"
-      >
+      <view v-for="(item, index) in suggestions" :key="index" class="im-search__suggestion-item"
+        @tap="handleSuggestionClick(item)">
         <slot name="suggestion" :item="item" :index="index">
           <text class="im-search__suggestion-text">{{ formatSuggestion(item) }}</text>
         </slot>
       </view>
     </view>
-    
+
     <!-- 搜索结果 -->
     <slot name="results" :results="searchResults"></slot>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, nextTick } from 'vue'
 
 // 定义 Props
 interface Props {
   // 值
   modelValue?: string
-  
+
   // 样式配置
   shape?: 'square' | 'round'
   size?: 'small' | 'medium' | 'large'
@@ -115,7 +81,7 @@ interface Props {
   borderColor?: string
   textColor?: string
   placeholderColor?: string
-  
+
   // 输入框配置
   placeholder?: string
   placeholderStyle?: string
@@ -127,7 +93,7 @@ interface Props {
   adjustPosition?: boolean
   cursorSpacing?: number
   showConfirmBar?: boolean
-  
+
   // 功能配置
   showClear?: boolean
   showCancel?: boolean
@@ -135,14 +101,14 @@ interface Props {
   cancelText?: string
   showHistory?: boolean
   showSuggestions?: boolean
-  
+
   // 搜索相关
   searchDelay?: number
   minLength?: number
   maxHistory?: number
   suggestions?: any[]
   suggestionFormatter?: (item: any) => string
-  
+
   // 自定义事件
   onSearch?: (value: string) => void
   onClear?: () => void
@@ -167,14 +133,14 @@ interface Emits {
 // 定义 Props 默认值
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
-  
+
   shape: 'round',
   size: 'medium',
   bgColor: '#f5f5f5',
   borderColor: '#e0e0e0',
   textColor: '#333333',
   placeholderColor: '#999999',
-  
+
   placeholder: '请输入搜索内容',
   placeholderStyle: '',
   inputType: 'text',
@@ -185,19 +151,19 @@ const props = withDefaults(defineProps<Props>(), {
   adjustPosition: true,
   cursorSpacing: 0,
   showConfirmBar: true,
-  
+
   showClear: true,
   showCancel: true,
   alwaysShowCancel: false,
   cancelText: '取消',
   showHistory: true,
   showSuggestions: false,
-  
+
   searchDelay: 300,
   minLength: 1,
   maxHistory: 10,
   suggestions: () => [],
-  suggestionFormatter: (item:any) => typeof item === 'string' ? item : item.text || item.name || JSON.stringify(item)
+  suggestionFormatter: (item: any) => typeof item === 'string' ? item : item.text || item.name || JSON.stringify(item)
 })
 
 const emit = defineEmits<Emits>()
@@ -228,21 +194,21 @@ const initHistory = () => {
 // 保存搜索历史
 const saveHistory = (value: string) => {
   if (!value.trim()) return
-  
+
   // 移除重复项
   const index = searchHistory.value.indexOf(value)
   if (index > -1) {
     searchHistory.value.splice(index, 1)
   }
-  
+
   // 添加到开头
   searchHistory.value.unshift(value)
-  
+
   // 限制历史记录数量
   if (searchHistory.value.length > props.maxHistory) {
     searchHistory.value = searchHistory.value.slice(0, props.maxHistory)
   }
-  
+
   // 保存到本地存储
   try {
     uni.setStorageSync('im_search_history', JSON.stringify(searchHistory.value))
@@ -276,12 +242,12 @@ const handleInput = (event: any) => {
   const value = event.detail?.value || ''
   emit('update:modelValue', value)
   emit('input', value)
-  
+
   // 防抖搜索
   if (searchTimer.value) {
     clearTimeout(searchTimer.value)
   }
-  
+
   searchTimer.value = setTimeout(() => {
     if (value.trim().length >= props.minLength) {
       emit('search', value)
@@ -289,7 +255,7 @@ const handleInput = (event: any) => {
         props.onSearch(value)
       }
     }
-    
+
     // 显示/隐藏建议
     suggestionsVisible.value = value.trim().length > 0 && props.showSuggestions
     historyVisible.value = value.trim().length === 0 && props.showHistory
@@ -328,7 +294,7 @@ const handleClear = () => {
   emit('clear')
   historyVisible.value = props.showHistory
   suggestionsVisible.value = false
-  
+
   // 聚焦输入框
   nextTick(() => {
     if (inputRef.value) {
@@ -345,12 +311,12 @@ const handleCancel = () => {
   historyVisible.value = false
   suggestionsVisible.value = false
   isFocused.value = false
-  
+
   // 失去焦点
   if (inputRef.value) {
     blur()
   }
-  
+
   if (props.onCancel) {
     props.onCancel()
   }
@@ -370,7 +336,7 @@ const handleHistoryClick = (value: string) => {
   emit('history-click', value)
   saveHistory(value)
   historyVisible.value = false
-  
+
   // 触发搜索
   if (value.trim().length >= props.minLength) {
     emit('search', value)
@@ -378,7 +344,7 @@ const handleHistoryClick = (value: string) => {
       props.onSearch(value)
     }
   }
-  
+
   // 聚焦输入框
   nextTick(() => {
     if (inputRef.value) {
@@ -395,7 +361,7 @@ const handleSuggestionClick = (item: any) => {
   emit('suggestion-click', item)
   saveHistory(value)
   suggestionsVisible.value = false
-  
+
   // 触发搜索
   if (value.trim().length >= props.minLength) {
     emit('search', value)
@@ -424,7 +390,7 @@ const setResults = (results: any[]) => {
 const focus = () => {
   if (!props.disabled) {
     isFocused.value = true
-    
+
     nextTick(() => {
       // 使用 uniapp 的选择器 API
       uni.createSelectorQuery()
@@ -439,7 +405,7 @@ const focus = () => {
             })
           }
         })
-      
+
       // 直接设置焦点（需要确保组件已渲染）
       setTimeout(() => {
         if (inputRef.value) {
@@ -494,23 +460,23 @@ defineExpose({
   border-radius: 8rpx;
   transition: all 0.3s ease;
   position: relative;
-  
+
   &--focus {
     border-color: #409eff;
     background-color: #ffffff;
     box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.1);
   }
-  
+
   &--disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
-  
+
   // 圆角样式
   &--round {
     border-radius: 100rpx;
   }
-  
+
   // 尺寸样式
   &--small {
     padding: 12rpx 20rpx;
@@ -519,32 +485,37 @@ defineExpose({
       font-size: 26rpx;
       height: 40rpx;
     }
+
     .im-search__icon {
       width: 36rpx;
       height: 36rpx;
       margin-right: 12rpx;
     }
   }
-  
+
   &--medium {
     padding: 16rpx 24rpx;
+
     .im-search__input {
       font-size: 28rpx;
       height: 44rpx;
     }
+
     .im-search__icon {
       width: 40rpx;
       height: 40rpx;
       margin-right: 16rpx;
     }
   }
-  
+
   &--large {
     padding: 20rpx 28rpx;
+
     .im-search__input {
       font-size: 32rpx;
       height: 48rpx;
     }
+
     .im-search__icon {
       width: 44rpx;
       height: 44rpx;
@@ -559,7 +530,7 @@ defineExpose({
   align-items: center;
   justify-content: center;
   cursor: pointer;
-        
+
   &-text {
     font-size: 32rpx;
     color: v-bind('props.placeholderColor');
@@ -574,11 +545,11 @@ defineExpose({
   background-color: transparent;
   border: none;
   outline: none;
-  
+
   &::placeholder {
     color: v-bind('props.placeholderColor');
   }
-  
+
   &:disabled {
     cursor: not-allowed;
   }
@@ -596,12 +567,12 @@ defineExpose({
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s;
-  
+
   &:active {
     background-color: #c0c0c0;
     transform: scale(0.95);
   }
-  
+
   &-text {
     font-size: 20rpx;
     color: #666666;
@@ -616,19 +587,19 @@ defineExpose({
   transform: translateX(20rpx);
   transition: all 0.3s ease;
   pointer-events: none;
-  
+
   &--show {
     opacity: 1;
     transform: translateX(0);
     pointer-events: auto;
   }
-  
+
   &-text {
     font-size: 28rpx;
     color: #409eff;
     cursor: pointer;
     white-space: nowrap;
-    
+
     &:active {
       opacity: 0.8;
     }
@@ -665,11 +636,11 @@ defineExpose({
   padding: 8rpx 16rpx;
   border-radius: 6rpx;
   cursor: pointer;
-  
+
   &:active {
     background-color: #f5f5f5;
   }
-  
+
   &-text {
     font-size: 24rpx;
     color: #666666;
@@ -689,11 +660,11 @@ defineExpose({
   border-bottom: 2rpx solid #f5f5f5;
   cursor: pointer;
   transition: background-color 0.2s;
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   &:active {
     background-color: #f9f9f9;
   }
@@ -716,11 +687,11 @@ defineExpose({
   color: #999999;
   opacity: 0;
   transition: opacity 0.3s;
-  
+
   .im-search__history-item:hover & {
     opacity: 1;
   }
-  
+
   &:active {
     color: #ff4d4f;
   }
@@ -745,11 +716,11 @@ defineExpose({
   border-bottom: 2rpx solid #f5f5f5;
   cursor: pointer;
   transition: background-color 0.2s;
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   &:active {
     background-color: #f9f9f9;
   }

package/package.json

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