uview-pro 0.2.4 → 0.3.1

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

@@ -1,113 +1,130 @@
-<template>
-    <view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="tipStyle">{{ title }}</view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { $u } from '../..';
-import { TopTipsProps } from './types';
-
-defineOptions({ name: 'u-top-tips' });
-
-/**
- * topTips 顶部提示
- * @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
- * @tutorial https://uviewpro.cn/zh/components/topTips.html
- * @property {String|Number} navbarHeight 导航栏高度(包含状态栏高度在内)，单位PX
- * @property {String|Number} zIndex z-index值（默认975）
- * @example <u-top-tips ref="uTips"></u-top-tips>
- */
-
-const props = defineProps(TopTipsProps);
-
-let timer: number | null = null; // 定时器
-const isShow = ref(false); // 是否显示消息组件
-const title = ref(''); // 组件中显示的消息内容
-const type = ref<'primary' | 'success' | 'error' | 'warning' | 'info'>('primary'); // 消息的类型（颜色不同），primary，success，error，warning，info
-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(uNavbarHeight.value) + 'px',
-    zIndex: uZIndex.value
-}));
-
-/**
- * 显示顶部提示
- * @param config 配置项 { title, type, duration }
- */
-function show(config: { title: string; type?: string; duration?: number } = { title: '' }) {
-    // 先清除定时器（可能是上一次定义的，需要清除了再开始新的）
-    if (timer) clearTimeout(timer);
-    // 时间，内容，类型主题(type)等参数
-    if (config.duration) duration.value = config.duration;
-    if (config.type) type.value = config.type as any;
-    title.value = config.title;
-    isShow.value = true;
-    // 倒计时
-    timer = setTimeout(() => {
-        isShow.value = false;
-        if (timer) clearTimeout(timer);
-        timer = null;
-    }, duration.value);
-}
-defineExpose({ show });
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-view {
-    box-sizing: border-box;
-}
-.u-tips {
-    width: 100%;
-    position: fixed;
-    z-index: 1;
-    padding: 20rpx 30rpx;
-    color: #ffffff;
-    font-size: 28rpx;
-    left: 0;
-    right: 0;
-    @include vue-flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transform: translateY(-100%);
-    transition: all 0.35s linear;
-}
-.u-tip-show {
-    transform: translateY(0);
-    opacity: 1;
-    z-index: 99;
-}
-.u-primary {
-    background: $u-type-primary;
-}
-.u-success {
-    background: $u-type-success;
-}
-.u-warning {
-    background: $u-type-warning;
-}
-.u-error {
-    background: $u-type-error;
-}
-.u-info {
-    background: $u-type-info;
-}
-</style>
+<template>
+    <view
+        class="u-tips"
+        :class="['u-' + type, isShow ? 'u-tip-show' : '', customClass]"
+        :style="$u.toStyle(tipStyle, customStyle)"
+    >
+        {{ title }}
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-top-tips',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { $u } from '../..';
+import { TopTipsProps } from './types';
+
+/**
+ * topTips 顶部提示
+ * @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
+ * @tutorial https://uviewpro.cn/zh/components/topTips.html
+ * @property {String|Number} navbarHeight 导航栏高度(包含状态栏高度在内)，单位PX
+ * @property {String|Number} zIndex z-index值（默认975）
+ * @example <u-top-tips ref="uTips"></u-top-tips>
+ */
+
+const props = defineProps(TopTipsProps);
+
+let timer: number | null = null; // 定时器
+const isShow = ref(false); // 是否显示消息组件
+const title = ref(''); // 组件中显示的消息内容
+const type = ref<'primary' | 'success' | 'error' | 'warning' | 'info'>('primary'); // 消息的类型（颜色不同），primary，success，error，warning，info
+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(uNavbarHeight.value) + 'px',
+    zIndex: uZIndex.value
+}));
+
+/**
+ * 显示顶部提示
+ * @param config 配置项 { title, type, duration }
+ */
+function show(config: { title: string; type?: string; duration?: number } = { title: '' }) {
+    // 先清除定时器（可能是上一次定义的，需要清除了再开始新的）
+    if (timer) clearTimeout(timer);
+    // 时间，内容，类型主题(type)等参数
+    if (config.duration) duration.value = config.duration;
+    if (config.type) type.value = config.type as any;
+    title.value = config.title;
+    isShow.value = true;
+    // 倒计时
+    timer = setTimeout(() => {
+        isShow.value = false;
+        if (timer) clearTimeout(timer);
+        timer = null;
+    }, duration.value);
+}
+defineExpose({ show });
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+view {
+    box-sizing: border-box;
+}
+.u-tips {
+    width: 100%;
+    position: fixed;
+    z-index: 1;
+    padding: 20rpx 30rpx;
+    color: #ffffff;
+    font-size: 28rpx;
+    left: 0;
+    right: 0;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: all 0.35s linear;
+}
+.u-tip-show {
+    transform: translateY(0);
+    opacity: 1;
+    z-index: 99;
+}
+.u-primary {
+    background: $u-type-primary;
+}
+.u-success {
+    background: $u-type-success;
+}
+.u-warning {
+    background: $u-type-warning;
+}
+.u-error {
+    background: $u-type-error;
+}
+.u-info {
+    background: $u-type-info;
+}
+</style>

package/components/u-tr/types.ts

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

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

@@ -1,24 +1,39 @@
-<template>
-    <view class="u-tr">
-        <slot></slot>
-    </view>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'u-tr' });
-
-/**
- * tr 表格行标签
- * @description 表格组件一般用于展示大量结构化数据的场景（搭配<u-table>使用）
- * @tutorial https://uviewpro.cn/zh/components/table.html
- * @example <u-tr></u-tr>
- */
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-tr {
-    @include vue-flex;
-}
-</style>
+<template>
+    <view class="u-tr" :class="customClass" :style="$u.toStyle(customStyle)">
+        <slot></slot>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-tr',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { TrProps } from './types';
+import { $u } from '../../';
+
+/**
+ * tr 表格行标签
+ * @description 表格组件一般用于展示大量结构化数据的场景（搭配<u-table>使用）
+ * @tutorial https://uviewpro.cn/zh/components/table.html
+ * @example <u-tr></u-tr>
+ */
+const props = defineProps(TrProps);
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-tr {
+    @include vue-flex;
+}
+</style>

package/components/u-upload/types.ts

@@ -1,80 +1,82 @@
-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: 200 },
-    /** 选择器高度，单位rpx */
-    height: { type: [Number, String] as PropType<number | string>, default: 200 },
-    /** 最大上传数量 */
-    maxCount: { type: [Number, String] as PropType<number | string>, default: 52 },
-    /** 是否可删除 */
-    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: () => [] },
-    /** 限制文件类型 */
-    /** 允许上传的图片后缀 */
-    /** 支付宝小程序真机选择图片的后缀为"image" */
-    /** https://opendocs.alipay.com/mini/api/media-image */
-    limitType: { type: Array as PropType<string[]>, default: () => ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'] },
-    /** 是否自动上传 */
-    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字符串，是否转为json格式 */
-    toJson: { type: Boolean, default: true }
-};
-
-export type UploadProps = ExtractPropTypes<typeof UploadProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ImgMode, UploadSizeType, UploadSourceType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * UploadProps upload props 类型定义
+ * @description 文件上传组件，支持多种自定义参数
+ */
+export const UploadProps = {
+    ...baseProps,
+    /** 选择器宽度，单位rpx */
+    width: { type: [Number, String] as PropType<number | string>, default: 200 },
+    /** 选择器高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 200 },
+    /** 最大上传数量 */
+    maxCount: { type: [Number, String] as PropType<number | string>, default: 52 },
+    /** 是否可删除 */
+    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: () => [] },
+    /** 限制文件类型 */
+    /** 允许上传的图片后缀 */
+    /** 支付宝小程序真机选择图片的后缀为"image" */
+    /** https://opendocs.alipay.com/mini/api/media-image */
+    limitType: { type: Array as PropType<string[]>, default: () => ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'] },
+    /** 是否自动上传 */
+    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字符串，是否转为json格式 */
+    toJson: { type: Boolean, default: true }
+};
+
+export type UploadProps = ExtractPropTypes<typeof UploadProps>;