uview-pro 0.3.8 → 0.3.9

package/changelog.md

@@ -1,3 +1,19 @@
+## 0.3.9（2025-11-05）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **types:** 修正组件声明文件中uLoadmore的命名大小写问题 ([eb69b18](https://github.com/anyup/uView-Pro/commit/eb69b18d969dac13a75375501018edc4f3097e33))
+- **loadmore:** 修复 u-loadmore 组件使用类型声明报错问题 ([92facfd](https://github.com/anyup/uView-Pro/commit/92facfdb5b2b57bcd634d93412c90661c5f6e59d))
+
+### ✨ Features | 新功能
+
+- **theme:** 新增本地主题文件支持 ([a989314](https://github.com/anyup/uView-Pro/commit/a989314a7b691e94ed81e524100e70d6e9a22a12))
+- **theme:** 实现运行时主题变更功能，新增 setTheme 函数 ([12765d0](https://github.com/anyup/uView-Pro/commit/12765d07244a9d6ca49c4dd34d81f66a61c87c6d))
+
+### 👥 Contributors
+
+<a href="https://github.com/liujiayii"><img src="https://github.com/liujiayii.png?size=40" width="40" height="40" alt="liujiayii" title="liujiayii"/></a> <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a>
+
 ## 0.3.8（2025-11-04）
 
 ### 📦‍ Build System | 打包构建

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

@@ -34,7 +34,7 @@ export const ActionSheetProps = {
     /** 取消按钮的文字提示 */
     cancelText: { type: String, default: '取消' },
     /** 字体颜色 */
-    color: { type: String, default: $u.color.mainColor },
+    color: { type: String, default: () => $u.color.mainColor },
     /** 字体大小 */
     fontSize: { type: [String, Number], default: '32rpx' },
     /** 是否异步关闭 */

package/components/u-action-sheet-item/types.ts

@@ -15,7 +15,7 @@ export const ActionSheetItemProps = {
     /** 边距 */
     padding: { type: [Number, String] as PropType<number | string>, default: '34rpx 0' },
     /** 字体颜色 */
-    color: { type: String, default: $u.color.mainColor },
+    color: { type: String, default: () => $u.color.mainColor },
     /** 字体大小 */
     fontSize: { type: [String, Number], default: '32rpx' },
     /** 是否禁用 */

package/components/u-calendar/types.ts

@@ -40,13 +40,13 @@ export const CalendarProps = {
     /** 默认日期字体颜色 */
     color: { type: String, default: '#303133' },
     /** 选中|起始结束日期背景色 */
-    activeBgColor: { type: String, default: $u.color.primary },
+    activeBgColor: { type: String, default: () => $u.color.primary },
     /** 选中|起始结束日期字体颜色 */
     activeColor: { type: String, default: '#ffffff' },
     /** 范围内日期背景色 */
     rangeBgColor: { type: String, default: 'rgba(41,121,255,0.13)' },
     /** 范围内日期字体颜色 */
-    rangeColor: { type: String, default: $u.color.primary },
+    rangeColor: { type: String, default: () => $u.color.primary },
     /** mode=range时生效，起始日期自定义文案 */
     startText: { type: String, default: '开始' },
     /** mode=range时生效，结束日期自定义文案 */

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

@@ -21,7 +21,7 @@ export const CheckboxGroupProps = {
     /** 形状，square为方形，circle为原型 */
     shape: { type: String as PropType<Shape>, default: 'square' },
     /** 选中状态下的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 组件的整体大小 */
     size: { type: [String, Number], default: 34 },
     /** 每个checkbox占u-checkbox-group的宽度 */

package/components/u-dropdown/types.ts

@@ -9,9 +9,9 @@ import { $u } from '../../';
 export const DropdownProps = {
     ...baseProps,
     /** 菜单标题和选项的激活态颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 菜单标题和选项的未激活态颜色 */
-    inactiveColor: { type: String, default: $u.color.contentColor },
+    inactiveColor: { type: String, default: () => $u.color.contentColor },
     /** 点击遮罩是否关闭菜单 */
     closeOnClickMask: { type: Boolean, default: true },
     /** 点击当前激活项标题是否关闭菜单 */

package/components/u-index-list/types.ts

@@ -34,7 +34,7 @@ export const IndexListProps = {
     /** 锚点和右边索引字符高亮颜色 */
     activeColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     }
 };
 

package/components/u-link/types.ts

@@ -9,7 +9,7 @@ export const LinkProps = {
     /** 文字颜色 */
     color: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 字体大小，单位rpx */
     fontSize: {

package/components/u-message-input/types.ts

@@ -50,12 +50,12 @@ export const MessageInputProps = {
     /** 激活样式 */
     activeColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 未激活的样式 */
     inactiveColor: {
         type: String,
-        default: $u.color.contentColor
+        default: () => $u.color.contentColor
     },
     /** 输入框的大小，单位rpx，宽等于高 */
     width: {

package/components/u-modal/types.ts

@@ -59,12 +59,12 @@ export const ModalProps = {
     /** 确认按钮颜色 */
     confirmColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 取消文字颜色 */
     cancelColor: {
         type: String,
-        default: $u.color.contentColor
+        default: () => $u.color.contentColor
     },
     /** 圆角值 */
     borderRadius: {

package/components/u-picker/types.ts

@@ -62,12 +62,12 @@ export const PickerProps = {
     /** "取消"按钮的颜色 */
     cancelColor: {
         type: String,
-        default: $u.color.contentColor
+        default: () => $u.color.contentColor
     },
     /** "确定"按钮的颜色 */
     confirmColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02 */
     defaultTime: {

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

@@ -14,7 +14,7 @@ export const RadioGroupProps = {
     /** 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 */
     modelValue: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 选中状态下的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 组件的整体大小 */
     size: { type: [String, Number] as PropType<number | string>, default: 34 },
     /** 是否禁止点击提示语选中复选框 */

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

@@ -17,7 +17,7 @@ export const ReadMoreProps = {
     /** 展开时的提示文字 */
     openText: { type: String, default: '收起' },
     /** 提示的文字颜色 */
-    color: { type: String, default: $u.color.primary },
+    color: { type: String, default: () => $u.color.primary },
     /** 提示文字的大小 */
     fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
     /** 是否显示阴影 */

package/components/u-select/types.ts

@@ -16,9 +16,9 @@ export const SelectProps = {
     /** 通过双向绑定控制组件的弹出与收起 */
     modelValue: { type: Boolean, default: false },
     /** "取消"按钮的颜色 */
-    cancelColor: { type: String, default: $u.color.contentColor },
+    cancelColor: { type: String, default: () => $u.color.contentColor },
     /** "确定"按钮的颜色 */
-    confirmColor: { type: String, default: $u.color.primary },
+    confirmColor: { type: String, default: () => $u.color.primary },
     /** 弹出的z-index值 */
     zIndex: { type: [String, Number] as PropType<string | number>, default: 0 },
     /** 是否开启底部安全区适配 */

package/components/u-slider/types.ts

@@ -23,9 +23,9 @@ export const SliderProps = {
     /** 滑块条高度，单位rpx */
     height: { type: [Number, String] as PropType<number | string>, default: 6 },
     /** 进度条的激活部分颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 进度条的背景颜色 */
-    inactiveColor: { type: String, default: $u.color.lightColor },
+    inactiveColor: { type: String, default: () => $u.color.lightColor },
     /** 滑块的背景颜色 */
     blockColor: { type: String, default: '#ffffff' },
     /** 用户对滑块的自定义颜色 */

package/components/u-step/types.ts

@@ -15,9 +15,9 @@ export const StepProps = {
     /** 主题类型, primary|success|info|warning|error */
     type: { type: String as PropType<ThemeType>, default: 'primary' },
     /** 激活步骤的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 未激活的颜色 */
-    unActiveColor: { type: String, default: $u.color.info },
+    unActiveColor: { type: String, default: () => $u.color.info },
     /** 自定义图标 */
     icon: { type: String, default: 'checkmark' },
     /** 标题 */

package/components/u-steps/types.ts

@@ -19,9 +19,9 @@ export const StepsProps = {
     /** 当前哪一步是激活的 */
     current: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 激活步骤的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 未激活的颜色 */
-    unActiveColor: { type: String, default: $u.color.info },
+    unActiveColor: { type: String, default: () => $u.color.info },
     /** 自定义图标 */
     icon: { type: String, default: 'checkmark' },
     /** step的排列方向，row-横向，column-竖向 */

package/components/u-switch/types.ts

@@ -15,7 +15,7 @@ export const SwitchProps = {
     /** 开关尺寸，单位rpx */
     size: { type: [Number, String] as PropType<number | string>, default: 50 },
     /** 打开时的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 关闭时的颜色 */
     inactiveColor: { type: String, default: '#ffffff' },
     /** v-model 绑定值，是否选中 */

package/components/u-tabs/types.ts

@@ -22,9 +22,9 @@ export const TabsProps = {
     /** 过渡动画时长, 单位s */
     duration: { type: [String, Number] as PropType<number | string>, default: 0.5 },
     /** 选中项的主题颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 未选中项的颜色 */
-    inactiveColor: { type: String, default: $u.color.mainColor },
+    inactiveColor: { type: String, default: () => $u.color.mainColor },
     /** 菜单底部移动的bar的宽度，单位rpx */
     barWidth: { type: [String, Number] as PropType<number | string>, default: 40 },
     /** 移动bar的高度 */

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

@@ -22,9 +22,9 @@ export const TabsSwiperProps = {
     /** tabs组件外部swiper的宽度，单位rpx */
     swiperWidth: { type: [String, Number] as PropType<number | string>, default: 750 },
     /** 滑块和激活tab文字的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** tabs文字颜色 */
-    inactiveColor: { type: String, default: $u.color.mainColor },
+    inactiveColor: { type: String, default: () => $u.color.mainColor },
     /** 滑块宽度，单位rpx */
     barWidth: { type: [Number, String] as PropType<number | string>, default: 40 },
     /** 滑块高度，单位rpx */

package/index.ts

@@ -15,9 +15,9 @@ declare const uni: {
 const install = (app: any, options?: UViewProOptions): void => {
     uni.$u = $u;
     if (options) {
-        // 配置主题
+        // 配置主题：使用 $u.setTheme 以就地更新 reactive $u.color
         if (options.theme) {
-            $u.color = $u.deepMerge($u.color, options.theme);
+            $u.setTheme?.(options.theme);
         }
         // 设置调试模式
         logger

package/libs/function/color.ts

@@ -1,6 +1,8 @@
-import type { ThemeColor } from '../../types/global';
+import type { ColorType, ThemeColor } from '../../types/global';
+import { reactive } from 'vue';
 
-const color: ThemeColor = {
+// 使用 reactive 包装颜色对象，使其在运行时可被响应式读取与更新
+const color: ThemeColor = reactive({
     primary: '#2979ff',
     primaryDark: '#2b85e4',
     primaryDisabled: '#a0cfff',
@@ -32,6 +34,10 @@ const color: ThemeColor = {
     tipsColor: '#909399',
     lightColor: '#c0c4cc',
     borderColor: '#e4e7ed'
-};
+});
+
+export function getColor(name: ColorType) {
+    return (color as any)[name] || '';
+}
 
 export default color;

package/libs/index.ts

@@ -12,6 +12,8 @@ import colorGradients from './function/colorGradient';
 import guid from './function/guid';
 // 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
 import color from './function/color';
+import { getColor } from './function/color';
+import type { ThemeColor } from '../types/global';
 // 根据type获取图标名称
 import type2icon from './function/type2icon';
 // 打乱数组的顺序
@@ -242,6 +244,25 @@ export function kebabCase(word: string): string {
     return newWord;
 }
 
+/**
+ * 运行时设置主题颜色（就地合并到 reactive 的 $u.color）
+ * @param theme Partial<ThemeColor>
+ */
+function setTheme(theme: Partial<ThemeColor> | undefined) {
+    if (!theme) return;
+    try {
+        const merged = deepMerge($u.color, theme);
+        Object.keys(merged).forEach(k => {
+            $u.color[k] = (merged as any)[k];
+        });
+    } catch (e) {
+        // 兜底：直接 assign
+        Object.keys(theme).forEach(k => {
+            $u.color[k] = (theme as any)[k];
+        });
+    }
+}
+
 export {
     queryParams,
     route,
@@ -249,6 +270,7 @@ export {
     timeFrom,
     guid,
     color,
+    getColor,
     sys,
     os,
     type2icon,
@@ -268,7 +290,8 @@ export {
     clipboard,
     config,
     zIndex,
-    mitt
+    mitt,
+    setTheme
 };
 
 export const $u = {
@@ -281,6 +304,7 @@ export const $u = {
     colorToRgba: colorGradients.colorToRgba,
     guid,
     color,
+    getColor,
     sys,
     os,
     type2icon,
@@ -309,7 +333,8 @@ export const $u = {
     formatName,
     addStyle,
     toStyle,
-    kebabCase
+    kebabCase,
+    setTheme
 };
 
 // 颜色相关方法单独导出

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的80+精选UI组件库",
-    "version": "0.3.8",
+    "version": "0.3.9",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，80+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",

package/types/components.d.ts

@@ -44,7 +44,7 @@ declare module 'vue' {
         uLine: (typeof import('../components/u-line/u-line.vue'))['default'];
         uLineProgress: (typeof import('../components/u-line-progress/u-line-progress.vue'))['default'];
         uLink: (typeof import('../components/u-link/u-link.vue'))['default'];
-        uLoadMore: (typeof import('../components/u-loadmore/u-loadmore.vue'))['default'];
+        uLoadmore: (typeof import('../components/u-loadmore/u-loadmore.vue'))['default'];
         uLoading: (typeof import('../components/u-loading/u-loading.vue'))['default'];
         uLoadingPopup: (typeof import('../components/u-loading-popup/u-loading-popup.vue'))['default'];
         uMask: (typeof import('../components/u-mask/u-mask.vue'))['default'];

package/types/global.d.ts

@@ -305,35 +305,36 @@ export type FabDirection = 'top' | 'bottom' | 'left' | 'right';
 // fab 组件 gap
 export type FabGap = Partial<Record<'top' | 'left' | 'right' | 'bottom', number>>;
 
+export type ColorType =
+    | 'primary'
+    | 'primaryDark'
+    | 'primaryDisabled'
+    | 'primaryLight'
+    | 'bgColor'
+    | 'info'
+    | 'infoDark'
+    | 'infoDisabled'
+    | 'infoLight'
+    | 'warning'
+    | 'warningDark'
+    | 'warningDisabled'
+    | 'warningLight'
+    | 'error'
+    | 'errorDark'
+    | 'errorDisabled'
+    | 'errorLight'
+    | 'success'
+    | 'successDark'
+    | 'successDisabled'
+    | 'successLight'
+    | 'mainColor'
+    | 'contentColor'
+    | 'tipsColor'
+    | 'lightColor'
+    | 'borderColor';
+
 // 自定义主题色
-export type ThemeColor = Partial<{
-    primary: string;
-    primaryDark: string;
-    primaryDisabled: string;
-    primaryLight: string;
-    bgColor: string;
-    info: string;
-    infoDark: string;
-    infoDisabled: string;
-    infoLight: string;
-    warning: string;
-    warningDark: string;
-    warningDisabled: string;
-    warningLight: string;
-    error: string;
-    errorDark: string;
-    errorDisabled: string;
-    errorLight: string;
-    success: string;
-    successDark: string;
-    successDisabled: string;
-    successLight: string;
-    mainColor: string;
-    contentColor: string;
-    tipsColor: string;
-    lightColor: string;
-    borderColor: string;
-}>;
+export type ThemeColor = Partial<Record<ColorType, string>>;
 
 export type LogConfig = Partial<{
     debug?: boolean;