uview-pro 0.6.18 → 0.6.19

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

@@ -1,25 +1,25 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import zIndex from '../../libs/config/zIndex';
-
-/**
- * TopTipsProps top-tips props 类型定义
- * @description 顶部提示组件，支持导航栏高度、z-index
- */
-export const TopTipsProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 导航栏高度，用于提示的初始化 */
-    navbarHeight: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** z-index值 */
-    zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.topTips }
-};
-
-export type TopTipsProps = ExtractPropTypes<typeof TopTipsProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+
+/**
+ * TopTipsProps top-tips props 类型定义
+ * @description 顶部提示组件，支持导航栏高度、z-index
+ */
+export const TopTipsProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 导航栏高度，用于提示的初始化 */
+    navbarHeight: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** z-index值 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.topTips }
+};
+
+export type TopTipsProps = ExtractPropTypes<typeof TopTipsProps>;

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

@@ -1,130 +1,130 @@
-<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 | ReturnType<typeof setTimeout> | 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: isShow.value ? uZIndex.value : -1
-}));
-
-/**
- * 显示顶部提示
- * @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: var(--u-white-color);
-    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 | ReturnType<typeof setTimeout> | 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: isShow.value ? uZIndex.value : -1
+}));
+
+/**
+ * 显示顶部提示
+ * @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: var(--u-white-color);
+    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,19 +1,19 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * TrProps tr props 类型定义
- * @description 表格行组件，无特殊 props
- */
-export const TrProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    }
-};
-export type TrProps = ExtractPropTypes<typeof TrProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * TrProps tr props 类型定义
+ * @description 表格行组件，无特殊 props
+ */
+export const TrProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    }
+};
+export type TrProps = ExtractPropTypes<typeof TrProps>;

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

@@ -1,39 +1,39 @@
-<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>
+<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-transition/types.ts

@@ -1,43 +1,43 @@
-import type { PropType } from 'vue';
-import type { TransitionDuration, TransitionPreset } from '../../types/global';
-
-export const TransitionProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    show: {
-        type: Boolean,
-        default: true
-    },
-    name: {
-        type: String as PropType<TransitionPreset>,
-        default: 'fade'
-    },
-    mode: {
-        type: String as PropType<'out-in' | 'in-out' | ''>,
-        default: ''
-    },
-    duration: {
-        type: [Number, Object] as PropType<number | TransitionDuration>,
-        default: 300
-    },
-    timingFunction: {
-        type: String,
-        default: 'cubic-bezier(0.2, 0.8, 0.2, 1)'
-    },
-    delay: {
-        type: Number,
-        default: 0
-    },
-    appear: {
-        type: Boolean,
-        default: false
-    }
-};
+import type { PropType } from 'vue';
+import type { TransitionDuration, TransitionPreset } from '../../types/global';
+
+export const TransitionProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    show: {
+        type: Boolean,
+        default: true
+    },
+    name: {
+        type: String as PropType<TransitionPreset>,
+        default: 'fade'
+    },
+    mode: {
+        type: String as PropType<'out-in' | 'in-out' | ''>,
+        default: ''
+    },
+    duration: {
+        type: [Number, Object] as PropType<number | TransitionDuration>,
+        default: 300
+    },
+    timingFunction: {
+        type: String,
+        default: 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+    },
+    delay: {
+        type: Number,
+        default: 0
+    },
+    appear: {
+        type: Boolean,
+        default: false
+    }
+};