im-ui-mobile 0.1.41 → 0.1.43

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

@@ -59,96 +59,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { validator } from '../../index'
-
-// 定义类型
-type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
-type ButtonSize = 'mini' | 'small' | 'medium' | 'large'
-type ButtonShape = 'square' | 'round' | 'circle'
-type ButtonFormType = 'submit' | 'reset'
-type ButtonOpenType =
-	| 'contact'
-	| 'share'
-	| 'getPhoneNumber'
-	| 'getUserInfo'
-	| 'launchApp'
-	| 'openSetting'
-	| 'feedback'
-	| 'chooseAvatar'
-type IconPosition = 'left' | 'right'
-type TextSize = 'small' | 'medium' | 'large'
-
-interface Props {
-	// 基础属性
-	text?: string
-	type?: ButtonType
-	size?: ButtonSize
-	shape?: ButtonShape
-	disabled?: boolean
-	loading?: boolean
-	loadingText?: string
-	loadingColor?: string
-	showLoading?: boolean
-	hideTextWhenLoading?: boolean
-	block?: boolean
-	plain?: boolean
-	hairline?: boolean
-	native?: boolean
-
-	// 图标
-	icon?: string
-	iconPosition?: IconPosition
-	iconSize?: string | number
-
-	// 样式
-	color?: string
-	bgColor?: string
-	borderColor?: string
-	border?: boolean
-	textColor?: string
-	textSize?: TextSize
-	width?: string
-	height?: string
-	padding?: string
-	margin?: string
-	radius?: string
-	shadow?: string
-
-	// 角标
-	badge?: boolean | number | string
-
-	// 表单相关
-	formType?: ButtonFormType
-
-	// 开放能力
-	openType?: ButtonOpenType
-	appParameter?: string
-	lang?: 'en' | 'zh_CN' | 'zh_TW'
-	sessionFrom?: string
-	sendMessageTitle?: string
-	sendMessagePath?: string
-	sendMessageImg?: string
-	showMessageCard?: boolean
-
-	// 交互效果
-	hoverClass?: string
-	hoverStartTime?: number
-	hoverStayTime?: number
-}
-
-// 定义 Emits
-interface Emits {
-	(e: 'click', event: PointerEvent): void
-	(e: 'getuserinfo', detail: any): void
-	(e: 'contact', detail: any): void
-	(e: 'getphonenumber', detail: any): void
-	(e: 'error', detail: any): void
-	(e: 'launchapp', detail: any): void
-	(e: 'opensetting', detail: any): void
-	(e: 'chooseavatar', detail: any): void
-}
-
-// Props 和 Emits
-const props = withDefaults(defineProps<Props>(), {
+import type {
+	ButtonType,
+	ButtonSize,
+	ButtonShape,
+	ButtonFormType,
+	ButtonOpenType,
+	ButtonIconPosition,
+	ButtonTextSize,
+	ButtonProps,
+	ButtonEmits
+} from '../../types/components/button'
+
+// ButtonProps 和 ButtonEmits
+const props = withDefaults(defineProps<ButtonProps>(), {
 	type: 'default',
 	size: 'medium',
 	shape: 'round',
@@ -181,7 +105,7 @@ const props = withDefaults(defineProps<Props>(), {
 	lang: 'zh_CN'
 })
 
-const emit = defineEmits<Emits>()
+const emit = defineEmits<ButtonEmits>()
 
 // 计算属性
 const buttonStyles = computed(() => {

package/components/im-modal/im-modal.vue

@@ -3,9 +3,8 @@
     :show-overlay="showOverlay" :overlay-color="overlayColor" :overlay-opacity="overlayOpacity"
     :close-on-click-overlay="closeOnClickOverlay" :lock-scroll="lockScroll" :width="computedWidth"
     :border-radius="borderRadius" :background-color="backgroundColor" :z-index="zIndex"
-    :show-close="showClose && showHeader" :close-position="closePosition" :safe-area-inset-bottom="safeAreaInsetBottom"
-    :custom-class="customClass" @open="handleOpen" @opened="handleOpened" @close="handleClose" @closed="handleClosed"
-    @click-overlay="handleClickOverlay">
+    :show-close="showClose && showHeader" :close-position="closePosition" :custom-class="customClass" @open="handleOpen"
+    @opened="handleOpened" @close="handleClose" @closed="handleClosed" @click-overlay="handleClickOverlay">
     <!-- 头部 -->
     <view v-if="showHeader" class="im-modal__header">
       <slot name="header">
@@ -51,86 +50,10 @@ import { ref, computed } from 'vue'
 import type { Popup as PopupType } from 'im-ui-mobile'
 import ImPopup from '../im-popup/im-popup.vue'
 import ImButton from '../im-button/im-button.vue'
-
-// 定义 Props
-interface Props {
-  // 显示控制
-  show?: boolean
-  modelValue?: boolean
-
-  // 标题和内容
-  title?: string
-  subtitle?: string
-  content?: string
-
-  // 头部配置
-  showHeader?: boolean
-  showSubtitle?: boolean
-
-  // 内容配置
-  bodyStyle?: Record<string, string>
-
-  // 底部按钮配置
-  showFooter?: boolean
-  showCancel?: boolean
-  showConfirm?: boolean
-  cancelText?: string
-  confirmText?: string
-  cancelType?: 'default' | 'primary' | 'warning' | 'error'
-  confirmType?: 'default' | 'primary' | 'warning' | 'error'
-  cancelPlain?: boolean
-  confirmPlain?: boolean
-  cancelDisabled?: boolean
-  confirmDisabled?: boolean
-  cancelLoading?: boolean
-  confirmLoading?: boolean
-  buttonSize?: 'small' | 'medium' | 'large'
-
-  // 弹窗配置（传递给 im-popup）
-  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
-  maxWidth?: string
-  minWidth?: string
-  borderRadius?: string
-  backgroundColor?: string
-  zIndex?: number
-  showClose?: boolean
-  closePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
-  safeAreaInsetBottom?: boolean
-  customClass?: string
-
-  // 行为控制
-  closeOnClickAction?: boolean
-  showCloseAfterConfirm?: boolean
-  showCloseAfterCancel?: boolean
-}
-
-// 定义 Emits
-interface Emits {
-  (e: 'update:show', value: boolean): void
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'open'): void
-  (e: 'opened'): void
-  (e: 'close'): void
-  (e: 'closed'): void
-  (e: 'click-overlay'): void
-  (e: 'confirm'): void
-  (e: 'cancel'): void
-  (e: 'before-enter'): void
-  (e: 'after-enter'): void
-  (e: 'before-leave'): void
-  (e: 'after-leave'): void
-}
+import { ModalProps, ModalEmits } from '../../types/components/modal'
 
 // 定义 Props 默认值
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ModalProps>(), {
   show: false,
   modelValue: false,
 
@@ -174,7 +97,6 @@ const props = withDefaults(defineProps<Props>(), {
   zIndex: 1000,
   showClose: true,
   closePosition: 'top-right',
-  safeAreaInsetBottom: true,
   customClass: '',
 
   closeOnClickAction: true,
@@ -182,7 +104,7 @@ const props = withDefaults(defineProps<Props>(), {
   showCloseAfterCancel: true
 })
 
-const emit = defineEmits<Emits>()
+const emit = defineEmits<ModalEmits>()
 
 // 组件引用
 const popupRef = ref<InstanceType<typeof PopupType>>()
@@ -325,7 +247,7 @@ defineExpose({
   }
 
   &__footer {
-    padding: 20rpx 40rpx 40rpx;
+    padding: 40rpx;
 
     &-buttons {
       display: flex;
@@ -335,7 +257,7 @@ defineExpose({
   }
 
   &__button {
-    flex: 1;
+    // flex: 1;
   }
 }
 </style>

package/components/im-popup/im-popup.vue

@@ -10,7 +10,7 @@
         customClass,
         { 'im-popup--hide': !visible },
         { 'im-popup--show': !!visible },
-        { 'im-popup--safe-area': safeAreaInsetBottom }
+        { 'im-popup--safe-area': position == 'bottom' }
     ]" :style="popupStyle" @tap.stop>
         <!-- 关闭按钮 -->
         <view v-if="showClose" class="im-popup__close" :class="`im-popup__close--${closePosition}`" @tap="handleClose">
@@ -29,59 +29,10 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { validator } from '../../index'
-
-// 定义 Props
-interface Props {
-    // 显示控制
-    show?: boolean
-    modelValue?: boolean
-
-    // 位置和动画
-    position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
-    animation?: 'fade' | 'slide' | 'zoom' | 'none'
-    duration?: number
-
-    // 遮罩层
-    showOverlay?: boolean
-    overlayColor?: string
-    overlayOpacity?: number
-    closeOnClickOverlay?: boolean
-    overlayClass?: string
-
-    // 样式
-    width?: string
-    height?: string
-    backgroundColor?: string
-    borderRadius?: number | string
-    zIndex?: number
-
-    // 行为
-    lockScroll?: boolean
-    showClose?: boolean
-    closePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
-    safeAreaInsetBottom?: boolean
-
-    // 自定义类名
-    customClass?: string
-}
-
-// 定义 Emits
-interface Emits {
-    (e: 'update:show', value: boolean): void
-    (e: 'update:modelValue', value: boolean): void
-    (e: 'open'): void
-    (e: 'opened'): void
-    (e: 'close'): void
-    (e: 'closed'): void
-    (e: 'click-overlay'): void
-    (e: 'before-enter'): void
-    (e: 'after-enter'): void
-    (e: 'before-leave'): void
-    (e: 'after-leave'): void
-}
+import { PopupProps, PopupEmits } from '../../types/components/popup'
 
 // 定义 Props 默认值
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<PopupProps>(), {
     show: false,
     modelValue: false,
 
@@ -104,12 +55,11 @@ const props = withDefaults(defineProps<Props>(), {
     lockScroll: true,
     showClose: false,
     closePosition: 'top-right',
-    safeAreaInsetBottom: true,
 
     customClass: ''
 })
 
-const emit = defineEmits<Emits>()
+const emit = defineEmits<PopupEmits>()
 
 // 内部状态
 const internalShow = ref(false)
@@ -160,7 +110,6 @@ const popupStyle = computed(() => {
         style.height = '100%'
     }
 
-
     // 圆角
     switch (props.position) {
         case 'top':
@@ -188,12 +137,12 @@ const popupStyle = computed(() => {
 const handleOverlayTap = () => {
     emit('click-overlay')
     if (props.closeOnClickOverlay) {
-        closePopup()
+        close()
     }
 }
 
 const handleClose = () => {
-    closePopup()
+    close()
 }
 
 const handleTouchMove = (e: Event) => {
@@ -218,7 +167,7 @@ const openPopup = () => {
 }
 
 // 关闭弹窗
-const closePopup = () => {
+const close = () => {
     if (animating.value) return
 
     emit('close')
@@ -241,6 +190,24 @@ const closePopup = () => {
     }, props.duration)
 }
 
+// 打开模态框
+const open = () => {
+    internalShow.value = true
+    emit('update:show', true)
+    emit('update:modelValue', true)
+}
+
+// 切换显示状态
+const toggle = () => {
+    if (visible.value) {
+        close()
+    } else {
+        internalShow.value = true
+        emit('update:show', true)
+        emit('update:modelValue', true)
+    }
+}
+
 // 滚动锁定
 const lockScroll = () => {
     if (typeof document !== 'undefined') {
@@ -293,21 +260,9 @@ onUnmounted(() => {
 
 // 暴露方法
 defineExpose({
-    open: () => {
-        internalShow.value = true
-        emit('update:show', true)
-        emit('update:modelValue', true)
-    },
-    close: closePopup,
-    toggle: () => {
-        if (visible.value) {
-            closePopup()
-        } else {
-            internalShow.value = true
-            emit('update:show', true)
-            emit('update:modelValue', true)
-        }
-    },
+    open,
+    close,
+    toggle,
     state: internalShow.value
 })
 </script>
@@ -442,6 +397,10 @@ defineExpose({
 
         &-icon {
             font-size: 40rpx;
+            /* #ifdef MP-WEIXIN  */
+            font-size: 60rpx;
+            /* #endif */
+
             color: #999;
             line-height: 1;
             font-weight: 300;

package/package.json

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

package/types/components/button.d.ts

@@ -1,11 +1,28 @@
 import { AllowedComponentProps, VNodeProps } from 'vue'
 
+// 定义类型
+declare type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+declare type ButtonSize = 'mini' | 'small' | 'medium' | 'large'
+declare type ButtonShape = 'square' | 'round' | 'circle'
+declare type ButtonFormType = 'submit' | 'reset'
+declare type ButtonOpenType =
+    | 'contact'
+    | 'share'
+    | 'getPhoneNumber'
+    | 'getUserInfo'
+    | 'launchApp'
+    | 'openSetting'
+    | 'feedback'
+    | 'chooseAvatar'
+declare type ButtonIconPosition = 'left' | 'right'
+declare type ButtonTextSize = 'small' | 'medium' | 'large'
+
 declare interface ButtonProps {
     // 基础属性
     text?: string
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'  // 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
-    size?: 'mini' | 'small' | 'medium' | 'large'
-    shape?: 'square' | 'round' | 'circle'
+    type?: ButtonType
+    size?: ButtonSize
+    shape?: ButtonShape
     disabled?: boolean
     loading?: boolean
     loadingText?: string
@@ -19,7 +36,7 @@ declare interface ButtonProps {
 
     // 图标
     icon?: string
-    iconPosition?: 'left' | 'right'
+    iconPosition?: ButtonIconPosition
     iconSize?: string | number
 
     // 样式
@@ -28,7 +45,7 @@ declare interface ButtonProps {
     borderColor?: string
     border?: boolean
     textColor?: string
-    textSize?: 'small' | 'medium' | 'large'
+    textSize?: ButtonTextSize
     width?: string
     height?: string
     padding?: string
@@ -40,18 +57,10 @@ declare interface ButtonProps {
     badge?: boolean | number | string
 
     // 表单相关
-    formType?: 'submit' | 'reset'
+    formType?: ButtonFormType
 
     // 开放能力
-    openType?:
-    | 'contact'
-    | 'share'
-    | 'getPhoneNumber'
-    | 'getUserInfo'
-    | 'launchApp'
-    | 'openSetting'
-    | 'feedback'
-    | 'chooseAvatar'
+    openType?: ButtonOpenType
     appParameter?: string
     lang?: 'en' | 'zh_CN' | 'zh_TW'
     sessionFrom?: string
@@ -67,7 +76,7 @@ declare interface ButtonProps {
 }
 
 declare interface ButtonEmits {
-    (e: 'click', event: TouchEvent): void
+    (e: 'click', event: PointerEvent): void
     (e: 'getuserinfo', detail: any): void
     (e: 'contact', detail: any): void
     (e: 'getphonenumber', detail: any): void
@@ -89,6 +98,13 @@ export declare const Button: _Button
 export default Button
 
 export type {
+    ButtonType,
+    ButtonSize,
+    ButtonShape,
+    ButtonFormType,
+    ButtonOpenType,
+    ButtonIconPosition,
+    ButtonTextSize,
     ButtonProps,
     ButtonEmits
 }

package/types/components/modal.d.ts

@@ -1,11 +1,9 @@
 import { AllowedComponentProps, VNodeProps } from '../common'
+import { PopupProps, PopupEmits, PopupMethods } from './popup'
+import type { ButtonType, ButtonSize } from './button'
 
 // 模态框组件 Props
-declare interface ModalProps {
-    // 显示控制
-    show?: boolean
-    modelValue?: boolean
-
+declare interface ModalProps extends PopupProps {
     // 标题和内容
     title?: string
     subtitle?: string
@@ -24,35 +22,19 @@ declare interface ModalProps {
     showConfirm?: boolean
     cancelText?: string
     confirmText?: string
-    cancelType?: 'default' | 'primary' | 'warning' | 'error'
-    confirmType?: 'default' | 'primary' | 'warning' | 'error'
+    cancelType?: ButtonType // 'default' | 'primary' | 'warning' | 'error'
+    confirmType?:ButtonType// 'default' | 'primary' | 'warning' | 'error'
     cancelPlain?: boolean
     confirmPlain?: boolean
     cancelDisabled?: boolean
     confirmDisabled?: boolean
     cancelLoading?: boolean
     confirmLoading?: boolean
-    buttonSize?: 'small' | 'medium' | 'large'
+    buttonSize?: 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
     maxWidth?: string
     minWidth?: string
-    borderRadius?: string
-    backgroundColor?: string
-    zIndex?: number
-    showClose?: boolean
-    closePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
-    safeAreaInsetBottom?: boolean
-    customClass?: string
 
     // 行为控制
     closeOnClickAction?: boolean
@@ -61,31 +43,12 @@ declare interface ModalProps {
 }
 
 // 模态框组件方法
-declare interface ModalMethods {
-    // 打开模态框
-    open: () => void
-
-    // 关闭模态框
-    close: () => void
-
-    // 切换显示状态
-    toggle: () => void
+declare interface ModalMethods extends PopupMethods {
 }
 
-declare interface ModalEmits {
-    'update:show': (value: boolean) => void
-    'update:modelValue': (value: boolean) => void
-    'open': () => void
-    'opened': () => void
-    'close': () => void
-    'closed': () => void
-    'click-overlay': () => void
-    'confirm': () => void
-    'cancel': () => void
-    'before-enter': () => void
-    'after-enter': () => void
-    'before-leave': () => void
-    'after-leave': () => void
+declare interface ModalEmits extends PopupEmits {
+    (e: 'confirm')
+    (e: 'cancel')
 }
 
 declare interface _Modal {

package/types/components/popup.d.ts

@@ -21,31 +21,41 @@ declare interface PopupProps {
     width?: string
     height?: string
     backgroundColor?: string
-    borderRadius?: string
+    borderRadius?: number | string
     zIndex?: number
 
     // 行为
     lockScroll?: boolean
     showClose?: boolean
     closePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
-    safeAreaInsetBottom?: boolean
 
     // 自定义
     customClass?: string
 }
 
 declare interface PopupEmits {
-    'update:show': (value: boolean) => void
-    'update:modelValue': (value: boolean) => void
-    'open': () => void
-    'opened': () => void
-    'close': () => void
-    'closed': () => void
-    'click-overlay': () => void
-    'before-enter': () => void
-    'after-enter': () => void
-    'before-leave': () => void
-    'after-leave': () => void
+    (e: 'update:show', value: boolean)
+    (e: 'update:modelValue', value: boolean)
+    (e: 'open')
+    (e: 'opened')
+    (e: 'close')
+    (e: 'closed')
+    (e: 'click-overlay')
+    (e: 'before-enter')
+    (e: 'after-enter')
+    (e: 'before-leave')
+    (e: 'after-leave')
+}
+
+declare interface PopupMethods {
+    // 打开模态框
+    open: () => void
+
+    // 关闭模态框
+    close: () => void
+
+    // 切换显示状态
+    toggle: () => void
 }
 
 declare interface _Popup {
@@ -61,5 +71,6 @@ export default Popup
 
 export type {
     PopupProps,
-    PopupEmits
+    PopupEmits,
+    PopupMethods
 }