@kengic/uni 0.5.1 → 0.5.2-beta.1

package/dist/uni/uni-ui/uni-forms/uni-forms.vue

@@ -1,398 +1,386 @@
 <template>
-	<view class="uni-forms">
-		<form>
-			<slot></slot>
-		</form>
-	</view>
+    <view class="uni-forms">
+        <form>
+            <slot></slot>
+        </form>
+    </view>
 </template>
 
 <script>
-	import Validator from './validate.js';
-	import { defineComponent } from 'vue';
-	import {
-		deepCopy,
-		getValue,
-		isRequiredField,
-		setDataValue,
-		getDataValue,
-		realName,
-		isRealName,
-		rawData,
-		isEqual
-	} from './utils.js'
+    import Validator from './validate.js';
+    // #ifndef VUE3
+    // 后续会慢慢废弃这个方法
+    import Vue, { defineComponent } from 'vue';
+    import { deepCopy, getDataValue, getValue, isEqual, isRealName, isRequiredField, rawData, realName, setDataValue } from './utils.js';
 
-	// #ifndef VUE3
-	// 后续会慢慢废弃这个方法
-	import Vue from 'vue';
-	Vue.prototype.binddata = function(name, value, formName) {
-		if (formName) {
-			this.$refs[formName].setValue(name, value);
-		} else {
-			let formVm;
-			for (let i in this.$refs) {
-				const vm = this.$refs[i];
-				if (vm && vm.$options && vm.$options.name === 'uniForms') {
-					formVm = vm;
-					break;
-				}
-			}
-			if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
-			formVm.setValue(name, value);
-		}
-	};
-	// #endif
-	/**
-	 * Forms 表单
-	 * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
-	 * @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 宽度，默认 65px
-	 * @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} submit	提交时触发
-	 * @event {Function} validate	校验结果发生变化触发
-	 */
-	export default defineComponent({
-		name: 'UniForms',
-		emits: ['validate', 'submit'],
-		options: {
-			virtualHost: true
-		},
-		props: {
-			// 即将弃用
-			value: {
-				type: Object,
-				default () {
-					return null;
-				}
-			},
-			// vue3 替换 value 属性
-			modelValue: {
-				type: Object,
-				default () {
-					return null;
-				}
-			},
-			// 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
-			model: {
-				type: Object,
-				default () {
-					return null;
-				}
-			},
-			// 表单校验规则
-			rules: {
-				type: Object,
-				default () {
-					return {};
-				}
-			},
-			//校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
-			errShowType: {
-				type: String,
-				default: 'undertext'
-			},
-			// 校验触发器方式 默认 bind 取值 [bind|submit]
-			validateTrigger: {
-				type: String,
-				default: 'submit'
-			},
-			// label 位置，默认 left 取值  top/left
-			labelPosition: {
-				type: String,
-				default: 'left'
-			},
-			// label 宽度
-			labelWidth: {
-				type: [String, Number],
-				default: ''
-			},
-			// label 居中方式，默认 left 取值 left/center/right
-			labelAlign: {
-				type: String,
-				default: 'left'
-			},
-			border: {
-				type: Boolean,
-				default: false
-			}
-		},
-		provide() {
-			return {
-				uniForm: this
-			}
-		},
-		data() {
-			return {
-				// 表单本地值的记录，不应该与传如的值进行关联
-				formData: {},
-				formRules: {}
-			};
-		},
-		computed: {
-			// 计算数据源变化的
-			localData() {
-				const localVal = this.model || this.modelValue || this.value
-				if (localVal) {
-					return deepCopy(localVal)
-				}
-				return {}
-			}
-		},
-		watch: {
-			// 监听数据变化 ,暂时不使用，需要单独赋值
-			// localData: {},
-			// 监听规则变化
-			rules: {
-				handler: function(val, oldVal) {
-					this.setRules(val)
-				},
-				deep: true,
-				immediate: true
-			}
-		},
-		created() {
-			// #ifdef VUE3
-			let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata
-			if (!getbinddata) {
-				getApp().$vm.$.appContext.config.globalProperties.binddata = function(name, value, formName) {
-					if (formName) {
-						this.$refs[formName].setValue(name, value);
-					} else {
-						let formVm;
-						for (let i in this.$refs) {
-							const vm = this.$refs[i];
-							if (vm && vm.$options && vm.$options.name === 'uniForms') {
-								formVm = vm;
-								break;
-							}
-						}
-						if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
-						formVm.setValue(name, value);
-					}
-				}
-			}
-			// #endif
+    Vue.prototype.binddata = function (name, value, formName) {
+        if (formName) {
+            this.$refs[formName].setValue(name, value);
+        } else {
+            let formVm;
+            for (let i in this.$refs) {
+                const vm = this.$refs[i];
+                if (vm && vm.$options && vm.$options.name === 'uniForms') {
+                    formVm = vm;
+                    break;
+                }
+            }
+            if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+            formVm.setValue(name, value);
+        }
+    };
+    // #endif
+    /**
+     * Forms 表单
+     * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+     * @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 宽度，默认 65px
+     * @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} submit	提交时触发
+     * @event {Function} validate	校验结果发生变化触发
+     */
+    export default defineComponent({
+        name: 'UniForms',
+        emits: ['validate', 'submit'],
+        options: {
+            virtualHost: true,
+        },
+        props: {
+            // 即将弃用
+            value: {
+                type: Object,
+                default() {
+                    return null;
+                },
+            },
+            // vue3 替换 value 属性
+            modelValue: {
+                type: Object,
+                default() {
+                    return null;
+                },
+            },
+            // 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
+            model: {
+                type: Object,
+                default() {
+                    return null;
+                },
+            },
+            // 表单校验规则
+            rules: {
+                type: Object,
+                default() {
+                    return {};
+                },
+            },
+            //校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
+            errShowType: {
+                type: String,
+                default: 'undertext',
+            },
+            // 校验触发器方式 默认 bind 取值 [bind|submit]
+            validateTrigger: {
+                type: String,
+                default: 'submit',
+            },
+            // label 位置，默认 left 取值  top/left
+            labelPosition: {
+                type: String,
+                default: 'left',
+            },
+            // label 宽度
+            labelWidth: {
+                type: [String, Number],
+                default: '',
+            },
+            // label 居中方式，默认 left 取值 left/center/right
+            labelAlign: {
+                type: String,
+                default: 'left',
+            },
+            border: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        provide() {
+            return {
+                uniForm: this,
+            };
+        },
+        data() {
+            return {
+                // 表单本地值的记录，不应该与传如的值进行关联
+                formData: {},
+                formRules: {},
+            };
+        },
+        computed: {
+            // 计算数据源变化的
+            localData() {
+                const localVal = this.model || this.modelValue || this.value;
+                if (localVal) {
+                    return deepCopy(localVal);
+                }
+                return {};
+            },
+        },
+        watch: {
+            // 监听数据变化 ,暂时不使用，需要单独赋值
+            // localData: {},
+            // 监听规则变化
+            rules: {
+                handler: function (val, oldVal) {
+                    this.setRules(val);
+                },
+                deep: true,
+                immediate: true,
+            },
+        },
+        created() {
+            // #ifdef VUE3
+            let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata;
+            if (!getbinddata) {
+                getApp().$vm.$.appContext.config.globalProperties.binddata = function (name, value, formName) {
+                    if (formName) {
+                        this.$refs[formName].setValue(name, value);
+                    } else {
+                        let formVm;
+                        for (let i in this.$refs) {
+                            const vm = this.$refs[i];
+                            if (vm && vm.$options && vm.$options.name === 'uniForms') {
+                                formVm = vm;
+                                break;
+                            }
+                        }
+                        if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+                        formVm.setValue(name, value);
+                    }
+                };
+            }
+            // #endif
 
-			// 子组件实例数组
-			this.childrens = []
-			// TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
-			this.inputChildrens = []
-			this.setRules(this.rules)
-		},
-		methods: {
-			/**
-			 * 外部调用方法
-			 * 设置规则 ，主要用于小程序自定义检验规则
-			 * @param {Array} rules 规则源数据
-			 */
-			setRules(rules) {
-				// TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
-				this.formRules = Object.assign({}, this.formRules, rules)
-				// 初始化校验函数
-				this.validator = new Validator(rules);
-			},
+            // 子组件实例数组
+            this.childrens = [];
+            // TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
+            this.inputChildrens = [];
+            this.setRules(this.rules);
+        },
+        methods: {
+            /**
+             * 外部调用方法
+             * 设置规则 ，主要用于小程序自定义检验规则
+             * @param {Array} rules 规则源数据
+             */
+            setRules(rules) {
+                // TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
+                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.name === 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 {Object} key
+             * @param {Object} value
+             */
+            setValue(key, value) {
+                let example = this.childrens.find((child) => child.name === 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} 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 name = realName(item.name)
-					if (props.indexOf(name) !== -1) {
-						invalidFields = Object.assign({}, invalidFields, {
-							[name]: this.formData[name]
-						});
-					}
-				});
-				return this.checkAll(invalidFields, [], callback);
-			},
+            /**
+             * 外部调用方法
+             * 部分表单校验
+             * @param {Array|String} props 需要校验的字段
+             * @param {Function} 回调函数
+             */
+            validateField(props = [], callback) {
+                props = [].concat(props);
+                let invalidFields = {};
+                this.childrens.forEach((item) => {
+                    const name = realName(item.name);
+                    if (props.indexOf(name) !== -1) {
+                        invalidFields = Object.assign({}, invalidFields, {
+                            [name]: this.formData[name],
+                        });
+                    }
+                });
+                return this.checkAll(invalidFields, [], callback);
+            },
 
-			/**
-			 * 外部调用方法
-			 * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
-			 * @param {Array|String} props 需要移除校验的字段 ，不填为所有
-			 */
-			clearValidate(props = []) {
-				props = [].concat(props);
-				this.childrens.forEach(item => {
-					if (props.length === 0) {
-						item.errMsg = '';
-					} else {
-						const name = realName(item.name)
-						if (props.indexOf(name) !== -1) {
-							item.errMsg = '';
-						}
-					}
-				});
-			},
+            /**
+             * 外部调用方法
+             * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+             * @param {Array|String} props 需要移除校验的字段 ，不填为所有
+             */
+            clearValidate(props = []) {
+                props = [].concat(props);
+                this.childrens.forEach((item) => {
+                    if (props.length === 0) {
+                        item.errMsg = '';
+                    } else {
+                        const name = realName(item.name);
+                        if (props.indexOf(name) !== -1) {
+                            item.errMsg = '';
+                        }
+                    }
+                });
+            },
 
-			/**
-			 * 外部调用方法 ，即将废弃
-			 * 手动提交校验表单
-			 * 对整个表单进行校验的方法，参数为一个回调函数。
-			 * @param {Array} keepitem 保留不参与校验的字段
-			 * @param {type} callback 方法回调
-			 */
-			submit(keepitem, callback, type) {
-				for (let i in this.dataValue) {
-					const itemData = this.childrens.find(v => v.name === i);
-					if (itemData) {
-						if (this.formData[i] === undefined) {
-							this.formData[i] = this._getValue(i, this.dataValue[i]);
-						}
-					}
-				}
+            /**
+             * 外部调用方法 ，即将废弃
+             * 手动提交校验表单
+             * 对整个表单进行校验的方法，参数为一个回调函数。
+             * @param {Array} keepitem 保留不参与校验的字段
+             * @param {type} callback 方法回调
+             */
+            submit(keepitem, callback, type) {
+                for (let i in this.dataValue) {
+                    const itemData = this.childrens.find((v) => v.name === i);
+                    if (itemData) {
+                        if (this.formData[i] === undefined) {
+                            this.formData[i] = this._getValue(i, this.dataValue[i]);
+                        }
+                    }
+                }
 
-				if (!type) {
-					console.warn('submit 方法即将废弃，请使用validate方法代替！');
-				}
+                if (!type) {
+                    console.warn('submit 方法即将废弃，请使用validate方法代替！');
+                }
 
-				return this.checkAll(this.formData, keepitem, callback, 'submit');
-			},
+                return this.checkAll(this.formData, keepitem, callback, 'submit');
+            },
 
-			// 校验所有
-			async checkAll(invalidFields, keepitem, callback, type) {
-				// 不存在校验规则 ，则停止校验流程
-				if (!this.validator) return
-				let childrens = []
-				// 处理参与校验的item实例
-				for (let i in invalidFields) {
-					const item = this.childrens.find(v => realName(v.name) === i)
-					if (item) {
-						childrens.push(item)
-					}
-				}
+            // 校验所有
+            async checkAll(invalidFields, keepitem, callback, type) {
+                // 不存在校验规则 ，则停止校验流程
+                if (!this.validator) return;
+                let childrens = [];
+                // 处理参与校验的item实例
+                for (let i in invalidFields) {
+                    const item = this.childrens.find((v) => realName(v.name) === i);
+                    if (item) {
+                        childrens.push(item);
+                    }
+                }
 
-				// 如果validate第一个参数是funciont ,那就走回调
-				if (!callback && typeof keepitem === 'function') {
-					callback = keepitem;
-				}
+                // 如果validate第一个参数是funciont ,那就走回调
+                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 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 name = realName(child.name);
-					const result = await child.onFieldChange(tempFormData[name]);
-					if (result) {
-						results.push(result);
-						// toast ,modal 只需要执行第一次就可以
-						if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
-					}
-				}
+                let results = [];
+                // 避免引用错乱 ，建议拷贝对象处理
+                let tempFormData = JSON.parse(JSON.stringify(invalidFields));
+                // 所有子组件参与校验,使用 for 可以使用  awiat
+                for (let i in childrens) {
+                    const child = childrens[i];
+                    let name = realName(child.name);
+                    const result = await child.onFieldChange(tempFormData[name]);
+                    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((v) => {
+                        let vName = realName(v);
+                        let value = getDataValue(v, this.localData);
+                        if (value !== undefined) {
+                            tempFormData[vName] = value;
+                        }
+                    });
+                }
 
-				if (Array.isArray(results)) {
-					if (results.length === 0) results = null;
-				}
-				if (Array.isArray(keepitem)) {
-					keepitem.forEach(v => {
-						let vName = realName(v);
-						let value = getDataValue(v, this.localData)
-						if (value !== undefined) {
-							tempFormData[vName] = value
-						}
-					});
-				}
+                // TODO submit 即将废弃
+                if (type === 'submit') {
+                    this.$emit('submit', {
+                        detail: {
+                            value: tempFormData,
+                            errors: results,
+                        },
+                    });
+                } else {
+                    this.$emit('validate', results);
+                }
 
-				// TODO submit 即将废弃
-				if (type === 'submit') {
-					this.$emit('submit', {
-						detail: {
-							value: tempFormData,
-							errors: results
-						}
-					});
-				} else {
-					this.$emit('validate', results);
-				}
+                // const resetFormData = rawData(tempFormData, this.localData, this.name)
+                let resetFormData = {};
+                resetFormData = rawData(tempFormData, this.name);
+                callback && typeof callback === 'function' && callback(results, resetFormData);
 
-				// const resetFormData = rawData(tempFormData, this.localData, this.name)
-				let resetFormData = {}
-				resetFormData = rawData(tempFormData, this.name)
-				callback && typeof callback === 'function' && callback(results, resetFormData);
+                if (promise && callback) {
+                    return promise;
+                } else {
+                    return null;
+                }
+            },
 
-				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,
-			_realName: realName,
-			_isRealName: isRealName,
-			_isEqual: isEqual
-		}
-	});
+            /**
+             * 返回validate事件
+             * @param {Object} result
+             */
+            validateCheck(result) {
+                this.$emit('validate', result);
+            },
+            _getValue: getValue,
+            _isRequiredField: isRequiredField,
+            _setDataValue: setDataValue,
+            _getDataValue: getDataValue,
+            _realName: realName,
+            _isRealName: isRealName,
+            _isEqual: isEqual,
+        },
+    });
 </script>
 
 <style lang="scss">
-	.uni-forms {}
+    .uni-forms {
+    }
 </style>