fusions-ui 1.2.7 → 1.2.8

package/components/form/src/composables/use-form.ts

@@ -0,0 +1,256 @@
+import { computed, ref, watch, type SetupContext, provide } from 'vue';
+import type { FormProps, FormEmits } from '../form';
+import Validator from '../validate';
+import { 
+	deepCopy, 
+	getValue, 
+	isRequiredField, 
+	setDataValue, 
+	getDataValue, 
+	realProp, 
+	isRealProp, 
+	rawData, 
+	isEqual ,
+} from '../utils'
+
+export const useForm = (props: FormProps, $emit: SetupContext<FormEmits>['emit']) => {
+	// 表单本地值的记录，不应该与传如的值进行关联
+	const formData = ref<Record<string, any>>({});
+	const formRules = ref({});
+	// 原始的model快照，用于resetFields方法重置表单时使用
+	const originalModel = ref<any>(null);
+	// 子组件实例数组
+	const childrens = ref<any[]>([]);
+	let validator: any = null;
+	
+	// 计算数据源变化的
+	const localData = computed(() => {
+		const localVal = props.model;
+		if (localVal) {
+			return deepCopy(localVal)
+		}
+		return {}
+	});
+	
+	/**
+	 * 外部调用方法
+	 * 设置规则，主要用于小程序自定义检验规则
+	 * @param {Array} rules 规则源数据
+	 */
+	const setRules = (rules: any) => {
+		// 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
+		formRules.value = Object.assign({}, formRules.value, rules);
+		// 初始化校验函数
+		validator = new Validator(rules);
+	};
+
+	/**
+	 * 外部调用方法
+	 * 设置数据，用于设置表单数据，公开给用户使用，不支持在动态表单中使用
+	 * @param {Object} key
+	 * @param {Object} value
+	 */
+	const setValue = (key: string, value: any) => {
+		let example = childrens.value.find(child => child.prop === key);
+		if (!example) return null;
+		formData.value[key] = getValue(key, value, (formRules.value[key] && formRules.value[key].rules) || [])
+		return example.onFieldChange(formData.value[key]);
+	};
+
+	/**
+	 * 外部调用方法
+	 * 手动提交校验表单
+	 * 对整个表单进行校验的方法，参数为一个回调函数。
+	 * @param {Array} keepitem 保留不参与校验的字段
+	 * @param {type} callback 方法回调
+	 */
+	const validate = (keepitem?: any[] | Function, callback?: Function): Promise<any> => {
+		return checkAll(formData.value, keepitem, callback);
+	};
+
+	/**
+	 * 外部调用方法
+	 * 部分表单校验
+	 * @param {Array|String} propsList 需要校验的字段
+	 * @param {Function} callback 回调函数
+	 */
+	const validateField = (propsList: string | string[] = [], callback?: Function): Promise<any> => {
+		const fields = [].concat(propsList);
+		let invalidFields: Record<string, any> = {};
+		childrens.value.forEach(item => {
+			const prop = realProp(item.prop)
+			if (fields.indexOf(prop) !== -1) {
+				invalidFields = Object.assign({}, invalidFields, {
+					[prop]: formData.value[prop]
+				});
+			}
+		});
+		return checkAll(invalidFields, [], callback);
+	};
+	
+	/**
+	 * 外部调用方法
+	 * 手动重置表单
+	 * 清空所有fu-form-item组件的内容，本质上是调用了fu-form-item中的resetFields()方法
+	 */
+	const resetFields = () => {
+		resetModel()
+	};
+	
+	// 重置model为初始值的快照
+	const resetModel = () => {
+		childrens.value.map((item) => {
+			const prop = item?.prop;
+			const value = uni.$fu.getProperty(originalModel.value, prop);
+			uni.$fu.setProperty(props.model, prop, value);
+		})
+	};
+
+	/**
+	 * 外部调用方法
+	 * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+	 * @param {Array|String} propsList 需要移除校验的字段 ，不填为所有
+	 */
+	const clearValidate = (propsList: string | string[] = []) => {
+		const fields = [].concat(propsList);
+		childrens.value.forEach(item => {
+			if (fields.length === 0) {
+				item.errMsg = '';
+			} else {
+				const prop = realProp(item.prop)
+				if (fields.indexOf(prop) !== -1) {
+					item.errMsg = '';
+				}
+			}
+		});
+	};
+	
+	// 校验所有
+	const checkAll = async (
+		invalidFields: Record<string, any>, 
+		keepitem: any[] | Function, 
+		callback?: Function, 
+		_type?: string
+	) => {
+		// 不存在校验规则 ，则停止校验流程
+		if (!validator) return null
+		
+		let items: any[] = [];
+		// 处理参与校验的item实例
+		for (let i in invalidFields) {
+			const item = childrens.value.find(item => realProp(item.prop) === i);
+			if (item) {
+				items.push(item)
+			}
+		}
+
+		// 如果validate第一个参数是function, 那就走回调
+		if (!callback && typeof keepitem === 'function') {
+			callback = keepitem;
+		}
+
+		let promise: Promise<any> | undefined;
+		// 如果不存在回调，那么使用 Promise 方式返回
+		if (!callback && typeof callback !== 'function' && Promise) {
+			promise = new Promise((resolve, reject) => {
+				callback = (valid: boolean, invalidFields: any) => {
+					!valid ? resolve(invalidFields) : reject(valid);
+				};
+			});
+		}
+
+		let results = [];
+		// 避免引用错乱 ，建议拷贝对象处理
+		let tempFormData = JSON.parse(JSON.stringify(invalidFields))
+		// 所有子组件参与校验,使用 for 可以使用  awiat
+		for (let i in items) {
+			const child = items[i];
+			let prop = realProp(child.prop);
+			const result = await child.onFieldChange(tempFormData[prop]);
+			if (result) {
+				results.push(result);
+				// toast ,modal 只需要执行第一次就可以
+				if (props.errShowType === 'toast' || props.errShowType === 'modal') break;
+			}
+		}
+
+		if (Array.isArray(results)) {
+			if (results.length === 0) results = null;
+		}
+		if (Array.isArray(keepitem)) {
+			keepitem.forEach(item => {
+				let itemProp = realProp(item);
+				let value = getDataValue(item, localData.value)
+				if (value !== undefined) {
+					tempFormData[itemProp] = value
+				}
+			});
+		}
+		
+		validateCheck(results)
+		
+		const resetFormData = rawData(tempFormData);
+		callback && typeof callback === 'function' && callback(results, resetFormData);
+
+		if (promise && callback) {
+			return promise;
+		} else {
+			return null;
+		}
+	};
+
+	/**
+	 * 返回validate事件
+	 * @param {Object} result
+	 */
+	const validateCheck = (result: any) => {
+		$emit('validate', result);
+	};
+	
+	// watch监听事件
+	// 监听规则变化
+	watch(() => props.rules, (newVal) => {
+		setRules(newVal)
+	}, { immediate: true, deep: true });
+	
+	// 监听model变化
+	watch(() => props.model, (newVal) => {
+		if (!originalModel.value && newVal) {
+			originalModel.value = uni.$fu.deepClone(newVal);
+		}
+	}, { immediate: true });
+	
+	// 提供父组件上下文
+	provide('formContext', {
+		childrens,
+		formData,
+		formRules: formRules.value,
+		validator,
+		localData,
+		labelWidth: props.labelWidth,
+		labelPosition: props.labelPosition,
+		labelAlign: props.labelAlign,
+		errShowType: props.errShowType,
+		validateTrigger: props.validateTrigger,
+		border: props.border,
+		isFirstBorder: false,
+		validateCheck,
+		_getValue: getValue,
+		_isRequiredField: isRequiredField,
+		_setDataValue: setDataValue,
+		_getDataValue: getDataValue,
+		_realProp: realProp,
+		_isRealProp: isRealProp,
+		_isEqual: isEqual
+	});
+	
+	return {
+		formData,
+		setRules,
+		setValue,
+		validate,
+		validateField,
+		resetFields,
+		clearValidate
+	}
+}

package/components/form/src/form.ts

@@ -0,0 +1,108 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 表单 validateTrigger 有效值
+ */
+export const formValidateTriggers = ['bind', 'submit', 'blur'] as const;
+
+/**
+ * 表单 errShowType 有效值
+ */
+export const formErrShowTypes = ['undertext', 'toast', 'modal'] as const;
+
+/**
+ * 表单 labelPosition 有效值
+ */
+export const formLabelPositions = ['top', 'left'] as const;
+
+/**
+ * 表单 labelAlign 有效值
+ */
+export const formLabelAligns = ['left', 'center', 'right'] as const;
+
+export const formProps = {
+	/**
+	 * @description 绑定数据
+	 * @default null
+	 */
+	model: {
+		type: Object,
+		default() {
+			return null;
+		}
+	},
+	/**
+	 * @description 表单校验规则
+	 */
+	rules: {
+		type: Object,
+		default() {
+			return {};
+		}
+	},
+	/**
+	 * @description 校验触发器方式
+	 * @values 'bind' - 发生变化时触发, 'submit' - 提交时触发, 'blur' - 失去焦点时触发
+	 * @default 'submit'
+	 */
+	validateTrigger: {
+		type: String,
+		values: formValidateTriggers,
+		default: 'submit'
+	},
+	/**
+	 * @description 校验错误信息提示方式
+	 * @values 'undertext' - 错误信息在底部显示, 'toast' - 错误信息toast显示, 'modal' - 错误信息modal显示
+	 * @default 'undertext'
+	 */
+	errShowType: {
+		type: String,
+		values: formErrShowTypes,
+		default: 'undertext'
+	},
+	/**
+	 * @description label 位置
+	 * @values 'top' - 顶部显示 label, 'left' - 左侧显示 label
+	 * @default 'left'
+	 */
+	labelPosition: {
+		type: String,
+		values: formLabelPositions,
+		default: 'left'
+	},
+	/**
+	 * @description label 宽度
+	 */
+	labelWidth: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description label 居中方式
+	 * @values 'left' - label 左侧对齐, 'center' - label 居中, 'right' - label 右侧对齐
+	 * @default 'left'
+	 */
+	labelAlign: {
+		type: String,
+		values: formLabelAligns,
+		default: 'left'
+	},
+	/**
+	 * @description 是否显示边框
+	 * @default false
+	 */
+	border: {
+		type: Boolean,
+		default: false
+	}
+};
+
+export const formEmits = {
+	/**
+	 * @description 校验结果发生变化触发
+	 */
+	validate: (_result : any) => true
+};
+
+export type FormProps = ExtractPropTypes<typeof formProps>;
+export type FormEmits = typeof formEmits;

package/components/form/src/form.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="fu-form">
+		<form>
+			<slot></slot>
+		</form>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Form 表单
+	 * @description 此组件由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
+	 * @tutorial http://www.fusions.top/components/form.html
+	 * @property {Object} model 表单数据
+	 * @property {Object} rules	表单校验规则
+	 * @property {String} validateTrigger = [bind|submit|blur]	校验触发器方式 默认 submit
+	 * @value bind 发生变化时触发
+	 * @value submit 提交时触发
+	 * @value blur 失去焦点时触发
+	 * @property {String} labelPosition = [top|left] label 位置 默认 left
+	 * 	@value top 顶部显示 label
+	 * 	@value left	左侧显示 label
+	 * @property {String} labelWidth label 宽度，默认 70
+	 * @property {String} labelAlign = [left|center|right]	label 居中方式  默认 left
+	 * 	@value left label 左侧对齐
+	 * 	@value center label 居中
+	 * 	@value right label 右侧对齐
+	 * @property {String} errShowType = [undertext|toast|modal]	校验错误信息提示方式
+	 * 	@value undertext 错误信息在底部显示
+	 * 	@value toast 错误信息toast显示
+	 * 	@value modal 错误信息modal显示
+	 * @event {Function} validate 校验结果发生变化触发
+	 */
+	import { formEmits, formProps } from './form';
+	import { useForm } from './composables';
+	
+	defineOptions({ name: 'FuForm', options: { virtualHost: true } });
+	
+	const props = defineProps(formProps);
+	const $emit = defineEmits(formEmits);
+	
+	const {
+		setRules,
+		setValue,
+		validate,
+		validateField,
+		resetFields,
+		clearValidate
+	} = useForm(props, $emit);
+	
+	// 暴露方法
+	defineExpose({
+		setRules,
+		setValue,
+		validate,
+		validateField,
+		resetFields,
+		clearValidate
+	});
+</script>
+
+<style>
+
+</style>

package/components/{fu-form/utils.js → form/src/utils.ts}

@@ -1,17 +1,17 @@
 /**
  * 简单处理对象拷贝
- * @param {Obejct} 被拷贝对象
- * @@return {Object} 拷贝对象
+ * @param {Obejct} value 被拷贝对象
+ * @return {Object} 拷贝对象
  */
-export const deepCopy = (val) => {
-	return JSON.parse(JSON.stringify(val))
+export const deepCopy = <T>(value: T): T => {
+	return JSON.parse(JSON.stringify(value))
 }
 /**
  * 过滤数字类型
  * @param {String} format 数字类型
- * @@return {Boolean} 返回是否为数字类型
+ * @return {Boolean} 返回是否为数字类型
  */
-export const typeFilter = (format) => {
+export const typeFilter = (format: string): boolean => {
 	return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
 }
 
@@ -21,21 +21,21 @@ export const typeFilter = (format) => {
  * @param {any} value 字段值
  * @param {Object} rules 表单校验规则
  */
-export const getValue = (key, value, rules) => {
+export const getValue = (key: string, value: any, rules: any[]): any => {
 	const isRuleNumType = rules.find(val => val.format && typeFilter(val.format));
 	const isRuleBoolType = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool');
 	// 输入类型为 number
 	if (!!isRuleNumType) {
 		if (!value && value !== 0) {
-			value = null
+			value = null;
 		} else {
-			value = isNumber(Number(value)) ? Number(value) : value
+			value = isNumber(Number(value))? Number(value): value;
 		}
 	}
 
 	// 输入类型为 boolean
 	if (!!isRuleBoolType) {
-		value = isBoolean(value) ? value : false
+		value = isBoolean(value) ? value : false;
 	}
 
 	return value;
@@ -44,11 +44,11 @@ export const getValue = (key, value, rules) => {
 /**
  * 获取表单数据
  * @param {String|Array} field 真实名称，需要使用 realProp 获取
- * @param {Object} data 原始数据
+ * @param {Object} formdata 原始数据
  * @param {any} value  需要设置的值
  */
-export const setDataValue = (field, formdata, value) => {
-	formdata[field] = value
+export const setDataValue = <T extends Record<string, any>>(field: keyof T & string, formdata: T, value: any) => {
+	formdata[field] = value;
 	return value || ''
 }
 
@@ -57,7 +57,7 @@ export const setDataValue = (field, formdata, value) => {
  * @param {String|Array} field 真实名称，需要使用 realProp 获取
  * @param {Object} data 原始数据
  */
-export const getDataValue = (field, data) => {
+export const getDataValue = <T extends Record<string, any>>(field: string, data: T) => {
 	return objGet(data, field)
 }
 
@@ -65,8 +65,8 @@ export const getDataValue = (field, data) => {
  * 获取表单类型
  * @param {String|Array} field 真实名称，需要使用 realProp 获取
  */
-export const getDataValueType = (field, data) => {
-	const value = getDataValue(field, data)
+export const getDataValueType = <T extends Record<string, any>>(field: string, data: T) => {
+	const value = getDataValue(field, data);
 	return {
 		type: type(value),
 		value
@@ -76,32 +76,34 @@ export const getDataValueType = (field, data) => {
 /**
  * 获取表单可用的真实prop
  * @param {String|Array} prop 表单prop
- * @@return {String} 表单可用的真实prop
+ * @return {String} 表单可用的真实prop
  */
-export const realProp = (prop, data = {}) => {
-	const base_prop = _basePath(prop)
-	if (typeof base_prop === 'object' && Array.isArray(base_prop) && base_prop.length > 1) {
-		const real_prop = base_prop.reduce((a, b) => a += `#${b}`, '_formdata_')
+export const realProp = (prop: string | any[], data: any = {}): string => {
+	const baseProp = _basePath(prop)
+	if (typeof baseProp === 'object' && Array.isArray(baseProp) && baseProp.length > 1) {
+		const real_prop = baseProp.reduce((a, b) => a += `#${b}`, '_formdata_')
 		return real_prop
 	}
-	return base_prop[0] || prop
+	return (baseProp as string[])[0] || prop as string
 }
 
 /**
  * 判断是否表单可用的真实prop
  * @param {String|Array} prop 表单prop
- * @@return {String} 表单可用的真实prop
+ * @return {String} 表单可用的真实prop
  */
-export const isRealProp = (prop) => {
+export const isRealProp = (prop: string): boolean => {
 	const reg = /^_formdata_#*/
 	return reg.test(prop)
 }
 
 /**
  * 获取表单数据的原始格式
- * @@return {Object|Array} object 需要解析的数据
+ * @param object 需要解析的数据
+ * @param prop 可选属性
+ * @returns 解析后的数据
  */
-export const rawData = (object = {}, prop) => {
+export const rawData = <T extends Record<string, any>>(object: T = {} as T, prop?: string): Record<string, any> => {
 	let newData = JSON.parse(JSON.stringify(object))
 	let formData = {}
 	for(let i in newData){
@@ -113,23 +115,24 @@ export const rawData = (object = {}, prop) => {
 
 /**
  * 真实prop还原为 array
- * @param {*} prop 
+ * @param {*} prop 真实prop
+ * @returns 数组路径
  */
-export const prop2arr = (prop) => {
-	let field = prop.replace('_formdata_#', '')
-	field = field.split('#').map(v => (isNumber(v) ? Number(v) : v))
-	return field
+export const prop2arr = (prop: string): (string | number)[] => {
+	const fieldStr = prop.replace('_formdata_#', '');
+	const result = fieldStr.split('#').map(v => (isNumber(v) ? Number(v) : v));
+	return result
 }
 
 /**
  * 对象中设置值
  * @param {Object|Array} object 源数据
- * @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
+ * @param {String|Array} path 'a.b.c' 或 ['a',0,'b','c']
  * @param {String} value 需要设置的值
  */
-export const objSet = (object, path, value) => {
+export const objSet = <T extends Record<string, any>>(object: T, path: string | any[], value: any): T => {
 	if (typeof object !== 'object') return object;
-	_basePath(path).reduce((o, k, i, _) => {
+	_basePath(path).reduce((o: any, k: any, i: number, _: any[]) => {
 		if (i === _.length - 1) { 
 			// 若遍历结束直接赋值
 			o[k] = value
@@ -147,8 +150,12 @@ export const objSet = (object, path, value) => {
 	return object;
 }
 
-// 处理 path， path有三种形式：'a[0].b.c'、'a.0.b.c' 和 ['a','0','b','c']，需要统一处理成数组，便于后续使用
-function _basePath(path) {
+/**
+ * 处理 path， path有三种形式：'a[0].b.c'、'a.0.b.c' 和 ['a','0','b','c']，需要统一处理成数组，便于后续使用
+ * @param path 路径
+ * @returns 数组路径
+ */
+function _basePath(path: string | any[]): string[] {
 	// 若是数组，则直接返回
 	if (Array.isArray(path)) return path
 	// 若有 '[',']'，则替换成将 '[' 替换成 '.',去掉 ']'
@@ -161,7 +168,7 @@ function _basePath(path) {
  * @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
  * @param {String} defaultVal 如果无法从调用链中获取值的默认值
  */
-export const objGet = (object, path, defaultVal = 'undefined') => {
+export const objGet = <T extends Record<string, any>>(object: T, path: string | any[], defaultVal: any = 'undefined'): any => {
 	// 先将path处理成统一格式
 	let newPath = _basePath(path)
 	// 递归处理，返回最后结果
@@ -177,7 +184,7 @@ export const objGet = (object, path, defaultVal = 'undefined') => {
  * @param {any} num 需要判断的值
  * @return {Boolean} 是否为 number
  */
-export const isNumber = (num) => {
+export const isNumber = (num: any): boolean => {
 	return !isNaN(Number(num))
 }
 
@@ -186,7 +193,7 @@ export const isNumber = (num) => {
  * @param {any} bool 需要判断的值
  * @return {Boolean} 是否为 boolean
  */
-export const isBoolean = (bool) => {
+export const isBoolean = (bool: any): boolean => {
 	return (typeof bool === 'boolean')
 }
 /**
@@ -194,7 +201,7 @@ export const isBoolean = (bool) => {
  * @param {Object} rules 规则
  * @return {Boolean} 是否有必填字段
  */
-export const isRequiredField = (rules) => {
+export const isRequiredField = (rules: any): boolean => {
 	let isNoField = false;
 	for (let i = 0; i < rules.length; i++) {
 		const ruleData = rules[i];
@@ -211,7 +218,7 @@ export const isRequiredField = (rules) => {
  * 获取数据类型
  * @param {Any} obj 需要获取数据类型的值
  */
-export const type = (obj) => {
+export const type = (obj: any): string => {
 	var class2type = {};
 
 	// 生成class2type映射
@@ -232,7 +239,7 @@ export const type = (obj) => {
  * @param {any} b 值  
  * @return {Boolean} 是否相等
  */
-export const isEqual = (a, b) => {
+export const isEqual = (a: any, b: any): boolean => {
 	//如果a和b本来就全等
 	if (a === b) {
 		//判断是否为0和-0