uview-pro 0.3.5 → 0.3.7

package/components/u-select/u-select.vue

@@ -30,9 +30,7 @@
                     >
                         {{ cancelText }}
                     </view>
-                    <view class="u-select__header__title">
-                        {{ title }}
-                    </view>
+                    <view class="u-select__header__title u-line-1"> {{ title }}</view>
                     <view
                         class="u-select__header__confirm u-select__header__btn"
                         :style="{ color: moving ? cancelColor : confirmColor }"
@@ -51,7 +49,7 @@
                         :value="defaultSelector"
                         @pickstart="pickstart"
                         @pickend="pickend"
-                        v-if="modelValue"
+                        v-if="modelValue && readyToRender"
                     >
                         <picker-view-column v-for="(item, index) in columnData" :key="index">
                             <view
@@ -83,7 +81,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { SelectProps } from './types';
 import type { SelectListItem } from '../../types/global';
 import { $u } from '../..';
@@ -97,7 +95,7 @@ import { $u } from '../..';
  * @property {Boolean} v-model 布尔值变量，用于控制选择器的弹出与收起
  * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
  * @property {String} cancel-color 取消按钮的颜色（默认#606266）
- * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
+ * @property {String} confirm-color 确认按钮的颜色(默认主题色primary)
  * @property {String} confirm-text 确认按钮的文字
  * @property {String} cancel-text 取消按钮的文字
  * @property {String} default-value 提供的默认选中的下标，见官网说明
@@ -117,6 +115,12 @@ const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'click']);
 const defaultSelector = ref<number[]>([0]);
 // picker-view的数据
 const columnData = ref<SelectListItem[][]>([]);
+// 控制 picker 是否渲染（等待初始化完成）
+const readyToRender = ref(false);
+// 保存用户上次确认的索引，如果用户未确认过，则为 null，首次打开会使用 props.defaultValue
+const savedSelector = ref<number[] | null>(
+    props.defaultValue && props.defaultValue.length ? props.defaultValue.slice() : null
+);
 // 每次队列发生变化时，保存选择的结果
 const selectValue = ref<SelectListItem[]>([]);
 // 上一次列变化时的index
@@ -135,8 +139,21 @@ const popupValue = computed({
 
 watch(
     () => props.modelValue,
-    val => {
-        if (val) setTimeout(() => init(), 10);
+    async val => {
+        if (val) {
+            // 等待一次 DOM 更新
+            await nextTick();
+            // 在 App（APP-PLUS）平台上，原生 picker 可能需要更长时间初始化
+            // 我们先执行 init，并在 init 完成后将 readyToRender 置为 true，保证 picker 在数据就绪后渲染
+            // #ifdef APP-PLUS
+            await new Promise(resolve => setTimeout(resolve, 20));
+            // #endif
+            init();
+            readyToRender.value = true;
+        } else {
+            // 关闭弹窗时复位
+            readyToRender.value = false;
+        }
     },
     { immediate: true }
 );
@@ -153,17 +170,31 @@ function pickend() {
 }
 
 function init() {
+    // 先计算列数
     setColumnNum();
+    // 根据 columnData 和 columnNum 设置默认选中
     setDefaultSelector();
+    // 准备列数据（部分模式需要依赖 defaultSelector 的值，但我们将先生成columnData的结构）
     setColumnData();
+    // 清空并设置 selectValue
+    selectValue.value = [];
     setSelectValue();
 }
 
 // 获取默认选中列下标
 function setDefaultSelector() {
-    // 如果没有传入默认选中的值，生成长度为columnNum，用0填充的数组
+    // 根据 preserveSelection 决定优先级：
+    // - 如果 preserveSelection 为 true（默认），优先使用用户已确认的选择 savedSelector（如果存在），否则使用 props.defaultValue
+    // - 如果 preserveSelection 为 false，则优先使用外部 props.defaultValue（如果存在），否则使用 savedSelector
+    let useDefault: number[] | null = null;
+    if (props.preserveSelection) {
+        useDefault = savedSelector.value && savedSelector.value.length ? savedSelector.value : props.defaultValue;
+    } else {
+        useDefault = props.defaultValue && props.defaultValue.length ? props.defaultValue : savedSelector.value;
+    }
+    // 如果没有传入默认选中的值，生成长度为 columnNum，用0填充的数组
     defaultSelector.value =
-        props.defaultValue.length == columnNum.value ? props.defaultValue : Array(columnNum.value).fill(0);
+        useDefault && useDefault.length == columnNum.value ? useDefault.slice() : Array(columnNum.value).fill(0);
     lastSelectIndex.value = [...defaultSelector.value];
 }
 // 计算列数
@@ -299,7 +330,7 @@ function columnChange(e: any) {
 function close() {
     emit('update:modelValue', false);
     // 重置default-value默认值
-    defaultSelector.value = [0];
+    // defaultSelector.value = [0];
 }
 // 点击确定或者取消
 function getResult(event: 'update:modelValue' | 'confirm' | 'cancel' | 'click' | null = null) {
@@ -308,6 +339,11 @@ function getResult(event: 'update:modelValue' | 'confirm' | 'cancel' | 'click' |
     // #endif
 
     if (event) emit(event, selectValue.value);
+    // 如果是用户确认，则保存已确认的索引，作为下次打开时的默认值
+    if (event === 'confirm') {
+        // deep copy
+        savedSelector.value = defaultSelector.value ? defaultSelector.value.slice() : null;
+    }
     close();
 }
 
@@ -344,12 +380,6 @@ function is2DList(list: SelectListItem[] | SelectListItem[][]): list is SelectLi
         }
     }
 
-    &__hader {
-        &__title {
-            color: $u-content-color;
-        }
-    }
-
     &--border {
         border-radius: 6rpx;
         border-radius: 4px;
@@ -361,7 +391,15 @@ function is2DList(list: SelectListItem[] | SelectListItem[][]): list is SelectLi
         align-items: center;
         justify-content: space-between;
         height: 80rpx;
-        padding: 0 40rpx;
+
+        &__title {
+            color: $u-content-color;
+        }
+
+        &__btn {
+            min-width: 150rpx;
+            padding: 20rpx 30rpx;
+        }
     }
 
     &__body {

package/components/u-slider/types.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import { baseProps } from '../common/props';
+import { $u } from '../../';
 
 /**
  * SliderProps 滑块选择器 props 类型定义
@@ -22,9 +23,9 @@ export const SliderProps = {
     /** 滑块条高度，单位rpx */
     height: { type: [Number, String] as PropType<number | string>, default: 6 },
     /** 进度条的激活部分颜色 */
-    activeColor: { type: String, default: '#2979ff' },
+    activeColor: { type: String, default: $u.color.primary },
     /** 进度条的背景颜色 */
-    inactiveColor: { type: String, default: '#c0c4cc' },
+    inactiveColor: { type: String, default: $u.color.lightColor },
     /** 滑块的背景颜色 */
     blockColor: { type: String, default: '#ffffff' },
     /** 用户对滑块的自定义颜色 */

package/components/u-slider/u-slider.vue

@@ -66,7 +66,7 @@ import { SliderProps } from './types';
  * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
  * @property {Number | String} height 滑块条高度，单位rpx（默认6）
  * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
- * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
+ * @property {String} activeColor 底部选择部分的背景颜色（默认主题色primary）
  * @property {String} blockColor 滑块颜色（默认#ffffff）
  * @property {Object} blockStyle 给滑块自定义样式，对象形式
  * @property {Boolean} disabled 是否禁用滑块(默认为false)
@@ -230,7 +230,7 @@ function onClick(event: any) {
     position: relative;
     border-radius: inherit;
     transition: width 0.2s;
-    background-color: #1989fa;
+    background-color: $u-type-primary;
 }
 
 .u-slider__button {

package/components/u-step/types.ts

@@ -0,0 +1,29 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+import type { StepMode, ThemeType } from '../../types/global';
+import { $u } from '../../';
+
+/**
+ * StepProps 步骤条 props 类型定义
+ * @description 步骤条，支持横向/竖向、主题色、激活色等
+ */
+
+export const StepProps = {
+    ...baseProps,
+    /** 步骤条的类型，dot|number */
+    mode: { type: String as PropType<StepMode>, default: 'dot' },
+    /** 主题类型, primary|success|info|warning|error */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 激活步骤的颜色 */
+    activeColor: { type: String, default: $u.color.primary },
+    /** 未激活的颜色 */
+    unActiveColor: { type: String, default: $u.color.info },
+    /** 自定义图标 */
+    icon: { type: String, default: 'checkmark' },
+    /** 标题 */
+    name: { type: String, default: '' },
+    /** 描述 */
+    desc: { type: String, default: '' }
+};
+
+export type StepProps = ExtractPropTypes<typeof StepProps>;

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

@@ -0,0 +1,264 @@
+<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="#ffffff" :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>
+</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';
+
+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 ? '#fff' : 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: #8799a3;
+    @include vue-flex;
+    flex-direction: column;
+
+    &--row {
+        align-items: center;
+        @include vue-flex;
+        flex-direction: column;
+
+        .u-steps__item__line {
+            position: absolute;
+            z-index: 0;
+
+            &--dot {
+                width: calc(100% - #{$u-steps-item-dot-width});
+                top: calc(#{$u-steps-item-dot-width} / 2);
+                left: calc(#{$u-steps-item-dot-width} / 2 + 50%);
+            }
+
+            &--number {
+                width: calc(100% - $u-steps-item-number-width);
+                top: calc(#{$u-steps-item-number-width} / 2);
+                left: 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 #8799a3;
+            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 {
+        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,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { StepDirection, StepMode, StepsListItem, ThemeType } from '../../types/global';
 import { baseProps } from '../common/props';
+import { $u } from '../../';
 
 /**
  * StepsProps 步骤条 props 类型定义
@@ -18,9 +19,9 @@ export const StepsProps = {
     /** 当前哪一步是激活的 */
     current: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 激活步骤的颜色 */
-    activeColor: { type: String, default: '#2979ff' },
+    activeColor: { type: String, default: $u.color.primary },
     /** 未激活的颜色 */
-    unActiveColor: { type: String, default: '#909399' },
+    unActiveColor: { type: String, default: $u.color.info },
     /** 自定义图标 */
     icon: { type: String, default: 'checkmark' },
     /** step的排列方向，row-横向，column-竖向 */

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

@@ -1,7 +1,16 @@
 <template>
     <view>
         <view class="u-steps" :class="customClass" :style="$u.toStyle(directionStyle, customStyle)">
-            <view
+            <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"
@@ -24,7 +33,7 @@
                 >
                     <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
                 </view>
-            </view>
+            </view> -->
         </view>
     </view>
 </template>
@@ -43,9 +52,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, getCurrentInstance } from 'vue';
 import { StepsProps } from './types';
-import { $u } from '../..';
+import { $u, useParent } from '../..';
 
 /**
  * steps 步骤条
@@ -64,118 +73,20 @@ import { $u } from '../..';
 
 const props = defineProps(StepsProps);
 
-// 计算属性，计算当前步骤的索引值
-// 如果 current 是字符串，则转换为数字，否则直接使用数字
-const currentIndex = computed(() => (typeof props.current === 'string' ? Number(props.current) : props.current));
-
+const { children } = useParent('u-steps');
 // 计算方向样式
 const directionStyle = computed(() => ({ flexDirection: props.direction as 'row' | 'column' }));
 
-// 计算当前步骤的样式
-const numberStyle = (index: number) => ({
-    backgroundColor: currentIndex.value < index ? 'transparent' : props.activeColor,
-    borderColor: currentIndex.value < index ? props.unActiveColor : props.activeColor
-});
-
-// 计算当前步骤的样式
-const dotStyle = (index: number) => ({
-    backgroundColor: index <= currentIndex.value ? props.activeColor : props.unActiveColor
-});
-
-// 计算当前步骤的文字样式
-const textStyle = (index: number) => ({
-    color: index <= currentIndex.value ? props.activeColor : props.unActiveColor
+defineExpose({
+    props,
+    childLen: () => children.length
 });
 </script>
 
 <style lang="scss" scoped>
 @import '../../libs/css/style.components.scss';
 
-$u-steps-item-number-width: 44rpx;
-$u-steps-item-dot-width: 20rpx;
-
 .u-steps {
     @include vue-flex;
-
-    .u-steps__item {
-        flex: 1;
-        text-align: center;
-        position: relative;
-        min-width: 100rpx;
-        font-size: 26rpx;
-        color: #8799a3;
-        @include vue-flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-
-        &--row {
-            @include vue-flex;
-            flex-direction: column;
-
-            .u-steps__item__line {
-                position: absolute;
-                z-index: 0;
-                left: 75%;
-                width: 50%;
-
-                &--dot {
-                    top: calc(#{$u-steps-item-dot-width} / 2);
-                }
-
-                &--number {
-                    top: calc(#{$u-steps-item-number-width} / 2);
-                }
-            }
-        }
-
-        &--column {
-            @include vue-flex;
-            flex-direction: row;
-            justify-content: flex-start;
-            min-height: 120rpx;
-
-            .u-steps__item__line {
-                position: absolute;
-                z-index: 0;
-                height: 50%;
-                top: 75%;
-
-                &--dot {
-                    left: calc(#{$u-steps-item-dot-width} / 2);
-                }
-
-                &--number {
-                    left: calc(#{$u-steps-item-number-width} / 2);
-                }
-            }
-        }
-
-        &__num {
-            @include vue-flex;
-            align-items: center;
-            justify-content: center;
-            width: $u-steps-item-number-width;
-            height: $u-steps-item-number-width;
-            border: 1px solid #8799a3;
-            border-radius: 50%;
-            overflow: hidden;
-        }
-
-        &__dot {
-            width: $u-steps-item-dot-width;
-            height: $u-steps-item-dot-width;
-            @include vue-flex;
-            border-radius: 50%;
-        }
-
-        &__text--row {
-            margin-top: 14rpx;
-        }
-
-        &__text--column {
-            margin-left: 14rpx;
-        }
-    }
 }
 </style>

package/components/u-switch/types.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import { baseProps } from '../common/props';
+import { $u } from '../../';
 
 /**
  * SwitchProps 开关选择器 props 类型定义
@@ -14,7 +15,7 @@ export const SwitchProps = {
     /** 开关尺寸，单位rpx */
     size: { type: [Number, String] as PropType<number | string>, default: 50 },
     /** 打开时的颜色 */
-    activeColor: { type: String, default: '#2979ff' },
+    activeColor: { type: String, default: $u.color.primary },
     /** 关闭时的颜色 */
     inactiveColor: { type: String, default: '#ffffff' },
     /** v-model 绑定值，是否选中 */