uview-pro 0.5.14 → 0.5.16

package/components/u-switch/u-switch.vue

@@ -8,11 +8,11 @@
         <view
             class="u-switch__node node-class"
             :style="{
-                width: $u.addUnit(size ?? 50),
-                height: $u.addUnit(size ?? 50)
+                width: currentSize,
+                height: currentSize
             }"
         >
-            <u-loading :show="loading" class="u-switch__loading" :size="Number(size) * 0.6" :color="loadingColor" />
+            <u-loading :show="loading" class="u-switch__loading" :size="loadingSize" :color="loadingColor" />
         </view>
     </view>
 </template>
@@ -32,8 +32,9 @@ export default {
 
 <script setup lang="ts">
 import { computed, nextTick } from 'vue';
-import { $u } from '../..';
+import { $u, useChildren } from '../..';
 import { SwitchProps } from './types';
+import type { SizeType } from '../../types/global';
 
 /**
  * switch 开关选择器
@@ -52,6 +53,60 @@ import { SwitchProps } from './types';
 const props = defineProps(SwitchProps);
 
 const emit = defineEmits(['update:modelValue', 'change']);
+const { parentExposed } = useChildren('u-switch', 'u-form');
+
+// 根据 size 定义不同的配置
+const sizeConfig = {
+    small: {
+        size: 40
+    },
+    default: {
+        size: 50
+    },
+    large: {
+        size: 60
+    }
+};
+
+// 获取实际使用的 size 值（优先级：props.size > u-form.size）
+const actualSize = computed(() => {
+    // 优先使用 props 的 size 属性
+    if (props.size !== '') {
+        return String(props.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]);
+
+// 获取实际要使用的 size（如果是预设值使用配置值，否则作为自定义值处理）
+const currentSize = computed(() => {
+    if (isInSizeConfig.value) {
+        return $u.addUnit(currentSizeConfig.value.size);
+    }
+    // 自定义size值，直接作为fontSize处理
+    return $u.addUnit(actualSize.value);
+});
+
+// 加载动画尺寸，取当前size的60%
+const loadingSize = computed(() => {
+    const sizeNum = Number(currentSize.value.replace('rpx', ''));
+    return sizeNum * 0.6;
+});
 
 /**
  * 计算属性：是否处于激活状态
@@ -66,7 +121,7 @@ const isChecked = computed(() => {
  */
 const switchStyle = computed(() => {
     let style: Record<string, string> = {};
-    style.fontSize = props.size + 'rpx';
+    style.fontSize = currentSize.value;
     style.backgroundColor = isChecked.value ? props.activeColor : props.inactiveColor;
     return style;
 });

package/components/u-tabbar/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 import type { TabbarItem } from '../../types/global';
 import zIndex from '../../libs/config/zIndex';
 
@@ -8,7 +7,16 @@ import zIndex from '../../libs/config/zIndex';
  * @description 底部导航栏，支持凸起按钮、徽标、切换前回调等
  */
 export const TabbarProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否显示tabbar */
     show: { type: Boolean, default: true },
     /** v-model绑定当前激活项的值 */

package/components/u-table/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { TextAlign } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * TableProps 表格 props 类型定义
  * @description 表格组件，支持自定义边框、背景、对齐方式等
  */
 export const TableProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 表格边框的颜色 */
     borderColor: { type: String, default: 'var(--u-border-color)' },
     /** 单元格的内容对齐方式，作用类似css的text-align */

package/components/u-tabs/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { TabsItem } from '../../types/global';
-import { baseProps } from '../common/props';
 import { getColor } from '../../';
 
 /**
@@ -8,7 +7,16 @@ import { getColor } from '../../';
  * @description 标签组件，支持横向滚动、滑块、徽标等
  */
 export const TabsProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** tabs是否可以左右拖动 */
     isScroll: { type: Boolean, default: true },
     /** 标签数组 */

package/components/u-tabs-swiper/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { TabsSwiperAutoCenterMode, TabsSwiperListItem } from '../../types/global';
-import { baseProps } from '../common/props';
 import { getColor } from '../../';
 
 /**
@@ -8,7 +7,16 @@ import { getColor } from '../../';
  * @description 全屏选项卡，支持滑块、渐变色、滚动居中等
  */
 export const TabsSwiperProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** tabs是否可以左右拖动 */
     isScroll: { type: Boolean, default: true },
     /** 标签数组，元素为对象，如[{name: '推荐'}] */

package/components/u-tag/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { TagShape, TagMode, TagSize, ThemeType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * TagProps tag props 类型定义
  * @description 标签组件，支持多种类型、尺寸、形状、可关闭等
  */
 export const TagProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 类型，primary、success、info、warning、error */
     type: { type: String as PropType<ThemeType>, default: 'primary' },
     /** 是否禁用 */

package/components/u-tag/u-tag.vue

@@ -189,26 +189,31 @@ function close() {
 .u-mode-dark-primary {
     background-color: $u-type-primary;
     color: var(--u-white-color);
+    border: 1px solid $u-type-primary;
 }
 
 .u-mode-dark-success {
     background-color: $u-type-success;
     color: var(--u-white-color);
+    border: 1px solid $u-type-success;
 }
 
 .u-mode-dark-error {
     background-color: $u-type-error;
     color: var(--u-white-color);
+    border: 1px solid $u-type-error;
 }
 
 .u-mode-dark-warning {
     background-color: $u-type-warning;
     color: var(--u-white-color);
+    border: 1px solid $u-type-warning;
 }
 
 .u-mode-dark-info {
     background-color: $u-type-info;
     color: var(--u-white-color);
+    border: 1px solid $u-type-info;
 }
 
 .u-mode-plain-primary {

package/components/u-td/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * TdProps td props 类型定义
  * @description 表格单元格组件，支持宽度自定义
  */
 export const TdProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
     width: { type: [Number, String] as PropType<number | string>, default: 'auto' }
 };

package/components/u-text/types.ts

@@ -1,9 +1,17 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ThemeType } from '../../types/global';
-import { baseProps } from '../common/props';
 
 export const TextProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     // 主题颜色
     type: { type: String as PropType<ThemeType>, default: '' },
     /** 是否显示文本 */

package/components/u-textarea/types.ts

@@ -1,13 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
-import type { TextareaBorder } from '../../types/global';
+import type { TextareaBorder, SizeType } from '../../types/global';
 
 const textarea = {
     value: '',
     placeholder: '',
     placeholderClass: 'input-placeholder',
     placeholderStyle: 'color: var(--u-light-color)',
-    height: '100rpx',
+    height: '',
     confirmType: 'done',
     disabled: false,
     count: false,
@@ -24,11 +23,21 @@ const textarea = {
     holdKeyboard: false,
     maxlength: 140,
     border: 'surround',
-    formatter: null
+    formatter: null,
+    size: ''
 };
 
 export const TextareaProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     // 输入框的内容
     modelValue: { type: [String, Number] as PropType<string | number>, default: textarea.value },
     // 输入框为空时占位符
@@ -78,6 +87,8 @@ export const TextareaProps = {
     formatter: { type: Function as unknown as PropType<((val: any) => any) | null>, default: textarea.formatter },
     // 是否忽略组件内对文本合成系统事件的处理
     ignoreCompositionEvent: { type: Boolean as PropType<boolean>, default: true },
+    /** 文本域文字大小(默认default)，支持 small/default/large 预设值，也支持 16/16px/16rpx 等自定义值 */
+    size: { type: [String, Number] as PropType<SizeType | string | number>, default: textarea.size },
     /** 是否可清空(默认true) */
     clearable: { type: Boolean, default: true },
     /** 输入框的验证状态，用于错误时，边框是否改为红色 */

package/components/u-textarea/u-textarea.vue

@@ -16,7 +16,7 @@
             :value="innerValue"
             :style="getStyle"
             :placeholder="String(props.placeholder)"
-            :placeholder-style="$u.toStyle(props.placeholderStyle)"
+            :placeholder-style="getPlaceholderStyle"
             :placeholder-class="props.placeholderClass"
             :disabled="props.disabled"
             :focus="props.focus"
@@ -43,7 +43,8 @@
         <text
             class="u-textarea__count"
             :style="{
-                'background-color': props.disabled ? 'transparent' : 'var(--u-bg-white)'
+                'background-color': props.disabled ? 'transparent' : 'var(--u-bg-white)',
+                'font-size': currentCountSize
             }"
             v-if="props.count"
         >
@@ -53,9 +54,15 @@
         <view class="u-textarea__right-icon u-flex">
             <view
                 class="u-textarea__right-icon__clear u-textarea__right-icon__item"
-                v-if="clearable && focused && modelValue != '' && !disabled"
+                v-if="clearable && modelValue != '' && !disabled"
+                :class="{ 'u-hidden': !focused }"
             >
-                <u-icon size="32" name="close-circle-fill" color="var(--u-light-color)" @click="onClear" />
+                <u-icon
+                    name="close-circle-fill"
+                    color="var(--u-light-color)"
+                    :size="currentIconSize"
+                    @click="onClear"
+                />
             </view>
         </view>
     </view>
@@ -78,6 +85,7 @@ export default {
 import { ref, computed, watch, nextTick } from 'vue';
 import { TextareaProps } from './types';
 import { $u, useChildren } from '../../';
+import type { SizeType } from '../../types/global';
 
 /**
  * Textarea 文本域
@@ -128,6 +136,7 @@ const emit = defineEmits([
 ]);
 
 const { emitToParent } = useChildren('u-textarea', 'u-form-item');
+const { parentExposed } = useChildren('u-textarea', 'u-form');
 
 // state
 const innerValue = ref('');
@@ -137,6 +146,67 @@ const changeFromInner = ref(false);
 const innerFormatter = ref((v: any) => v);
 const validateState = ref(props.validateState); // 当前input的验证状态，用于错误时，边框是否改为红色
 
+// 根据 size 定义不同的配置
+const sizeConfig = {
+    small: {
+        fontSize: 24,
+        iconSize: 28,
+        countSize: 20,
+        textareaHeight: 70
+    },
+    default: {
+        fontSize: 28,
+        iconSize: 32,
+        countSize: 24,
+        textareaHeight: 100
+    },
+    large: {
+        fontSize: 32,
+        iconSize: 36,
+        countSize: 24,
+        textareaHeight: 130
+    }
+};
+
+// 获取实际使用的 size 值（优先级：props.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);
+// 计算统计显示的字体大小
+const currentCountSize = computed(() => $u.addUnit(currentSizeConfig.value.countSize));
+
 // watch value prop
 watch(
     () => props.modelValue,
@@ -200,14 +270,25 @@ const getStyle = computed(() => {
     let style: Record<string, any> = {};
     // 如果没有自定义高度，就根据textarea来分配一个默认的高度
     if (props.autoHeight) {
-        style.minHeight = $u.addUnit(props.height || '100rpx');
+        style.minHeight = $u.addUnit(props.height ? props.height : currentSizeConfig.value.textareaHeight);
         style.height = 'auto';
     } else {
-        style.height = $u.addUnit(props.height);
+        style.height = $u.addUnit(props.height ? props.height : currentSizeConfig.value.textareaHeight);
     }
+    // 根据 size 属性设置字体大小
+    style.fontSize = actualFontSize.value;
     return $u.toStyle(style, props.customStyle);
 });
 
+const getPlaceholderStyle = computed(() => {
+    return $u.toStyle(
+        {
+            fontSize: actualFontSize.value
+        },
+        props.placeholderStyle
+    );
+});
+
 function onFormItemError(status: boolean) {
     validateState.value = status;
 }

package/components/u-th/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * ThProps th props 类型定义
  * @description 表格表头单元格组件，支持宽度自定义
  */
 export const ThProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
     width: { type: [Number, String] as PropType<number | string>, default: 'auto' }
 };

package/components/u-time-line/u-time-line.vue

@@ -18,7 +18,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { baseProps } from '../common/props';
+import type { PropType } from 'vue';
 import { $u } from '../../';
 
 /**
@@ -28,7 +28,18 @@ import { $u } from '../../';
  * @example <u-time-line></u-time-line>
  */
 
-const props = defineProps({ ...baseProps });
+const props = defineProps({
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    }
+});
 </script>
 
 <style lang="scss" scoped>

package/components/u-time-line-item/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * TimeLineItemProps 时间轴节点 props 类型定义
  * @description 时间轴节点组件，支持自定义节点颜色、位置
  */
 export const TimeLineItemProps = {
-    ...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)' },
     /** 节点左边图标绝对定位的top值，单位rpx */

package/components/u-toast/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ThemeType, ToastPosition } from '../../types/global';
-import { baseProps } from '../common/props';
 import zIndex from '../../libs/config/zIndex';
 
 /**
@@ -8,7 +7,16 @@ import zIndex from '../../libs/config/zIndex';
  * @description 消息提示组件，支持 z-index 及多种配置项
  */
 export const ToastProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 层级 z-index */
     zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.toast },
     /** 提示类型，success/warning/error/loading 等 */

package/components/u-top-tips/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 TopTipsProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 导航栏高度，用于提示的初始化 */
     navbarHeight: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** z-index值 */

package/components/u-tr/types.ts

@@ -1,11 +1,19 @@
-import type { ExtractPropTypes } from 'vue';
-import { baseProps } from '../common/props';
+import type { ExtractPropTypes, PropType } from 'vue';
 
 /**
  * TrProps tr props 类型定义
  * @description 表格行组件，无特殊 props
  */
 export const TrProps = {
-    ...baseProps
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    }
 };
 export type TrProps = ExtractPropTypes<typeof TrProps>;

package/components/u-transition/types.ts

@@ -1,9 +1,17 @@
 import type { PropType } from 'vue';
-import { baseProps } from '../common/props';
 import type { TransitionDuration, TransitionPreset } from '../../types/global';
 
 export const TransitionProps = {
-    ...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: true