uview-ultra 4.5.71 → 4.5.74

package/components/up-form/up-form.uvue

@@ -1,49 +1,49 @@
-<template>
-	<view class="up-form">
-		<slot />
-	</view>
-</template>
-
-<script setup lang="uts">
+<template>
+	<view class="up-form">
+		<slot />
+	</view>
+</template>
+
+<script setup lang="uts">
 	import type { PropType } from 'vue'
 	import { getCurrentInstance, provide } from 'vue'
 	import { ref, reactive, computed, watch } from 'vue'
 	import defProps from './form.uts'
 	import Schema from "../../libs/util/async-validator.uts";
 	import { toast, getProperty, setProperty, deepClone } from '../../libs/function/index.uts';
-	import { useUltraUI } from '../../libs/composable/useUltraUI'
-	const { children, getChildren, addChild } = useUltraUI()
-	const instance = getCurrentInstance()!.proxy!
-	import { UPFormRuleItem } from '../../components/up-form/types.uts'
-	
-	type UPFormRules = {
-		key: UPFormRuleItem | UPFormRuleItem[];
-	}
-	
-	// 定义组件选项
-	defineOptions({
+	import { useUltraUI } from '../../libs/composable/useUltraUI'
+	const { children, getChildren, addChild } = useUltraUI()
+	const instance = getCurrentInstance()!.proxy!
+	import { UPFormRuleItem } from '../../components/up-form/types.uts'
+	
+	type UPFormRules = {
+		key: UPFormRuleItem | UPFormRuleItem[];
+	}
+	
+	// 定义组件选项
+	defineOptions({
 		styleIsolation: 'app-and-page',
-		name: "up-form"
-	})
-	
-	// 定义props
+		name: "up-form"
+	})
+	
+	// 定义props
 	const props = defineProps({
-	    customStyle: {
-	        type: [Object, String],
-	        default: () => ({})
-	    },
-	    customClass: {
-	        type: String,
-	        default: ''
-	    },
-	    url: {
-	        type: String,
-	        default: ''
-	    },
-	    linkType: {
-	        type: String,
-	        default: 'navigateTo'
-	    },
+	    customStyle: {
+	        type: [Object, String],
+	        default: () => ({})
+	    },
+	    customClass: {
+	        type: String,
+	        default: ''
+	    },
+	    url: {
+	        type: String,
+	        default: ''
+	    },
+	    linkType: {
+	        type: String,
+	        default: 'navigateTo'
+	    },
 		// 当前form的需要验证字段的集合
 		model: {
 			type: Object as PropType<any>,
@@ -54,62 +54,62 @@
 			type: Object as PropType<UTSJSONObject>,
 			default: defProps.getArray('form.rules')
 		},
-		// 有错误时的提示方式，message-提示信息，toast-进行toast提示
-		// border-bottom-下边框呈现红色，none-无提示
-		errorType: {
-			type: String,
-			default: defProps.getString('form.errorType')
-		},
-		// 是否显示表单域的下划线边框
-		borderBottom: {
-			type: Boolean,
-			default: defProps.getBoolean('form.borderBottom')
-		},
-		// label的位置，left-左边，top-上边
-		labelPosition: {
-			type: String,
-			default: defProps.getString('form.labelPosition')
-		},
-		// label的宽度，单位px
-		labelWidth: {
-			type: [String, Number],
-			default: defProps.getNumber('form.labelWidth')
-		},
-		// lable字体的对齐方式
-		labelAlign: {
-			type: String,
-			default: defProps.getString('form.labelAlign')
-		},
-		// lable的样式，对象形式
-		labelStyle: {
-			type: Object as PropType<UTSJSONObject>,
-			default: defProps.getArray('form.labelStyle')
-		}
-	})
-	
-	// 定义emits
-	const emit = defineEmits([])
-	
-	// 响应式数据
-	const formRules = ref<UTSJSONObject>({})
-	// 规则校验器
-	const validator = ref<Schema>(new Schema({}))
-	// 原始的model快照，用于resetFields方法重置表单时使用
-	const originalModel = ref<UTSJSONObject|null>(null)
-	
-	// props变化计算属性
-	const propsChange = computed(() => {
-		return [
-			props.errorType,
-			props.borderBottom,
-			props.labelPosition,
-			props.labelWidth,
-			props.labelAlign,
-			props.labelStyle,
-		]
-	})
-	
-	// 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
+		// 有错误时的提示方式，message-提示信息，toast-进行toast提示
+		// border-bottom-下边框呈现红色，none-无提示
+		errorType: {
+			type: String,
+			default: defProps.getString('form.errorType')
+		},
+		// 是否显示表单域的下划线边框
+		borderBottom: {
+			type: Boolean,
+			default: defProps.getBoolean('form.borderBottom')
+		},
+		// label的位置，left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: defProps.getString('form.labelPosition')
+		},
+		// label的宽度，单位px
+		labelWidth: {
+			type: [String, Number],
+			default: defProps.getNumber('form.labelWidth')
+		},
+		// lable字体的对齐方式
+		labelAlign: {
+			type: String,
+			default: defProps.getString('form.labelAlign')
+		},
+		// lable的样式，对象形式
+		labelStyle: {
+			type: Object as PropType<UTSJSONObject>,
+			default: defProps.getArray('form.labelStyle')
+		}
+	})
+	
+	// 定义emits
+	const emit = defineEmits([])
+	
+	// 响应式数据
+	const formRules = ref<UTSJSONObject>({})
+	// 规则校验器
+	const validator = ref<Schema>(new Schema({}))
+	// 原始的model快照，用于resetFields方法重置表单时使用
+	const originalModel = ref<UTSJSONObject|null>(null)
+	
+	// props变化计算属性
+	const propsChange = computed(() => {
+		return [
+			props.errorType,
+			props.borderBottom,
+			props.labelPosition,
+			props.labelWidth,
+			props.labelAlign,
+			props.labelStyle,
+		]
+	})
+	
+	// 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
 	const setRules = (rules: UTSJSONObject) => {
 		// 判断是否有规则
 		if (rules == null) return;
@@ -118,8 +118,8 @@
 		// 重新将规则赋予Validator
 		validator.value = new Schema(formRules.value);
 	}
-	
-	// 重置model为初始值的快照
+	
+	// 重置model为初始值的快照
 	function resetModel(obj: any|null = null) {
 		// 历遍所有up-form-item，根据其prop属性，还原model的原始快照
 		children.value.map((child: ComponentPublicInstance) => {
@@ -132,8 +132,8 @@
 			}
 		});
 	}
-	
-	// 清空所有up-form-item组件的内容，本质上是调用了up-form-item组件中的resetField()方法
+	
+	// 清空所有up-form-item组件的内容，本质上是调用了up-form-item组件中的resetField()方法
 	const resetFields = () => {
 		resetModel()
 	}
@@ -149,12 +149,12 @@
 			}
 		});
 	}
-	
-	// 对部分表单字段进行校验
-	function validateField(value: Array<string>|string,
-		callback: ((errors: UTSJSONObject[]) => void)|null = null, event: string|null = null) {
-		return new Promise((resolve, reject) => {
-			// 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
+	
+	// 对部分表单字段进行校验
+	function validateField(value: Array<string>|string,
+		callback: ((errors: UTSJSONObject[]) => void)|null = null, event: string|null = null) {
+		return new Promise((resolve, reject) => {
+			// 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
 			const errorsRes: UTSJSONObject[] = [];
 			const validateProps: string[] = []
 			const modelSnapshot = JSON.parse(JSON.stringify(props.model)) as UTSJSONObject
@@ -166,12 +166,12 @@
 			} else {
 				validateProps.push(value)
 			}
-			// 历遍children所有子form-item
-			let promises: Promise<UTSJSONObject[]>[] = children.value.map((child: ComponentPublicInstance) => {
-				return new Promise((resolveChild) => {
-					// 用于存放form-item的错误信息
-					const childErrors: UTSJSONObject[] = [];
-					let childProps: UTSJSONObject = child.$callMethod('getProps')! as UTSJSONObject
+			// 历遍children所有子form-item
+			let promises: Promise<UTSJSONObject[]>[] = children.value.map((child: ComponentPublicInstance) => {
+				return new Promise((resolveChild) => {
+					// 用于存放form-item的错误信息
+					const childErrors: UTSJSONObject[] = [];
+					let childProps: UTSJSONObject = child.$callMethod('getProps')! as UTSJSONObject
 					let childRefs: UTSJSONObject = child.$callMethod('getRefs')! as UTSJSONObject
 					if (validateProps.includes(childProps['prop']!.toString())) {
 						// 获取对应的属性，通过类似'a.b.c'的形式
@@ -179,54 +179,54 @@
 							modelSnapshot,
 							childProps['prop']!.toString()
 						);
-						// 属性链数组
-						const propertyChain = childProps['prop']!.toString().split(".");
-						const propertyName =
-							propertyChain[propertyChain.length - 1];
-
-						let rule:UTSJSONObject[] = []
-						// todo
-						// if (childRefs['itemRules'] != null) {
-						// 	rule = childRefs['itemRules']
-						// } else {
-							let tmp = formRules.value[childProps['prop']!.toString()];
-							if (tmp == null && props.rules != null) {
-								tmp = props.rules[childProps['prop']!.toString()]
-							}
-							if (Array.isArray(tmp)) {
-								rule = tmp as UTSJSONObject[]
-							} else {
-								if (tmp != null) {
-									rule.push(tmp as UTSJSONObject)
-								}
-							}
-						// }
-						// 如果不存在对应的规则，直接返回，否则校验会报错
-						if (rule == null || rule.length == 0) {
-							console.log('rule-miss', childProps['prop']!.toString(), UTSJSONObject.keys(formRules.value))
-							resolveChild([])
-							return;
-						}
-						// rule规则可为数组形式，也可为对象形式，此处拼接成为数组
-						let rules: UTSJSONObject[] = []
-						rules = rule
-						// console.log('rules', JSON.stringify(rules))
-						let executeRuleCount = 0
-						let completeRuleCount = 0
-						let childResolved = false
-						const finishChild = () => {
-							if (childResolved) return
-							if (completeRuleCount < executeRuleCount) return
-							if (childErrors.length > 0) {
-								const msg = childErrors[0]['message']
-								const childMsg = msg == null ? '' : msg.toString()
-								child.$callMethod('setMessage', childMsg)
-							} else {
-								child.$callMethod('setMessage', '')
-							}
-							childResolved = true
-							resolveChild(errorsRes)
-						}
+						// 属性链数组
+						const propertyChain = childProps['prop']!.toString().split(".");
+						const propertyName =
+							propertyChain[propertyChain.length - 1];
+
+						let rule:UTSJSONObject[] = []
+						// todo
+						// if (childRefs['itemRules'] != null) {
+						// 	rule = childRefs['itemRules']
+						// } else {
+							let tmp = formRules.value[childProps['prop']!.toString()];
+							if (tmp == null && props.rules != null) {
+								tmp = props.rules[childProps['prop']!.toString()]
+							}
+							if (Array.isArray(tmp)) {
+								rule = tmp as UTSJSONObject[]
+							} else {
+								if (tmp != null) {
+									rule.push(tmp as UTSJSONObject)
+								}
+							}
+						// }
+						// 如果不存在对应的规则，直接返回，否则校验会报错
+						if (rule == null || rule.length == 0) {
+							console.log('rule-miss', childProps['prop']!.toString(), UTSJSONObject.keys(formRules.value))
+							resolveChild([])
+							return;
+						}
+						// rule规则可为数组形式，也可为对象形式，此处拼接成为数组
+						let rules: UTSJSONObject[] = []
+						rules = rule
+						// console.log('rules', JSON.stringify(rules))
+						let executeRuleCount = 0
+						let completeRuleCount = 0
+						let childResolved = false
+						const finishChild = () => {
+							if (childResolved) return
+							if (completeRuleCount < executeRuleCount) return
+							if (childErrors.length > 0) {
+								const msg = childErrors[0]['message']
+								const childMsg = msg == null ? '' : msg.toString()
+								child.$callMethod('setMessage', childMsg)
+							} else {
+								child.$callMethod('setMessage', '')
+							}
+							childResolved = true
+							resolveChild(errorsRes)
+						}
 						// 对rules数组进行校验
 						for (let i = 0; i < rules.length; i++) {
 							const ruleItem = rules[i];
@@ -348,133 +348,138 @@
 								// console.log(e)
 								completeRuleCount += 1
 								finishChild()
-							}
-						}
-						if (executeRuleCount == 0) {
-							child.$callMethod('setMessage', '')
-							resolveChild([])
-						}
-					} else {
-						resolveChild([])
-					}
-				});
-			});
-
-			// 使用Promise.all来等待所有Promise完成  
-			Promise.all(promises)
-				.then((results: any) => {
-					// 执行回调函数
-					console.log('errors', errorsRes.length)
-					if (callback != null) {
-						callback(errorsRes)
-					}
-					resolve(errorsRes)
-				})
-				// .catch((error: any) => {
-				// 	console.error('An error occurred:', error);
-				// 	reject(error)
-				// });
-		});
-	}
-	
-	// 校验全部数据
-	const validate = (): Promise<any> => {
-		// 开发环境才提示，生产环境不会提示
-		if (process.env.NODE_ENV == 'development'
-			&& UTSJSONObject.keys(formRules.value).length == 0) {
-			console.error('未设置rules，请看文档说明！如果已经设置，请刷新页面。');
-			return new Promise((resolve, reject) => {
-				reject({})
-			})
-			return Promise.reject({});
-		}
-		
-		return new Promise((resolve, reject) => {
-			// 获取所有form-item的prop，交给validateField方法进行校验
+							}
+						}
+						if (executeRuleCount == 0) {
+							child.$callMethod('setMessage', '')
+							resolveChild([])
+						}
+					} else {
+						resolveChild([])
+					}
+				});
+			});
+
+			// 使用Promise.all来等待所有Promise完成  
+			Promise.all(promises)
+				.then((results: any) => {
+					// 执行回调函数
+					console.log('errors', errorsRes.length)
+					if (callback != null) {
+						callback(errorsRes)
+					}
+					// toast提示统一放在validateField里：输入、失焦等自动触发的校验同样能弹出提示
+					// （此前只有validate()会提示）；每次校验只提示第一条错误，避免多字段连续弹toast
+					if (errorsRes.length > 0 && props.errorType == 'toast'
+						&& errorsRes[0] != null && errorsRes[0]['message'] != null) {
+						toast(errorsRes[0]['message'].toString())
+					}
+					resolve(errorsRes)
+				})
+				// .catch((error: any) => {
+				// 	console.error('An error occurred:', error);
+				// 	reject(error)
+				// });
+		});
+	}
+	
+	// 校验全部数据
+	const validate = (): Promise<any> => {
+		// 开发环境才提示，生产环境不会提示
+		if (process.env.NODE_ENV == 'development'
+			&& UTSJSONObject.keys(formRules.value).length == 0) {
+			console.error('未设置rules，请看文档说明！如果已经设置，请刷新页面。');
+			return new Promise((resolve, reject) => {
+				reject({})
+			})
+			return Promise.reject({});
+		}
+		
+		return new Promise((resolve, reject) => {
+			// 获取所有form-item的prop，交给validateField方法进行校验
 			const formItemProps: string[] = children.value.map(
 				(item: ComponentPublicInstance): string => {
 					const itemProps = item.$callMethod('getProps') as UTSJSONObject | null
 					return itemProps != null && itemProps['prop'] != null ? itemProps['prop'].toString() : ''
 				}
 			).filter((prop: string): boolean => prop != '');
-			console.log('formItemProps', formItemProps)
-			let func = function(errors: UTSJSONObject[]): void {
-				if(errors.length > 0) {
-					// 如果错误提示方式为toast，则进行提示
-					if(props.errorType == 'toast' && errors[0] != null && errors[0]['message'] != null) toast(errors[0]['message'].toString())
-					console.log('errors', errors.length)
-					reject(errors)
-				} else {
-					resolve(true)
-				}
-			}
-			validateField(formItemProps, func);
-		});
-	}
-	
-	// 监听规则的变化
+			console.log('formItemProps', formItemProps)
+			let func = function(errors: UTSJSONObject[]): void {
+				if(errors.length > 0) {
+					// toast提示已统一在validateField中处理，此处只需拒绝Promise
+					console.log('errors', errors.length)
+					reject(errors)
+				} else {
+					resolve(true)
+				}
+			}
+			validateField(formItemProps, func);
+		});
+	}
+	
+	// 监听规则的变化
 	watch((): UTSJSONObject => props.rules != null ? props.rules : {} as UTSJSONObject, (newVal: UTSJSONObject) => {
-		setRules(newVal);
-	}, { immediate: true })
-	
-	// 监听属性的变化，通知子组件up-form-item重新获取信息
-	watch(
-	  (): any => propsChange.value, 
-	  (): void => {
-	    if (children.value.length > 0) {
-	      // 修改点：将 map 改为 forEach
-	      // forEach 的返回值是 void，符合 watch 回调的预期
-	      children.value.forEach((child: ComponentPublicInstance) => {
-	        // 判断子组件(up-form-item)如果有updateParentData方法的话，就执行
-	        child.$callMethod('updateParentData')
-	      });
-	    }
-	  }
-	)
-	
-	// 监听model的初始值作为重置表单的快照
+		setRules(newVal);
+	}, { immediate: true })
+	
+	// 监听属性的变化，通知子组件up-form-item重新获取信息
+	watch(
+	  (): any => propsChange.value, 
+	  (): void => {
+	    if (children.value.length > 0) {
+	      // 修改点：将 map 改为 forEach
+	      // forEach 的返回值是 void，符合 watch 回调的预期
+	      children.value.forEach((child: ComponentPublicInstance) => {
+	        // 判断子组件(up-form-item)如果有updateParentData方法的话，就执行
+	        child.$callMethod('updateParentData')
+	      });
+	    }
+	  }
+	)
+	
+	// 监听model的初始值作为重置表单的快照
 	watch((): any => props.model, (newVal: any): void => {
 		if (originalModel.value == null) {
 			originalModel.value = deepClone(newVal) as UTSJSONObject;
 		}
 	}, { immediate: true })
-	
-	const getProps = function(): UTSJSONObject {
-		return {
-			labelPosition: props.labelPosition,
-			labelAlign: props.labelAlign,
-			labelStyle: props.labelStyle,
-			labelWidth: props.labelWidth,
-			errorType: props.errorType
-		}
-	}
-	const getRefs = function() {
-		return {
-			originalModel: originalModel.value == null ? {} : originalModel.value
-		}
-	}
-	
-	const setOriginalModel = function(prop: string, value: any|null) {
-		if (originalModel.value == null) {
-			originalModel.value = {}
-		}
-		originalModel.value[prop] = value
-	}
-	
-	// 暴露方法给子组件
-	defineExpose({
-		setOriginalModel,
-		getChildren,
-		addChild,
-		getProps,
-		getRefs,
-		validate,
-		clearValidate,
-		validateField,
-		resetFields,
-		setRules
-	})
-</script>
-
-<style lang="scss" scoped>
-</style>
+	
+	const getProps = function(): UTSJSONObject {
+		return {
+			labelPosition: props.labelPosition,
+			labelAlign: props.labelAlign,
+			labelStyle: props.labelStyle,
+			labelWidth: props.labelWidth,
+			errorType: props.errorType
+		}
+	}
+	const getRefs = function() {
+		return {
+			originalModel: originalModel.value == null ? {} : originalModel.value
+		}
+	}
+	
+	const setOriginalModel = function(prop: string, value: any|null) {
+		if (originalModel.value == null) {
+			originalModel.value = {}
+		}
+		originalModel.value[prop] = value
+	}
+	
+	// 暴露方法给子组件
+	defineExpose({
+		setOriginalModel,
+		getChildren,
+		addChild,
+		getProps,
+		getRefs,
+		validate,
+		clearValidate,
+		validateField,
+		resetFields,
+		setRules
+	})
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/up-form/up-form.vue

@@ -160,10 +160,13 @@
 						}
 						for (let i = 0; i < rules.length; i++) {
 							const ruleItem = rules[i]
-							// 将up-form-item的触发器转为数组形式
-							const trigger = [].concat(ruleItem?.trigger)
-							// 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
-							if (event && !trigger.includes(event)) {
+							// 将up-form-item的触发器转为数组形式；
+							// 未配置trigger（undefined/null/空字符串）的规则视为任何触发方式都执行，
+							// 与async-validator等库的惯例一致，避免被静默跳过导致验证永远不触发
+							const ruleTrigger = ruleItem?.trigger
+							const trigger = (ruleTrigger == null || ruleTrigger === '') ? null : [].concat(ruleTrigger)
+							// 如果是有传入触发事件，且此规则配置了触发器但不包含当前事件，则不执行校验操作
+							if (event && trigger && !trigger.includes(event)) {
 								resolve()
 								continue
 							}
@@ -202,6 +205,12 @@
 				.then(results => {
 					// 执行回调函数
 					typeof callback === 'function' && callback(errorsRes)
+					// 如果错误提示方式为toast，则进行提示。放在validateField里，
+					// 输入、失焦等自动触发的校验同样能弹出提示（此前只有validate()会提示）；
+					// 每次校验只提示第一条错误，避免多字段同时失败时连续弹出多个toast
+					if (errorsRes.length && props.errorType === 'toast') {
+						toast(errorsRes[0].message)
+					}
 				})
 				.catch(error => {
 					console.error('An error occurred:', error)
@@ -225,8 +234,7 @@
 				)
 				validateField(formItemProps, (errors) => {
 					if (errors.length) {
-						// 如果错误提示方式为toast，则进行提示
-						props.errorType === 'toast' && toast(errors[0].message)
+						// toast提示已统一在validateField中处理，此处只需拒绝Promise
 						reject(errors)
 					} else {
 						resolve(true)