uview-plus 3.7.36 → 3.8.32

package/components/u-qrcode/qrcode.js

@@ -1023,11 +1023,12 @@ let QRCode = {};
     QRCode = function (opt) {
         //设置默认参数
         this.options = {
-            text: '',
-            size: 256,
-            correctLevel: 3,
-            background: '#ffffff',
-            foreground: '#000000',
+            text: '',
+            size: 256,
+            correctLevel: 3,
+            quietZone: 0,
+            background: '#ffffff',
+            foreground: '#000000',
             pdground: '#000000',
             image: '',
             imageSize: 30,
@@ -1103,30 +1104,35 @@ let QRCode = {};
             var ctx = '';
 			ctx = options.ctx;
 
-            var count = qrCodeAlg.getModuleCount();
-            var ratioSize = options.size;
-            var ratioImgSize = options.imageSize;
-            //计算每个点的长宽
-            var tileW = (ratioSize / count).toPrecision(4);
-            var tileH = (ratioSize / count).toPrecision(4);
-            //绘制
-            for (var row = 0; row < count; row++) {
-                for (var col = 0; col < count; col++) {
-                    var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
-                    var h = (Math.ceil((row + 1) * tileH) - Math.floor(row * tileH));
-                    var foreground = getForeGround({
-                        row: row,
-                        col: col,
-                        count: count,
-                        options: options
-                    });
-                    if (options.isNvue) {
-                        ctx.setFillStyle(qrCodeAlg.modules[row][col] ? foreground : options.background);
-                    } else {
-                        ctx.fillStyle = qrCodeAlg.modules[row][col] ? foreground : options.background;
-                    }
-                    ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
-                }
+            var count = qrCodeAlg.getModuleCount();
+            var quietZone = Math.max(0, Math.floor(options.quietZone || 0));
+            var renderCount = count + quietZone * 2;
+            var ratioSize = options.size;
+            var ratioImgSize = options.imageSize;
+            //计算每个点的长宽
+            var tileW = (ratioSize / renderCount).toPrecision(4);
+            var tileH = (ratioSize / renderCount).toPrecision(4);
+            //绘制
+            for (var row = 0; row < renderCount; row++) {
+                for (var col = 0; col < renderCount; col++) {
+                    var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
+                    var h = (Math.ceil((row + 1) * tileH) - Math.floor(row * tileH));
+                    var qrRow = row - quietZone;
+                    var qrCol = col - quietZone;
+                    var isDark = qrRow >= 0 && qrCol >= 0 && qrRow < count && qrCol < count && qrCodeAlg.modules[qrRow][qrCol];
+                    var foreground = getForeGround({
+                        row: qrRow,
+                        col: qrCol,
+                        count: count,
+                        options: options
+                    });
+                    if (options.isNvue) {
+                        ctx.setFillStyle(isDark ? foreground : options.background);
+                    } else {
+                        ctx.fillStyle = isDark ? foreground : options.background;
+                    }
+                    ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
+                }
             }
             if (options.image) {
                 var x = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));

package/components/u-qrcode/u-qrcode.vue

@@ -101,13 +101,17 @@ export default {
             type: Number,
             default: 40
         },
-        lv: {
-            type: Number,
-            default: 3
-        },
-        onval: {
-            type: Boolean,
-            default: true
+        lv: {
+            type: Number,
+            default: 3
+        },
+        quietZone: {
+            type: Number,
+            default: 0
+        },
+        onval: {
+            type: Boolean,
+            default: true
         },
         loadMake: {
             type: Boolean,
@@ -218,11 +222,12 @@ export default {
 						loadingText: that.loadingText, // loading文字
 						text: that.val, // 生成内容
 						size: that.sizeLocal, // 二维码大小
-						background: that.background, // 背景色
-						foreground: that.foreground, // 前景色
-						pdground: that.pdground, // 定位角点颜色
-						correctLevel: that.lv, // 容错级别
-						image: that.icon, // 二维码图标
+						background: that.background, // 背景色
+						foreground: that.foreground, // 前景色
+						pdground: that.pdground, // 定位角点颜色
+						quietZone: that.quietZone, // 静区宽度
+						correctLevel: that.lv, // 容错级别
+						image: that.icon, // 二维码图标
 						imageSize: that.iconSize,// 二维码图标大小
 						cbResult: function (res) { // 生成二维码的回调
 							that._result(res)

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
 			},