uview-plus 3.7.36 → 3.8.18

package/components/u-select/u-select.vue

@@ -1,31 +1,31 @@
-<template>
-	<view class="u-select">
-		<view :class="['u-select__content', disabled && 'disabled']">
-			<view class="u-select__label" @click="openSelect">
-				<slot name="text" :currentLabel="currentLabel">
-					<text class="u-select__text" v-if="showOptionsLabel">
-						{{ currentLabel }}
-					</text>
-					<text class="u-select__text" v-else>
-						{{ label }}
-					</text>
-				</slot>
-				<slot name="icon">
-					<up-icon name="arrow-down" :size="iconSize" :color="iconColor"></up-icon>
-				</slot>
-			</view>
-			<u-overlay :show="isOpen" @click="overlayClick" v-if="overlay" :zIndex="zIndex" :duration="duration + 50"
-				:customStyle="overlayStyle" :opacity="overlayOpacity" @touchmove.stop.prevent="noop"></u-overlay>
-			<view class="u-select__options__wrap"
-				:style="{ overflowY: 'auto', zIndex: zIndex + 1, left: optionsWrapLeft, right: optionsWrapRight, maxHeight: maxHeight}">
-				<view class="u-select__options" v-if="isOpen">
-					<slot name="options">
-						<view class="u-select__options_item" :class="current == item[keyName] ? 'active': ''"
-							:key="index" v-for="(item, index) in options" @click="selectItem(item)">
-							<slot name="optionItem" :item="item">
-								<text class="u-select__item_text" :style="{color: itemColor}">
-									{{item[labelName]}}
-								</text>
+<template>
+	<view class="u-select">
+		<view :class="['u-select__content', disabled && 'disabled']">
+			<view :class="['u-select__label', border && 'u-select__label--border']" :style="selectLabelStyle" @click="openSelect">
+				<slot name="text" :currentLabel="currentLabel">
+					<text class="u-select__text" :style="{ color: resolvedTextColor }" v-if="showOptionsLabel">
+						{{ currentLabel }}
+					</text>
+					<text class="u-select__text" :style="{ color: resolvedTextColor }" v-else>
+						{{ label }}
+					</text>
+				</slot>
+				<slot name="icon">
+					<up-icon name="arrow-down" :size="iconSize" :color="resolvedIconColor"></up-icon>
+				</slot>
+			</view>
+			<u-overlay :show="isOpen" @click="overlayClick" v-if="overlay" :zIndex="zIndex" :duration="duration + 50"
+				:customStyle="overlayStyle" :opacity="overlayOpacity" @touchmove.stop.prevent="noop"></u-overlay>
+			<view class="u-select__options__wrap" :style="optionsWrapStyle">
+				<view class="u-select__options" :style="optionsStyle" v-if="isOpen">
+					<slot name="options">
+						<view class="u-select__options_item" :class="current == item[keyName] ? 'active': ''"
+							:style="{ color: resolvedItemColor }"
+							:key="index" v-for="(item, index) in options" @click="selectItem(item)">
+							<slot name="optionItem" :item="item">
+								<text class="u-select__item_text" :style="{color: resolvedItemColor}">
+									{{item[labelName]}}
+								</text>
 							</slot>
 						</view>
 					</slot>
@@ -102,10 +102,10 @@
 				type: Number,
 				default: 11000
 			},
-			itemColor: {
-				type: String,
-				default: '#333333'
-			},
+			itemColor: {
+				type: String,
+				default: ''
+			},
 			iconColor: {
 				type: String,
 				default: ''
@@ -115,23 +115,79 @@
 				default: '13px'
 			},
 			// 是否禁用
-			disabled: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示触发区边框
+			border: {
+				type: Boolean,
+				default: false
+			},
+			// 下拉面板宽度，支持 px/rpx/% 等，如 240px 或 300rpx
+			optionsWidth: {
+				type: [String, Number],
+				default: ''
+			}
+		},
+		data() {
+			return {
 				isOpen: false,
 				optionsWrapLeft: 'auto',
 				optionsWrapRight: 'auto'
 			}
 		},
-		computed: {
-			currentLabel() {
-				let name = '';
-				this.options.forEach((ele) => {
-					if (ele[this.keyName] === this.current) {
+		computed: {
+			resolvedItemColor() {
+				return this.itemColor || this.upThemeVar('--up-main-color', '#303133');
+			},
+			resolvedTextColor() {
+				return this.upThemeVar('--up-main-color', '#303133');
+			},
+			resolvedIconColor() {
+				return this.iconColor || this.upThemeVar('--up-content-color', '#606266');
+			},
+			normalizedOptionsWidth() {
+				if (this.optionsWidth === '' || this.optionsWidth === null || typeof this.optionsWidth === 'undefined') {
+					return '';
+				}
+				if (typeof this.optionsWidth === 'number') {
+					return `${this.optionsWidth}px`;
+				}
+				return this.optionsWidth;
+			},
+			selectLabelStyle() {
+				if (!this.border) return {};
+				return {
+					borderColor: this.upThemeVar('--up-border-color', '#dadbde'),
+					backgroundColor: this.upThemeVar('--up-card-bg-color', '#ffffff')
+				};
+			},
+			optionsWrapStyle() {
+				const style = {
+					overflowY: 'auto',
+					zIndex: this.zIndex + 1,
+					left: this.optionsWrapLeft,
+					right: this.optionsWrapRight,
+					maxHeight: this.maxHeight
+				};
+				if (this.normalizedOptionsWidth) {
+					style.width = this.normalizedOptionsWidth;
+				}
+				return style;
+			},
+			optionsStyle() {
+				const style = {};
+				if (this.normalizedOptionsWidth) {
+					style.width = this.normalizedOptionsWidth;
+					style.minWidth = this.normalizedOptionsWidth;
+				}
+				return style;
+			},
+			currentLabel() {
+				let name = '';
+				this.options.forEach((ele) => {
+					if (ele[this.keyName] === this.current) {
 						name = ele[this.labelName];
 					}
 				});
@@ -159,12 +215,14 @@
 				this.$emit('update:current', item[this.keyName]);
 				this.$emit('select', item);
 			},
-			adjustOptionsWrapPosition() {
-				let wi = getWindowInfo();
-				let windowWidth = wi.windowWidth;
-				this.$uGetRect('.u-select__options__wrap').then(rect => {
-					if (rect.left + rect.width > windowWidth) {
-						// 如果右侧被遮挡，则调整到左侧
+			adjustOptionsWrapPosition() {
+				this.optionsWrapLeft = '0px';
+				this.optionsWrapRight = 'auto';
+				let wi = getWindowInfo();
+				let windowWidth = wi.windowWidth;
+				this.$uGetRect('.u-select__options__wrap').then(rect => {
+					if (rect.left + rect.width > windowWidth) {
+						// 如果右侧被遮挡，则调整到左侧
 						this.optionsWrapLeft = 'auto';
 						this.optionsWrapRight = `0px`;
 					}
@@ -178,14 +236,24 @@
 	.u-select__content {
 		position: relative;
 
-		.u-select__label {
-			display: flex;
-			justify-content: space-between;
-
-			/* #ifdef H5 */
-			&:hover {
-				cursor: pointer;
-			}
+		.u-select__label {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			&--border {
+				padding: 8px 10px;
+				border-width: 1px;
+				border-style: solid;
+				border-radius: 4px;
+				min-height: 36px;
+				box-sizing: border-box;
+			}
+
+			/* #ifdef H5 */
+			&:hover {
+				cursor: pointer;
+			}
 
 			/* #endif */
 		}
@@ -199,19 +267,19 @@
 			pointer-events: none;
 		}
 
-		.u-select__options__wrap {
-			margin-bottom: 46px;
-			position: absolute;
-			top: 20px;
-			left: 0;
-		}
+		.u-select__options__wrap {
+			margin-bottom: 46px;
+			position: absolute;
+			top: calc(100% + 4px);
+			left: 0;
+		}
 
-		.u-select__options {
-			min-width: 100px;
-			box-sizing: border-box;
-			border-radius: 4px;
-			border: 1px solid #f1f1f1;
-			background-color: #fff;
+		.u-select__options {
+			min-width: 100px;
+			box-sizing: border-box;
+			border-radius: 4px;
+			border: 1px solid var(--up-border-color, #f1f1f1);
+			background-color: var(--up-card-bg-color, #fff);
 
 			.u-select__options_item {
 				padding: 10px 12px;
@@ -219,9 +287,9 @@
 				width: 100%;
 				height: 100%;
 
-				&:hover {
-					background-color: #f7f7f7;
-				}
+				&:hover {
+					background-color: var(--up-bg-color, #f7f7f7);
+				}
 
 				/* #ifdef H5 */
 				&:hover {

package/components/u-signature/u-signature.vue

@@ -1,12 +1,12 @@
 <template>
 	<view class="u-signature">
-		<view class="u-signature__canvas-wrap" :style="{background: bgColor}">
+		<view class="u-signature__canvas-wrap" :style="{background: resolvedBgColor}">
 			<up-canvas 
 				ref="signatureCanvas"
 				:canvas-id="canvasId"
 				:width="canvasWidth"
 				:height="canvasHeight"
-				:bg-color="bgColor"
+				:bg-color="resolvedBgColor"
 				@touchstart="touchStart" 
 				@touchmove="touchMove" 
 				@touchend="touchEnd"
@@ -22,19 +22,19 @@
 		<view v-if="showToolbar" class="u-signature__toolbar">
 			<view class="u-signature__toolbar-icons u-flex u-flex-x">
 				<view class="u-signature__toolbar-icon" @click="undo">
-					<up-icon name="arrow-left" size="22" :color="pathStack.length === 0 ? '#ccc' : '#999'"></up-icon>
+					<up-icon name="arrow-left" size="22" :color="pathStack.length === 0 ? iconDisabledColor : iconDefaultColor"></up-icon>
 				</view>
 				<view class="u-signature__toolbar-icon" @click="clear">
-					<up-icon name="trash" size="25" color="#999"></up-icon>
+					<up-icon name="trash" size="25" :color="iconDefaultColor"></up-icon>
 				</view>
 				<view class="u-signature__toolbar-icon" @click="toggleBrushSettings">
-					<up-icon name="edit-pen" size="25" color="#999"></up-icon>
+					<up-icon name="edit-pen" size="25" :color="iconDefaultColor"></up-icon>
 				</view>
 				<view class="u-signature__toolbar-icon" @click="toggleColorSettings">
-					<up-icon name="grid" size="24" color="#999"></up-icon>
+					<up-icon name="grid" size="24" :color="iconDefaultColor"></up-icon>
 				</view>
 				<view class="u-signature__toolbar-icon" @click="exportSignature">
-					<up-icon name="checkmark" size="25" :color="isEmpty ? '#ccc' : '#999'"></up-icon>
+					<up-icon name="checkmark" size="25" :color="isEmpty ? iconDisabledColor : iconDefaultColor"></up-icon>
 				</view>
 			</view>
 			
@@ -114,7 +114,7 @@
 				canvasId: 'u-signature-' + Math.random().toString(36).substr(2, 9),
 				canvasWidth: 300,
 				canvasHeight: 200,
-				lineColor: '#000000',
+				lineColor: '',
 				lineWidth: 3,
 				isDrawing: false,
 				pathStack: [], // 存储绘制路径用于回退
@@ -136,6 +136,19 @@
 				canvasInstance: null // 缓存canvas实例
 			}
 		},
+		computed: {
+			resolvedBgColor() {
+				return this.bgColor === '#ffffff'
+					? (this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
+					: this.bgColor
+			},
+			iconDefaultColor() {
+				return this.upThemeVar('--up-content-color', '#999999')
+			},
+			iconDisabledColor() {
+				return this.upThemeVar('--up-disabled-color', '#c8c9cc')
+			}
+		},
 		mounted() {
 			// 初始化时获取canvas实例
 			this.$nextTick(() => {
@@ -158,7 +171,7 @@
 			},
 			color: {
 				handler(newVal) {
-					this.lineColor = newVal
+					this.lineColor = this.resolveStrokeColor(newVal)
 				},
 				immediate: true
 			},
@@ -171,6 +184,12 @@
 		},
 		methods: {
 			t,
+			resolveStrokeColor(color) {
+				if (color === '#000000') {
+					return this.upThemeIsDark ? '#f5f5f5' : '#000000'
+				}
+				return color
+			},
 			
 			// 获取签名画布实例
 			getCanvasInstance() {
@@ -400,7 +419,7 @@
 		flex-direction: column;
 		
 		&__canvas-wrap {
-			border: 1px solid #e0e0e0;
+			border: 1px solid var(--up-border-color, #e0e0e0);
 			border-radius: 4px;
 			overflow: hidden;
 		}
@@ -412,7 +431,7 @@
 		
 		&__toolbar {
 			margin-top: 5px;
-            background-color: #fff;
+            background-color: var(--up-card-bg-color, #fff);
 		}
 		
 		&__toolbar-icons {
@@ -441,7 +460,7 @@
 				display: block;
 				margin-bottom: 10px;
 				font-size: 14px;
-				color: #999;
+				color: var(--up-tips-color, #999);
 			}
 		}
 		
@@ -453,7 +472,7 @@
 			display: block;
 			margin-bottom: 10px;
 			font-size: 14px;
-			color: #999;
+			color: var(--up-tips-color, #999);
 		}
 		
 		&__colors {
@@ -467,11 +486,11 @@
 			width: 30px;
 			height: 30px;
 			border-radius: 50%;
-			border: 2px solid #f0f0f0;
+			border: 2px solid var(--up-border-color, #f0f0f0);
 			cursor: pointer;
 			
 			&--active {
-				border-color: #2979ff;
+				border-color: var(--up-primary, #2979ff);
 				transform: scale(1.1);
 			}
 		}
@@ -483,4 +502,4 @@
 			justify-content: center;
 		}
 	}
-</style>
+</style>

package/components/u-skeleton/u-skeleton.vue

@@ -190,10 +190,15 @@
 
 	@mixin background {
 		/* #ifdef APP-NVUE */
-		background-color: #F1F2F4;
+		background-color: var(--up-skeleton-bg-color, var(--up-fill-color, #2f3135));
 		/* #endif */
 		/* #ifndef APP-NVUE */
-		background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+		background: linear-gradient(
+			90deg,
+			var(--up-skeleton-bg-color, var(--up-fill-color, #2f3135)) 25%,
+			var(--up-skeleton-shimmer-color, rgba(255, 255, 255, 0.12)) 37%,
+			var(--up-skeleton-bg-color, var(--up-fill-color, #2f3135)) 50%
+		);
 		background-size: 400% 100%;
 		/* #endif */
 	}

package/components/u-slider/u-slider.vue

@@ -177,11 +177,40 @@
             	deep:true
         	}
 		},
-		mounted() {
+		async mounted() {
 			if (this.height != '') {
 				this.sizeLocal = val
 			} else {
 				this.sizeLocal = this.size
+			}
+			
+			// 获取滑块条的尺寸信息
+			if (!this.useNative) {
+				// #ifndef APP-NVUE
+				this.$uGetRect('.u-slider__base').then(rect => {
+					this.sliderRect = rect;
+					// console.log('sliderRect', this.sliderRect)
+					if (this.sliderRect.width == 0) {
+						console.info('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。')
+					}
+					this.init()
+				});
+				// #endif
+				// #ifdef APP-NVUE
+				await sleep(30) // 不延迟会出现size获取都为0的问题
+				const ref = this.$refs['u-slider__base']
+				ref &&
+					dom.getComponentRect(ref, (res) => {
+						// console.log(res)
+						this.sliderRect = {
+							top: res.size.top,
+							left: res.size.left,
+							width: res.size.width,
+							height: res.size.height
+						};
+						this.init()
+					})
+				// #endif
 			}
 		},
 		computed: {
@@ -215,36 +244,6 @@
 				return style;
 			}
 		},
-		async mounted() {
-			// 获取滑块条的尺寸信息
-			if (!this.useNative) {
-				// #ifndef APP-NVUE
-				this.$uGetRect('.u-slider__base').then(rect => {
-					this.sliderRect = rect;
-					// console.log('sliderRect', this.sliderRect)
-					if (this.sliderRect.width == 0) {
-						console.info('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。')
-					}
-					this.init()
-				});
-				// #endif
-				// #ifdef APP-NVUE
-				await sleep(30) // 不延迟会出现size获取都为0的问题
-				const ref = this.$refs['u-slider__base']
-				ref &&
-					dom.getComponentRect(ref, (res) => {
-						// console.log(res)
-						this.sliderRect = {
-							top: res.size.top,
-							left: res.size.left,
-							width: res.size.width,
-							height: res.size.height
-						};
-						this.init()
-					})
-				// #endif
-			}
-		},
 		methods: {
 			addUnit,
 			addStyle,

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

@@ -21,10 +21,10 @@
 						backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
 						borderColor: statusColor
 					}" class="u-steps-item__wrapper__circle">
-					<text v-if="statusClass === 'process' || statusClass === 'wait'"
-						class="u-steps-item__wrapper__circle__text" :style="{
-							color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
-						}">{{ index + 1}}</text>
+					<text v-if="statusClass === 'process' || statusClass === 'wait'"
+						class="u-steps-item__wrapper__circle__text" :style="{
+							color: index == parentData.current ? activeStepTextColor : parentData.inactiveColor
+						}">{{ index + 1}}</text>
 					<up-icon v-else :color="statusClass === 'error' ? 'error' : parentData.activeColor" size="12"
 						:name="statusClass === 'error' ? 'close' : 'checkmark'"></up-icon>
 				</view>
@@ -170,8 +170,8 @@
 				}
 				return colorTmp
 			},
-			contentStyle() {
-				const style = {}
+			contentStyle() {
+				const style = {}
 				if (this.parentData.direction === 'column') {
 					style.marginLeft = this.parentData.dot ? '2px' : '6px'
 					style.marginTop = this.parentData.dot ? '0px' : '6px'
@@ -179,10 +179,13 @@
 					style.marginTop = this.parentData.dot ? '2px' : '6px'
 					style.marginLeft = this.parentData.dot ? '2px' : '6px'
 				}
-
-				return style
-			}
-		},
+
+				return style
+			},
+			activeStepTextColor() {
+				return this.upThemeVar('--up-white', '#ffffff')
+			}
+		},
 		mounted() {
 			this.parent && this.parent.updateFromChild()
 			sleep().then(() => {
@@ -247,13 +250,13 @@
 			padding-bottom: 5px;
 		}
 
-		&__wrapper {
-			@include flex;
-			justify-content: center;
-			align-items: center;
-			position: relative;
-			background-color: #fff;
-			border-radius: 50px;
+		&__wrapper {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			background-color: var(--up-card-bg-color, #fff);
+			border-radius: 50px;
 
 			&--column {
 				width: 20px;

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

@@ -0,0 +1,41 @@
+:root,
+page,
+body {
+	--up-subsection-bg-color: #eeeeef;
+	--up-subsection-bar-color: #ffffff;
+	--up-subsection-inactive-color: #303133;
+	--up-subsection-disabled-text-color: #c8c9cc;
+	--up-subsection-disabled-border-color: #d4d4d4;
+	--up-subsection-disabled-bar-color: #f5f5f5;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-subsection-bg-color: #2b2c30;
+		--up-subsection-bar-color: #3a3b40;
+		--up-subsection-inactive-color: #d1d5db;
+		--up-subsection-disabled-text-color: #6b7280;
+		--up-subsection-disabled-border-color: #3a3a3c;
+		--up-subsection-disabled-bar-color: #3a3a3c;
+	}
+}
+
+[data-up-theme='light'] {
+	--up-subsection-bg-color: #eeeeef;
+	--up-subsection-bar-color: #ffffff;
+	--up-subsection-inactive-color: #303133;
+	--up-subsection-disabled-text-color: #c8c9cc;
+	--up-subsection-disabled-border-color: #d4d4d4;
+	--up-subsection-disabled-bar-color: #f5f5f5;
+}
+
+[data-up-theme='dark'] {
+	--up-subsection-bg-color: #2b2c30;
+	--up-subsection-bar-color: #3a3b40;
+	--up-subsection-inactive-color: #d1d5db;
+	--up-subsection-disabled-text-color: #6b7280;
+	--up-subsection-disabled-border-color: #3a3a3c;
+	--up-subsection-disabled-bar-color: #3a3a3c;
+}