uview-pro 0.5.14 → 0.5.16

package/components/u-radio/u-radio.vue

@@ -1,13 +1,18 @@
 <template>
     <view class="u-radio" :style="$u.toStyle(radioStyle, customStyle)" :class="customClass">
         <view class="u-radio__icon-wrap" @tap="toggle" :class="iconClass" :style="$u.toStyle(iconStyle)">
-            <u-icon class="u-radio__icon-wrap__icon" name="checkbox-mark" :size="elIconSize" :color="iconColor" />
+            <u-icon
+                custom-class="u-radio__icon-wrap__icon"
+                name="checkbox-mark"
+                :size="elIconSize"
+                :color="iconColor"
+            />
         </view>
         <view
             class="u-radio__label"
             @tap="onClickLabel"
             :style="{
-                fontSize: $u.addUnit(labelSize)
+                fontSize: labelFontSize
             }"
         >
             <slot>
@@ -34,6 +39,7 @@ export default {
 import { computed } from 'vue';
 import { $u, useChildren } from '../..';
 import { RadioProps } from './types';
+import type { SizeType } from '../../types/global';
 
 /**
  * radio 单选框
@@ -56,6 +62,7 @@ const emit = defineEmits(['change']);
 
 // 使用组件关系 hooks 获取父组件
 const { parentExposed } = useChildren('u-radio', 'u-radio-group');
+const { parentExposed: formExposed } = useChildren('u-radio', 'u-form');
 
 // radio 的value值，id
 const radioValue = computed(() => {
@@ -81,6 +88,54 @@ const parentData = computed(() => {
     );
 });
 
+// 根据 size 定义不同的配置
+const sizeConfig = {
+    small: {
+        size: 28,
+        fontSize: 24,
+        iconSize: 16
+    },
+    default: {
+        size: 34,
+        fontSize: 28,
+        iconSize: 20
+    },
+    large: {
+        size: 40,
+        fontSize: 32,
+        iconSize: 24
+    }
+};
+
+// 获取实际使用的 size 值（优先级：props.size > u-radio-group.size > u-form.size）
+const actualSize = computed(() => {
+    // 优先使用 props 的 size 属性
+    if (props.size !== '') {
+        return String(props.size);
+    }
+    // 次优先：使用 u-radio-group 的 size 属性
+    if (parentExposed.value?.props?.size) {
+        return String(parentExposed.value.props.size);
+    }
+    // 最后：使用 u-form 的 size 属性（u-form 的 size 只支持预设值）
+    if (formExposed.value?.props?.size) {
+        return String(formExposed.value.props.size);
+    }
+    // 默认值
+    return 'default';
+});
+
+// 判断实际使用的 size 是否在预设配置中
+const isInSizeConfig = computed(() => actualSize.value in sizeConfig);
+
+// 获取预设 size（用于查找 sizeConfig 配置，如图标大小、高度等）
+const presetSize = computed(() => {
+    return (isInSizeConfig.value ? actualSize.value : 'default') as SizeType;
+});
+
+// 获取当前尺寸配置
+const currentSizeConfig = computed(() => sizeConfig[presetSize.value]);
+
 /**
  * 是否禁用，如果父组件u-radio-group禁用的话，将会忽略子组件的配置
  */
@@ -103,18 +158,31 @@ const elLabelDisabled = computed(() =>
  * 组件尺寸，对应size的值，默认值为34rpx
  * 兼容无size属性场景
  */
-const elSize = computed(() => {
-    // 若props无size，直接用默认值
-    // 兼容老代码，parentData.value.size 可能不存在
-    return (props as any).size ? (props as any).size : parentData.value.size ? parentData.value.size : 34;
-});
+const elSize = computed(() => currentSizeConfig.value.size);
 
 /**
  * 组件的勾选图标的尺寸，默认20
  */
-const elIconSize = computed(() =>
-    props.iconSize ? props.iconSize : parentData.value.iconSize ? parentData.value.iconSize : 20
-);
+const elIconSize = computed(() => {
+    if (props.iconSize) {
+        return props.iconSize;
+    }
+    if (parentExposed.value?.props?.iconSize) {
+        return parentExposed.value?.props?.iconSize;
+    }
+    if (isInSizeConfig.value) {
+        return currentSizeConfig.value.iconSize;
+    }
+    return 20;
+});
+
+// label字体大小，默认28
+const labelFontSize = computed(() => {
+    if (isInSizeConfig.value) {
+        return $u.addUnit(currentSizeConfig.value.fontSize);
+    }
+    return $u.addUnit(props.labelSize);
+});
 
 /**
  * 组件选中激活时的颜色

package/components/u-radio-group/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { Shape } from '../../types/global';
-import { baseProps } from '../common/props';
 import { getColor } from '../../';
 
 /**
@@ -8,7 +7,16 @@ import { getColor } from '../../';
  * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用
  */
 export const RadioGroupProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否禁用所有单选框 */
     disabled: { type: Boolean, default: false },
     /** 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 */
@@ -16,13 +24,13 @@ export const RadioGroupProps = {
     /** 选中状态下的颜色 */
     activeColor: { type: String, default: () => getColor('primary') },
     /** 组件的整体大小 */
-    size: { type: [String, Number] as PropType<number | string>, default: 34 },
+    size: { type: [String, Number] as PropType<number | string>, default: '' },
     /** 是否禁止点击提示语选中复选框 */
     labelDisabled: { type: Boolean, default: false },
     /** 形状，square为方形，circle为原型 */
     shape: { type: String as PropType<Shape>, default: 'circle' },
     /** 图标的大小，单位rpx */
-    iconSize: { type: [String, Number] as PropType<number | string>, default: 20 },
+    iconSize: { type: [String, Number] as PropType<number | string>, default: '' },
     /** 每个checkbox占u-checkbox-group的宽度 */
     width: { type: [String, Number] as PropType<number | string>, default: 'auto' },
     /** 是否每个checkbox都换行 */

package/components/u-rate/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * RateProps 评分组件 props 类型定义
  * @description 满意度调查、星型评分场景
  */
 export const RateProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** v-model双向绑定选中的星星数量 */
     modelValue: { type: [Number, String] as PropType<number | string>, default: -1 },
     /** 要显示的星星数量 */

package/components/u-read-more/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 import { getColor, useLocale } from '../../';
 
 const { t } = useLocale();
@@ -9,7 +8,16 @@ const { t } = useLocale();
  * @description 内容较长时收起/展开的场景
  */
 export const ReadMoreProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 默认的显示占位高度，单位为rpx */
     showHeight: { type: [Number, String] as PropType<number | string>, default: 400 },
     /** 展开后是否显示"收起"按钮 */

package/components/u-row/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { RowAlign, RowJustify } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * RowProps 行布局 props 类型定义
@@ -8,7 +7,16 @@ import { baseProps } from '../common/props';
  */
 
 export const RowProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 给col添加间距，左右边距各占一半 */
     gutter: { type: [String, Number] as PropType<number | string>, default: 20 },
     /** 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) */

package/components/u-row-notice/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { PlayState, ThemeType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * RowNoticeProps 水平滚动通告栏 props 类型定义
  * @description 水平滚动通告栏，支持主题、图标、关闭等
  */
 export const RowNoticeProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 显示的内容，数组 */
     list: { type: Array as PropType<string[]>, default: () => [] },
     /** 显示的主题，success|error|primary|info|warning|none */

package/components/u-safe-bottom/types.ts

@@ -0,0 +1,19 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * SafeBottomProps SafeBottom 底部安全区
+ */
+export const SafeBottomProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    }
+};
+
+export type SafeBottomProps = ExtractPropTypes<typeof SafeBottomProps>;

package/components/u-safe-bottom/u-safe-bottom.vue

@@ -21,7 +21,7 @@ export default {
 
 <script setup lang="ts">
 import { ref, computed, onMounted, type CSSProperties } from 'vue';
-import { SafeBottomProps } from './props';
+import { SafeBottomProps } from './types';
 import { $u } from '../../';
 
 /**

package/components/u-search/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { InputAlign, SearchShape } from '../../types/global';
-import { baseProps } from '../common/props';
 import { useLocale } from '../../';
 
 const { t } = useLocale();
@@ -10,7 +9,16 @@ const { t } = useLocale();
  * @description 集成常见搜索框功能，开箱即用
  */
 export const SearchProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 搜索框形状，round-圆形，square-方形 */
     shape: { type: String as PropType<SearchShape>, default: 'round' },
     /** 搜索框背景色，默认值var(--u-bg-gray-light) */

package/components/u-section/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 import { useLocale } from '../../';
 
 const { t } = useLocale();
@@ -11,7 +10,16 @@ const { t } = useLocale();
 export type FontSize = string | number;
 
 export const SectionProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 标题信息 */
     title: { type: String, default: '' },
     /** 右边副标题内容 */

package/components/u-select/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { SelectListItem, SelectMode } from '../../types/global';
-import { baseProps } from '../common/props';
 import { getColor, useLocale } from '../../';
 
 const { t } = useLocale();
@@ -10,7 +9,16 @@ const { t } = useLocale();
  * @description 用于单列、多列、多列联动的选择场景
  */
 export const SelectProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 列数据 */
     list: { type: Array as PropType<SelectListItem[] | SelectListItem[][]>, default: () => [] },
     /** 是否显示边框 */

package/components/u-skeleton/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 const skeleton = {
     loading: true,
@@ -20,7 +19,16 @@ const skeleton = {
  * @description 骨架屏用于页面数据加载时的占位
  */
 export const SkeletonProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     // 是否展示骨架组件
     loading: {
         type: Boolean,

package/components/u-slider/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 import { getColor } from '../../';
 
 /**
@@ -7,7 +6,16 @@ import { getColor } from '../../';
  * @description 滑块选择器，支持自定义样式、步长、禁用等
  */
 export const SliderProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    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 },
     /** 是否禁用滑块 */

package/components/u-status-bar/types.ts

@@ -0,0 +1,21 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const StatusBarProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 背景设置 */
+    background: {
+        type: String,
+        default: 'transparent'
+    }
+};
+
+export type StatusBarProps = ExtractPropTypes<typeof StatusBarProps>;

package/components/u-status-bar/u-status-bar.vue

@@ -22,7 +22,7 @@ export default {
 
 <script setup lang="ts">
 import { ref, computed, onMounted, type CSSProperties } from 'vue';
-import { StatusBarProps } from './props';
+import { StatusBarProps } from './types';
 import { $u } from '../../';
 
 /**

package/components/u-step/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 import type { StepMode, ThemeType } from '../../types/global';
 import { getColor } from '../../';
 
@@ -9,7 +8,16 @@ import { getColor } from '../../';
  */
 
 export const StepProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    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' },
     /** 主题类型, primary|success|info|warning|error */

package/components/u-steps/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { StepDirection, StepMode, StepsListItem, ThemeType } from '../../types/global';
-import { baseProps } from '../common/props';
 import { getColor } from '../../';
 
 /**
@@ -9,7 +8,16 @@ import { getColor } from '../../';
  */
 
 export const StepsProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    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' },
     /** 步骤条的数据 */

package/components/u-sticky/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 import zIndex from '../../libs/config/zIndex';
 
 /**
@@ -7,7 +6,16 @@ import zIndex from '../../libs/config/zIndex';
  * @description 吸顶组件，支持自定义吸顶距离、z-index、背景色等
  */
 export const StickyProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    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 },
     /** 列表中的索引值 */

package/components/u-subsection/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { SubsectionListItem, SubsectionMode } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * SubsectionProps 分段器 props 类型定义
@@ -8,7 +7,16 @@ import { baseProps } from '../common/props';
  */
 
 export const SubsectionProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** tab的数据 */
     list: { type: Array as PropType<Array<string | SubsectionListItem>>, default: () => [] },
     /** 当前活动的tab的index */

package/components/u-swipe-action/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { SwipeActionOption } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * swipeAction 左滑单元格 props 类型定义
@@ -8,7 +7,16 @@ import { baseProps } from '../common/props';
  */
 
 export const SwipeActionProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** index值，用于得知点击删除的是哪个按钮 */
     index: {
         type: [Number, String] as PropType<string | number>,

package/components/u-swiper/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ImgMode, SwiperIndicatorPosition, SwiperMode } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * SwiperProps 轮播图 props 类型定义
  * @description 轮播图，支持多种指示器、3D、自动播放等
  */
 export const SwiperProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 轮播数据列表，数组对象 */
     list: { type: Array as PropType<Array<Record<string, any>>>, default: () => [] },
     /** 是否显示标题 */

package/components/u-switch/types.ts

@@ -1,19 +1,27 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
-import { getColor } from '../../';
+import type { SizeType } from '../../types/global';
 
 /**
  * SwitchProps 开关选择器 props 类型定义
  * @description 选择开关，支持自定义颜色、尺寸、值等
  */
 export const SwitchProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否显示加载中状态 */
     loading: { type: Boolean, default: false },
     /** 是否禁用 */
     disabled: { type: Boolean, default: false },
     /** 开关尺寸，单位rpx */
-    size: { type: [Number, String] as PropType<number | string>, default: 50 },
+    size: { type: [Number, String] as PropType<number | string | SizeType>, default: '' },
     /** 打开时的颜色 */
     activeColor: { type: String, default: 'var(--u-type-primary)' },
     /** 关闭时的颜色 */