fusions-ui 1.2.7 → 1.2.8

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

@@ -1,535 +0,0 @@
-<template>
-	<view class="fu-form-item"
-		:class="['is-direction-' + localLabelPos , border?'fu-form-item--border': '' , border && isFirstBorder? 'is-first-border': '']">
-		<slot name="label">
-			<view class="fu-form-item__label" :class="{'no-label': !label && !required}" :style="{width: localLabelWidth, justifyContent: localLabelAlign}">
-				<text v-if="required" class="is-required">*</text>
-				<text>{{ label }}</text>
-			</view>
-		</slot>
-		<!-- #ifndef APP-NVUE -->
-		<view class="fu-form-item__content">
-			<slot></slot>
-			<view class="fu-form-item__error" :class="{'msg--active': msg}">
-				<text>{{ msg }}</text>
-			</view>
-		</view>
-		<!-- #endif -->
-		<!-- #ifdef APP-NVUE -->
-		<view class="fu-form-item__nuve-content">
-			<view class="fu-form-item__content">
-				<slot></slot>
-			</view>
-			<view class="fu-form-item__error" :class="{'msg--active': msg}">
-				<text class="error-text">{{ msg }}</text>
-			</view>
-		</view>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	/**
-	 * 表单子组件
-	 * @description 此组件表单子组件，提供了基础布局已经校验能力 需配合fu-form组件一起使用
-	 * @property {Boolean} required = [true|false] 是否必填，左边显示红色"*"号
-	 * @property {String } label 输入框左边的文字提示
-	 * @property {Number } labelWidth label的宽度，单位px（默认70）
-	 * @property {String } labelAlign = [left|center|right] label的文字对齐方式（默认left）
-	 * 	@value left label 左侧显示
-	 * 	@value center label 居中
-	 * 	@value right label 右侧对齐
-	 * @property {String } message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
-	 * @property {String } prop 表单域的属性名，在使用校验规则时必填
-	 * @property {String } labelPosition = [top|left] label的文字的位置，优先级高于fu-form组件中的labelPosition
-	 * 	@value top	顶部显示 label
-	 * 	@value left	左侧显示 label
-	 */
-	export default {
-		name:"FuFormItem",
-		provide() {
-			return {
-				fuFormItem: this
-			}
-		},
-		inject: {
-			form: {
-				from: 'fuForm',
-				default: null
-			},
-		},
-		mixins: [mpMixin, props],
-		data() {
-			return {
-				errMsg: '',
-				userRules: null,
-				localLabelAlign: 'left',
-				localLabelWidth: '70px',
-				localLabelPos: 'left',
-				border: false,
-				isFirstBorder: false,
-			};
-		},
-		computed: {
-			// 处理错误信息
-			msg() {
-				return this.message || this.errMsg;
-			}
-		},
-		created() {
-			this.init(true)
-			if (this.prop && this.form) {
-				// 处理头条Vue3 watch不生效的问题
-				// #ifdef MP-TOUTIAO
-				this.$watch('form.formRules', () => {
-					this.init()
-				})
-				// #endif
-		
-				// 监听变化
-				this.$watch(() => {
-						const val = this.form._getDataValue(this.prop, this.form.localData);
-						return val
-					}, (value, oldVal) => {
-						const isEqual = this.form._isEqual(value, oldVal)
-						// 简单判断前后值的变化，只有发生变化才会发生校验
-						// 如果 oldVal = undefined，那么大概率是源数据里没有值导致 ，这个情况不哦校验，可能不严谨，需要在做观察
-						// 暂时取消 && oldVal !== undefined，如果formData中不存在，可能会不校验
-						if (!isEqual) {
-							const val = this.itemSetValue(value)
-							this.onFieldChange(val, false)
-						}
-					}, { immediate: false }
-				);
-			}
-		
-		},
-		methods: {
-			/**
-			 * 外部调用方法
-			 * 设置规则 ，主要用于小程序自定义检验规则
-			 * @param {Array} rules 规则源数据
-			 */
-			setRules(rules = null) {
-				this.userRules = rules;
-				this.init(false)
-			},
-			
-			/**
-			 * 外部调用方法
-			 * 校验数据
-			 * @param {any} value 需要校验的数据
-			 * @param {boolean} 是否立即校验
-			 * @return {Array|null} 校验内容
-			 */
-			async onFieldChange(value, formtrigger = true) {
-				const {
-					formData,
-					localData,
-					errShowType,
-					validateCheck,
-					validateTrigger,
-					_isRequiredField,
-					_realProp
-				} = this.form;
-				
-				const prop = _realProp(this.prop);
-				if (!value) {
-					value = this.form.formData[prop];
-				}
-		
-				// 解决没有检验规则的情况下，抛出错误的问题
-				const ruleLen = this.itemRules.rules && this.itemRules.rules.length;
-				if (!this.validator || !ruleLen || ruleLen === 0) return;
-		
-				// 检验时机
-				const isRequiredField = _isRequiredField(this.itemRules.rules || []);
-				let result = null;
-				// 只有等于 bind 时 ，才能开启时实校验
-				if (validateTrigger === 'bind' || formtrigger) {
-					// 校验当前表单项
-					result = await this.validator.validateUpdate({
-							[prop]: value
-						},
-						formData
-					);
-		
-					// 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
-					if (!isRequiredField && (value === undefined || value === '')) {
-						result = null;
-					}
-		
-					// 判断错误信息显示类型
-					if (result && result.message) {
-						if (errShowType === 'undertext') {
-							// 获取错误信息
-							this.errMsg = !result? '': result.message;
-						}
-						if (errShowType === 'toast') {
-							uni.showToast({
-								title: result.message || '校验错误',
-								icon: 'none'
-							});
-						}
-						if (errShowType === 'modal') {
-							uni.showModal({
-								title: '提示',
-								content: result.message || '校验错误'
-							});
-						}
-					} else {
-						this.errMsg = ''
-					}
-					// 通知 form 组件更新事件
-					validateCheck(result? result: null)
-				} else {
-					this.errMsg = '';
-				}
-				return result? result: null;
-			},
-			
-			/**
-			 * 初始组件数据
-			 */
-			init(type = false) {
-				const { 
-					validator, 
-					formRules, 
-					childrens, 
-					formData, 
-					localData, 
-					_realProp, 
-					labelWidth, 
-					_getDataValue, 
-					_setDataValue 
-				} = this.form || {};
-				// 对齐方式
-				this.localLabelAlign = this._justifyContent();
-				// 宽度
-				this.localLabelWidth = this._labelWidthUnit(labelWidth);
-				// 标签位置
-				this.localLabelPos = this.labelPosition || this._labelPosition();
-				// 将需要校验的子组件加入form 队列
-				this.form && type && childrens.push(this)
-		
-				if (!validator || !formRules) return
-				// 判断第一个 item
-				if (!this.form.isFirstBorder) {
-					this.form.isFirstBorder = true;
-					this.isFirstBorder = true;
-				}
-		
-				// 判断 group 里的第一个 item
-				if (this.group) {
-					if (!this.group.isFirstBorder) {
-						this.group.isFirstBorder = true;
-						this.isFirstBorder = true;
-					}
-				}
-				this.border = this.form.border;
-				// 获取子域的真实名称
-				const prop = _realProp(this.prop)
-				const itemRule = this.userRules || this.rules;
-				if (typeof formRules === 'object' && itemRule) {
-					// 子规则替换父规则
-					formRules[prop] = {
-						rules: itemRule
-					};
-					validator.updateSchema(formRules);
-				}
-				// 注册校验规则
-				const itemRules = formRules[prop] || {};
-				this.itemRules = itemRules;
-				// 注册校验函数
-				this.validator = validator;
-				// 默认值赋予
-				this.itemSetValue(_getDataValue(this.prop, localData))
-			},
-			
-			fuInit() {
-				if (this.form) {
-					const {
-						childrens,
-						formData,
-						_realProp
-					} = this.form;
-					childrens.forEach((item, index) => {
-						if (item === this) {
-							this.form.childrens.splice(index, 1)
-							delete formData[_realProp(item.prop)]
-						}
-					})
-				}
-			},
-			
-			// 设置item 的值
-			itemSetValue(value) {
-				const prop = this.form._realProp(this.prop)
-				const rules = this.itemRules.rules || [];
-				const val = this.form._getValue(prop, value, rules)
-				this.form._setDataValue(prop, this.form.formData, val)
-				return val
-			},
-		
-			/**
-			 * 移除该表单项的校验结果
-			 */
-			clearValidate() {
-				this.errMsg = '';
-			},
-		
-			// 是否显示星号
-			_isRequired() {
-				return this.required
-			},
-		
-			// 处理对齐方式
-			_justifyContent() {
-				if (this.form) {
-					const {
-						labelAlign
-					} = this.form;
-					let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
-					if (labelAli === 'left') return 'flex-start';
-					if (labelAli === 'center') return 'center';
-					if (labelAli === 'right') return 'flex-end';
-				}
-				return 'flex-start';
-			},
-			
-			// 处理 label宽度单位 ,继承父元素的值
-			_labelWidthUnit(labelWidth) {
-				return this.num2px(this.labelWidth? this.labelWidth : (labelWidth || (this.label? 70: 'auto')))
-			},
-			
-			// 处理 label 位置
-			_labelPosition() {
-				if (this.form) return this.form.labelPosition || 'left'
-				return 'left'
-			},
-		
-			/**
-			 * 触发时机
-			 * @param {Object} rule 当前规则内时机
-			 * @param {Object} itemRlue 当前组件时机
-			 * @param {Object} parentRule 父组件时机
-			 */
-			isTrigger(rule, itemRlue, parentRule) {
-				// bind submit
-				if (rule === 'submit' || !rule) {
-					if (rule === undefined) {
-						if (itemRlue !== 'bind') {
-							if (!itemRlue) {
-								return parentRule === '' ? 'bind' : 'submit';
-							}
-							return 'submit';
-						}
-						return 'bind';
-					}
-					return 'submit';
-				}
-				return 'bind';
-			},
-			
-			num2px(num) {
-				if (typeof num === 'number') {
-					return `${num}px`
-				}
-				return num
-			}
-		},
-		watch: {
-			// 规则发生变化通知子组件更新
-			'form.formRules'(val) {
-				// 处理头条vue3 watch不生效的问题
-				// #ifndef MP-TOUTIAO
-				this.init()
-				// #endif
-			},
-			'form.labelWidth'(val) {
-				// 宽度
-				this.localLabelWidth = this._labelWidthUnit(val)
-		
-			},
-			'form.labelPosition'(val) {
-				// 标签位置
-				this.localLabelPos = this.labelPosition || this._labelPosition()
-			},
-			'form.labelAlign'(val) {
-				// 标签对齐方式
-				this.localLabelAlign = this._justifyContent();
-			}
-		},
-		// #ifndef VUE3
-		destroyed() {
-			if (this.__isUnmounted) return
-			this.fuInit()
-		},
-		// #endif
-		// #ifdef VUE3
-		unmounted() {
-			this.__isUnmounted = true;
-			this.fuInit()
-		},
-		// #endif
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	.fu-form-item {
-		@include flex(row);
-		position: relative;
-		/* #ifdef APP-NVUE */
-		// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
-		padding-bottom: 22px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		margin-bottom: 22px;
-		/* #endif */
-	
-		&__label {
-			@include flex(row);
-			align-items: center;
-			text-align: left;
-			font-size: 14px;
-			color: #606266;
-			height: 40px;
-			padding: 0 12px 0 0;
-			/* #ifndef APP-NVUE */
-			vertical-align: middle;
-			flex: 0 0 auto;
-			box-sizing: border-box;
-			/* #endif */
-			
-			&.no-label {
-				padding: 0;
-			}
-		}
-	
-		&__content {
-			/* #ifndef MP-TOUTIAO */
-			// display: flex;
-			// align-items: center;
-			/* #endif */
-			position: relative;
-			font-size: 14px;
-			flex: 1;
-			/* #ifndef APP-NVUE */
-			box-sizing: border-box;
-			/* #endif */
-			flex-direction: row;
-	
-			/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
-			// 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
-			&>fu-easyinput,
-			&>fu-data-picker {
-				width: 100%;
-			}
-			/* #endif */
-		}
-	
-		& .fu-form-item__nuve-content {
-			@include flex(column);
-			flex: 1;
-		}
-	
-		&__error {
-			color: #f56c6c;
-			font-size: 12px;
-			line-height: 1;
-			padding-top: 4px;
-			position: absolute;
-			/* #ifndef APP-NVUE */
-			top: 100%;
-			left: 0;
-			transition: transform 0.3s;
-			transform: translateY(-100%);
-			/* #endif */
-			/* #ifdef APP-NVUE */
-			bottom: 5px;
-			/* #endif */
-	
-			opacity: 0;
-	
-			.error-text {
-				// 只有 nvue 下这个样式才生效
-				color: #f56c6c;
-				font-size: 12px;
-			}
-	
-			&.msg--active {
-				opacity: 1;
-				transform: translateY(0%);
-			}
-		}
-	
-		// 位置修饰样式
-		&.is-direction-left {
-			flex-direction: row;
-		}
-	
-		&.is-direction-top {
-			flex-direction: column;
-	
-			.fu-form-item__label {
-				padding: 0 0 8px;
-				text-align: left;
-				/* #ifndef APP-NVUE */
-				white-space: initial;
-				/* #endif */
-			}
-		}
-	
-		.is-required {
-			color: #dd524d;
-			font-weight: bold;
-		}
-	}
-	
-	
-	.fu-form-item--border {
-		margin-bottom: 0;
-		padding: 10px 0;
-		border-top: 1px #eeeeee solid;
-	
-		/* #ifndef APP-NVUE */
-		.fu-form-item__content {
-			flex-direction: column;
-			justify-content: flex-start;
-			align-items: flex-start;
-	
-			.fu-form-item__error {
-				position: relative;
-				top: 5px;
-				left: 0;
-				padding-top: 0;
-			}
-		}
-		/* #endif */
-	
-		/* #ifdef APP-NVUE */
-		@include flex(column);
-	
-		.fu-form-item__error {
-			position: relative;
-			top: 0px;
-			left: 0;
-			padding-top: 0;
-			margin-top: 5px;
-		}
-		/* #endif */
-	}
-	
-	.is-first-border {
-		/* #ifndef APP-NVUE */
-		border: none;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		border-width: 0;
-		/* #endif */
-	}
-</style>

package/components/fu-form-item/props.js

@@ -1,66 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 表单校验规则
-		 * @default null
-		 */
-		rules: {
-			type: Array,
-			default () {
-				return null
-			}
-		},
-		/**
-		 * @description 表单域的属性名，在使用校验规则时必填
-		 */
-		prop: {
-			type: [String, Array],
-			default: ''
-		},
-		/**
-		 * @description 是否必填，左边显示红色"*"号
-		 * @default false
-		 */
-		required: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 输入框左边的文字提示
-		 */
-		label: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description label的宽度
-		 */
-		labelWidth: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description label 居中方式
-		 * @values 'left' - 左对齐， 'center' - 居中, 'right' - 右对齐
-		 * @default 'left'
-		 */
-		labelAlign: {
-			type: String,
-			default: 'left'
-		},
-		/**
-		 * @description 强制显示错误信息
-		 */
-		message: {
-			type: [String, Boolean],
-			default: ''
-		},
-		/**
-		 * @description label的文字的位置，优先级高于fu-form组件中的labelPosition
-		 */
-		labelPosition: {
-			type: String,
-			default: ''
-		}
-	},
-}

package/components/fu-grid/fu-grid.vue

@@ -1,113 +0,0 @@
-<template>
-	<view class="fu-grid-wrap">
-		<view 
-			:id="elId" 
-			ref="fu-grid" 
-			class="fu-grid" 
-			:class="{ 'fu-grid--border': showBorder }" 
-			:style="{ 'border-left-color': borderColor}">
-			<slot />
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	/**
-	 * Grid 宫格
-	 * @description 此组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件（badge），或者图标等，也可以扩展为左右滑动的轮播形式
-	 * @property {Number} column 宫格的列数
-	 * @property {String} borderColor 边框颜色
-	 * @property {Boolean} showBorder = [true|false] 是否显示边框（默认 true）
-	 * @property {Boolean} square = [true|false] 是否方形显示（默认 true）
-	 * @property {Boolean} highlight = [true|false] 点击背景是否高亮（默认 true）
-	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
-	 */
-	export default {
-		name: 'FuGrid',
-		emits:['change'],
-		mixins: [mpMixin, mixin, props],
-		provide() {
-			return {
-				grid: this
-			}
-		},
-		data() {
-			const elId = this.$fu.uuid();
-			return {
-				elId,
-				width: 0
-			}
-		},
-		created() {
-			this.children = [];
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				this.$nextTick(() => {
-					this.getSize((width) => {
-						this.children.forEach(item => item.width = width)
-					})
-				})
-			},
-			
-			change(e) {
-				this.$emit('change', e)
-			},
-			
-			getSize(fn) {
-				// #ifndef APP-NVUE
-				this.$fuGetRect(`#${this.elId}`).then(res => {
-					this.width = parseInt((res.width - 1) / this.column) + 'px';
-					fn(this.width)
-				})
-				// #endif
-				// #ifdef APP-NVUE
-				dom.getComponentRect(this.$refs['fu-grid'], (res) => {
-					this.width = parseInt((res.size.width - 1) / this.column) + 'px';
-					fn(this.width)
-				})
-				// #endif
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	$border-color: #D2D2D2;
-	
-	.fu-grid-wrap {
-		@include flex(column);
-		flex: 1;
-		/* #ifdef H5 */
-		width: 100%;
-		/* #endif */
-	}
-
-	.fu-grid {
-		@include flex(row);
-		flex-wrap: wrap;
-	}
-
-	.fu-grid--border {
-		position: relative;
-		/* #ifdef APP-NVUE */
-		border-left-color: $border-color;
-		border-left-style: solid;
-		border-left-width: 0.5px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		z-index: 1;
-		border-left: 1px solid $border-color;
-		/* #endif */
-	}
-</style>