uview-pro 0.0.7 → 0.0.8

package/components/u-tag/u-tag.vue

@@ -15,6 +15,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { TagProps } from './types';
 
 defineOptions({
     name: 'u-tag'
@@ -45,34 +46,7 @@ const emit = defineEmits<{
     (e: 'close', index: string | number): void;
 }>();
 
-const props = defineProps({
-    /** 标签类型 info、primary、success、warning、error */
-    type: { type: String, default: 'primary' },
-    /** 是否禁用这个标签，禁用的话，会屏蔽点击事件 */
-    disabled: { type: [Boolean, String], default: false },
-    /** 标签的大小，分为default（默认），mini（较小） */
-    size: { type: String, default: 'default' },
-    /** tag的形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边是半圆），circleRight（右边是半圆） */
-    shape: { type: String, default: 'square' },
-    /** 标签文字 */
-    text: { type: [String, Number], default: '' },
-    /** 背景颜色，默认为空字符串，即不处理 */
-    bgColor: { type: String, default: '' },
-    /** 标签字体颜色，默认为空字符串，即不处理 */
-    color: { type: String, default: '' },
-    /** 镂空形式标签的边框颜色 */
-    borderColor: { type: String, default: '' },
-    /** 关闭按钮图标的颜色 */
-    closeColor: { type: String, default: '' },
-    /** 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了 */
-    index: { type: [Number, String], default: '' },
-    /** 模式选择，dark|light|plain */
-    mode: { type: String, default: 'light' },
-    /** 是否可关闭 */
-    closeable: { type: Boolean, default: false },
-    /** 是否显示 */
-    show: { type: Boolean, default: true }
-});
+const props = defineProps(TagProps);
 
 /**
  * 计算 tag 的自定义样式

package/components/u-td/types.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * TdProps td props 类型定义
+ * @description 表格单元格组件，支持宽度自定义
+ */
+export const TdProps = {
+    /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
+    width: { type: [Number, String] as PropType<number | string>, default: 'auto' }
+};
+
+export type TdProps = ExtractPropTypes<typeof TdProps>;

package/components/u-td/u-td.vue

@@ -7,6 +7,7 @@
 <script setup lang="ts">
 import { ref, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { TdProps } from './types';
 
 defineOptions({ name: 'u-td' });
 
@@ -18,15 +19,7 @@ defineOptions({ name: 'u-td' });
  * @example <u-td>二年级</u-td>
  */
 
-const props = defineProps({
-    /**
-     * 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
-     */
-    width: {
-        type: [Number, String],
-        default: 'auto'
-    }
-});
+const props = defineProps(TdProps);
 
 /**
  * 组合式API变量声明

package/components/u-th/types.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * ThProps th props 类型定义
+ * @description 表格表头单元格组件，支持宽度自定义
+ */
+export const ThProps = {
+    /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
+    width: { type: [Number, String] as PropType<number | string>, default: '' }
+};
+
+export type ThProps = ExtractPropTypes<typeof ThProps>;

package/components/u-th/u-th.vue

@@ -7,6 +7,7 @@
 <script setup lang="ts">
 import { ref, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { ThProps } from './types';
 
 defineOptions({ name: 'u-th' });
 
@@ -18,15 +19,7 @@ defineOptions({ name: 'u-th' });
  * @example 暂无示例
  */
 
-const props = defineProps({
-    /**
-     * 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
-     */
-    width: {
-        type: [Number, String],
-        default: ''
-    }
-});
+const props = defineProps(ThProps);
 
 const thStyle = ref<Record<string, any>>({}); // 标题单元格样式
 let parent: any = null; // 父组件实例

package/components/u-time-line-item/types.ts

@@ -0,0 +1,14 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * TimeLineItemProps 时间轴节点 props 类型定义
+ * @description 时间轴节点组件，支持自定义节点颜色、位置
+ */
+export const TimeLineItemProps = {
+    /** 节点的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 节点左边图标绝对定位的top值，单位rpx */
+    nodeTop: { type: [String, Number] as PropType<string | number>, default: '' }
+};
+
+export type TimeLineItemProps = ExtractPropTypes<typeof TimeLineItemProps>;

package/components/u-time-line-item/u-time-line-item.vue

@@ -11,6 +11,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { TimeLineItemProps } from './types';
 
 defineOptions({ name: 'u-time-line-item' });
 
@@ -27,18 +28,7 @@ defineOptions({ name: 'u-time-line-item' });
  * 节点的背景颜色
  * @default "#ffffff"
  */
-const props = defineProps({
-    /** 节点的背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** 节点左边图标绝对定位的top值，单位rpx */
-    nodeTop: {
-        type: [String, Number],
-        default: ''
-    }
-});
+const props = defineProps(TimeLineItemProps);
 
 /**
  * 计算节点样式

package/components/u-toast/types.ts

@@ -1,4 +1,36 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ThemeType, ToastPosition } from '../../types/global';
+
+/**
+ * ToastProps toast props 类型定义
+ * @description 消息提示组件，支持 z-index 及多种配置项
+ */
+export const ToastProps = {
+    /** 层级 z-index */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 提示类型，success/warning/error/loading 等 */
+    type: { type: String as PropType<ThemeType | 'default'>, default: '' },
+    /** 显示时长，单位ms */
+    duration: { type: Number, default: 2000 },
+    /** 是否显示图标 */
+    icon: { type: Boolean, default: true },
+    /** 显示位置，center/top/bottom */
+    position: { type: String as PropType<ToastPosition>, default: 'center' },
+    /** 关闭时的回调函数 */
+    callback: { type: Function as PropType<(() => void) | null>, default: null },
+    /** 是否返回上一页 */
+    back: { type: Boolean, default: false },
+    /** 是否为tab页面跳转 */
+    isTab: { type: Boolean, default: false },
+    /** 跳转的url */
+    url: { type: String, default: '' },
+    /** 跳转参数对象 */
+    params: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type ToastProps = ExtractPropTypes<typeof ToastProps>;
+
 export type ToastExpose = {
-  show: (options: Record<string, any>) => void
-  hide: () => void
-}
+    show: (options: Record<string, any>) => void;
+    hide: () => void;
+};

package/components/u-toast/u-toast.vue

@@ -17,6 +17,7 @@
 import { ref, computed } from 'vue';
 import { $u } from '../..';
 import type { ToastExpose } from './types';
+import { ToastProps } from './types';
 
 defineOptions({
     name: 'u-toast'
@@ -30,13 +31,7 @@ defineOptions({
  * @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用
  * @example <u-toast ref="uToast" />
  */
-const props = defineProps({
-    /** z-index值 */
-    zIndex: {
-        type: [Number, String],
-        default: ''
-    }
-});
+const props = defineProps(ToastProps);
 
 // 是否显示toast
 const isShow = ref(false);

package/components/u-top-tips/types.ts

@@ -0,0 +1,14 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * TopTipsProps top-tips props 类型定义
+ * @description 顶部提示组件，支持导航栏高度、z-index
+ */
+export const TopTipsProps = {
+    /** 导航栏高度，用于提示的初始化 */
+    navbarHeight: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** z-index值 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: '' }
+};
+
+export type TopTipsProps = ExtractPropTypes<typeof TopTipsProps>;

package/components/u-top-tips/u-top-tips.vue

@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { $u } from '../..';
+import { TopTipsProps } from './types';
 
 defineOptions({ name: 'u-top-tips' });
 
@@ -17,27 +18,7 @@ defineOptions({ name: 'u-top-tips' });
  * @example <u-top-tips ref="uTips"></u-top-tips>
  */
 
-const props = defineProps({
-    /** 导航栏高度，用于提示的初始化 */
-    navbarHeight: {
-        type: [Number, String],
-        default() {
-            let result = 0;
-            // #ifndef H5
-            result = 0;
-            // #endif
-            // #ifdef H5
-            result = 44;
-            // #endif
-            return result;
-        }
-    },
-    /** z-index值 */
-    zIndex: {
-        type: [Number, String],
-        default: ''
-    }
-});
+const props = defineProps(TopTipsProps);
 
 let timer: number | null = null; // 定时器
 const isShow = ref(false); // 是否显示消息组件
@@ -47,8 +28,22 @@ const duration = ref(2000); // 组件显示的时间，单位为毫秒
 
 const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.topTips));
 
+const uNavbarHeight = computed(() => {
+    if (props.navbarHeight) {
+        return props.navbarHeight;
+    }
+    let height = 0;
+    // #ifndef H5
+    height = 0;
+    // #endif
+    // #ifdef H5
+    height = 44;
+    // #endif
+    return height;
+});
+
 const tipStyle = computed(() => ({
-    top: Number(props.navbarHeight) + 'px',
+    top: Number(uNavbarHeight.value) + 'px',
     zIndex: uZIndex.value
 }));
 

package/components/u-tr/types.ts

@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * TrProps tr props 类型定义
+ * @description 表格行组件，无特殊 props
+ */
+export const TrProps = {};
+export type TrProps = ExtractPropTypes<typeof TrProps>;

package/components/u-tr/u-tr.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script setup lang="ts">
+import { TrProps } from './types';
+
 defineOptions({ name: 'u-tr' });
 
 /**
@@ -13,6 +15,7 @@ defineOptions({ name: 'u-tr' });
  * @tutorial https://uview-pro.netlify.app/components/table.html
  * @example <u-tr></u-tr>
  */
+const props = defineProps(TrProps);
 </script>
 
 <style lang="scss" scoped>

package/components/u-upload/types.ts

@@ -0,0 +1,71 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ImgMode, UploadSizeType, UploadSourceType } from '../../types/global';
+
+/**
+ * UploadProps upload props 类型定义
+ * @description 文件上传组件，支持多种自定义参数
+ */
+export const UploadProps = {
+    /** 选择器宽度，单位rpx */
+    width: { type: [Number, String] as PropType<number | string>, default: 80 },
+    /** 选择器高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 80 },
+    /** 最大上传数量 */
+    maxCount: { type: [Number, String] as PropType<number | string>, default: 9 },
+    /** 是否可删除 */
+    deletable: { type: Boolean, default: true },
+    /** 是否显示上传列表 */
+    showUploadList: { type: Boolean, default: true },
+    /** 是否显示上传进度 */
+    showProgress: { type: Boolean, default: true },
+    /** 删除按钮背景色 */
+    delBgColor: { type: String, default: '#f56c6c' },
+    /** 删除按钮图标 */
+    delIcon: { type: String, default: 'close' },
+    /** 删除按钮颜色 */
+    delColor: { type: String, default: '#fff' },
+    /** 图片裁剪模式 */
+    imageMode: { type: String as PropType<ImgMode>, default: 'aspectFill' },
+    /** 是否自定义上传按钮 */
+    customBtn: { type: Boolean, default: false },
+    /** 上传按钮文字 */
+    uploadText: { type: String, default: '上传' },
+    /** 上传地址 */
+    action: { type: String, default: '' },
+    /** 是否禁用 */
+    disabled: { type: Boolean, default: false },
+    /** 索引值 */
+    index: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 请求头对象 */
+    header: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** formData对象 */
+    formData: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 文件字段名 */
+    name: { type: String, default: 'file' },
+    /** 压缩/原图，微信小程序有效 */
+    sizeType: { type: Array as PropType<UploadSizeType[]>, default: () => ['original', 'compressed'] },
+    /** 来源，相册/相机 */
+    sourceType: { type: Array as PropType<UploadSourceType[]>, default: () => ['album', 'camera'] },
+    /** 是否可预览大图 */
+    previewFullImage: { type: Boolean, default: true },
+    /** 是否支持多选 */
+    multiple: { type: Boolean, default: true },
+    /** 单个文件最大大小，单位B */
+    maxSize: { type: [Number, String] as PropType<number | string>, default: Number.MAX_VALUE },
+    /** 文件列表 */
+    fileList: { type: Array as PropType<any[]>, default: () => [] },
+    /** 限制文件类型 */
+    limitType: { type: Array as PropType<string[]>, default: () => [] },
+    /** 是否自动上传 */
+    autoUpload: { type: Boolean, default: true },
+    /** 是否显示提示 */
+    showTips: { type: Boolean, default: true },
+    /** 上传前钩子，返回true或Promise */
+    beforeUpload: { type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>, default: null },
+    /** 删除前钩子，返回true或Promise */
+    beforeRemove: { type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>, default: null },
+    /** 是否转为json格式 */
+    toJson: { type: Boolean, default: false }
+};
+
+export type UploadProps = ExtractPropTypes<typeof UploadProps>;

package/components/u-upload/u-upload.vue

@@ -53,6 +53,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { $u } from '../..';
+import { UploadProps } from './types';
 
 defineOptions({
     name: 'u-upload'
@@ -100,69 +101,7 @@ defineOptions({
  * @example <u-upload :action="action" :file-list="fileList" ></u-upload>
  */
 
-const props = defineProps({
-    //是否显示组件自带的图片预览功能
-    showUploadList: { type: Boolean, default: true },
-    // 后端地址
-    action: { type: String, default: '' },
-    // 最大上传数量
-    maxCount: { type: [String, Number], default: 52 },
-    //  是否显示进度条
-    showProgress: { type: Boolean, default: true },
-    // 是否启用
-    disabled: { type: Boolean, default: false },
-    // 预览上传的图片时的裁剪模式，和image组件mode属性一致
-    imageMode: { type: String, default: 'aspectFill' },
-    // 头部信息
-    header: { type: Object, default: () => ({}) },
-    // 额外携带的参数
-    formData: { type: Object, default: () => ({}) },
-    // 上传的文件字段名
-    name: { type: String, default: 'file' },
-    // 所选的图片的尺寸, 可选值为original compressed
-    sizeType: { type: Array, default: () => ['original', 'compressed'] },
-    sourceType: { type: Array, default: () => ['album', 'camera'] },
-    // 是否在点击预览图后展示全屏图片预览
-    previewFullImage: { type: Boolean, default: true },
-    // 是否开启图片多选，部分安卓机型不支持
-    multiple: { type: Boolean, default: true },
-    // 是否展示删除按钮
-    deletable: { type: Boolean, default: true },
-    // 文件大小限制，单位为byte
-    maxSize: { type: [String, Number], default: Number.MAX_VALUE },
-    // 显示已上传的文件列表
-    fileList: { type: Array, default: () => [] },
-    // 上传区域的提示文字
-    uploadText: { type: String, default: '选择图片' },
-    // 是否自动上传
-    autoUpload: { type: Boolean, default: true },
-    // 是否显示toast消息提示
-    showTips: { type: Boolean, default: true },
-    // 是否通过slot自定义传入选择图标的按钮
-    customBtn: { type: Boolean, default: false },
-    // 内部预览图片区域和选择图片按钮的区域宽度
-    width: { type: [String, Number], default: 200 },
-    // 内部预览图片区域和选择图片按钮的区域高度
-    height: { type: [String, Number], default: 200 },
-    // 右上角关闭按钮的背景颜色
-    delBgColor: { type: String, default: '#fa3534' },
-    // 右上角关闭按钮的叉号图标的颜色
-    delColor: { type: String, default: '#ffffff' },
-    // 右上角删除图标名称，只能为uView内置图标
-    delIcon: { type: String, default: 'close' },
-    // 如果上传后的返回值为json字符串，是否自动转json
-    toJson: { type: Boolean, default: true },
-    // 上传前的钩子，每个文件上传前都会执行
-    beforeUpload: { type: Function, default: null },
-    // 移除文件前的钩子
-    beforeRemove: { type: Function, default: null },
-    // 允许上传的图片后缀
-    // 支付宝小程序真机选择图片的后缀为"image"
-    // https://opendocs.alipay.com/mini/api/media-image
-    limitType: { type: Array, default: () => ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'] },
-    // 在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件
-    index: { type: [Number, String], default: '' }
-});
+const props = defineProps(UploadProps);
 
 const emit = defineEmits([
     'on-list-change',
@@ -320,8 +259,8 @@ async function uploadFile(index = 0) {
         // 明白意思即可，无需纠结this.$u.$parent.call(this)的细节
         let beforeResponse = props.beforeUpload(index, lists.value);
         // 判断是否返回了promise
-        if (!!beforeResponse && typeof beforeResponse.then === 'function') {
-            await beforeResponse
+        if (typeof beforeResponse === 'object' && beforeResponse !== null && typeof (beforeResponse as Promise<any>).then === 'function') {
+            await (beforeResponse as Promise<any>)
                 .then(() => {
                     // promise返回成功，不进行动作，继续上传
                 })
@@ -410,8 +349,8 @@ function deleteItem(index: number) {
                     // 此处钩子执行 原理同before-remove参数，见上方注释
                     let beforeResponse = props.beforeRemove(index, lists.value);
                     // 判断是否返回了promise
-                    if (!!beforeResponse && typeof beforeResponse.then === 'function') {
-                        await beforeResponse
+                    if (typeof beforeResponse === 'object' && beforeResponse !== null && typeof (beforeResponse as Promise<any>).then === 'function') {
+                        await (beforeResponse as Promise<any>)
                             .then(() => {
                                 // promise返回成功，不进行动作，继续上传
                                 handlerDeleteItem(index);

package/components/u-verification-code/types.ts

@@ -0,0 +1,22 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * VerificationCodeProps 验证码输入框 props 类型定义
+ * @description 验证码输入倒计时组件
+ */
+export const VerificationCodeProps = {
+    /** 倒计时时长，单位秒 */
+    seconds: { type: [String, Number] as PropType<string | number>, default: 60 },
+    /** 开始时按钮文字 */
+    startText: { type: String, default: '获取验证码' },
+    /** 倒计时进行中按钮文字，X为剩余秒数 */
+    changeText: { type: String, default: 'X秒重新获取' },
+    /** 结束时按钮文字 */
+    endText: { type: String, default: '重新获取' },
+    /** 是否保持倒计时不中断（如页面切换） */
+    keepRunning: { type: Boolean, default: false },
+    /** 唯一标识key，用于区分多个验证码组件 */
+    uniqueKey: { type: String, default: '' }
+};
+
+export type VerificationCodeProps = ExtractPropTypes<typeof VerificationCodeProps>;

package/components/u-verification-code/u-verification-code.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { VerificationCodeProps } from './types';
 
 defineOptions({ name: 'u-verification-code' });
 
@@ -27,38 +28,7 @@ defineOptions({ name: 'u-verification-code' });
 
 const emit = defineEmits(['change', 'start', 'end']);
 
-const props = defineProps({
-    /** 倒计时总秒数 */
-    seconds: {
-        type: [String, Number],
-        default: 60
-    },
-    /** 尚未开始时提示 */
-    startText: {
-        type: String,
-        default: '获取验证码'
-    },
-    /** 正在倒计时中的提示 */
-    changeText: {
-        type: String,
-        default: 'X秒重新获取'
-    },
-    /** 倒计时结束时的提示 */
-    endText: {
-        type: String,
-        default: '重新获取'
-    },
-    /** 是否在H5刷新或各端返回再进入时继续倒计时 */
-    keepRunning: {
-        type: Boolean,
-        default: false
-    },
-    /** 区分多个页面或多个倒计时组件本地存储的key */
-    uniqueKey: {
-        type: String,
-        default: ''
-    }
-});
+const props = defineProps(VerificationCodeProps);
 
 /** 当前倒计时秒数 */
 const secNum = ref(Number(props.seconds));

package/components/u-waterfall/types.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * WaterfallProps waterfall props 类型定义
+ * @description 瀑布流组件，支持数据、间隔、idKey
+ */
+export const WaterfallProps = {
+    /** 瀑布流数据数组，必填 */
+    modelValue: { type: Array as PropType<any[]>, required: true, default: () => [] },
+    /** 新增数据的动画间隔，单位ms */
+    addTime: { type: [Number, String] as PropType<number | string>, default: 200 },
+    /** 数据项的唯一标识key */
+    idKey: { type: String, default: 'id' }
+};
+
+export type WaterfallProps = ExtractPropTypes<typeof WaterfallProps>;

package/components/u-waterfall/u-waterfall.vue

@@ -11,6 +11,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { WaterfallProps } from './types';
 
 defineOptions({ name: 'u-waterfall' });
 
@@ -25,24 +26,7 @@ defineOptions({ name: 'u-waterfall' });
 
 const emit = defineEmits(['update:modelValue']);
 
-const props = defineProps({
-    /** 瀑布流数据 */
-    modelValue: {
-        type: Array as () => any[],
-        required: true,
-        default: () => []
-    },
-    /** 每次向结构插入数据的时间间隔，单位ms */
-    addTime: {
-        type: [Number, String],
-        default: 200
-    },
-    /** id值，用于清除某一条数据时，根据此idKey名称找到并移除 */
-    idKey: {
-        type: String,
-        default: 'id'
-    }
-});
+const props = defineProps(WaterfallProps);
 
 const leftList = ref<any[]>([]);
 const rightList = ref<any[]>([]);

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "uView Pro 基于Vue3+TS全面重构的UI组件库，拥有70+精选组件",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",