uview-pro 0.6.18 → 0.6.19

package/components/u-step/u-step.vue

@@ -1,292 +1,292 @@
-<template>
-    <view class="u-steps__item" :class="[customClass, 'u-steps__item--' + direction]" :style="$u.toStyle(customStyle)">
-        <view class="u-steps__item__num--wrap" v-if="mode == 'number'">
-            <view class="u-steps__item__num">
-                <view
-                    class="u-steps__item__num--text"
-                    v-if="currentIndex < childIndex"
-                    :style="numberStyle(childIndex)"
-                >
-                    <text :style="textStyle(childIndex)">
-                        {{ childIndex + 1 }}
-                    </text>
-                </view>
-                <view v-else class="u-steps__item__num--circle">
-                    <slot name="icon">
-                        <view class="u-steps__item__num--icon" :style="numberStyle(childIndex)">
-                            <u-icon size="22" color="var(--u-white-color)" :name="iconName"></u-icon>
-                        </view>
-                    </slot>
-                </view>
-            </view>
-        </view>
-        <view class="u-steps__item__dot" v-else-if="mode == 'dot'">
-            <view class="u-steps__item__dot--box" :style="dotStyle(childIndex)"></view>
-        </view>
-        <view>
-            <view class="u-line-1" :style="textStyle(childIndex)" :class="['u-steps__item__text--' + direction]">
-                <slot name="name">
-                    <text>
-                        {{ name }}
-                    </text>
-                </slot>
-            </view>
-            <view v-if="hasDesc" :class="['u-steps__item__desc--' + direction]">
-                <slot name="desc">
-                    <text>
-                        {{ desc }}
-                    </text>
-                </slot>
-            </view>
-        </view>
-        <view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="showLine">
-            <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
-        </view>
-        <!-- 横排模式下补左半连接线：节点宽度不一致时避免与上一个节点之间连线断开 -->
-        <view
-            class="u-steps__item__line"
-            :class="['u-steps__item__line--left--' + mode]"
-            v-if="direction === 'row' && childIndex > 0"
-        >
-            <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
-        </view>
-    </view>
-</template>
-<script lang="ts">
-export default {
-    name: 'u-step',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-<script setup lang="ts">
-import { computed } from 'vue';
-import { $u, useChildren } from '../..';
-import { StepProps } from './types';
-import uIcon from '../u-icon/u-icon.vue';
-import uLine from '../u-line/u-line.vue';
-
-const props = defineProps(StepProps);
-
-// 使用组件关系 hooks 获取父组件
-const { childIndex, parentExposed } = useChildren('u-step', 'u-steps');
-
-// 父组件的默认值（兼容没有父组件的场景）
-const parentData = computed(() => {
-    return (
-        parentExposed?.value?.props || {
-            mode: 'dot',
-            list: [],
-            type: 'primary',
-            current: 0,
-            activeColor: $u.color.primary,
-            unActiveColor: $u.color.info,
-            icon: 'checkmark',
-            direction: 'row'
-        }
-    );
-});
-
-const childLen = computed(() => {
-    if (parentExposed?.value?.childLen && typeof parentExposed?.value?.childLen === 'function') {
-        return parentExposed?.value?.childLen();
-    }
-    return 0;
-});
-
-const showLine = computed(() => childIndex.value < childLen.value - 1);
-
-// 计算属性，计算当前步骤的索引值
-// 如果 current 是字符串，则转换为数字，否则直接使用数字
-const currentIndex = computed(() =>
-    typeof parentData.value.current === 'string' ? Number(parentData.value.current) : parentData.value.current
-);
-const mode = computed(() => parentData.value.mode);
-const direction = computed(() => parentData.value.direction);
-// 计算方向样式
-
-const activeColor = computed(() => props.activeColor || parentData.value.activeColor);
-const unActiveColor = computed(() => props.unActiveColor || parentData.value.unActiveColor);
-
-const name = computed(() => props.name || '');
-const desc = computed(() => props.desc || '');
-const hasDesc = computed(() => !$u.test.isEmpty(desc));
-const iconName = computed(() => {
-    if (props.icon !== parentData.value.icon) {
-        if (props.icon !== 'checkmark') {
-            return props.icon;
-        } else if (parentData.value.icon !== 'checkmark') {
-            return parentData.value.icon;
-        }
-    }
-    return props.icon || parentData.value.icon;
-});
-
-// 计算当前步骤的样式
-const numberStyle = (index: number) => ({
-    backgroundColor: currentIndex.value < index ? 'var(--u-white-color)' : activeColor.value,
-    borderColor: currentIndex.value < index ? unActiveColor.value : activeColor.value
-});
-
-// 计算当前步骤的样式
-const dotStyle = (index: number) => ({
-    backgroundColor: index <= currentIndex.value ? activeColor.value : unActiveColor.value
-});
-
-// 计算当前步骤的文字样式
-const textStyle = (index: number) => ({
-    color: index <= currentIndex.value ? activeColor.value : unActiveColor.value
-});
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-$u-steps-item-number-width: 44rpx;
-$u-steps-item-dot-width: 20rpx;
-
-.inline-block {
-    display: inline-block;
-}
-.u-steps__item {
-    flex: 1;
-    text-align: center;
-    position: relative;
-    min-width: 100rpx;
-    font-size: 26rpx;
-    color: var(--u-tips-color);
-    @include vue-flex;
-    flex-direction: column;
-
-    &--row {
-        // 步骤多时禁止收缩到内容宽度以下，超宽交给容器横向滚动，避免文字遮挡
-        flex: 1 0 auto;
-        align-items: center;
-        @include vue-flex;
-        flex-direction: column;
-
-        .u-steps__item__line {
-            position: absolute;
-            z-index: 0;
-
-            // 右半线：自本节点圆心向右伸至自身右边缘，与下一节点的左半线无缝衔接
-            &--dot {
-                width: calc(50% - #{$u-steps-item-dot-width} / 2);
-                top: calc(#{$u-steps-item-dot-width} / 2);
-                left: calc(#{$u-steps-item-dot-width} / 2 + 50%);
-            }
-
-            // 左半线：自自身左边缘向左半圆心（不含圆心），补偿右半线在宽度不同时够不到下一节点圆心
-            &--left--dot {
-                width: calc(50% - #{$u-steps-item-dot-width} / 2);
-                top: calc(#{$u-steps-item-dot-width} / 2);
-                right: calc(#{$u-steps-item-dot-width} / 2 + 50%);
-            }
-
-            &--number {
-                width: calc(50% - #{$u-steps-item-number-width} / 2);
-                top: calc(#{$u-steps-item-number-width} / 2);
-                left: calc(#{$u-steps-item-number-width} / 2 + 50%);
-            }
-
-            &--left--number {
-                width: calc(50% - #{$u-steps-item-number-width} / 2);
-                top: calc(#{$u-steps-item-number-width} / 2);
-                right: calc(#{$u-steps-item-number-width} / 2 + 50%);
-            }
-        }
-    }
-
-    &--column {
-        @include vue-flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        min-height: 120rpx;
-        padding-bottom: 6rpx;
-
-        .u-steps__item__line {
-            position: absolute;
-            z-index: 0;
-
-            &--dot {
-                height: calc(100% - #{$u-steps-item-dot-width});
-                top: calc(#{$u-steps-item-dot-width} + 6rpx);
-                left: calc(#{$u-steps-item-dot-width} / 2);
-            }
-
-            &--number {
-                height: calc(100% - #{$u-steps-item-number-width});
-                top: #{$u-steps-item-number-width};
-                left: calc(#{$u-steps-item-number-width} / 2);
-            }
-        }
-
-        .u-steps__item__dot {
-            margin-top: 6rpx;
-        }
-    }
-
-    &__num {
-        &--wrap {
-            width: $u-steps-item-number-width;
-            height: $u-steps-item-number-width;
-        }
-        &--text,
-        &--icon,
-        &--circle {
-            @include vue-flex;
-            align-items: center;
-            justify-content: center;
-            width: $u-steps-item-number-width;
-            height: $u-steps-item-number-width;
-            overflow: hidden;
-        }
-        &--text,
-        &--icon {
-            border: 1px solid var(--u-tips-color);
-            border-radius: 50%;
-        }
-    }
-
-    &__dot {
-        display: inline-block;
-        width: $u-steps-item-dot-width;
-        height: $u-steps-item-dot-width;
-        // @include vue-flex;
-        &--box {
-            width: $u-steps-item-dot-width;
-            height: $u-steps-item-dot-width;
-            border-radius: 50%;
-            overflow: hidden;
-        }
-    }
-
-    &__text--row {
-        margin-top: 14rpx;
-    }
-
-    &__text--column {
-        margin-left: 14rpx;
-        text-align: left;
-    }
-
-    &__desc--row {
-        // 保持单行，超宽由容器横向滚动承载
-        white-space: nowrap;
-        color: $u-type-info;
-        font-size: 24rpx;
-    }
-
-    &__desc--column {
-        margin-left: 14rpx;
-        text-align: left;
-        color: $u-type-info;
-        font-size: 24rpx;
-    }
-}
-</style>
+<template>
+    <view class="u-steps__item" :class="[customClass, 'u-steps__item--' + direction]" :style="$u.toStyle(customStyle)">
+        <view class="u-steps__item__num--wrap" v-if="mode == 'number'">
+            <view class="u-steps__item__num">
+                <view
+                    class="u-steps__item__num--text"
+                    v-if="currentIndex < childIndex"
+                    :style="numberStyle(childIndex)"
+                >
+                    <text :style="textStyle(childIndex)">
+                        {{ childIndex + 1 }}
+                    </text>
+                </view>
+                <view v-else class="u-steps__item__num--circle">
+                    <slot name="icon">
+                        <view class="u-steps__item__num--icon" :style="numberStyle(childIndex)">
+                            <u-icon size="22" color="var(--u-white-color)" :name="iconName"></u-icon>
+                        </view>
+                    </slot>
+                </view>
+            </view>
+        </view>
+        <view class="u-steps__item__dot" v-else-if="mode == 'dot'">
+            <view class="u-steps__item__dot--box" :style="dotStyle(childIndex)"></view>
+        </view>
+        <view>
+            <view class="u-line-1" :style="textStyle(childIndex)" :class="['u-steps__item__text--' + direction]">
+                <slot name="name">
+                    <text>
+                        {{ name }}
+                    </text>
+                </slot>
+            </view>
+            <view v-if="hasDesc" :class="['u-steps__item__desc--' + direction]">
+                <slot name="desc">
+                    <text>
+                        {{ desc }}
+                    </text>
+                </slot>
+            </view>
+        </view>
+        <view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="showLine">
+            <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
+        </view>
+        <!-- 横排模式下补左半连接线：节点宽度不一致时避免与上一个节点之间连线断开 -->
+        <view
+            class="u-steps__item__line"
+            :class="['u-steps__item__line--left--' + mode]"
+            v-if="direction === 'row' && childIndex > 0"
+        >
+            <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
+        </view>
+    </view>
+</template>
+<script lang="ts">
+export default {
+    name: 'u-step',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $u, useChildren } from '../..';
+import { StepProps } from './types';
+import uIcon from '../u-icon/u-icon.vue';
+import uLine from '../u-line/u-line.vue';
+
+const props = defineProps(StepProps);
+
+// 使用组件关系 hooks 获取父组件
+const { childIndex, parentExposed } = useChildren('u-step', 'u-steps');
+
+// 父组件的默认值（兼容没有父组件的场景）
+const parentData = computed(() => {
+    return (
+        parentExposed?.value?.props || {
+            mode: 'dot',
+            list: [],
+            type: 'primary',
+            current: 0,
+            activeColor: $u.color.primary,
+            unActiveColor: $u.color.info,
+            icon: 'checkmark',
+            direction: 'row'
+        }
+    );
+});
+
+const childLen = computed(() => {
+    if (parentExposed?.value?.childLen && typeof parentExposed?.value?.childLen === 'function') {
+        return parentExposed?.value?.childLen();
+    }
+    return 0;
+});
+
+const showLine = computed(() => childIndex.value < childLen.value - 1);
+
+// 计算属性，计算当前步骤的索引值
+// 如果 current 是字符串，则转换为数字，否则直接使用数字
+const currentIndex = computed(() =>
+    typeof parentData.value.current === 'string' ? Number(parentData.value.current) : parentData.value.current
+);
+const mode = computed(() => parentData.value.mode);
+const direction = computed(() => parentData.value.direction);
+// 计算方向样式
+
+const activeColor = computed(() => props.activeColor || parentData.value.activeColor);
+const unActiveColor = computed(() => props.unActiveColor || parentData.value.unActiveColor);
+
+const name = computed(() => props.name || '');
+const desc = computed(() => props.desc || '');
+const hasDesc = computed(() => !$u.test.isEmpty(desc));
+const iconName = computed(() => {
+    if (props.icon !== parentData.value.icon) {
+        if (props.icon !== 'checkmark') {
+            return props.icon;
+        } else if (parentData.value.icon !== 'checkmark') {
+            return parentData.value.icon;
+        }
+    }
+    return props.icon || parentData.value.icon;
+});
+
+// 计算当前步骤的样式
+const numberStyle = (index: number) => ({
+    backgroundColor: currentIndex.value < index ? 'var(--u-white-color)' : activeColor.value,
+    borderColor: currentIndex.value < index ? unActiveColor.value : activeColor.value
+});
+
+// 计算当前步骤的样式
+const dotStyle = (index: number) => ({
+    backgroundColor: index <= currentIndex.value ? activeColor.value : unActiveColor.value
+});
+
+// 计算当前步骤的文字样式
+const textStyle = (index: number) => ({
+    color: index <= currentIndex.value ? activeColor.value : unActiveColor.value
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+$u-steps-item-number-width: 44rpx;
+$u-steps-item-dot-width: 20rpx;
+
+.inline-block {
+    display: inline-block;
+}
+.u-steps__item {
+    flex: 1;
+    text-align: center;
+    position: relative;
+    min-width: 100rpx;
+    font-size: 26rpx;
+    color: var(--u-tips-color);
+    @include vue-flex;
+    flex-direction: column;
+
+    &--row {
+        // 步骤多时禁止收缩到内容宽度以下，超宽交给容器横向滚动，避免文字遮挡
+        flex: 1 0 auto;
+        align-items: center;
+        @include vue-flex;
+        flex-direction: column;
+
+        .u-steps__item__line {
+            position: absolute;
+            z-index: 0;
+
+            // 右半线：自本节点圆心向右伸至自身右边缘，与下一节点的左半线无缝衔接
+            &--dot {
+                width: calc(50% - #{$u-steps-item-dot-width} / 2);
+                top: calc(#{$u-steps-item-dot-width} / 2);
+                left: calc(#{$u-steps-item-dot-width} / 2 + 50%);
+            }
+
+            // 左半线：自自身左边缘向左半圆心（不含圆心），补偿右半线在宽度不同时够不到下一节点圆心
+            &--left--dot {
+                width: calc(50% - #{$u-steps-item-dot-width} / 2);
+                top: calc(#{$u-steps-item-dot-width} / 2);
+                right: calc(#{$u-steps-item-dot-width} / 2 + 50%);
+            }
+
+            &--number {
+                width: calc(50% - #{$u-steps-item-number-width} / 2);
+                top: calc(#{$u-steps-item-number-width} / 2);
+                left: calc(#{$u-steps-item-number-width} / 2 + 50%);
+            }
+
+            &--left--number {
+                width: calc(50% - #{$u-steps-item-number-width} / 2);
+                top: calc(#{$u-steps-item-number-width} / 2);
+                right: calc(#{$u-steps-item-number-width} / 2 + 50%);
+            }
+        }
+    }
+
+    &--column {
+        @include vue-flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        min-height: 120rpx;
+        padding-bottom: 6rpx;
+
+        .u-steps__item__line {
+            position: absolute;
+            z-index: 0;
+
+            &--dot {
+                height: calc(100% - #{$u-steps-item-dot-width});
+                top: calc(#{$u-steps-item-dot-width} + 6rpx);
+                left: calc(#{$u-steps-item-dot-width} / 2);
+            }
+
+            &--number {
+                height: calc(100% - #{$u-steps-item-number-width});
+                top: #{$u-steps-item-number-width};
+                left: calc(#{$u-steps-item-number-width} / 2);
+            }
+        }
+
+        .u-steps__item__dot {
+            margin-top: 6rpx;
+        }
+    }
+
+    &__num {
+        &--wrap {
+            width: $u-steps-item-number-width;
+            height: $u-steps-item-number-width;
+        }
+        &--text,
+        &--icon,
+        &--circle {
+            @include vue-flex;
+            align-items: center;
+            justify-content: center;
+            width: $u-steps-item-number-width;
+            height: $u-steps-item-number-width;
+            overflow: hidden;
+        }
+        &--text,
+        &--icon {
+            border: 1px solid var(--u-tips-color);
+            border-radius: 50%;
+        }
+    }
+
+    &__dot {
+        display: inline-block;
+        width: $u-steps-item-dot-width;
+        height: $u-steps-item-dot-width;
+        // @include vue-flex;
+        &--box {
+            width: $u-steps-item-dot-width;
+            height: $u-steps-item-dot-width;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+    }
+
+    &__text--row {
+        margin-top: 14rpx;
+    }
+
+    &__text--column {
+        margin-left: 14rpx;
+        text-align: left;
+    }
+
+    &__desc--row {
+        // 保持单行，超宽由容器横向滚动承载
+        white-space: nowrap;
+        color: $u-type-info;
+        font-size: 24rpx;
+    }
+
+    &__desc--column {
+        margin-left: 14rpx;
+        text-align: left;
+        color: $u-type-info;
+        font-size: 24rpx;
+    }
+}
+</style>

package/components/u-steps/types.ts

@@ -1,39 +1,39 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { StepDirection, StepMode, StepsListItem, ThemeType } from '../../types/global';
-import { getColor } from '../../';
-
-/**
- * StepsProps 步骤条 props 类型定义
- * @description 步骤条，支持横向/竖向、主题色、激活色等
- */
-
-export const StepsProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 步骤条的类型，dot|number */
-    mode: { type: String as PropType<StepMode>, default: 'dot' },
-    /** 步骤条的数据 */
-    list: { type: Array as PropType<StepsListItem[]>, default: () => [] },
-    /** 主题类型, primary|success|info|warning|error */
-    type: { type: String as PropType<ThemeType>, default: 'primary' },
-    /** 当前哪一步是激活的 */
-    current: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 激活步骤的颜色 */
-    activeColor: { type: String, default: () => getColor('primary') },
-    /** 未激活的颜色 */
-    unActiveColor: { type: String, default: () => getColor('info') },
-    /** 自定义图标 */
-    icon: { type: String, default: 'checkmark' },
-    /** step的排列方向，row-横向，column-竖向 */
-    direction: { type: String as PropType<StepDirection>, default: 'row' }
-};
-
-export type StepsProps = ExtractPropTypes<typeof StepsProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StepDirection, StepMode, StepsListItem, ThemeType } from '../../types/global';
+import { getColor } from '../../';
+
+/**
+ * StepsProps 步骤条 props 类型定义
+ * @description 步骤条，支持横向/竖向、主题色、激活色等
+ */
+
+export const StepsProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 步骤条的类型，dot|number */
+    mode: { type: String as PropType<StepMode>, default: 'dot' },
+    /** 步骤条的数据 */
+    list: { type: Array as PropType<StepsListItem[]>, default: () => [] },
+    /** 主题类型, primary|success|info|warning|error */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 当前哪一步是激活的 */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 激活步骤的颜色 */
+    activeColor: { type: String, default: () => getColor('primary') },
+    /** 未激活的颜色 */
+    unActiveColor: { type: String, default: () => getColor('info') },
+    /** 自定义图标 */
+    icon: { type: String, default: 'checkmark' },
+    /** step的排列方向，row-横向，column-竖向 */
+    direction: { type: String as PropType<StepDirection>, default: 'row' }
+};
+
+export type StepsProps = ExtractPropTypes<typeof StepsProps>;