uview-pro 0.5.14 → 0.5.16

package/components/u-city-select/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-city-select 城市选择器 Props
  * @description 用于选择省、市、区三级行政区域，支持回显和自定义初始值。
  */
 export const CitySelectProps = {
-    ...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: Boolean, default: false },
     /** 默认选中的省市区名称数组 */

package/components/u-col/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { AlignType, JustifyType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-col 布局单元格 Props
@@ -14,7 +13,16 @@ import { baseProps } from '../common/props';
  */
 
 export const ColProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 占父容器宽度的多少等分，总分为12份 */
     span: { type: [Number, String] as PropType<number | string>, default: 12 },
     /** 指定栅格左侧的间隔数(总12栏) */

package/components/u-collapse/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-collapse 手风琴 Props
@@ -13,7 +12,16 @@ import { baseProps } from '../common/props';
  * @property {String} hoverClass 样式类名，按下时有效（默认u-hover-class）
  */
 export const CollapseProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否手风琴模式 */
     accordion: { type: Boolean, default: true },
     /** 头部的样式 */

package/components/u-collapse-item/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { TextAlign } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-collapse-item 手风琴Item Props
  * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
  */
 export const CollapseItemProps = {
-    ...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-column-notice/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { Direction, PlayState, ScrollDirection, ThemeType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-column-notice 通告栏 Props
  */
 export const ColumnNoticeProps = {
-    ...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 */

package/components/u-config-provider/types.ts

@@ -1,10 +1,18 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 import { config, configProvider } from '../../libs';
 import type { Theme } from '../../types/global';
 
 export const ConfigProviderProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /**
      * 主题风格，可选值：
      * - 'light': 强制亮色模式（默认）

package/components/u-count-down/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-count-down 倒计时 Props
  * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
  */
 export const CountDownProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 倒计时的时间，秒为单位 */
     timestamp: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 是否自动开始倒计时 */

package/components/u-count-to/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-count-to 数字滚动 Props
  * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
  */
 export const CountToProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 开始的数值，默认从0增长到某一个数 */
     startVal: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 要滚动的目标数值，必须 */

package/components/u-divider/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ThemeType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-divider 分割线 Props
  * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
  */
 export const DividerProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 单一边divider横线的宽度(数值)，单位rpx。或者百分比 */
     halfWidth: { type: [Number, String] as PropType<number | string>, default: 150 },
     /** divider横线的颜色，如设置 */

package/components/u-dropdown/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 DropdownProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 菜单标题和选项的激活态颜色 */
     activeColor: { type: String, default: () => getColor('primary') },
     /** 菜单标题和选项的未激活态颜色 */

package/components/u-dropdown-item/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { OptionType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-dropdown-item 下拉菜单项 Props
@@ -14,7 +13,16 @@ import { baseProps } from '../common/props';
  */
 
 export const DropdownItemProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 当前选中项的value值 */
     modelValue: { type: [Number, String, Array] as PropType<number | string | any[]>, default: '' },
     /** 菜单项标题 */

package/components/u-empty/types.ts

@@ -1,11 +1,19 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-empty 组件 Props 类型定义
  */
 export const EmptyProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 图标路径 */
     src: { type: String, default: '' },
     /** 提示文字 */

package/components/u-fab/types.ts

@@ -1,6 +1,5 @@
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import type { FabDirection, FabGap, FabPosition, ThemeType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * fab 悬浮按钮类型定义
@@ -8,7 +7,16 @@ import { baseProps } from '../common/props';
  */
 
 export const FabProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 按钮的预置样式，primary，info，error，warning，success */
     type: { type: String as PropType<ThemeType>, default: 'primary' },
     /** 是否禁止状态 */

package/components/u-field/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { InputAlign, InputConfirmType, InputLabelPosition, InputType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-field 组件 Props 类型定义
  * @description 表单输入框属性
  */
 export const FieldProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** label左边的图标，限uView的图标名称 */
     icon: { type: String, default: '' },
     /** 输入框右边的图标名称，限uView的图标名称（默认false） */

package/components/u-form/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import type { FormRules, InputAlign, FormErrorType, InputLabelPosition } from '../../types/global';
-import { baseProps } from '../common/props';
+import type { FormRules, InputAlign, FormErrorType, InputLabelPosition, SizeType } from '../../types/global';
 
 /**
  * u-form 组件 Props 类型定义
  * @description 表单组件属性
  */
 export const FormProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 当前form的需要验证字段的集合 */
     model: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     /** 表单验证规则 */
@@ -23,7 +31,9 @@ export const FormProps = {
     /** label字体的对齐方式 */
     labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
     /** label的样式，对象形式 */
-    labelStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+    labelStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 表单内组件的大小，仅支持预设值 default/small/large（默认 default） */
+    size: { type: String as PropType<SizeType>, default: 'default' }
 };
 
 export type FormProps = ExtractPropTypes<typeof FormProps>;

package/components/u-form-item/types.ts

@@ -1,12 +1,20 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { InputAlign, InputLabelPosition } from '../../types/global';
-import { baseProps } from '../common/props';
+import type { InputAlign, InputLabelPosition, SizeType } from '../../types/global';
 
 /**
  * form-item 表单item Props
  */
 export const FormItemProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** input的label提示语 */
     label: {
         type: String,
@@ -76,6 +84,11 @@ export const FormItemProps = {
     required: {
         type: Boolean,
         default: false
+    },
+    /** 表单内组件的大小，仅支持预设值 default/small/large */
+    size: {
+        type: String as PropType<SizeType | string>,
+        default: ''
     }
 };
 

package/components/u-form-item/u-form-item.vue

@@ -36,8 +36,9 @@
                     <view class="u-form-item--left__content__icon" v-if="leftIcon || $slots.leftIcon">
                         <slot name="leftIcon">
                             <u-icon
-                                :custom-prefix="leftIconPrefix"
                                 :name="leftIcon"
+                                :size="currentIconSize"
+                                :custom-prefix="leftIconPrefix"
                                 :custom-style="leftIconStyle"
                             ></u-icon>
                         </slot>
@@ -46,6 +47,7 @@
                         class="u-form-item--left__content__label"
                         :style="[
                             elLabelStyle,
+                            { 'font-size': actualFontSize },
                             {
                                 'justify-content':
                                     elLabelAlign == 'left'
@@ -75,6 +77,7 @@
                             <u-icon
                                 v-if="rightIcon"
                                 :name="rightIcon"
+                                :size="currentIconSize"
                                 :custom-prefix="rightIconPrefix"
                                 :custom-style="rightIconStyle"
                             ></u-icon>
@@ -88,10 +91,13 @@
             class="u-form-item__message"
             v-if="validateState === 'error' && showError('message')"
             :style="{
-                paddingLeft: elLabelPosition == 'left' && label ? $u.addUnit(elLabelWidth) : '0'
+                paddingLeft: elLabelPosition == 'left' && label ? $u.addUnit(elLabelWidth) : '0',
+                fontSize: $u.addUnit(currentSizeConfig.messageSize),
+                lineHeight: $u.addUnit(currentSizeConfig.messageSize)
             }"
-            >{{ validateMessage }}</view
         >
+            {{ validateMessage }}
+        </view>
     </view>
 </template>
 
@@ -114,11 +120,10 @@ import { $u, useChildren, useParent } from '../..';
 // @ts-ignore
 import schema from '../../libs/util/async-validator';
 import { FormItemProps } from './types';
+import type { SizeType } from '../../types/global';
 // 去除警告信息
 schema.warning = function () {};
 
-const { broadcast } = useParent('u-form-item');
-
 /**
  * form-item 表单item
  * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
@@ -143,6 +148,7 @@ const props = defineProps(FormItemProps);
 // 插槽
 const $slots = useSlots();
 
+const { broadcast } = useParent('u-form-item');
 const { parentExposed } = useChildren('u-form-item', 'u-form');
 
 // 组件状态
@@ -168,6 +174,62 @@ const showError = computed(() => (type: string) => {
     else return false;
 });
 
+// 根据 size 定义不同的配置
+const sizeConfig = {
+    small: {
+        fontSize: 24,
+        iconSize: 28,
+        messageSize: 20
+    },
+    default: {
+        fontSize: 28,
+        iconSize: 32,
+        messageSize: 24
+    },
+    large: {
+        fontSize: 32,
+        iconSize: 36,
+        messageSize: 28
+    }
+};
+
+// 获取实际使用的 size 值（优先级：u-textarea.size > u-form.size）
+const actualSize = computed(() => {
+    // 优先使用 props 的 size 属性
+    if (props.size !== '') {
+        return String(props.size);
+    }
+    // 次优先：使用 u-form 的 size 属性（u-form 的 size 只支持预设值）
+    if (parentExposed.value?.props?.size) {
+        return String(parentExposed.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]);
+
+// 获取实际要使用的 font-size（如果是预设值使用配置值，否则作为自定义值处理）
+const actualFontSize = computed(() => {
+    if (isInSizeConfig.value) {
+        return $u.addUnit(currentSizeConfig.value.fontSize);
+    }
+    // 自定义size值，直接作为fontSize处理
+    return $u.addUnit(actualSize.value);
+});
+
+// 计算当前图标大小
+const currentIconSize = computed(() => currentSizeConfig.value.iconSize);
+
 // 监听校验状态和父表单 errorType 变化
 watch(validateState, () => {
     broadcastInputError();
@@ -233,7 +295,7 @@ const elBorderBottom = computed(() => {
         ? props.borderBottom
         : parentData.value.borderBottom
           ? parentData.value.borderBottom
-          : true;
+          : false;
 });
 
 // 事件派发/广播工具
@@ -394,7 +456,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
     // 如果当前没有prop的话表示当前不要进行删除（因为没有注入）
     if (parentExposed?.value && props.prop) {
-        parentExposed?.value?.removeField({ prop: props.prop });
+        parentExposed?.value?.removeField && parentExposed?.value?.removeField({ prop: props.prop });
     }
 });
 
@@ -446,6 +508,8 @@ defineExpose({
 
             &__icon {
                 margin-right: 8rpx;
+                @include vue-flex;
+                align-items: center;
             }
 
             &--required {
@@ -474,16 +538,16 @@ defineExpose({
 
             &__slot {
                 flex: 1;
-                /* #ifndef MP */
                 @include vue-flex;
                 align-items: center;
-                /* #endif */
             }
 
             &__icon {
                 margin-left: 10rpx;
                 color: $u-light-color;
                 font-size: 30rpx;
+                @include vue-flex;
+                align-items: center;
             }
         }
     }

package/components/u-full-screen/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-full-screen 组件 Props 类型定义
  * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
  */
 export const FullScreenProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否显示弹窗 */
     show: { type: Boolean, default: false },
     /** 弹窗标题 */

package/components/u-gap/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-gap 组件 Props 类型定义
  * @description 间隔槽组件属性
  */
 export const GapProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 背景颜色 */
     bgColor: { type: String, default: 'transparent' },
     /** 高度 */

package/components/u-grid/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { InputAlign } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-grid 组件 Props 类型定义
  * @description 宫格组件属性
  */
 export const GridProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 分成几列 */
     col: { type: [Number, String] as PropType<string | number>, default: 3 },
     /** 是否显示边框 */

package/components/u-grid-item/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-grid-item 组件 Props 类型定义
  * @description 宫格项组件属性
  */
 export const GridItemProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 背景颜色 */
     bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 点击时返回的index */