fusions-ui 1.2.7 → 1.2.8

package/components/fu-form/fu-form.vue

@@ -1,284 +0,0 @@
-<template>
-	<view class="fu-form">
-		<form>
-			<slot></slot>
-		</form>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	import Validator from './validate.js';
-	import { 
-		deepCopy, 
-		getValue, 
-		isRequiredField, 
-		setDataValue, 
-		getDataValue, 
-		realProp, 
-		isRealProp, 
-		rawData, 
-		isEqual ,
-	} from './utils.js'
-	/**
-	 * Form 表单
-	 * @description 此组件由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
-	 * @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 校验结果发生变化触发
-	 */
-	export default {
-		name: "FuForm",
-		emits: ['validate'],
-		mixins: [mpMixin, props],
-		provide() {
-			return {
-				fuForm: this
-			}
-		},
-		data() {
-			return {
-				// 表单本地值的记录，不应该与传如的值进行关联
-				formData: {},
-				formRules: {},
-				// 原始的model快照，用于resetFields方法重置表单时使用
-				originalModel: null
-			};
-		},
-		computed: {
-			// 计算数据源变化的
-			localData() {
-				const localVal = this.model
-				if (localVal) {
-					return deepCopy(localVal)
-				}
-				return {}
-			}
-		},
-		created() {
-			// 子组件实例数组
-			this.childrens = []
-			this.setRules(this.rules)
-		},
-		methods: {
-			/**
-			 * 外部调用方法
-			 * 设置规则，主要用于小程序自定义检验规则
-			 * @param {Array} rules 规则源数据
-			 */
-			setRules(rules) {
-				// 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
-				this.formRules = Object.assign({}, this.formRules, rules);
-				// 初始化校验函数
-				this.validator = new Validator(rules);
-			},
-
-			/**
-			 * 外部调用方法
-			 * 设置数据，用于设置表单数据，公开给用户使用，不支持在动态表单中使用
-			 * @param {Object} key
-			 * @param {Object} value
-			 */
-			setValue(key, value) {
-				let example = this.childrens.find(child => child.prop === key);
-				if (!example) return null;
-				this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || [])
-				return example.onFieldChange(this.formData[key]);
-			},
-
-			/**
-			 * 外部调用方法
-			 * 手动提交校验表单
-			 * 对整个表单进行校验的方法，参数为一个回调函数。
-			 * @param {Array} keepitem 保留不参与校验的字段
-			 * @param {type} callback 方法回调
-			 */
-			validate(keepitem, callback) {
-				return this.checkAll(this.formData, keepitem, callback);
-			},
-
-			/**
-			 * 外部调用方法
-			 * 部分表单校验
-			 * @param {Array|String} props 需要校验的字段
-			 * @param {Function} 回调函数
-			 */
-			validateField(props = [], callback) {
-				props = [].concat(props);
-				let invalidFields = {};
-				this.childrens.forEach(item => {
-					const prop = realProp(item.prop)
-					if (props.indexOf(prop) !== -1) {
-						invalidFields = Object.assign({}, invalidFields, {
-							[prop]: this.formData[prop]
-						});
-					}
-				});
-				return this.checkAll(invalidFields, [], callback);
-			},
-			
-			/**
-			 * 外部调用方法
-			 * 手动重置表单
-			 * 清空所有fu-form-item组件的内容，本质上是调用了fu-form-item中的resetFields()方法
-			 */
-			resetFields() {
-				this.resetModel()
-			},
-			
-			// 重置model为初始值的快照
-			resetModel() {
-				this.childrens.map((item) => {
-					const prop = item?.prop;
-					const value = uni.$fu.getProperty(this.originalModel, prop);
-					uni.$fu.setProperty(this.model, prop, value);
-				})
-			},
-
-			/**
-			 * 外部调用方法
-			 * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
-			 * @param {Array|String} props 需要移除校验的字段 ，不填为所有
-			 */
-			clearValidate(props = []) {
-				props = [].concat(props);
-				this.childrens.forEach(item => {
-					if (props.length === 0) {
-						item.errMsg = '';
-					} else {
-						const prop = realProp(item.prop)
-						if (props.indexOf(prop) !== -1) {
-							item.errMsg = '';
-						}
-					}
-				});
-			},
-
-			// 校验所有
-			async checkAll(invalidFields, keepitem, callback, type) {
-				// 不存在校验规则 ，则停止校验流程
-				if (!this.validator) return
-				
-				let childrens = [];
-				// 处理参与校验的item实例
-				for (let i in invalidFields) {
-					const item = this.childrens.find(item => realProp(item.prop) === i);
-					if (item) {
-						childrens.push(item)
-					}
-				}
-
-				// 如果validate第一个参数是function, 那就走回调
-				if (!callback && typeof keepitem === 'function') {
-					callback = keepitem;
-				}
-
-				let promise;
-				// 如果不存在回调，那么使用 Promise 方式返回
-				if (!callback && typeof callback !== 'function' && Promise) {
-					promise = new Promise((resolve, reject) => {
-						callback = function(valid, invalidFields) {
-							!valid ? resolve(invalidFields) : reject(valid);
-						};
-					});
-				}
-
-				let results = [];
-				// 避免引用错乱 ，建议拷贝对象处理
-				let tempFormData = JSON.parse(JSON.stringify(invalidFields))
-				// 所有子组件参与校验,使用 for 可以使用  awiat
-				for (let i in childrens) {
-					const child = childrens[i];
-					let prop = realProp(child.prop);
-					const result = await child.onFieldChange(tempFormData[prop]);
-					if (result) {
-						results.push(result);
-						// toast ,modal 只需要执行第一次就可以
-						if (this.errShowType === 'toast' || this.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, this.localData)
-						if (value !== undefined) {
-							tempFormData[itemProp] = value
-						}
-					});
-				}
-				
-				this.$emit('validate', results);
-				
-				let resetFormData = {};
-				resetFormData = rawData(tempFormData, this.prop);
-				callback && typeof callback === 'function' && callback(results, resetFormData);
-
-				if (promise && callback) {
-					return promise;
-				} else {
-					return null;
-				}
-			},
-
-			/**
-			 * 返回validate事件
-			 * @param {Object} result
-			 */
-			validateCheck(result) {
-				this.$emit('validate', result);
-			},
-			_getValue: getValue,
-			_isRequiredField: isRequiredField,
-			_setDataValue: setDataValue,
-			_getDataValue: getDataValue,
-			_realProp: realProp,
-			_isRealProp: isRealProp,
-			_isEqual: isEqual
-		},
-		watch: {
-			// 监听数据变化 ,暂时不使用，需要单独赋值
-			// localData: {},
-			// 监听规则变化
-			rules: {
-				deep: true,
-				immediate: true,
-				handler: function(val, oldVal) {
-					this.setRules(val)
-				}
-			},
-			model: {
-				immediate: true,
-				handler(val) {
-					if (!this.originalModel) {
-						this.originalModel = uni.$fu.deepClone(val);
-					}
-				}
-			}
-		},
-	}
-</script>
-
-<style>
-
-</style>

package/components/fu-form/props.js

@@ -1,74 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @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,
-			default: 'submit'
-		},
-		/**
-		 * @description 校验错误信息提示方式
-		 * @values 'undertext' - 错误信息在底部显示, 'toast' - 错误信息toast显示, 'modal' - 错误信息modal显示
-		 * @default 'undertext'
-		 */
-		errShowType: {
-			type: String,
-			default: 'undertext'
-		},
-		/**
-		 * @description label 位置
-		 * @values 'top' - 顶部显示 label, 'left' - 左侧显示 label
-		 * @default 'left'
-		 */
-		labelPosition: {
-			type: String,
-			default: 'left'
-		},
-		/**
-		 * @description label 宽度
-		 */
-		labelWidth: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description label 居中方式 取值 left/center/right
-		 * @values 'left' - label 左侧对齐, 'center' - label 居中, 'right' - label 右侧对齐
-		 * @default 'left'
-		 */
-		labelAlign: {
-			type: String,
-			default: 'left'
-		},
-		/**
-		 * @description 是否显示边框
-		 * @default false
-		 */
-		border: {
-			type: Boolean,
-			default: false
-		}
-	}
-}