uview-plus 3.7.32 → 3.8.18

package/components/u-table2/u-table2.vue

@@ -784,23 +784,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.u-table2 {
-    width: auto;
-    overflow: auto;
-    white-space: nowrap;
-    position: relative;
-
-    .u-table-header {
-        min-width: 100% !important;
-        width: fit-content;
-        background-color: #f5f7fa;
-    }
-
-    .u-table-body {
-        min-width: 100% !important;
-        width: fit-content;
-        position: relative;
-    }
+.u-table2 {
+    width: auto;
+    overflow: auto;
+    white-space: nowrap;
+    position: relative;
+    color: var(--up-content-color, #606266);
+    background-color: var(--up-card-bg-color, #ffffff);
+
+    .u-table-header {
+        min-width: 100% !important;
+        width: fit-content;
+        background-color: var(--up-table2-header-bg-color, var(--up-bg-color, #f5f7fa));
+        color: var(--up-main-color, #303133);
+    }
+
+    .u-table-body {
+        min-width: 100% !important;
+        width: fit-content;
+        position: relative;
+        background-color: var(--up-card-bg-color, #ffffff);
+    }
 
     .u-table-sticky {
         position: sticky;
@@ -817,13 +821,13 @@ export default {
     }
 
     // 添加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-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;
@@ -837,14 +841,15 @@ export default {
         align-items: center;
         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;
+        white-space: nowrap;
+        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;
@@ -856,18 +861,18 @@ export default {
         }
     }
 
-    .u-table-row-zebra {
-        background-color: #fafafa;
-    }
-
-    .u-table-row-highlight {
-        background-color: #f5f7fa;
-    }
-
+    .u-table-row-zebra {
+        background-color: var(--up-table2-zebra-bg-color, rgba(255, 255, 255, 0.03));
+    }
+
+    .u-table-row-highlight {
+        background-color: var(--up-table2-highlight-bg-color, var(--up-bg-color, #f5f7fa));
+    }
+
     .u-table-empty {
         text-align: center;
         padding: 20px;
-        color: #999;
+        color: var(--up-tips-color, #999);
     }
 
     .u-table-cell-hidden {
@@ -880,16 +885,17 @@ export default {
 }
 
 // 固定列浮动视图
-.u-table-fixed-shadow {
+.u-table-fixed-shadow {
     position: absolute;
     top: 0;
     left: 0;
     width: auto;
     z-index: 20;
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-    background-color: #ffffff;
-}
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    background-color: var(--up-card-bg-color, #ffffff);
+    color: var(--up-content-color, #606266);
+}
 
 // .u-table-fixed-row {
 //     display: flex;
@@ -900,10 +906,10 @@ export default {
 // }
 
 // 为固定列也添加border样式支持
-.u-table-fixed-shadow .u-table-border {
-    .u-table-cell {
-        border-right: 1rpx solid #ebeef5;
-    }
+.u-table-fixed-shadow .u-table-border {
+    .u-table-cell {
+        border-right: 1rpx solid var(--up-border-color, #ebeef5);
+    }
     
     .u-table-cell:last-child {
         border-right: none;

package/components/u-tabs/u-tabs.vue

@@ -158,9 +158,22 @@
 					const customeStyle = (index == this.innerCurrent) ?
 						addStyle(this.activeStyle) :
 						addStyle(this.inactiveStyle)
+					const isActive = index == this.innerCurrent
+					const defaultActiveColor = defProps.tabs?.activeStyle?.color || '#303133'
+					const defaultInactiveColor = defProps.tabs?.inactiveStyle?.color || '#606266'
+					const isActiveStyleOverridden = this.upHasProp('activeStyle')
+						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultActiveColor)
+					const isInactiveStyleOverridden = this.upHasProp('inactiveStyle')
+						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultInactiveColor)
+					if (isActive && !isActiveStyleOverridden) {
+						style.color = this.upThemeVar('--up-main-color', this.$u.color.mainColor || defaultActiveColor)
+					}
+					if (!isActive && !isInactiveStyleOverridden) {
+						style.color = this.upThemeVar('--up-content-color', this.$u.color.contentColor || defaultInactiveColor)
+					}
 					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
 					if (this.tabList[index].disabled) {
-						style.color = '#c8c9cc'
+						style.color = this.upThemeVar('--up-disabled-color', this.$u.color.disabledColor || '#c8c9cc')
 					}
 					return deepMerge(customeStyle, style)
 				}

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

@@ -0,0 +1,21 @@
+:root,
+page,
+body {
+	--up-tag-close-bg-color: #c8c9cc;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-tag-close-bg-color: #4b5563;
+	}
+}
+
+[data-up-theme='light'] {
+	--up-tag-close-bg-color: #c8c9cc;
+}
+
+[data-up-theme='dark'] {
+	--up-tag-close-bg-color: #4b5563;
+}

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

@@ -61,7 +61,7 @@
 				:class="[`u-tag__close--${size}`]"
 				v-if="closable"
 				@tap.stop="closeHandler"
-				:style="{backgroundColor: closeColor}"
+				:style="{backgroundColor: resolvedCloseColor}"
 			>
 				<up-icon
 					name="close"
@@ -168,6 +168,12 @@
 			// 图标颜色
 			elIconColor() {
 				return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff'
+			},
+			resolvedCloseColor() {
+				if (this.upHasProp('closeColor') || this.closeColor !== '#C6C7CB') {
+					return this.closeColor
+				}
+				return this.upThemeVar('--up-tag-close-bg-color', this.$u.color.disabledColor || '#c8c9cc')
 			}
 		},
 		emits: ["click", "close"],
@@ -189,6 +195,10 @@
 	}
 </script>
 
+<style lang="scss">
+	@import "./theme-vars.scss";
+</style>
+
 <style
 	lang="scss"
 	scoped
@@ -262,7 +272,7 @@
 		}
 
 		&--primary--plain--fill {
-			background-color: #ecf5ff;
+			background-color: $u-primary-light;
 		}
 
 		&__text--primary {
@@ -285,7 +295,7 @@
 		}
 
 		&--error--plain--fill {
-			background-color: #fef0f0;
+			background-color: $u-error-light;
 		}
 
 		&__text--error {
@@ -308,7 +318,7 @@
 		}
 
 		&--warning--plain--fill {
-			background-color: #fdf6ec;
+			background-color: $u-warning-light;
 		}
 
 		&__text--warning {
@@ -331,7 +341,7 @@
 		}
 
 		&--success--plain--fill {
-			background-color: #f5fff0;
+			background-color: $u-success-light;
 		}
 
 		&__text--success {
@@ -354,7 +364,7 @@
 		}
 
 		&--info--plain--fill {
-			background-color: #f4f4f5;
+			background-color: $u-info-light;
 		}
 
 		&__text--info {
@@ -371,7 +381,7 @@
 			top: 10px;
 			right: 10px;
 			border-radius: 100px;
-			background-color: #C6C7CB;
+			background-color: $u-disabled-color;
 			@include flex(row);
 			align-items: center;
 			justify-content: center;

package/components/u-td/u-td.vue

@@ -58,13 +58,15 @@
 			if (this.parent) {
 				// 将父组件的相关参数，合并到本组件
 				let style = {};
+				const borderColor = this.parent.resolvedBorderColor || this.parent.borderColor;
+				const textColor = this.parent.resolvedColor || this.parent.color;
 				if (this.width != "auto") style.flex = `0 0 ${this.width}`;
 				style.textAlign = this.parent.align;
 				style.fontSize = addUnit(this.parent.fontSize);
 				style.padding = this.parent.padding;
-				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
-				style.borderRight = `solid 1px ${this.parent.borderColor}`;
-				style.color = this.parent.color;
+				style.borderBottom = `solid 1px ${borderColor}`;
+				style.borderRight = `solid 1px ${borderColor}`;
+				style.color = textColor;
 				if (this.textAlign != '') {
 					style.textAlign = this.textAlign;
 				}

package/components/u-text/text.js

@@ -23,7 +23,7 @@ export default {
         bold: false,
         block: false,
         lines: '',
-        color: '#303133',
+        color: '',
         size: 15,
         iconStyle: {
             fontSize: '15px'

package/components/u-text/u-text.vue

@@ -127,19 +127,21 @@ export default {
             }
 			return style;
         },
-        valueStyle() {
-            const style = {
-                textDecoration: this.decoration,
-                fontWeight: this.bold ? 'bold' : 'normal',
-                wordWrap: this.wordWrap,
-                fontSize: addUnit(this.size)
-            }
-            !this.type && (style.color = this.color)
-            this.isNvue && this.lines && (style.lines = this.lines)
-            this.lineHeight &&
-                (style.lineHeight = addUnit(this.lineHeight))
-            !this.isNvue && this.block && (style.display = 'block')
-            return deepMerge(style, addStyle(this.customStyle))
+        valueStyle() {
+            const style = {
+                textDecoration: this.decoration,
+                fontWeight: this.bold ? 'bold' : 'normal',
+                wordWrap: this.wordWrap,
+                fontSize: addUnit(this.size)
+            }
+            if (!this.type) {
+                style.color = this.color || this.upThemeVar('--up-content-color', this.$u?.color?.contentColor || '#606266')
+            }
+            this.isNvue && this.lines && (style.lines = this.lines)
+            this.lineHeight &&
+                (style.lineHeight = addUnit(this.lineHeight))
+            !this.isNvue && this.block && (style.display = 'block')
+            return deepMerge(style, addStyle(this.customStyle))
         },
         isNvue() {
             let nvue = false

package/components/u-textarea/props.js

@@ -21,12 +21,12 @@ export const props = defineMixin({
 		// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
 		placeholderClass: {
 			type: String,
-			default: () => defProps.input.placeholderClass
+			default: () => defProps.textarea.placeholderClass
 		},
 		// 指定placeholder的样式
 		placeholderStyle: {
 			type: [String, Object],
-			default: () => defProps.input.placeholderStyle
+			default: () => defProps.textarea.placeholderStyle
 		},
 		// 输入框高度
 		height: {

package/components/u-textarea/textarea.js

@@ -13,7 +13,7 @@ export default {
 		value: '',
 		placeholder: '',
 		placeholderClass: 'textarea-placeholder',
-		placeholderStyle: 'color: #c0c4cc',
+		placeholderStyle: '',
 		height: 70,
 		confirmType: 'done',
 		disabled: false,

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

@@ -2,11 +2,11 @@
     <view class="u-textarea" :class="textareaClass" :style="[textareaStyle]">
         <textarea
             class="u-textarea__field"
-            :value="innerValue"
-            :style="fieldStyle"
-            :placeholder="placeholder"
-            :placeholder-style="addStyle(placeholderStyle, typeof placeholderStyle === 'string' ? 'string' : 'object')"
-            :placeholder-class="placeholderClass"
+            :value="innerValue"
+            :style="fieldStyle"
+            :placeholder="placeholder"
+            :placeholder-style="placeholderStyleInner"
+            :placeholder-class="placeholderClass"
             :disabled="disabled"
             :focus="focus"
             :autoHeight="autoHeight"
@@ -30,14 +30,12 @@
             @keyboardheightchange="onKeyboardheightchange"
         ></textarea>
 		<!-- #ifndef MP-ALIPAY -->
-        <text
-            class="u-textarea__count"
-            :style="{
-                'background-color': disabled ? 'transparent' : '#fff',
-            }"
-            v-if="count"
-            >{{ innerValue.length }}/{{ maxlength }}</text
-        >
+        <text
+            class="u-textarea__count"
+            :style="countStyle"
+            v-if="count"
+            >{{ innerValue.length }}/{{ maxlength }}</text
+        >
 		<!-- #endif -->
     </view>
 </template>
@@ -145,38 +143,75 @@ export default {
 	    }
         // #endif
 	},
-    computed: {
-		fieldStyle() {
-			let style = {};
-			style['height'] = addUnit(this.height);
-			if (this.autoHeight) {
-				style['height'] = 'auto';
-				style['minHeight'] = addUnit(this.height);
-			}
-			return style;
+    computed: {
+        placeholderStyleInner() {
+            if (this.placeholderStyle) {
+                return addStyle(this.placeholderStyle, typeof this.placeholderStyle === 'string' ? 'string' : 'object')
+            }
+            return `color: ${this.upThemeVar('--up-tips-color', this.$u?.color?.tipsColor || '#909399')}`
+        },
+        countStyle() {
+            if (this.disabled) return { backgroundColor: 'transparent' }
+            return {
+                backgroundColor: this.upThemeVar('--up-card-bg-color', '#ffffff'),
+                color: this.upThemeVar('--up-tips-color', '#909193')
+            }
+        },
+		fieldStyle() {
+			const style = {
+                height: addUnit(this.height),
+                backgroundColor: 'transparent',
+                color: this.upThemeVar('--up-content-color', '#606266'),
+                caretColor: this.upThemeVar('--up-main-color', '#303133')
+            };
+			if (this.autoHeight) {
+				style['height'] = 'auto';
+				style['minHeight'] = addUnit(this.height);
+			}
+			return style;
 		},
         // 组件的类名
-        textareaClass() {
-            let classes = [],
-                { border, disabled } = this;
-            border === "surround" &&
-                (classes = classes.concat(["u-border", "u-textarea--radius"]));
-            border === "bottom" &&
-                (classes = classes.concat([
-                    "u-border-bottom",
-                    "u-textarea--no-radius",
-                ]));
-            disabled && classes.push("u-textarea--disabled");
-            return classes.join(" ");
-        },
-        // 组件的样式
-        textareaStyle() {
-            const style = {};
-            // #ifdef APP-NVUE
-            // 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距
-            if (os() === "android") {
-                style.paddingTop = "6px";
-                style.paddingLeft = "9px";
+        textareaClass() {
+            let classes = [],
+                { border, disabled } = this;
+            border === "surround" &&
+                (classes = classes.concat(["u-textarea--radius"]));
+            border === "bottom" &&
+                (classes = classes.concat([
+                    "u-textarea--no-radius",
+                ]));
+            disabled && classes.push("u-textarea--disabled");
+            return classes.join(" ");
+        },
+        textareaBorderColor() {
+            const lightBorder = this.upThemeVar('--up-border-color', '#dadbde');
+            return this.upThemeVar(
+                '--up-input-border-color',
+                this.upThemeIsDark ? 'rgba(255, 255, 255, 0.08)' : lightBorder
+            );
+        },
+        // 组件的样式
+        textareaStyle() {
+            const style = {};
+            style.backgroundColor = this.disabled
+                ? this.upThemeVar('--up-bg-color', '#f5f7fa')
+                : this.upThemeVar('--up-card-bg-color', '#ffffff');
+            style.color = this.upThemeVar('--up-content-color', '#606266');
+            if (this.border === "surround") {
+                style.borderWidth = "0.5px";
+                style.borderStyle = "solid";
+                style.borderColor = this.textareaBorderColor;
+            }
+            if (this.border === "bottom") {
+                style.borderBottomWidth = "0.5px";
+                style.borderBottomStyle = "solid";
+                style.borderBottomColor = this.textareaBorderColor;
+            }
+            // #ifdef APP-NVUE
+            // 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距
+            if (os() === "android") {
+                style.paddingTop = "6px";
+                style.paddingLeft = "9px";
                 style.paddingBottom = "3px";
                 style.paddingRight = "6px";
             }
@@ -245,10 +280,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.u-textarea {
-    border-radius: 4px;
-    background-color: #fff;
-    position: relative;
+.u-textarea {
+    border-radius: 4px;
+    background-color: var(--up-card-bg-color, #fff);
+    position: relative;
     @include flex;
     flex: 1;
 	padding: 9px;
@@ -261,25 +296,44 @@ export default {
         border-radius: 0;
     }
 
-    &--disabled {
-        background-color: #f5f7fa;
-    }
+    &--disabled {
+        background-color: var(--up-bg-color, #f5f7fa);
+    }
 
-    &__field {
-        flex: 1;
-        font-size: 15px;
-        color: $u-content-color;
-		width: 100%;
-    }
+    &__field {
+        flex: 1;
+        font-size: 15px;
+        color: $u-content-color;
+        background-color: transparent;
+        border: none;
+        outline: none;
+		width: 100%;
+        /* #ifdef H5 */
+        :deep(.uni-textarea-wrapper),
+        :deep(.uni-textarea-textarea) {
+            background-color: transparent;
+        }
+
+        :deep(.uni-textarea-textarea) {
+            color: inherit;
+            border: none;
+            outline: none;
+        }
+
+        :deep(.uni-textarea-placeholder) {
+            color: var(--up-tips-color, #909193);
+        }
+        /* #endif */
+    }
 
-    &__count {
+    &__count {
         position: absolute;
         right: 5px;
         bottom: 2px;
         font-size: 12px;
         color: $u-tips-color;
-        background-color: #ffffff;
-        padding: 1px 4px;
-    }
-}
+        background-color: var(--up-card-bg-color, #ffffff);
+        padding: 1px 4px;
+    }
+}
 </style>

package/components/u-th/u-th.vue

@@ -40,11 +40,12 @@
 			if (this.parent) {
 				// 将父组件的相关参数，合并到本组件
 				let style = {};
+				const borderColor = this.parent.resolvedBorderColor || this.parent.borderColor;
 				if (this.width) style.flex = `0 0 ${this.width}`;
 				style.textAlign = this.parent.align;
 				style.padding = this.parent.padding;
-				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
-				style.borderRight = `solid 1px ${this.parent.borderColor}`;
+				style.borderBottom = `solid 1px ${borderColor}`;
+				style.borderRight = `solid 1px ${borderColor}`;
 				Object.assign(style, this.parent.thStyle);
 				this.thStyle = style;
 			}
@@ -59,8 +60,8 @@
 		flex: 1;
 		justify-content: center;
 		font-size: 28rpx;
-		color: $u-main-color;
+		color: var(--up-main-color, $u-main-color);
 		font-weight: bold;
-		background-color: rgb(245, 246, 248);
+		background-color: var(--up-table-head-bg-color, var(--up-bg-color, rgb(245, 246, 248)));
 	}
 </style>

package/components/u-title/u-title.vue

@@ -1,5 +1,6 @@
 <style scoped lang="scss">
     .u-title {
+		color: var(--up-main-color, #303133);
 		.u-title-prefix {
 		    width: 4px;
 		    height: 18px;

package/components/u-toast/u-toast.vue

@@ -205,20 +205,20 @@
 	$u-toast-content-text-font-size:15px !default;
 	$u-toast-up-icon:10rpx !default;
 	$u-toast-u-type-primary-color:$u-primary !default;
-	$u-toast-u-type-primary-background-color:#ecf5ff !default;
-	$u-toast-u-type-primary-border-color:rgb(215, 234, 254) !default;
+	$u-toast-u-type-primary-background-color:$u-primary-light !default;
+	$u-toast-u-type-primary-border-color:$u-primary-disabled !default;
 	$u-toast-u-type-primary-border-width:1px !default;
 	$u-toast-u-type-success-color: $u-success !default;
-	$u-toast-u-type-success-background-color: #dbf1e1 !default;
-	$u-toast-u-type-success-border-color: #BEF5C8 !default;
+	$u-toast-u-type-success-background-color: $u-success-light !default;
+	$u-toast-u-type-success-border-color: $u-success-disabled !default;
 	$u-toast-u-type-success-border-width: 1px !default;
 	$u-toast-u-type-error-color:$u-error !default;
-	$u-toast-u-type-error-background-color:#fef0f0 !default;
-	$u-toast-u-type-error-border-color:#fde2e2 !default;
+	$u-toast-u-type-error-background-color:$u-error-light !default;
+	$u-toast-u-type-error-border-color:$u-error-disabled !default;
 	$u-toast-u-type-error-border-width: 1px !default;
 	$u-toast-u-type-warning-color:$u-warning !default;
-	$u-toast-u-type-warning-background-color:#fdf6ec !default;
-	$u-toast-u-type-warning-border-color:#faecd8 !default;
+	$u-toast-u-type-warning-background-color:$u-warning-light !default;
+	$u-toast-u-type-warning-border-color:$u-warning-disabled !default;
 	$u-toast-u-type-warning-border-width: 1px !default;
 	$u-toast-u-type-default-color:#fff !default;
 	$u-toast-u-type-default-background-color:#585858 !default;