im-ui-mobile 0.1.0 → 0.1.2

package/types/components/card.d.ts

@@ -0,0 +1,122 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+// 卡片操作按钮类型
+declare interface CardAction {
+    text: string
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'default'
+    plain?: boolean
+    disabled?: boolean
+    loading?: boolean
+    data?: any
+}
+
+// 卡片属性接口
+declare interface CardProps {
+    // 基础属性
+    title?: string
+    subtitle?: string
+    description?: string
+    extra?: string
+
+    // 显示控制
+    size?: 'small' | 'medium' | 'large'
+    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'hover'
+    border?: 'none' | 'solid' | 'dashed'
+    full?: boolean
+    hoverable?: boolean
+    disabled?: boolean
+
+    // 加载状态
+    loading?: boolean
+    loadingText?: string
+    loadingIcon?: string
+
+    // 角标
+    badge?: string | number
+    badgeContent?: string | number
+    badgeType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    badgeMax?: number
+    badgeDot?: boolean
+    badgePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+    badgeStyle?: Record<string, any>
+
+    // 标题区域
+    titleIcon?: string
+    titleIconSize?: string | number
+    titleIconColor?: string
+    titleStyle?: Record<string, any>
+    subtitleStyle?: Record<string, any>
+    descriptionStyle?: Record<string, any>
+
+    // 封面图片
+    coverImage?: string
+    coverMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'
+    coverTag?: string
+    lazyLoad?: boolean
+    showMenuByLongpress?: boolean
+
+    // 底部区域
+    footer?: string
+    actions?: CardAction[]
+    actionSize?: 'mini' | 'small' | 'medium' | 'large'
+
+    // 自定义样式
+    customStyle?: Record<string, any>
+    radius?: string | number
+    padding?: string | number
+    margin?: string | number
+}
+
+// 卡片事件接口
+declare interface CardEvents {
+    // 点击事件
+    onClick?: (event: MouseEvent) => void
+    onLongpress?: (event: TouchEvent) => void
+    onCoverClick?: (event: MouseEvent) => void
+    onActionClick?: (action: CardAction, index: number) => void
+    onImageLoad?: (event: any) => void
+    onImageError?: (event: any) => void
+
+    // Vue 原生事件
+    onTouchstart?: (event: TouchEvent) => void
+    onTouchmove?: (event: TouchEvent) => void
+    onTouchend?: (event: TouchEvent) => void
+    onTouchcancel?: (event: TouchEvent) => void
+}
+
+// 卡片插槽接口
+declare interface CardSlots {
+    // 默认插槽
+    default?: () => any
+
+    // 命名插槽
+    header?: () => any
+    title?: () => any
+    cover?: () => any
+    'cover-tag'?: () => any
+    extra?: () => any
+    footer?: () => any
+}
+
+// 卡片组件实例
+declare interface _Card {
+    new(): {
+        // 属性
+        $props: AllowedComponentProps & VNodeProps & CardProps
+
+        // 事件
+        $emit: CardEvents
+
+        // 插槽
+        $slots: CardSlots
+    }
+}
+
+// 导出卡片组件
+export declare const Card: _Card
+
+// 导出类型（用于单独使用）
+export declare type CardPropsType = CardProps
+export declare type CardActionType = CardAction
+export declare type CardEventsType = CardEvents
+export declare type CardSlotsType = CardSlots

package/types/components/col.d.ts

@@ -0,0 +1,37 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface ColProps {
+    // 布局配置
+    span?: number | string
+    offset?: number | string
+    order?: number | string
+    alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch'
+    flex?: string
+    
+    // 响应式配置
+    xs?: number | string
+    sm?: number | string
+    md?: number | string
+    lg?: number | string
+    xl?: number | string
+    
+    // 样式配置
+    width?: string
+    height?: string
+    margin?: string
+    padding?: string
+    bgColor?: string
+    borderColor?: string
+    borderRadius?: string
+    
+    // 点击事件
+    clickable?: boolean
+}
+
+declare interface _Col {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & ColProps
+    }
+}
+
+export declare const Col: _Col

package/types/components/dialog.d.ts

@@ -0,0 +1,125 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+// 对话框类型
+type DialogType = 'alert' | 'confirm' | 'prompt' | 'success' | 'error' | 'warning' | 'info' | 'html' | 'custom'
+
+// 对话框组件 Props
+declare interface DialogProps {
+    // 显示控制
+    show?: boolean
+    modelValue?: boolean
+
+    // 对话框类型
+    type?: DialogType
+
+    // 标题和内容
+    title?: string
+    subtitle?: string
+    content?: string
+
+    // 头部配置
+    showHeader?: boolean
+    showSubtitle?: boolean
+    showIcon?: boolean
+
+    // 内容样式
+    contentStyle?: Record<string, string>
+
+    // Prompt 类型配置
+    promptLabel?: string
+    promptPlaceholder?: string
+    inputType?: 'text' | 'number' | 'password' | 'textarea'
+    maxlength?: number
+    showCharCount?: boolean
+    inputDisabled?: boolean
+
+    // 按钮配置
+    showFooter?: boolean
+    showCancel?: boolean
+    showConfirm?: boolean
+    cancelText?: string
+    confirmText?: string
+    cancelType?: 'default' | 'primary' | 'warning' | 'error'
+    confirmType?: 'default' | 'primary' | 'warning' | 'error'
+    cancelDisabled?: boolean
+    confirmDisabled?: boolean
+    cancelLoading?: boolean
+    confirmLoading?: boolean
+    buttonSize?: 'small' | 'medium' | 'large'
+
+    // 弹窗配置
+    position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+    animation?: 'fade' | 'slide' | 'zoom' | 'none'
+    duration?: number
+    showOverlay?: boolean
+    overlayColor?: string
+    overlayOpacity?: number
+    closeOnClickOverlay?: boolean
+    lockScroll?: boolean
+    width?: string
+    borderRadius?: string
+    backgroundColor?: string
+    zIndex?: number
+    showClose?: boolean
+    safeAreaInsetBottom?: boolean
+    customClass?: string
+    closeOnClickAction?: boolean
+
+    // 验证函数
+    validator?: (value: string) => string | boolean
+
+    // 自动关闭
+    autoClose?: boolean
+    autoCloseDelay?: number
+
+    // 输入框初始值
+    defaultValue?: string
+}
+
+// 对话框组件方法
+declare interface DialogMethods {
+    // 打开对话框
+    open: (options?: Partial<DialogProps>) => void
+
+    // 关闭对话框
+    close: () => void
+
+    // 切换显示状态
+    toggle: () => void
+
+    // 清空输入
+    clearInput: () => void
+}
+
+declare interface _Dialog {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & DialogProps
+
+        $emit: {
+            'update:show': (value: boolean) => void
+            'update:modelValue': (value: boolean) => void
+            'open': () => void
+            'opened': () => void
+            'close': () => void
+            'closed': () => void
+            'click-overlay': () => void
+            'confirm': (value?: string) => void
+            'cancel': () => void
+            'input': (value: string) => void
+            'focus': () => void
+            'blur': () => void
+        }
+    } & DialogMethods
+}
+
+export declare const Dialog: _Dialog
+
+// 导出类型
+export type {
+    DialogType,
+    DialogProps,
+    DialogMethods
+}
+
+// 默认导出
+export default Dialog

package/types/components/double-tap-view.d.ts

@@ -0,0 +1,31 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface DoubleTapViewProps {
+    /** 双击间隔时间（毫秒）默认 300ms */
+    delay?: number
+    /** 是否阻止事件冒泡 */
+    stopPropagation?: boolean,
+    /** CSS样式类 **/
+    class?: string,
+    /** CSS样式 **/
+    style?: string
+}
+
+declare interface DoubleTapViewExpose {
+    /** 重置组件状态 */
+    reset: () => void
+}
+
+declare interface _DoubleTapView {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & DoubleTapViewProps
+        $emit: {
+            /** 单击事件 */
+            'single-tap': (event: any) => void
+            /** 双击事件 */
+            'double-tap': (event: any) => void
+        }
+    } & DoubleTapViewExpose
+}
+
+export declare const DoubleTapView: _DoubleTapView

package/types/components/emoji-picker.d.ts

@@ -0,0 +1,121 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface Emoji {
+    key: string
+    char: string
+    name: string
+    category: string
+    url?: string
+    type: 'unicode' | 'image'
+    code?: string
+    keywords?: string[]
+}
+
+declare interface EmojiCategory {
+    id: string
+    name: string
+    icon: string
+    order: number
+}
+
+declare interface EmojiPickerProps {
+    // 显示控制
+    visible?: boolean
+    theme?: 'light' | 'dark' | 'card'
+    size?: 'small' | 'medium' | 'large'
+    
+    // 数据源
+    emojis?: Emoji[]
+    categories?: EmojiCategory[]
+    recentEmojis?: Emoji[]
+    
+    // 配置选项
+    showRecent?: boolean
+    showTabs?: boolean
+    showTabText?: boolean
+    showFooter?: boolean
+    showPreview?: boolean
+    showEmojiName?: boolean
+    showCategoryCount?: boolean
+    showRecentClear?: boolean
+    showDeleteButton?: boolean
+    showSendButton?: boolean
+    showScrollbar?: boolean
+    
+    // 搜索功能
+    enableSearch?: boolean
+    searchPlaceholder?: string
+    searchIconSize?: number
+    searchIconColor?: string
+    autoFocus?: boolean
+    
+    // 布局配置
+    columns?: number
+    emojiSize?: string | number
+    spacing?: string | number
+    borderRadius?: string | number
+    
+    // 样式控制
+    height?: string | number
+    backgroundColor?: string
+    categoryColor?: string
+    
+    // 交互配置
+    maxRecentCount?: number
+    allowMultiple?: boolean
+    selectedEmojis?: Emoji[]
+    
+    // 空状态
+    emptyIconSize?: number
+    emptyIconColor?: string
+    emptyText?: string
+}
+
+declare interface EmojiPickerEvents {
+    // 基础事件
+    'update:visible': [visible: boolean]
+    'open': []
+    'close': []
+    
+    // 表情事件
+    'select': [emoji: Emoji]
+    'delete': [emoji: Emoji]
+    'send': [emoji: Emoji]
+    'longpress': [emoji: Emoji]
+    
+    // 搜索事件
+    'search': [keyword: string]
+    'search-clear': []
+    
+    // 最近使用
+    'recent-clear': []
+    
+    // 分类切换
+    'tab-change': [tabId: string]
+}
+
+declare interface EmojiPickerSlots {
+    // 底部自定义插槽
+    footer?: () => any
+}
+
+declare interface _EmojiPicker {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & EmojiPickerProps
+        $emit: EmojiPickerEvents
+        $slots: EmojiPickerSlots
+        $exposed?: {
+            open: () => void
+            close: () => void
+            insertEmoji: (emoji: Emoji) => void
+            clearRecentEmojis: () => void
+            getRecentEmojis: () => Emoji[]
+            searchEmoji: (keyword: string) => Emoji[]
+        }
+    }
+}
+
+export declare const EmojiPicker: _EmojiPicker
+export declare type EmojiPickerPropsType = EmojiPickerProps
+export declare type EmojiType = Emoji
+export declare type EmojiCategoryType = EmojiCategory

package/types/components/group-rtc-join.d.ts

@@ -5,7 +5,7 @@ declare interface RtcInfo {
     userInfos: Array<{
         id: number
         nickName: string
-        headImage: string
+        avatar: string
         isCamera?: boolean
         isMicroPhone?: boolean
     }>

package/types/components/icon.d.ts

@@ -0,0 +1,77 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare type IconType = 'font' | 'image' | 'svg' | 'custom'
+declare type IconSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | string
+declare type RotateDirection = 'clockwise' | 'counterclockwise'
+
+declare interface IconProps {
+    /** 图标名称或标识 */
+    name?: string
+    /** 图标类型 */
+    type?: IconType
+    /** 图标大小 */
+    size?: IconSize | number
+    /** 图标颜色（仅对字体图标和SVG有效） */
+    color?: string
+    /** 旋转角度（0-360） */
+    rotate?: number
+    /** 旋转方向 */
+    rotateDirection?: RotateDirection
+    /** 是否旋转动画 */
+    spin?: boolean
+    /** 旋转动画速度（秒） */
+    spinSpeed?: number
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 点击时的波纹效果 */
+    ripple?: boolean
+    /** 波纹颜色 */
+    rippleColor?: string
+    /** 自定义类名 */
+    customClass?: string
+    /** 自定义样式 */
+    customStyle?: Record<string, string | number>
+    /** 图片模式（仅type='image'时有效） */
+    imageMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'
+    /** 图片地址（仅type='image'时有效） */
+    src?: string
+    /** 是否懒加载图片（仅type='image'时有效） */
+    lazyLoad?: boolean
+    /** 是否长按显示菜单（仅type='image'时有效） */
+    showMenuByLongpress?: boolean
+    /** SVG内容（仅type='svg'时有效） */
+    svgContent?: string
+    /** 使用SVG内容而不是内置图标（仅type='svg'时有效） */
+    useSvgContent?: boolean
+}
+
+declare interface IconExpose {
+    /** 重新加载图标 */
+    reload: () => void
+    /** 获取图标状态 */
+    getStatus: () => {
+        isLoaded: boolean
+        loadError: boolean
+        type: IconType
+        name: string
+    }
+}
+
+declare interface _Icon {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & IconProps
+        $emit: {
+            /** 点击事件 */
+            click: (event: MouseEvent) => void
+            /** 图片加载成功 */
+            load: (event: any) => void
+            /** 图片加载失败 */
+            error: (event: any) => void
+        }
+        $slots: {
+            default?: any
+        }
+    } & IconExpose
+}
+
+export declare const Icon: _Icon

package/types/components/link.d.ts

@@ -0,0 +1,55 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface LinkProps {
+    // 链接配置
+    href?: string
+    text?: string
+    target?: '_self' | '_blank' | '_parent' | '_top'
+    rel?: string
+    download?: boolean
+
+    // 导航配置
+    openType?: 'navigate' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack'
+    delta?: number
+    hoverClass?: string
+    hoverStartTime?: number
+    hoverStayTime?: number
+
+    // 样式配置
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'
+    size?: 'small' | 'medium' | 'large'
+    underline?: 'none' | 'hover' | 'always'
+    disabled?: boolean
+    loading?: boolean
+
+    // 图标配置
+    icon?: string
+    showArrow?: boolean
+
+    // 角标配置
+    badge?: boolean
+    badgeType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' //'primary' | 'success' | 'warning' | 'error' | 'info'
+    badgeValue?: string | number
+    badgeMax?: number
+    badgeDot?: boolean
+    badgePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+    // 自定义样式
+    customClass?: string
+    customStyle?: string | Record<string, string>
+    color?: string
+    hoverColor?: string
+    activeColor?: string
+    fontSize?: string | number
+
+    // 事件配置
+    beforeNavigate?: (url: string) => boolean | Promise<boolean>
+}
+
+declare interface _Link {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & LinkProps
+    }
+}
+
+export declare const Link: _Link

package/types/components/loading.d.ts

@@ -4,6 +4,7 @@ declare interface LoadingProps {
     size?: number
     iconColor?: string
     mask?: boolean
+    text?: string
 }
 
 declare interface LoadingSlots {

package/types/components/message-action.d.ts

@@ -0,0 +1,96 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface MessageAction {
+    key: string
+    text: string
+    icon?: string
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    disabled?: boolean
+    danger?: boolean
+    loading?: boolean
+    hidden?: boolean
+    divider?: boolean
+    badge?: string | number
+    badgeType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    hint?: string
+    data?: any
+    handler?: () => void | Promise<void>
+}
+
+declare interface MessageActionProps {
+    // 显示控制
+    visible?: boolean
+    position?: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+    theme?: 'light' | 'dark' | 'card'
+
+    // 数据
+    actions?: MessageAction[]
+    message?: any
+
+    // 配置
+    showCancel?: boolean
+    cancelText?: string
+    maxHeight?: string | number
+    width?: string | number
+    borderRadius?: string | number
+    showArrow?: boolean
+    arrowSize?: number
+    iconSize?: number
+
+    // 位置控制
+    x?: number
+    y?: number
+    offsetX?: number
+    offsetY?: number
+    fitViewport?: boolean
+
+    // 动画
+    animation?: boolean
+    animationDuration?: number
+
+    // 遮罩
+    showMask?: boolean
+    maskClosable?: boolean
+    maskColor?: string
+}
+
+declare interface MessageActionEvents {
+    // 基础事件
+    'update:visible': [visible: boolean]
+    'open': []
+    'close': []
+    'cancel': []
+
+    // 操作事件
+    'select': [action: MessageAction, message?: any]
+    'click': [actionKey: string, message?: any]
+
+    // 生命周期
+    'before-open': []
+    'after-open': []
+    'before-close': []
+    'after-close': []
+}
+
+declare interface MessageActionSlots {
+    // 默认插槽（自定义内容）
+    default?: () => any
+}
+
+declare interface _MessageAction {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & MessageActionProps
+        $emit: MessageActionEvents
+        $slots: MessageActionSlots
+        $exposed?: {
+            open: () => void
+            close: () => void
+            updatePosition: (x: number, y: number) => void
+            updateActions: (newActions: MessageAction[]) => void
+        }
+    }
+}
+
+export declare const MessageAction: _MessageAction
+export declare type MessageActionPropsType = MessageActionProps
+export declare type MessageActionType = MessageAction

package/types/components/message-item.d.ts

@@ -2,14 +2,14 @@ import { AllowedComponentProps, VNodeProps } from '../common'
 
 declare interface MessageItemProps {
     avatar?: string
-    showName: string
+    displayName: string
     msgInfo: any
     groupMembers?: any[]
 }
 
 declare interface MessageItemEmits {
     (e: 'call'): void
-    (e: 'longPressHead'): void
+    (e: 'longpressAvatar'): void
     (e: 'resend', msgInfo: any): void
     (e: 'audioStateChange', state: string, msgInfo: any): void
     (e: 'copy', msgInfo: any): void