uview-plus 3.3.6 → 3.3.7

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

@@ -24,7 +24,10 @@
 							:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
 							:class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
 						>
-							<text
+							<slot v-if="$slots.content" name="content" :item="item" :keyName="keyName" :index="index" />
+							<slot v-else-if="!$slots.content && ($slots.default || $slots.$default)"
+								:item="item" :keyName="keyName" :index="index" />
+							<text v-else
 								:class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
 								class="u-tabs__wrapper__nav__item__text"
 								:style="[textStyle(index)]"
@@ -157,7 +160,7 @@
 		async mounted() {
 			this.init()
 		},
-		emits: ['click', 'change'],
+		emits: ['click', 'change', 'update:current'],
 		methods: {
 			addStyle,
 			addUnit,
@@ -209,6 +212,7 @@
 				if (item.disabled) return
 				this.innerCurrent = index
 				this.resize()
+				this.$emit('update:current', index)
 				this.$emit('change', {
 					...item,
 					index
@@ -327,10 +331,12 @@
 					@include flex;
 					align-items: center;
 					justify-content: center;
+					/* #ifdef H5 */
 					cursor: pointer;
+					/* #endif */
 
 					&--disabled {
-						/* #ifndef APP-NVUE */
+						/* #ifdef H5 */
 						cursor: not-allowed;
 						/* #endif */
 					}
@@ -338,7 +344,9 @@
 					&__text {
 						font-size: 15px;
 						color: $u-content-color;
+						/* #ifndef APP-NVUE */
                         white-space: nowrap !important;
+						/* #endif */
 
 						&--disabled {
 							color: $u-disabled-color !important;

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

@@ -2,6 +2,7 @@
 	<view class="u-toast">
 		<u-overlay
 			:show="isShow"
+			:zIndex="tmpConfig.overlay ? 10070 : -1"
 			:custom-style="overlayStyle"
 		>
 			<view
@@ -54,7 +55,7 @@
 	 * @property {String}			icon		图标，或者绝对路径的图片
 	 * @property {String}			type		主题类型 （默认 default）
 	 * @property {Boolean}			show		是否显示该组件 （默认 false）
-	 * @property {Boolean}			overlay		是否显示透明遮罩，防止点击穿透 （默认 false ）
+	 * @property {Boolean}			overlay		是否显示透明遮罩，防止点击穿透 （默认 true ）
 	 * @property {String}			position	位置 （默认 'center' ）
 	 * @property {Object}			params		跳转的参数 
 	 * @property {String | Number}  duration	展示时间，单位ms （默认 2000 ）
@@ -80,7 +81,7 @@
 					icon: true, // 显示的图标
 					position: 'center', // toast出现的位置
 					complete: null, // 执行完后的回调函数
-					overlay: false, // 是否防止触摸穿透
+					overlay: true, // 是否防止触摸穿透
 					loading: false, // 是否加载中状态
 				},
 				tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量
@@ -92,10 +93,14 @@
 				if(!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
 					return '';
 				}
-				if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
-					return type2icon(this.tmpConfig.type)
+				if (this.tmpConfig.icon === true) {
+					if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
+						return type2icon(this.tmpConfig.type)
+					} else {
+						return ''
+					}
 				} else {
-					return ''
+					return this.tmpConfig.icon
 				}
 			},
 			overlayStyle() {
@@ -178,12 +183,7 @@
 				this.timer = null
 			}
 		},
-		// #ifdef VUE2
-		beforeDestroy() {
-		// #endif
-		// #ifdef VUE3
 		beforeUnmount() {
-		// #endif
 			this.clearTimer()
 		}
 	}

package/components/u-upload/u-upload.vue

@@ -94,7 +94,13 @@
 			
 			<template v-if="isInCount">
 				<view
-				    v-if="$slots.default || $slots.$default"
+				    v-if="$slots.trigger"
+				    @tap="chooseFile"
+				>
+					<slot name="trigger" />
+				</view>
+				<view
+				    v-else-if="!$slots.trigger && ($slots.default || $slots.$default)"
 				    @tap="chooseFile"
 				>
 					<slot />
@@ -123,7 +129,6 @@
 				</view>
 			</template>
 		</view>
-
 	</view>
 </template>
 
@@ -332,7 +337,7 @@
 				});
 			},
 			onPreviewVideo(event) {
-				if (!this.data.previewFullImage) return;
+				if (!this.previewFullImage) return;
 				const {
 					index
 				} = event.currentTarget.dataset;
@@ -360,7 +365,7 @@
 					index
 				} = event.currentTarget.dataset;
 				const item = this.data.lists[index];
-				if (!this.data.previewFullImage) return;
+				if (!this.previewFullImage) return;
 				switch (item.type) {
 					case 'video':
 						this.onPreviewVideo(event);

package/components/u-upload/utils.js

@@ -19,7 +19,8 @@ function formatImage(res) {
         thumb: item.path,
 		size: item.size,
 		// #ifdef H5
-		name: item.name
+		name: item.name,
+		file: item
 		// #endif
     }))
 }
@@ -33,7 +34,8 @@ function formatVideo(res) {
             thumb: res.thumbTempFilePath,
 			size: res.size,
 			// #ifdef H5
-			name: res.name
+			name: res.name,
+			file: res
 			// #endif
         }
     ]
@@ -45,7 +47,10 @@ function formatMedia(res) {
         type: res.type,
         url: item.tempFilePath,
         thumb: res.type === 'video' ? item.thumbTempFilePath : item.tempFilePath,
-		size: item.size
+		size: item.size,
+		// #ifdef H5
+		file: item
+		// #endif
     }))
 }
 
@@ -56,7 +61,8 @@ function formatFile(res) {
 		size:item.size,
 		// #ifdef H5
 		name: item.name,
-		type: item.type
+		type: item.type,
+		file: item
 		// #endif 
 	}))
 }

package/components/u-waterfall/u-waterfall.vue

@@ -216,7 +216,7 @@
         @include flex;
         flex: 1;
         flex-direction: column;
-        height: auto;
+        height: 100%;
     }
 
     .u-image {

package/libs/config/props/actionSheet.js

@@ -20,6 +20,7 @@ export default {
         safeAreaInsetBottom: true,
         openType: '',
         closeOnClickOverlay: true,
-        round: 0
+        round: 0,
+        wrapMaxHeight: '600px'
     }
 }

package/libs/config/props/indexList.js

@@ -14,6 +14,7 @@ export default {
         activeColor: '#5677fc',
         indexList: [],
         sticky: true,
-        customNavHeight: 0
+        customNavHeight: 0,
+        safeBottomFix: false
     }
 }

package/libs/config/props/slider.js

@@ -20,6 +20,8 @@ export default {
         blockColor: '#ffffff',
         showValue: false,
 		disabled:false,
-        blockStyle: {}
+        blockStyle: {},
+        useNative: false,
+        height: '2px'
     }
 }

package/libs/css/common.scss

@@ -96,7 +96,7 @@
 }
 
 .cursor-pointer {
-	/* #ifndef APP-NVUE */
+	/* #ifdef H5 */
 	cursor: pointer;
 	/* #endif */
 }

package/libs/mixin/mixin.js

@@ -151,13 +151,7 @@ export const mixin = defineMixin({
     onReachBottom() {
         uni.$emit('uOnReachBottom')
 	},
-	// #ifdef VUE2
-	// beforeDestroy()
-	// #endif
-	// #ifdef VUE3
-	beforeUnmount()
-	// #endif
-    {
+	beforeUnmount() {
         // 判断当前页面是否存在parent和chldren，一般在checkbox和checkbox-group父子联动的场景会有此情况
         // 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
         if (this.parent && test.array(this.parent.children)) {

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "uview-plus3.0重磅发布，全面的Vue3移动组件库。",
-	"version": "3.3.6",
+	"version": "3.3.7",
 	"description": "uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",

package/types/index.d.ts

@@ -1,35 +1,161 @@
 /// <reference path="./comps.d.ts" />
 declare module 'uview-plus' {
-    export function install(): void  //必要
-    interface test {
-      /** 邮箱格式校验 */
-      email(email: string): boolean
-    }
-    interface $u {
-      route: {},
-      colorGradient: {},
-      hexToRgb: {},
-      rgbToHex: {},
-      colorToRgba: {},
-      test: test,
-      type: {},
-      http: {},
-      config: {},
-      zIndex: {},
-      debounce: {},
-      throttle: {},
-      mixin: {},
-      mpMixin: {},
-      props: {},
-      color: {},
-      platform: {},
-    }
+	export function install(): void  //必要
+	interface test {
+		/** 邮箱格式校验 */
+		email(email: string): boolean
+		/** 手机号校验 */
+		mobile(phone: number): boolean;
+		/** url路径验证 */
+		url(value: string): boolean;
+		/** 验证日期格式 */
+		date(value: string | number): boolean;
+		/** 验证ISO类型的日期格式 YYYY-MM-DD | YYYY/MM/DD */
+		dateISO(value: string): boolean;
+		/** 验证十进制数字 */
+		number(value: number): boolean;
+		/** 验证字符串 */
+		string(value: string): boolean;
+		/** 验证整数 */
+		digits(value: number): boolean;
+		/** 验证身份证号码 */
+		idCard(value: string | number): boolean;
+		/** 是否车牌号 */
+		carNo(value: string): boolean;
+		/** 金额,只允许2位小数 */
+		amount(value: string | number): boolean;
+		/** 校验是否是中文 */
+		chinese(value: any): boolean;
+		/** 校验是否是字母 */
+		letter(value: any): boolean;
+		/** 校验字母或者数字 */
+		enOrNum(value: any): boolean;
+		/** 验证是否包含某个值 */
+		contains(source: string, value: string): boolean;
+		/** 验证一个值范围[min, max] */
+		range(value: string, between: number[]): boolean;
+		/** 验证一个长度范围[min, max] */
+		rangeLength(value: string, between: number[]): boolean;
+		/** 是否固定电话 */
+		landline(value: string | number): boolean;
+		/** 判断是否为空 */
+		empty(value: string | number | undefined | boolean | object | null): boolean;
+		/** 是否json字符串 */
+		jsonString(value: string): boolean;
+		/** 是否数组 */
+		array(value: any): boolean;
+		/** 是否对象 */
+		object(value: any): boolean;
+		/** 是否短信验证码 */
+		code(value: any, len: number): boolean;
+		/** 是否函数方法 */
+		func(value: any): boolean;
+		/** 是否promise对象 */
+		promise(value: any): boolean;
+		/** 是否图片格式 */
+		image(value: string): boolean;
+		/** 是否视频格式 */
+		video(value: string): boolean;
+		/** 是否为正则对象 */
+		regExp(value: any): boolean;
+	}
+	interface RouteParam {
+		type: 'navigateTo' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack';
+		/** 路由地址 */
+		url: string;
+		/** navigateBack页面后退时,回退的层数 */
+		delta?: number;
+		/** 传递的参数 */
+		params?: {};
+		/** 窗口动画,只在APP有效 */
+		animationType?: string;
+		/** 窗口动画持续时间,单位毫秒,只在APP有效 */
+		animationDuration?: number;
+		/** 是否需要拦截 */
+		intercept?: boolean;
+	}
+	interface Config {
+		v: string;
+		version: string;
+		type: ['primary', 'success', 'info', 'error', 'warning'];
+		color: Record<'u-primary' | 'u-warning' | 'u-success' | 'u-error' | 'u-info' | 'u-main-color' | 'u-content-color' | 'u-tips-color' | 'u-light-color', string>;
+		unit: 'px'
+	}
+	interface Color {
+		primary: string,
+		info: string,
+		default: string,
+		warning: string,
+		error: string,
+		success: string,
+		mainColor: string,
+		contentColor: string,
+		tipsColor: string,
+		lightColor: string,
+		borderColor: string
+	}
+	interface GlobalConfig {
+		config: Config;
+		props: {};
+	}
+	interface $u {
+		route: (url: string | RouteParam) => void;
+		/**
+		  * 求两个颜色之间的渐变值
+		  * @param {string} startColor 开始的颜色
+		  * @param {string} endColor 结束的颜色
+		  * @param {number} step 颜色等分的份额
+		  */
+		colorGradient: (startColor: string, endColor: string, step: number) => any[];
+		/**
+		 * 将hex表示方式转换为rgb
+		 * @param color "#000000"-> "rgb(0,0,0)" | "rgb(0,0,0)" -> "#000000"
+		 * @param str 是否返回颜色数组 true -> 不返回
+		 * @returns 
+		 */
+		hexToRgb: (color: string, str?: boolean) => any[];
+		/**
+		 * 将rgb表示方式转换为hex
+		 */
+		rgbToHex: (color: string) => string;
+		/**
+		 * 十六进制转换为rgb或rgba
+		 * @param color 
+		 * @param alpha 透明度
+		 * @returns  rgba（255，255，255，0.5）字符串
+		 */
+		colorToRgba: (color: string, alpha: number) => string;
+		test: test;
+		type: {},
+		http: {},
+		config: Config;
+		zIndex: {
+			toast: number;
+			noNetwork: number;
+			// popup包含popup，actionsheet，keyboard，picker的值
+			popup: number;
+			mask: number;
+			navbar: number;
+			topTips: number;
+			sticky: number;
+			indexListSticky: number;
+		},
+		debounce: (func, wait, immediate) => void;
+		throttle: (func, wait, immediate) => void;
+		mixin: {},
+		mpMixin: {},
+		props: {},
+		color: Color;
+		platform: string;
+	}
 
-    global {
-      interface Uni {
-        $u: $u
-      }
-    }
+	export function setConfig(config: GlobalConfig): void;
+
+	global {
+		interface Uni {
+			$u: $u
+		}
+	}
 }
 declare type UniCountDownRef = typeof import('./comps/countDown')['CountDownRef']
 declare type UniCountToRef = typeof import('./comps/countTo')['CountToRef']

package/components/u-slider/nvue - /345/211/257/346/234/254.js"

@@ -1,180 +0,0 @@
-/**
- * 使用bindingx方案实现slider
- * 只能使用于nvue下
- */
-// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
-const BindingX = uni.requireNativePlugin('bindingx')
-// nvue操作dom的库，用于获取dom的尺寸信息
-const dom = uni.requireNativePlugin('dom')
-// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
-const animation = uni.requireNativePlugin('animation')
-import { range } from '../../libs/function/index';
-export default {
-	data() {
-		return {
-			// bindingx的回调值，用于取消绑定
-			panEvent: null,
-			// 标记是否移动状态
-			moving: false,
-			// 位移的偏移量
-			x: 0,
-			// 是否正在触摸过程中，用于标记动画类是否添加或移除
-			touching: false,
-			changeFromInside: false
-		}
-	},
-	watch: {
-		// 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
-		// 从服务端获取一个值后，赋值给slider的v-model而导致的
-		value(n) {
-			if (!this.changeFromInside) {
-				this.initX()
-			} else {
-				this.changeFromInside = false
-			}
-		}
-	},
-	mounted() {
-		this.init()
-	},
-	methods: {
-		init() {
-			this.getSliderRect()
-		},
-		// 获取节点信息
-		// 获取slider尺寸
-		getSliderRect() {
-			// 获取滑块条的尺寸信息
-			// 通过nvue的dom模块，查询节点信息
-			setTimeout(() => {
-				dom.getComponentRect(this.$refs['slider'], res => {
-					this.sliderRect = res.size
-					this.initX()
-				})
-			}, 10)
-		},
-		// 初始化按钮位置
-		initButtonStyle({
-			barStyle,
-			buttonWrapperStyle
-		}) {
-			this.barStyle = barStyle
-			this.buttonWrapperStyle = buttonWrapperStyle
-		},
-		emitEvent(event, value) {
-			this.$emit(event, value ? value : this.value)
-		},
-		formatStep(value) {
-			// 移动点占总长度的百分比
-			return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
-		},
-		// 滑动开始
-		onTouchStart(e) {
-			// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
-			e.stopPropagation && e.stopPropagation()
-			e.preventDefault && e.preventDefault()
-			if (this.moving || this.disabled) {
-				// 释放上一次的资源
-				if (this.panEvent?.token != 0) {
-					BindingX.unbind({
-						token: this.panEvent.token,
-						// pan为手势事件
-						eventType: 'pan'
-					})
-					this.gesToken = 0
-				}
-				return
-			}
-
-			this.moving = true
-			this.touching = true
-
-			// 获取元素ref
-			const button = this.$refs['nvue-button'].ref
-			const gap = this.$refs['nvue-gap'].ref
-
-			const {
-				min,
-				max,
-				step
-			} = this
-			const {
-				left,
-				width
-			} = this.sliderRect
-
-			// 初始值为本次偏移量x，加上次停止滑动时的结束值
-			let exporession = `(${this.x} + x)`
-			// 将偏移的x值，转为总位移的百分比值，为了和min和max进行判断
-			exporession = `(${exporession} / ${width}) * 100`
-			if (step > 1) {
-				// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
-				exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
-			} else {
-				// 当step=1时，无需跳步，充分利用bindingx性能，滑块实时跟随手势，达到丝滑的效果
-				exporession = `max(${min}, min(${exporession}, ${max}))`
-			}
-			// 将百分比最后转化为对应的px值
-			exporession = `${exporession} / 100 * ${width}`
-			// 最大值不允许超过轨迹的宽度
-			const {
-				sliderWidth
-			} = this.sliderRect
-			exporession = `min(${sliderWidth}, ${exporession})`
-			// 滑块点总是需要一个左偏移的值，为自身宽度的一半
-			const buttonExpression = `${exporession} - ${this.blockHeight / 2}`
-			// 阿里为了KPI而开源的BindingX
-			this.panEvent = BindingX.bind({
-				anchor: button,
-				eventType: 'pan',
-				props: [{
-					element: gap,
-					// 绑定width属性，设置其宽度值
-					property: 'width',
-					expression
-				}, {
-					element: button,
-					// 绑定width属性，设置其宽度值
-					property: 'transform.translateX',
-					expression: buttonExpression
-				}]
-			}, (e) => {
-				if (e.state === 'end' || e.state === 'exit') {
-					// 
-					this.x = range(0, left + width, e.deltaX + this.x)
-					// 根据偏移值，得出移动的百分比，进而修改双向绑定的v-model的值
-					const value = (this.x / width) * 100
-					const percent = this.formatStep(value)
-					// 修改value值
-					this.$emit('input', percent)
-					// 标记下一次触发value的watch时，这个值的变化，是由内部改变的
-					this.changeFromInside = true
-					this.moving = false
-					this.touching = false
-				}
-			})
-		},
-		// 从value的变化，倒推得出x的值该为多少
-		initX() {
-			const {
-				left,
-				width
-			} = this.sliderRect
-			// 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
-			// 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
-			this.x = this.value / 100 * width
-			// 设置移动的值
-			const barStyle = {
-				width: this.x + 'px'
-			}
-			// 按钮的初始值
-			const buttonWrapperStyle = {
-				transform: `translateX(${this.x - this.blockHeight / 2}px)`
-			}
-			this.initButtonStyle({
-				barStyle,
-				buttonWrapperStyle
-			})
-		}
-	}
-}