im-ui-mobile 0.0.16 → 0.0.18

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

@@ -1,18 +1,18 @@
 <template>
-    <view class="im-chat-item" :class="[`im-chat-item--${type}`]" @click="handleClick">
-        <view class="im-chat-item__avatar">
+    <view class="im-chat" :class="[`im-chat--${type}`]" @click="handleClick">
+        <view class="im-chat__avatar">
             <view class="avatar-fallback">
                 <image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill" />
                 <text v-else class="avatar-text">{{ displayName }}</text>
             </view>
         </view>
-        <view class="im-chat-item__content">
-            <view class="im-chat-item__header">
-                <text class="im-chat-item__name">{{ name }}</text>
-                <text class="im-chat-item__time">{{ time }}</text>
+        <view class="im-chat__content">
+            <view class="im-chat__header">
+                <text class="im-chat__name">{{ name }}</text>
+                <text class="im-chat__time">{{ time }}</text>
             </view>
-            <view class="im-chat-item__message">
-                <text class="im-chat-item__text">{{ lastMessage }}</text>
+            <view class="im-chat__message">
+                <text class="im-chat__text">{{ lastMessage }}</text>
                 <view v-if="unreadCount > 0" class="badge-fallback">
                     <text class="badge-text">{{ displayUnreadCount }}</text>
                 </view>
@@ -21,78 +21,80 @@
     </view>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-
-// 设置组件名称（重要！）
-defineOptions({
-    name: 'ImChatItem'
-})
-
-const props = defineProps({
-    type: {
-        type: String,
-        default: 'default',
-        validator: (value) => ['default', 'group'].includes(value)
-    },
-    avatar: {
-        type: String,
-        default: ''
-    },
-    name: {
-        type: String,
-        required: true
-    },
-    time: {
-        type: String,
-        required: true
+<script>
+export default {
+    name: 'ImChat',
+    props: {
+        type: {
+            type: String,
+            default: 'default',
+            validator: function (value) {
+                return ['default', 'group'].includes(value)
+            }
+        },
+        avatar: {
+            type: String,
+            default: ''
+        },
+        name: {
+            type: String,
+            required: true
+        },
+        time: {
+            type: String,
+            required: true
+        },
+        lastMessage: {
+            type: String,
+            required: true
+        },
+        unreadCount: {
+            type: Number,
+            default: 0
+        }
     },
-    lastMessage: {
-        type: String,
-        required: true
+    computed: {
+        displayName() {
+            return this.name ? this.name.charAt(0) : ''
+        },
+        displayUnreadCount() {
+            return this.unreadCount > 99 ? '99+' : this.unreadCount
+        }
     },
-    unreadCount: {
-        type: Number,
-        default: 0
-    }
-})
-
-const emit = defineEmits(['click'])
-
-const displayName = computed(() => props.name.charAt(0))
-const displayUnreadCount = computed(() => props.unreadCount > 99 ? '99+' : props.unreadCount)
-
-const handleClick = (event) => {
-    console.log('🔍 uni 对象检查:', {
-        hasUni: typeof uni !== 'undefined',
-        hasShowToast: typeof uni?.showToast === 'function',
-        hasShowModal: typeof uni?.showModal === 'function'
-    })
-
-    try {
-        // 使用 showModal 替代 showToast 进行测试
-        uni.showModal({
-            title: '提示',
-            content: `点击了 ${props.name}`,
-            showCancel: false,
-            confirmText: '知道了'
-        })
-        console.log('✅ uni.showModal 调用成功')
-    } catch (error) {
-        console.error('❌ uni API 调用失败:', error)
-
-        // 备用方案：在开发环境显示提示
-        if (typeof document !== 'undefined') {
-            alert(`点击了 ${props.name}`)
+    methods: {
+        handleClick(event) {
+            console.log('🔍 uni 对象检查:', {
+                hasUni: typeof uni !== 'undefined',
+                hasShowToast: typeof uni?.showToast === 'function',
+                hasShowModal: typeof uni?.showModal === 'function'
+            })
+
+            try {
+                // 使用 showModal 替代 showToast 进行测试
+                uni.showModal({
+                    title: '提示',
+                    content: `点击了 ${this.name}`,
+                    showCancel: false,
+                    confirmText: '知道了'
+                })
+                console.log('✅ uni.showModal 调用成功')
+            } catch (error) {
+                console.error('❌ uni API 调用失败:', error)
+
+                // 备用方案：在开发环境显示提示
+                if (typeof document !== 'undefined') {
+                    alert(`点击了 ${this.name}`)
+                }
+            }
+
+            this.$emit('click', event)
         }
     }
-
-    emit('click', event)
 }
 </script>
 
 <style lang="scss" scoped>
-.im-chat-item {
+.im-chat {
     display: flex;
     padding: 24rpx 32rpx;
     transition: background-color 0.3s;

package/index.js

@@ -0,0 +1,18 @@
+import ImChat from './components/im-chat/im-chat.vue'
+
+// 重要：为组件添加名称，以支持开发环境
+ImChat.name = 'ImChat'
+
+const components = [
+    ImChat
+]
+
+const install = (app) => {
+    components.forEach(component => {
+        app.component(component.name || '', component)
+    })
+}
+
+export default {
+    install
+}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
   "type": "module",
-  "main": "index.ts",
+  "main": "index.js",
   "types": "types/index.d.ts",
   "files": [
     "components",
     "libs",
     "types",
     "utils",
-    "index.ts"
+    "index.js"
   ],
   "scripts": {
-    "dev": "cd examples && npm run dev:mp-weixin",
+    "wx": "cd examples && npm run dev:mp-weixin",
     "h5": "cd examples && npm run dev:h5",
     "build": "npm run build:types",
     "build:types": "vue-tsc -p tsconfig.build.json",

package/types/components/_common.d.ts

@@ -0,0 +1,9 @@
+export interface AllowedComponentProps {
+  class?: unknown;
+  style?: unknown;
+}
+
+export interface VNodeProps {
+  key?: string | number | symbol;
+  ref?: unknown;
+}

package/types/components/chat.d.ts

@@ -0,0 +1,104 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface ChatProps {
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    avatar: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    time: {
+        type: StringConstructor;
+        required: true;
+    };
+    lastMessage: {
+        type: StringConstructor;
+        required: true;
+    };
+    unreadCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}
+
+declare interface _Chat {
+    new(): {
+        $props: AllowedComponentProps &
+        VNodeProps &
+        ChatProps
+    }
+}
+
+export declare const Chat: _Chat
+
+
+// declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+//     type: {
+//         type: StringConstructor;
+//         default: string;
+//         validator: (value: unknown) => boolean;
+//     };
+//     avatar: {
+//         type: StringConstructor;
+//         default: string;
+//     };
+//     name: {
+//         type: StringConstructor;
+//         required: true;
+//     };
+//     time: {
+//         type: StringConstructor;
+//         required: true;
+//     };
+//     lastMessage: {
+//         type: StringConstructor;
+//         required: true;
+//     };
+//     unreadCount: {
+//         type: NumberConstructor;
+//         default: number;
+//     };
+// }>, {}, {}, {
+//     displayName(): string;
+//     displayUnreadCount(): number | "99+";
+// }, {
+//     handleClick(event: any): void;
+// }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+//     type: {
+//         type: StringConstructor;
+//         default: string;
+//         validator: (value: unknown) => boolean;
+//     };
+//     avatar: {
+//         type: StringConstructor;
+//         default: string;
+//     };
+//     name: {
+//         type: StringConstructor;
+//         required: true;
+//     };
+//     time: {
+//         type: StringConstructor;
+//         required: true;
+//     };
+//     lastMessage: {
+//         type: StringConstructor;
+//         required: true;
+//     };
+//     unreadCount: {
+//         type: NumberConstructor;
+//         default: number;
+//     };
+// }>> & Readonly<{}>, {
+//     type: string;
+//     avatar: string;
+//     unreadCount: number;
+// }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+// export default _default;

package/types/components/im-chat/im-chat.vue.d.ts

@@ -1,18 +1,63 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "click", ...args: any[]) => void;
-    name: string;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    avatar: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    time: {
+        type: StringConstructor;
+        required: true;
+    };
+    lastMessage: {
+        type: StringConstructor;
+        required: true;
+    };
+    unreadCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {}, {
+    displayName(): string;
+    displayUnreadCount(): number | "99+";
+}, {
+    handleClick(event: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    avatar: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    time: {
+        type: StringConstructor;
+        required: true;
+    };
+    lastMessage: {
+        type: StringConstructor;
+        required: true;
+    };
+    unreadCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
     type: string;
     avatar: string;
-    time: string;
-    lastMessage: string;
     unreadCount: number;
-    $props: {
-        readonly name?: string | undefined;
-        readonly type?: string | undefined;
-        readonly avatar?: string | undefined;
-        readonly time?: string | undefined;
-        readonly lastMessage?: string | undefined;
-        readonly unreadCount?: number | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/types/components.d.ts

@@ -0,0 +1,7 @@
+declare module 'vue' {
+    export interface GlobalComponents {
+        ['im-chat']: typeof import('./components/chat')['Chat']
+    }
+}
+
+export { }

package/types/index.d.ts

@@ -1,10 +1,5 @@
-import { App } from 'vue';
-import ImChat from './components/im-chat/im-chat.vue';
-export * from './libs';
-export * from './utils';
-declare const install: (app: App) => void;
-export { ImChat, install };
-declare const _default: {
-    install: (app: App<any>) => void;
-};
+declare namespace _default {
+    export { install };
+}
 export default _default;
+declare function install(app: any): void;

package/types/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@im-ui-mobile/types",
+  "version": "0.0.18",
+  "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
+  "main": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keywords": [
+    "im-ui-mobile"
+  ],
+  "types": "./index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/index.ts

@@ -1,36 +0,0 @@
-import { App } from 'vue'
-import ImChat from './components/im-chat/im-chat.vue'
-// import ImChatMessageItem from './components/im-chat-message-item/im-chat-message-item.vue'
-// import ImChatBox from './components/im-chat-box/im-chat-box.vue'
-
-export * from './libs'
-export * from './utils'
-
-// 重要：为组件添加名称，以支持开发环境
-ImChat.name = 'ImChat'
-// ImChatMessageItem.name = 'ImChatMessageItem'
-// ImChatBox.name = 'ImChatBox'
-
-const components = [
-    ImChat,
-    // ImChatMessageItem,
-    // ImChatBox
-]
-
-const install = (app: App): void => {
-    components.forEach(component => {
-        app.component(component.name!, component)
-    })
-}
-
-// 导出组件
-export {
-    ImChat,
-    // ImChatMessageItem,
-    // ImChatBox,
-    install
-}
-
-export default {
-    install
-}

package/types/components/im-chat-box/im-chat-box.vue.d.ts

@@ -1,129 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    messages: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    maxlength: {
-        type: NumberConstructor;
-        default: number;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {
-    inputText: string;
-}, {}, {
-    handleSend(): void;
-    shouldShowAvatar(message: any, index: any): any;
-    scrollToBottom(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    messages: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    maxlength: {
-        type: NumberConstructor;
-        default: number;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    title: string;
-    messages: unknown[];
-    placeholder: string;
-    maxlength: number;
-    loading: boolean;
-}, {}, {
-    ImChatMessageItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        position: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        type: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        content: {
-            type: StringConstructor;
-            required: true;
-        };
-        avatar: {
-            type: StringConstructor;
-            default: string;
-        };
-        showAvatar: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        status: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        duration: {
-            type: NumberConstructor;
-            default: number;
-        };
-    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        position: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        type: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        content: {
-            type: StringConstructor;
-            required: true;
-        };
-        avatar: {
-            type: StringConstructor;
-            default: string;
-        };
-        showAvatar: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        status: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        duration: {
-            type: NumberConstructor;
-            default: number;
-        };
-    }>> & Readonly<{}>, {
-        position: string;
-        type: string;
-        avatar: string;
-        showAvatar: boolean;
-        status: string;
-        duration: number;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/types/components/im-chat-item/im-chat-item.vue.d.ts

@@ -1,18 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "click", ...args: any[]) => void;
-    type: string;
-    avatar: string;
-    name: string;
-    time: string;
-    lastMessage: string;
-    unreadCount: number;
-    $props: {
-        readonly type?: string | undefined;
-        readonly avatar?: string | undefined;
-        readonly name?: string | undefined;
-        readonly time?: string | undefined;
-        readonly lastMessage?: string | undefined;
-        readonly unreadCount?: number | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/types/components/im-chat-message-item/im-chat-message-item.vue.d.ts

@@ -1,73 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    position: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-    avatar: {
-        type: StringConstructor;
-        default: string;
-    };
-    showAvatar: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    status: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    duration: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    position: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-    avatar: {
-        type: StringConstructor;
-        default: string;
-    };
-    showAvatar: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    status: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    duration: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    position: string;
-    type: string;
-    avatar: string;
-    showAvatar: boolean;
-    status: string;
-    duration: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;