uview-pro 0.6.18 → 0.6.19

package/components/u-skeleton/u-skeleton.vue

@@ -1,253 +1,253 @@
-<template>
-    <view class="u-skeleton" :class="customClass" :style="$u.toStyle(customStyle)">
-        <view class="u-skeleton__wrapper" ref="skeletonRef" v-if="loading" style="display: flex; flex-direction: row">
-            <view
-                class="u-skeleton__wrapper__avatar"
-                v-if="avatar"
-                :class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
-                :style="{
-                    height: $u.addUnit(avatarSize, 'px'),
-                    width: $u.addUnit(avatarSize, 'px')
-                }"
-            ></view>
-            <view class="u-skeleton__wrapper__content" ref="contentRef" style="flex: 1">
-                <view
-                    class="u-skeleton__wrapper__content__title"
-                    v-if="title"
-                    :style="{
-                        width: uTitleWidth,
-                        height: $u.addUnit(titleHeight, 'px')
-                    }"
-                    :class="[animate && 'animate']"
-                ></view>
-                <view
-                    class="u-skeleton__wrapper__content__rows"
-                    :class="[animate && 'animate']"
-                    v-for="(item, index) in rowsArray"
-                    :key="index"
-                    :style="{
-                        width: item.width,
-                        height: item.height,
-                        marginTop: item.marginTop
-                    }"
-                >
-                </view>
-            </view>
-        </view>
-        <slot v-else />
-    </view>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted, watch, getCurrentInstance } from 'vue';
-import { SkeletonProps } from './types';
-import { $u } from '../../libs';
-// #ifdef APP-NVUE
-// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
-const dom = uni.requireNativePlugin('dom');
-const animation = uni.requireNativePlugin('animation');
-// #endif
-/**
- * Skeleton 骨架屏
- * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
- * @tutorial https://uviewpro.cn/zh/components/skeleton.html
- * @property {Boolean}					loading		是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
- * @property {Boolean}					animate		是否开启动画效果 (默认 true )
- * @property {String | Number}			rows		段落占位图行数 (默认 0 )
- * @property {String | Number | Array}	rowsWidth	段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' )
- * @property {String | Number | Array}	rowsHeight	段落的高度 (默认 18 )
- * @property {Boolean}					title		是否展示标题占位图 (默认 true )
- * @property {String | Number}			titleWidth	标题的宽度 (默认 '50%' )
- * @property {String | Number}			titleHeight	标题的高度 (默认 18 )
- * @property {Boolean}					avatar		是否展示头像占位图 (默认 false )
- * @property {String | Number}			avatarSize	头像占位图大小 (默认 32 )
- * @property {String}					avatarShape	头像占位图的形状，circle-圆形，square-方形 (默认 'circle' )
- * @example <u-skeleton rows="3" title loading></u-skeleton>
- */
-
-const props = defineProps(SkeletonProps);
-
-const instance = getCurrentInstance();
-
-const width = ref<number>(0);
-const skeletonRef = ref<any>(null);
-const contentRef = ref<any>(null);
-
-watch(
-    () => [props.loading],
-    () => {
-        getComponentWidth();
-    }
-);
-
-const rowsArray = computed(() => {
-    if (/%$/.test(props.rowsHeight as any)) {
-        console.error('rowsHeight参数不支持百分比单位');
-    }
-    const resultRows: Array<Record<string, any>> = [];
-    const rowsCount = Number(props.rows) || 0;
-    for (let i = 0; i < rowsCount; i++) {
-        let item: Record<string, any> = {};
-        // 需要预防超出数组边界的情况
-        const rowWidth = $u.test.array(props.rowsWidth)
-            ? (props.rowsWidth as any[])[i] || (i === rowsCount - 1 ? '70%' : '100%')
-            : i === rowsCount - 1
-              ? '70%'
-              : props.rowsWidth;
-        const rowHeight = $u.test.array(props.rowsHeight) ? (props.rowsHeight as any[])[i] || '18px' : props.rowsHeight;
-        // 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
-        // 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类
-        item.marginTop = !props.title && i === 0 ? 0 : props.title && i === 0 ? '20px' : '12px';
-        // 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位
-        if (/%$/.test(rowWidth)) {
-            // 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
-            item.width = $u.addUnit((width.value * parseInt(String(rowWidth))) / 100, 'px');
-        } else {
-            item.width = $u.addUnit(rowWidth, 'px');
-        }
-        item.height = $u.addUnit(rowHeight, 'px');
-        resultRows.push(item);
-    }
-    return resultRows;
-});
-
-const uTitleWidth = computed(() => {
-    let tWidth: any = 0;
-    if (/%$/.test(props.titleWidth as any)) {
-        // 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
-        tWidth = $u.addUnit((width.value * parseInt(String(props.titleWidth))) / 100, 'px');
-    } else {
-        tWidth = $u.addUnit(props.titleWidth, 'px');
-    }
-    return $u.addUnit(tWidth, 'px');
-});
-
-function init() {
-    getComponentWidth();
-    // #ifdef APP-NVUE
-    props.loading && props.animate && setNvueAnimation();
-    // #endif
-}
-
-async function setNvueAnimation() {
-    // #ifdef APP-NVUE
-    // 为了让opacity:1的状态保持一定时间，这里做一个延时
-    await $u.sleep(500);
-    const skeleton = skeletonRef.value;
-    skeleton &&
-        props.loading &&
-        props.animate &&
-        animation.transition(
-            skeleton,
-            {
-                styles: {
-                    opacity: 0.5
-                },
-                duration: 600
-            },
-            () => {
-                // 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
-                // 会停留在opacity: 0.5的状态中
-                animation.transition(
-                    skeleton,
-                    {
-                        styles: {
-                            opacity: 1
-                        },
-                        duration: 600
-                    },
-                    () => {
-                        // 只有在loading中时，才执行动画
-                        props.loading && props.animate && setNvueAnimation();
-                    }
-                );
-            }
-        );
-    // #endif
-}
-
-// 获取组件的宽度
-async function getComponentWidth() {
-    // 延时一定时间，以获取dom尺寸
-    await $u.sleep(20);
-    // #ifndef APP-NVUE
-    $u.getRect('.u-skeleton__wrapper__content', instance).then((res: any) => {
-        width.value = res.width;
-    });
-    // #endif
-
-    // #ifdef APP-NVUE
-    const ref = contentRef.value;
-    ref &&
-        dom.getComponentRect(ref, (res: any) => {
-            width.value = res.size.width;
-        });
-    // #endif
-}
-
-onMounted(() => {
-    init();
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-@mixin background {
-    /* #ifdef APP-NVUE */
-    background-color: #f1f2f4;
-    /* #endif */
-    /* #ifndef APP-NVUE */
-    background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
-    background-size: 400% 100%;
-    /* #endif */
-}
-
-.u-skeleton {
-    flex: 1;
-
-    &__wrapper {
-        @include flex(row);
-
-        &__avatar {
-            @include background;
-            margin-right: 15px;
-
-            &--circle {
-                border-radius: 100px;
-            }
-
-            &--square {
-                border-radius: 4px;
-            }
-        }
-
-        &__content {
-            flex: 1;
-
-            &__rows,
-            &__title {
-                @include background;
-                border-radius: 3px;
-            }
-        }
-    }
-}
-
-/* #ifndef APP-NVUE */
-.animate {
-    animation: skeleton 1.8s ease infinite;
-}
-
-@keyframes skeleton {
-    0% {
-        background-position: 100% 50%;
-    }
-
-    100% {
-        background-position: 0 50%;
-    }
-}
-
-/* #endif */
-</style>
+<template>
+    <view class="u-skeleton" :class="customClass" :style="$u.toStyle(customStyle)">
+        <view class="u-skeleton__wrapper" ref="skeletonRef" v-if="loading" style="display: flex; flex-direction: row">
+            <view
+                class="u-skeleton__wrapper__avatar"
+                v-if="avatar"
+                :class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
+                :style="{
+                    height: $u.addUnit(avatarSize, 'px'),
+                    width: $u.addUnit(avatarSize, 'px')
+                }"
+            ></view>
+            <view class="u-skeleton__wrapper__content" ref="contentRef" style="flex: 1">
+                <view
+                    class="u-skeleton__wrapper__content__title"
+                    v-if="title"
+                    :style="{
+                        width: uTitleWidth,
+                        height: $u.addUnit(titleHeight, 'px')
+                    }"
+                    :class="[animate && 'animate']"
+                ></view>
+                <view
+                    class="u-skeleton__wrapper__content__rows"
+                    :class="[animate && 'animate']"
+                    v-for="(item, index) in rowsArray"
+                    :key="index"
+                    :style="{
+                        width: item.width,
+                        height: item.height,
+                        marginTop: item.marginTop
+                    }"
+                >
+                </view>
+            </view>
+        </view>
+        <slot v-else />
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch, getCurrentInstance } from 'vue';
+import { SkeletonProps } from './types';
+import { $u } from '../../libs';
+// #ifdef APP-NVUE
+// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+const dom = uni.requireNativePlugin('dom');
+const animation = uni.requireNativePlugin('animation');
+// #endif
+/**
+ * Skeleton 骨架屏
+ * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
+ * @tutorial https://uviewpro.cn/zh/components/skeleton.html
+ * @property {Boolean}					loading		是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
+ * @property {Boolean}					animate		是否开启动画效果 (默认 true )
+ * @property {String | Number}			rows		段落占位图行数 (默认 0 )
+ * @property {String | Number | Array}	rowsWidth	段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' )
+ * @property {String | Number | Array}	rowsHeight	段落的高度 (默认 18 )
+ * @property {Boolean}					title		是否展示标题占位图 (默认 true )
+ * @property {String | Number}			titleWidth	标题的宽度 (默认 '50%' )
+ * @property {String | Number}			titleHeight	标题的高度 (默认 18 )
+ * @property {Boolean}					avatar		是否展示头像占位图 (默认 false )
+ * @property {String | Number}			avatarSize	头像占位图大小 (默认 32 )
+ * @property {String}					avatarShape	头像占位图的形状，circle-圆形，square-方形 (默认 'circle' )
+ * @example <u-skeleton rows="3" title loading></u-skeleton>
+ */
+
+const props = defineProps(SkeletonProps);
+
+const instance = getCurrentInstance();
+
+const width = ref<number>(0);
+const skeletonRef = ref<any>(null);
+const contentRef = ref<any>(null);
+
+watch(
+    () => [props.loading],
+    () => {
+        getComponentWidth();
+    }
+);
+
+const rowsArray = computed(() => {
+    if (/%$/.test(props.rowsHeight as any)) {
+        console.error('rowsHeight参数不支持百分比单位');
+    }
+    const resultRows: Array<Record<string, any>> = [];
+    const rowsCount = Number(props.rows) || 0;
+    for (let i = 0; i < rowsCount; i++) {
+        let item: Record<string, any> = {};
+        // 需要预防超出数组边界的情况
+        const rowWidth = $u.test.array(props.rowsWidth)
+            ? (props.rowsWidth as any[])[i] || (i === rowsCount - 1 ? '70%' : '100%')
+            : i === rowsCount - 1
+              ? '70%'
+              : props.rowsWidth;
+        const rowHeight = $u.test.array(props.rowsHeight) ? (props.rowsHeight as any[])[i] || '18px' : props.rowsHeight;
+        // 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
+        // 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类
+        item.marginTop = !props.title && i === 0 ? 0 : props.title && i === 0 ? '20px' : '12px';
+        // 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位
+        if (/%$/.test(rowWidth)) {
+            // 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
+            item.width = $u.addUnit((width.value * parseInt(String(rowWidth))) / 100, 'px');
+        } else {
+            item.width = $u.addUnit(rowWidth, 'px');
+        }
+        item.height = $u.addUnit(rowHeight, 'px');
+        resultRows.push(item);
+    }
+    return resultRows;
+});
+
+const uTitleWidth = computed(() => {
+    let tWidth: any = 0;
+    if (/%$/.test(props.titleWidth as any)) {
+        // 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
+        tWidth = $u.addUnit((width.value * parseInt(String(props.titleWidth))) / 100, 'px');
+    } else {
+        tWidth = $u.addUnit(props.titleWidth, 'px');
+    }
+    return $u.addUnit(tWidth, 'px');
+});
+
+function init() {
+    getComponentWidth();
+    // #ifdef APP-NVUE
+    props.loading && props.animate && setNvueAnimation();
+    // #endif
+}
+
+async function setNvueAnimation() {
+    // #ifdef APP-NVUE
+    // 为了让opacity:1的状态保持一定时间，这里做一个延时
+    await $u.sleep(500);
+    const skeleton = skeletonRef.value;
+    skeleton &&
+        props.loading &&
+        props.animate &&
+        animation.transition(
+            skeleton,
+            {
+                styles: {
+                    opacity: 0.5
+                },
+                duration: 600
+            },
+            () => {
+                // 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
+                // 会停留在opacity: 0.5的状态中
+                animation.transition(
+                    skeleton,
+                    {
+                        styles: {
+                            opacity: 1
+                        },
+                        duration: 600
+                    },
+                    () => {
+                        // 只有在loading中时，才执行动画
+                        props.loading && props.animate && setNvueAnimation();
+                    }
+                );
+            }
+        );
+    // #endif
+}
+
+// 获取组件的宽度
+async function getComponentWidth() {
+    // 延时一定时间，以获取dom尺寸
+    await $u.sleep(20);
+    // #ifndef APP-NVUE
+    $u.getRect('.u-skeleton__wrapper__content', instance).then((res: any) => {
+        width.value = res.width;
+    });
+    // #endif
+
+    // #ifdef APP-NVUE
+    const ref = contentRef.value;
+    ref &&
+        dom.getComponentRect(ref, (res: any) => {
+            width.value = res.size.width;
+        });
+    // #endif
+}
+
+onMounted(() => {
+    init();
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+@mixin background {
+    /* #ifdef APP-NVUE */
+    background-color: #f1f2f4;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
+    background-size: 400% 100%;
+    /* #endif */
+}
+
+.u-skeleton {
+    flex: 1;
+
+    &__wrapper {
+        @include flex(row);
+
+        &__avatar {
+            @include background;
+            margin-right: 15px;
+
+            &--circle {
+                border-radius: 100px;
+            }
+
+            &--square {
+                border-radius: 4px;
+            }
+        }
+
+        &__content {
+            flex: 1;
+
+            &__rows,
+            &__title {
+                @include background;
+                border-radius: 3px;
+            }
+        }
+    }
+}
+
+/* #ifndef APP-NVUE */
+.animate {
+    animation: skeleton 1.8s ease infinite;
+}
+
+@keyframes skeleton {
+    0% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+/* #endif */
+</style>

package/components/u-slider/types.ts

@@ -1,55 +1,55 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import { getColor } from '../../';
-
-/**
- * SliderProps 滑块选择器 props 类型定义
- * @description 滑块选择器，支持自定义样式、步长、禁用等
- */
-export const SliderProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 当前进度百分比值，范围0-100 */
-    modelValue: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 是否禁用滑块 */
-    disabled: { type: Boolean, default: false },
-    /** 滑块宽度，高等于宽，单位rpx */
-    blockWidth: { type: [Number, String] as PropType<number | string>, default: 30 },
-    /** 滑块总体范围起点值 */
-    start: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 滑块总体范围终点值 */
-    end: { type: [Number, String] as PropType<number | string>, default: 100 },
-    /** 最小值 */
-    min: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 最大值 */
-    max: { type: [Number, String] as PropType<number | string>, default: 100 },
-    /** 步进值 */
-    step: { type: [Number, String] as PropType<number | string>, default: 1 },
-    /** 滑块条高度，单位rpx */
-    height: { type: [Number, String] as PropType<number | string>, default: 6 },
-    /** 进度条的激活部分颜色 */
-    activeColor: { type: String, default: () => getColor('primary') },
-    /** 进度条的背景颜色 */
-    inactiveColor: { type: String, default: () => getColor('lightColor') },
-    /** 滑块的背景颜色 */
-    blockColor: { type: String, default: 'var(--u-bg-white)' },
-    /** 用户对滑块的自定义颜色 */
-    blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 是否在滑块上方/下方显示当前数值 */
-    showValue: { type: Boolean, default: false },
-    /** 滑块数值显示位置，top-上方，bottom-下方 */
-    valuePosition: { type: String as PropType<'top' | 'bottom'>, default: 'top' },
-    /** 是否在起始和结束位置显示数值 */
-    showEdgeValue: { type: Boolean, default: false },
-    /** 起始和结束数值显示位置，top-上方，bottom-下方 */
-    edgeValuePosition: { type: String as PropType<'top' | 'bottom'>, default: 'top' }
-};
-
-export type SliderProps = ExtractPropTypes<typeof SliderProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { getColor } from '../../';
+
+/**
+ * SliderProps 滑块选择器 props 类型定义
+ * @description 滑块选择器，支持自定义样式、步长、禁用等
+ */
+export const SliderProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 当前进度百分比值，范围0-100 */
+    modelValue: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否禁用滑块 */
+    disabled: { type: Boolean, default: false },
+    /** 滑块宽度，高等于宽，单位rpx */
+    blockWidth: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 滑块总体范围起点值 */
+    start: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 滑块总体范围终点值 */
+    end: { type: [Number, String] as PropType<number | string>, default: 100 },
+    /** 最小值 */
+    min: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 最大值 */
+    max: { type: [Number, String] as PropType<number | string>, default: 100 },
+    /** 步进值 */
+    step: { type: [Number, String] as PropType<number | string>, default: 1 },
+    /** 滑块条高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 6 },
+    /** 进度条的激活部分颜色 */
+    activeColor: { type: String, default: () => getColor('primary') },
+    /** 进度条的背景颜色 */
+    inactiveColor: { type: String, default: () => getColor('lightColor') },
+    /** 滑块的背景颜色 */
+    blockColor: { type: String, default: 'var(--u-bg-white)' },
+    /** 用户对滑块的自定义颜色 */
+    blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否在滑块上方/下方显示当前数值 */
+    showValue: { type: Boolean, default: false },
+    /** 滑块数值显示位置，top-上方，bottom-下方 */
+    valuePosition: { type: String as PropType<'top' | 'bottom'>, default: 'top' },
+    /** 是否在起始和结束位置显示数值 */
+    showEdgeValue: { type: Boolean, default: false },
+    /** 起始和结束数值显示位置，top-上方，bottom-下方 */
+    edgeValuePosition: { type: String as PropType<'top' | 'bottom'>, default: 'top' }
+};
+
+export type SliderProps = ExtractPropTypes<typeof SliderProps>;