fusions-ui 1.2.4 → 1.2.6

package/components/fu-text/value.js

@@ -11,7 +11,7 @@ export default {
 						this.$fu.error('金额模式下，text参数需要为金额格式');
 					}
 					// 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
-					if (this.$fu.func(format)) {
+					if (this.$fu.isFunc(format)) {
 						// 如果用户传入的是函数，使用函数格式化
 						return format(text)
 					}
@@ -20,9 +20,9 @@ export default {
 					break
 				case 'date':
 					// 判断是否合法的日期或者时间戳
-					!this.$fu.date(text) && this.$fu.error('日期模式下，text参数需要为日期或时间戳格式')
+					!this.$fu.checkDate(text) && this.$fu.error('日期模式下，text参数需要为日期或时间戳格式')
 					// 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
-					if (this.$fu.func(format)) {
+					if (this.$fu.isFunc(format)) {
 						// 如果用户传入的是函数，使用函数格式化
 						return format(text)
 					} if (format) {
@@ -35,7 +35,7 @@ export default {
 				case 'phone':
 					// 判断是否合法的手机号
 					// !mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
-					if (this.$fu.func(format)) {
+					if (this.$fu.isFunc(format)) {
 						// 如果用户传入的是函数，使用函数格式化
 						return format(text)
 					} if (format === 'encrypt') {
@@ -47,7 +47,7 @@ export default {
 				case 'name':
 					// 判断是否合法的字符粗
 					!(typeof (text) === 'string') && this.$fu.error('姓名模式下，text参数需要为字符串格式')
-					if (this.$fu.func(format)) {
+					if (this.$fu.isFunc(format)) {
 						// 如果用户传入的是函数，使用函数格式化
 						return format(text)
 					} if (format === 'encrypt') {
@@ -58,7 +58,7 @@ export default {
 					break
 				case 'link':
 					// 判断是否合法的字符粗
-					!this.$fu.url(href) && this.$fu.error('超链接模式下，href参数需要为URL格式')
+					!this.$fu.isUrl(href) && this.$fu.error('超链接模式下，href参数需要为URL格式')
 					return text
 					break
 				default:

package/components/fu-textarea/fu-textarea.vue

@@ -67,10 +67,10 @@
 	 * 	@value surround 四周边框
 	 * 	@value bottom 底部边框
 	 * @property {String} borderColor 边框颜色（默认 '#dadbde'）
-	 * @property {String,Number} radius 定义圆角（默认 5）
      * @property {String,Number} size 自定义字体大小（默认 14）
-	 * @property {String,Object} customStyle 自定义外部样式 
+	 * @property {String,Object} customStyle 定义需要用到的外部样式
 	 * @event {Function} formatter 内容式化函数
+	 * 
 	 * @event {Function(e)} focus 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
 	 * @event {Function(e)} blur 输入框失去焦点时触发，event.detail = {value, cursor}
 	 * @event {Function(e)} linechange 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
@@ -127,14 +127,14 @@
 			// 组件的样式
 			textareaStyle() {
 				const style = {
-					borderRadius: this.$fu.addUnit(this.radius),
-					borderColor: this.borderColor
+					borderColor: this.borderColor,
+					backgroundColor: this.disabled && this.disabledColor
 				};
 				// #ifdef APP-NVUE
 				// 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距
 				if (this.$fu.os() === "android") {
 						style.paddingTop = "6px";
-						style.paddingLeft = "9px";
+						style.paddingLeft = "6px";
 						style.paddingBottom = "3px";
 						style.paddingRight = "6px";
 				}
@@ -231,24 +231,20 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
 	$color_dadbde: #dadbde;
+	$color-disabled: #F5F7FA;
 	
 	.fu-textarea {
-		border-radius: 5px;
-		background-color: #fff;
+		@include flex(row);
+		background-color: #ffffff;
 		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		flex-direction: row;
-		/* #endif */
 		flex: 1;
-		padding: 6px 10px;
+		padding: 9px 12px;
 		
 		&__field {
 			flex: 1;
-			font-size: 15px;
+			font-size: 14px;
 			color: #333333;
 			width: 100%;
 			/* #ifdef MP-ALIPAY */
@@ -257,7 +253,7 @@
 		}
 		
 		&--radius {
-			border-radius: 4px;
+			border-radius: 5px;
 		}
 		
 		&--no-radius {
@@ -265,7 +261,7 @@
 		}
 		
 		&--disabled {
-			background-color: #f3f5f7;
+			background-color: $color-disabled;
 		}
 		
 		&__count {

package/components/fu-textarea/props.js

@@ -1,6 +1,8 @@
 export default {
 	props: {
-		// 输入框的内容
+		/**
+		 * @description 输入框的内容
+		 */
 		value: {
 			type: [String,Number],
 			default: ''
@@ -9,122 +11,193 @@ export default {
 			type: [String,Number],
 			default: ''
 		},
-		// 输入框为空时占位符
+		/**
+		 * @description 输入框为空时占位符
+		 * @default null
+		 */
 		placeholder: {
 			type: [String,Number],
 			default: null
 		},
-		// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/（ 默认 'textarea-placeholder' ）
+		/**
+		 * @description 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写:depp(...)
+		 * @default 'textarea-placeholder'
+		 */
 		placeholderClass: {
 			type: String,
 			default: 'textarea-placeholder'
 		},
-		// 指定placeholder的样式
+		/**
+		 * @description 指定placeholder的样式
+		 * @default 'color: #CCCCCC'
+		 */
 		placeholderStyle: {
 			type: [String,Object],
 			default: 'color: #CCCCCC'
 		},
-		// 输入框高度
+		/**
+		 * @description 输入框高度
+		 * @default 70
+		 */
 		height: {
 			type: [String,Number],
 			default: 70
 		},
-		// 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效
+		/**
+		 * @description 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效
+		 * @default 'done'
+		 */
 		confirmType: {
 			type: String,
 			default: 'done'
 		},
-		// 是否禁用（默认 false）
+		/**
+		 * @description 是否禁用
+		 * @default false
+		 */
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		// 是否显示统计字数（默认 false）
+		/**
+		 * @description 禁用状态时的背景色
+		 * @default '#F5F7FA'
+		 */
+		disabledColor: {
+			type: String,
+			default: '#F5F7FA'
+		},
+		/**
+		 * @description 是否显示统计字数
+		 * @default false
+		 */
 		count: {
 			type: Boolean,
 			default: false
 		},
-		// 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现（默认 false）
+		/**
+		 * @description 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现
+		 * @default false
+		 */
 		focus: {
 			type: Boolean,
 			default: false
 		},
-		// 是否自动增加高度（默认 false）
+		/**
+		 * @description 是否自动增加高度
+		 * @default false
+		 */
 		autoHeight: {
 			type: Boolean,
 			default: false
 		},
-		// 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true（默认 false）
+		/**
+		 * @description 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
+		 * @default false
+		 */
 		fixed: {
 			type: Boolean,
 			default: false
 		},
-		// 指定光标与键盘的距离
+		/**
+		 * @description 指定光标与键盘的距离
+		 */
 		cursorSpacing: {
 			type: Number,
 			default: 0
 		},
-		// 指定focus时的光标位置
+		/**
+		 * @description 指定focus时的光标位置
+		 */
 		cursor: {
 			type: [String,Number],
 			default: ''
 		},
-		// 是否显示键盘上方带有“完成”按钮那一栏（默认 true）
+		/**
+		 * @description 是否显示键盘上方带有“完成”按钮那一栏
+		 * @default true
+		 */
 		showConfirmBar: {
 			type: Boolean,
 			default: true
 		},
-		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认 -1）
+		/**
+		 * @description 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+		 * @default -1
+		 */
 		selectionStart: {
 			type: Number,
 			default: -1
 		},
-		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认 -1）
+		/**
+		 * @description 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+		 * @default -1
+		 */
 		selectionEnd: {
 			type: Number,
 			default: -1
 		},
-		// 键盘弹起时，是否自动上推页面（默认 true）
+		/**
+		 * @description 键盘弹起时，是否自动上推页面
+		 * @default true
+		 */
 		adjustPosition: {
 			type: Boolean,
 			default: true
 		},
-		// 是否去掉 iOS 下的默认内边距，只微信小程序有效（默认 false）
+		/**
+		 * @description 是否去掉 iOS 下的默认内边距，只微信小程序有效
+		 * @default false
+		 */
 		disableDefaultPadding: {
 			type: Boolean,
 			default: false
 		},
-		// focus时，点击页面的时候不收起键盘，只微信小程序有效（默认 false）
+		/**
+		 * @description focus时，点击页面的时候不收起键盘，只微信小程序有效
+		 * @default false
+		 */
 		holdKeyboard: {
 			type: Boolean,
 			default: false
 		},
-		// 最大输入长度，设置为 -1 的时候不限制最大长度（默认 140）
+		/**
+		 * @description 最大输入长度，设置为 -1 的时候不限制最大长度
+		 * @default 140
+		 */
 		maxlength: {
 			type: [String,Number],
 			default: 140
 		},
-		// 边框类型，surround-四周边框，bottom-底部边框（默认 'surround'）
+		/**
+		 * @description 边框类型
+		 * @values 'surround' - 四周边框, 'bottom' - 底部边框
+		 * @default 'surround'
+		 */
 		border: {
 			type: String,
 			default: 'surround'
 		},
-		// 边框颜色（默认 '#dadbde'）
+		/**
+		 * @description 边框颜色
+		 * @default '#dadbde'
+		 */
 		borderColor: {
 			type: String,
 			default: '#dadbde'
 		},
-		// 定义圆角（默认 5）
-		radius: {
-			type: [String,Number],
-			default: 5
-		},
-		// 文本域字体大小（默认 '14px'）
+		/**
+		 * @description 文本域字体大小
+		 * @default 14
+		 */
 		size: {
 			type: [String,Number],
-			default: '14px'
+			default: 14
 		},
-		// 用于处理或者过滤输入框内容的方法
+		/**
+		 * @description 用于处理或者过滤输入框内容的方法
+		 * @default null
+		 */
 		formatter: {
 			type: [Function,null],
 			default: null

package/components/fu-timeaxis/fu-timeaxis.vue

@@ -32,7 +32,7 @@
 		top: 0;
 		width: 1px;
 		bottom: 0;
-		border-left: 1px solid #ddd;
+		border-left: 1px solid #dddddd;
 		transform-origin: 0 0;
 		transform: scaleX(0.5);
 		will-change: transform;

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

@@ -14,12 +14,16 @@
 	export default {
 		name: "FuTimeaxisItem",
 		props: {
-			// 左侧节点背景颜色
+			/**
+			 * @description 左侧节点背景颜色
+			 */
 			bgColor: {
 				type: String,
 				default: ""
 			},
-			// 左侧节点绝对定位top值
+			/**
+			 * @description 左侧节点绝对定位top值
+			 */
 			nodeTop: {
 				type: [String,Number],
 				default: 0
@@ -40,7 +44,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
 	
 	.fu-timeaxis-item {
 		@include flex(column);
@@ -59,6 +63,6 @@
 		align-items: center;
 		justify-content: center;
 		z-index: 99;
-		font-size: 24rpx;
+		font-size: 12px;
 	}
 </style>

package/components/fu-transition/fu-transition.vue

@@ -1,22 +1,24 @@
 <template>
 	<!-- #ifndef APP-NVUE -->
-	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+	<view v-if="isShow" ref="ani" :animation="animationData" :style="transformStyle" @click="handleClick">
 		<slot></slot>
 	</view>
 	<!-- #endif -->
 	<!-- #ifdef APP-NVUE -->
-	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+	<view v-if="isShow" ref="ani" :animation="animationData" :style="transformStyle" @click="handleClick">
 		<slot></slot>
 	</view>
 	<!-- #endif -->
 </template>
 
 <script>
+	import mixin from '../../libs/mixin/mixin.js'
 	import mpMixin from '../../libs/mixin/mpMixin.js'
 	import { createAnimation } from './createAnimation'
+	import props from './props.js'
 	/**
 	 * Transition 过渡动画
-	 * @description 简单过渡动画组件
+	 * @description 此组件为过渡动画
 	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
 	 * @property {Array,String} mode = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
 	 *  @value fade 渐隐渐出过渡
@@ -27,43 +29,12 @@
 	 *  @value zoom-in 由小到大过渡
 	 *  @value zoom-out 由大到小过渡
 	 * @property {Number} duration 过渡动画持续时间
-	 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+	 * @property {Object} customStyle 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
 	 */
 	export default {
 		name: 'FuTransition',
 		emits: ['click', 'change'],
-		mixins: [mpMixin],
-		props: {
-			// 是否展示组件
-			show: {
-				type: Boolean,
-				default: false
-			},
-			// 使用的动画模式
-			mode: {
-				type: [Array, String],
-				default() {
-					return 'fade'
-				}
-			},
-			// 动画的执行时间，单位ms
-			duration: {
-				type: Number,
-				default: 300
-			},
-			// 组件样式
-			styles: {
-				type: Object,
-				default() {
-					return {}
-				}
-			},
-			// 自定义Class
-			customClass:{
-				type: String,
-				default: ''
-			}
-		},
+		mixins: [mixin, mpMixin, props],
 		data() {
 			return {
 				isShow: false,
@@ -91,11 +62,11 @@
 		},
 		computed: {
 			// 初始化动画条件及样式数据
-			transformStyles() {
+			transformStyle() {
 				const style = {
 					transform: this.transform,
 					opacity: this.opacity,
-					...this.$fu.addStyle(this.styles),
+					...this.$fu.addStyle(this.customStyle),
 					'transition-duration': this.duration / 1000 + 's'
 				}
 				return this.$fu.addStyle(style, 'string');
@@ -121,14 +92,16 @@
 				}
 				this.animation = createAnimation(Object.assign(this.config, obj), this)
 			},
+			
 			/**
 			 * 点击组件触发回调
 			 */
-			onClick() {
+			handleClick() {
 				this.$emit('click', {
 					detail: this.isShow
 				})
 			},
+			
 			/**
 			 * ref 触发 动画分组
 			 * @param {Object} obj
@@ -146,9 +119,12 @@
 						console.error(`方法 ${i} 不存在`)
 					}
 				}
+				
 				this.animation.step(config)
+				
 				return this
 			},
+			
 			/**
 			 *  ref 触发 执行动画
 			 */
@@ -156,7 +132,10 @@
 				if (!this.animation) return
 				this.animation.run(fn)
 			},
-			// 开始过度动画
+			
+			/**
+			 * 开始过度动画
+			 */
 			open() {
 				clearTimeout(this.timer)
 				this.transform = '';
@@ -188,7 +167,10 @@
 					}, 20)
 				})
 			},
-			// 关闭过度动画
+			
+			/**
+			 * 关闭过度动画
+			 */
 			close(type) {
 				if (!this.animation) return
 				this.tranfromInit(true).step().run(() => {
@@ -203,16 +185,19 @@
 					})
 				})
 			},
-			// 处理动画开始前的默认样式
+			
+			/**
+			 * 处理动画开始前的默认样式
+			 */
 			styleInit(type) {
-				let styles = {
+				let style = {
 					transform: ''
 				};
 				let buildStyle = (type, mode) => {
 					if (mode === 'fade') {
-						styles.opacity = this.animationType(type)[mode];
+						style.opacity = this.animationType(type)[mode];
 					} else {
-						styles.transform += this.animationType(type)[mode] + ' ';
+						style.transform += this.animationType(type)[mode] + ' ';
 					}
 				}
 				if (typeof this.mode === 'string') {
@@ -222,9 +207,12 @@
 						buildStyle(type, mode)
 					})
 				}
-				return styles
+				return style
 			},
-			// 处理内置组合动画
+			
+			/**
+			 * 处理内置组合动画
+			 */
 			tranfromInit(type) {
 				let buildTranfrom = (type, mode) => {
 					let aniNum = null;
@@ -247,6 +235,7 @@
 					}
 					this.animation[this.animationMode()[mode]](aniNum)
 				}
+				
 				if (typeof this.mode === 'string') {
 					buildTranfrom(type, this.mode)
 				} else {
@@ -257,6 +246,10 @@
 
 				return this.animation
 			},
+			
+			/**
+			 * 处理动画类型
+			 */
 			animationType(type) {
 				return {
 					fade: type ? 1 : 0,
@@ -268,7 +261,10 @@
 					'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
 				}
 			},
-			// 内置动画类型与实际动画对应字典
+			
+			/**
+			 * 内置动画类型与实际动画对应字典
+			 */
 			animationMode() {
 				return {
 					fade: 'opacity',
@@ -280,7 +276,10 @@
 					'zoom-out': 'scale'
 				}
 			},
-			// 驼峰转中横线
+			
+			/**
+			 * 驼峰转中横线
+			 */
 			toLine(name) {
 				return name.replace(/([A-Z])/g, '-$1').toLowerCase()
 			}

package/components/fu-transition/props.js

@@ -0,0 +1,21 @@
+export default {
+	props: {
+		// 是否展示组件
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 使用的动画模式
+		mode: {
+			type: [Array, String],
+			default() {
+				return 'fade'
+			}
+		},
+		// 动画的执行时间，单位ms
+		duration: {
+			type: Number,
+			default: 300
+		}
+	}
+}

package/components/fu-upload/fu-upload.vue

@@ -92,11 +92,13 @@
 	 * @property {Boolean} showFileList = [true|false] 是否显示已上传的文件列表（默认 true）
 	 * 	@value true 显示列表
 	 * 	@value false 隐藏列表
+	 * 
 	 * @event {Function} select 选择文件后触发
 	 * @event {Function} progress 文件上传时触发
 	 * @event {Function} success 上传成功触发
 	 * @event {Function} fail 上传失败触发
 	 * @event {Function} delete 文件从列表移除时触发
+	 * @example <fu-upload></fu-upload>
 	 */
 	export default {
 		name:"FuUpload",
@@ -530,7 +532,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
 	
 	.fu-upload {
 		/* #ifndef APP-NVUE */