uview-plus 3.7.32 → 3.8.18

package/components/u-action-sheet/u-action-sheet.vue

@@ -12,7 +12,10 @@
 			    class="u-action-sheet__header"
 			    v-if="title"
 			>
-				<text class="u-action-sheet__header__title u-line-1">{{title}}</text>
+				<text
+					class="u-action-sheet__header__title u-line-1"
+					:style="titleDynamicStyle"
+				>{{title}}</text>
 				<view
 				    class="u-action-sheet__header__icon-wrap"
 				    @tap.stop="cancel"
@@ -20,7 +23,7 @@
 					<up-icon
 					    name="close"
 					    size="17"
-					    color="#c8c9cc"
+					    :color="closeIconColor"
 					    bold
 					></up-icon>
 				</view>
@@ -30,12 +33,12 @@
 			    class="u-action-sheet__description"
 				:style="[{
 					marginTop: `${title && description ? 0 : '18px'}`
-				}]"
+				}, descriptionDynamicStyle]"
 			    v-if="description"
 			>{{description}}</text>
 			<slot>
 				<!-- 分割线 -->
-				<u-line v-if="description"></u-line>
+				<u-line v-if="description" :color="dividerColor"></u-line>
 				<!-- 操作项列表 -->
 				<scroll-view scroll-y class="u-action-sheet__item-wrap" :style="{maxHeight: wrapMaxHeight}">
 					<view :key="index" v-for="(item, index) in actions">
@@ -75,6 +78,7 @@
 									<text
 									    v-if="item[subnameKey]"
 									    class="u-action-sheet__item-wrap__item__subname"
+									    :style="[subnameStyle(index)]"
 									>{{ item[subnameKey] }}</text>
 								</template>
 								<!-- 加载状态图标 -->
@@ -89,13 +93,13 @@
 						</button>
 						<!-- #endif -->
 						<!-- 选项间分割线 -->
-						<u-line v-if="index !== actions.length - 1"></u-line>
+						<u-line v-if="index !== actions.length - 1" :color="dividerColor"></u-line>
 					</view>
 				</scroll-view>
 			</slot>
 			<!-- 取消按钮前的分割区域 -->
 			<u-gap
-			    bgColor="#eaeaec"
+			    :bgColor="cancelGapColor"
 			    height="6"
 			    v-if="cancelText"
 			></u-gap>
@@ -106,6 +110,7 @@
 				    @touchmove.stop.prevent
 				    :hover-stay-time="150"
 				    class="u-action-sheet__cancel-text"
+					:style="cancelTextDynamicStyle"
 				>{{cancelText}}</text>
 			</view>
 		</view>
@@ -162,17 +167,50 @@
 			}
 		},
 		computed: {
+			titleDynamicStyle() {
+				return {
+					color: this.upThemeVar('--up-main-color', '#303133')
+				}
+			},
+			descriptionDynamicStyle() {
+				return {
+					color: this.upThemeVar('--up-tips-color', '#909193')
+				}
+			},
+			closeIconColor() {
+				return this.upThemeVar('--up-content-color', '#606266')
+			},
+			dividerColor() {
+				return this.upThemeVar('--up-border-color', this.upThemeIsDark ? '#3a3a3c' : '#dadbde')
+			},
+			cancelGapColor() {
+				return this.upThemeVar('--up-gap-bg-color', this.upThemeIsDark ? '#111111' : '#eaeaec')
+			},
+			cancelTextDynamicStyle() {
+				return {
+					color: this.upThemeVar('--up-main-color', '#303133')
+				}
+			},
 			// 操作项目的样式
 			itemStyle() {
 				return (index) => {
-					let style = {};
+					const style = {
+						color: this.upThemeVar('--up-main-color', '#303133')
+					};
 					if (this.actions[index].color) style.color = this.actions[index].color
 					if (this.actions[index].fontSize) style.fontSize = addUnit(this.actions[index].fontSize)
 					// 选项被禁用的样式
-					if (this.actions[index].disabled) style.color = '#c0c4cc'
+					if (this.actions[index].disabled) style.color = this.upThemeVar('--up-light-color', '#c0c4cc')
 					return style;
 				}
 			},
+			subnameStyle() {
+				return (index) => ({
+					color: this.actions[index].disabled
+						? this.upThemeVar('--up-light-color', '#c0c4cc')
+						: this.upThemeVar('--up-tips-color', '#909193')
+				})
+			}
 		},
 		emits: ["close", "select", "update:show"],
 		methods: {
@@ -218,21 +256,21 @@
 	$u-action-sheet-reset-button-width:100% !default;
 	$u-action-sheet-title-font-size: 16px !default;
 	$u-action-sheet-title-padding: 12px 30px !default;
-	$u-action-sheet-title-color: $u-main-color !default;
+	$u-action-sheet-title-color: var(--up-main-color, #303133) !default;
 	$u-action-sheet-header-icon-wrap-right:15px !default;
 	$u-action-sheet-header-icon-wrap-top:15px !default;
 	$u-action-sheet-description-font-size:13px !default;
-	$u-action-sheet-description-color:14px !default;
+	$u-action-sheet-description-color: var(--up-tips-color, #909193) !default;
 	$u-action-sheet-description-margin: 18px 15px !default;
 	$u-action-sheet-item-wrap-item-padding:17px !default;
 	$u-action-sheet-item-wrap-name-font-size:16px !default;
 	$u-action-sheet-item-wrap-subname-font-size:13px !default;
-	$u-action-sheet-item-wrap-subname-color: #c0c4cc !default;
+	$u-action-sheet-item-wrap-subname-color: var(--up-tips-color, #909193) !default;
 	$u-action-sheet-item-wrap-subname-margin-top:10px !default;
 	$u-action-sheet-cancel-text-font-size:16px !default;
-	$u-action-sheet-cancel-text-color:$u-content-color !default;
+	$u-action-sheet-cancel-text-color: var(--up-main-color, #303133) !default;
 	$u-action-sheet-cancel-text-font-size:15px !default;
-	$u-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;
+	$u-action-sheet-cancel-text-hover-background-color: var(--up-hover-bg-color, rgb(242, 243, 245)) !default;
 
 	.u-reset-button {
 		width: $u-action-sheet-reset-button-width;
@@ -259,7 +297,7 @@
 
 		&__description {
 			font-size: $u-action-sheet-description-font-size;
-			color: $u-tips-color;
+			color: $u-action-sheet-description-color;
 			margin: $u-action-sheet-description-margin;
 			text-align: center;
 		}
@@ -275,7 +313,7 @@
 
 				&__name {
 					font-size: $u-action-sheet-item-wrap-name-font-size;
-					color: $u-main-color;
+					color: var(--up-main-color, #303133);
 					text-align: center;
 				}
 
@@ -299,4 +337,4 @@
 			background-color: $u-action-sheet-cancel-text-hover-background-color;
 		}
 	}
-</style>
+</style>

package/components/u-agreement/u-agreement.vue

@@ -3,9 +3,10 @@
         width: 100%;;
         display: inline-block;
         flex-direction: column;
+        color: var(--up-main-color, #303133);
         .agreement-url {
             display: inline-block;
-            color: blue;
+            color: var(--up-primary, #2979ff);
             // #ifdef H5
             cursor: pointer;
             // #endif

package/components/u-alert/u-alert.vue

@@ -195,7 +195,7 @@
 		}
 
 		&--primary--light {
-			background-color: #ecf5ff;
+			background-color: var(--up-primary-light, #ecf5ff);
 		}
 
 		&--error--dark {
@@ -203,7 +203,7 @@
 		}
 
 		&--error--light {
-			background-color: #FEF0F0;
+			background-color: var(--up-error-light, #FEF0F0);
 		}
 
 		&--success--dark {
@@ -211,7 +211,7 @@
 		}
 
 		&--success--light {
-			background-color: #f5fff0;
+			background-color: var(--up-success-light, #f5fff0);
 		}
 
 		&--warning--dark {
@@ -219,7 +219,7 @@
 		}
 
 		&--warning--light {
-			background-color: #FDF6EC;
+			background-color: var(--up-warning-light, #FDF6EC);
 		}
 
 		&--info--dark {
@@ -227,7 +227,7 @@
 		}
 
 		&--info--light {
-			background-color: #f4f4f5;
+			background-color: var(--up-info-light, #f4f4f5);
 		}
 
 		&__icon {
@@ -239,24 +239,22 @@
 			flex: 1;
 
 			&__title {
-				color: $u-main-color;
+				color: var(--up-main-color, $u-main-color);
 				font-size: 14px;
 				font-weight: bold;
-				color: #fff;
 				margin-bottom: 2px;
 			}
 
 			&__desc {
-				color: $u-main-color;
+				color: var(--up-main-color, $u-main-color);
 				font-size: 14px;
 				flex-wrap: wrap;
-				color: #fff;
 			}
 		}
 
 		&__title--dark,
 		&__desc--dark {
-			color: #FFFFFF;
+			color: var(--up-white, #FFFFFF);
 		}
 
 		&__text--primary--light,

package/components/u-button/u-button.vue

@@ -117,7 +117,6 @@ import { mixin } from '../../libs/mixin/mixin';
 import { props } from "./props";
 import { addStyle } from '../../libs/function/index';
 import { throttle } from '../../libs/function/throttle';
-import color from '../../libs/config/color';
 /**
  * button 按钮
  * @description Button 按钮
@@ -192,15 +191,21 @@ export default {
                 );
             }
         },
+        isDarkTheme() {
+            return this.$u.theme && this.$u.theme.mode === 'dark';
+        },
+        themeTypeColor() {
+            return this.$u.color[this.type] || this.$u.color.info;
+        },
         loadingColor() {
             if (this.plain) {
                 // 如果有设置color值，则用color值，否则使用type主题颜色
                 return this.color
                     ? this.color
-                    : color[`u-${this.type}`];
+                    : this.themeTypeColor;
             }
             if (this.type === "info") {
-                return "#c9c9c9";
+                return this.isDarkTheme ? "#9ca3af" : "#c9c9c9";
             }
             return "rgb(200, 200, 200)";
         },
@@ -211,7 +216,9 @@ export default {
 			if (this.plain) {
                 return this.color ? this.color : this.type;
             } else {
-                return this.type === "info" ? "#000000" : "#ffffff";
+                return this.type === "info"
+                    ? (this.isDarkTheme ? "#f3f4f6" : "#000000")
+                    : "#ffffff";
             }
         },
         baseColor() {
@@ -240,6 +247,27 @@ export default {
                     style.borderWidth = "1px";
                     style.borderStyle = "solid";
                 }
+                return style;
+            }
+            const typeColor = this.themeTypeColor;
+            if (this.plain) {
+                style.color = this.type === 'info' ? this.$u.color.mainColor : typeColor;
+                style.backgroundColor = this.isDarkTheme ? '#1c1c1e' : '#ffffff';
+                style.borderColor = this.type === 'info' ? this.$u.color.borderColor : typeColor;
+                style.borderWidth = this.hairline ? '0.5px' : '1px';
+                style.borderStyle = 'solid';
+            } else {
+                style.borderWidth = this.hairline ? '0.5px' : '1px';
+                style.borderStyle = 'solid';
+                if (this.type === 'info') {
+                    style.color = this.$u.color.mainColor;
+                    style.backgroundColor = this.isDarkTheme ? '#2c2c2e' : '#ffffff';
+                    style.borderColor = this.$u.color.borderColor;
+                } else {
+                    style.color = '#ffffff';
+                    style.backgroundColor = typeColor;
+                    style.borderColor = typeColor;
+                }
             }
             return style;
         },
@@ -248,10 +276,12 @@ export default {
             let style = {};
             // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
             if (this.type === "info") {
-                style.color = "#323233";
+                style.color = this.$u.color.mainColor;
             }
             if (this.color) {
                 style.color = this.plain ? this.color : "white";
+            } else if (this.plain && this.type !== 'info') {
+                style.color = this.themeTypeColor;
             }
             style.fontSize = this.textSize + "px";
             return style;

package/components/u-calendar/calendar.js

@@ -39,6 +39,7 @@ export default {
         allowSameDay: false,
 		round: 0,
 		monthNum: 3,
+        monthSwitch: false,
         weekText: [t("up.week.one"), t("up.week.two"), t("up.week.three"), t("up.week.four"), t("up.week.five"), t("up.week.six"), t("up.week.seven")],
         forbidDays: [],
         forbidDaysToast: t("up.calendar.disabled"),

package/components/u-calendar/header.vue

@@ -4,10 +4,36 @@
 			class="u-calendar-header__title"
 			v-if="showTitle"
 		>{{ title }}</text>
-		<text
-			class="u-calendar-header__subtitle"
+		<view
+			class="u-calendar-header__subtitle-wrap"
 			v-if="showSubtitle"
-		>{{ subtitle }}</text>
+		>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': prevYearDisabled }"
+				@click="prevYear"
+			>«</text>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': prevDisabled }"
+				@click="prev"
+			>‹</text>
+			<text class="u-calendar-header__subtitle">{{ subtitle }}</text>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': nextDisabled }"
+				@click="next"
+			>›</text>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': nextYearDisabled }"
+				@click="nextYear"
+			>»</text>
+		</view>
 		<view class="u-calendar-header__weekdays">
 			<text class="u-calendar-header__weekdays__weekday">{{ weekText[0] }}</text>
 			<text class="u-calendar-header__weekdays__weekday">{{ weekText[1] }}</text>
@@ -54,6 +80,31 @@
 					return []
 				}
 			},
+			// 是否显示月份切换按钮
+			showSwitch: {
+				type: Boolean,
+				default: false
+			},
+			// 上个月按钮是否禁用
+			prevDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 下个月按钮是否禁用
+			nextDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 上一年按钮是否禁用
+			prevYearDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 下一年按钮是否禁用
+			nextYearDisabled: {
+				type: Boolean,
+				default: false
+			}
 		},
 		data() {
 			return {
@@ -61,8 +112,25 @@
 			}
 		},
 		methods: {
-			name() {
-
+			prev() {
+				if (!this.prevDisabled) {
+					this.$emit('prev')
+				}
+			},
+			next() {
+				if (!this.nextDisabled) {
+					this.$emit('next')
+				}
+			},
+			prevYear() {
+				if (!this.prevYearDisabled) {
+					this.$emit('prevYear')
+				}
+			},
+			nextYear() {
+				if (!this.nextYearDisabled) {
+					this.$emit('nextYear')
+				}
 			}
 		},
 	}
@@ -77,20 +145,41 @@
 
 		&__title {
 			font-size: 16px;
-			color: $u-main-color;
+			color: var(--up-main-color, $u-main-color);
 			text-align: center;
 			height: 42px;
 			line-height: 42px;
 			font-weight: bold;
 		}
 
+		&__subtitle-wrap {
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			height: 40px;
+		}
+
 		&__subtitle {
 			font-size: 14px;
-			color: $u-main-color;
-			height: 40px;
+			color: var(--up-main-color, $u-main-color);
 			text-align: center;
+			font-weight: bold;
+			min-width: 120px;
+		}
+
+		&__switch {
+			width: 44px;
+			height: 40px;
 			line-height: 40px;
+			text-align: center;
+			color: var(--up-main-color, $u-main-color);
+			font-size: 22px;
 			font-weight: bold;
+			flex-shrink: 0;
+
+			&--disabled {
+				opacity: 0.35;
+			}
 		}
 
 		&__weekdays {
@@ -99,7 +188,7 @@
 
 			&__weekday {
 				font-size: 13px;
-				color: $u-main-color;
+				color: var(--up-main-color, $u-main-color);
 				line-height: 30px;
 				flex: 1;
 				text-align: center;

package/components/u-calendar/month.vue

@@ -217,9 +217,10 @@
 							// 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值
 							if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
 									.selected[len]))) {
-								style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
+								const rangeEndColor = this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
+								style.backgroundColor = colorGradient(this.color, rangeEndColor, 100)[90]
 								// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
-								style.opacity = 0.7
+								style.opacity = this.upThemeIsDark ? 0.85 : 0.7
 							}
 						} else if (this.selected.length === 1) {
 							// 之所以需要这么写，是因为uni-app的iOS客户端的bug
@@ -502,7 +503,7 @@
 			font-size: 14px;
 			line-height: 42px;
 			height: 42px;
-			color: $u-main-color;
+			color: var(--up-main-color, $u-main-color);
 			text-align: center;
 			font-weight: bold;
 		}
@@ -524,7 +525,7 @@
 
 				&__text {
 					font-size: 155px;
-					color: rgba(231, 232, 234, 0.83);
+					color: var(--up-calendar-month-mark-color, rgba(231, 232, 234, 0.83));
 				}
 			}
 
@@ -555,7 +556,7 @@
 					}
 
 					&__buttom-info {
-						color: $u-content-color;
+						color: var(--up-content-color, $u-content-color);
 						text-align: center;
 						position: absolute;
 						bottom: 5px;
@@ -569,20 +570,21 @@
 						}
 
 						&--disabled {
-							color: #cacbcd;
+							color: var(--up-disabled-color, #cacbcd);
 						}
 					}
 
 					&__info {
 						text-align: center;
 						font-size: 16px;
+						color: var(--up-main-color, $u-main-color);
 
 						&--selected {
 							color: #ffffff;
 						}
 
 						&--disabled {
-							color: #cacbcd;
+							color: var(--up-disabled-color, #cacbcd);
 						}
 					}
 
@@ -613,4 +615,5 @@
 			}
 		}
 	}
+
 </style>

package/components/u-calendar/props.js

@@ -143,6 +143,11 @@ export const props = defineMixin({
 			type: [Number, String],
 			default: 3
 		},
+		// 是否启用非滚动的单月切换模式
+		monthSwitch: {
+			type: Boolean,
+			default: () => defProps.calendar.monthSwitch
+		},
         // 星期文案
         weekText: {
 			type: Array,