uview-plus 3.7.32 → 3.8.18

package/components/u-popup/u-popup.vue

@@ -45,7 +45,7 @@
 					@touchcancel="onTouchEnd"
 				>
 					<!-- iOS风格的横条指示器 -->
-					<view class="u-popup__content__indicator"></view>
+					<view class="u-popup__content__indicator" :style="indicatorStyle"></view>
 				</view>
 				<slot></slot>
 				<view
@@ -58,7 +58,7 @@
 				>
 					<up-icon
 						name="close"
-						color="#909399"
+						:color="closeIconColor"
 						size="18"
 						bold
 					></up-icon>
@@ -195,8 +195,8 @@
 				if (this.mode !== 'center') {
 					style.flex = 1
 				}
-				// 背景色，一般用于设置为transparent，去除默认的白色背景
-				style.backgroundColor = this.bgColor
+				// 背景色，留空时跟随主题卡片背景
+				style.backgroundColor = this.bgColor || this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
 				if(this.round) {
 					const value = addUnit(this.round)
 					if(this.mode === 'top') {
@@ -212,6 +212,14 @@
 				
 				return deepMerge(style, addStyle(this.customStyle))
 			},
+			closeIconColor() {
+				return this.upThemeVar('--up-content-color', '#606266')
+			},
+			indicatorStyle() {
+				return {
+					backgroundColor: this.upThemeVar('--up-light-color', '#c0c4cc')
+				}
+			},
 			position() {
 				if (this.mode === 'center') {
 					return this.zoom ? 'fade-zoom' : 'fade'
@@ -413,7 +421,7 @@
 				width: 100px;
 				height: 5px;
 				border-radius: 100px;
-				background-color: #c0c4cc;
+				background-color: var(--up-light-color, #c0c4cc);
 			}
 
 			&__close {
@@ -445,4 +453,4 @@
 			}
 		}
 	}
-</style>
+</style>

package/components/u-pull-refresh/u-pull-refresh.vue

@@ -22,7 +22,7 @@
         <!-- 默认下拉状态 -->
         <view class="refresh-content">
           <view class="refresh-indicator">
-            <up-icon name="arrow-downward" size="26px"></up-icon>
+            <up-icon name="arrow-downward" size="26px" color="var(--up-content-color, #606266)"></up-icon>
           </view>
           <text class="refresh-text">{{ t("up.pullRefresh.pull") }}</text>
         </view>
@@ -37,7 +37,7 @@
         <!-- 默认释放状态 -->
         <view class="refresh-content">
           <view class="refresh-indicator">
-            <up-icon name="arrow-upward" size="26px"></up-icon>
+            <up-icon name="arrow-upward" size="26px" color="var(--up-content-color, #606266)"></up-icon>
           </view>
           <text class="refresh-text">{{ t("up.pullRefresh.release") }}</text>
         </view>
@@ -316,8 +316,8 @@ export default {
 .spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid #f3f3f3;
-  border-top: 2px solid #666;
+  border: 2px solid var(--up-border-color, #f3f3f3);
+  border-top: 2px solid var(--up-content-color, #666);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -329,6 +329,6 @@ export default {
 
 .refresh-text {
   font-size: 14px;
-  color: #666;
+  color: var(--up-main-color, #303133);
 }
-</style>
+</style>

package/components/u-radio/u-radio.vue

@@ -107,16 +107,16 @@
 			},
 			// 组件选中激活时的颜色
 			elActiveColor() {
-				return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff');
+				return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : this.upThemeVar('--up-primary', '#2979ff'));
 			},
 			// 组件选未中激活时的颜色
 			elInactiveColor() {
 				return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor :
-					'#c8c9cc');
+					this.upThemeVar('--up-border-color', '#c8c9cc'));
 			},
 			// label的颜色
 			elLabelColor() {
-				return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266')
+				return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : this.upThemeVar('--up-content-color', '#606266'))
 			},
 			// 组件的形状
 			elShape() {
@@ -129,7 +129,7 @@
 			},
 			elIconColor() {
 				const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor :
-					'#ffffff');
+					this.upThemeVar('--up-card-bg-color', '#ffffff'));
 				// 图标的颜色
 				if (this.elDisabled) {
 					// disabled状态下，已勾选的radio图标改为elInactiveColor
@@ -157,7 +157,7 @@
 			iconWrapStyle() {
 				// radio的整体样式
 				const style = {}
-				style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff'
+				style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : this.upThemeVar('--up-card-bg-color', '#ffffff')
 				style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
 				style.width = addUnit(this.elSize)
 				style.height = addUnit(this.elSize)
@@ -256,7 +256,7 @@
 	$u-radio-checked-color:#fff !default;
 	$u-radio-checked-background-color:red !default;
 	$u-radio-checked-border-color: #2979ff !default;
-	$u-radio-disabled-background-color:#ebedf0 !default;
+	$u-radio-disabled-background-color:var(--up-bg-color, #ebedf0) !default;
 	$u-radio-disabled--checked-color:#c8c9cc !default;
 	$u-radio-label-margin-left: 5px !default;
 	$u-radio-label-margin-right:12px !default;

package/components/u-rate/rate.js

@@ -14,8 +14,8 @@ export default {
         count: 5,
         disabled: false,
         size: 18,
-        inactiveColor: '#b2b2b2',
-        activeColor: '#FA3534',
+        inactiveColor: '',
+        activeColor: '',
         gutter: 4,
         minCount: 1,
         allowHalf: false,

package/components/u-rate/u-rate.vue

@@ -29,10 +29,10 @@
                         "
                         :color="
                             disabled
-                                ? '#c8c9cc'
+                                ? disabledColorInner
                                 : Math.floor(activeIndex) > index
-                                ? activeColor
-                                : inactiveColor
+                                ? activeColorInner
+                                : inactiveColorInner
                         "
                         :custom-style="{
                             padding: `0 ${addUnit(gutter / 2)}`,
@@ -57,10 +57,10 @@
                         "
                         :color="
                             disabled
-                                ? '#c8c9cc'
+                                ? disabledColorInner
                                 : Math.ceil(activeIndex) > index
-                                ? activeColor
-                                : inactiveColor
+                                ? activeColorInner
+                                : inactiveColorInner
                         "
                         :custom-style="{
                             padding: `0 ${addUnit(gutter / 2)}`
@@ -106,16 +106,20 @@
 		name: "u-rate",
 		mixins: [mpMixin, mixin, props],
 		data() {
+			const modelVal = Number(this.modelValue)
+			const valueVal = Number(this.value)
+			const minCount = Number(this.minCount)
+			const defaultActive = Number.isFinite(minCount) ? minCount : 0
 			return {
 				// 生成一个唯一id，否则一个页面多个评分组件，会造成冲突
 				elId: guid(),
 				elClass: guid(),
 				rateBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
 				// #ifdef VUE3
-				activeIndex: this.modelValue,
+				activeIndex: Number.isFinite(modelVal) ? modelVal : defaultActive,
 				// #endif
 				// #ifdef VUE2
-				activeIndex: this.value,
+				activeIndex: Number.isFinite(valueVal) ? valueVal : defaultActive,
 				// #endif
 				rateWidth: 0, // 每个星星的宽度
 				// 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
@@ -125,22 +129,67 @@
 		watch: {
 			// #ifdef VUE3
 			modelValue(val) {
-				this.activeIndex = val;
+				this.activeIndex = this.normalizeActiveIndex(val);
 			},
 			// #endif
         	// #ifdef VUE2
 			value(val) {
-				this.activeIndex = val;
+				this.activeIndex = this.normalizeActiveIndex(val);
 			},
 			// #endif
 			activeIndex: 'emitEvent'
 		},
+		computed: {
+			disabledColorInner() {
+				return this.upThemeVar('--up-disabled-color', '#c8c9cc')
+			},
+			activeColorInner() {
+				return this.activeColor || this.upThemeVar('--up-primary', '#FA3534')
+			},
+			inactiveColorInner() {
+				return this.inactiveColor || this.upThemeVar('--up-tips-color', '#b2b2b2')
+			}
+		},
 		// #ifdef VUE3
 		emits: ['update:modelValue', 'change'],
     	// #endif
 		methods: {
 			addStyle,
 			addUnit,
+			toNumber(value, fallback = 0) {
+				const num = Number(value)
+				return Number.isFinite(num) ? num : fallback
+			},
+			getMinCountValue() {
+				return this.toNumber(this.minCount, 0)
+			},
+			getCountValue() {
+				return this.toNumber(this.count, 0)
+			},
+			normalizeActiveIndex(value) {
+				let normalized = this.toNumber(value, this.getMinCountValue())
+				const minCount = this.getMinCountValue()
+				const count = this.getCountValue()
+				if (normalized < minCount) normalized = minCount
+				if (count > 0 && normalized > count) normalized = count
+				return normalized
+			},
+			getFallbackRateWidth() {
+				const size = parseFloat(this.size) || 18
+				const gutter = parseFloat(this.gutter) || 0
+				const width = size + gutter
+				return width > 0 ? width : 18
+			},
+			ensureRateMetrics() {
+				if (!Number.isFinite(this.rateBoxLeft)) {
+					this.rateBoxLeft = 0
+				}
+				if (!Number.isFinite(this.rateWidth) || this.rateWidth <= 0) {
+					this.rateWidth = this.getFallbackRateWidth()
+					this.getRateIconWrapRect()
+				}
+				return Number.isFinite(this.rateWidth) && this.rateWidth > 0
+			},
 			init() {
 				sleep().then(() => {
 					this.getRateItemRect();
@@ -153,12 +202,17 @@
 				// uView封装的获取节点的方法，详见文档
 				// #ifndef APP-NVUE
 				this.$uGetRect("#" + this.elId).then((res) => {
-					this.rateBoxLeft = res.left;
+					if (res && Number.isFinite(res.left)) {
+						this.rateBoxLeft = res.left;
+					}
 				});
 				// #endif
 				// #ifdef APP-NVUE
 				dom.getComponentRect(this.$refs["u-rate"], (res) => {
-					this.rateBoxLeft = res.size.left;
+					const left = res && res.size ? res.size.left : NaN
+					if (Number.isFinite(left)) {
+						this.rateBoxLeft = left;
+					}
 				});
 				// #endif
 			},
@@ -167,14 +221,19 @@
 				// uView封装的获取节点的方法，详见文档
 				// #ifndef APP-NVUE
 				this.$uGetRect("." + this.elClass).then((res) => {
-					this.rateWidth = res.width;
+					if (res && Number.isFinite(res.width) && res.width > 0) {
+						this.rateWidth = res.width;
+					}
 				});
 				// #endif
 				// #ifdef APP-NVUE
 				dom.getComponentRect(
 					this.$refs["u-rate__content__item__icon-wrap"][0],
 					(res) => {
-						this.rateWidth = res.size.width;
+						const width = res && res.size ? res.size.width : NaN
+						if (Number.isFinite(width) && width > 0) {
+							this.rateWidth = width;
+						}
 					}
 				);
 				// #endif
@@ -186,6 +245,7 @@
 					return;
 				}
 				this.preventEvent(e);
+				this.ensureRateMetrics();
 				const x = e.changedTouches[0].pageX;
 				this.getActiveIndex(x);
 			},
@@ -196,6 +256,7 @@
 					return;
 				}
 				this.preventEvent(e);
+				this.ensureRateMetrics();
 				const x = e.changedTouches[0].pageX;
 				this.getActiveIndex(x);
 			},
@@ -206,6 +267,7 @@
 					return;
 				}
 				this.preventEvent(e);
+				this.ensureRateMetrics();
 				let x = 0;
 				// 点击时，在nvue上，无法获得点击的坐标，所以无法实现点击半星选择
 				// #ifndef APP-NVUE
@@ -219,14 +281,19 @@
 			},
 			// 发出事件
 			emitEvent() {
+				const normalizedValue = this.normalizeActiveIndex(this.activeIndex)
+				if (!Number.isFinite(this.activeIndex) || normalizedValue !== this.activeIndex) {
+					this.activeIndex = normalizedValue
+					return
+				}
 				// 发出change事件
-				this.$emit("change", this.activeIndex);
+				this.$emit("change", normalizedValue);
 				// 同时修改双向绑定的值
 				// #ifdef VUE3
-                this.$emit("update:modelValue", this.activeIndex);
+                this.$emit("update:modelValue", normalizedValue);
                 // #endif
                 // #ifdef VUE2
-				this.$emit("input", this.activeIndex);
+				this.$emit("input", normalizedValue);
 				// #endif
 			},
 			// 获取当前激活的评分图标
@@ -234,8 +301,18 @@
 				if (this.disabled || this.readonly) {
 					return;
 				}
+				if (!this.ensureRateMetrics()) {
+					return;
+				}
+				const count = this.getCountValue()
+				if (count <= 0) {
+					return;
+				}
+				if (!Number.isFinite(x)) {
+					return;
+				}
 				// 判断当前操作的点的x坐标值，是否在允许的边界范围内
-				const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft;
+				const allRateWidth = this.rateWidth * count + this.rateBoxLeft;
 				// 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
 				x = range(this.rateBoxLeft, allRateWidth, x) - this.rateBoxLeft
 				// 滑动点相对于评分盒子左边的距离
@@ -264,10 +341,10 @@
 					}
 
 				}
-				this.activeIndex = Math.min(index, this.count);
+				this.activeIndex = this.normalizeActiveIndex(Math.min(index, count));
 				// 对最少颗星星的限制
-				if (this.activeIndex < this.minCount) {
-					this.activeIndex = this.minCount;
+				if (this.activeIndex < this.getMinCountValue()) {
+					this.activeIndex = this.getMinCountValue();
 				}
 
 				// 设置延时为了让click事件在touchmove之前触发

package/components/u-search/search.js

@@ -12,7 +12,7 @@ export default {
     // search
     search: {
         shape: 'round',
-        bgColor: '#f2f2f2',
+        bgColor: '',
         placeholder: t("up.search.placeholder"),
         clearabled: true,
         focus: false,
@@ -25,8 +25,8 @@ export default {
         borderColor: 'transparent',
         searchIconColor: '#909399',
         searchIconSize: 22,
-        color: '#606266',
-        placeholderColor: '#909399',
+        color: '',
+        placeholderColor: '',
         searchIcon: 'search',
         iconPosition: 'left',
         margin: '0',

package/components/u-search/u-search.vue

@@ -10,9 +10,9 @@
 		<view
 		    class="u-search__content"
 		    :style="{
-				backgroundColor: bgColor,
+				backgroundColor: resolvedBgColor,
 				borderRadius: shape == 'round' ? '100px' : '4px',
-				borderColor: borderColor,
+				borderColor: resolvedBorderColor,
 			}"
 		>
 			<template v-if="$slots.label || label !== null">
@@ -25,7 +25,7 @@
 					@tap="clickIcon"
 				    :size="searchIconSize"
 				    :name="searchIcon"
-				    :color="searchIconColor ? searchIconColor : color"
+				    :color="searchIconColor ? searchIconColor : resolvedColor"
 				></up-icon>
 			</view>
 			<input
@@ -42,14 +42,14 @@
 				:auto-blur="autoBlur"
 			    placeholder-class="u-search__content__input--placeholder"
 			    :placeholder="placeholder"
-			    :placeholder-style="`color: ${placeholderColor}`"
+			    :placeholder-style="`color: ${resolvedPlaceholderColor}`"
 			    class="u-search__content__input"
 			    type="text"
 			    :style="[{
 					pointerEvents: disabled ? 'none' : 'auto',
 					textAlign: inputAlign,
-					color: color,
-					backgroundColor: bgColor,
+					color: resolvedColor,
+					backgroundColor: resolvedBgColor,
 					height: addUnit(height)
 				}, inputStyle]"
 			/>
@@ -163,6 +163,29 @@
 			// #endif
 		},
 		computed: {
+			resolvedBgColor() {
+				if (this.bgColor) {
+					return this.bgColor
+				}
+				return this.upThemeVar('--up-card-bg-color', this.$u?.color?.bgColor || '#f2f2f2')
+			},
+			resolvedBorderColor() {
+				// 外部显式传参时保持原行为
+				if (this.upHasProp('borderColor') || (this.borderColor && this.borderColor !== 'transparent')) {
+					return this.borderColor
+				}
+				// 暗黑模式默认给弱边框，避免背景同色时轮廓不明显
+				if (this.upThemeIsDark) {
+					return this.upThemeVar('--up-border-color', 'rgba(255, 255, 255, 0.12)')
+				}
+				return 'transparent'
+			},
+			resolvedColor() {
+				return this.color || this.upThemeVar('--up-content-color', this.$u?.color?.contentColor || '#606266')
+			},
+			resolvedPlaceholderColor() {
+				return this.placeholderColor || this.upThemeVar('--up-tips-color', this.$u?.color?.tipsColor || '#909399')
+			},
 			showActionBtn() {
 				return !this.animation && this.showAction
 			},