uview-pro 0.6.18 → 0.6.19

package/components/u-steps/u-steps.vue

@@ -1,105 +1,105 @@
-<template>
-    <view>
-        <view class="u-steps" :class="customClass" :style="$u.toStyle(directionStyle, customStyle)">
-            <slot>
-                <u-step
-                    :name="item.name"
-                    :desc="item.desc"
-                    :icon="item.icon"
-                    v-for="(item, index) in list"
-                    :key="index"
-                ></u-step>
-            </slot>
-            <!-- <view
-                class="u-steps__item"
-                :class="['u-steps__item--' + direction]"
-                v-for="(item, index) in list"
-                :key="index"
-            >
-                <view class="u-steps__item__num" v-if="mode == 'number'" :style="numberStyle(index)">
-                    <text v-if="currentIndex < index" :style="textStyle(index)">
-                        {{ index + 1 }}
-                    </text>
-                    <u-icon v-else size="22" color="var(--u-white-color)" :name="icon"></u-icon>
-                </view>
-                <view class="u-steps__item__dot" v-if="mode == 'dot'" :style="dotStyle(index)"></view>
-                <text class="u-line-1" :style="textStyle(index)" :class="['u-steps__item__text--' + direction]">
-                    {{ item.name }}
-                </text>
-                <view
-                    class="u-steps__item__line"
-                    :class="['u-steps__item__line--' + mode]"
-                    v-if="index < list.length - 1"
-                >
-                    <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
-                </view>
-            </view> -->
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'u-steps',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-
-<script setup lang="ts">
-import { computed, getCurrentInstance } from 'vue';
-import { StepsProps } from './types';
-import { $u, useParent } from '../..';
-import uStep from '../u-step/u-step.vue';
-
-/**
- * steps 步骤条
- * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
- * @tutorial https://uviewpro.cn/zh/components/steps.html
- * @property {String} mode 设置模式（默认dot）
- * @property {Array<{name: string}>} list 数轴条数据，数组。具体见上方示例
- * @property {String} type type主题（默认primary）
- * @property {String} direction row-横向，column-竖向（默认row）
- * @property {Number|String} current 设置当前处于第几步
- * @property {String} activeColor 已完成步骤的激活颜色，如设置，type值会失效
- * @property {String} unActiveColor 未激活的颜色，用于表示未完成步骤的颜色（默认var(--u-content-color)）
- * @property {String} icon 自定义图标
- * @example <u-steps :list="numList" active-color="var(--u-type-error)"></u-steps>
- */
-
-const props = defineProps(StepsProps);
-
-const { children } = useParent('u-steps');
-// 计算方向样式
-const directionStyle = computed(() => {
-    const isRow = props.direction === 'row';
-    return {
-        flexDirection: props.direction as 'row' | 'column',
-        ...(isRow
-            ? {
-                  // 内容总宽超出一行时横向滚动，避免右侧节点被截断
-                  overflowX: 'auto',
-                  flexWrap: 'nowrap'
-              }
-            : {})
-    };
-});
-
-defineExpose({
-    props,
-    childLen: () => children.length
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-steps {
-    @include vue-flex;
-}
-</style>
+<template>
+    <view>
+        <view class="u-steps" :class="customClass" :style="$u.toStyle(directionStyle, customStyle)">
+            <slot>
+                <u-step
+                    :name="item.name"
+                    :desc="item.desc"
+                    :icon="item.icon"
+                    v-for="(item, index) in list"
+                    :key="index"
+                ></u-step>
+            </slot>
+            <!-- <view
+                class="u-steps__item"
+                :class="['u-steps__item--' + direction]"
+                v-for="(item, index) in list"
+                :key="index"
+            >
+                <view class="u-steps__item__num" v-if="mode == 'number'" :style="numberStyle(index)">
+                    <text v-if="currentIndex < index" :style="textStyle(index)">
+                        {{ index + 1 }}
+                    </text>
+                    <u-icon v-else size="22" color="var(--u-white-color)" :name="icon"></u-icon>
+                </view>
+                <view class="u-steps__item__dot" v-if="mode == 'dot'" :style="dotStyle(index)"></view>
+                <text class="u-line-1" :style="textStyle(index)" :class="['u-steps__item__text--' + direction]">
+                    {{ item.name }}
+                </text>
+                <view
+                    class="u-steps__item__line"
+                    :class="['u-steps__item__line--' + mode]"
+                    v-if="index < list.length - 1"
+                >
+                    <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
+                </view>
+            </view> -->
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-steps',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+import { StepsProps } from './types';
+import { $u, useParent } from '../..';
+import uStep from '../u-step/u-step.vue';
+
+/**
+ * steps 步骤条
+ * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+ * @tutorial https://uviewpro.cn/zh/components/steps.html
+ * @property {String} mode 设置模式（默认dot）
+ * @property {Array<{name: string}>} list 数轴条数据，数组。具体见上方示例
+ * @property {String} type type主题（默认primary）
+ * @property {String} direction row-横向，column-竖向（默认row）
+ * @property {Number|String} current 设置当前处于第几步
+ * @property {String} activeColor 已完成步骤的激活颜色，如设置，type值会失效
+ * @property {String} unActiveColor 未激活的颜色，用于表示未完成步骤的颜色（默认var(--u-content-color)）
+ * @property {String} icon 自定义图标
+ * @example <u-steps :list="numList" active-color="var(--u-type-error)"></u-steps>
+ */
+
+const props = defineProps(StepsProps);
+
+const { children } = useParent('u-steps');
+// 计算方向样式
+const directionStyle = computed(() => {
+    const isRow = props.direction === 'row';
+    return {
+        flexDirection: props.direction as 'row' | 'column',
+        ...(isRow
+            ? {
+                  // 内容总宽超出一行时横向滚动，避免右侧节点被截断
+                  overflowX: 'auto',
+                  flexWrap: 'nowrap'
+              }
+            : {})
+    };
+});
+
+defineExpose({
+    props,
+    childLen: () => children.length
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-steps {
+    @include vue-flex;
+}
+</style>

package/components/u-sticky/types.ts

@@ -1,33 +1,33 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import zIndex from '../../libs/config/zIndex';
-
-/**
- * StickyProps 吸顶组件 props 类型定义
- * @description 吸顶组件，支持自定义吸顶距离、z-index、背景色等
- */
-export const StickyProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px */
-    offsetTop: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 列表中的索引值 */
-    index: { type: [Number, String] as PropType<number | string>, default: '' },
-    /** 是否开启吸顶功能 */
-    enable: { type: Boolean, default: true },
-    /** h5顶部导航栏的高度 */
-    h5NavHeight: { type: [Number, String] as PropType<number | string>, default: 44 },
-    /** 吸顶区域的背景颜色 */
-    bgColor: { type: String, default: 'var(--u-bg-white)' },
-    /** z-index值 */
-    zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.sticky }
-};
-
-export type StickyProps = ExtractPropTypes<typeof StickyProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+
+/**
+ * StickyProps 吸顶组件 props 类型定义
+ * @description 吸顶组件，支持自定义吸顶距离、z-index、背景色等
+ */
+export const StickyProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px */
+    offsetTop: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 列表中的索引值 */
+    index: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 是否开启吸顶功能 */
+    enable: { type: Boolean, default: true },
+    /** h5顶部导航栏的高度 */
+    h5NavHeight: { type: [Number, String] as PropType<number | string>, default: 44 },
+    /** 吸顶区域的背景颜色 */
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
+    /** z-index值 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.sticky }
+};
+
+export type StickyProps = ExtractPropTypes<typeof StickyProps>;

package/components/u-sticky/u-sticky.vue

@@ -1,177 +1,177 @@
-<template>
-    <view>
-        <view
-            class="u-sticky-wrap"
-            :class="[elClass, customClass]"
-            :style="
-                $u.toStyle(
-                    {
-                        height: fixed ? height + 'px' : 'auto',
-                        backgroundColor: bgColor
-                    },
-                    customStyle
-                )
-            "
-        >
-            <view
-                class="u-sticky"
-                :style="{
-                    position: fixed ? 'fixed' : 'static',
-                    top: stickyTop + 'px',
-                    left: left + 'px',
-                    width: width == 'auto' ? 'auto' : width + 'px',
-                    zIndex: uZIndex
-                }"
-            >
-                <slot></slot>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'u-sticky',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
-import { $u } from '../..';
-import { StickyProps } from './types';
-
-/**
- * sticky 吸顶
- * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
- * @tutorial https://uviewpro.cn/zh/components/sticky.html
- * @property {String|Number} offsetTop 吸顶时与顶部的距离，单位rpx（默认0）
- * @property {String|Number} index 自定义标识，用于区分是哪一个组件
- * @property {Boolean} enable 是否开启吸顶功能（默认true）
- * @property {String} bgColor 组件背景颜色（默认var(--u-bg-white)）
- * @property {String|Number} zIndex 吸顶时的z-index值（默认970）
- * @property {String|Number} h5NavHeight 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44）
- * @event fixed 组件吸顶时触发
- * @event unfixed 组件取消吸顶时触发
- * @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
- */
-const props = defineProps(StickyProps);
-
-const emit = defineEmits(['fixed', 'unfixed']);
-
-const instance = getCurrentInstance();
-const fixed = ref(false);
-const height = ref<'auto' | number>('auto');
-const stickyTop = ref(0);
-const elClass = ref('');
-const left = ref(0);
-const width = ref<'auto' | number>('auto');
-let contentObserver: any = null;
-
-elClass.value = $u.guid();
-
-const uZIndex = computed(() => (props.zIndex ? props.zIndex : ($u?.zIndex?.sticky ?? 970)));
-
-watch(
-    () => props.offsetTop,
-    () => {
-        initObserver();
-    }
-);
-
-watch(
-    () => props.enable,
-    val => {
-        if (val == false) {
-            fixed.value = false;
-            disconnectObserver('contentObserver');
-        } else {
-            initObserver();
-        }
-    }
-);
-
-onMounted(() => {
-    initObserver();
-});
-
-onBeforeUnmount(() => {
-    disconnectObserver('contentObserver');
-});
-
-/**
- * 初始化 IntersectionObserver 监听
- */
-function initObserver() {
-    if (!props.enable) return;
-    // #ifdef H5
-    stickyTop.value =
-        Number(props.offsetTop) !== 0
-            ? uni.upx2px(Number(props.offsetTop)) + Number(props.h5NavHeight)
-            : Number(props.h5NavHeight);
-    // #endif
-    // #ifndef H5
-    stickyTop.value = Number(props.offsetTop) !== 0 ? uni.upx2px(Number(props.offsetTop)) : 0;
-    // #endif
-    disconnectObserver('contentObserver');
-    $u.getRect('.' + elClass.value, instance).then((res: any) => {
-        height.value = res.height;
-        left.value = res.left;
-        width.value = res.width;
-        nextTick(() => {
-            observeContent();
-        });
-    });
-}
-
-/**
- * 创建 IntersectionObserver 监听内容区域
- */
-function observeContent() {
-    disconnectObserver('contentObserver');
-
-    contentObserver = uni.createIntersectionObserver(instance?.proxy, {
-        thresholds: [0.95, 0.98, 1]
-    });
-    contentObserver.relativeToViewport({
-        top: -stickyTop.value
-    });
-    contentObserver.observe('.' + elClass.value, (res: any) => {
-        if (!props.enable) return;
-        setFixed(res.boundingClientRect.top);
-    });
-}
-
-/**
- * 设置 fixed 状态
- */
-function setFixed(top: number) {
-    const isFixed = top < stickyTop.value;
-    if (isFixed) emit('fixed', props.index);
-    else if (fixed.value) emit('unfixed', props.index);
-    fixed.value = isFixed;
-}
-
-/**
- * 断开 observer
- */
-function disconnectObserver(observerName: string) {
-    if (observerName === 'contentObserver' && contentObserver) {
-        contentObserver.disconnect();
-        contentObserver = null;
-    }
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-.u-sticky {
-    z-index: 9999999999;
-}
-</style>
+<template>
+    <view>
+        <view
+            class="u-sticky-wrap"
+            :class="[elClass, customClass]"
+            :style="
+                $u.toStyle(
+                    {
+                        height: fixed ? height + 'px' : 'auto',
+                        backgroundColor: bgColor
+                    },
+                    customStyle
+                )
+            "
+        >
+            <view
+                class="u-sticky"
+                :style="{
+                    position: fixed ? 'fixed' : 'static',
+                    top: stickyTop + 'px',
+                    left: left + 'px',
+                    width: width == 'auto' ? 'auto' : width + 'px',
+                    zIndex: uZIndex
+                }"
+            >
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-sticky',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+import { StickyProps } from './types';
+
+/**
+ * sticky 吸顶
+ * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+ * @tutorial https://uviewpro.cn/zh/components/sticky.html
+ * @property {String|Number} offsetTop 吸顶时与顶部的距离，单位rpx（默认0）
+ * @property {String|Number} index 自定义标识，用于区分是哪一个组件
+ * @property {Boolean} enable 是否开启吸顶功能（默认true）
+ * @property {String} bgColor 组件背景颜色（默认var(--u-bg-white)）
+ * @property {String|Number} zIndex 吸顶时的z-index值（默认970）
+ * @property {String|Number} h5NavHeight 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44）
+ * @event fixed 组件吸顶时触发
+ * @event unfixed 组件取消吸顶时触发
+ * @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
+ */
+const props = defineProps(StickyProps);
+
+const emit = defineEmits(['fixed', 'unfixed']);
+
+const instance = getCurrentInstance();
+const fixed = ref(false);
+const height = ref<'auto' | number>('auto');
+const stickyTop = ref(0);
+const elClass = ref('');
+const left = ref(0);
+const width = ref<'auto' | number>('auto');
+let contentObserver: any = null;
+
+elClass.value = $u.guid();
+
+const uZIndex = computed(() => (props.zIndex ? props.zIndex : ($u?.zIndex?.sticky ?? 970)));
+
+watch(
+    () => props.offsetTop,
+    () => {
+        initObserver();
+    }
+);
+
+watch(
+    () => props.enable,
+    val => {
+        if (val == false) {
+            fixed.value = false;
+            disconnectObserver('contentObserver');
+        } else {
+            initObserver();
+        }
+    }
+);
+
+onMounted(() => {
+    initObserver();
+});
+
+onBeforeUnmount(() => {
+    disconnectObserver('contentObserver');
+});
+
+/**
+ * 初始化 IntersectionObserver 监听
+ */
+function initObserver() {
+    if (!props.enable) return;
+    // #ifdef H5
+    stickyTop.value =
+        Number(props.offsetTop) !== 0
+            ? uni.upx2px(Number(props.offsetTop)) + Number(props.h5NavHeight)
+            : Number(props.h5NavHeight);
+    // #endif
+    // #ifndef H5
+    stickyTop.value = Number(props.offsetTop) !== 0 ? uni.upx2px(Number(props.offsetTop)) : 0;
+    // #endif
+    disconnectObserver('contentObserver');
+    $u.getRect('.' + elClass.value, instance).then((res: any) => {
+        height.value = res.height;
+        left.value = res.left;
+        width.value = res.width;
+        nextTick(() => {
+            observeContent();
+        });
+    });
+}
+
+/**
+ * 创建 IntersectionObserver 监听内容区域
+ */
+function observeContent() {
+    disconnectObserver('contentObserver');
+
+    contentObserver = uni.createIntersectionObserver(instance?.proxy, {
+        thresholds: [0.95, 0.98, 1]
+    });
+    contentObserver.relativeToViewport({
+        top: -stickyTop.value
+    });
+    contentObserver.observe('.' + elClass.value, (res: any) => {
+        if (!props.enable) return;
+        setFixed(res.boundingClientRect.top);
+    });
+}
+
+/**
+ * 设置 fixed 状态
+ */
+function setFixed(top: number) {
+    const isFixed = top < stickyTop.value;
+    if (isFixed) emit('fixed', props.index);
+    else if (fixed.value) emit('unfixed', props.index);
+    fixed.value = isFixed;
+}
+
+/**
+ * 断开 observer
+ */
+function disconnectObserver(observerName: string) {
+    if (observerName === 'contentObserver' && contentObserver) {
+        contentObserver.disconnect();
+        contentObserver = null;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+.u-sticky {
+    z-index: 9999999999;
+}
+</style>