uview-pro 0.0.7 → 0.0.8

package/components/u-link/u-link.vue

@@ -15,6 +15,7 @@
 
 <script setup lang="ts">
 import { $u } from '../..';
+import { LinkProps } from './types';
 
 defineOptions({
     name: 'u-link'
@@ -32,20 +33,7 @@ defineOptions({
  * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
  * @example <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>
  */
-const props = defineProps({
-    /** 文字颜色 */
-    color: { type: String, default: '#2979ff' },
-    /** 字体大小，单位rpx */
-    fontSize: { type: [String, Number], default: 28 },
-    /** 是否显示下划线 */
-    underLine: { type: Boolean, default: false },
-    /** 要跳转的链接 */
-    href: { type: String, default: '' },
-    /** 小程序中复制到粘贴板的提示语 */
-    mpTips: { type: String, default: '链接已复制，请在浏览器打开' },
-    /** 下划线颜色 */
-    lineColor: { type: String, default: '' }
-});
+const props = defineProps(LinkProps);
 
 /**
  * 打开链接方法

package/components/u-loading/types.ts

@@ -0,0 +1,35 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+type LoadingMode = 'circle' | 'flower';
+
+/**
+ * u-loading 组件 props 类型定义
+ * @description 加载动画，支持多种模式
+ */
+export const LoadingProps = {
+    /** 动画的类型 */
+    mode: {
+        type: String as PropType<LoadingMode>,
+        default: 'circle'
+    },
+    /** 动画的颜色 */
+    color: {
+        type: String,
+        default: '#c7c7c7'
+    },
+    /** 加载图标的大小，单位rpx */
+    size: {
+        type: [String, Number] as PropType<string | number>,
+        default: '34'
+    },
+    /** 是否显示动画 */
+    show: {
+        type: Boolean,
+        default: true
+    }
+};
+
+/**
+ * u-loading 组件 props 类型
+ */
+export type LoadingProps = ExtractPropTypes<typeof LoadingProps>;

package/components/u-loading/u-loading.vue

@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { LoadingProps } from './types';
 
 defineOptions({
     name: 'u-loading'
@@ -19,29 +20,7 @@ defineOptions({
  * @property {Boolean} show 是否显示动画（默认true）
  * @example <u-loading mode="circle"></u-loading>
  */
-
-const props = defineProps({
-    /**
-     * 动画的类型
-     * @default 'circle'
-     */
-    mode: { type: String, default: 'circle' },
-    /**
-     * 动画的颜色
-     * @default '#c7c7c7'
-     */
-    color: { type: String, default: '#c7c7c7' },
-    /**
-     * 加载图标的大小，单位rpx
-     * @default '34'
-     */
-    size: { type: [String, Number], default: '34' },
-    /**
-     * 是否显示动画
-     * @default true
-     */
-    show: { type: Boolean, default: true }
-});
+const props = defineProps(LoadingProps);
 
 /**
  * 加载中圆圈动画的样式

package/components/u-loadmore/types.ts

@@ -0,0 +1,79 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { LoadmoreIconType, LoadmoreStatus, LoadmoreText } from '../../types/global';
+
+/**
+ * u-loadmore 组件 props 类型定义
+ * @description 加载更多，支持多种状态和自定义文字
+ */
+
+export const LoadmoreProps = {
+    /** 组件背景色 */
+    bgColor: {
+        type: String,
+        default: 'transparent'
+    },
+    /** 是否显示加载中的图标 */
+    icon: {
+        type: Boolean,
+        default: true
+    },
+    /** 字体大小 */
+    fontSize: {
+        type: String,
+        default: '28'
+    },
+    /** 字体颜色 */
+    color: {
+        type: String,
+        default: '#606266'
+    },
+    /** 组件状态，loadmore-加载前，loading-加载中，nomore-没有更多 */
+    status: {
+        type: String as PropType<LoadmoreStatus>,
+        default: 'loadmore'
+    },
+    /** 加载中状态的图标，flower-花朵状，circle-圆圈状 */
+    iconType: {
+        type: String as PropType<LoadmoreIconType>,
+        default: 'circle'
+    },
+    /** 显示的文字 */
+    loadText: {
+        type: Object as PropType<LoadmoreText>,
+        default: () => ({
+            loadmore: '加载更多',
+            loading: '正在加载...',
+            nomore: '没有更多了'
+        })
+    },
+    /** 在“没有更多”状态下，是否显示粗点 */
+    isDot: {
+        type: Boolean,
+        default: false
+    },
+    /** 加载中显示圆圈动画时，动画的颜色 */
+    iconColor: {
+        type: String,
+        default: '#b7b7b7'
+    },
+    /** 上边距 */
+    marginTop: {
+        type: [String, Number] as PropType<string | number>,
+        default: 0
+    },
+    /** 下边距 */
+    marginBottom: {
+        type: [String, Number] as PropType<string | number>,
+        default: 0
+    },
+    /** 高度，单位rpx */
+    height: {
+        type: [String, Number] as PropType<string | number>,
+        default: 'auto'
+    }
+};
+
+/**
+ * u-loadmore 组件 props 类型
+ */
+export type LoadmoreProps = ExtractPropTypes<typeof LoadmoreProps>;

package/components/u-loadmore/u-loadmore.vue

@@ -31,6 +31,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { $u } from '../..';
+import { LoadmoreProps } from './types';
 
 defineOptions({ name: 'u-loadmore' });
 
@@ -51,73 +52,7 @@ defineOptions({ name: 'u-loadmore' });
  * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
  * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
  */
-const props = defineProps({
-    // 组件背景色
-    bgColor: {
-        type: String,
-        default: 'transparent'
-    },
-    // 是否显示加载中的图标
-    icon: {
-        type: Boolean,
-        default: true
-    },
-    // 字体大小
-    fontSize: {
-        type: String,
-        default: '28'
-    },
-    // 字体颜色
-    color: {
-        type: String,
-        default: '#606266'
-    },
-    // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
-    status: {
-        type: String,
-        default: 'loadmore'
-    },
-    // 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
-    iconType: {
-        type: String,
-        default: 'circle'
-    },
-    // 显示的文字
-    loadText: {
-        type: Object as () => { loadmore: string; loading: string; nomore: string },
-        default: () => ({
-            loadmore: '加载更多',
-            loading: '正在加载...',
-            nomore: '没有更多了'
-        })
-    },
-    // 在“没有更多”状态下，是否显示粗点
-    isDot: {
-        type: Boolean,
-        default: false
-    },
-    // 加载中显示圆圈动画时，动画的颜色
-    iconColor: {
-        type: String,
-        default: '#b7b7b7'
-    },
-    // 上边距
-    marginTop: {
-        type: [String, Number],
-        default: 0
-    },
-    // 下边距
-    marginBottom: {
-        type: [String, Number],
-        default: 0
-    },
-    // 高度，单位rpx
-    height: {
-        type: [String, Number],
-        default: 'auto'
-    }
-});
-
+const props = defineProps(LoadmoreProps);
 const emits = defineEmits(['loadmore']);
 
 // 粗点

package/components/u-mask/types.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-mask 组件 props 类型定义
+ * @description 遮罩层，支持自定义样式、缩放、动画等
+ */
+export const MaskProps = {
+    /** 是否显示遮罩 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 层级z-index */
+    zIndex: {
+        type: [Number, String] as PropType<number | string>,
+        default: ''
+    },
+    /** 用户自定义样式 */
+    customStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 遮罩的动画样式，是否使用zoom进行scale进行缩放 */
+    zoom: {
+        type: Boolean,
+        default: true
+    },
+    /** 遮罩的过渡时间，单位为ms */
+    duration: {
+        type: [Number, String] as PropType<number | string>,
+        default: 300
+    },
+    /** 是否可以通过点击遮罩进行关闭 */
+    maskClickAble: {
+        type: Boolean,
+        default: true
+    }
+};
+
+/**
+ * u-mask 组件 props 类型
+ */
+export type MaskProps = ExtractPropTypes<typeof MaskProps>;

package/components/u-mask/u-mask.vue

@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
 import { $u } from '../..';
+import { MaskProps } from './types';
 
 defineOptions({ name: 'u-mask' });
 
@@ -33,39 +34,7 @@ defineOptions({ name: 'u-mask' });
  * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
  * @example <u-mask :show="show" @click="show = false"></u-mask>
  */
-const props = defineProps({
-    // 是否显示遮罩
-    show: {
-        type: Boolean,
-        default: false
-    },
-    // 层级z-index
-    zIndex: {
-        type: [Number, String],
-        default: ''
-    },
-    // 用户自定义样式
-    customStyle: {
-        type: Object,
-        default: () => ({})
-    },
-    // 遮罩的动画样式， 是否使用zoom进行scale进行缩放
-    zoom: {
-        type: Boolean,
-        default: true
-    },
-    // 遮罩的过渡时间，单位为ms
-    duration: {
-        type: [Number, String],
-        default: 300
-    },
-    // 是否可以通过点击遮罩进行关闭
-    maskClickAble: {
-        type: Boolean,
-        default: true
-    }
-});
-
+const props = defineProps(MaskProps);
 const emit = defineEmits(['click']);
 
 // 缩放动画样式

package/components/u-message-input/types.ts

@@ -0,0 +1,74 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { MessageInputMode } from '../../types/global';
+
+/**
+ * u-message-input 组件 props 类型定义
+ * @description 验证码/短信输入框，支持多种样式
+ */
+export const MessageInputProps = {
+    /** 最大输入长度 */
+    maxlength: {
+        type: [Number, String] as PropType<number | string>,
+        default: 4
+    },
+    /** 是否用圆点填充 */
+    dotFill: {
+        type: Boolean,
+        default: false
+    },
+    /** 显示模式，box-盒子，bottomLine-底部横线，middleLine-中部横线 */
+    mode: {
+        type: String as PropType<MessageInputMode>,
+        default: 'box'
+    },
+    /** 预置值 */
+    value: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    /** 当前激活输入item，是否带有呼吸效果 */
+    breathe: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否自动获取焦点 */
+    focus: {
+        type: Boolean,
+        default: false
+    },
+    /** 字体是否加粗 */
+    bold: {
+        type: Boolean,
+        default: false
+    },
+    /** 字体大小 */
+    fontSize: {
+        type: [String, Number] as PropType<string | number>,
+        default: 60
+    },
+    /** 激活样式 */
+    activeColor: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 未激活的样式 */
+    inactiveColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** 输入框的大小，单位rpx，宽等于高 */
+    width: {
+        type: [Number, String] as PropType<number | string>,
+        default: '80'
+    },
+    /** 是否隐藏原生键盘 */
+    disabledKeyboard: {
+        type: Boolean,
+        default: false
+    }
+};
+
+/**
+ * u-message-input 组件 props 类型
+ */
+export type MessageInputProps = ExtractPropTypes<typeof MessageInputProps>;

package/components/u-message-input/u-message-input.vue

@@ -57,6 +57,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
+import { MessageInputProps } from './types';
 
 defineOptions({ name: 'u-message-input' });
 
@@ -80,68 +81,7 @@ defineOptions({ name: 'u-message-input' });
  * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
  * @example <u-message-input mode="bottomLine"></u-message-input>
  */
-const props = defineProps({
-    // 最大输入长度
-    maxlength: {
-        type: [Number, String],
-        default: 4
-    },
-    // 是否用圆点填充
-    dotFill: {
-        type: Boolean,
-        default: false
-    },
-    // 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
-    mode: {
-        type: String,
-        default: 'box'
-    },
-    // 预置值
-    value: {
-        type: [String, Number],
-        default: ''
-    },
-    // 当前激活输入item，是否带有呼吸效果
-    breathe: {
-        type: Boolean,
-        default: true
-    },
-    // 是否自动获取焦点
-    focus: {
-        type: Boolean,
-        default: false
-    },
-    // 字体是否加粗
-    bold: {
-        type: Boolean,
-        default: false
-    },
-    // 字体大小
-    fontSize: {
-        type: [String, Number],
-        default: 60
-    },
-    // 激活样式
-    activeColor: {
-        type: String,
-        default: '#2979ff'
-    },
-    // 未激活的样式
-    inactiveColor: {
-        type: String,
-        default: '#606266'
-    },
-    // 输入框的大小，单位rpx，宽等于高
-    width: {
-        type: [Number, String],
-        default: '80'
-    },
-    // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
-    disabledKeyboard: {
-        type: Boolean,
-        default: false
-    }
-});
+const props = defineProps(MessageInputProps);
 
 const emit = defineEmits(['change', 'finish']);
 

package/components/u-modal/types.ts

@@ -0,0 +1,118 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-modal 组件 props 类型定义
+ * @description 弹窗模态框，支持多种样式和交互
+ */
+export const ModalProps = {
+    /** 是否显示模态框 */
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    /** 层级z-index */
+    zIndex: {
+        type: [Number, String] as PropType<number | string>,
+        default: ''
+    },
+    /** 标题 */
+    title: {
+        type: String,
+        default: '提示'
+    },
+    /** 弹窗宽度 */
+    width: {
+        type: [Number, String] as PropType<number | string>,
+        default: 600
+    },
+    /** 弹窗内容 */
+    content: {
+        type: String,
+        default: '内容'
+    },
+    /** 是否显示标题 */
+    showTitle: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示确认按钮 */
+    showConfirmButton: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示取消按钮 */
+    showCancelButton: {
+        type: Boolean,
+        default: false
+    },
+    /** 确认文案 */
+    confirmText: {
+        type: String,
+        default: '确认'
+    },
+    /** 取消文案 */
+    cancelText: {
+        type: String,
+        default: '取消'
+    },
+    /** 确认按钮颜色 */
+    confirmColor: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 取消文字颜色 */
+    cancelColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** 圆角值 */
+    borderRadius: {
+        type: [Number, String] as PropType<number | string>,
+        default: 16
+    },
+    /** 标题的样式 */
+    titleStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 内容的样式 */
+    contentStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 取消按钮的样式 */
+    cancelStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 确定按钮的样式 */
+    confirmStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 是否开启缩放效果 */
+    zoom: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否异步关闭，只对确定按钮有效 */
+    asyncClose: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否允许点击遮罩关闭modal */
+    maskCloseAble: {
+        type: Boolean,
+        default: false
+    },
+    /** 给一个负的margin-top，往上偏移，避免和键盘重合的情况 */
+    negativeTop: {
+        type: [String, Number] as PropType<number | string>,
+        default: 0
+    }
+};
+
+/**
+ * u-modal 组件 props 类型
+ */
+export type ModalProps = ExtractPropTypes<typeof ModalProps>;