im-ui-mobile 0.1.1 → 0.1.3

package/components/im-tabs-tab-pane/im-tabs-tab-pane.vue

@@ -0,0 +1,145 @@
+<!-- components/im-tabs/im-tabs-tab-pane.vue -->
+<template>
+    <view v-if="shouldRender" :class="[
+        'im-tabs-tab-pane',
+        customClass,
+        {
+            'im-tabs-tab-pane-active': active,
+            'im-tabs-tab-pane-inactive': !active
+        }
+    ]" :style="paneStyle">
+        <slot v-if="shouldShowContent" />
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    index: {
+        type: Number,
+        default: 0
+    },
+    id: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    lazy: {
+        type: Boolean,
+        default: false
+    },
+    destroyOnInactive: {
+        type: Boolean,
+        default: false
+    },
+    customClass: {
+        type: String,
+        default: ''
+    }
+})
+
+// 注入父组件数据
+const tabsData = inject<any>('tabs')
+const { currentIndex, keepAlive } = tabsData || {}
+
+// 记录是否曾经激活过（用于懒加载）
+const hasBeenActive = ref(false)
+
+// 计算属性
+const active = computed(() => {
+    const isActive = currentIndex?.value === props.index
+    if (isActive) {
+        hasBeenActive.value = true
+    }
+    return isActive
+})
+
+const shouldRender = computed(() => {
+    if (props.destroyOnInactive && !active.value) {
+        return false
+    }
+
+    if (props.lazy && !active.value && !hasBeenActive.value) {
+        return false
+    }
+
+    return true
+})
+
+const shouldShowContent = computed(() => {
+    if (keepAlive?.value === false && !active.value) {
+        return false
+    }
+
+    if (props.lazy && !active.value && !hasBeenActive.value) {
+        return false
+    }
+
+    return true
+})
+
+const paneStyle = computed(() => {
+    const style: Record<string, any> = {}
+
+    if (active.value) {
+        style.display = 'block'
+    } else {
+        style.display = 'none'
+    }
+
+    return style
+})
+</script>
+
+<style lang="scss" scoped>
+.im-tabs-tab-pane {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    overflow: auto;
+    box-sizing: border-box;
+
+    // 水平布局
+    .im-tabs-content:not(.im-tabs-content-vertical) & {
+        width: 100%;
+    }
+
+    // 垂直布局
+    .im-tabs-content-vertical & {
+        height: 100%;
+    }
+
+    // 激活状态
+    &-active {
+        display: block;
+    }
+
+    // 非激活状态
+    &-inactive {
+        display: none;
+    }
+}
+
+// 动画效果
+.im-tabs-content {
+    &-fade {
+        .im-tabs-tab-pane {
+            animation-duration: 0.3s;
+            animation-fill-mode: both;
+
+            &-enter-active {
+                animation-name: im-tabs-fade-in;
+            }
+
+            &-leave-active {
+                animation-name: im-tabs-fade-out;
+            }
+        }
+    }
+}
+</style>

package/index.js

@@ -1,5 +1,4 @@
 import { nextTick } from 'vue';
-import { UViewPlusPlugin } from './plugins/uview-plus.js'
 import eventBus from "./utils/eventBus.js";
 import datetime from "./utils/datetime.js";
 import Emoji from "./utils/emoji.js";
@@ -53,9 +52,6 @@ const install = (app, upuiParams = '') => {
         }
     }
 
-    // 安装插件
-    app.use(UViewPlusPlugin)
-
     // 注册组件
     components.forEach(component => {
         app.component(component.name || '', component)

package/package.json

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

package/styles/common.scss

@@ -1,9 +1,9 @@
 .none-pointer-events {
     uni-image img {
         // 阻止微信默认长按菜单
-        pointer-events: none;
-        -webkit-pointer-events: none;
-        -ms-pointer-events: none;
-        -moz-pointer-events: none;
+        // pointer-events: none;
+        // -webkit-pointer-events: none;
+        // -ms-pointer-events: none;
+        // -moz-pointer-events: none;
     }
 }

package/types/components/stepper.d.ts

@@ -1,3 +1,5 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
 declare interface _StepperProps {
     /** 当前值 */
     modelValue?: number;

package/types/components/tabs-tab-pane.d.ts

@@ -0,0 +1,27 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface _TabsTabPaneProps {
+    /** 标签索引 */
+    index?: number;
+    /** 标签标识符 */
+    id?: string | number;
+    /** 是否延迟渲染 */
+    lazy?: boolean;
+    /** 是否激活 */
+    active?: boolean;
+    /** 是否销毁 */
+    destroyOnInactive?: boolean;
+    /** 自定义CSS类 */
+    customClass?:string;
+}
+
+
+declare interface _TabsTabPane {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & _TabsTabPaneProps
+    }
+}
+
+
+export declare const TabsTabPane: _TabsTabPane
+export declare const TabsTabPaneProps: _TabsTabPaneProps

package/types/components/tabs.d.ts

@@ -0,0 +1,117 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface _TabItem {
+    /** 标签名称 */
+    title: string;
+    /** 标签标识符 */
+    id?: string | number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 徽标数字 */
+    badge?: number;
+    /** 徽标文字 */
+    badgeText?: string;
+    /** 徽标类型 */
+    badgeType?: 'dot' | 'number' | 'text';
+    /** 自定义图标 */
+    icon?: string;
+    /** 选中时的图标 */
+    activeIcon?: string;
+    /** 是否显示红点 */
+    showRedDot?: boolean;
+    /** 自定义样式 */
+    style?: Record<string, any>;
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义渲染函数 */
+    renderTitle?: (tab: TabItem, isActive: boolean) => any;
+}
+
+declare interface _TabsProps {
+    /** 当前激活的标签索引 */
+    modelValue?: number;
+    /** 当前激活的标签标识符 */
+    activeKey?: string | number;
+    /** 标签列表 */
+    items: TabItem[];
+    /** 标签栏位置 */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** 标签栏样式 */
+    type?: 'line' | 'card' | 'button' | 'segment';
+    /** 是否可滑动切换 */
+    swipeable?: boolean;
+    /** 是否显示底部滑动条 */
+    showSlider?: boolean;
+    /** 滑动条宽度（单位px或%） */
+    sliderWidth?: string | number;
+    /** 滑动条高度（单位px） */
+    sliderHeight?: number;
+    /** 滑动条颜色 */
+    sliderColor?: string;
+    /** 是否显示底部边框 */
+    border?: boolean;
+    /** 标签栏背景色 */
+    background?: string;
+    /** 标签栏高度（单位px） */
+    height?: number;
+    /** 标签最小宽度（单位px） */
+    minTabWidth?: number;
+    /** 标签最大宽度（单位px） */
+    maxTabWidth?: number;
+    /** 是否开启粘性布局 */
+    sticky?: boolean;
+    /** 粘性布局吸顶距离（单位px） */
+    stickyOffsetTop?: number;
+    /** 是否开启滚动导航 */
+    scrollable?: boolean;
+    /** 标签栏是否居中 */
+    centered?: boolean;
+    /** 是否在切换标签时保留状态 */
+    keepAlive?: boolean;
+    /** 是否开启懒加载 */
+    lazy?: boolean;
+    /** 切换动画持续时间（毫秒） */
+    duration?: number;
+    /** 是否在初始化时滚动到激活标签 */
+    scrollOnInit?: boolean;
+    /** 点击标签前回调，返回 false 可阻止切换 */
+    beforeChange?: (index: number, tab: TabItem) => boolean | Promise<boolean>;
+    /** 自定义类名 */
+    customClass?: string;
+    /** 自定义标签栏类名 */
+    navClass?: string;
+    /** 自定义内容类名 */
+    contentClass?: string;
+    /** 标签间距（单位px） */
+    gutter?: number;
+    /** 是否显示标签图标 */
+    showIcon?: boolean;
+    /** 图标位置 */
+    iconPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /** 动画类型 */
+    animation?: 'slide' | 'fade' | 'none';
+}
+
+declare interface _TabsEmits {
+    (e: 'update:modelValue', index: number): void;
+    (e: 'update:activeKey', id: string | number): void;
+    (e: 'change', index: number, tab: TabItem): void;
+    (e: 'click', index: number, tab: TabItem): void;
+    (e: 'disabled', index: number, tab: TabItem): void;
+    (e: 'scroll', event: any): void;
+    (e: 'sticky', isSticky: boolean): void;
+}
+
+declare interface _Tabs {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & _TabsProps
+        $emit: _TabsEmits
+    }
+}
+
+
+export declare const Tabs: _Tabs
+export declare type TabItem = _TabItem
+export declare type TabsProps = _TabsProps
+export declare type TabsEmits = _TabsEmits
+

package/types/components.d.ts

@@ -33,6 +33,8 @@ declare module 'vue' {
         ['im-link']: typeof import('./components/link')['Link']
         ['im-sku']: typeof import('./components/sku')['Sku']
         ['im-stepper']: typeof import('./components/stepper')['Stepper']
+        ['im-tabs']: typeof import('./components/tabs')['Tabs']
+        ['im-tabs-tab-pane']: typeof import('./components/tabs-tab-pane')['TabsTabPane']
     }
 }
 

package/types/index.d.ts

@@ -11,7 +11,7 @@ import RecorderH5 from "./utils/recorderH5.d.ts";
 import Requester from "./utils/requester.d.ts";
 import * as url from "./utils/url.d.ts";
 import { useDynamicRefs } from "./utils/useDynamicRefs.d.ts";
-import WebSocket from "./utils/websocket.d.ts";
+import { webSocket, type WebSocket } from "./utils/websocket.d.ts";
 import type {
     // 类型常量
     RtcMode,
@@ -69,20 +69,39 @@ declare module 'im-ui-mobile' {
         ValidationResult,
         EmojiType,
         EmojiCategoryType,
+        RtcMode,
+        RtcInfo,
+        Chat,
+        Message,
+        Friend,
+        OnlineTerminal,
+        MenuItem,
+        WebRTCMessage,
+        GroupMember,
+        Group,
+        UploadImageResponse,
+        SubmitItem,
+        ImageItem,
+        FileItem,
+        ApiResponse,
+        RecorderError,
+        UploadRecorderFileResponse,
+        UploadRecorderFileResult,
+        RecorderFile,
+        UserInfo,
+        Response,
+        WebSocket
     }
 
-    // 导出常用函数
+    // 导出函数/实例
     export {
         isNumber,
         isInteger,
         isMobilePhone,
         isEmail,
         isChineseIDCard,
-        validatePassword
-    }
+        validatePassword,
 
-    // 导出类型/函数
-    export {
         getConfig,
         eventBus,
         datetime,
@@ -92,7 +111,7 @@ declare module 'im-ui-mobile' {
         Requester,
         url,
         useDynamicRefs,
-        WebSocket,
+        webSocket,
         RecorderApp,
         RecorderH5,
         validator,
@@ -103,30 +122,5 @@ declare module 'im-ui-mobile' {
         MESSAGE_TYPE,
         TERMINAL_TYPE,
         MESSAGE_STATUS,
-
-        // 类型常量
-        RtcMode,
-        RtcInfo,
-        Chat,
-        Message,
-        Friend,
-        OnlineTerminal,
-        MenuItem,
-        WebRTCMessage,
-        GroupMember,
-        Group,
-        UploadImageResponse,
-        SubmitItem,
-        ImageItem,
-        FileItem,
-        ApiResponse,
-        RecorderError,
-        UploadRecorderFileResponse,
-        UploadRecorderFileResult,
-        RecorderFile,
-        UserInfo,
-        Response
     }
-}
-
-// export { MESSAGE_TYPE, RTC_STATE, TERMINAL_TYPE, MESSAGE_STATUS } 
+}

package/types/utils/websocket.d.ts

@@ -31,4 +31,7 @@ declare class WebSocket {
     setHeartCheckTimeout(timeout: number): void;
     destroy(): void;
 }
-export default WebSocket;
+
+declare const eventBus: EventBus;
+export { eventBus, WebSocket }
+export default eventBus;

package/plugins/uview-plus.js

@@ -1,29 +0,0 @@
-import uviewPlus from 'uview-plus'
-
-export const UViewPlusPlugin = {
-  install(app) {
-    // 安装 uview-plus
-    app.use(uviewPlus)
-
-    // 注册一些常用的 uview-plus 组件作为全局组件
-    app.component('UButton', uviewPlus.Button)
-    app.component('UInput', uviewPlus.Input)
-    app.component('UAvatar', uviewPlus.Avatar)
-    app.component('UBadge', uviewPlus.Badge)
-    app.component('UIcon', uviewPlus.Icon)
-    app.component('UPopup', uviewPlus.Popup)
-    app.component('USearch', uviewPlus.Search)
-    app.component('UIndexList', uviewPlus.IndexList)
-    app.component('UIndexItem', uviewPlus.IndexItem)
-    app.component('UCard', uviewPlus.Card)
-    app.component('UTabs', uviewPlus.Tabs)
-    app.component('UParse', uviewPlus.Parse)
-    app.component('ULink', uviewPlus.Link)
-    app.component('UUpload', uviewPlus.Upload)
-    app.component('ULineProgress', uviewPlus.LineProgress)
-    app.component('UModal', uviewPlus.Modal)
-    app.component('UTag', uviewPlus.Tag)
-    app.component('UForm', uviewPlus.Form)
-    app.component('UFormItem', uviewPlus.FormItem)
-  }
-}