uview-plus 3.7.32 → 3.8.18

package/components/u-subsection/u-subsection.vue

@@ -124,11 +124,58 @@ export default {
         },
     },
     computed: {
+        isDarkMode() {
+            return this.$u?.theme?.mode === 'dark';
+        },
+        resolvedInactiveColor() {
+            if (this.upHasProp('inactiveColor')) return this.inactiveColor;
+            return this.upThemeVar(
+                '--up-subsection-inactive-color',
+                this.isDarkMode
+                    ? (this.$u?.color?.contentColor || '#d1d5db')
+                    : '#303133'
+            );
+        },
+        resolvedButtonBgColor() {
+            if (this.upHasProp('bgColor')) return this.bgColor;
+            return this.upThemeVar(
+                '--up-subsection-bg-color',
+                this.isDarkMode ? '#2b2c30' : '#eeeeef'
+            );
+        },
+        resolvedButtonBarColor() {
+            if (this.disabled) {
+                return this.upThemeVar(
+                    '--up-subsection-disabled-bar-color',
+                    this.isDarkMode ? '#3a3a3c' : '#f5f5f5'
+                );
+            }
+            return this.upThemeVar(
+                '--up-subsection-bar-color',
+                this.isDarkMode ? '#3a3b40' : '#ffffff'
+            );
+        },
+        resolvedDisabledTextColor() {
+            return this.upThemeVar(
+                '--up-subsection-disabled-text-color',
+                this.isDarkMode
+                    ? (this.$u?.color?.lightColor || '#6b7280')
+                    : '#c8c9cc'
+            );
+        },
+        resolvedDisabledBorderColor() {
+            return this.upThemeVar(
+                '--up-subsection-disabled-border-color',
+                this.isDarkMode
+                    ? (this.$u?.color?.borderColor || '#3a3a3c')
+                    : '#d4d4d4'
+            );
+        },
         wrapperStyle() {
             const style = {};
             // button模式时，设置背景色
             if (this.mode === "button") {
-                style.backgroundColor = this.bgColor;
+                style.backgroundColor = this.resolvedButtonBgColor;
             }
             return style;
         },
@@ -145,7 +192,11 @@ export default {
             // #endif
             if (this.mode === "subsection") {
                 // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
-                style.backgroundColor = this.activeColor;
+                style.backgroundColor = this.disabled
+                    ? this.resolvedDisabledBorderColor
+                    : this.activeColor;
+            } else {
+                style.backgroundColor = this.resolvedButtonBarColor;
             }
             return style;
         },
@@ -155,7 +206,9 @@ export default {
                 const style = {};
                 if (this.mode === "subsection") {
                     // 设置border的样式
-                    style.borderColor = this.activeColor;
+                    style.borderColor = this.disabled
+                        ? this.resolvedDisabledBorderColor
+                        : this.activeColor;
                     style.borderWidth = "1px";
                     style.borderStyle = "solid";
                 }
@@ -166,6 +219,12 @@ export default {
         textStyle(index,item) {
             return (index,item) => {
                 const style = {};
+                if (this.disabled) {
+                    style.fontWeight = 'normal';
+                    style.fontSize = addUnit(this.fontSize);
+                    style.color = this.resolvedDisabledTextColor;
+                    return style;
+                }
                 style.fontWeight =
                     this.bold && this.innerCurrent === index ? "bold" : "normal";
                 style.fontSize = addUnit(this.fontSize);
@@ -190,7 +249,7 @@ export default {
                     }
                     else{
                         // 判断当前是否有自定义的颜色
-                        style.color = inactiveColorTemp ? inactiveColorTemp : this.inactiveColor;
+                        style.color = inactiveColorTemp ? inactiveColorTemp : this.resolvedInactiveColor;
                     }
                 }
                 else {
@@ -201,7 +260,7 @@ export default {
                     }
                     else{
                         // 判断当前是否有自定义的颜色
-                        style.color = inactiveColorTemp ? inactiveColorTemp : this.inactiveColor;
+                        style.color = inactiveColorTemp ? inactiveColorTemp : this.resolvedInactiveColor;
                     }
                 }
                 return style;
@@ -279,6 +338,10 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import "./theme-vars.scss";
+</style>
+
 <style lang="scss" scoped>
 .u-subsection {
     @include flex;
@@ -387,19 +450,9 @@ export default {
 
 .item-button--disabled{
     cursor: no-drop;
-    color: #BDBDBD !important;
-    border-color: #BDBDBD !important;
-    text{
-        color: #BDBDBD !important;
-    }
 }
 .item-subsection--disabled{
     cursor: no-drop;
-    background: #FFFFFF !important;
-    color: #BDBDBD !important;
-    border-color: #BDBDBD !important;
-    text{
-        color: #BDBDBD !important;
-    }
+    background: transparent !important;
 }
 </style>

package/components/u-swipe-action-item/u-swipe-action-item.vue

@@ -10,19 +10,19 @@
 						alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
 					}]" @tap="buttonClickHandler(item, index)">
 					<view class="u-swipe-action-item__right__button__wrapper" :style="[{
-							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : defaultButtonBgColor,
 							borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
 							padding: item.style && item.style.borderRadius ? '0' : '0 15px',
 						}, item.style]">
 						<up-icon v-if="item.icon" :name="item.icon"
-							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
+							:color="item.style && item.style.color ? item.style.color : defaultButtonColor"
 							:size="item.iconSize ? addUnit(item.iconSize) : item.style && item.style.fontSize ? getPx(item.style.fontSize) * 1.2 : 17"
 							:customStyle="{
 								marginRight: item.text ? '2px' : 0
 							}"></up-icon>
 						<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
 							:style="[{
-								color: item.style && item.style.color ? item.style.color : '#ffffff',
+								color: item.style && item.style.color ? item.style.color : defaultButtonColor,
 								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
 								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
 							}]">{{ item.text }}</text>
@@ -147,6 +147,12 @@
 		computed: {
 			wxsInit() {
 				return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
+			},
+			defaultButtonBgColor() {
+				return this.upThemeVar('--up-swipe-action-button-bg-color', this.upThemeIsDark ? '#4b5563' : '#C7C6CD')
+			},
+			defaultButtonColor() {
+				return this.upThemeVar('--up-swipe-action-button-color', '#ffffff')
 			}
 		},
 		mounted() {
@@ -211,7 +217,7 @@
 
 		&__content {
             transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
-			background-color: #FFFFFF;
+			background-color: var(--up-card-bg-color, #FFFFFF);
 			z-index: 10;
 		}
 
@@ -237,7 +243,7 @@
 					&__text {
 						@include flex;
 						align-items: center;
-						color: #FFFFFF;
+						color: var(--up-swipe-action-button-color, #FFFFFF);
 						font-size: 15px;
 						text-align: center;
 						justify-content: center;

package/components/u-switch/theme-vars.scss

@@ -0,0 +1,41 @@
+:root,
+page,
+body {
+	--up-switch-active-color: #3c9cff;
+	--up-switch-inactive-color: #ffffff;
+	--up-switch-dot-active-color: #ffffff;
+	--up-switch-dot-inactive-color: #ffffff;
+	--up-switch-loading-inactive-color: #aaabad;
+	--up-switch-border-color: rgba(0, 0, 0, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-switch-active-color: #3c9cff;
+		--up-switch-inactive-color: #3a3a3c;
+		--up-switch-dot-active-color: #ffffff;
+		--up-switch-dot-inactive-color: #d1d5db;
+		--up-switch-loading-inactive-color: #9ca3af;
+		--up-switch-border-color: #4b5563;
+	}
+}
+
+[data-up-theme='light'] {
+	--up-switch-active-color: #3c9cff;
+	--up-switch-inactive-color: #ffffff;
+	--up-switch-dot-active-color: #ffffff;
+	--up-switch-dot-inactive-color: #ffffff;
+	--up-switch-loading-inactive-color: #aaabad;
+	--up-switch-border-color: rgba(0, 0, 0, 0.12);
+}
+
+[data-up-theme='dark'] {
+	--up-switch-active-color: #3c9cff;
+	--up-switch-inactive-color: #3a3a3c;
+	--up-switch-dot-active-color: #ffffff;
+	--up-switch-dot-inactive-color: #d1d5db;
+	--up-switch-loading-inactive-color: #9ca3af;
+	--up-switch-border-color: #4b5563;
+}

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

@@ -26,10 +26,10 @@
 			    mode="circle"
 			    timingFunction='linear'
 			    <!-- #ifdef VUE3 -->
-				:color="modelValue ? activeColor : '#AAABAD'"
+				:color="modelValue ? resolvedActiveColor : resolvedLoadingInactiveColor"
 				<!-- #endif -->
 				<!-- #ifdef VUE2 -->
-				:color="value ? activeColor : '#AAABAD'"
+				:color="value ? resolvedActiveColor : resolvedLoadingInactiveColor"
 				<!-- #endif -->
 			    :size="size * 0.6"
 			/>
@@ -41,6 +41,7 @@
 	import { props } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
+	import defProps from '../../libs/config/props.js';
 	import { addStyle, addUnit, error } from '../../libs/function/index';
 	/**
 	 * switch 开关选择器
@@ -88,11 +89,6 @@
 			}
 			// #endif
 		},
-		data() {
-			return {
-				bgColor: '#ffffff'
-			}
-		},
 		computed: {
 			isActive(){
 				// #ifdef VUE3
@@ -102,6 +98,33 @@
 				return this.value === this.activeValue;
 				// #endif
 			},
+			resolvedActiveColor() {
+				if (this.upHasProp('activeColor') || this.activeColor !== defProps.switch.activeColor) {
+					return this.activeColor
+				}
+				return this.upThemeVar('--up-switch-active-color', this.$u.color.primary || '#3c9cff')
+			},
+			resolvedInactiveColor() {
+				if (this.upHasProp('inactiveColor') || this.inactiveColor !== defProps.switch.inactiveColor) {
+					return this.inactiveColor
+				}
+				return this.upThemeVar('--up-switch-inactive-color', this.upThemeIsDark ? '#3a3a3c' : '#ffffff')
+			},
+			resolvedDotActiveColor() {
+				if (this.upHasProp('dotActiveColor') || this.dotActiveColor !== defProps.switch.dotActiveColor) {
+					return this.dotActiveColor
+				}
+				return this.upThemeVar('--up-switch-dot-active-color', '#ffffff')
+			},
+			resolvedDotInactiveColor() {
+				if (this.upHasProp('dotInactiveColor') || this.dotInactiveColor !== defProps.switch.dotInactiveColor) {
+					return this.dotInactiveColor
+				}
+				return this.upThemeVar('--up-switch-dot-inactive-color', this.upThemeIsDark ? '#d1d5db' : '#ffffff')
+			},
+			resolvedLoadingInactiveColor() {
+				return this.upThemeVar('--up-switch-loading-inactive-color', this.upThemeIsDark ? '#9ca3af' : '#aaabad')
+			},
 			switchStyle() {
 				let style = {}
 				// 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
@@ -112,8 +135,10 @@
 				// 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
 				if(this.customInactiveColor) {
 					style.borderColor = 'rgba(0, 0, 0, 0)'
+				} else {
+					style.borderColor = this.upThemeVar('--up-switch-border-color', this.upThemeIsDark ? '#4b5563' : 'rgba(0, 0, 0, 0.12)')
 				}
-				style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor
+				style.backgroundColor = this.isActive ? this.resolvedActiveColor : this.resolvedInactiveColor
 				return style;
 			},
 			nodeStyle() {
@@ -123,7 +148,7 @@
 				style.height = addUnit(this.size - this.space)
 				const translateX = this.isActive ? addUnit(this.space) : addUnit(this.size);
 				style.transform = `translateX(-${translateX})`
-				style.backgroundColor = this.isActive ? this.dotActiveColor : this.dotInactiveColor
+				style.backgroundColor = this.isActive ? this.resolvedDotActiveColor : this.resolvedDotInactiveColor
 				return style
 			},
 			bgStyle() {
@@ -131,14 +156,14 @@
 				// 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
 				style.width = addUnit(Number(this.size) * 2 - this.size / 2)
 				style.height = addUnit(this.size)
-				style.backgroundColor = this.inactiveColor
+				style.backgroundColor = this.resolvedInactiveColor
 				// 打开时，让此元素收缩，否则反之
 				style.transform = `scale(${this.isActive ? 0 : 1})`
 				return style
 			},
 			customInactiveColor() {
 				// 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
-				return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
+				return this.upHasProp('inactiveColor') || this.inactiveColor !== defProps.switch.inactiveColor
 			}
 		},
 		// #ifdef VUE3
@@ -167,6 +192,10 @@
 	};
 </script>
 
+<style lang="scss">
+	@import "./theme-vars.scss";
+</style>
+
 <style lang="scss" scoped>
 
 	.u-switch {
@@ -175,11 +204,11 @@
 		box-sizing: border-box;
 		/* #endif */
 		position: relative;
-		background-color: #fff;
+		background-color: $u-bg-color;
 		border-width: 1px;
 		border-radius: 100px;
 		transition: background-color 0.4s;
-		border-color: rgba(0, 0, 0, 0.12);
+		border-color: $u-border-color;
 		border-style: solid;
 		justify-content: flex-end;
 		align-items: center;
@@ -192,7 +221,7 @@
 			align-items: center;
 			justify-content: center;
 			border-radius: 100px;
-			background-color: #fff;
+			background-color: $u-bg-color;
 			box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
 			transition-property: transform, background-color;
 			transition-duration: 0.4s;
@@ -202,7 +231,7 @@
 		&__bg {
 			position: absolute;
 			border-radius: 100px;
-			background-color: #FFFFFF;
+			background-color: $u-bg-color;
 			transition-property: transform;
 			transition-duration: 0.4s;
 			border-top-left-radius: 0;

package/components/u-tabbar/u-tabbar.vue

@@ -58,13 +58,13 @@
 		computed: {
 			tabbarStyle() {
 				const style = {
-					zIndex: this.zIndex
+					zIndex: this.zIndex,
+					backgroundColor: this.backgroundColor || this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
 				}
 				if (this.borderColor) {
 					style.borderColor = this.borderColor + ' !important'
-				}
-				if (this.backgroundColor) {
-					style.backgroundColor = this.backgroundColor
+				} else {
+					style.borderColor = this.upThemeVar('--up-border-color', '#dadbde')
 				}
 				// 合并来自父组件的customStyle样式
 				return deepMerge(style, addStyle(this.customStyle))
@@ -132,7 +132,7 @@
 		
 		&__content {
 			@include flex(column);
-			background-color: #fff;
+			background-color: var(--up-card-bg-color, #fff);
 			
 			&__item-wrapper {
 				height: 50px;

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

@@ -14,7 +14,7 @@
 			<up-icon
 			    v-if="icon"
 			    :name="icon"
-			    :color="isActive? parentData.activeColor : parentData.inactiveColor"
+			    :color="isActive ? resolvedActiveColor : resolvedInactiveColor"
 			    :size="isMidButton ? 26 : 20"
 			></up-icon>
 			<template v-else>
@@ -41,7 +41,7 @@
 			<text
 			    class="u-tabbar-item__text"
 			    :style="{
-					color: isActive? parentData.activeColor : parentData.inactiveColor
+					color: isActive ? resolvedActiveColor : resolvedInactiveColor
 				}"
 			>{{ text }}</text>
 		</slot>
@@ -88,6 +88,16 @@
 			// 计算是否为中间按钮
 			isMidButton() {
 				return this.mode === 'midButton';
+			},
+			resolvedActiveColor() {
+				return !this.parentData.activeColor || this.parentData.activeColor === '#1989fa'
+					? this.upThemeVar('--up-primary', '#1989fa')
+					: this.parentData.activeColor
+			},
+			resolvedInactiveColor() {
+				return !this.parentData.inactiveColor || this.parentData.inactiveColor === '#7d7e80'
+					? this.upThemeVar('--up-content-color', '#7d7e80')
+					: this.parentData.inactiveColor
 			}
 		},
 		created() {
@@ -167,7 +177,7 @@
 	}
 	
 	.u-tabbar-item--mid-button-cover {
-		background-color: #fff;
+		background-color: var(--up-card-bg-color, #fff);
 		position: absolute;
 		top: 22px;
 		left: -10px;
@@ -180,8 +190,9 @@
 		width: 70px;
 		height: 70px;
 		border-radius: 100px;
-		background-color: #ffffff;
+		background-color: var(--up-card-bg-color, #ffffff);
 		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+		border: 1px solid var(--up-border-color, rgba(0, 0, 0, 0.08));
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -194,4 +205,4 @@
 		width: 100%;
 	}
 	/* #endif */
-</style>
+</style>

package/components/u-table/u-table.vue

@@ -79,11 +79,26 @@
 			}
 		},
 		computed: {
+			resolvedBorderColor() {
+				return this.borderColor === '#e4e7ed'
+					? this.upThemeVar('--up-border-color', '#e4e7ed')
+					: this.borderColor
+			},
+			resolvedColor() {
+				return this.color === '#606266'
+					? this.upThemeVar('--up-content-color', '#606266')
+					: this.color
+			},
+			resolvedBgColor() {
+				return this.bgColor === '#ffffff'
+					? this.upThemeVar('--up-card-bg-color', '#ffffff')
+					: this.bgColor
+			},
 			tableStyle() {
 				let style = {};
-				style.borderLeft = `solid 1px ${this.borderColor}`;
-				style.borderTop = `solid 1px ${this.borderColor}`;
-				style.backgroundColor = this.bgColor;;
+				style.borderLeft = `solid 1px ${this.resolvedBorderColor}`;
+				style.borderTop = `solid 1px ${this.resolvedBorderColor}`;
+				style.backgroundColor = this.resolvedBgColor;
 				return style;
 			}
 		},

package/components/u-table2/tableRow.vue

@@ -1,22 +1,23 @@
 <style lang="scss" scoped>
-.u-table-row {
-    display: flex;
-    flex-direction: row;
-    position: relative;
-}
-
-// 添加border样式支持
-.u-table-border {
-    border-top: 1px solid #ebeef5;
-    border-left: 1px solid #ebeef5;
-    border-right: 1px solid #ebeef5;
-    .u-table-cell {
-        border-right: 1px solid #ebeef5;
-    }
-    
-    .u-table-cell:last-child {
-        border-right: none;
-    }
+.u-table-row {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    color: var(--up-content-color, #606266);
+}
+
+// 添加border样式支持
+.u-table-border {
+    border-top: 1px solid var(--up-border-color, #ebeef5);
+    border-left: 1px solid var(--up-border-color, #ebeef5);
+    border-right: 1px solid var(--up-border-color, #ebeef5);
+    .u-table-cell {
+        border-right: 1px solid var(--up-border-color, #ebeef5);
+    }
+
+    .u-table-cell:last-child {
+        border-right: none;
+    }
 }
 
 .u-table-cell {
@@ -27,13 +28,14 @@
     padding: 10px 1px;
     font-size: 14px;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.1;
-    border-bottom: 1px solid #ebeef5;
-    &.u-text-left {
-        justify-content: flex-start;
-        text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.1;
+    color: var(--up-content-color, #606266);
+    border-bottom: 1px solid var(--up-border-color, #ebeef5);
+    &.u-text-left {
+        justify-content: flex-start;
+        text-align: left;
     }
     &.u-text-center {
         justify-content: center;
@@ -43,21 +45,21 @@
         justify-content: flex-end;
         text-align: right;
     }
-}
-
-.u-table-row-zebra {
-    background-color: #fafafa;
-}
-
-.u-table-row-highlight {
-    background-color: #f5f7fa;
-}
-
-.u-table-empty {
-    text-align: center;
-    padding: 20px;
-    color: #999;
-}
+}
+
+.u-table-row-zebra {
+    background-color: var(--up-table2-zebra-bg-color, #fafafa);
+}
+
+.u-table-row-highlight {
+    background-color: var(--up-table2-highlight-bg-color, #f5f7fa);
+}
+
+.u-table-empty {
+    text-align: center;
+    padding: 20px;
+    color: var(--up-tips-color, #999);
+}
 
 // 隐藏被合并的单元格
 .u-table-cell-hidden {
@@ -325,4 +327,4 @@ export default {
         }
     }
 }
-</script>
+</script>